Add related articles

astro.config.mjs

@@ -5,10 +5,142 @@ import tailwind from "@astrojs/tailwind";
 import sectionize from "@hbsnow/rehype-sectionize";
 import icon from "astro-icon";
 import { defineConfig } from "astro/config";
+import fs from "fs";
+import matter from "gray-matter";
+import path from "path";
+
+const articleFiles = new Map();
+
+const articleObjs = [];
+
+export var articleMatches = [];
+
+function readDirectory(directory, articleDir) {
+  fs.readdirSync(directory).forEach((file) => {
+    const Absolute = path.join(directory, file);
+    let fileName = file.toString();
+
+    if (fileName.indexOf(".") >= 0) {
+      fileName = fileName.substring(0, fileName.indexOf("."));
+    }
+
+    if (fs.statSync(Absolute).isDirectory())
+      return readDirectory(Absolute, fileName);
+    else if (file.endsWith(".mdx") || file.endsWith(".md"))
+      articleFiles.set(fileName == "index" ? articleDir : fileName, Absolute);
+  });
+}
+
+function parseIntroduction(markdown) {
+  const regex = /## Introduction\s+([\s\S]*?)(?=\n\n## |$)/;
+  const match = markdown.match(regex);
+
+  if (match) {
+    console.log(match[1].trim());
+  }
+  return match ? match[1].trim() : "";
+}
+
+function parseConclusion(markdown) {
+  const regex = /## Conclusion\s+([\s\S]*?)(?=\n\n|$)/;
+  const match = markdown.match(regex);
+
+  if (match) {
+    console.log(match[1].trim());
+  }
+  return match ? match[1].trim() : "";
+}
+
+function buildArticleJson() {
+  articleFiles.forEach((value, key) => {
+    const article = fs.readFileSync(path.join(value), "utf8");
+    const { data } = matter(article);
+    const obj = {
+      slug: key,
+      content: `${data.title}. ${data.excerpt}. ${data.tags.join(" ")}. ${parseIntroduction(article)}`,
+    };
+    console.log(obj);
+    articleObjs.push(obj);
+  });
+
+  console.log(`Read ${articleObjs.length} articles.`);
+}
+
+async function addEmbeddedArticles() {
+  console.log("Vectorizing articles...");
+
+  const directory = "./src/content/articles";
+
+  readDirectory(directory, null);
+  buildArticleJson();
+
+  try {
+    const externalResponse = await fetch(
+      "https://related-articles.andrei-023.workers.dev/add_articles",
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ articles: articleObjs }),
+      },
+    );
+
+    console.log("Uploaded articles");
+  } catch (error) {
+    console.error("Error sending files:", error);
+  }
+}
+
+async function getArticleMatches() {
+  try {
+    const res = await fetch(
+      "https://related-articles.andrei-023.workers.dev/match_articles",
+      {
+        method: "GET",
+        headers: { "Content-Type": "application/json" },
+      },
+    );
+
+    const body = await res.json();
+
+    fs.writeFile(
+      "src/data/matchedArticles.json",
+      JSON.stringify(body),
+      (err) => {
+        if (err) {
+          console.error(err);
+          return;
+        }
+        console.log("JSON data saved to data.json");
+      },
+    );
+  } catch (error) {
+    console.error("Error sending files:", error);
+  }
+}
+
+// Custom Astro integration
+function buildStart() {
+  return {
+    name: "my-build-start",
+    hooks: {
+      "astro:build:start": async () => {
+        // const branch = process.env.CF_PAGES_BRANCH || "unknown"
+        // if (branch !== "main") {
+        //   await addEmbeddedArticles();
+        //   await getArticleMatches();
+        // }
+        //
+        await addEmbeddedArticles();
+        await getArticleMatches();
+      },
+    },
+  };
+}
 
 export default defineConfig({
   site: "https://rockthejvm.com",
   integrations: [
+    buildStart(),
     icon({
       include: {
         "fa6-brands": [

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles/base.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@assets/components",
+    "utils": "@assets/lib/utils",
+    "ui": "@assets/components/ui",
+    "lib": "@assets/lib",
+    "hooks": "@assets/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package.json

@@ -20,21 +20,29 @@
     "@iconify-json/fa6-brands": "^1.2.0",
     "@iconify-json/fa6-solid": "^1.2.0",
     "@iconify-json/heroicons": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.1",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.9",
     "@types/react-dom": "^18.3.0",
     "astro": "^4.15.6",
     "astro-embed": "^0.7.2",
     "astro-icon": "^1.1.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "effect": "^3.10.13",
+    "embla-carousel-react": "^8.5.1",
     "fp-ts": "^2.16.9",
+    "gray-matter": "^4.0.3",
+    "lucide-react": "^0.469.0",
     "mdast-util-to-string": "^4.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-share": "^5.1.0",
     "reading-time": "^1.5.0",
     "sharp": "^0.33.5",
-    "tailwindcss": "^3.4.11"
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^3.4.11",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20241022.0",