NutriScan Blog System

This blog system is built using VitePress and Vue. It uses a code-based approach for managing categories and posts.

Blog Management

The blog is managed directly through code files. No command-line tools are provided for blog management.

Managing Blog Categories

Blog categories are managed directly in the code. To add, edit, or remove categories:

1. Open docs/.vitepress/theme/blog-data.js
2. Modify the categories array:

export const categories = [
  { id: 'getting-started', name: 'Getting Started' },
  { id: 'nutrition', name: 'Nutrition' },
  // Add new categories here
  { id: 'new-category-id', name: 'New Category Name' }
];

Adding a New Category

1. Add a new object to the categories array with:
   • id: Unique identifier in kebab-case (lowercase with hyphens)
   • name: Display name for the category

Removing a Category

1. Remove the category object from the array
2. Check all blog posts to ensure they don't reference the removed category

Managing Blog Posts

The blog posts are managed in two places that must be kept in sync:

1. Markdown files in docs/blog/posts/
2. Post metadata in docs/.vitepress/theme/blog-data.js

Adding a New Post

1. Create a new markdown file in docs/blog/posts/ using the template
2. Add the post metadata to the data array in blog-data.js
3. Place any images in docs/public/images/blog/

Removing a Post

1. Remove the markdown file from docs/blog/posts/
2. Remove the corresponding entry from the data array in blog-data.js
3. Remove any unused images from docs/public/images/blog/

Important Note

Always ensure that both the markdown file and the data entry exist. The site will have errors if:

• A post is listed in blog-data.js but the markdown file doesn't exist
• A markdown file exists but isn't registered in blog-data.js

Blog Post Guidelines

When creating a new blog post:

1. Copy the template from docs/blog/posts/template.md
2. Update all placeholder content
3. Set categories to use IDs from the blog-data.js file
4. Place images in docs/public/images/blog/
5. Follow SEO best practices for content

Blog Features

• Category filtering
• Responsive design
• SEO optimized
• Image optimization
• Rich metadata for social sharing

Technical Implementation

The blog system consists of several Vue components:

• BlogList.vue: Displays the list of blog posts with filtering
• BlogPost.vue: Layout for individual blog posts
• BlogCategories.vue: Component for displaying/filtering categories

The data for blog posts and categories is stored in blog-data.js.