Skip to content

Commit a086559

Browse files
tonievaluetonievalue
tonievalue
and
tonievalue
authored
Better function type visualization (#8)
Co-authored-by: tonievalue <[email protected]>
1 parent 599f485 commit a086559

File tree

6 files changed

+142
-29
lines changed

6 files changed

+142
-29
lines changed

‎web/astro.config.mjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export default defineConfig({
2727
},
2828
components: {
2929
// Override some default components
30+
PageTitle: './src/overrides/PageTitle.astro',
3031
Pagination: './src/overrides/Pagination.astro',
3132
},
3233
customCss: [ './src/styles/custom.css' ],

‎web/src/overrides/PageTitle.astro

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
---
2+
import { functionTypePrettyName } from '@src/utils/functions';
3+
---
4+
<div class="page-title-container">
5+
<h1>{Astro.props.entry.data.title}</h1>
6+
7+
<div class="type-badge type-badge--client">{functionTypePrettyName['client']}</div>
8+
<div class="type-badge type-badge--server">{functionTypePrettyName['server']}</div>
9+
<div class="type-badge type-badge--shared">{functionTypePrettyName['shared']}</div>
10+
</div>
11+
12+
<style is:global>
13+
.show-type-badge-client {
14+
--selected-type-color: var(--color-type-client);
15+
}
16+
.show-type-badge-server {
17+
--selected-type-color: var(--color-type-server);
18+
}
19+
.show-type-badge-shared {
20+
--selected-type-color: var(--color-type-shared);
21+
}
22+
23+
.show-type-badge-client .type-badge--client {
24+
display: block;
25+
}
26+
.show-type-badge-server .type-badge--server {
27+
display: block;
28+
}
29+
.show-type-badge-shared .type-badge--shared {
30+
display: block;
31+
}
32+
</style>
33+
34+
<style>
35+
.type-badge {
36+
font-size: 12px;
37+
border-radius: .25rem;
38+
text-transform: uppercase;
39+
font-weight: bold;
40+
display: none;
41+
}
42+
43+
.type-badge.type-badge--client {
44+
color: var(--color-type-client);
45+
}
46+
.type-badge.type-badge--server {
47+
color: var(--color-type-server);
48+
}
49+
.type-badge.type-badge--shared {
50+
color: var(--color-type-shared);
51+
}
52+
53+
h1 {
54+
font-size: var(--sl-text-h1);
55+
line-height: var(--sl-line-height-headings);
56+
font-weight: 600;
57+
color: var(--sl-color-white);
58+
}
59+
60+
.page-title-container {
61+
display: flex;
62+
justify-content: flex-start;
63+
align-items: flex-start;
64+
flex-direction: column;
65+
border-bottom: 1px solid var(--selected-type-color);
66+
padding-bottom: 1.5rem;
67+
margin-bottom: calc(-1.5rem - 1px);
68+
position: relative;
69+
}
70+
71+
@media (width >= 48rem) {
72+
.type-badge {
73+
font-size: initial;
74+
padding: .15rem 1.5rem;
75+
}
76+
77+
.type-badge.type-badge--client {
78+
background-color: var(--color-type-client-background);
79+
border: 1px solid var(--color-type-client);
80+
}
81+
.type-badge.type-badge--server {
82+
background-color: var(--color-type-server-background);
83+
border: 1px solid var(--color-type-server);
84+
}
85+
.type-badge.type-badge--shared {
86+
background-color: var(--color-type-shared-background);
87+
border: 1px solid var(--color-type-shared);
88+
}
89+
90+
.page-title-container {
91+
justify-content: space-between;
92+
align-items: center;
93+
flex-direction: row;
94+
margin-top: 1rem;
95+
}
96+
}
97+
</style>

‎web/src/pages/[func].astro

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -36,27 +36,27 @@ if ( funcExamples.length > 0 ){
3636
}
3737
});
3838
}
39-
---
40-
41-
<StarlightPage frontmatter={{
42-
template: 'doc',
43-
title: func.id,
44-
tableOfContents: false,
45-
}}>
46-
<p><strong>Type:</strong> <span class={"side-"+funcType}>{funcTypePretty}</span></p>
47-
48-
{funcPair && (
49-
<p><strong>Pair:</strong> <a href={ funcPair }>{ funcPair }</a></p>
50-
)}
5139
52-
<!-- Description -->
53-
<Fragment set:html={marked(funcInfo.description)} />
54-
55-
{funcExamples.length > 0 && funcExamples.map((example: any) => (
56-
<div>
57-
<p set:html={marked(example.description)}></p>
58-
<Code code={example.luaCode} lang="lua" title={path.basename(example.path)} />
59-
</div>
60-
))}
40+
---
6141

