BlogNow SDK Integration Prompt for Vite React Projects

Context

You are an expert React developer tasked with integrating BlogNow SDK into a Vite React project to create a complete blog system. Based on the analysis of a production implementation, create all necessary files and configurations for a fully functional blog with the following requirements:

Pre-Implementation Analysis

1. Check Existing Project Setup

Before implementing, analyze the existing project to understand:

State Management Library:

• Check if the project uses any state management (Redux, Zustand, Jotai, Valtio, etc.)
• Look for existing stores in src/store, src/stores, lib/store, or similar directories
• Check package.json for state management dependencies
• If no state management exists, ask the user: "No state management library detected. Would you like to proceed with Zustand, or do you prefer Redux Toolkit, Jotai, or another solution?"

Icon Library:

• Check if the project uses any icon library (lucide-react, react-icons, heroicons, etc.)
• Look for existing icon imports in components
• Check package.json for icon library dependencies
• If no icon library exists, proceed with lucide-react

UI Component Library:

• Check if the project uses Material-UI, Chakra UI, Mantine, Ant Design, or other component libraries
• Look for existing component patterns and styling approaches
• Adapt the implementation to match the existing UI patterns

Routing:

• Check if the project uses React Router, Reach Router, or another routing solution
• Look for existing routing configuration
• If no routing exists, ask the user: "No routing library detected. Would you like to proceed with React Router v6?"

Styling:

• Check if the project uses Tailwind CSS, styled-components, CSS modules, or plain CSS
• Adapt the styling approach to match the existing setup

Project Setup Requirements

1. Package Installation

Install the required dependencies:

# Core BlogNow SDK (always required)
npm install @blognow/sdk

# State management (install only if not already present)
npm install zustand  # or user's preferred library

# Icons (install only if not already present)
npm install lucide-react

# Routing (install only if not already present)
npm install react-router-dom

# If using styled-components (only if already in project):
npm install styled-components @types/styled-components

# If using Material-UI (only if already in project):
npm install @mui/material @emotion/react @emotion/styled

2. Environment Configuration

Create/update .env.local:

VITE_BLOGNOW_API_KEY=your_public_api_key_here
VITE_BLOGNOW_BASE_URL=https://api.blognow.tech

Security Note: BlogNow SDK only requires the public API key (VITE_BLOGNOW_API_KEY) which is safe for client-side use. No private API key or server-side routes are needed.

3. Vite Configuration

Update vite.config.ts if needed for image optimization:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  // Optional: Configure for better image handling
  assetsInclude: [
    "**/*.svg",
    "**/*.png",
    "**/*.jpg",
    "**/*.jpeg",
    "**/*.gif",
    "**/*.webp",
  ],
});

Core Implementation Files

4. BlogNow Client Configuration (src/lib/blognow.ts)

import { BlogNowClient } from "@blognow/sdk";

let blogClient: BlogNowClient | null = null;
const apiKey = import.meta.env.VITE_BLOGNOW_API_KEY;
const baseUrl = import.meta.env.VITE_BLOGNOW_BASE_URL;

export const createBlogNowClient = async () => {
  if (!blogClient) {
    if (!apiKey) {
      throw new Error(
        "VITE_BLOGNOW_API_KEY is not configured in environment variables"
      );
    }
    blogClient = new BlogNowClient({ apiKey, baseUrl });
  }
  return blogClient;
};

5. Blog Store (src/stores/blogStore.ts)

Note: Adapt this implementation to match the project's existing state management library.

If using Zustand (example implementation):

import { create } from "zustand";
import { createBlogNowClient } from "@/lib/blognow";
import {
  PaginatedResponse,
  Post,
  PostStatus,
  GetPostsOptions,
} from "@blognow/sdk";

interface BlogState {
  posts: Post[];
  currentPost: Post | null;
  pagination: {
    total: number;
    page: number;
    size: number;
    pages: number;
  };
  loading: boolean;
  error: string | null;
  searchQuery: string;
  selectedTag: string | null;

