Merge pull request #16 from thoth-tech/main

Improved Tutorial Guides index page

package.json

@@ -3,14 +3,15 @@
   "type": "module",
   "version": "0.9",
   "scripts": {
-    "dev": "npm run generate-mdx && npm run generate-usage-examples-pages && astro dev",
-    "start": "npm run generate-mdx && npm run generate-usage-examples-pages && astro dev",
-    "build": "npm run generate-mdx && npm run generate-usage-examples-pages && astro build",
+    "dev": "npm run generate-mdx && npm run generate-usage-examples-pages && npm run generate-groups && astro dev",
+    "start": "npm run generate-mdx && npm run generate-usage-examples-pages && npm run generate-groups && astro dev",
+    "build": "npm run generate-mdx && npm run generate-usage-examples-pages && npm run generate-groups && astro build",
     "preview": "astro preview",
     "astro": "astro",
     "generate-mdx": "node ./scripts/components.cjs",
     "generate-usage-examples-pages": "node ./scripts/usage-example-page-generation.cjs",
-    "check-links": "SET CHECK_LINKS=true && npm run build && SET CHECK_LINKS=false"
+    "check-links": "SET CHECK_LINKS=true && npm run build && SET CHECK_LINKS=false",
+    "generate-groups": "node ./scripts/generate-groups.cjs"
   },
   "dependencies": {
     "@astrojs/netlify": "^5.4.0",
@@ -46,4 +47,4 @@
   "devDependencies": {
     "accessible-astro-components": "2.3.6"
   }
-}
+}

scripts/components.cjs