62-
</StarlightPage>
42+
<div class={"show-type-badge-" + funcType}>
43+
<StarlightPage frontmatter={{
44+
template: 'doc',
45+
title: func.id,
46+
tableOfContents: false,
47+
}}>
48+
{funcPair && (
49+
<p><strong>Pair:</strong> <a href={ funcPair }>{ funcPair }</a></p>
50+
)}
51+
52+
<!-- Description -->
53+
<Fragment set:html={marked(funcInfo.description)} />
54+
55+
{funcExamples.length > 0 && funcExamples.map((example: any) => (
56+
<div>
57+
<p set:html={marked(example.description)}></p>
58+
<Code code={example.luaCode} lang="lua" title={path.basename(example.path)} />
59+
</div>
60+
))}
61+
</StarlightPage>
62+
</div>

‎web/src/styles/custom.css

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
/* Custom MTA Wiki CSS */
2+
:root {
3+
--color-type-shared: rgba(117, 117, 255, 1);
4+
--color-type-shared-background: rgba(117, 117, 255, 0.05);
5+
--color-type-client: rgba(255, 50, 50, 1);
6+
--color-type-client-background: rgba(255, 50, 50, 0.05);
7+
--color-type-server: rgba(232, 115, 0, 1);
8+
--color-type-server-background: rgba(232, 115, 0, 0.05);
9+
}
210

311
/* Styling for "Client-side / Server-side / Shared" */
412
.side-shared {
5-
color: rgb(117, 117, 255);
13+
color: var(--color-type-shared);
614
}
715
.side-client {
8-
color: rgb(255, 50, 50);
16+
color: var(--color-type-client);
917
}
1018
.side-server {
11-
color: rgb(232, 115, 0);
19+
color: var(--color-type-server);
1220
}

‎web/src/utils/functions.ts

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { getCollection } from 'astro:content';
22
import path from 'path';
33

4+
import type { FunctionType } from './types';
5+
46
type FunctionItem = Awaited<ReturnType<typeof getCollection>>[number];
57

68
type FunctionsByCategory = {
@@ -18,16 +20,20 @@ export type FunctionData = {
1820
server?: any;
1921
};
2022

21-
function getFunctionType(data: FunctionData): 'shared' | 'client' | 'server' {
23+
export const functionTypePrettyName = {
24+
'client': 'Client-side',
25+
'server': 'Server-side',
26+
'shared': 'Shared',
27+
};
28+
29+
function getFunctionType(data: FunctionData): FunctionType {
2230
if (data.shared) return 'shared';
2331
if (data.client) return 'client';
2432
return 'server';
2533
}
2634
function getFunctionTypePretty(data: FunctionData): string {
2735
const funcType = getFunctionType(data);
28-
if (funcType === 'shared') return 'Shared';
29-
if (funcType === 'client') return 'Client-side';
30-
return 'Server-side';
36+
return functionTypePrettyName[funcType] ?? 'Server-side';
3137
}
3238

3339
export function getFunctionInfo(data: FunctionData): any {

‎web/src/utils/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export type FunctionType = 'shared' | 'client' | 'server';

0 commit comments

Comments
 (0)