360° Care Blog System Documentation

Complete guide for creating and managing blog content on the 360° Care website. This documentation covers everything from basic setup to advanced features.

Quick Start

Get up and running in 5 minutes

Jump to tutorial →

Examples

See live blog posts in action

View blog →

Overview

The 360° Care blog system is a modern, TypeScript-based content management solution built on Next.js 14 with the App Router. It provides a fully-featured blogging platform with SEO optimization, social sharing, and static site generation for optimal performance.

Architecture

Unlike traditional markdown-based blog systems, this implementation uses TypeScript files as the content source. Each blog post is a TypeScript module that exports a structured data object containing all post metadata and content.

Pro tip: Using TypeScript for content provides type safety and better IDE support when creating posts.

The blog system follows a clear, organized structure:

Project Structure

bash

src/
├── app/
│   └── blog/
│       ├── page.tsx                 # Blog archive/listing page
│       ├── [slug]/
│       │   └── page.tsx             # Dynamic blog post pages
│       └── notFound.tsx             # 404 page for missing posts
├── components/
│   └── blog/
│       ├── BlogTemplate.tsx        # Main blog post template
│       ├── BlogArchives.tsx        # Blog listing component
│       ├── BlogClientPage.tsx      # Client-side wrapper
│       └── MarkdownRenderer.tsx    # Custom markdown renderer
└── lib/
    └── blogs/
        ├── index.ts                 # Blog index (imports all posts)
        └── articles/
            └── 2025/                # Year-based organization
                ├── elderCareConsulting.ts
                ├── politicalGame.ts
                └── [other blog posts...]

Blog Post Structure

Each blog post is a TypeScript file that exports a blog object with the following interface:

BlogPost Interface

typescript

interface BlogPost {
  // Core Metadata
  id: string;                    // Unique identifier
  title: string;                 // Post title
  slug: string;                  // URL slug
  excerpt: string;               // Short description (150-160 chars)
  category: string;              // Post category

  // Author Information
  author: {
    name: string;
    photo: string;               // Author photo URL
    bio: string;                 // Author biography
  };

  // Publishing Details
  publishedAt: string;          // ISO date string
  featured: boolean;            // Featured post flag
  featuredImage: string;        // Hero image URL

  // Content
  content: string;              // Markdown content
  tags: string[];               // Post tags

  // SEO Metadata
  seo: {
    title: string;              // SEO title
    description: string;        // Meta description
    openGraph: {
      title: string;
      description: string;
      images: Array<{
        url: string;
        width: number;
        height: number;
        alt: string;
      }>;
    };
    twitter: {
      card: string;
      title: string;
      description: string;
      images: string[];
    };
  };
}

Key Components

Adding a New Blog Post

Quick tip: Copy an existing blog post file as a template to get started quickly!

Step 1: Create the Blog Post File

Create a new TypeScript file in src/lib/blogs/articles/[YEAR]/:

src/lib/blogs/articles/2025/newPost.ts

typescript

import { BlogPost } from '@/lib/types';

export const newPost: BlogPost = {
  id: 'unique-post-id',
  title: 'Your Blog Post Title',
  slug: 'your-blog-post-url',
  excerpt: 'A brief description of your post (150-160 characters)...',
  category: 'Elder Care',
  author: {
    name: 'Author Name',
    photo: '/images/authors/author.jpg',
    bio: 'Author biography...'
  },
  publishedAt: '2025-01-15T12:00:00Z',
  featured: false,
  featuredImage: '/images/blog/featured-image.jpg',
  tags: ['tag1', 'tag2', 'tag3'],
  content: `
# Your Markdown Content Here

Write your blog post using markdown syntax...
  `,
  seo: {
    title: 'SEO Title | 360° Care',
    description: 'SEO meta description...',
    openGraph: {
      title: 'Open Graph Title',
      description: 'Open Graph description...',
      images: [{
        url: 'https://yourdomain.com/og-image.jpg',
        width: 1200,
        height: 630,
        alt: 'Image description'
      }]
    },
    twitter: {
      card: 'summary_large_image',
      title: 'Twitter Card Title',
      description: 'Twitter description...',
      images: ['https://yourdomain.com/twitter-image.jpg']
    }
  }
};

Step 2: Add to Blog Index

Import and add your post to src/lib/blogs/index.ts:

src/lib/blogs/index.ts

typescript

import { newPost } from './articles/2025/newPost';

export const blogs = [
  // If featured, add as first item
  newPost,
  // Other posts...
  elderCareConsulting,
  politicalGame,
  // ...
];

Step 3: Add Images

Place any images in the appropriate public directories:

Author photos: /public/images/authors/
Featured images: /public/images/blog/
Content images: /public/images/blog/content/

Features

SEO Optimization

• Dynamic metadata generation
• Open Graph tags
• Twitter Card support
• XML sitemap integration
• Canonical URLs

Performance

• Static Site Generation
• Image optimization
• Lazy loading
• Minimal JavaScript bundle
• Fast page transitions

Social Sharing

• Floating share buttons
• Pre-filled share content
• Twitter/X support
• Facebook integration
• Email sharing

User Experience

• Responsive design
• Mobile-friendly
• Accessible markup
• Related posts
• Search functionality

Best Practices

Keep excerpts between 150-160 characters
Use descriptive, SEO-friendly slugs
Include relevant tags (3-5 per post)
Optimize images before uploading (WebP preferred)
Write engaging meta descriptions

Test posts locally before deployment
Validate markdown syntax
Check all links work correctly
Ensure images are optimized
Test social sharing functionality

Include target keywords in title
Write unique meta descriptions
Use proper heading hierarchy
Include alt text for all images
Internal linking to related posts

Troubleshooting

Post not appearing?

• Verify post is imported in index.ts
• Check slug matches URL
• Ensure valid TypeScript syntax

Images not loading?

• Verify image paths are correct
• Check image exists in public directory
• Ensure proper image format

SEO issues?

• Validate metadata structure
• Check Open Graph debugger
• Verify sitemap generation