Refactor see_also code, add See Also to element pages

Author: Fernando-A-Rocha

elements/blip.yaml

@@ -6,4 +6,3 @@ description: |
 
   The list of blip icons are available on the [Radar Blips](/radar_blips) page. 
 
-  TODO

elements/building.yaml

@@ -4,7 +4,6 @@ description: |
 
   The element type of this class is **"building"**. 
 
-  TODO
 notes:
     - |
       There is a distinction in GTA: San Andreas between static and dynamic models (these use a separate streaming system). Examples of buildings include building models, roads, and terrain. Objects created as [Buildings](/building) can contain **glass** and **shadows**, unlike those created as [Objects](/building) (which are missing these features).

elements/camera.yaml

@@ -4,4 +4,3 @@ description: |
 
   The element type of this class is **"camera"**. 
 
-  TODO

elements/col.yaml

@@ -10,5 +10,6 @@ description: |
   Collision data can also be embedded in DFF files. At the moment, vehicle collision replacement works with DFF embedded collisions only. 
 
   The element type of this class is **"col"**. 
-
-  TODO
+see_also:
+  - 'functions:any:Engine'
+  - 'events:any:Engine'

elements/collision_shape.yaml

@@ -3,5 +3,6 @@ description: |
   The collision shape class represents invisible collision detection shapes that can be created in the GTA world. Collision shapes are typically used to detect physical entities moving through them and perform actions when they do.
 
   The element type for this class is **"colshape"**. 
-
-  TODO
+see_also:
+  - 'functions:any:ColShape'
+  - 'events:any:ColShape'

elements/console.yaml

@@ -8,7 +8,9 @@ description: |
 
   You can view all latest available server console commands by entering **"help"** into the server console window. 
 
-  TODO
 preview_images:
     - path: '/assets/server_console_help.jpg'
       description: 'Help output inside server console:'
+
+# see_also:
+#   - 'article:Server_Commands'

elements/dff.yaml

@@ -6,4 +6,6 @@ description: |
 
   The element type of this class is **"dff"**. 
 
-  TODO
+see_also:
+  - 'functions:any:Engine'
+  - 'events:any:Engine'

elements/effect.yaml

@@ -4,4 +4,4 @@ description: |
 
   The element type of this class is **"effect"**. 
 
-  TODO: add all the effects as a table...
+  TODO all effects table

elements/light.yaml

@@ -3,5 +3,3 @@ description: |
   The light class represents colored, 3D lights in the GTA world. There are a couple different types of lights, which are point lights, spot lights and dark lights.
 
   The element type of this class is **"light"**. 
-
-  TODO

elements/marker.yaml

@@ -4,4 +4,3 @@ description: |
 
   The element type of this class is **"marker"**. 
 
-  TODO

elements/object.yaml

@@ -4,7 +4,6 @@ description: |
 
   The element type of this class is **"object"**. 
 
-  TODO
 notes:
     - |
       Objects only represent models **created by a script**, they do not represent objects that are part of GTA's default landscape (these belong to the "building pool").

elements/ped.yaml

@@ -6,4 +6,3 @@ description: |
 
   The element type of a NPC is **"ped"**. 
 
-  TODO

elements/pickup.yaml

@@ -4,4 +4,3 @@ description: |
 
   The element type of this class is **"pickup"**. 
 
-  TODO

elements/player.yaml

@@ -4,4 +4,3 @@ description: |
 
   The element type of this class is **"player"**. 
 
-  TODO

elements/projectile.yaml

@@ -4,7 +4,6 @@ description: |
 
   The element type of this class is **"projectile"**. 
 
-  TODO
 notes:
     - |
       **16: Grenade**

elements/radar_area.yaml

@@ -4,4 +4,8 @@ description: |
 
   The element type of this class is **"radararea"**. 
 
-  TODO
+
+see_also:
+  - 'functions:any:RadarArea'
+  - 'events:any:RadarArea'
+

elements/searchlight.yaml

@@ -4,4 +4,3 @@ description: |
 
   The element type of this class is **"searchlight"**. 
 
-  TODO

elements/sound.yaml

@@ -8,4 +8,8 @@ description: |
 
   The element type of this class is **"sound"**. 
 
-  TODO
+
+see_also:
+  - 'functions:any:Audio'
+  - 'events:any:Audio'
+

elements/team.yaml

@@ -6,4 +6,3 @@ description: |
 
   The element type of this class is **"team"**. 
 
-  TODO

elements/txd.yaml

@@ -4,4 +4,6 @@ description: |
 
   The element type of this class is **"txd"**. 
 
-  TODO
+see_also:
+  - 'functions:any:Engine'
+  - 'events:any:Engine'

elements/vehicle.yaml

@@ -4,4 +4,3 @@ description: |
 
   The element type of this class is **"vehicle"**. 
 
-  TODO

elements/water.yaml

@@ -6,4 +6,3 @@ description: |
 
   The element type of this class is **"water"**. 
 
-  TODO

elements/weapon.yaml

@@ -4,4 +4,3 @@ description: |
 
   The element type of this class is **"weapon"**. 
 
-  TODO

functions/Player/examples/getPlayerName-1.lua

@@ -0,0 +1,3 @@
+addCommandHandler("myname", function(ply)
+    outputChatBox("Your name: "..getPlayerName(ply), ply)
+end)

functions/Player/examples/getPlayerName-2.lua

@@ -0,0 +1,4 @@
+addCommandHandler("myname", function()
+    -- output local player's name to the chatbox
+    outputChatBox(getPlayerName(localPlayer))
+end)

