Code display and more pagination buttons (#5)

Author: syncc01

web/src/overrides/Pagination.astro

@@ -15,9 +15,26 @@ import IconLinkCard from '@src/components/IconLinkCard.astro';
         title="Forum"
         description="Engage with the community in the old-fashioned way."
         href="https://forum.multitheftauto.com/" />
-</CardGrid>
 
+    <IconLinkCard
+        icon="seti:powershell" 
+        title="Functions"
+        description="List of all client-side, server-side and shared functions"
+        href="/Scripting_Functions" />
 
+    <IconLinkCard
+        icon="seti:purescript"
+        title="Events"
+        description="List of all client-side, server-side and shared events"
+        href="/Scripting_Events" />
+
+    <IconLinkCard
+        icon="seti:plan"
+        title="Elements"
+        description="List of MTA:SA elements"
+        href="/Element_tree" />
+</CardGrid>
+
 <IconLinkCard
     icon="github"
     title="GitHub Repository"

web/src/pages/[func].astro

@@ -3,6 +3,9 @@ import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
 import { getCollection } from 'astro:content';
 import { getFunctionInfo } from '@src/utils/functions';
 import { marked } from 'marked';
+import fs from "fs";
+import path from "path";
+import { Code } from '@astrojs/starlight/components';
 
 export async function getStaticPaths() {
     const functions = await getCollection('functions');
@@ -15,11 +18,24 @@ export async function getStaticPaths() {
 const { func } = Astro.props;
 
 const funcInfo = getFunctionInfo(func.data);
-
 const funcType = funcInfo.type;
 const funcTypePretty = funcInfo.typePretty;
 
 const funcPair = funcInfo.pair;
+const funcPath = path.dirname(func.filePath ?? "")
+let funcExamples = funcInfo.examples
+
+if ( funcExamples.length > 0 ){
+    funcExamples = funcInfo.examples.map((example: any) => {
+        try {
+            const luaCode = fs.readFileSync(path.resolve(`${funcPath}`, example.path), "utf8"); 
+            return { ...example, luaCode };
+        } catch (error) {
+            console.error(`Error reading ${example.path}:`, error);
+            return { ...example, luaCode: "Loading example error." };
+        }
+    });
+}
 ---
 
 <StarlightPage frontmatter={{
@@ -35,4 +51,12 @@ const funcPair = funcInfo.pair;
 
     <!-- Description -->
     <Fragment set:html={marked(funcInfo.description)} />
+
+    {funcExamples.length > 0 && funcExamples.map((example: any) => (
+        <div>
+            <p set:html={marked(example.description)}></p>
+            <Code code={example.luaCode} lang="lua" title={path.basename(example.path)} />
+        </div>
+    ))}
+
 </StarlightPage>

web/src/utils/functions.ts

@@ -36,6 +36,7 @@ export function getFunctionInfo(data: FunctionData): any {
         type: getFunctionType(data),
         typePretty: getFunctionTypePretty(data),
         pair: data.shared?.pair || data.client?.pair || data.server?.pair || false,
+        examples: data.shared?.examples || data.client?.examples || data.server?.examples || [ ],
     };
 }