  // Actions
  fetchPosts: (
    page?: number,
    size?: number,
    query?: string,
    sortBy?: "created_at" | "updated_at" | "published_at",
    sortOrder?: "asc" | "desc"
  ) => Promise<void>;
  fetchPostBySlug: (slug: string) => Promise<void>;
  filterByTag: (tag: string | null) => void;
  setLoading: (loading: boolean) => void;
  setError: (error: string | null) => void;
  clearCurrentPost: () => void;
  resetPagination: () => void;
}

const blogClient = await createBlogNowClient();

export const useBlogStore = create<BlogState>((set, get) => ({
  posts: [],
  currentPost: null,
  loading: false,
  error: null,
  pagination: { page: 1, size: 10, total: 0, pages: 0 },
  searchQuery: "",
  selectedTag: null,

  fetchPosts: async (
    page = 1,
    size = 10,
    query = "",
    sortBy = "published_at",
    sortOrder = "desc"
  ) => {
    const { setLoading, setError } = get();
    try {
      setLoading(true);
      setError(null);

      const result: PaginatedResponse<Post> =
        await blogClient.posts.getPublishedPosts({
          page,
          size,
          query,
          sort_by: sortBy,
          sort_order: sortOrder,
        });

      set((state) => ({
        posts: page === 1 ? result.items : [...state.posts, ...result.items],
        pagination: {
          page: result.page || 1,
          size: result.size || 10,
          total: result.total || 0,
          pages: result.pages || 0,
        },
      }));
    } catch (error) {
      setError(
        error instanceof Error ? error.message : "Failed to fetch posts"
      );
    } finally {
      setLoading(false);
    }
  },

  fetchPostBySlug: async (slug: string) => {
    const { setLoading, setError } = get();
    try {
      setLoading(true);
      setError(null);
      const result: Post = await blogClient.posts.getPost(slug);
      set({ currentPost: result });
    } catch (error) {
      setError(error instanceof Error ? error.message : "Failed to fetch post");
    } finally {
      setLoading(false);
    }
  },

  filterByTag: (tag: string | null) => set({ selectedTag: tag }),
  setLoading: (loading: boolean) => set({ loading }),
  setError: (error: string | null) => set({ error }),
  clearCurrentPost: () => set({ currentPost: null }),
  resetPagination: () =>
    set({
      pagination: { page: 1, size: 10, total: 0, pages: 0 },
    }),
}));

If using Redux Toolkit:

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import { createBlogNowClient } from "@/lib/blognow";
import { PaginatedResponse, Post } from "@blognow/sdk";

// Async thunks
export const fetchPosts = createAsyncThunk(
  "blog/fetchPosts",
  async ({
    page = 1,
    size = 10,
    query = "",
  }: {
    page?: number;
    size?: number;
    query?: string;
  }) => {
    const blogClient = await createBlogNowClient();
    return await blogClient.posts.getPublishedPosts({
      page,
      size,
      query,
      sort_by: "published_at",
      sort_order: "desc",
    });
  }
);

export const fetchPostBySlug = createAsyncThunk(
  "blog/fetchPostBySlug",
  async (slug: string) => {
    const blogClient = await createBlogNowClient();
    return await blogClient.posts.getPost(slug);
  }
);

// Slice
const blogSlice = createSlice({
  name: "blog",
  initialState: {
    posts: [] as Post[],
    currentPost: null as Post | null,
    pagination: { page: 1, size: 10, total: 0, pages: 0 },
    loading: false,
    error: null as string | null,
    searchQuery: "",
    selectedTag: null as string | null,
  },
  reducers: {
    filterByTag: (state, action) => {
      state.selectedTag = action.payload;
    },
    setSearchQuery: (state, action) => {
      state.searchQuery = action.payload;
    },
    clearCurrentPost: (state) => {
      state.currentPost = null;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.loading = false;
        const isFirstPage = action.meta.arg.page === 1;
        state.posts = isFirstPage
          ? action.payload.items
          : [...state.posts, ...action.payload.items];
        state.pagination = {
          page: action.payload.page || 1,
          size: action.payload.size || 10,
          total: action.payload.total || 0,
          pages: action.payload.pages || 0,
        };
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message || "Failed to fetch posts";
      })
      .addCase(fetchPostBySlug.fulfilled, (state, action) => {
        state.currentPost = action.payload;
      });
  },
});

