Skip to content

Commit 8c03490

Browse files
Fernando-A-RochaFernando-A-Rocha
committed
Proper function syntax display
1 parent 1081642 commit 8c03490

File tree

7 files changed

+303
-28
lines changed

7 files changed

+303
-28
lines changed

‎events/Element/onElementInteriorChange.yaml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ examples:
1717
description: >
1818
Demonstrates how to detect and respond to an element's interior change.
1919
Includes vehicle creation and an event handler that reports the interior transition.
20-
notes: []
20+
notes:
21+
- type: 'info'
22+
content: 'This is a test!'
2123
preview_images: []
2224
version: {}
2325
issues: []

‎schemas/function.yaml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,11 +89,11 @@ $defs:
8989
type: string
9090
description: Name of the variable without a leading dot.
9191
- required:
92-
- constructor
92+
- constructorclass
9393
properties:
94-
constructor:
94+
constructorclass:
9595
type: string
96-
description: Name of the constructor.
96+
description: Name of the constructor class.
9797

9898
parameters:
9999
type: array

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

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ import { marked } from 'marked';
55
import fs from "fs";
66
import path from "path";
77
import { Code } from '@astrojs/starlight/components';
8+
import '@src/styles/function-page.css';
9+
10+
import NoteBox from '@src/components/NoteBox.astro';
11+
import type { NotesType } from '@src/utils/types';
812
913
export async function getStaticPaths() {
1014
const events = await getCollection('events');
@@ -47,6 +51,10 @@ if ( eventExamples.length > 0 ){
4751
});
4852
}
4953
54+
let notesContent: NotesType = [];
55+
if (Array.isArray(event.data.notes) && event.data.notes.length > 0) {
56+
notesContent = event.data.notes;
57+
}
5058
---
5159

5260
<div class={"show-type-badge-" + eventType}>
@@ -58,6 +66,17 @@ if ( eventExamples.length > 0 ){
5866
<!-- Description -->
5967
<Fragment set:html={marked(event.data.description)} />
6068

69+
<!-- Notes -->
70+
{notesContent.length > 0 && (
71+
<div class="notes-section">
72+
{notesContent.map((note) => (
73+
<NoteBox type={note.type}>
74+
<Fragment set:html={marked(note.content)} />
75+
</NoteBox>
76+
))}
77+
</div>
78+
)}
79+
6180
<h4>Parameters</h4>
6281
<!-- Looks better with C syntax instead of Lua
6382
to separate the type from the param name visually -->
@@ -81,12 +100,16 @@ if ( eventExamples.length > 0 ){
81100
`addEventHandler("${event.id}", elementAttachedTo, ${eventHandlerExample.funcName})`
82101
} lang="lua" />
83102

84-
<h4>Code Examples</h4>
85-
{eventExamples.length > 0 && eventExamples.map((example: any) => (
86-
<div>
87-
<p set:html={marked(example.description)}></p>
88-
<Code code={example.luaCode} lang="lua"} />
103+
{eventExamples.length > 0 && (
104+
<div class="examples-section">
105+
<h4>Code Examples</h4>
106+
{eventExamples.map((example: any) => (
107+
<div class="function-example">
108+
<Fragment set:html={marked(example.description)}></p>
109+
<Code code={example.luaCode} lang="lua"/>
110+
</div>
111+
))}
89112
</div>
90-
))}
113+
)}
91114
</StarlightPage>
92115
</div>

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

Lines changed: 101 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
---
22
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
33
import { getCollection } from 'astro:content';
4-
import { getFunctionInfo } from '@src/utils/functions';
4+
import { getFunctionInfo, parseFunctionSyntaxes } from '@src/utils/functions';
5+
import { renderInlineMarkdown } from '@src/utils/general';
56
import { marked } from 'marked';
67
import fs from "fs";
78
import path from "path";
@@ -47,6 +48,7 @@ if (Array.isArray(funcNotes) && funcNotes.length > 0) {
4748
notesContent = funcNotes;
4849
}
4950
51+
let funcSyntaxes = parseFunctionSyntaxes(func.id, func.data);
5052
---
5153

