feat(design): complete redesign of website

Redesign the website with a more modern look.

src/pages/spec/[version].astro

@@ -1,6 +1,20 @@
 ---
-import { getCollection, render } from "astro:content";
-import Default from "../../layouts/Default.astro";
+import { getCollection } from "astro:content";
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+
+import SinglePage from "../../layouts/SinglePage.astro";
+import Header from "../../components/Header.astro";
+import Hero from "../../components/Hero.astro";
+import AboutSection from "../../components/AboutSection.astro";
+import SpecSection from "../../components/SpecSection.astro";
+import FAQSection from "../../components/FAQSection.astro";
+import { parseSpecContent } from "../../utils/parseSpecContent";
+import { config } from "../../config";
 
 export async function getStaticPaths() {
   const specs = await getCollection("spec");
@@ -11,92 +25,84 @@ export async function getStaticPaths() {
 }
 
 const { spec } = Astro.props;
-const { Content } = await render(spec);
+const version = spec.data.version;
+
+// Read and process the markdown file
+const filePath = path.join(
+  process.cwd(),
+  "src/content/spec",
+  `${version}.md`
+);
+const content = fs.readFileSync(filePath, "utf-8");
+
+// Remove frontmatter
+const body = content.replace(/^---[\s\S]*?---\n/, "");
+
+// Process markdown to HTML
+const result = await unified()
+  .use(remarkParse)
+  .use(remarkRehype, { allowDangerousHtml: true })
+  .use(rehypeStringify, { allowDangerousHtml: true })
+  .process(body);
+
+const html = String(result);
+
+// Parse the content into sections
+const parsed = parseSpecContent(html, version);
 ---
 
-<Default title={spec.data.title} version={spec.data.version}>
-  <article class="spec-content">
-    <Content />
-  </article>
-</Default>
+<SinglePage title={spec.data.title} version={version}>
+  <Header version={version} />
 
-<style is:global>
-  .spec-content {
-    /* Prose-like styling for spec content */
-  }
+  <main>
+    <Hero version={version} svgPath={parsed.svgPath} />
 
-  .spec-content h1 {
-    margin-bottom: 0.5em;
-  }
+    <AboutSection
+      introduction={parsed.introduction}
+      summary={parsed.summary}
+      about={parsed.about}
+      license={parsed.license}
+    />
 
-  .spec-content h2 {
-    margin-top: 2em;
-    margin-bottom: 0.75em;
-    padding-bottom: 0.3em;
-    border-bottom: 1px solid #eee;
-  }
+    <SpecSection
+      terminology={parsed.terminology}
+      specification={parsed.specification}
+      tocItems={parsed.tocItems}
+    />
 
-  .dark .spec-content h2 {
-    border-bottom-color: #333;
-  }
+    <FAQSection items={parsed.faq} />
+  </main>
 
-  .spec-content h3 {
-    margin-top: 1.5em;
-    margin-bottom: 0.5em;
-  }
-
-  .spec-content p {
-    margin-bottom: 1em;
-  }
-
-  .spec-content ul,
-  .spec-content ol {
-    margin-bottom: 1em;
-    padding-left: 2em;
-  }
-
-  .spec-content li {
-    margin-bottom: 0.25em;
-  }
-
-  .spec-content a {
-    color: #1f8dd6;
-    text-decoration: none;
-  }
-
-  .spec-content a:hover {
-    text-decoration: underline;
-  }
-
-  .dark .spec-content a {
-    color: #4da6e8;
-  }
-
-  .spec-content img {
-    max-width: 100%;
-    height: auto;
-    margin: 1em 0;
-  }
-
-  .spec-content blockquote {
-    margin: 1em 0;
-    padding-left: 1em;
-    border-left: 4px solid #ddd;
-    color: #666;
-  }
-
-  .dark .spec-content blockquote {
-    border-left-color: #444;
-    color: #aaa;
-  }
-
-  .spec-content hr {
-    margin: 2em 0;
-    border: none;
-    border-top: 1px solid #eee;
-  }
-
-  .dark .spec-content hr {
-    border-top-color: #333;
-  }
-</style>
+  <!-- Footer -->
+  <footer
+    class="py-8 text-center text-sm
+           text-[var(--color-text-muted)]
+           dark:text-[var(--color-dark-text-muted)]
+           border-t border-[var(--color-border)]
+           dark:border-[var(--color-dark-border)]"
+  >
+    <div class="section-container">
+      <p>
+        Git Common-Flow is authored by
+        <a
+          href="https://jimeh.me/"
+          class="hover:text-[var(--color-accent)]"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Jim Myhrberg
+        </a>
+      </p>
+      <p class="mt-2">
+        <a
+          href="https://creativecommons.org/licenses/by/4.0/"
+          class="hover:text-[var(--color-accent)]"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          CC BY 4.0
+        </a>
+      </p>
+    </div>
+  </footer>
+</SinglePage>