Add needs_checking display

Author: Fernando-A-Rocha

functions/Cursor/getCursorAlpha.yaml

@@ -17,3 +17,5 @@ client:
     - path: 'examples/getCursorAlpha.lua'
       description: |
         This example prints the cursor alpha to chatbox using */cursoralpha* command:
+  meta:
+  - needs_checking: Hello, world

web/src/components/NoteBox.astro

@@ -1,8 +1,9 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
+import type { NotesTypeType } from '@src/utils/types';
 
 interface Props extends HTMLAttributes<'div'> {
-  type?: 'info' | 'warning' | 'important' | 'tip';
+  type?: NotesTypeType;
 }
 
 const { type = 'info', class: className, ...rest } = Astro.props;
@@ -16,6 +17,7 @@ const { type = 'info', class: className, ...rest } = Astro.props;
       'note-warning': type === 'warning',
       'note-important': type === 'important',
       'note-tip': type === 'tip',
+      'note-needs_checking': type === 'needs_checking',
     }, 
     className
   ]}
@@ -61,6 +63,16 @@ const { type = 'info', class: className, ...rest } = Astro.props;
     </span>
   )}
 
+  {type === 'needs_checking' && (
+    <span style="font-size: 1.2rem;"><strong>This article needs checking:</strong></span>
+    <span class="note-icon" aria-label="Important">
+      <svg width="28" height="28" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+        <circle cx="10" cy="10" r="10" fill="#008dd4"/>
+        <text x="10" y="15" text-anchor="middle" font-size="14" fill="#fff" font-family="Arial" font-weight="bold">!</text>
+      </svg>
+    </span>
+  )}
+
   <slot />
 </div>
 
@@ -78,7 +90,8 @@ const { type = 'info', class: className, ...rest } = Astro.props;
 .custom-note-box.note-info,
 .custom-note-box.note-warning,
 .custom-note-box.note-important,
-.custom-note-box.note-tip {
+.custom-note-box.note-tip,
+.custom-note-box.note-needs_checking {
   padding-left: 3.5rem;
   padding-right: 1.25rem;
 }
@@ -99,6 +112,10 @@ const { type = 'info', class: className, ...rest } = Astro.props;
   border-left-color: #4caf50;
 }
 
+.custom-note-box.note-needs_checking {
+  border-left-color: #008dd4;
+}
+
 .note-icon {
   position: absolute;
   top: 50%;

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

@@ -16,6 +16,7 @@ import CodeExamplesSection from '@src/components/CodeExamplesSection.astro';
 import ItemDescription from '@src/components/ItemDescription.astro';
 import EnhancedMarkdown from '@src/components/EnhancedMarkdown.astro';
 import PreviewImages from '@src/components/PreviewImages.astro';
+import ChangelogList from '@src/components/ChangelogList.astro';
 
 export async function getStaticPaths() {
     const events = await getCollection('events');
@@ -58,6 +59,9 @@ if (Array.isArray(event.data.notes) && event.data.notes.length > 0) {
     notesContent = event.data.notes;
 }
 
+const eventMeta = event.data.meta || {};
+const changelogEntries = eventMeta.find(m => m.changelog)?.changelog ?? [];
+const needsChecking = eventMeta.find(m => m.needs_checking)?.needs_checking ?? undefined;
 ---
 
 <div class={"show-type-badge-" + eventType}>
@@ -66,6 +70,14 @@ if (Array.isArray(event.data.notes) && event.data.notes.length > 0) {
         title: event.id,
         tableOfContents: false,
     }}>
+        {needsChecking && (
+            <div class="notes-section">
+                <NoteBox type="needs_checking">
+                    <EnhancedMarkdown content={needsChecking}/>
+                </NoteBox>
+            </div>
+        )}
+
         <!-- Description -->
         <ItemDescription description={event.data.description} incomplete={event.data.incomplete} />
 
@@ -114,6 +126,8 @@ if (Array.isArray(event.data.notes) && event.data.notes.length > 0) {
 
         <CodeExamplesSection codeExamples={eventExamples}, examplesRequired={true} theItem={event} />
 
+        <ChangelogList entries={changelogEntries} />
+
         <SeeAlsoSection seeAlsoLinks={getSeeAlsoLinksForItem(event)} currentId={event.id} />
     </StarlightPage>
 </div>

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

@@ -73,6 +73,7 @@ if (Array.isArray(funcInfo.notes) && funcInfo.notes.length > 0) {
 
 const metaArray = func.data[funcInfo.type]?.meta ?? [];
 const changelogEntries = metaArray.find(m => m.changelog)?.changelog ?? [];
+const needsChecking = metaArray.find(m => m.needs_checking)?.needs_checking ?? undefined;
 
 let funcSyntaxes = parseFunctionSyntaxes(func.id, func.data);
 ---
@@ -83,6 +84,14 @@ let funcSyntaxes = parseFunctionSyntaxes(func.id, func.data);
         title: func.id,
         tableOfContents: false,
     }}>
+        {needsChecking && (
+            <div class="notes-section">
+                <NoteBox type="needs_checking">
+                    <EnhancedMarkdown content={needsChecking}/>
+                </NoteBox>
+            </div>
+        )}
+
         <!-- Pair Function Ref -->
         {funcPair && (
             <p><strong>Pair:</strong> <a href={`/reference/${funcPair}`}>{ funcPair }</a></p>

web/src/utils/types.ts

@@ -1,5 +1,6 @@
 export type FunctionType = 'shared' | 'client' | 'server';
+export type NotesTypeType = 'info' | 'warning' | 'important' | 'tip' | 'needs_checking';
 export type NotesType = {
-    type: 'info' | 'warning' | 'important';
+    type: NotesTypeType
     content: string;
 }[];