@@ -443,7 +443,7 @@ fs.readFile(`${__dirname}/api.json`, "utf8", async (err, data) => {
 
 
       // Write the MDX file
-      fs.writeFile(`./src/content/docs/api/${name}.mdx`, mdxContent, (err) => {
+      fs.writeFileSync(`./src/content/docs/api/${name}.mdx`, mdxContent, (err) => {
         if (err) {
           console.log(kleur.red(`Error writing ${input} MDX file: ${err.message}`));
         } else {

scripts/generate-groups.cjs

@@ -0,0 +1,19 @@
+const fs = require('fs'); // Import the file system module to interact with the file system
+const path = require('path'); // Import the path module to handle and transform file paths
+
+// Define the path to the directory containing the guide groups
+const guidesDir = './src/content/docs/guides';
+// Define the path where the output JSON file will be saved
+const outputFile = './src/components/guides-groups.json';
+
+// Read the contents of the guides directory
+const groupNames = fs.readdirSync(guidesDir, { withFileTypes: true })
+    // Filter out only the directories from the list of files and directories
+    .filter(dirent => dirent.isDirectory())
+    // Map the directory names to lowercase to standardise them
+    .map(dirent => dirent.name);
+
+// Write the list of group names to the output JSON file
+fs.writeFileSync(outputFile, JSON.stringify(groupNames, null, 2));
+// Log a message to the console indicating that the JSON file has been created
+console.log('Group names have been written to', outputFile);

src/components/Guides.astro

@@ -1,6 +1,9 @@
 ---
 import { LinkCard, CardGrid } from "@astrojs/starlight/components";
+import fs from "fs";
+import path from "path";
 
+// Define the type for frontmatter
 interface Frontmatter {
   title: string;
   description?: string;
@@ -9,73 +12,84 @@ interface Frontmatter {
   category?: string;
 }
 
+// Define paths
+const jsonFilePath = path.resolve("./src/components/guides-groups.json");
+
+// Define the type for the group names
+type GroupName = string;
+
+// Helper function to capitalize and format group names
+function formatGroupName(groupName: GroupName): string {
+  // Replace dashes with spaces and capitalize each word
+  return groupName
+    .replace(/-/g, " ")
+    .split(" ")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}
+
+// Read and parse the JSON file
+const groupNames: GroupName[] = JSON.parse(
+  fs.readFileSync(jsonFilePath, "utf-8"),
+);
+
+// Load and filter posts
 let posts = await Astro.glob<Frontmatter>("../content/docs/guides/*/*.mdx");
 posts = posts.filter((post) => !post.file.endsWith("index.mdx"));
 
-let guides = posts.filter(
-  (post) => post.frontmatter.category?.toLowerCase() == "guides",
-);
-// sort guides on the basis of simplifyed File Path
-guides = guides.sort((a, b) =>
-  simplifyFilePath(a.url?.toString() || "").localeCompare(
-    simplifyFilePath(b.url?.toString() || ""),
-  ),
-);
-let tutorials = posts.filter(
-  (post) => post.frontmatter.category?.toLowerCase() == "tutorials",
-);
-tutorials = tutorials.sort((a, b) =>
-  simplifyFilePath(a.url?.toString() || "").localeCompare(
-    simplifyFilePath(b.url?.toString() || ""),
-  ),
-);
+// Function to check if URL contains the group name
+function urlContainsGroup(url: string, groupName: string): boolean {
+  return url.toLowerCase().includes(groupName.toLowerCase());
+}
 
-function simplifyFilePath(filePath: string) {
-  // Remove leading and trailing slashes
+// Function to simplify file path
+function simplifyFilePath(filePath: string): string {
   filePath = filePath.replace(/^\/|\/$/g, "");
-
-  // Split the path into parts using '/'
   const pathParts = filePath.split("/");
+  const fileFolder = pathParts[pathParts.length - 2];
+  const lastPart = pathParts[pathParts.length - 1];
+  const simplifiedName =
+    fileFolder + "/" + lastPart.split(".").slice(0, -1).join(".");
+  return simplifiedName.toLowerCase();
+}
+---
 
-  // Get the last part of the path (including directory name)
-  const folderPath = pathParts[4] + "/" + pathParts[pathParts.length - 1];
+{
+  groupNames.map((groupName: GroupName) => {
+    // Filter posts by the current group name and check for "guides" or "tutorials" category
+    const filteredPosts = posts
+      .filter(
+        (post) =>
+          (post.frontmatter.category?.toLowerCase() === "guides" ||
+            post.frontmatter.category?.toLowerCase() === "tutorials") &&
+          urlContainsGroup(post.url?.toString() || "", groupName),
+      )
+      .sort((a, b) =>
+        simplifyFilePath(a.url?.toString() || "").localeCompare(
+          simplifyFilePath(b.url?.toString() || ""),
+        ),
+      );
 
-  // Remove file extension (assuming it's after the last dot in the last part)
-  const simplifiedName = folderPath.split(".").slice(0, -1).join(".");
+    // Capitalize and format the group name
+    const formattedGroupName = formatGroupName(groupName);
 
-  return simplifiedName.toLowerCase(); // Convert to lowercase for consistency
+    return (
+      <>
+        <h2>{formattedGroupName}</h2>
+        <CardGrid>
+          {filteredPosts.map((post) => (
+            <LinkCard
+              title={post.frontmatter.title}
+              description={`Written by ${post.frontmatter.author || "Various"}${
+                post.frontmatter.lastupdated
+                  ? ` on ${post.frontmatter.lastupdated}`
+                  : ""
+              }`}
+              href={simplifyFilePath(post.url?.toString() || "")}
+            />
+          ))}
+        </CardGrid>
+      </>
+    );
+  })
 }
----
-
-<h2>Tutorials</h2>
-<CardGrid stagger>
-  {
-    tutorials.map((post) => (
-      <LinkCard
-        title={post.frontmatter.title}
-        description={`Written by ${post.frontmatter.author || "Various"}${
-          post.frontmatter.lastupdated
-            ? ` on ${post.frontmatter.lastupdated}`
-            : ""
-        }`}
-        href={simplifyFilePath(post.url?.toString() || "")}
-      />
-    ))
-  }
-</CardGrid>
-<h2>Guides</h2>
-<CardGrid stagger>
-  {
-    guides.map((post) => (
-      <LinkCard
-        title={post.frontmatter.title}
-        description={`Written by ${post.frontmatter.author || "Various"}${
-          post.frontmatter.lastupdated
-            ? ` on ${post.frontmatter.lastupdated}`
-            : ""
-        }`}
-        href={simplifyFilePath(post.url?.toString() || "")}
-      />
-    ))
-  }
-</CardGrid>

src/components/guides-groups.json

@@ -0,0 +1,14 @@
+[
+  "Animations",
+  "Audio",
+  "Camera",
+  "Graphics",
+  "Input",
+  "Interface",
+  "JSON",
+  "Networking",
+  "Raspberry-GPIO",
+  "Resource-Bundles",
+  "Using-SplashKit",
+  "Utilities"
+]