functions/Player/getPlayerName.yaml

@@ -0,0 +1,33 @@
+shared: &shared
+  name: 'getPlayerName'
+  oop:
+    entity: player
+    method: getName
+    variable: name
+  pair: 'setPlayerName'
+  description: |
+    This function returns a string containing the name of the specified [player](/player). 
+  parameters:
+    - name: 'thePlayer'
+      type: 'player'
+      description: "The [player](/player) you want to get the name of."
+  returns:
+    description: |
+      Returns a *string* containing the requested player's name, or *false* if the player passed to the function is invalid.
+    values:
+      - type: 'string'
+        name: 'name'
+
+server:
+  <<: *shared
+  examples:
+    - path: 'examples/getPlayerName-1.lua'
+      description: |
+        This example outputs the name of the player who executed the command to their chatbox.
+
+client:
+  <<: *shared
+  examples:
+    - path: 'examples/getPlayerName-2.lua'
+      description: |
+        This example outputs the local player name to the chatbox. 

web/src/components/SeeAlsoSection.astro

@@ -0,0 +1,32 @@
+---
+import type { SeeAlsoLinkGroup } from '@src/utils/general';
+
+export interface Props {
+  seeAlsoLinks: SeeAlsoLinkGroup[];
+  currentId: string;
+}
+
+const { seeAlsoLinks, currentId } = Astro.props;
+---
+
+{seeAlsoLinks.length > 0 && (
+  <div class="see-also-section">
+    <h4>See Also</h4>
+    {seeAlsoLinks.map((group) => (
+      <div class="see-also-group">
+        <h5>{group.title}</h5>
+        <ul>
+          {group.links.map((link) => (
+            <li>
+              {link.name === currentId ? (
+                <strong>{link.name}</strong>
+              ) : (
+                <a href={link.link}>{link.name}</a>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    ))}
+  </div>
+)}

web/src/pages/Element_tree.mdx

@@ -109,4 +109,3 @@ You can start the resource *elementbrowser* to see a live view of the element tr
 
 </StarlightPage>
 
-{/* TODO: see also */}

web/src/pages/[element].astro

@@ -2,6 +2,9 @@
 import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
 import { getCollection } from 'astro:content';
 import { marked } from 'marked';
+import { getPageSeeAlsoLinks } from '@src/utils/general';
+
+import SeeAlsoSection from '@src/components/SeeAlsoSection.astro';
 
 export async function getStaticPaths() {
   const elements = await getCollection('elements');
@@ -12,12 +15,17 @@ export async function getStaticPaths() {
 }
 
 const { element } = Astro.props;
+element.data.itemType = 'element';
+element.data.niceName = element.data.name.charAt(0).toUpperCase() + element.data.name.slice(1);
+
 ---
 <StarlightPage frontmatter={{
   template: 'doc',
   title: element.data.name,
   tableOfContents: false,
 }}>
   <Fragment set:html={marked(element.data.description)} />
+
+  <SeeAlsoSection seeAlsoLinks={getPageSeeAlsoLinks(element)} currentId={element.id} />
 </StarlightPage>
 

web/src/pages/[event].astro

@@ -6,11 +6,13 @@ import fs from "fs";
 import path from "path";
 import { Code } from '@astrojs/starlight/components';
 import '@src/styles/function-page.css';
-import { getEventSeeAlsoLinks } from '@src/utils/events';
+import { getPageSeeAlsoLinks } from '@src/utils/general';
 
 import NoteBox from '@src/components/NoteBox.astro';
 import type { NotesType } from '@src/utils/types';
 
+import SeeAlsoSection from '@src/components/SeeAlsoSection.astro';
+
 export async function getStaticPaths() {
     const events = await getCollection('events');
     return events.map(event => ({
@@ -20,6 +22,7 @@ export async function getStaticPaths() {
 }
 
 const { event } = Astro.props;
+event.data.itemType = 'event';
 
 const eventType = event.data.type;
 const eventPath = path.dirname(event.filePath ?? "");
@@ -57,7 +60,6 @@ if (Array.isArray(event.data.notes) && event.data.notes.length > 0) {
     notesContent = event.data.notes;
 }
 
-const seeAlsoLinks = getEventSeeAlsoLinks(event);
 ---
 
 <div class={"show-type-badge-" + eventType}>
@@ -108,31 +110,15 @@ const seeAlsoLinks = getEventSeeAlsoLinks(event);
                 <h4>Code Examples</h4>
                 {eventExamples.map((example: any) => (
                     <div class="function-example">
-                        <Fragment set:html={marked(example.description)}></p>
+                        {example.description && (
+                            <Fragment set:html={marked(example.description)} />
+                        )}
                         <Code code={example.luaCode} lang="lua"/>
                     </div>
                 ))}
             </div>
         )}
 
-        <!-- See Also -->
-        {seeAlsoLinks.length > 0 && (
-            <div class="see-also-section">
-                <h4>See Also</h4>
-                <ul>
-                    {seeAlsoLinks.map((link: any) => (
-                        (link.name === event.id) && (
-                            <li>
-                                <strong>{link.name}</strong>
-                            </li>
-                        ) || (
-                            <li>
-                                <a href={link.link}>{link.name}</a>
-                            </li>
-                        )
-                    ))}
-                </ul>
-            </div>
-        )}
+        <SeeAlsoSection seeAlsoLinks={getPageSeeAlsoLinks(event)} currentId={event.id} />
     </StarlightPage>
 </div>