Skip to content

Commit e6937f7

Browse files
Fernando-A-RochaFernando-A-Rocha
committed
Improve function and event lists using reusable component
1 parent a909524 commit e6937f7

12 files changed

+118
-103
lines changed

‎elements/Audio/sound.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ description: |
44
55
A sound element can be manipulated in the GTA 3D world via [setElementPosition](/setElementPosition) and [setElementDimension](/setElementDimension).
66
7-
Sound elements can also be manipulated using the other [Client audio functions](/client_audio_functions).
7+
Sound elements can also be manipulated using the other [Audio functions](/Scripting_Functions#Audio).
88
99
1010
see_also:

‎elements/Drawing/dx-font.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
name: dx-font
22
description: |
3-
The **DX font** class represents a custom typeface which can be used in the **Drawing functions**. A DX font is created with [dxCreateFont](/dxCreateFont) and can be used as a parameter in [dxDrawText](/dxDrawText).
3+
The **DX font** class represents a custom typeface which can be used in the [Drawing functions](/Scripting_Functions#Drawing). A DX font is created with [dxCreateFont](/dxCreateFont) and can be used as a parameter in [dxDrawText](/dxDrawText).

‎web/astro.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export default defineConfig({
8484
items: [
8585
{label: 'Element types', link: 'Element'},
8686
{label: 'Element tree', link: 'Element_tree'},
87-
{label: 'Entity', link: 'Entity'},
87+
{label: 'Entities', link: 'Entity'},
8888
]
8989
},
9090
{

‎web/src/components/CategoryList.astro‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
---
2+
import { getFunctionInfo } from '@src/utils/functions';
3+
import { getEventTypePretty } from '@src/utils/events';
4+
import { Icon } from '@astrojs/starlight/components';
5+
6+
interface Props {
7+
itemsByCategory: any;
8+
what: string;
9+
}
10+
11+
const { itemsByCategory, what } = Astro.props;
12+
const categories = Object.keys(itemsByCategory);
13+
const slugify = (str: string) => str.replace(/\s+/g, '-');
14+
15+
function displayTitle(title: string) {
16+
switch (what) {
17+
case 'all_functions':
18+
case 'client_functions':
19+
case 'server_functions':
20+
case 'shared_functions':
21+
title = title + ' functions';
22+
break;
23+
case 'all_events':
24+
case 'client_events':
25+
case 'server_events':
26+
title = title + ' events';
27+
break;
28+
}
29+
return title;
30+
}
31+
function displayItem(item: any) {
32+
switch (what) {
33+
case 'all_functions':
34+
const funcInfo = getFunctionInfo(item.data);
35+
return `<a href=${item.id}>${item.id}</a>
36+
(<span class=${"side-"+funcInfo.type}>${funcInfo.typePretty}</span>)`;
37+
case 'all_events':
38+
return `<a href=${item.id}>${item.id}</a>
39+
(<span class=${"side-"+item.data.type}>${getEventTypePretty(item.data.type)}-side</span>)`;
40+
case 'client_functions':
41+
case 'server_functions':
42+
case 'shared_functions':
43+
case 'client_events':
44+
case 'server_events':
45+
return `<a href=${item.id}>${item.id}</a>`;
46+
}
47+
return '?';
48+
}
49+
---
50+
51+
<section>
52+
<nav>
53+
<h5>Table of Contents</h5>
54+
<ol>
55+
{categories.map(category => (
56+
<li><a href={`#${slugify(category)}`}>{category}</a></li>
57+
))}
58+
</ol>
59+
</nav>
60+
61+
{Object.entries(itemsByCategory).map(([category, items]) => (
62+
<section id={slugify(category)}>
63+
<h4>{displayTitle(category)}
64+
<a href={`#${slugify(category)}`}><Icon size="1.5rem" name="external" class="mtainfoicon"/></a>
65+
</h4>
66+
<ul>
67+
{items.map(item => (
68+
<li set:html={displayItem(item)}></li>
69+
))}
70+
</ul>
71+
</section>
72+
))}
73+
</section>
74+
75+
<style>
76+
.mtainfoicon {
77+
display: inline-block;
78+
vertical-align: center;
79+
cursor: pointer;
80+
}
81+
</style>

‎web/src/pages/Client_Scripting_Events.astro‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
33
import { getSeeAlsoLinksFromList } from '@src/utils/general';
44
import SeeAlsoSection from '@src/components/SeeAlsoSection.astro';
55
import { getEventsByTypeByCategory } from '@src/utils/events';
6+
import CategoryList from '@src/components/CategoryList.astro';
67
78
const eventsByTypeByCategory = getEventsByTypeByCategory();
89
const theseEvents = eventsByTypeByCategory.client;
@@ -12,20 +13,9 @@ const theseEvents = eventsByTypeByCategory.client;
1213
title: 'Client events',
1314
tableOfContents: false,
1415
}}>
15-
<p>This page lists all <strong>client-side</strong> events available in the <a href="/Lua_API">Lua API</a> organized by category.</p>
16+
<p>This page lists all <span class="side-client"><strong>client-side</strong></span> events available in the <a href="/Lua_API">Lua API</a> organized by category.</p>
1617

17-
{Object.entries(theseEvents).map(([category, events]) => (
18-
<section>
19-
<details open>
20-
<summary>{category} events</summary>
21-
<ul>
22-
{events.map(event => (
23-
<li><a href={`/${event.id}`}>{event.id}</a></li>
24-
))}
25-
</ul>
26-
</details>
27-
</section>
28-
))}
18+
<CategoryList itemsByCategory={theseEvents} what="client_events" />
2919

3020
<SeeAlsoSection seeAlsoLinks={getSeeAlsoLinksFromList([
3121
'article:Scripting_Events',

‎web/src/pages/Client_Scripting_Functions.astro‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
33
import { getSeeAlsoLinksFromList } from '@src/utils/general';
44
import SeeAlsoSection from '@src/components/SeeAlsoSection.astro';
55
import { getFunctionsByTypeByCategory } from '@src/utils/functions';
6+
import CategoryList from '@src/components/CategoryList.astro';
67
78
const functionsByTypeByCategory = getFunctionsByTypeByCategory();
89
const theseFunctions = functionsByTypeByCategory.client;
@@ -12,20 +13,9 @@ const theseFunctions = functionsByTypeByCategory.client;
1213
title: 'Client functions',
1314
tableOfContents: false,
1415
}}>
15-
<p>This page lists all <strong>client-side</strong> functions available in the <a href="/Lua_API">Lua API</a> organized by category.</p>
16+
<p>This page lists all <span class="side-client"><strong>client-side</strong></span> functions available in the <a href="/Lua_API">Lua API</a> organized by category.</p>
1617

17-
{Object.entries(theseFunctions).map(([category, funcs]) => (
18-
<section>
19-
<details open>
20-
<summary>{category} functions</summary>
21-
<ul>
22-
{funcs.map(func => (
23-
<li><a href={`/${func.id}`}>{func.id}</a></li>
24-
))}
25-
</ul>
26-
</details>
27-
</section>
28-
))}
18+
<CategoryList itemsByCategory={theseFunctions} what="client_functions" />
2919

3020
<SeeAlsoSection seeAlsoLinks={getSeeAlsoLinksFromList([
3121
'article:Scripting_Functions',

‎web/src/pages/Element.astro‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
33
import { getSeeAlsoLinksFromList } from '@src/utils/general';
4+
import { Icon } from '@astrojs/starlight/components';
45
import SeeAlsoSection from '@src/components/SeeAlsoSection.astro';
56
import ElementOOPInfo from '@src/components/ElementOOPInfo.astro';
67
import { getElementsByCategory, hasOopMethods, getOOPFunctionsForElement } from '@src/utils/elements';
@@ -18,7 +19,8 @@ const elementsByCategory = getElementsByCategory();
1819
<div class="mtaflex">
1920
{Object.entries(elementsByCategory).map(([category, elements]) => (
2021
<div class="mtabox">
21-
<span class="mtabox_title">{category} elements</span>
22+
<span class="mtabox_title" id={category}>{category} elements <a href={"#"+category}><Icon
23+
size="1rem" name="external" class="mtainfoicon" /></a></span>
2224
<ul>
2325
{elements.map(element => (
2426
<li>
@@ -45,6 +47,11 @@ const elementsByCategory = getElementsByCategory();
4547
</StarlightPage>
4648

4749
<style>
50+
.mtainfoicon {
51+
display: inline-block;
52+
vertical-align: center;
53+
cursor: pointer;
54+
}
4855
.mtaflex {
4956
margin-top: 1.5rem;
5057
display: flex;

‎web/src/pages/Scripting_Events.astro‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,18 @@
22
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
33
import { getSeeAlsoLinksFromList } from '@src/utils/general';
44
import SeeAlsoSection from '@src/components/SeeAlsoSection.astro';
5-
import { getEventsByCategory, getEventTypePretty } from '@src/utils/events';
5+
import { getEventsByCategory } from '@src/utils/events';
6+
import CategoryList from '@src/components/CategoryList.astro';
67
const eventsByCategory = getEventsByCategory();
78
---
89
<StarlightPage frontmatter={{
910
template: 'doc',
1011
title: 'All events',
1112
tableOfContents: false,
1213
}}>
13-
<p>This page lists all <strong>client-side</strong> and <strong>server-side</strong> events available in the <a href="/Lua_API">Lua API</a> organized by category.</p>
14+
<p>This page lists all <span class="side-client"><strong>client-side</strong></span> and <span class="side-server"><strong>server-side</strong></span> events available in the <a href="/Lua_API">Lua API</a> organized by category.</p>
1415

15-
16-
{Object.entries(eventsByCategory).map(([category, events]) => (
17-
<section>
18-
<details open>
19-
<summary>{category} events</summary>
20-
<ul>
21-
{events.map(event => (
22-
<li><a href={`/${event.id}`}>{event.id}</a> (<span class={"side-"+event.data.type}>{getEventTypePretty(event.data.type)}-side</span>)</li>
23-
))}
24-
</ul>
25-
</details>
26-
</section>
27-
))}
28-
16+
<CategoryList itemsByCategory={eventsByCategory} what="all_events" />
2917

3018
<SeeAlsoSection seeAlsoLinks={getSeeAlsoLinksFromList([
3119
'article:Client_Scripting_Events',

‎web/src/pages/Scripting_Functions.astro‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
33
import { getSeeAlsoLinksFromList } from '@src/utils/general';
44
import SeeAlsoSection from '@src/components/SeeAlsoSection.astro';
5-
import { getFunctionsByCategory, getFunctionInfo } from '@src/utils/functions';
5+
import { getFunctionsByCategory } from '@src/utils/functions';
6+
import CategoryList from '@src/components/CategoryList.astro';
67
78
const functionsByCategory = getFunctionsByCategory();
89
---
@@ -11,23 +12,10 @@ const functionsByCategory = getFunctionsByCategory();
1112
title: 'All functions',
1213
tableOfContents: false,
1314
}}>
14-
<p>This page lists all <strong>client-side</strong>, <strong>server-side</strong> and <strong>shared</strong> functions available in the <a href="/Lua_API">Lua API</a> organized by category.</p>
15+
<p>This page lists all <span class="side-client"><strong>client-side</strong></span>, <span class="side-server"><strong>server-side</strong></span> and <span class="side-shared"><strong>shared</strong></span> functions available in the <a href="/Lua_API">Lua API</a> organized by category.</p>
16+
17+
<CategoryList itemsByCategory={functionsByCategory} what="all_functions" />
1518

16-
{Object.entries(functionsByCategory).map(([category, funcs]) => (
17-
<section>
18-
<details open>
19-
<summary>{category} functions</summary>
20-
<ul>
21-
{funcs.map(func => (
22-
<li>
23-
<a href={`/${func.id}`}>{func.id}</a>
24-
(<span class={"side-"+getFunctionInfo(func.data).type}>{getFunctionInfo(func.data).typePretty}</span>)
25-
</li>
26-
))}
27-
</ul>
28-
</details>
29-
</section>
30-
))}
3119
<SeeAlsoSection seeAlsoLinks={getSeeAlsoLinksFromList([
3220
'article:Shared_Scripting_Functions',
3321
'article:Client_Scripting_Functions',

‎web/src/pages/Server_Scripting_Events.astro‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
33
import { getSeeAlsoLinksFromList } from '@src/utils/general';
44
import SeeAlsoSection from '@src/components/SeeAlsoSection.astro';
55
import { getEventsByTypeByCategory } from '@src/utils/events';
6+
import CategoryList from '@src/components/CategoryList.astro';
67
78
const eventsByTypeByCategory = getEventsByTypeByCategory();
89
const theseEvents = eventsByTypeByCategory.server;
@@ -12,21 +13,11 @@ const theseEvents = eventsByTypeByCategory.server;
1213
title: 'Server events',
1314
tableOfContents: false,
1415
}}>
15-
<p>This page lists all <strong>server-side</strong> events available in the <a href="/Lua_API">Lua API</a> organized by category.</p>
16+
<p>This page lists all <span class="side-server"><strong>server-side</strong></span> events available in the <a href="/Lua_API">Lua API</a> organized by category.</p>
1617

17-
{Object.entries(theseEvents).map(([category, events]) => (
18-
<section>
19-
<details open>
20-
<summary>{category} events</summary>
21-
<ul>
22-
{events.map(event => (
23-
<li><a href={`/${event.id}`}>{event.id}</a></li>
24-
))}
25-
</ul>
26-
</details>
27-
</section>
28-
))}
29-
<SeeAlsoSection seeAlsoLinks={getSeeAlsoLinksFromList([
18+
<CategoryList itemsByCategory={theseEvents} what="server_events" />
19+
20+
<SeeAlsoSection seeAlsoLinks={getSeeAlsoLinksFromList([
3021
'article:Scripting_Events',
3122
'article:Client_Scripting_Events',
3223
'article:Scripting_Functions',

0 commit comments

Comments
 (0)