Create element type pages from .yaml

Author: Fernando-A-Rocha

elements/.gitkeep

@@ -2,12 +2,16 @@
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
 import mtasaStarlightThemePlugin from '@multitheftauto/starlight-theme-mtasa';
+import starlightLinksValidator from 'starlight-links-validator'
 
 // https://astro.build/config
 export default defineConfig({
 	integrations: [
 		starlight({
-			plugins: [ mtasaStarlightThemePlugin() ],
+			plugins: [
+				mtasaStarlightThemePlugin(),
+				starlightLinksValidator(),
+			],
 			favicon: 'favicon.ico',
 			title: 'Multi Theft Auto: Wiki',
 			logo: {

functions/.gitkeep

@@ -13,6 +13,7 @@
     "@astrojs/starlight": "^0.31.1",
     "@multitheftauto/starlight-theme-mtasa": "^1.2.0",
     "astro": "^5.1.5",
-    "sharp": "^0.32.5"
+    "sharp": "^0.32.5",
+    "starlight-links-validator": "^0.14.2"
   }
 }

web/astro.config.mjs

@@ -1,7 +1,11 @@
 import { defineCollection } from 'astro:content';
 import { docsLoader } from '@astrojs/starlight/loaders';
 import { docsSchema } from '@astrojs/starlight/schema';
+import { glob } from 'astro/loaders';
 
 export const collections = {
 	docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+	elements: defineCollection({
+		loader: glob({ pattern: "**/*.yaml", base: "../elements" }),
+	}),
 };

web/package-lock.json

@@ -0,0 +1,8 @@
+---
+title: 'Page not found (404)'
+template: splash
+editUrl: false
+hero:
+  title: 'Page not found'
+  tagline: Error 404. Check the URL or try using the search bar.
+---

web/package.json

@@ -0,0 +1,19 @@
+---
+import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+import { getCollection, render } from 'astro:content';
+// 1. Generate a new path for every collection entry
+export async function getStaticPaths() {
+  const elements = await getCollection('elements');
+  return elements.map(element => ({
+    params: { id: element.id },
+    props: { element },
+  }));
+}
+// 2. For your template, you can get the entry directly from the prop
+const { element } = Astro.props;
+const { Content } = await render(element);
+---
+<StarlightPage frontmatter={{ title: element.data.name }}>
+  <p>TODO</p>
+  <Content />
+</StarlightPage>

web/src/content.config.ts

@@ -0,0 +1,13 @@
+---
+import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+import { getCollection } from 'astro:content';
+const elements = await getCollection('elements');
+---
+<StarlightPage frontmatter={{ title: 'Element types' }}>
+  <p>An <strong>element</strong> is a generic class that can represent almost all in-game entities. The built-in element types are:</p>
+  <ul>
+    {elements.map(element => (
+      <li><a href={`/Element/${element.id}`}>{element.data.name}</a></li>
+    ))}
+  </ul>
+</StarlightPage>