Add experimentla icon + callout

Author: davepagurek

public/icons/flask.svg

@@ -92,8 +92,18 @@ export const ReferenceDirectoryWithFilter = ({
             >
               <span
                 class="text-body-mono group-hover:underline"
-                dangerouslySetInnerHTML={{ __html: entry.data.title }}
-              />
+              >
+                {entry.data.beta && (
+                  <img
+                    className="inline-block align-center mr-2"
+                    src="/icons/flask.svg"
+                    alt="(Experimental)"
+                    width={16}
+                    height={16}
+                  />
+                )}
+                <span dangerouslySetInnerHTML={{ __html: entry.data.title }} />
+              </span>
               <p
                 class="mt-1 text-sm"
                 id={`${entry.data.title}-description`}

src/components/ReferenceDirectoryWithFilter/index.tsx

@@ -184,3 +184,6 @@ calloutTitles:
   "Try this!": "Try this!"
   Tip: Tip
   Note: Note
+experimentalApi:
+  title: This API is experimental
+  description: Its behavior may change in a future version of p5.js.

src/content/ui/en.yaml

@@ -88,6 +88,21 @@ const seenParams: Record<string, true> = {};
 >
   <div class="content-grid mt-0 max-w-[770px]">
     <div class="col-span-9 xl:min-w-[1000px]">
+      {entry.data.beta && (
+        <div class="experimental">
+          <h5>
+            <img
+              class="inline-block align-center"
+              src="/icons/flask.svg"
+              alt="(Experimental)"
+              width={20}
+              height={20}
+            />
+            {t('experimentalApi', 'title')}
+          </h5>
+          <p>{t('experimentalApi', 'description')}</p>
+        </div>
+      )}
       <div
         set:html={description}
         class="[&_a]:text-type-magenta-dark [&_a]:!decoration-type-magenta-dark mb-xl reference-item rendered-markdown"

src/layouts/ReferenceItemLayout.astro

@@ -291,7 +291,7 @@ pre.code-box,
   white-space: break-spaces;
 }
 
-.callout {
+.callout, .experimental {
   padding: var(--spacing-sm);
   border-radius: 20px;
   background-color: var(--bg-magenta-20);
@@ -301,11 +301,11 @@ pre.code-box,
   .dark-theme & {
     color: var(--type-black);
   }
-}
 
-.callout h5 {
-  font-weight: bold;
-  margin-bottom: var(--spacing-sm);
+  & h5 {
+    font-weight: bold;
+    margin-bottom: var(--spacing-sm);
+  }
 }
 
 .callout.callout-note {