Fix function examples display

Author: Fernando-A-Rocha

web/src/pages/[func].astro

@@ -27,25 +27,30 @@ const funcType = funcInfo.type;
 const funcPair = funcInfo.pair;
 const funcPath = path.dirname(func.filePath ?? "");
 
-const { description, notes: funcNotes, examples: rawExamples } = funcInfo;
-
-let processedExamples: any[] = [];
-if (Array.isArray(rawExamples) && rawExamples.length > 0) {
-    processedExamples = rawExamples.map((example: any) => {
-        try {
-            const exampleFilePath = path.resolve(funcPath, example.path);
-            const luaCode = fs.readFileSync(exampleFilePath, "utf8");
-            return { ...example, luaCode };
-        } catch (error) {
-            console.error(`Error reading example file ${example.path} at ${path.resolve(funcPath, example.path)}:`, error);
-            return { ...example, luaCode: `Error loading example: ${example.path}` };
-        }
-    });
+// join shared, client and server examples (in func.data) if any
+let funcExamples = [];
+if (func.data.shared && func.data.shared.examples) {
+    funcExamples = [...funcExamples, ...func.data.shared.examples];
 }
+if (func.data.client && func.data.client.examples) {
+    funcExamples = [...funcExamples, ...func.data.client.examples];
+}
+if (func.data.server && func.data.server.examples) {
+    funcExamples = [...funcExamples, ...func.data.server.examples];
+}
+funcExamples = funcExamples.map((example: any) => {
+    try {
+        const luaCode = fs.readFileSync(path.resolve(`${funcPath}`, example.path), "utf8"); 
+        return { ...example, luaCode };
+    } catch (error) {
+        console.error(`Error reading ${example.path}:`, error);
+        return { ...example, luaCode: "Loading example error." };
+    }
+});
 
 let notesContent: NotesType = [];
-if (Array.isArray(funcNotes) && funcNotes.length > 0) {
-    notesContent = funcNotes;
+if (Array.isArray(funcInfo.notes) && funcInfo.notes.length > 0) {
+    notesContent = funcInfo.notes;
 }
 
 let funcSyntaxes = parseFunctionSyntaxes(func.id, func.data);
@@ -63,7 +68,7 @@ let funcSyntaxes = parseFunctionSyntaxes(func.id, func.data);
         )}
 
         <!-- Description -->
-        {description && <Fragment set:html={marked(description)} />}
+        {funcInfo.description && <Fragment set:html={marked(funcInfo.description)} />}
 
         <!-- Notes -->
         {notesContent.length > 0 && (
@@ -79,7 +84,8 @@ let funcSyntaxes = parseFunctionSyntaxes(func.id, func.data);
         <!-- OOP Syntax -->
         {funcInfo.oop && (
         <>
-            <h3>OOP Syntax <a class="small-text" href="/OOP_Introduction">Help! I don't understand this!</a></h3>
+        <div class="function-oop">
+            <h4>OOP Syntax <a class="small-text" href="/OOP_Introduction">Help! I don't understand this!</a></h4>
             <ul>
             {funcInfo.oop.method && (
                 <li>
@@ -105,17 +111,19 @@ let funcSyntaxes = parseFunctionSyntaxes(func.id, func.data);
                 <strong>Counterpart:</strong> <a href={ `/${funcPair}` }>{ funcPair }</a>
             </li>
             )}
+
             </ul>
+        </div>
         </>
         )}
 
         <!-- Syntaxes -->
         {funcSyntaxes.length > 0 && funcSyntaxes.map((syntax: any) => (
             <div class="function-syntax">
                 {funcType === syntax.type && (
-                    <h3>Syntax</h3>
+                    <h4>Syntax</h4>
                 ) || (
-                    <h3>{syntax.type.charAt(0).toUpperCase() + syntax.type.slice(1)} Syntax</h3>
+                    <h4>{syntax.type.charAt(0).toUpperCase() + syntax.type.slice(1)} Syntax</h4>
                 )}
                 <Code code={syntax.syntaxString} lang="c" />
                 {syntax.parameters.length > 0 && (
@@ -154,7 +162,7 @@ let funcSyntaxes = parseFunctionSyntaxes(func.id, func.data);
                 </>
                 )}
                 {syntax.returns && (
-                    <h5>Returns</h5>
+                    <h4>Returns</h4>
                     <ul>
                         {syntax.returns.values.map((ret: any) => (
                             <li set:html={"<strong>" + ret.type + "</strong>: " + renderInlineMarkdown(ret.name)} />
@@ -166,10 +174,10 @@ let funcSyntaxes = parseFunctionSyntaxes(func.id, func.data);
         ))}
 
         <!-- Examples -->
-        {processedExamples.length > 0 && (
+        {funcExamples.length > 0 && (
             <div class="examples-section">
-                 <h3>Code Examples</h3>
-                 {processedExamples.map((example: any) => (
+                 <h4>Code Examples</h4>
+                 {funcExamples.map((example: any) => (
                     <div class="function-example">
                         <Fragment set:html={marked(example.description)} />
                         <Code code={example.luaCode} lang="lua"/>

web/src/styles/function-page.css

@@ -14,7 +14,6 @@
 .function-oop h3,
 .examples-section h3 {
     margin-bottom: 0.75rem;
-    font-size: 1.25em;
     border-bottom: 1px solid var(--sl-color-gray-5);
     padding-bottom: 0.25rem;
 }

web/src/utils/functions.ts

@@ -27,11 +27,12 @@ type ConstructorOOP = BaseOOP & {
 
 export type OOPInfo = MethodOOP | ConstructorOOP;
 
-type FunctionDetails = {
+export type FunctionInfo = {
+    description: string;
+    type: FunctionType;
+    typePretty: string;
+    pair?: string;
     oop?: OOPInfo;
-    description?: string;
-    pair?: boolean;
-    examples?: { code: string; description?: string }[];
     notes?: NotesType;
 };
 
@@ -49,12 +50,6 @@ export type FunctionData = {
     server?: any;
 };
 
-export type TypedFunctionData = {
-    shared?: FunctionDetails;
-    client?: FunctionDetails;
-    server?: FunctionDetails;
-};
-
 export const functionTypePrettyName = {
     'client': 'Client-side',
     'server': 'Server-side',
@@ -96,15 +91,6 @@ type Syntax = {
   syntaxString: string;
 };
 
-export type FunctionInfo = {
-    oop?: OOPInfo;
-    description: string;
-    type: FunctionType;
-    typePretty: string;
-    pair: boolean;
-    examples: { code: string; description?: string }[];
-    notes?: NotesType;
-};
 
 // return_type func_name ( param1, param2, [ optional param1 ] )
 // e.g. bool setCursorPosition ( int cursorX, int cursorY )
@@ -214,19 +200,12 @@ export function parseFunctionSyntaxes(funcName: string, funcData: FunctionData):
   return syntaxes;
 }
 
-export function getFunctionInfo(data: TypedFunctionData): FunctionInfo {
+export function getFunctionInfo(data: FunctionData): FunctionInfo {
     const type = getFunctionType(data);
-    const details = data[type] ?? {};
-
-    return {
-        oop: details.oop || undefined,
-        description: details.description || '',
-        type: type,
-        typePretty: getFunctionTypePretty(data),
-        pair: details.pair || false,
-        examples: details.examples || [],
-        notes: details.notes || []
-    };
+    const details: FunctionInfo = data[type];
+    details.type = type;
+    details.typePretty = getFunctionTypePretty(data);
+    return details;
 }
 
 const functionsCollection = await getCollection('functions');