Merge pull request #544 from processing/feat/beta

Handle @beta in reference items

Author: Qianqianye

src/components/ReferenceDirectoryWithFilter/index.tsx

@@ -1,7 +1,8 @@
 import type { ReferenceDocContentItem } from "@/src/content/types";
 import { useMemo, useRef, useState } from "preact/hooks";
-import type { JSX } from "preact";
+import { type JSX } from "preact";
 import { Icon } from "../Icon";
+import flask from "@src/content/ui/images/icons/flask.svg?raw"; 
 
 type ReferenceDirectoryEntry = ReferenceDocContentItem & {
   data: {
@@ -92,8 +93,15 @@ export const ReferenceDirectoryWithFilter = ({
             >
               <span
                 class="text-body-mono group-hover:underline"
-                dangerouslySetInnerHTML={{ __html: entry.data.title }}
-              />
+              >
+                {entry.data.beta && (
+                  <div
+                    className="inline-block mr-2 w-[16px] h-[16px] mb-[-2px]"
+                    dangerouslySetInnerHTML={{ __html: flask }}
+                  />
+                )}
+                <span dangerouslySetInnerHTML={{ __html: entry.data.title }} />
+              </span>
               <p
                 class="mt-1 text-sm"
                 id={`${entry.data.title}-description`}

src/content/reference/config.ts

@@ -70,6 +70,7 @@ export const referenceSchema = z.object({
   itemtype: z.string().optional(),
   class: z.string().optional(),
   chainable: z.coerce.boolean().optional(),
+  beta: z.coerce.boolean().optional(),
   return: returnSchema.optional(),
   example: z.array(exampleSchema).optional(),
   relatedContent: relatedContent().optional(),

src/content/ui/en.yaml

@@ -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/images/icons/flask.svg

@@ -19,6 +19,7 @@ import type {
 } from "@/types/parsers.interface";
 import { setJumpToState } from "../globals/state";
 import { p5Version } from "../globals/p5-version";
+import flask from "@src/content/ui/images/icons/flask.svg?raw"; 
 
 const { entry, relatedEntries } = Astro.props;
 const currentLocale = getCurrentLocale(Astro.url.pathname);
@@ -88,6 +89,18 @@ 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>
+            <div
+              class="inline-block mr-2 w-[20px] h-[20px] mb-[-2px]"
+              set:html={flask}
+            />
+            {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

@@ -293,6 +293,7 @@ const getMethodFrontmatter = (doc: ReferenceClassItemMethod) => {
     overloads,
     itemtype,
     chainable: doc.chainable === 1,
+    beta: doc.beta ? !!doc.beta : undefined,
   };
 };
 

src/scripts/builders/reference.ts

@@ -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,15 @@ pre.code-box,
   .dark-theme & {
     color: var(--type-black);
   }
+
+  & h5 {
+    font-weight: bold;
+    margin-bottom: var(--spacing-sm);
+  }
 }
 
-.callout h5 {
-  font-weight: bold;
-  margin-bottom: var(--spacing-sm);
+.experimental {
+  background-color: var(--bg-yellow);
 }
 
 .callout.callout-note {

styles/global.scss

@@ -98,8 +98,12 @@ interface Return {
   type: string;
 }
 
+interface MaybeBeta {
+  beta?: number;
+}
+
 /* Represents a method within a class */
-export interface ReferenceClassItemMethod extends BaseClassItem, Chainable {
+export interface ReferenceClassItemMethod extends BaseClassItem, Chainable, MaybeBeta {
   params?: ReferenceParam[];
   return?: Return;
   example?: string[];