vending-mocha 0.1.0

package/src/components/SiteHeader.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Home, FolderGit2, Sun, Moon, Menu, X } from 'lucide-react';
+import { useTheme } from '../context/ThemeContext';
+import { siteConfig } from '../site.config';
+import projects from '../projects.json';
+
+export default function SiteHeader({ showTitle = true }: { showTitle?: boolean }) {
+    const { theme, toggleTheme } = useTheme();
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+    const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
+    const closeMenu = () => setIsMenuOpen(false);
+
+    return (
+        <header className={showTitle ? 'main-header with-bottom-border' : 'main-header'}>
+            <div className="header-title">{showTitle && <h1 className="site-title"><Link to="/">{siteConfig.title}</Link></h1>}</div>
+            <div className="nav-container">
+                <nav className={`top-nav ${isMenuOpen ? 'active' : ''}`}>
+                    <Link to="/" onClick={closeMenu}>
+                        <Home size={18} />
+                        <span>Home</span>
+                    </Link>
+                    {projects.length > 0 && (
+                        <Link to="/projects/" onClick={closeMenu}>
+                            <FolderGit2 size={18} />
+                            <span>Projects</span>
+                        </Link>
+                    )}
+                </nav>
+
+                <div className="header-actions">
+                    <button onClick={toggleTheme} className="theme-toggle" aria-label="Toggle theme">
+                        {theme === 'light' ? <Moon size={20} /> : <Sun size={20} />}
+                    </button>
+
+                    <button className="hamburger-menu" onClick={toggleMenu} aria-label="Toggle menu">
+                        {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
+                    </button>
+                </div>
+            </div>
+        </header>
+    );
+}

package/src/context/ThemeContext.tsx

@@ -0,0 +1,75 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { siteConfig } from '../site.config';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+    theme: Theme;
+    toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+    const [theme, setTheme] = useState<Theme>(() => {
+        if (typeof window !== 'undefined') {
+            const savedTheme = localStorage.getItem('theme') as Theme;
+            if (savedTheme) return savedTheme;
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        return 'light';
+    });
+
+    useEffect(() => {
+        const root = document.documentElement;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const themeConfig = siteConfig.theme[theme];
+
+        root.style.setProperty('--color-primary', themeConfig.primary);
+        root.style.setProperty('--color-secondary', themeConfig.secondary);
+        root.style.setProperty('--color-background', themeConfig.background);
+        root.style.setProperty('--color-text', themeConfig.text);
+        root.style.setProperty('--color-border', themeConfig.border);
+        root.style.setProperty('--color-accent', themeConfig.accent);
+        root.style.setProperty('--color-card-bg', themeConfig.cardBackground);
+        root.style.setProperty('--color-link-hover', themeConfig.linkHover);
+        root.style.setProperty('--color-link', themeConfig.linkColor);
+        root.style.setProperty('--font-family', siteConfig.theme.fontFamily);
+    }, [theme]);
+
+    useEffect(() => {
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handleChange = (e: MediaQueryListEvent) => {
+            if (!localStorage.getItem('theme')) {
+                setTheme(e.matches ? 'dark' : 'light');
+            }
+        };
+
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, []);
+
+    const toggleTheme = () => {
+        setTheme(prevTheme => {
+            const newTheme = prevTheme === 'light' ? 'dark' : 'light';
+            localStorage.setItem('theme', newTheme);
+            return newTheme;
+        });
+    };
+
+    return (
+        <ThemeContext.Provider value={{ theme, toggleTheme }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useTheme = () => {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+};

package/src/entry-client.tsx

@@ -0,0 +1,32 @@
+import { StrictMode } from 'react'
+import { createRoot, hydrateRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import * as ReactHelmetAsync from 'react-helmet-async'
+import App from './App'
+
+const { HelmetProvider } = (ReactHelmetAsync as any).default || ReactHelmetAsync;
+
+const container = document.getElementById('root')!
+
+if (container.children.length > 0) {
+    hydrateRoot(
+        container,
+        <StrictMode>
+            <HelmetProvider>
+                <BrowserRouter basename={import.meta.env.VITE_BASE_PATH || '/'}>
+                    <App />
+                </BrowserRouter>
+            </HelmetProvider>
+        </StrictMode>,
+    )
+} else {
+    createRoot(container).render(
+        <StrictMode>
+            <HelmetProvider>
+                <BrowserRouter basename={import.meta.env.VITE_BASE_PATH || '/'}>
+                    <App />
+                </BrowserRouter>
+            </HelmetProvider>
+        </StrictMode>,
+    )
+}

package/src/entry-server.tsx

@@ -0,0 +1,26 @@
+import { StrictMode } from 'react'
+import { renderToString } from 'react-dom/server'
+import { StaticRouter } from 'react-router-dom'
+import * as ReactHelmetAsync from 'react-helmet-async'
+import App from './App'
+import { siteConfig } from './site.config'
+export { siteConfig }
+
+const { HelmetProvider } = (ReactHelmetAsync as any).default || ReactHelmetAsync;
+
+import { getBasePath } from './utils/basePath';
+
+export function render(url: string) {
+    const helmetContext: any = {};
+    const html = renderToString(
+        <StrictMode>
+            <HelmetProvider context={helmetContext}>
+                <StaticRouter location={url} basename={getBasePath()}>
+                    <App />
+                </StaticRouter>
+            </HelmetProvider>
+        </StrictMode>
+    );
+
+    return { html, helmet: helmetContext.helmet };
+}

package/src/pages/BlogPost.tsx

@@ -0,0 +1,93 @@
+import { useParams } from 'react-router-dom';
+import { siteConfig } from '../site.config';
+import SiteHeader from '../components/SiteHeader';
+import Markdown from 'react-markdown';
+import { parseFrontmatter } from '../utils/frontmatter';
+import postsData from '../posts.json';
+import { formatDate } from '../utils/date';
+import remarkGfm from 'remark-gfm';
+import { MarkdownImage } from '../components/MarkdownImage';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+// Load all posts synchronously
+const postFiles = import.meta.glob('../../posts/*.md', {
+    eager: true,
+    query: '?raw',
+    import: 'default'
+}) as Record<string, string>;
+
+export default function BlogPost() {
+    const { slug } = useParams();
+    const postMeta = (postsData as any[]).find(p => p.slug === slug);
+
+    if (!postMeta) {
+        return <div>Post Not Found</div>;
+    }
+
+    const filePath = `../../posts/${slug}.md`;
+    const rawContent = postFiles[filePath];
+
+    if (!rawContent) {
+        return <div>Post Content Not Found</div>;
+    }
+
+    const { content } = parseFrontmatter(rawContent);
+
+    const jsonLd = {
+        "@context": "https://schema.org",
+        "@type": "BlogPosting",
+        "headline": postMeta.title,
+        "datePublished": postMeta.date,
+        "description": postMeta.summary || siteConfig.description,
+        "author": {
+            "@type": "Person",
+            "name": siteConfig.title,
+            "url": siteConfig.url
+        },
+        "mainEntityOfPage": {
+            "@type": "WebPage",
+            "@id": `${siteConfig.url}/post/${slug}`
+        }
+    };
+
+    return (
+        <div className="blog-container">
+            <SiteHeader />
+            <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
+            <header>
+                <h1>{postMeta.title}</h1>
+                <div className="meta">
+                    <span>{formatDate(postMeta.date)}</span>
+                </div>
+            </header>
+            <div className="markdown-content">
+                <Markdown
+                    remarkPlugins={[remarkGfm]}
+                    components={{
+                        img: MarkdownImage,
+                        code(props) {
+                            const { children, className, node, ref, ...rest } = props
+                            const match = /language-(\w+)/.exec(className || '')
+                            return match ? (
+                                <SyntaxHighlighter
+                                    {...rest}
+                                    PreTag="div"
+                                    children={String(children).replace(/\n$/, '')}
+                                    language={match[1]}
+                                    style={dracula}
+                                />
+                            ) : (
+                                <code {...rest} className={className}>
+                                    {children}
+                                </code>
+                            )
+                        }
+                    }}
+                >
+                    {content}
+                </Markdown>
+            </div>
+        </div>
+    );
+}

package/src/pages/HomePage.tsx

@@ -0,0 +1,85 @@
+import { Link, useParams } from 'react-router-dom';
+import { getBasePath } from '../utils/basePath';
+import SiteHeader from '../components/SiteHeader';
+import * as ReactHelmetAsync from 'react-helmet-async';
+import { siteConfig } from '../site.config';
+import { formatDate } from '../utils/date';
+
+const { Helmet } = (ReactHelmetAsync as any).default || ReactHelmetAsync;
+
+const POSTS_PER_PAGE = 50;
+
+import Profile from '../components/Profile';
+
+// Import generated posts data
+import postsData from '../posts.json';
+
+interface BlogPost {
+    slug: string;
+    title: string;
+    date: string;
+    summary: string;
+}
+
+export default function HomePage() {
+    const { pageNumber } = useParams();
+    const currentPage = parseInt(pageNumber || '1', 10);
+    const blogPosts: BlogPost[] = postsData as BlogPost[];
+
+    const totalPages = Math.ceil(blogPosts.length / POSTS_PER_PAGE);
+    const startIndex = (currentPage - 1) * POSTS_PER_PAGE;
+    const paginatedPosts = blogPosts.slice(startIndex, startIndex + POSTS_PER_PAGE);
+
+    const hasNextPage = currentPage < totalPages;
+    const hasPrevPage = currentPage > 1;
+
+    const pageTitle = currentPage > 1 ? `${siteConfig.title} - Page ${currentPage}` : siteConfig.title;
+
+    return (
+        <div className="blog-container">
+            <Helmet>
+                <title>{pageTitle}</title>
+                <meta name="description" content={siteConfig.description} />
+                <meta property="og:title" content={pageTitle} />
+                <meta property="og:description" content={siteConfig.description} />
+                <meta property="og:url" content={siteConfig.url} />
+                <meta property="og:type" content="website" />
+                {siteConfig.image && <meta property="og:image" content={siteConfig.image.startsWith('http') ? siteConfig.image : `${getBasePath()}${siteConfig.image.startsWith('/') ? siteConfig.image.slice(1) : siteConfig.image}`} />}
+            </Helmet>
+            <SiteHeader showTitle={false} />
+            <Profile />
+
+            <section className="posts-section">
+                <h2>
+                    {currentPage > 1 ? `Posts - Page ${currentPage}` : 'Recent Posts'}
+                </h2>
+                <div className="posts-list">
+                    {paginatedPosts.map((post) => (
+                        <article key={post.slug} className="post-item">
+                            <div className="post-header">
+                                <h3><Link to={`/post/${post.slug}/`}>{post.title}</Link></h3>
+                                <span className="post-date">{formatDate(post.date)}</span>
+                            </div>
+                            <p className="post-summary">{post.summary}</p>
+                        </article>
+                    ))}
+                </div>
+
+                {totalPages > 1 && (
+                    <nav className="pagination">
+                        {hasPrevPage && (
+                            <Link to={currentPage === 2 ? '/' : `/page/${currentPage - 1}/`} className="prev-link">
+                                ← Previous
+                            </Link>
+                        )}
+                        {hasNextPage && (
+                            <Link to={`/page/${currentPage + 1}/`} className="next-link">
+                                Next →
+                            </Link>
+                        )}
+                    </nav>
+                )}
+            </section>
+        </div>
+    );
+}

package/src/pages/Projects.tsx

@@ -0,0 +1,50 @@
+import SiteHeader from '../components/SiteHeader';
+
+import projectsData from '../projects.json';
+
+type ProjectStatus = 'active' | 'dead' | 'inactive';
+
+interface Project {
+    name: string;
+    description: string;
+    link: string;
+    status: ProjectStatus;
+}
+
+const projects = projectsData as Project[];
+
+export default function Projects() {
+
+
+    const getStatusDisplay = (status: ProjectStatus) => {
+        switch (status) {
+            case 'active':
+                return '🚀 Active';
+            case 'dead':
+                return '💀 Dead';
+            case 'inactive':
+                return '🦥 Inactive';
+            default:
+                return status;
+        }
+    };
+
+    return (
+        <div className="blog-container">
+            <SiteHeader />
+            <section className="projects-section">
+                <h2>Projects</h2>
+                <div className="project-grid">
+                    {projects.map((project, index) => (
+                        <div key={index} className="project-card">
+                            <h3><a href={project.link} target="_blank">{project.name}</a></h3>
+                            <p>{project.description}</p>
+                            <p className="project-status">{getStatusDisplay(project.status)}</p>
+                            <a className="btn" href={project.link} target="_blank">View Project</a>
+                        </div>
+                    ))}
+                </div>
+            </section>
+        </div>
+    );
+}

package/src/site.config.ts

@@ -0,0 +1,38 @@
+
+
+export const siteConfig = {
+    title: "Vending Mocha",
+    url: "https://vendingmocha.com",
+    description: '**Vending Mocha** is a lightweight, strictly typed, and blazing fast personal blogging framework built with React, TypeScript, and Vite.\n\nIt is designed to be minimal, easy to customize, and deployed within minutes. Create a site, update the config, and start writing!',
+    image: '/images/profile.png',
+    contact: {
+        github: "https://github.com/kcthota/vending-mocha",
+        email: undefined
+    },
+    footerText: "My opinions are my own.",
+    theme: {
+        light: {
+            primary: "#222",
+            secondary: "#666",
+            background: "#ffffff",
+            text: "#213547",
+            border: "#eee",
+            accent: "#213547",
+            cardBackground: "#eee",
+            linkHover: "#000",
+            linkColor: "#222",
+        },
+        dark: {
+            primary: "#fff",
+            secondary: "#aaa",
+            background: "#121212",
+            text: "#e0e0e0",
+            border: "#333",
+            accent: "#e0e0e0",
+            cardBackground: "#373636ff",
+            linkHover: "#fff",
+            linkColor: "#ccc",
+        },
+        fontFamily: "Avenir, Open Sans, sans-serif",
+    },
+};

package/src/utils/basePath.ts

@@ -0,0 +1,21 @@
+
+import { siteConfig } from '../site.config';
+
+/**
+ * Derives the base path from siteConfig.url.
+ * This is useful for SSG and ensure consistency.
+ * 
+ * If siteConfig.url is "https://user.github.io/repo/", basePath is "/repo/".
+ * If siteConfig.url is "https://custom.com/", basePath is "/".
+ */
+export function getBasePath(): string {
+    try {
+        if (!siteConfig.url) return '/';
+        const url = new URL(siteConfig.url);
+        const path = url.pathname;
+        return path.endsWith('/') ? path : `${path}/`;
+    } catch (e) {
+        console.warn('Invalid siteConfig.url, defaulting to /');
+        return '/';
+    }
+}

package/src/utils/date.ts

@@ -0,0 +1,17 @@
+import { format, parse } from 'date-fns';
+
+export const formatDate = (dateString: string): string => {
+    if (!dateString) return '';
+
+    // Try parsing as standard date first (handles ISO strings with time)
+    const date = new Date(dateString);
+    if (!isNaN(date.getTime())) {
+        return format(date, 'MMMM dd, yyyy');
+    }
+
+    try {
+        return format(parse(dateString, 'yyyy-MM-dd', new Date()), 'MMMM dd, yyyy');
+    } catch (e) {
+        return dateString;
+    }
+};

package/src/utils/frontmatter.ts

@@ -0,0 +1,32 @@
+export interface Frontmatter {
+    [key: string]: string;
+}
+
+export function parseFrontmatter(content: string): { data: Frontmatter; content: string } {
+    const frontmatterRegex = /^---\s*[\r\n]+([\s\S]*?)[\r\n]+---\s*[\r\n]+([\s\S]*)$/;
+    const match = frontmatterRegex.exec(content);
+
+    // If no frontmatter is found, return empty data and the whole content
+    if (!match) {
+        return { data: {}, content };
+    }
+
+    const frontmatterBlock = match[1];
+    const body = match[2];
+
+    const data: Frontmatter = {};
+    frontmatterBlock.split('\n').forEach((line) => {
+        const parts = line.split(':');
+        if (parts.length >= 2) {
+            const key = parts[0].trim();
+            // Join the rest back in case the value contained colons (e.g., date times)
+            // And remove surrounding quotes if present
+            const value = parts.slice(1).join(':').trim().replace(/^['"](.*)['"]$/, '$1');
+            if (key) {
+                data[key] = value;
+            }
+        }
+    });
+
+    return { data, content: body };
+}

package/tsconfig.app.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "types": [
+      "vite/client"
+    ],
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "src"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,61 @@
+import { defineConfig, type ViteDevServer } from 'vite'
+import react from '@vitejs/plugin-react'
+import { exec } from 'child_process'
+import fs from 'fs'
+import path from 'path'
+
+// Custom plugin to watch markdown files and regenerate data
+const watchMarkdownPlugin = () => ({
+  name: 'watch-markdown',
+  configureServer(server: ViteDevServer) {
+    const handleFileChange = (file: string) => {
+      // Use absolute paths or relative checks to ensure we only trigger on relevant files
+      const normalizedFile = file.replace(/\\/g, '/')
+      if (normalizedFile.endsWith('.md')) {
+        if (normalizedFile.includes('/src/posts/')) {
+          console.log('Post changed, regenerating posts data...')
+          exec('node scripts/generate-posts-data.js', (err) => {
+            if (err) console.error('Error regenerating posts:', err)
+          })
+        } else if (normalizedFile.includes('/src/projects/')) {
+          console.log('Project changed, regenerating projects data...')
+          exec('node scripts/generate-projects-data.js', (err) => {
+            if (err) console.error('Error regenerating projects:', err)
+          })
+        }
+      }
+    }
+
+    server.watcher.on('add', handleFileChange)
+    server.watcher.on('change', handleFileChange)
+    server.watcher.on('unlink', handleFileChange)
+  }
+})
+
+const siteConfigPath = path.resolve(__dirname, 'src/site.config.ts');
+const siteConfigContent = fs.readFileSync(siteConfigPath, 'utf-8');
+
+// Derive base path from siteConfig.url
+const urlMatch = siteConfigContent.match(/url:\s*["']([^"']+)["']/);
+let basePath = '/';
+if (urlMatch) {
+  try {
+    const url = new URL(urlMatch[1]);
+    basePath = url.pathname.endsWith('/') ? url.pathname : `${url.pathname}/`;
+  } catch (e) {
+    console.warn('Invalid URL in site.config.ts, defaulting to /');
+  }
+}
+
+// https://vite.dev/config/
+export default defineConfig({
+  base: basePath,
+  publicDir: 'static',
+  plugins: [react(), watchMarkdownPlugin()],
+  build: {
+    outDir: 'docs',
+  },
+  ssr: {
+    noExternal: ['react-syntax-highlighter']
+  }
+})