5254
<div class={"show-type-badge-" + funcType}>
@@ -64,22 +66,111 @@ if (Array.isArray(funcNotes) && funcNotes.length > 0) {
6466
{description && <Fragment set:html={marked(description)} />}
6567

6668
<!-- Notes -->
67-
<div class="notes-section">
68-
{notesContent.map((note) => (
69-
<NoteBox type={note.type}>
70-
<Fragment set:html={marked(note.content)} />
71-
</NoteBox>
72-
))}
73-
</div>
69+
{notesContent.length > 0 && (
70+
<div class="notes-section">
71+
{notesContent.map((note) => (
72+
<NoteBox type={note.type}>
73+
<Fragment set:html={marked(note.content)} />
74+
</NoteBox>
75+
))}
76+
</div>
77+
)}
78+
79+
<!-- OOP Syntax -->
80+
{funcInfo.oop && (
81+
<>
82+
<h5>OOP Syntax <a class="small-text" href="/OOP_Introduction">Help! I don't understand this!</a></h5>
83+
<ul>
84+
{funcInfo.oop.method && (
85+
<li>
86+
<strong>Method:</strong>{' '}
87+
<a href={ `/${funcInfo.oop.entity}` }>{funcInfo.oop.entity}</a>{funcInfo.oop.static ? '.' : ':'}{funcInfo.oop.method}(...)
88+
</li>
89+
)}
90+
91+
{funcInfo.oop.variable && (
92+
<li>
93+
<strong>Variable:</strong> .{funcInfo.oop.variable}
94+
</li>
95+
)}
96+
97+
{funcInfo.oop.constructorclass && (
98+
<li>
99+
<strong>Constructor:</strong> {funcInfo.oop.constructorclass}(...)
100+
</li>
101+
)}
102+
103+
{funcPair && (
104+
<li>
105+
<strong>Counterpart:</strong> <a href={ `/${funcPair}` }>{ funcPair }</a>
106+
</li>
107+
)}
108+
</ul>
109+
</>
110+
)}
111+
112+
<!-- Syntaxes -->
113+
{funcSyntaxes.length > 0 && funcSyntaxes.map((syntax: any) => (
114+
<div class="function-syntax">
115+
{funcType === syntax.type && (
116+
<h3>Syntax</h3>
117+
) || (
118+
<h3>{syntax.type.charAt(0).toUpperCase() + syntax.type.slice(1)} Syntax</h3>
119+
)}
120+
<Code code={syntax.syntaxString} lang="c" />
121+
{syntax.parameters.length > 0 && (
122+
<>
123+
{syntax.parameters.some((param: any) => !param.default) && (
124+
<>
125+
<h5>Required Arguments</h5>
126+
<ul>
127+
{syntax.parameters
128+
.filter((param: any) => !param.default)
129+
.map((param: any) => (
130+
<li
131+
set:html={`<strong>${param.name}</strong>: ${renderInlineMarkdown(param.description)}`}
132+
/>
133+
))}
134+
</ul>
135+
</>
136+
)}
137+
138+
{syntax.parameters.some((param: any) => param.default) && (
139+
<>
140+
<h5>Optional Arguments</h5>
141+
<ul>
142+
{syntax.parameters
143+
.filter((param: any) => param.default)
144+
.map((param: any) => (
145+
<li
146+
set:html={`<strong>${param.name}</strong>: ${renderInlineMarkdown(param.description)}`}
147+
/>
148+
))}
149+
</ul>
150+
</>
151+
)}
152+
</>
153+
)}
154+
{syntax.returns && (
155+
<h5>Returns</h5>
156+
<ul>
157+
{syntax.returns.values.map((ret: any) => (
158+
<li set:html={"<strong>" + ret.type + "</strong>: " + renderInlineMarkdown(ret.name)} />
159+
))}
160+
</ul>
161+
<Fragment set:html={marked(syntax.returns.description)} />
162+
)}
163+
</div>
164+
))}
74165

75166
<!-- Examples -->
76167
{processedExamples.length > 0 && (
77168
<div class="examples-section">
78-
<h3>Exemplos</h3>
169+
<h3>Code Examples</h3>
79170
{processedExamples.map((example: any) => (
80171
<div class="function-example">
81172
<Fragment set:html={marked(example.description)} />
82-
<Code code={example.luaCode} lang="lua" title={path.basename(example.path)} />
173+
<Code code={example.luaCode} lang="lua"/>
83174
</div>
84175
))}
85176
</div>

‎web/src/styles/function-page.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
.small-text {
2+
font-size: 0.7em;
3+
}
4+
15
.function-syntax,
26
.function-oop,
37
.notes-section,

0 commit comments

Comments
 (0)