Add JEXL project page and experimental status support (#223)

Add project page for JEXL, a JSON-based programming language. Includes support for a new 'experimental' status for projects with purple styling. Updates schemas, components, and the URL manifest accordingly.

Author: just-be-dev

src/components/LinkList.astro

@@ -9,7 +9,15 @@ export interface LinkListItem {
   slug: string;
   title: string;
   date?: string;
-  status?: "active" | "completed" | "archived" | "maintenance" | "draft" | "working" | "final";
+  status?:
+    | "experimental"
+    | "active"
+    | "completed"
+    | "archived"
+    | "maintenance"
+    | "draft"
+    | "working"
+    | "final";
   description?: string;
   treeChar?: string;
   isLast?: boolean;
@@ -73,7 +81,14 @@ const HeadingTag = headingLevel;
                 if (statusType === "project") {
                   return (
                     <ProjectStatus
-                      status={item.status as "active" | "completed" | "archived" | "maintenance"}
+                      status={
+                        item.status as
+                          | "experimental"
+                          | "active"
+                          | "completed"
+                          | "archived"
+                          | "maintenance"
+                      }
                     />
                   );
                 } else if (statusType === "research") {
@@ -121,7 +136,14 @@ const HeadingTag = headingLevel;
                   if (statusType === "project") {
                     return (
                       <ProjectStatus
-                        status={item.status as "active" | "completed" | "archived" | "maintenance"}
+                        status={
+                          item.status as
+                            | "experimental"
+                            | "active"
+                            | "completed"
+                            | "archived"
+                            | "maintenance"
+                        }
                       />
                     );
                   } else if (statusType === "research") {

src/components/ProjectStatus.astro

@@ -1,11 +1,12 @@
 ---
 interface Props {
-  status: "active" | "completed" | "archived" | "maintenance";
+  status: "experimental" | "active" | "completed" | "archived" | "maintenance";
 }
 
 const { status } = Astro.props;
 
 const statusColors = {
+  experimental: "bg-purple-500/20 text-purple-700 dark:text-purple-300",
   active: "bg-green-500/20 text-green-700 dark:text-green-300",
   completed: "bg-blue-500/20 text-blue-700 dark:text-blue-300",
   archived: "bg-gray-500/20 text-gray-700 dark:text-gray-400",

src/content/projects/jexl.mdx

@@ -0,0 +1,13 @@
+---
+title: JEXL
+description: A programming language where the entire syntax is written in pure JSON
+url: https://jexl.just-be.dev
+repository: https://github.com/just-be-dev/jexl
+status: experimental
+date: 2025-05-01
+slugs:
+  - /jexl
+code: p2424
+---
+
+::readme{repo="just-be-dev/jexl"}

src/content/schemas.ts

@@ -16,7 +16,9 @@ export const projectsSchema = z.object({
   description: z.string().optional(),
   url: z.string().url().optional(),
   repository: z.string().url().optional(),
-  status: z.enum(["active", "completed", "archived", "maintenance"]).default("active"),
+  status: z
+    .enum(["experimental", "active", "completed", "archived", "maintenance"])
+    .default("active"),
   date: z.coerce.date(),
   code: z.string().optional(),
   slugs: z.array(z.string()).optional(),

src/content/url-manifest.yaml

@@ -16,6 +16,9 @@ codes:
     - /projects/devtools-fm
   p2323:
     - /projects/side-project-saturday
+  p2424:
+    - /projects/jexl
+    - /jexl
   p252b:
     - /projects/ccpm
     - /ccpm

src/pages/projects/[slug].astro

@@ -41,7 +41,7 @@ const code = project.data.code?.toUpperCase();
       {
         project.data.status && (
           <div class="flex gap-[1ch] justify-end">
-            <ProjectStatus status={project.data.status} variant="badge" />
+            <ProjectStatus status={project.data.status} />
           </div>
         )
       }