UPDATE: Delete guides, add Card Componennt with astro-icons, cleanup …

…command.

astro.config.mjs

@@ -16,7 +16,8 @@ export default defineConfig({
     starlight({
       title: "SplashKit",
       components: {
-        Sidebar: './src/components/Sidebar.astro',
+        Sidebar: './src/components/Sidebar.astro'
+
       },
       expressiveCode: {
         // theme: ["github-dark", "github-light"],

package.json

@@ -8,7 +8,8 @@
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
-    "generate-mdx": "node ./scripts/components.cjs && node ./scripts/guides.cjs"
+    "generate-mdx": "node ./scripts/components.cjs && node ./scripts/guides.cjs",
+    "cleanup": "node ./scripts/cleanup.cjs"
   },
   "dependencies": {
     "@astrojs/netlify": "^3.0.4",

scripts/cleanup.cjs

@@ -0,0 +1,60 @@
+const fs = require('fs').promises;
+const path = require('path');
+const kleur = require('kleur');
+
+const apiPath = path.join(__dirname, '..', 'src', 'content', 'docs', 'api');
+const guidePath = path.join(__dirname, '..', 'src', 'content', 'docs', 'guides');
+async function deleteComponents(folderPath) {
+    try {
+      const files = await fs.readdir(folderPath);
+
+      for (const file of files) {
+        const filePath = path.join(folderPath, file);
+        const extname = path.extname(filePath);
+
+        if (extname === '.mdx') {
+          await fs.unlink(filePath);
+          console.log(kleur.red(`Deleted: ${filePath}`));
+        }
+      }
+
+      console.log(kleur.green('Deleted all .mdx files in the api folder.'));
+    } catch (error) {
+      console.error(kleur.red(`Error deleting .mdx files: ${error.message}`));
+    }
+}
+
+
+// Recursive function to delete all index.mdx files in a folder and its subfolders
+async function deleteGuides(folderPath) {
+  try {
+    const files = await fs.readdir(folderPath);
+
+    for (const file of files) {
+      const filePath = path.join(folderPath, file);
+      const isDirectory = (await fs.stat(filePath)).isDirectory();
+
+      if (isDirectory) {
+        // Recursively call the function for subfolders
+        await deleteGuides(filePath);
+      } else {
+        const extname = path.extname(filePath);
+
+        if (extname === '.mdx' && file.toLowerCase() === 'index.mdx') {
+          // Delete the index.mdx file
+          await fs.unlink(filePath);
+          console.log(kleur.green(`Deleted: ${filePath}`));
+        }
+      }
+    }
+  } catch (error) {
+    console.error(kleur.red(`Error deleting Guide index files: ${error.message}`));
+  }
+}
+
+// Specify the root folder path
+const rootPath = path.join(__dirname, '..', 'src', 'content', 'docs', 'guides');
+
+// Call the function to delete index.mdx files
+deleteComponents(apiPath);
+deleteGuides(guidePath);

scripts/components.cjs

@@ -49,6 +49,7 @@ const languageOrder = ["cpp", "csharp", "python", "pascal"];
 var name = "";
 
 
+
 // Function to process a single folder
 async function processFolder(folderPath) {
   try {

scripts/guides.cjs

@@ -6,121 +6,110 @@ const kleur = require('kleur');
 
 const rootPath = path.join(__dirname, '..', 'src', 'content', 'docs', 'guides');
 
-try {
-  async function processFolder(folderPath, topLevelFolderName = '') {
-
 
-    try {
-      const files = await fs.readdir(folderPath);
-      const linkCards = [];
-
-      for (const file of files) {
-        const filePath = path.join(folderPath, file);
-        const isDirectory = (await fs.stat(filePath)).isDirectory();
-
-        if (isDirectory) {
-          const subfolderName = path.basename(filePath);
-
-          // Recursive call to process subfolder
-          await processFolder(filePath, `${topLevelFolderName ? `${topLevelFolderName}/` : ''}${subfolderName}`);
-
-          // Add LinkCard for subfolder
-          linkCards.push(
-            `<LinkCard
-              title="${subfolderName} Guides"
-              description="Examples & Guides"
-              href="/guides/${topLevelFolderName ? `${topLevelFolderName.toLowerCase()}/` : ''}${subfolderName.toLowerCase()}/"
-            />`
-          );
-        } else {
-          const extname = path.extname(filePath);
-
-          if (extname === '.md' || extname === '.mdx') {
-            if (file !== 'index.mdx') {
-              const fileContent = await fs.readFile(filePath, 'utf-8');
-              const frontmatter = extractFrontmatter(fileContent, filePath);
-
-              const author = frontmatter.author || 'Various';
-              const lastupdated = frontmatter.lastupdated ? `on ${frontmatter.lastupdated}` : '';
-
-              // Convert title to lowercase and replace spaces with '-'
-              const folderTitle = path.relative(rootPath, folderPath).split(path.sep).join('/').toLowerCase();
-
-              // Convert file name to lowercase and replace spaces with '-'
-              const fileName = file.replace(/\.mdx?$/, '').toLowerCase().replace(/ /g, '-');
-
-              linkCards.push(
-                `<LinkCard
-                  title="${frontmatter.title || fileName}"
-                  description="Written by ${author} ${lastupdated}"
-                  href="/guides/${folderTitle}/${fileName}/"
-                />`
-              );
-            }
+async function processFolder(folderPath, topLevelFolderName = '') {
+  try {
+    const files = await fs.readdir(folderPath);
+    const linkCards = [];
+
+    for (const file of files) {
+      const filePath = path.join(folderPath, file);
+      const isDirectory = (await fs.stat(filePath)).isDirectory();
+
+      if (isDirectory) {
+        // Recursive call to process subfolder
+        await processFolder(filePath, `${topLevelFolderName ? `${topLevelFolderName}/` : ''}${path.basename(filePath)}`);
+      } else {
+        const extname = path.extname(filePath);
+
+        if (extname === '.md' || extname === '.mdx') {
+          if (file !== 'index.mdx') {
+            // Continue processing only if there is at least one file other than mdx
+
+            const fileContent = await fs.readFile(filePath, 'utf-8');
+            const frontmatter = extractFrontmatter(fileContent, filePath);
+
+            const author = frontmatter.author || 'Various';
+            const lastupdated = frontmatter.lastupdated ? `on ${frontmatter.lastupdated}` : '';
+
+            // Convert title to lowercase and replace spaces with '-'
+            const folderTitle = path.relative(rootPath, folderPath).split(path.sep).join('/').toLowerCase();
+
+            // Convert file name to lowercase and replace spaces with '-'
+            const fileName = file.replace(/\.mdx?$/, '').toLowerCase().replace(/ /g, '-');
+
+            linkCards.push(
+              `<LinkCard
+                title="${frontmatter.title || fileName}"
+                description="Written by ${author} ${lastupdated}"
+                href="/guides/${folderTitle}/${fileName}/"
+              />`
+            );
           }
         }
       }
+    }
 
+    if (linkCards.length > 0) {
       const indexMdxContent = generateIndexMdxContent(linkCards);
       const indexFilePath = path.join(folderPath, 'index.mdx');
 
       await fs.writeFile(indexFilePath, indexMdxContent);
       const folders = indexFilePath.split(path.sep);
       const lastTwoFolders = folders.slice(-2);
-
-      console.log(kleur.blue(`Guides -> `)+ kleur.green(`${lastTwoFolders.join(' ')}`));
-    } catch (error) {
-      const folders = folderPath.split(path.sep);
-      const lastTwoFolders = folders.slice(-2);
-
-
-      console.log(kleur.red(`Error processing ${lastTwoFolders.join(' -> ')}: ${error.message}`));
+
+      console.log(kleur.blue(`Guides -> `) + kleur.green(`${lastTwoFolders.join(' ')}`));
     }
+  } catch (error) {
+    const folders = folderPath.split(path.sep);
+    const lastTwoFolders = folders.slice(-2);
+
+    console.log(kleur.red(`Error processing ${lastTwoFolders.join(' -> ')}: ${error.message}`));
   }
+}
 
 
-
 
-  function extractFrontmatter(content, filePath) {
-    const frontmatterRegex = /^---\n([\s\S]+?)\n---/;
-    const match = content.match(frontmatterRegex);
 
-    if (match && match[1]) {
-      const frontmatterString = match[1];
+function extractFrontmatter(content, filePath) {
+  const frontmatterRegex = /^---\n([\s\S]+?)\n---/;
+  const match = content.match(frontmatterRegex);
 
-      try {
-        const frontmatter = yaml.load(frontmatterString);
+  if (match && match[1]) {
+    const frontmatterString = match[1];
 
-        // Ensure that the frontmatter is an object
-        if (frontmatter && typeof frontmatter === 'object') {
-          return frontmatter;
-        } else {
-          console.error(`Invalid frontmatter in file: ${filePath}`);
-        }
-      } catch (error) {
-        console.error(`Error parsing frontmatter in file: ${filePath}`);
+    try {
+      const frontmatter = yaml.load(frontmatterString);
+
+      // Ensure that the frontmatter is an object
+      if (frontmatter && typeof frontmatter === 'object') {
+        return frontmatter;
+      } else {
+        console.error(`Invalid frontmatter in file: ${filePath}`);
       }
+    } catch (error) {
+      console.error(`Error parsing frontmatter in file: ${filePath}`);
     }
+  }
 
-    return {};
-  } 
+  return {};
+}
 
-  function generateIndexMdxContent(linkCards) {
-    return `---
+function generateIndexMdxContent(linkCards) {
+  return `---
 title: Index Routing Page
 sidebar:
   hidden: true
 ---
 
 import { LinkCard, CardGrid } from "@astrojs/starlight/components";
 
-<CardGrid>
+<CardGrid stagger>
   ${linkCards.join('\n  ')}
 </CardGrid>
 `;
-  }
-
-  processFolder(rootPath);
-} catch (error) {
-  console.log(error);
 }
+
+
+
+processFolder(rootPath);

src/components/Card.astro

@@ -0,0 +1,59 @@
+---
+import type { Props } from "@astrojs/starlight/props";
+import { Icon } from 'astro-icon'
+const { icon, title } = Astro.props;
+---
+
+<article class="card sl-flex">
+	<p class="title sl-flex">
+		{icon &&<Icon name={icon} class="icon" size="1.333em" />}
+		<span set:html={title} />
+	</p>
+	<div class="body"><slot /></div>
+</article>
+
+<style>
+	.card {
+		--sl-card-border: var(--sl-color-purple);
+		--sl-card-bg: var(--sl-color-purple-low);
+		border: 1px solid var(--sl-color-gray-5);
+		background-color: var(--sl-color-black);
+		padding: clamp(1rem, calc(0.125rem + 3vw), 2.5rem);
+		flex-direction: column;
+		gap: clamp(0.5rem, calc(0.125rem + 1vw), 1rem);
+	}
+	.card:nth-child(4n + 1) {
+		--sl-card-border: var(--sl-color-orange);
+		--sl-card-bg: var(--sl-color-orange-low);
+	}
+	.card:nth-child(4n + 3) {
+		--sl-card-border: var(--sl-color-green);
+		--sl-card-bg: var(--sl-color-green-low);
+	}
+	.card:nth-child(4n + 4) {
+		--sl-card-border: var(--sl-color-red);
+		--sl-card-bg: var(--sl-color-red-low);
+	}
+	.card:nth-child(4n + 5) {
+		--sl-card-border: var(--sl-color-blue);
+		--sl-card-bg: var(--sl-color-blue-low);
+	}
+	.title {
+		font-weight: 600;
+		font-size: var(--sl-text-h4);
+		color: var(--sl-color-white);
+		line-height: var(--sl-line-height-headings);
+		gap: 1rem;
+		align-items: center;
+	}
+	.card .icon {
+		border: 1px solid var(--sl-card-border);
+		background-color: var(--sl-card-bg);
+		padding: 0.2em;
+		border-radius: 0.25rem;
+	}
+	.card .body {
+		margin: 0;
+		font-size: clamp(var(--sl-text-sm), calc(0.5rem + 1vw), var(--sl-text-body));
+	}
+</style>

src/content/config.ts

@@ -1,5 +1,5 @@
 import { defineCollection } from 'astro:content';
-import { docsSchema, i18nSchema } from '@astrojs/starlight/schema';
+import { docsSchema } from '@astrojs/starlight/schema';
 
 export const collections = {
 	docs: defineCollection({ schema: docsSchema() }),