From 187f62c71f645baf5b91450c90b66da18076466a Mon Sep 17 00:00:00 2001
From: tonievalue <maciej@muliszewski.com>
Date: Tue, 29 Apr 2025 16:08:52 +0200
Subject: [PATCH 1/5] feat: add function type name in header

---
 web/astro.config.mjs               |  1 +
 web/src/components/TypeBadge.astro | 51 +++++++++++++++++++++++++++
 web/src/overrides/PageTitle.astro  | 55 ++++++++++++++++++++++++++++++
 web/src/pages/[func].astro         | 44 ++++++++++++------------
 web/src/styles/custom.css          | 14 ++++++--
 web/src/utils/functions.ts         | 14 +++++---
 web/src/utils/types.ts             |  1 +
 7 files changed, 151 insertions(+), 29 deletions(-)
 create mode 100644 web/src/components/TypeBadge.astro
 create mode 100644 web/src/overrides/PageTitle.astro
 create mode 100644 web/src/utils/types.ts

diff --git a/web/astro.config.mjs b/web/astro.config.mjs
index 8965ba23..77642022 100644
--- a/web/astro.config.mjs
+++ b/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' ],
diff --git a/web/src/components/TypeBadge.astro b/web/src/components/TypeBadge.astro
new file mode 100644
index 00000000..e87fc808
--- /dev/null
+++ b/web/src/components/TypeBadge.astro
@@ -0,0 +1,51 @@
+---
+import { functionTypePrettyName } from '@src/utils/functions';
+import type { FunctionType } from '@src/utils/types';
+
+interface Props {
+    type: FunctionType;
+}
+
+const { type } = Astro.props;
+---
+
+{type == 'client' && <div class="type-badge type-badge--client">{functionTypePrettyName['client']}</div>}
+{type == 'server' && <div class="type-badge type-badge--server">{functionTypePrettyName['server']}</div>}
+{type == 'shared' && <div class="type-badge type-badge--shared">{functionTypePrettyName['shared']}</div>}
+
+<style>
+    .type-badge {
+        font-size: 12px;
+        border-radius: .25rem;
+        text-transform: uppercase;
+        font-weight: bold;
+        padding: .05rem 1rem;
+        margin-bottom: 1rem;
+    }
+
+    .type-badge.type-badge--client {
+        background-color: var(--color-type-client-background);
+        border: 1px solid var(--color-type-client);
+        color: var(--color-type-client);
+    }
+
+    .type-badge.type-badge--server {
+        background-color: var(--color-type-server-background);
+        border: 1px solid var(--color-type-server);
+        color: var(--color-type-server);
+    }
+
+    .type-badge.type-badge--shared {
+        background-color: var(--color-type-shared-background);
+        border: 1px solid var(--color-type-shared);
+        color: var(--color-type-shared);
+    }
+
+    @media (width >= 48rem) {
+        .type-badge {
+            font-size: initial;
+            padding: .15rem 1.5rem;
+            margin-bottom: 0;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/web/src/overrides/PageTitle.astro b/web/src/overrides/PageTitle.astro
new file mode 100644
index 00000000..ef640329
--- /dev/null
+++ b/web/src/overrides/PageTitle.astro
@@ -0,0 +1,55 @@
+---
+import TypeBadge from '@src/components/TypeBadge.astro';
+---
+<div class="page-title-container">
+    <h1>{Astro.props.entry.data.title}</h1>
+
+    <TypeBadge type="client" />
+    <TypeBadge type="server" />
+    <TypeBadge type="shared" />
+</div>
+
+<style is:global>
+    .type-badge--client,
+    .type-badge--server,
+    .type-badge--shared {
+        display: none
+    }
+
+    .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>
+	h1 {
+		font-size: var(--sl-text-h1);
+		line-height: var(--sl-line-height-headings);
+		font-weight: 600;
+		color: var(--sl-color-white);
+        display: block;
+        width: 100%;
+	}
+
+    .page-title-container {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-end;
+        flex-direction: column-reverse;
+    }
+
+    @media (width >= 48rem) {
+        .page-title-container {
+            justify-content: space-between;
+            align-items: center;
+            flex-direction: row;
+            margin-top: 1rem;
+        }
+    }
+</style>
diff --git a/web/src/pages/[func].astro b/web/src/pages/[func].astro
index e4efce4c..6f3348a3 100644
--- a/web/src/pages/[func].astro
+++ b/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>
\ No newline at end of file
diff --git a/web/src/styles/custom.css b/web/src/styles/custom.css
index 737f4dd0..3df973cb 100644
--- a/web/src/styles/custom.css
+++ b/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);
 }
