https://danielsimonjr.github.io/blog Personal blog and projects en-us https://danielsimonjr.github.io/blog/using-images-in-posts https://danielsimonjr.github.io/blog/using-images-in-posts Sat, 18 Jan 2025 00:00:00 GMT https://danielsimonjr.github.io/blog/how-to-publish https://danielsimonjr.github.io/blog/how-to-publish Fri, 17 Jan 2025 00:00:00 GMT https://danielsimonjr.github.io/blog/markdown-with-code-examples https://danielsimonjr.github.io/blog/markdown-with-code-examples Fri, 17 Jan 2025 00:00:00 GMT { const response = await fetch("/data/posts.json"); return response.json(); } ``` ### React Component ```tsx import { useState, useEffect } from "react"; interface Post { slug: string; title: string; } export function PostList() { const [posts, setPosts] = useState([]); useEffect(() => { fetch("/data/posts.json") .then((res) => res.json()) .then((data) => setPosts(data)); }, []); return (

{posts.map((post) => (
• {post.title}
))}

); } ``` ### Bash Commands ```bash # Install dependencies npm install # Start development server npm run dev # Build for production npm run build # Preview production build npm run preview ``` ### JSON ```json { "name": "markdown-blog", "version": "1.0.0", "scripts": { "dev": "npm run generate && vite", "build": "npm run generate && vite build", "generate": "npx tsx scripts/generate-static.ts" } } ``` ## Inline Code Use backticks for inline code like `npm install` or `useState`. Reference files with inline code: `scripts/generate-static.ts`, `src/pages/Home.tsx`. ## Tables | Command | Description | | ----------------- | -------------------------- | | `npm run dev` | Start development server | | `npm run build` | Build for production | | `npm run generate`| Generate static JSON | | `npm run preview` | Preview production build | ## Lists ### Unordered - Write posts in markdown - Build generates static JSON - Deploy to GitHub Pages - Updates deploy automatically ### Ordered 1. Fork the repository 2. Customize your site 3. Write your posts 4. Push to deploy ## Blockquotes > Markdown files in your repo are simpler than a CMS. Version controlled, AI-editable, and no separate admin panel. ## Links External links: [GitHub Pages Docs](https://docs.github.com/en/pages) Internal links: [Setup Guide](/setup-guide) ## Emphasis Use **bold** for strong emphasis and _italics_ for lighter emphasis. ## Horizontal Rule --- ## Math Equations Write mathematical equations using LaTeX syntax with KaTeX rendering. ### Inline Math The famous equation $E = mc^2$ changed physics forever. The quadratic formula is $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$. ### Block Math The Gaussian integral: $$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$ A matrix example: $$ \begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix} $$ ## Mermaid Diagrams Create diagrams using Mermaid syntax. ### Flowchart ```mermaid graph TD A[Write Post] --> B{Valid Frontmatter?} B -->|Yes| C[Build Site] B -->|No| D[Fix Frontmatter] D --> B C --> E[Deploy] E --> F[Live on GitHub Pages] ``` ### Sequence Diagram ```mermaid sequenceDiagram participant Browser participant Server participant Database Browser->>Server: GET /data/posts.json Server->>Database: Query posts Database-->>Server: Return posts Server-->>Browser: JSON response Browser->>Browser: Render posts ``` ## Graphviz/DOT Diagrams Create graph visualizations using DOT language. ```dot digraph BlogArchitecture { rankdir=LR; node [shape=box, style=rounded]; Markdown -> Generator; Generator -> JSON; JSON -> React; React -> Browser; Generator [label="Static\nGenerator"]; Browser [label="User's\nBrowser"]; } ``` ## TikZ Diagrams Render LaTeX TikZ graphics for precise technical illustrations. ```tikz \begin{tikzpicture}[scale=1.5] \draw[->] (-0.5,0) -- (3,0) node[right] {$x$}; \draw[->] (0,-0.5) -- (0,2) node[above] {$y$}; \draw[domain=0:2.5, smooth, variable=\x, blue, thick] plot ({\x}, {0.5*\x*\x}) node[right] {$y = \frac{x^2}{2}$}; \fill[red] (1,0.5) circle (2pt); \draw[dashed] (1,0) -- (1,0.5) -- (0,0.5); \node[below] at (1,0) {$1$}; \node[left] at (0,0.5) {$\frac{1}{2}$}; \end{tikzpicture} ``` ## Inline SVG Embed SVG graphics directly in your markdown: ## Images Place images in `public/images/` and reference them: ```markdown  ``` ## File Structure Reference ``` content/blog/ ├── about-this-blog.md ├── markdown-with-code-examples.md ├── setup-guide.md └── your-new-post.md ``` ## Tips 1. Keep slugs URL-friendly (lowercase, hyphens) 2. Set `published: false` for drafts 3. Run `npm run build` after adding posts 4. Use descriptive titles for SEO 5. Use `$...$` for inline math and `$$...$$` for block math 6. Mermaid supports many diagram types - see [mermaid.js.org](https://mermaid.js.org/) 7. For complex TikZ, test your code in a LaTeX editor first 8. SVG graphics respect theme colors when using `currentColor`]]> https://danielsimonjr.github.io/blog/about-this-blog https://danielsimonjr.github.io/blog/about-this-blog Thu, 16 Jan 2025 00:00:00 GMT https://danielsimonjr.github.io/blog/setup-guide https://danielsimonjr.github.io/blog/setup-guide Tue, 14 Jan 2025 00:00:00 GMT Pages 2. Set Source to "GitHub Actions" 3. Push to main branch GitHub Actions will automatically build and deploy your site. Your blog will be available at: `https://YOUR-USERNAME.github.io/blog/` ## Writing Blog Posts Create new posts in `content/blog/`: ```markdown --- title: "Your Post Title" description: "A brief description for SEO and social sharing" date: "2025-01-15" slug: "your-post-url" published: true tags: ["tag1", "tag2"] readTime: "5 min read" image: "/images/my-post-image.png" --- Your markdown content here... ``` ### Frontmatter Fields | Field | Required | Description | | ------------- | -------- | ----------------------------- | | `title` | Yes | Post title | | `description` | Yes | Short description for SEO | | `date` | Yes | Publication date (YYYY-MM-DD) | | `slug` | Yes | URL path (must be unique) | | `published` | Yes | Set to `true` to publish | | `tags` | Yes | Array of topic tags | | `readTime` | No | Estimated reading time | | `image` | No | Header/Open Graph image URL | ### Adding Images Place images in `public/images/` and reference them in your posts: **Header/OG Image (in frontmatter):** ```yaml image: "/images/my-header.png" ``` This image appears when sharing on social media. Recommended: 1200x630 pixels. **Inline Images (in content):** ```markdown  ``` ### Build After Adding Posts After adding or editing posts, build and push: ```bash npm run build git add . git commit -m "Add new post" git push ``` GitHub Actions will deploy your changes automatically. ## Customizing Your Blog ### Change the Favicon Replace `public/favicon.svg` with your own SVG icon. ### Change the Site Logo Edit `src/pages/Home.tsx`: ```typescript const siteConfig = { logo: "/images/logo.svg", // Set to null to hide the logo // ... }; ``` Replace `public/images/logo.svg` with your own logo file. ### Change the Default Open Graph Image Replace `public/images/og-default.svg` with your own image (1200x630 pixels recommended). ### Change the Default Theme Edit `src/context/ThemeContext.tsx`: ```typescript const DEFAULT_THEME: Theme = "tan"; // Options: "dark", "light", "tan", "cloud" ``` ### Change the Font Edit `src/styles/global.css`: ```css body { /* Sans-serif */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Serif (default) */ font-family: "New York", ui-serif, Georgia, serif; } ``` ### Add Static Pages (Optional) Create pages in `content/pages/`: ```markdown --- title: "About" slug: "about" published: true order: 1 --- Your page content here... ``` Pages appear automatically in the navigation when published. ### Update SEO Meta Tags Edit `index.html` to update: - Site title - Meta description - Open Graph tags - JSON-LD structured data ### Update llms.txt and robots.txt Edit `public/llms.txt` and `public/robots.txt` with your site information. ## Static Assets Your blog includes these static assets: | Path | Description | | ----------------- | ----------------------- | | `/rss.xml` | RSS feed (descriptions) | | `/rss-full.xml` | RSS feed (full content) | | `/sitemap.xml` | XML sitemap | | `/llms.txt` | AI agent discovery | | `/robots.txt` | Crawler rules | ## Troubleshooting ### Posts not appearing 1. Check that `published: true` in frontmatter 2. Run `npm run build` to regenerate static files 3. Check the build output for errors ### Build failures 1. Run `npm run typecheck` to check for TypeScript errors 2. Run `npm run lint` to check for linting issues 3. Ensure Node.js version is 18 or higher ## Project Structure ``` blog/ ├── content/ │ ├── blog/ # Markdown blog posts │ └── pages/ # Static pages ├── public/ │ ├── data/ # Generated JSON (by build) │ ├── images/ # Static images │ ├── rss.xml # Generated RSS │ ├── sitemap.xml # Generated sitemap │ └── 404.html # SPA fallback ├── scripts/ │ └── generate-static.ts # Build script ├── src/ │ ├── components/ # React components │ ├── context/ # Theme context │ ├── pages/ # Page components │ └── styles/ # CSS └── .github/ └── workflows/ └── deploy.yml # GitHub Actions ``` ## Next Steps After deploying: 1. Add your own blog posts 2. Customize the theme colors in `global.css` 3. Update the featured essays list 4. Submit your sitemap to Google Search Console 5. Share your first post Your blog is now live with static site generation, RSS feeds, and SEO optimization. Push new posts and they deploy automatically.]]>