Feature: Set up Markdown file structure and parser

Set up Markdown file structure and parser

This is a sub-task for #15

Overview

Establish the foundation for our dynamic blog system by creating an organized file structure for Markdown blog posts and implementing the necessary parsing utilities. This is the first critical step in moving from our static JavaScript array-based approach to a more maintainable and scalable Markdown-based system.

Objectives

• Create a well-organized directory structure for blog content
• Implement robust parsing for Markdown files with frontmatter
• Establish consistent naming conventions and metadata standards
• Build utility functions that will power the blog system

Implementation Tasks

Directory Structure

• Create a src/content/blogs directory as the main container for all blog posts
• Set up category subdirectories (optional, for better organization)
• Create an assets subdirectory within blogs for blog-specific media files
• Add sample blog posts to test the implementation

Dependency Management

• Install gray-matter for frontmatter parsing
• Install react-markdown for rendering Markdown content
• Install vite-plugin-markdown for Vite integration
• Update package.json to include these dependencies

File Naming Convention

• Establish the naming pattern: DD-MM-YYYY-blog-title-slug.md
• Create a utility function to generate valid filenames from titles
• Document the naming convention in the codebase

Frontmatter Structure

• Define required frontmatter fields:

  ---
  title: "Blog Post Title"
  date: "DD-MM-YYYY"
  author: "Author Name"
  authorGithub: "github_username"
  tag: "category-tag"
  description: "Brief description of blog post"
  image: "/path/to/cover-image.jpg"
  ---
  

• Create validation functions for frontmatter

Parsing Utilities

• Create getBlogBySlug.js function to retrieve a single blog by its slug
• Create getAllBlogs.js function to list all blogs with optional filtering
• Implement sorting functionality (by date, popularity, etc.)

Integration with Vite

• Configure Vite plugin for Markdown handling
• Set up appropriate import aliases for blog content

Technical Considerations

• Ensure proper error handling for malformed Markdown files
• Optimize for build performance with many blog posts
• Establish a strategy for handling images within Markdown content

Definition of Done

• Directory structure is created and documented
• All required dependencies are installed and configured
• File naming convention is established and enforced
• Frontmatter structure is defined and validated
• Utility functions are implemented and tested
• Sample blog posts can be successfully parsed and accessed

Review the existing static JavaScript blog approach, package.json, and the proposed src/content/blogs directory before deciding how the Markdown and Vite pieces should fit together. The work is done when the documented structure, dependencies, naming and frontmatter rules, parsing utilities, validation, and sample posts are implemented and the posts can be parsed and accessed.