diff --git a/web/src/utils/functions.ts b/web/src/utils/functions.ts
index 0ed9c837..b75c7151 100644
--- a/web/src/utils/functions.ts
+++ b/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 {
diff --git a/web/src/utils/types.ts b/web/src/utils/types.ts
new file mode 100644
index 00000000..0fc79202
--- /dev/null
+++ b/web/src/utils/types.ts
@@ -0,0 +1 @@
+export type FunctionType = 'shared' | 'client' | 'server';
\ No newline at end of file

From f761556e3ec4a122462623f0fa4e00b4f33c489b Mon Sep 17 00:00:00 2001
From: tonievalue <maciej@muliszewski.com>
Date: Tue, 29 Apr 2025 16:24:00 +0200
Subject: [PATCH 2/5] fix: fix badges on higher resolutions

---
 web/src/overrides/PageTitle.astro | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/web/src/overrides/PageTitle.astro b/web/src/overrides/PageTitle.astro
index ef640329..014adb1e 100644
--- a/web/src/overrides/PageTitle.astro
+++ b/web/src/overrides/PageTitle.astro
@@ -45,6 +45,11 @@ import TypeBadge from '@src/components/TypeBadge.astro';
     }
 
     @media (width >= 48rem) {
+        h1 {
+            display: initial;
+            width: auto;
+        }
+
         .page-title-container {
             justify-content: space-between;
             align-items: center;

From ba07d05efbd581210c12ca57c2622b5375e49da5 Mon Sep 17 00:00:00 2001
From: tonievalue <maciej@muliszewski.com>
Date: Tue, 29 Apr 2025 19:57:33 +0200
Subject: [PATCH 3/5] feat: improve visibility of function type

---
 web/src/components/TypeBadge.astro | 51 ----------------------
 web/src/overrides/PageTitle.astro  | 69 +++++++++++++++++++++++-------
 2 files changed, 53 insertions(+), 67 deletions(-)
 delete mode 100644 web/src/components/TypeBadge.astro

diff --git a/web/src/components/TypeBadge.astro b/web/src/components/TypeBadge.astro
deleted file mode 100644
index e87fc808..00000000
--- a/web/src/components/TypeBadge.astro
+++ /dev/null
@@ -1,51 +0,0 @@
----
-import { functionTypePrettyName } from '@src/utils/functions';
-import type { FunctionType } from '@src/utils/types';
-
-interface Props {
-    type: FunctionType;
-}
-
-const { type } = Astro.props;
----
-
-{type == 'client' && <div class="type-badge type-badge--client">{functionTypePrettyName['client']}</div>}
-{type == 'server' && <div class="type-badge type-badge--server">{functionTypePrettyName['server']}</div>}
-{type == 'shared' && <div class="type-badge type-badge--shared">{functionTypePrettyName['shared']}</div>}
-
-<style>
-    .type-badge {
-        font-size: 12px;
-        border-radius: .25rem;
-        text-transform: uppercase;
-        font-weight: bold;
-        padding: .05rem 1rem;
-        margin-bottom: 1rem;
-    }
-
-    .type-badge.type-badge--client {
-        background-color: var(--color-type-client-background);
-        border: 1px solid var(--color-type-client);
-        color: var(--color-type-client);
-    }
-
-    .type-badge.type-badge--server {
-        background-color: var(--color-type-server-background);
-        border: 1px solid var(--color-type-server);
-        color: var(--color-type-server);
-    }
-
-    .type-badge.type-badge--shared {
-        background-color: var(--color-type-shared-background);
-        border: 1px solid var(--color-type-shared);
-        color: var(--color-type-shared);
-    }
-
-    @media (width >= 48rem) {
-        .type-badge {
-            font-size: initial;
-            padding: .15rem 1.5rem;
-            margin-bottom: 0;
-        }
-    }
-</style>
\ No newline at end of file
diff --git a/web/src/overrides/PageTitle.astro b/web/src/overrides/PageTitle.astro
index 014adb1e..93e41a80 100644
--- a/web/src/overrides/PageTitle.astro
+++ b/web/src/overrides/PageTitle.astro
@@ -1,21 +1,15 @@
 ---
-import TypeBadge from '@src/components/TypeBadge.astro';
+import { functionTypePrettyName } from '@src/utils/functions';
 ---
 <div class="page-title-container">
     <h1>{Astro.props.entry.data.title}</h1>
 
-    <TypeBadge type="client" />
-    <TypeBadge type="server" />
-    <TypeBadge type="shared" />
+    <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>
-    .type-badge--client,
-    .type-badge--server,
-    .type-badge--shared {
-        display: none
-    }
-
     .show-type-badge-client .type-badge--client {
         display: block;
     }
@@ -28,26 +22,66 @@ import TypeBadge from '@src/components/TypeBadge.astro';
 </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);
-        display: block;
-        width: 100%;
 	}
 
     .page-title-container {
         display: flex;
         justify-content: flex-start;
-        align-items: flex-end;
-        flex-direction: column-reverse;
+        align-items: flex-start;
+        flex-direction: column;
+
+        border-bottom: 1px solid var(--color-type-client);
+        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);
+        }
+        
         h1 {
-            display: initial;
-            width: auto;
+            border-bottom: 1px solid var(--color-type-client);
+            padding-bottom: 1.5rem;
+            margin-bottom: calc(-1.5rem - 1px);
         }
 
         .page-title-container {
@@ -55,6 +89,9 @@ import TypeBadge from '@src/components/TypeBadge.astro';
             align-items: center;
             flex-direction: row;
             margin-top: 1rem;
+            margin-bottom: 0;
+            padding-bottom: 0;
+            border-bottom: 0;
         }
     }
 </style>

