v2.9.0

Author: GaspardKirira

vix-site/package-lock.json

@@ -4,8 +4,9 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "npm run installers:sync && vite build",
+    "blog:generate": "node scripts/generate-blog-html.mjs",
+    "dev": "npm run blog:generate && vite",
+    "build": "npm run blog:generate && vite-ssg build",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
@@ -16,10 +17,12 @@
     "registry:build": "node tools/build_registry_index.js"
   },
   "dependencies": {
+    "@unhead/vue": "^3.4.0",
     "dompurify": "^3.3.1",
     "marked": "^17.0.1",
     "qrcode": "^1.5.4",
     "shiki": "^3.22.0",
+    "vite-ssg": "^28.3.0",
     "vue": "^3.5.24",
     "vue-router": "^4.6.4"
   },

vix-site/package.json

@@ -0,0 +1,269 @@
+import {
+  mkdirSync,
+  readFileSync,
+  readdirSync,
+  rmSync,
+  writeFileSync,
+} from "node:fs";
+
+import { dirname, join, relative, resolve } from "node:path";
+
+import { fileURLToPath } from "node:url";
+
+import { marked } from "marked";
+import { createHighlighter } from "shiki";
+
+const projectRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+
+const blogRoot = join(projectRoot, "src", "content", "blog");
+
+const generatedRoot = join(projectRoot, "src", "generated");
+
+const contentRoot = join(generatedRoot, "blog-content");
+
+const indexFile = join(generatedRoot, "blog-index.json");
+
+const languages = [
+  "cpp",
+  "c",
+  "bash",
+  "cmake",
+  "json",
+  "yaml",
+  "javascript",
+  "typescript",
+  "html",
+  "css",
+  "markdown",
+];
+
+const highlighter = await createHighlighter({
+  themes: ["github-dark"],
+  langs: languages,
+});
+
+const aliases = {
+  cc: "cpp",
+  cxx: "cpp",
+
+  sh: "bash",
+  shell: "bash",
+  console: "bash",
+
+  js: "javascript",
+  jsx: "javascript",
+
+  ts: "typescript",
+  tsx: "typescript",
+
+  yml: "yaml",
+
+  md: "markdown",
+
+  txt: "text",
+  plaintext: "text",
+};
+
+function normalizeLanguage(language = "") {
+  const value = language.trim().toLowerCase().split(/\s+/)[0];
+
+  return aliases[value] || value;
+}
+
+function escapeHtml(value) {
+  return value
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function parseFrontmatter(source) {
+  const match = source.match(/^---\s*\n([\s\S]*?)\n---\s*\n?/);
+
+  const fields = {};
+
+  if (match) {
+    for (const line of match[1].split("\n")) {
+      const entry = line.match(/^([\w-]+):\s*["']?(.*?)["']?\s*$/);
+
+      if (entry) {
+        fields[entry[1]] = entry[2];
+      }
+    }
+  }
+
+  return {
+    fields,
+
+    body: source.slice(match ? match[0].length : 0),
+  };
+}
+
+function titleFromPath(path) {
+  return path
+    .split("/")
+    .at(-1)
+    .replace(/[-_]/g, " ")
+    .replace(/\b\w/g, (letter) => letter.toUpperCase());
+}
+
+function normalizePath(file) {
+  const path = relative(blogRoot, file)
+    .replaceAll("\\", "/")
+    .replace(/\.md$/, "");
+
+  return path === "index" ? "" : path.replace(/\/index$/, "");
+}
+
+function normalizeLinks(markdown, path) {
+  const base = path.split("/").slice(0, -1);
+
+  return markdown
+    .replace(/https?:\/\/blog\.vixcpp\.com\/posts\//g, "/blog/")
+    .replace(/https?:\/\/blog\.vixcpp\.com\/?/g, "/blog")
+    .replace(/\]\(\/posts\//g, "](/blog/")
+    .replace(/\]\((\.\.?\/[^)#]+)\.md(#[^)]+)?\)/g, (_, target, hash = "") => {
+      const parts = [...base, ...target.split("/")];
+
+      const resolved = [];
+
+      for (const part of parts) {
+        if (!part || part === ".") {
+          continue;
+        }
+
+        if (part === "..") {
+          resolved.pop();
+          continue;
+        }
+
+        resolved.push(part);
+      }
+
+      const destination = resolved.join("/").replace(/\/index$/, "");
+
+      return `](/blog/${destination}${hash})`;
+    });
+}
+
+function collectMarkdownFiles(directory) {
+  const files = [];
+
+  for (const entry of readdirSync(directory, {
+    withFileTypes: true,
+  })) {
+    const path = join(directory, entry.name);
+
+    if (entry.isDirectory()) {
+      files.push(...collectMarkdownFiles(path));
+
+      continue;
+    }
+
+    if (entry.name.endsWith(".md")) {
+      files.push(path);
+    }
+  }
+
+  return files;
+}
+
+const loadedLanguages = new Set(highlighter.getLoadedLanguages());
+
+const renderer = new marked.Renderer();
+
+renderer.code = ({ text, lang }) => {
+  const language = normalizeLanguage(lang);
+
+  if (!language || language === "text" || !loadedLanguages.has(language)) {
+    return [
+      '<pre class="blog-code blog-code--plain">',
+      `<code>${escapeHtml(text)}</code>`,
+      "</pre>",
+    ].join("");
+  }
+
+  const highlighted = highlighter.codeToHtml(text, {
+    lang: language,
+    theme: "github-dark",
+  });
+
+  return highlighted.replace(
+    '<pre class="shiki',
+    '<pre class="blog-code shiki',
+  );
+};
+
+marked.use({
+  renderer,
+});
+
+/*
+ * Remove stale generated Blog data first.
+ */
+rmSync(contentRoot, {
+  recursive: true,
+  force: true,
+});
+
+mkdirSync(contentRoot, {
+  recursive: true,
+});
+
+const posts = [];
+
+for (const file of collectMarkdownFiles(blogRoot)) {
+  const path = normalizePath(file);
+
+  if (!path) {
+    continue;
+  }
+
+  const source = readFileSync(file, "utf8");
+
+  const { fields, body } = parseFrontmatter(source);
+
+  const heading = body.match(/^#\s+(.+)$/m)?.[1];
+
+  const normalizedBody = normalizeLinks(body, path);
+
+  const html = marked.parse(normalizedBody, {
+    async: false,
+  });
+
+  posts.push({
+    path,
+
+    title: fields.title || heading || titleFromPath(path),
+
+    description: fields.description || "",
+
+    date: fields.date || "",
+
+    author: fields.author || "",
+  });
+
+  const outputFile = join(contentRoot, `${path}.json`);
+
+  mkdirSync(dirname(outputFile), {
+    recursive: true,
+  });
+
+  writeFileSync(outputFile, `${JSON.stringify({ html })}\n`, "utf8");
+}
+
+posts.sort(
+  (a, b) =>
+    (b.date || "").localeCompare(a.date || "") || a.path.localeCompare(b.path),
+);
+
+mkdirSync(generatedRoot, {
+  recursive: true,
+});
+
+writeFileSync(indexFile, `${JSON.stringify(posts, null, 2)}\n`, "utf8");
+
+console.log(
+  `Generated ${posts.length} Blog posts with build-time syntax highlighting.`,
+);

vix-site/scripts/generate-blog-html.mjs

@@ -1,6 +1,55 @@
 <script setup>
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import { useHead } from "@unhead/vue";
 import SiteHeader from "./components/layout/SiteHeader.vue";
 import SiteFooter from "./components/layout/SiteFooter.vue";
+import { findBlogPost } from "./data/blog";
+
+const route = useRoute();
+const meta = computed(() => {
+  const post =
+    route.path.startsWith("/blog/") && findBlogPost(route.params.pathMatch);
+  const pages = {
+    "/": [
+      "Vix.cpp | A runtime for C++ applications",
+      "Vix.cpp is a runtime for C++ applications. It provides a coherent way to build, run, and operate C++ software throughout its lifecycle.",
+    ],
+    "/learn": [
+      "Learn Vix.cpp",
+      "Learn how Vix.cpp supports C++ application development.",
+    ],
+    "/community": [
+      "Community | Vix.cpp",
+      "Connect with the Vix.cpp community.",
+    ],
+    "/blog": [
+      "Blog | Vix.cpp",
+      "News, technical deep dives, release notes, and development updates from the Vix.cpp project.",
+    ],
+  };
+  const [title, description] = post
+    ? [`${post.title} | Vix.cpp`, post.description]
+    : pages[route.path] || ["Vix.cpp", ""];
+  const path = post ? `/blog/${post.path}` : route.path;
+  const url = `https://vixcpp.com${path === "/" ? "/" : path}`;
+  return {
+    title,
+    meta: [
+      { name: "description", content: description },
+      { property: "og:type", content: post ? "article" : "website" },
+      { property: "og:site_name", content: "Vix.cpp" },
+      { property: "og:title", content: title },
+      { property: "og:description", content: description },
+      { property: "og:url", content: url },
+      { name: "twitter:card", content: "summary" },
+      { name: "twitter:title", content: title },
+      { name: "twitter:description", content: description },
+    ],
+    link: [{ rel: "canonical", href: url }],
+  };
+});
+useHead(meta);
 </script>
 
 <template>

vix-site/src/App.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { loadBlogPostHtml } from "../../data/blog";
+
+const props = defineProps({
+  path: {
+    type: String,
+    required: true,
+  },
+});
+
+const html = await loadBlogPostHtml(props.path);
+</script>
+
+<template>
+  <div class="post-content" v-html="html" />
+</template>