WIP function page

Author: Fernando-A-Rocha

web/astro.config.mjs

@@ -28,6 +28,7 @@ export default defineConfig({
 				// Override some default components
 				Pagination: './src/overrides/Pagination.astro',
 			},
+			customCss: [ './src/styles/custom.css' ],
 			disable404Route: true,
 			sidebar: [
 				{

web/src/pages/Scripting_Events.astro

@@ -11,18 +11,6 @@ import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
     TODO
 </StarlightPage>
 
-<style>
-.side-shared {
-    color: rgb(117, 117, 255);
-}
-.side-client {
-    color: rgb(255, 50, 50);
-}
-.side-server {
-    color: rgb(232, 115, 0);
-}
-</style>
-
 <script>
     document.querySelectorAll('.side-type-color').forEach(el => {
         const type = el.textContent || '';

web/src/pages/Scripting_Functions.astro

@@ -1,6 +1,6 @@
 ---
 import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
-import { getFunctionsByCategory, getFunctionType } from '@src/utils/functions';
+import { getFunctionsByCategory, getFunctionInfo } from '@src/utils/functions';
 
 const functionsByCategory = getFunctionsByCategory();
 ---
@@ -17,30 +17,10 @@ const functionsByCategory = getFunctionsByCategory();
                 <summary>{category} functions</summary>
                 <ul>
                     {funcs.map(func => (
-                        <li><a href={`/${func.id}`}>{func.id}</a> (<span class="side-type-color">{getFunctionType(func.data)}</span>)</li>
+                        <li><a href={`/${func.id}`}>{func.id}</a> (<span class={"side-"+getFunctionInfo(func.data).type}>{getFunctionInfo(func.data).typePretty}</span>)</li>
                     ))}
                 </ul>
             </details>
         </section>
     ))}
 </StarlightPage>
-
-<style>
-.side-shared {
-    color: rgb(117, 117, 255);
-}
-.side-client {
-    color: rgb(255, 50, 50);
-}
-.side-server {
-    color: rgb(232, 115, 0);
-}
-</style>
-
-<script>
-    document.querySelectorAll('.side-type-color').forEach(el => {
-        const type = el.textContent || '';
-        el.classList.add(`side-${type.toLowerCase()}`);
-    });
-
-</script>

web/src/pages/[func].astro

@@ -1,7 +1,7 @@
 ---
 import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
 import { getCollection } from 'astro:content';
-import { getFunctionType } from '@src/utils/functions';
+import { getFunctionInfo } from '@src/utils/functions';
 
 export async function getStaticPaths() {
     const functions = await getCollection('functions');
@@ -12,13 +12,26 @@ export async function getStaticPaths() {
 }
 
 const { func } = Astro.props;
+
+const funcInfo = getFunctionInfo(func.data);
+
+const funcType = funcInfo.type;
+const funcTypePretty = funcInfo.typePretty;
+const funcTypeClass = `side-${funcType}`;
+
+const funcPair = funcInfo.pair;
 ---
+
 <StarlightPage frontmatter={{
     template: 'doc',
     title: func.id,
     tableOfContents: false,
 }}>
-    <div>
-        {getFunctionType(func.data)}
-    </div>
+    <p><strong>Type:</strong> <span class={funcTypeClass}>{funcTypePretty}</span></p>
+
+    {funcPair && (
+        <p>Pair: <a href={ funcPair }>{ funcPair }</a></p>
+    )}
+
+    <p>{ funcInfo.description }</p>
 </StarlightPage>

web/src/styles/custom.css

@@ -0,0 +1,12 @@
+/* Custom MTA Wiki CSS */
+
+/* Styling for "Client-side / Server-side / Shared" */
+.side-shared {
+    color: rgb(117, 117, 255);
+}
+.side-client {
+    color: rgb(255, 50, 50);
+}
+.side-server {
+    color: rgb(232, 115, 0);
+}

web/src/utils/functions.ts

@@ -12,17 +12,32 @@ type FunctionsByTypeByCategory = {
     server: FunctionsByCategory;
 };
 
-type FunctionData = {
-    shared?: object;
-    client?: object;
-    server?: object;
+export type FunctionData = {
+    shared?: any;
+    client?: any;
+    server?: any;
 };
 
-export function getFunctionType(data: FunctionData): 'shared' | 'client' | 'server' {
+function getFunctionType(data: FunctionData): 'shared' | 'client' | 'server' {
     if (data.shared) return 'shared';
     if (data.client) return 'client';
     return 'server';
 }
+function getFunctionTypePretty(data: FunctionData): string {
+    const funcType = getFunctionType(data);
+    if (funcType === 'shared') return 'Shared';
+    if (funcType === 'client') return 'Client-side';
+    return 'Server-side';
+}
+
+export function getFunctionInfo(data: FunctionData): any {
+    return {
+        description: data.shared?.description || data.client?.description || data.server?.description || '',
+        type: getFunctionType(data),
+        typePretty: getFunctionTypePretty(data),
+        pair: data.shared?.pair || data.client?.pair || data.server?.pair || false,
+    };
+}
 
 const functionsCollection = await getCollection('functions');
 let functionsByCategory: FunctionsByCategory = {};