export const { filterByTag, setSearchQuery, clearCurrentPost } =
  blogSlice.actions;
export default blogSlice.reducer;

6. Blog Cache Utility (src/lib/blog-cache.ts)

import { Post } from "@blognow/sdk";
import { createBlogNowClient } from "@/lib/blognow";

const postCache = new Map<string, Post>();
let allPostsCached = false;

export async function getCachedPosts(): Promise<Post[]> {
  if (allPostsCached) return Array.from(postCache.values());

  try {
    const blogClient = await createBlogNowClient();
    const posts = [];

    for await (const post of blogClient.posts.iteratePublishedPosts()) {
      postCache.set(post.slug, post);
      posts.push(post);
    }

    allPostsCached = true;
    return posts;
  } catch (error) {
    console.error("Error fetching posts for cache:", error);
    return [];
  }
}

export function getCachedPost(slug: string): Post | null {
  return postCache.get(slug) || null;
}

export async function getPost(slug: string): Promise<Post | null> {
  const cachedPost = getCachedPost(slug);
  if (cachedPost) return cachedPost;

  if (!allPostsCached) {
    await getCachedPosts();
    const postAfterCache = getCachedPost(slug);
    if (postAfterCache) return postAfterCache;
  }

  try {
    const blogClient = await createBlogNowClient();
    const post = await blogClient.posts.getPost(slug);
    if (post) postCache.set(post.slug, post);
    return post;
  } catch (error) {
    console.error("Error fetching post:", error);
    return null;
  }
}

Blog Components Implementation

7. Blog Router Setup (src/router/index.tsx)

If using React Router v6:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import BlogList from "@/components/blog/BlogList";
import BlogPost from "@/components/blog/BlogPost";
import Layout from "@/components/Layout";

export function AppRouter() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route path="blog" element={<BlogList />} />
          <Route path="blog/:slug" element={<BlogPost />} />
          {/* Add other routes as needed */}
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

8. Blog List Component (src/components/blog/BlogList.tsx)

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { useBlogStore } from "@/stores/blogStore";
// Icons - adapt based on the project's icon library
import { Search, ChevronRight } from "lucide-react"; // if using lucide-react
// import { FaSearch, FaChevronRight } from 'react-icons/fa'; // if using react-icons

// Helper component for loading spinner
const LoadingSpinner = () => (
  <div className="flex justify-center items-center py-12">
    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
  </div>
);

// Helper component for error display
const ErrorMessage = ({ error }: { error: string }) => (
  <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
    {error}
  </div>
);

