structure for notes types

Author: Lettify

functions/Element/setElementHealth.yaml

@@ -8,14 +8,15 @@ shared: &shared
   description: |
     This function sets the health of a [player](/player), [ped](/ped), [vehicle](/vehicle), or [object](/object) element.
   notes:
-    - |
-      In the case of the [vehicle](/vehicle) element, the health ranges from 0 to 1000.
-      
-      - *1000:* no damage at all
-      - *650:* white steam 0%, black smoke 0%
-      - *450:* white steam 100%, black smoke 50%
-      - *250:* white steam 0%, black smoke 100%
-      - *249:* fire with big black smoke (blowing up)
+    - type: 'standard'
+      content: |
+        In the case of the [vehicle](/vehicle) element, the health ranges from 0 to 1000.
+        
+        - *1000:* no damage at all
+        - *650:* white steam 0%, black smoke 0%
+        - *450:* white steam 100%, black smoke 50%
+        - *250:* white steam 0%, black smoke 100%
+        - *249:* fire with big black smoke (blowing up)
   parameters:
     - name: 'theElement'
       type: 'element'

schemas/common-defs.yaml

@@ -5,9 +5,25 @@ type: object
 $defs:
   notes:
     type: array
-    description: List of noteworthy pieces of information for the item.
+    description: |
+      List of noteworthy pieces of information for the item.
+      Each note can be of a specific type, e.g., 'standard' or 'important'.
     items:
-      type: string
+      type: object
+      description: An individual note item.
+      required:
+        - content
+      properties:
+        type:
+          type: string
+          description: The type of the note, influencing its presentation.
+          enum:
+            - standard
+            - important
+          default: standard
+        content:
+          type: string
+          description: The textual content of the note. Can use markdown and YAML multi-line strings.
 
   meta:
     type: array

web/src/components/NoteBox.astro

@@ -1,6 +1,24 @@
 ---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+  type?: 'standard' | 'important';
+}
+
+const { type = 'standard', class: className, ...rest } = Astro.props;
 ---
-<div class="custom-note-box">
+<div
+  class:list={["custom-note-box", { 'note-important': type === 'important' }, className]}
+  {...rest}
+>
+    {type === 'important' && (
+      <span class="note-icon" aria-label="Importante">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+          <circle cx="10" cy="10" r="10" fill="#e53935"/>
+          <text x="10" y="15" text-anchor="middle" font-size="14" fill="#fff" font-family="Arial" font-weight="bold">!</text>
+        </svg>
+      </span>
+    )}
     <slot />
 </div >
 
@@ -12,8 +30,34 @@
     padding: 1rem 1.25rem;
     margin-bottom: 1rem;
     color: var(--sl-color-text);
+    position: relative;
 }
+
 html[data-theme="dark"] .custom-note-box {
     background-color: var(--sl-color-gray-5);
 }
+
+.custom-note-box.note-important {
+    background-color: var(--sl-color-red-low);
+    border-left-color: #d32f2f;
+}
+
+html[data-theme="dark"] .custom-note-box.note-important {
+    --sl-color-red-low: hsl(var(--sl-color-red-hue), 50%, 20%);
+}
+
+.note-icon {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+}
+.custom-note-box.note-important {
+    padding-right: 2.5rem;
+    padding-left: 1.25rem;
+}
 </style>

web/src/pages/[func].astro

@@ -9,6 +9,7 @@ import { Code } from '@astrojs/starlight/components';
 
 import NoteBox from '@src/components/NoteBox.astro';
 import '@src/styles/function-page.css';
+import type { NotesType } from '@src/utils/types';
 
 export async function getStaticPaths() {
     const functions = await getCollection('functions');
@@ -41,7 +42,7 @@ if (Array.isArray(rawExamples) && rawExamples.length > 0) {
     });
 }
 
-let notesContent: string[] = [];
+let notesContent: NotesType = [];
 if (Array.isArray(funcNotes) && funcNotes.length > 0) {
     notesContent = funcNotes;
 }
@@ -65,8 +66,8 @@ if (Array.isArray(funcNotes) && funcNotes.length > 0) {
         <!-- Notes -->
         <div class="notes-section">
             {notesContent.map((note) => (
-                <NoteBox>
-                    <Fragment set:html={marked(note)} />
+                <NoteBox type={note.type}>
+                    <Fragment set:html={marked(note.content)} />
                 </NoteBox>
             ))}
         </div>

web/src/utils/functions.ts

@@ -1,7 +1,7 @@
 import { getCollection } from 'astro:content';
 import path from 'path';
 
-import type { FunctionType } from './types';
+import type { FunctionType, NotesType } from './types';
 
 type FunctionItem = Awaited<ReturnType<typeof getCollection>>[number];
 
@@ -15,8 +15,7 @@ type FunctionDetails = {
     description?: string;
     pair?: boolean;
     examples?: { code: string; description?: string }[];
-    notes?: string[];
-    important_notes?: string[];
+    notes?: NotesType;
     parameters?: FunctionParameter[];
 };
 
@@ -62,8 +61,7 @@ export type FunctionInfo = {
     typePretty: string;
     pair: boolean;
     examples: { code: string; description?: string }[];
-    notes?: string[];
-    important_notes?: string[];
+    notes?: NotesType;
     parameters?: FunctionParameter[];
 };
 
@@ -78,7 +76,6 @@ export function getFunctionInfo(data: TypedFunctionData): FunctionInfo {
         pair: details.pair || false,
         examples: details.examples || [],
         notes: details.notes || [],
-        important_notes: details.important_notes || [],
         parameters: details.parameters || [],
     };
 }

web/src/utils/types.ts

@@ -1 +1,5 @@
-export type FunctionType = 'shared' | 'client' | 'server';
+export type FunctionType = 'shared' | 'client' | 'server';
+export type NotesType = {
+    type: 'standard' | 'important';
+    content: string;
+}[];