Better function type visualization

web/astro.config.mjs

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

web/src/overrides/PageTitle.astro

@@ -0,0 +1,97 @@
+---
+import { functionTypePrettyName } from '@src/utils/functions';
+---
+<div class="page-title-container">
+    <h1>{Astro.props.entry.data.title}</h1>
+
+    <div class="type-badge type-badge--client">{functionTypePrettyName['client']}</div>
+    <div class="type-badge type-badge--server">{functionTypePrettyName['server']}</div>
+    <div class="type-badge type-badge--shared">{functionTypePrettyName['shared']}</div>
+</div>
+
+<style is:global>
+    .show-type-badge-client {
+        --selected-type-color: var(--color-type-client);
+    }
+    .show-type-badge-server {
+        --selected-type-color: var(--color-type-server);
+    }
+    .show-type-badge-shared {
+        --selected-type-color: var(--color-type-shared);
+    }
+
+    .show-type-badge-client .type-badge--client {
+        display: block;
+    }
+    .show-type-badge-server .type-badge--server {
+        display: block;
+    }
+    .show-type-badge-shared .type-badge--shared {
+        display: block;
+    }
+</style>
+
+<style>
+    .type-badge {
+        font-size: 12px;
+        border-radius: .25rem;
+        text-transform: uppercase;
+        font-weight: bold;
+        display: none;
+    }
+
+    .type-badge.type-badge--client {
+        color: var(--color-type-client);
+    }
+    .type-badge.type-badge--server {
+        color: var(--color-type-server);
+    }
+    .type-badge.type-badge--shared {
+        color: var(--color-type-shared);
+    }
+
+	h1 {
+		font-size: var(--sl-text-h1);
+		line-height: var(--sl-line-height-headings);
+		font-weight: 600;
+		color: var(--sl-color-white);
+	}
+
+    .page-title-container {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        flex-direction: column;
+        border-bottom: 1px solid var(--selected-type-color);
+        padding-bottom: 1.5rem;
+        margin-bottom: calc(-1.5rem - 1px);
+        position: relative;
+    }
+
+    @media (width >= 48rem) {
+        .type-badge {
+            font-size: initial;
+            padding: .15rem 1.5rem;
+        }
+
+        .type-badge.type-badge--client {
+            background-color: var(--color-type-client-background);
+            border: 1px solid var(--color-type-client);
+        }
+        .type-badge.type-badge--server {
+            background-color: var(--color-type-server-background);
+            border: 1px solid var(--color-type-server);
+        }
+        .type-badge.type-badge--shared {
+            background-color: var(--color-type-shared-background);
+            border: 1px solid var(--color-type-shared);
+        }
+
+        .page-title-container {
+            justify-content: space-between;
+            align-items: center;
+            flex-direction: row;
+            margin-top: 1rem;
+        }
+    }
+</style>

web/src/pages/[func].astro

@@ -36,27 +36,27 @@ if ( funcExamples.length > 0 ){
         }
     });
 }
----
-
-<StarlightPage frontmatter={{
-    template: 'doc',
-    title: func.id,
-    tableOfContents: false,
-}}>
-    <p><strong>Type:</strong> <span class={"side-"+funcType}>{funcTypePretty}</span></p>
-
-    {funcPair && (
-        <p><strong>Pair:</strong> <a href={ funcPair }>{ funcPair }</a></p>
-    )}
 
-    <!-- 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>
+<div class={"show-type-badge-" + funcType}>
+    <StarlightPage frontmatter={{
+        template: 'doc',
+        title: func.id,
+        tableOfContents: false,
+    }}>
+        {funcPair && (
+            <p><strong>Pair:</strong> <a href={ funcPair }>{ funcPair }</a></p>
+        )}
+
+        <!-- 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>
+</div>

web/src/styles/custom.css

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

web/src/utils/functions.ts

@@ -1,6 +1,8 @@
 import { getCollection } from 'astro:content';
 import path from 'path';
 
+import type { FunctionType } from './types';
+
 type FunctionItem = Awaited<ReturnType<typeof getCollection>>[number];
 
 type FunctionsByCategory = {
@@ -18,16 +20,20 @@ export type FunctionData = {
     server?: any;
 };
 
-function getFunctionType(data: FunctionData): 'shared' | 'client' | 'server' {
+export const functionTypePrettyName = {
+    'client': 'Client-side',
+    'server': 'Server-side',
+    'shared': 'Shared',
+};
+
+function getFunctionType(data: FunctionData): FunctionType {
     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';
+    return functionTypePrettyName[funcType] ?? 'Server-side';
 }
 
 export function getFunctionInfo(data: FunctionData): any {

web/src/utils/types.ts

@@ -0,0 +1 @@
+export type FunctionType = 'shared' | 'client' | 'server';