export default function BlogList() {
  const { posts, loading, error, pagination, fetchPosts, filterByTag } =
    useBlogStore();

  const [searchInput, setSearchInput] = useState("");
  const [filteredPosts, setFilteredPosts] = useState(posts);

  useEffect(() => {
    fetchPosts();
  }, [fetchPosts]);

  useEffect(() => {
    setFilteredPosts(posts);
  }, [posts]);

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    const inputTerm = searchInput.trim();
    if (inputTerm) {
      setFilteredPosts(
        posts.filter((post) =>
          post.title.toLowerCase().includes(inputTerm.toLowerCase())
        )
      );
    } else {
      setFilteredPosts(posts);
    }
  };

  const loadMorePosts = () => {
    if (pagination.page < pagination.pages) {
      fetchPosts(pagination.page + 1);
    }
  };

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
    });
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="text-center">
            <h1 className="text-4xl font-bold text-gray-900 mb-4">Our Blog</h1>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Insights, updates, and stories from our team
            </p>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Search */}
        <div className="mb-8">
          <form onSubmit={handleSearch} className="flex gap-4 mb-6">
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
              <input
                type="text"
                placeholder="Search articles..."
                value={searchInput}
                onChange={(e) => setSearchInput(e.target.value)}
                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
            </div>
            <button
              type="submit"
              className="bg-blue-600 text-white px-8 py-2 rounded-lg hover:bg-blue-700 transition-colors"
            >
              Search
            </button>
          </form>
        </div>

        {/* Error State */}
        {error && <ErrorMessage error={error} />}

        {/* Loading State */}
        {loading && posts.length === 0 ? (
          <LoadingSpinner />
        ) : (
          <>
            {/* Posts Grid */}
            {filteredPosts.length === 0 ? (
              <div className="text-center py-12">
                <p className="text-gray-600 text-lg">No articles found.</p>
              </div>
            ) : (
              <div className="grid gap-8 md:grid-cols-1 lg:grid-cols-2">
                {filteredPosts.map((post) => (
                  <article
                    key={post.id}
                    className="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden"
                  >
                    {/* Featured Image */}
                    {post.og_image_url && (
                      <div className="relative">
                        <img
                          src={post.og_image_url}
                          alt={post.title}
                          className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
                        />
                      </div>
                    )}

                    <div className="p-6">
                      {/* Meta Information */}
                      <div className="flex items-center gap-4 text-sm text-gray-500 mb-3">
                        <span>{formatDate(post.published_at!)}</span>
                      </div>

                      {/* Title */}
                      <h2 className="text-xl font-bold text-gray-900 mb-3 line-clamp-2">
                        {post.title}
                      </h2>

                      {/* Excerpt */}
                      <p className="text-gray-600 mb-4 line-clamp-3">
                        {post.excerpt}
                      </p>

                      {/* Footer */}
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-3">
                          {post.author?.avatar_url && (
                            <div className="relative h-8 w-8">
                              <img
                                src={post.author.avatar_url}
                                alt={`${post.author.first_name} ${post.author.last_name}`}
                                className="w-full h-full rounded-full object-cover"
                              />
                            </div>
                          )}
                          <span className="text-sm font-medium text-gray-900">
                            {post.author?.first_name} {post.author?.last_name}
                          </span>
                        </div>

                        <Link
                          to={`/blog/${post.slug}`}
                          className="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800 font-medium text-sm"
                        >
                          Read more
                          <ChevronRight className="h-4 w-4" />
                        </Link>
                      </div>
                    </div>
                  </article>
                ))}
              </div>
            )}

            {/* Load More Button */}
            {pagination.page < pagination.pages && (
              <div className="text-center mt-12">
                <button
                  onClick={loadMorePosts}
                  disabled={loading}
                  className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {loading ? "Loading..." : "Load More Articles"}
                </button>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}

9. Individual Blog Post Component (src/components/blog/BlogPost.tsx)

import React, { useEffect } from "react";
import { useParams, Link, Navigate } from "react-router-dom";
import { useBlogStore } from "@/stores/blogStore";
import { ShareButton } from "./ShareButton";
// Icons - adapt based on the project's icon library
import { ArrowLeft, Calendar, User } from "lucide-react"; // if using lucide-react
// import { FaArrowLeft, FaCalendar, FaUser } from 'react-icons/fa'; // if using react-icons

export default function BlogPost() {
  const { slug } = useParams<{ slug: string }>();
  const { currentPost, loading, error, fetchPostBySlug, clearCurrentPost } =
    useBlogStore();

  useEffect(() => {
    if (slug) {
      fetchPostBySlug(slug);
    }
    return () => {
      clearCurrentPost();
    };
  }, [slug, fetchPostBySlug, clearCurrentPost]);

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
    });
  };

  // Loading state
  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      </div>
    );
  }

  // Error state
  if (error) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-gray-900 mb-4">Error</h1>
          <p className="text-gray-600 mb-4">{error}</p>
          <Link
            to="/blog"
            className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
          >
            Back to Blog
          </Link>
        </div>
      </div>
    );
  }

  // Post not found
  if (!currentPost) {
    return <Navigate to="/blog" replace />;
  }

  return (
    <div className="min-h-screen flex flex-col justify-between bg-white">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Back Button */}
        <Link
          to="/blog"
          className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-800 mb-8"
        >
          <ArrowLeft className="h-4 w-4" />
          Back to Blog
        </Link>

        <article>
          {/* Header */}
          <header className="mb-8">
            <h1 className="text-2xl md:text-3xl font-bold text-gray-900 mb-6">
              {currentPost.title}
            </h1>

            <div className="flex flex-wrap items-center gap-6 text-gray-600 mb-6">
              <div className="flex items-center gap-2">
                <Calendar className="h-4 w-4" />
                <span>{formatDate(currentPost.published_at || "")}</span>
              </div>

              <div className="flex items-center gap-2">
                <User className="h-4 w-4" />
                <span>
                  {currentPost.author?.first_name}{" "}
                  {currentPost.author?.last_name}
                </span>
              </div>

              <ShareButton
                title={currentPost.title}
                excerpt={currentPost.excerpt}
                url={`/blog/${currentPost.slug}`}
              />
            </div>
          </header>

          {/* Featured Image */}
          {currentPost.og_image_url && (
            <div className="mb-8 relative rounded-lg">
              <img
                src={currentPost.og_image_url}
                alt={currentPost.title}
                className="object-cover"
              />
            </div>
          )}

          {/* Content */}
          <div
            dangerouslySetInnerHTML={{ __html: currentPost.content }}
            className="blog-content flex flex-col gap-4 text-gray-800 text-lg leading-10 tracking-normal"
          />
        </article>

        {/* Author Footer */}
        <footer className="mt-12 pt-8 border-t border-gray-200">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              {currentPost.author?.avatar_url && (
                <div className="relative h-12 w-12">
                  <img
                    src={currentPost.author.avatar_url}
                    alt={`${currentPost.author.first_name} ${currentPost.author.last_name}`}
                    className="w-full h-full rounded-full object-cover"
                  />
                </div>
              )}
              <div>
                <p className="font-semibold text-gray-900">
                  {currentPost.author?.first_name}{" "}
                  {currentPost.author?.last_name}
                </p>
                <p className="text-gray-600 text-sm">
                  Published on {formatDate(currentPost.published_at || "")}
                </p>
              </div>
            </div>

            <ShareButton
              title={currentPost.title}
              excerpt={currentPost.excerpt}
              url={`/blog/${currentPost.slug}`}
              variant="button"
            />
          </div>
        </footer>
      </div>

      {/* CTA Section */}
      <div className="bg-gray-100 py-12">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">
            Want to read more?
          </h2>
          <p className="text-gray-600 mb-6">
            Explore more articles on our blog
          </p>
          <Link
            to="/blog"
            className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors inline-block"
          >
            View All Articles
          </Link>
        </div>
      </div>
    </div>
  );
}