From f5b7699508749550362dfbb98156ad9a0fad321c Mon Sep 17 00:00:00 2001
From: tonievalue <maciej@muliszewski.com>
Date: Tue, 29 Apr 2025 20:03:13 +0200
Subject: [PATCH 4/5] feat: user proper color for border

---
 web/src/overrides/PageTitle.astro | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/web/src/overrides/PageTitle.astro b/web/src/overrides/PageTitle.astro
index 93e41a80..4d7472cf 100644
--- a/web/src/overrides/PageTitle.astro
+++ b/web/src/overrides/PageTitle.astro
@@ -10,6 +10,16 @@ import { functionTypePrettyName } from '@src/utils/functions';
 </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;
     }
@@ -52,8 +62,7 @@ import { functionTypePrettyName } from '@src/utils/functions';
         justify-content: flex-start;
         align-items: flex-start;
         flex-direction: column;
-
-        border-bottom: 1px solid var(--color-type-client);
+        border-bottom: 1px solid var(--selected-type-color);
         padding-bottom: 1.5rem;
         margin-bottom: calc(-1.5rem - 1px);
         position: relative;
@@ -77,9 +86,9 @@ import { functionTypePrettyName } from '@src/utils/functions';
             background-color: var(--color-type-shared-background);
             border: 1px solid var(--color-type-shared);
         }
-        
+
         h1 {
-            border-bottom: 1px solid var(--color-type-client);
+            border-bottom: 1px solid var(--selected-type-color);
             padding-bottom: 1.5rem;
             margin-bottom: calc(-1.5rem - 1px);
         }

From 42799f51e0cda065c10b49c1d0e4131ff73c9659 Mon Sep 17 00:00:00 2001
From: tonievalue <maciej@muliszewski.com>
Date: Wed, 30 Apr 2025 10:41:22 +0200
Subject: [PATCH 5/5] feat: extend highlight border to full container

---
 web/src/overrides/PageTitle.astro | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/web/src/overrides/PageTitle.astro b/web/src/overrides/PageTitle.astro
index 4d7472cf..4ee4178d 100644
--- a/web/src/overrides/PageTitle.astro
+++ b/web/src/overrides/PageTitle.astro
@@ -87,20 +87,11 @@ import { functionTypePrettyName } from '@src/utils/functions';
             border: 1px solid var(--color-type-shared);
         }
 
-        h1 {
-            border-bottom: 1px solid var(--selected-type-color);
-            padding-bottom: 1.5rem;
-            margin-bottom: calc(-1.5rem - 1px);
-        }
-
         .page-title-container {
             justify-content: space-between;
             align-items: center;
             flex-direction: row;
             margin-top: 1rem;
-            margin-bottom: 0;
-            padding-bottom: 0;
-            border-bottom: 0;
         }
     }
 </style>