Advanced Markdown Features Demo

This post demonstrates all the advanced markdown features supported by the GitHub-synced blog system.

Syntax Highlighting

JavaScript

// Modern async/await with error handling
async function fetchBlogPosts() {
  try {
    const response = await fetch('/api/posts');
    const posts = await response.json();
    return posts.filter(post => !post.draft);
  } catch (error) {
    console.error('Failed to fetch posts:', error);
    return [];
  }
}

// React component example
const BlogPost = ({ title, content, tags }) => {
  return (
    <article className="blog-post">
      <h1>{title}</h1>
      <div className="tags">
        {tags.map(tag => (
          <span key={tag} className="tag">{tag}</span>
        ))}
      </div>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </article>
  );
};

Python

# Data processing with type hints
from typing import List, Dict, Optional
import asyncio

class BlogManager:
    def __init__(self, github_token: str):
        self.token = github_token
        self.posts: List[Dict] = []
    
    async def fetch_posts(self) -> List[Dict]:
        """Fetch all blog posts from GitHub repository."""
        async with aiohttp.ClientSession() as session:
            async with session.get(
                'https://api.github.com/repos/user/blog-content/contents/posts',
                headers={'Authorization': f'token {self.token}'}
            ) as response:
                return await response.json()

# Usage example
async def main():
    manager = BlogManager(os.getenv('GITHUB_TOKEN'))
    posts = await manager.fetch_posts()
    print(f"Loaded {len(posts)} posts")

if __name__ == "__main__":
    asyncio.run(main())

TypeScript

// Advanced TypeScript with generics and utility types
interface BlogPost {
  id: string;
  title: string;
  content: string;
  tags: string[];
  publishedAt: Date;
  author: Author;
}

interface Author {
  name: string;
  email: string;
  avatar?: string;
}

type PostSummary = Pick<BlogPost, 'id' | 'title' | 'publishedAt'>;
type CreatePostData = Omit<BlogPost, 'id' | 'publishedAt'>;

class ContentManager<T extends BlogPost> {
  private posts: T[] = [];

  async addPost(data: CreatePostData): Promise<T> {
    const post: T = {
      ...data,
      id: crypto.randomUUID(),
      publishedAt: new Date(),
    } as T;
    
    this.posts.push(post);
    return post;
  }

  getPostSummaries(): PostSummary[] {
    return this.posts.map(({ id, title, publishedAt }) => ({
      id,
      title,
      publishedAt,
    }));
  }
}

Mermaid Diagrams

System Architecture

graph TB
    subgraph "Content Creation"
        A[Writer] --> B[Markdown Files]
        B --> C[blog-content Repository]
    end
    
    subgraph "Build Process"
        C --> D[GitHub API]
        D --> E[Astro Build]
        F[Local Content] --> E
        E --> G[Static Site]
    end
    
    subgraph "Deployment"
        G --> H[GitHub Pages]
        H --> I[Custom Domain]
    end
    
    style A fill:#e3f2fd
    style C fill:#f3e5f5
    style E fill:#e8f5e8
    style I fill:#fff3e0

Data Flow

sequenceDiagram
    participant W as Writer
    participant CR as Content Repo
    participant GH as GitHub API
    participant AS as Astro Build
    participant GP as GitHub Pages

    W->>CR: Push new post
    CR->>GH: Webhook trigger
    GH->>AS: Fetch content
    AS->>AS: Generate static site
    AS->>GP: Deploy
    GP->>W: Live blog updated

Component Relationships

classDiagram
    class ContentManager {
        +getAllPosts()
        +getPost(slug)
        +isGitHubEnabled()
    }
    
    class GitHubContentFetcher {
        +fetchAllPosts()
        +fetchPost(slug)
        +isConfigured()
    }
    
    class BlogPost {
        +slug: string
        +title: string
        +content: string
        +date: Date
        +tags: string[]
    }
    
    ContentManager --> GitHubContentFetcher
    ContentManager --> BlogPost
    GitHubContentFetcher --> BlogPost

Tables

Feature	Local Content	GitHub Content	Status
Markdown Parsing	✅	✅	Implemented
Frontmatter	✅	✅	Implemented
Syntax Highlighting	✅	✅	Implemented
Mermaid Diagrams	✅	✅	Implemented
Real-time Updates	❌	✅	Implemented
Offline Fallback	✅	✅	Implemented

Lists and Formatting

Numbered Lists

1. Content Creation: Write markdown posts with frontmatter
2. Version Control: Commit to content repository
3. Automatic Build: GitHub Actions triggers on push
4. Static Generation: Astro builds optimized site
5. Deployment: Site deploys to GitHub Pages

Task Lists

• Set up content collections
• Implement GitHub API integration
• Add syntax highlighting
• Configure Mermaid diagrams
• Create responsive design
• Add dark/light theme toggle
• Add search functionality
• Implement RSS feeds
• Add comment system

Quote Blocks

"The best way to predict the future is to create it."

— Peter Drucker

Pro Tip: Use environment variables to configure GitHub integration without hardcoding sensitive information in your source code.

Inline Elements

You can use bold text, italic text, inline code, and even links to external resources.

The system supports strikethrough text and ==highlighted== text (if your markdown processor supports it).

Math Expressions (if enabled)

Inline math: $E = mc^2$

Block math: $$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

---

Conclusion

This post demonstrates the full power of the GitHub-synced blog system, showing how content from an external repository can be seamlessly integrated with advanced markdown features, syntax highlighting, and interactive diagrams.

The two-repository architecture provides the perfect balance of content management flexibility and technical sophistication! 🚀