10. Styling for the blog conent, append to (src/app/global.css)

div.blog-content {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-bold tracking-normal;
  }

  h1 {
    @apply text-3xl/12 md:text-5xl/14 lg:text-6xl/16;
  }

  h2 {
    @apply text-2xl/9 md:text-4xl/12;
  }

  h3 {
    @apply text-2xl md:text-3xl;
  }

  h4 {
    @apply text-xl md:text-2xl;
  }

  section {
    @apply py-16 md:py-24;
  }

  a {
    @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600;
  }
}

11. Share Button Component (src/components/blog/ShareButton.tsx)

import React from "react";
// Icons - adapt based on the project's icon library
import { Share2 } from "lucide-react"; // if using lucide-react
// import { FaShare } from 'react-icons/fa'; // if using react-icons

interface ShareButtonProps {
  title: string;
  excerpt?: string;
  url: string;
  variant?: "link" | "button";
}

export function ShareButton({
  title,
  excerpt,
  url,
  variant = "link",
}: ShareButtonProps) {
  const sharePost = async () => {
    const fullUrl = `${window.location.origin}${url}`;

    if (navigator.share) {
      try {
        await navigator.share({
          title,
          text: excerpt,
          url: fullUrl,
        });
      } catch (error) {
        console.log("Error sharing:", error);
        navigator.clipboard.writeText(fullUrl);
      }
    } else {
      navigator.clipboard.writeText(fullUrl);
    }
  };

  if (variant === "button") {
    return (
      <button
        onClick={sharePost}
        className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2"
      >
        <Share2 className="h-4 w-4" />
        Share Article
      </button>
    );
  }

  return (
    <button
      onClick={sharePost}
      className="flex items-center gap-2 text-blue-600 hover:text-blue-800"
    >
      <Share2 className="h-4 w-4" />
      <span>Share</span>
    </button>
  );
}

12. SEO Helper Hook (src/hooks/useSEO.ts)

