docs: add starter mdx posts

2026-06-03 10:52:55 -05:00
parent de13ba43b0
commit 381e6225e1
5 changed files with 182 additions and 0 deletions
--- a/content/posts/designing-with-nextjs.mdx
+++ b/content/posts/designing-with-nextjs.mdx
@@ -0,0 +1,33 @@
+---
+title: "Designing With Next.js"
+date: "2026-05-22"
+excerpt: "A short sample note about pairing interface design decisions with static Next.js content."
+tags:
+  - Design
+  - Next.js
+  - Web Dev
+author: "Starter Content"
+coverImage: "/starter-diagram.svg"
+---
+
+This sample note gives tag pages another realistic post to list. It is intentionally brief and ready to replace.
+
+![Simple local diagram for a starter design post](/starter-diagram.svg)
+
+## A tiny design checklist
+
+- Keep headings scannable.
+- Pair every visual with helpful alt text.
+- Use consistent tags so archive pages feel populated.
+
+The same content can support readers and tooling: humans get structure, while static route generation gets predictable params.
+
+```ts title="content-tags.ts" {3}
+export const starterTags = [
+  'Design',
+  'Next.js',
+  'Web Dev',
+]
+```
+
+> Replace this with a real design journal, launch note, or tutorial when you are ready.
--- a/content/posts/math-notes-for-builders.mdx
+++ b/content/posts/math-notes-for-builders.mdx
@@ -0,0 +1,33 @@
+---
+title: "Math Notes for Builders"
+date: "2026-05-08"
+excerpt: "A compact starter post that keeps Math and Code tags populated while checking equation rendering."
+tags:
+  - Math
+  - Code
+  - Web Dev
+author: "Starter Content"
+---
+
+This replaceable note exists to keep the **Math**, **Code**, and **Web Dev** tag pages meaningful during early validation.
+
+## Tiny model
+
+Inline math can express a quick estimate like $n \log n$, while display math can show the full relationship:
+
+$$
+T(n) = O(n \log n) + O(k)
+$$
+
+## Practical reminder
+
+- Prefer simple explanations before formulas.
+- Add runnable code when it clarifies an idea.
+- Link back to related posts, such as the [starter showcase](/posts/starter-mdx-showcase/).
+
+```js title="estimate.js" {1,4}
+export function estimate(items, constant = 1) {
+  const n = Math.max(items.length, 1)
+  return n * Math.log2(n) + constant
+}
+```
--- a/content/posts/starter-mdx-showcase.mdx
+++ b/content/posts/starter-mdx-showcase.mdx
@@ -0,0 +1,73 @@
+---
+title: "Starter MDX Showcase"
+date: "2026-06-03"
+excerpt: "Sample starter content demonstrating math, local images, links, tables, tasks, and code blocks for validating blog routes."
+tags:
+  - Design
+  - Next.js
+  - Math
+  - Code
+  - Web Dev
+author: "Starter Content"
+coverImage: "/starter-showcase.svg"
+---
+
+This is deliberately sample content for a fresh blog. Replace it with your own writing once the routes, tags, and search experience are validated.
+
+![Abstract gradient card used as a local starter cover](/starter-showcase.svg)
+
+## What this post covers
+
+- A local image from `public/` referenced with an absolute path.
+- Links to [Next.js](https://nextjs.org/) and an internal [tag page](/tags/web-dev/).
+- GFM tables, task lists, blockquotes, code fences, and math.
+
+> Starter posts should be easy to delete, but rich enough to prove the publishing pipeline works end to end.
+
+## Markdown and GFM examples
+
+| Feature | Purpose | Status |
+| --- | --- | --- |
+| Tags | Builds static tag pages | Ready |
+| Math | Checks KaTeX rendering | Ready |
+| Code | Checks syntax highlighting | Ready |
+
+- [x] Confirm route generation has at least one post.
+- [x] Confirm spaced tags such as **Web Dev** create usable params.
+- [ ] Replace this demo with a real article.
+
+Inline code like `generateStaticParams` should be readable inside a sentence, and inline math such as $E = mc^2$ should render without extra setup.
+
+Display math is useful for longer equations:
+
+$$
+\operatorname{score}(post) = \frac{links + images + code}{reading\ time}
+$$
+
+## Code with title and highlighted lines
+
+```tsx title="components/example-card.tsx" {2,6-8}
+type ExampleCardProps = {
+  title: string
+  href: string
+}
+
+export function ExampleCard({ title, href }: ExampleCardProps) {
+  return <a href={href}>{title}</a>
+}
+```
+
+## Lists, links, and details
+
+1. Draft the article in MDX.
+2. Add concrete examples and screenshots.
+3. Link to useful references, such as the [MDX docs](https://mdxjs.com/).
+
+<details>
+  <summary>Why keep demo content obvious?</summary>
+  <p>Because starter posts are fixtures for validation, not permanent editorial content.</p>
+</details>
+
+## Closing note
+
+This post intentionally exercises common authoring features so the owner can validate static post routes, tag pages, and future search indexing with realistic but replaceable content.
--- a/public/starter-diagram.svg
+++ b/public/starter-diagram.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 540" role="img" aria-labelledby="title desc">
+  <title id="title">Starter design diagram</title>
+  <desc id="desc">Three connected nodes labeled design, content, and build.</desc>
+  <rect width="900" height="540" rx="36" fill="#f8fafc"/>
+  <path d="M250 270h400" stroke="#94a3b8" stroke-width="12" stroke-linecap="round"/>
+  <path d="M450 185v170" stroke="#94a3b8" stroke-width="12" stroke-linecap="round"/>
+  <g font-family="ui-sans-serif, system-ui, sans-serif" font-weight="700" text-anchor="middle">
+    <circle cx="250" cy="270" r="98" fill="#dbeafe" stroke="#2563eb" stroke-width="8"/>
+    <text x="250" y="282" fill="#1e3a8a" font-size="34">Design</text>
+    <circle cx="650" cy="270" r="98" fill="#dcfce7" stroke="#16a34a" stroke-width="8"/>
+    <text x="650" y="282" fill="#14532d" font-size="34">Content</text>
+    <circle cx="450" cy="150" r="88" fill="#fef3c7" stroke="#d97706" stroke-width="8"/>
+    <text x="450" y="162" fill="#78350f" font-size="32">Build</text>
+    <circle cx="450" cy="390" r="88" fill="#fce7f3" stroke="#db2777" stroke-width="8"/>
+    <text x="450" y="402" fill="#831843" font-size="32">Ship</text>
+  </g>
+</svg>
--- a/public/starter-showcase.svg
+++ b/public/starter-showcase.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-labelledby="title desc">
+  <title id="title">Starter MDX showcase cover</title>
+  <desc id="desc">A small abstract gradient cover with cards representing math, code, and design.</desc>
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0" stop-color="#7c3aed"/>
+      <stop offset="0.55" stop-color="#2563eb"/>
+      <stop offset="1" stop-color="#14b8a6"/>
+    </linearGradient>
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="18" stdDeviation="20" flood-color="#0f172a" flood-opacity="0.25"/>
+    </filter>
+  </defs>
+  <rect width="1200" height="630" rx="42" fill="url(#bg)"/>
+  <circle cx="1030" cy="120" r="150" fill="#ffffff" opacity="0.16"/>
+  <circle cx="130" cy="560" r="210" fill="#ffffff" opacity="0.12"/>
+  <g filter="url(#shadow)">
+    <rect x="155" y="145" width="890" height="340" rx="32" fill="#ffffff" opacity="0.92"/>
+    <rect x="210" y="205" width="260" height="42" rx="12" fill="#111827" opacity="0.9"/>
+    <rect x="210" y="275" width="330" height="28" rx="10" fill="#6366f1" opacity="0.85"/>
+    <rect x="210" y="330" width="260" height="28" rx="10" fill="#0f766e" opacity="0.75"/>
+    <text x="615" y="255" fill="#111827" font-family="ui-monospace, SFMono-Regular, Menlo, monospace" font-size="46" font-weight="700">MDX</text>
+    <text x="615" y="325" fill="#334155" font-family="ui-monospace, SFMono-Regular, Menlo, monospace" font-size="34">$E=mc²</text>
+    <text x="615" y="390" fill="#334155" font-family="ui-monospace, SFMono-Regular, Menlo, monospace" font-size="30">code · links · tables</text>
+  </g>
+</svg>