import { useEffect } from "react";
import { Post } from "@blognow/sdk";

interface SEOConfig {
  title: string;
  description: string;
  image?: string;
  url?: string;
  type?: "website" | "article";
  publishedTime?: string;
  author?: string;
}

export function useSEO(config: SEOConfig) {
  useEffect(() => {
    // Update document title
    document.title = config.title;

    // Create or update meta tags
    const updateMetaTag = (
      name: string,
      content: string,
      property?: string
    ) => {
      const selector = property
        ? `meta[property="${name}"]`
        : `meta[name="${name}"]`;
      let meta = document.querySelector(selector) as HTMLMetaElement;

      if (!meta) {
        meta = document.createElement("meta");
        if (property) {
          meta.setAttribute("property", name);
        } else {
          meta.setAttribute("name", name);
        }
        document.head.appendChild(meta);
      }

      meta.setAttribute("content", content);
    };

    // Basic meta tags
    updateMetaTag("description", config.description);

    // Open Graph tags
    updateMetaTag("og:title", config.title, true);
    updateMetaTag("og:description", config.description, true);
    updateMetaTag("og:type", config.type || "website", true);

    if (config.image) {
      updateMetaTag("og:image", config.image, true);
    }

    if (config.url) {
      updateMetaTag("og:url", config.url, true);
    }

    // Twitter Card tags
    updateMetaTag("twitter:card", "summary_large_image");
    updateMetaTag("twitter:title", config.title);
    updateMetaTag("twitter:description", config.description);

    if (config.image) {
      updateMetaTag("twitter:image", config.image);
    }

    // Article specific tags
    if (config.type === "article") {
      if (config.publishedTime) {
        updateMetaTag("article:published_time", config.publishedTime, true);
      }
      if (config.author) {
        updateMetaTag("article:author", config.author, true);
      }
    }
  }, [config]);
}

// Helper hook for blog posts
export function useBlogPostSEO(post: Post | null) {
  const seoConfig: SEOConfig = post
    ? {
        title: post.title,
        description: post.excerpt,
        image: post.og_image_url,
        url: `${window.location.origin}/blog/${post.slug}`,
        type: "article",
        publishedTime: post.published_at,
        author: post.author
          ? `${post.author.first_name} ${post.author.last_name}`
          : undefined,
      }
    : {
        title: "Blog | Your Company Name",
        description: "Insights, updates, and stories from our team",
        type: "website",
      };

  useSEO(seoConfig);
}

13. Updated Blog Post Component with SEO (src/components/blog/BlogPost.tsx)

Add this import and hook usage to the BlogPost component:

import { useBlogPostSEO } from "@/hooks/useSEO";

// Add this line inside the BlogPost component, after the useEffect hooks:
useBlogPostSEO(currentPost);

13. App Entry Point (src/App.tsx)

import React from "react";
import { AppRouter } from "./router";
import "./App.css"; // Your global styles

function App() {
  return (
    <div className="App">
      <AppRouter />
    </div>
  );
}

export default App;

Implementation Notes

Key Features Implemented:

1. Client-side routing with React Router v6
2. SEO optimization with dynamic meta tags and document title updates
3. Responsive design with Tailwind CSS or user's preferred styling
4. State management using Zustand or user's preferred library
5. Image optimization with proper loading and sizing
6. Search functionality and filtering
7. Progressive loading with pagination
8. Social sharing capabilities
9. Caching strategy for improved performance
10. TypeScript support throughout
11. Error boundaries and loading states

Customization Options:

• Update company name and URLs in SEO configuration
• Modify styling and layout to match brand
• Add newsletter signup
• Include related posts suggestions
• Add reading time calculation
• Implement comment system
• Add category/tag filtering

Security Considerations:

• BlogNow public API keys are safe for client-side use and designed for this purpose
• Sanitize HTML content if allowing user-generated content
• Implement proper error boundaries

Performance Optimizations:

• Use React.memo for expensive components
• Implement virtual scrolling for large lists
• Add image lazy loading
• Consider code splitting for better bundle sizes

This implementation provides a production-ready blog system for Vite React projects that can be deployed immediately with minimal configuration changes.