@adaptive-sm/astro-ui 0.1.1 → 0.3.0

package/README.md

@@ -3,6 +3,7 @@
 A library of reusable UI components for Astro projects. Built with TypeScript, Tailwind CSS, and Astro in static output mode. Components are designed to be accessible, customizable, and easy to integrate.
 
 Quick link
+
 - code - https://github.com/adaptive-shield-matrix/astro-ui
 - npm - https://www.npmjs.com/package/@adaptive-sm/astro-ui
 - component demo - https://adaptive-astro-ui.pages.dev/
@@ -17,7 +18,7 @@ bun add @adaptive-sm/astro-ui
 
 ## Tailwind CSS Configuration
 
-To ensure Tailwind scans the library's source files for classes (since components are published as source without a build step), add the following `@source` directive to your project's `src/layouts/global.css` (or equivalent global stylesheet):
+To ensure Tailwind scans the library's source files for classes (since components are published as source without a build step), add the following `@source` directive to your project's `src/layouts/tailwind.css` (or equivalent global stylesheet):
 
 ```css
 @source '/node_modules/@adaptive-sm/astro-ui/lib/**/*.{astro,html,md,mdx,ts,tsx}';
@@ -27,20 +28,38 @@ This tells Tailwind to include classes from the library's `.astro`, `.ts`, and o
 
 ## Option configuration: import alias
 
+### Typescript
+
+In your `tsconfig.json`, set up the `~` alias to point to the library:
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "~ui/*": ["node_modules/@adaptive-sm/astro-ui/lib/*"]
+    }
+  }
+}
+```
+
+### Astro
+
 In your `astro.config.mjs`, set up the `~` alias to point to the library:
 
 ```js
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config"
 
 export default defineConfig({
   vite: {
     resolve: {
       alias: {
-        '~': new URL('./node_modules/@adaptive-sm/astro-ui/lib', import.meta.url).pathname,
+        "~": new URL("./node_modules/@adaptive-sm/astro-ui/lib", import.meta.url).pathname,
       },
     },
   },
-});
+})
 ```
 
 ## Usage
@@ -62,7 +81,7 @@ Import and use components directly in your Astro files. For example:
 
 ```astro
 ---
-import { Button } from '~/button/Button.astro';
+import { Button } from "~ui/button/Button.astro"
 ---
 
 <Button variant="primary">Click me</Button>
@@ -72,19 +91,17 @@ import { Button } from '~/button/Button.astro';
 
 ```astro
 ---
-import { CardWrapper } from '~/card/CardWrapper.astro';
+import { CardWrapper } from "~ui/card/CardWrapper.astro"
 ---
 
-<CardWrapper>
-  Card content here.
-</CardWrapper>
+<CardWrapper> Card content here. </CardWrapper>
 ```
 
 ### Image Component
 
 ```astro
 ---
-import { Img } from '~/img/Img.astro';
+import { Img } from "~ui/img/Img.astro"
 ---
 
 <Img src="/path/to/image.jpg" alt="Description" />
@@ -95,20 +112,25 @@ Refer to individual component documentation in the source code for props and var
 ## Components
 
 ### Buttons
+
 - [Button.astro](lib/button/Button.astro)
 - Button variants and animations via CVAs in `buttonCva.ts`, `buttonIconCva.ts`
 
 ### Cards
+
 - [CardWrapper.astro](lib/card/CardWrapper.astro)
 
 ### Details
+
 - [Details.astro](lib/details/Details.astro)
 
 ### Forms
+
 - [Fieldset.astro](lib/form/Fieldset.astro)
 
 ### Icons
-- [Icon1.astro](lib/icon/Icon1.astro) (replaces SVG icons)
+
+- [Icon.astro](lib/icon/Icon.astro) (replaces SVG icons)
 
 usage:
 
@@ -117,6 +139,7 @@ usage:
 - Passed on as `path` prop
 
 ### Images
+
 - [Img.astro](lib/img/Img.astro)
 
   A small wrapper setting loading lazy and decoding to async.
@@ -128,35 +151,44 @@ usage:
   Generate types using `lib/generate_image_list/generateImageList.ts`
 
 ### Layouts
+
 - [MinimalLayout.astro](lib/layouts/MinimalLayout.astro)
-- [MarkdownWrapper.astro](lib/layouts/MarkdownWrapper.astro)
+- [MarkdownPageWrapper.astro](lib/layouts/MarkdownPageWrapper.astro)
 
 ### Navigation bar
+
 - [ThemeToggle.astro](lib/layouts/parts/ThemeToggle.astro)
 
 ### Links
+
 - [LinkText.astro](lib/link/LinkText.astro)
 - [LinkButton.astro](lib/link/LinkButton.astro)
 
 ### Lists
+
 - [BlackBulletPoints.astro](lib/list/BlackBulletPoints.astro)
 - [CheckPoints.astro](lib/list/CheckPoints.astro)
 - [NumberedList.astro](lib/list/NumberedList.astro)
 
 ### Modals
+
 - [ModalButton.astro](lib/modal/ModalButton.astro)
 
 ### Pages
+
 - [PageCentered.astro](lib/page/PageCentered.astro)
 - [PageCenteredCard.astro](lib/page/PageCenteredCard.astro)
 
 ### Popovers
+
 - [Popover1.astro](lib/popover/Popover1.astro)
 
 ### Selects
+
 - [Select.astro](lib/select/Select.astro)
 
 ### Table
+
 - [Table.astro](lib/table/Table.astro)
 
 ## Demos
@@ -201,3 +233,11 @@ Follow the coding rules in `.roo/rules-code/` for style and best practices.
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Acknowledgments
+
+- Built on top of [Astro](https://astro.build).
+- Styled with [Tailwind CSS](https://tailwindcss.com/).
+- Icons from [MDI](https://pictogrammers.com/library/mdi/).
+
+For more information, visit the [GitHub repository](https://github.com/adaptive-shield-matrix/astro-ui).

package/lib/badge/Badge.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { type BadgeVariant, badgeCva, badgeIconCva, badgeVariant } from "~ui/badge/classesBadge"
+import Icon from "~ui/icon/Icon.astro"
+import type { MayHaveClass } from "~ui/utils/MayHaveClass"
+
+interface Props extends MayHaveClass {
+  id?: string
+  variant?: BadgeVariant
+
+  icon?: string
+  iconRight?: string
+  iconClass?: string
+
+  class?: string
+  restProps?: HTMLAttributes<"svg">
+}
+
+const p = Astro.props
+const v = p.variant ?? badgeVariant.outline
+---
+
+<span id={p.id} class={badgeCva(v, p.class)} {...p.restProps}>
+  {p.icon && <Icon path={p.icon} class={badgeIconCva(v, p.iconClass)} />}
+  <slot />
+  {p.iconRight && <Icon path={p.iconRight} class={badgeIconCva(v, p.iconClass)} />}
+</span>

package/lib/badge/classesBadge.ts

@@ -0,0 +1,67 @@
+import { classArr } from "~ui/utils/classArr"
+import { classMerge } from "~ui/utils/classMerge"
+
+export type BadgeVariant = keyof typeof badgeVariant
+
+export const badgeVariant = {
+  base: "base",
+  contrast: "contrast",
+  outline: "outline",
+} as const
+
+export const classesBadgeBase = classArr(
+  "inline-flex items-center", // layout
+  "text-sm", // text
+  "px-2.5 py-0.5 rounded-full", // padding
+  "flex gap-2", // layout children
+)
+
+export const classesBadgeContrast = classArr(
+  classesBadgeBase,
+  "text-white dark:text-slate-900 dark:hover:text-slate-900", // text
+  "bg-slate-900 dark:bg-slate-50", // bg
+)
+
+export const classesBadgeOutline = classArr(
+  classesBadgeBase,
+  "border border-gray-400 dark:border-gray-500", // border
+)
+
+export const classesBadgeVariant = {
+  base: classesBadgeBase,
+  contrast: classesBadgeContrast,
+  outline: classesBadgeOutline,
+} as const satisfies Record<BadgeVariant, string>
+
+export function badgeCva(v: BadgeVariant, classes?: string): string {
+  return classMerge(classesBadgeVariant[v ?? badgeVariant.base], classes)
+}
+
+const classesTextFillBlack = "text-black fill-black"
+const classesTextFillWhite = "text-white fill-white"
+
+const classesBlackWhite = classArr(
+  classesTextFillBlack,
+  "dark:text-white", // dark text
+  "dark:fill-white", // dark fill
+)
+
+const classesWhiteWhite = classArr(
+  classesTextFillWhite,
+  "dark:text-white", // dark text
+  "dark:fill-white", // dark fill
+)
+
+const baseClasses = classArr(
+  "size-6", // size
+)
+
+const badgeIconClasses = {
+  base: classesBlackWhite,
+  outline: classesBlackWhite,
+  contrast: classArr(classesTextFillWhite, "dark:text-black dark:fill-black"),
+} as const satisfies Record<BadgeVariant, string>
+
+export function badgeIconCva(variant: BadgeVariant, classes?: string) {
+  return classMerge(baseClasses, badgeIconClasses[variant], classes)
+}

package/lib/button/Button.astro

@@ -1,9 +1,10 @@
 ---
-import { buttonCva2, type ButtonSize, type ButtonVariant } from "~/button/buttonCva"
-import { buttonIconCva } from "~/button/buttonIconCva"
-import { classesButtonClickAnimation } from "~/button/classesButtonClickAnimation"
-import Icon1 from "~/icon/Icon1.astro"
-import { classMerge } from "~/utils/ui/classMerge"
+import type { HTMLAttributes } from "astro/types"
+import { buttonCva2, type ButtonSize, type ButtonVariant } from "~ui/button/buttonCva"
+import { buttonIconCva } from "~ui/button/buttonIconCva"
+import { classesButtonClickAnimation } from "~ui/button/classesButtonClickAnimation"
+import Icon from "~ui/icon/Icon.astro"
+import { classMerge } from "~ui/utils/classMerge"
 
 interface Props {
   id?: string
@@ -18,41 +19,30 @@ interface Props {
   iconRight?: string
   iconClass?: string
   class?: string
-  onclick?: any
+  restProps?: HTMLAttributes<"button">
 }
-const props = Astro.props
+const p = Astro.props
 
-const classes = buttonCva2(props.variant, props.size, classesButtonClickAnimation, props.class)
+const classes = buttonCva2(p.variant, p.size, classesButtonClickAnimation, p.class)
 const hasChildren = Astro.slots.has("default")
-const hasContent = hasChildren || props.text
+const hasContent = hasChildren || p.text
 ---
 
-<button id={props.id} title={props.title} class={classes} onclick={props.onclick}>
+<button id={p.id} title={p.title} class={classes} {...p.restProps}>
+  {p.icon && <Icon path={p.icon} class={classMerge(hasContent && "mr-2", buttonIconCva(p.variant, p.iconClass))} />}
   {
-    props.icon && (
-      <Icon1
-        path={props.icon}
-        class={classMerge(hasContent && "mr-2", buttonIconCva(props.variant, props.iconClass))}
-      />
-    )
-  }
-  {
-    props.text && (
-      <span id={props.contentId} class={props.contentClass}>
-        {props.text}
+    p.text && (
+      <span id={p.contentId} class={p.contentClass}>
+        {p.text}
       </span>
     )
   }
   {
     hasContent && (
-      <span id={props.contentId} class={props.contentClass}>
+      <span id={p.contentId} class={p.contentClass}>
         <slot />
       </span>
     )
   }
-  {
-    props.iconRight && (
-      <Icon1 path={props.iconRight} class={buttonIconCva(props.variant, hasContent && "ml-2", props.iconClass)} />
-    )
-  }
+  {p.iconRight && <Icon path={p.iconRight} class={buttonIconCva(p.variant, hasContent && "ml-2", p.iconClass)} />}
 </button>

package/lib/button/buttonCva.ts

@@ -1,5 +1,5 @@
-import { classArr } from "~/utils/ui/classArr"
-import { classMerge } from "~/utils/ui/classMerge"
+import { classArr } from "~ui/utils/classArr"
+import { classMerge } from "~ui/utils/classMerge"
 import { classesButtonClickAnimation } from "./classesButtonClickAnimation"
 import { classesButtonDisabled } from "./classesButtonDisabled"
 
@@ -94,19 +94,19 @@ const variantClasses = {
   // filled colors
   //
   filledYellow: classArr(
-    "text-white dark:text-yellow-100 ", // text
+    "text-white", // text
     "bg-yellow-500 dark:bg-yellow-800 ", // bg
     "hover:bg-yellow-700 dark:hover:bg-yellow-600", // bg hover
     "focus:ring-yellow-400 dark:focus:ring-yellow-400", // focus
   ),
   filledAmber: classArr(
-    "text-white dark:text-amber-100 ", // text
+    "text-white", // text
     "bg-amber-500 dark:bg-amber-800 ", // bg
     "hover:bg-amber-700 dark:hover:bg-amber-600", // bg hover
     "focus:ring-amber-400 dark:focus:ring-amber-400", // focus
   ),
   filledOrange: classArr(
-    "text-white dark:text-orange-100 ", // text
+    "text-white", // text
     "bg-orange-500 dark:bg-orange-800 ", // bg
     "hover:bg-orange-700 dark:hover:bg-orange-600", // bg hover
     "focus:ring-orange-400 dark:focus:ring-orange-400", // focus
@@ -128,7 +128,7 @@ const variantClasses = {
     "focus:ring-sky-400 dark:focus:ring-sky-400", // focus
   ),
   filledIndigo: classArr(
-    "text-white dark:text-indigo-100 ", // text
+    "text-white", // text
     "bg-indigo-500 dark:bg-indigo-800 ", // bg
     "hover:bg-indigo-700 dark:hover:bg-indigo-600", // bg hover
     "focus:ring-indigo-400 dark:focus:ring-indigo-400", // focus

package/lib/button/buttonIconCva.ts

@@ -1,5 +1,5 @@
-import { classArr } from "~/utils/ui/classArr"
-import { classMerge } from "~/utils/ui/classMerge"
+import { classArr } from "~ui/utils/classArr"
+import { classMerge } from "~ui/utils/classMerge"
 import { type ButtonVariant } from "./buttonCva"
 
 const classesTextFillBlack = "text-black fill-black"

package/lib/button/classesButtonClickAnimation.ts

@@ -1,4 +1,4 @@
-import { classArr } from "~/utils/ui/classArr"
+import { classArr } from "~ui/utils/classArr"
 
 export const classesButtonClickAnimation = classArr(
   // "duration-300",

package/lib/button/classesButtonClickAnimationPush.ts

@@ -1,4 +1,4 @@
-import { classArr } from "~/utils/ui/classArr"
+import { classArr } from "~ui/utils/classArr"
 
 /**
  * disable hover because popovers move with it

package/lib/button/classesButtonClickAnimationSquish.ts

@@ -1,4 +1,4 @@
-import { classArr } from "~/utils/ui/classArr"
+import { classArr } from "~ui/utils/classArr"
 
 /**
  * unused because it's a little to fancy

package/lib/card/CardWrapper.astro

@@ -1,15 +1,16 @@
 ---
-import { classesCardWrapperP4 } from "~/card/classesCardWrapper"
-import { classArr } from "~/utils/ui/classArr"
-import { classMerge } from "~/utils/ui/classMerge"
+import type { HTMLAttributes } from "astro/types"
+import { classesCardWrapperP4 } from "~ui/card/classesCardWrapper"
+import { classMerge } from "~ui/utils/classMerge"
 
 interface Props {
-  id?:string
+  id?: string
   class?: string
+  restProps?: HTMLAttributes<"div">
 }
 const p = Astro.props
 ---
 
-<div id={p.id} class={classMerge(classesCardWrapperP4, p.class)}>
+<div id={p.id} class={classMerge(classesCardWrapperP4, p.class)} {...p.restProps}>
   <slot />
 </div>

package/lib/card/classesBorderWrapper.ts

@@ -0,0 +1 @@
+export const classesBorderWrapper = "border border-gray-500 rounded-xl"

package/lib/card/classesCardWrapper.ts

@@ -1,16 +1,28 @@
-import { classArr } from "~/utils/ui/classArr"
+import { classesShadowMdLg } from "~ui/card/classesShadow"
+import { classArr } from "~ui/utils/classArr"
+
+export const classesCardWrapperBorderDark = "dark:border dark:border-gray-500"
+export const classesCardWrapperBg = "bg-white dark:bg-zinc-800"
 
 export const classesCardWrapper = classArr(
-  "rounded-lg shadow-lg", // card shadows/padding
-  "bg-white dark:bg-gray-900", // bg
+  "rounded-lg",
+  classesShadowMdLg, // card shadows/padding
+  classesCardWrapperBg, // bg
+  classesCardWrapperBorderDark, // border
 )
 
-export const classesCardWrapperP4 = classArr(classesCardWrapper, "p-4 lg:p-8")
-export const classesCardWrapperP8 = classArr(classesCardWrapper, "p-4 sm:p-8")
+export const classesPadding4Lg8 = "p-4 lg:p-8"
+export const classesPadding4sm8 = "p-4 sm:p-8"
+export const classesPadding4sm8md12 = "p-4 sm:p-8 md:p-12"
+
+export const classesCardWrapperP4 = classArr(classesCardWrapper, classesPadding4Lg8)
+export const classesCardWrapperP8 = classArr(classesCardWrapper, classesPadding4sm8)
+
+export const classesRoundedShadowXl = "rounded-xl shadow-xl"
 
 export const classesCardWrapperPage = classArr(
-  "rounded-xl shadow-xl", // rounded border + shadow
-  "p-4 sm:p-8 md:p-12", // padding
-  // "sm:mx-auto", // center
-  "bg-white dark:bg-gray-900", // bg
+  classesRoundedShadowXl, // rounded border + shadow
+  classesPadding4sm8md12, // padding
+  classesCardWrapperBg, // bg
+  classesCardWrapperBorderDark, // border
 )

package/lib/card/classesShadow.ts

@@ -0,0 +1,5 @@
+export const classesShadowSmMd = "shadow-sm hover:shadow-md transition duration-500"
+
+export const classesShadowMdLg = "shadow-md hover:shadow-lg transition duration-500"
+
+export const classesShadowLgXl = "shadow-lg hover:shadow-xl transition duration-500"

package/lib/details/Details.astro

@@ -1,8 +1,9 @@
 ---
-import Icon1 from "~/icon/Icon1.astro"
-import { classArr } from "~/utils/ui/classArr"
-import { classMerge } from "~/utils/ui/classMerge"
+import Icon from "~ui/icon/Icon.astro"
+import { classArr } from "~ui/utils/classArr"
+import { classMerge } from "~ui/utils/classMerge"
 import { mdiChevronDown } from "@mdi/js"
+import type { HTMLAttributes } from "astro/types"
 
 interface Props {
   icon?: string
@@ -10,12 +11,13 @@ interface Props {
   subtitle?: string
   class?: string
   summaryClass?: string
+  restProps?: HTMLAttributes<"details">
+  summaryProps?: HTMLAttributes<"summary">
 }
-const props = Astro.props
-const icon = props.icon
-const title = props.title
-const subtitle = props.subtitle
-const summaryClass = props.summaryClass
+const p = Astro.props
+const icon = p.icon
+const title = p.title
+const subtitle = p.subtitle
 const hasSummary = Astro.slots.has("summary")
 ---
 
@@ -26,29 +28,32 @@ const hasSummary = Astro.slots.has("summary")
     "rounded-lg border border-gray-200",
     "shadow-sm",
     "overflow-hidden",
-    props.class,
+    p.class,
   )}
+  {...p.restProps}
 >
   <summary
     class={classArr(
       "flex flex-col sm:flex-row items-center justify-between gap-4",
-      "p-6",
+      "p-4 sm:p-6",
       "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors",
+      p.summaryClass,
     )}
+    {...p.summaryProps}
   >
     {
       !hasSummary && title && (
         <>
-          {icon && <Icon1 path={icon} class="size-7 mt-1" />}
-          <div class="flex-1">
+          {icon && <Icon path={icon} class="size-7 mt-1" />}
+          <span class="flex-1">
             <h3 class={"text-xl font-semibold"}>{title}</h3>
-            {subtitle && <p class={"text-muted-foreground mt-1"}>{subtitle}</p>}
-          </div>
+            {subtitle && <span class={"text-muted-foreground mt-1"}>{subtitle}</span>}
+          </span>
         </>
       )
     }
     <slot name="summary" />
-    <Icon1
+    <Icon
       path={mdiChevronDown}
       class={classArr("size-7", "text-gray-400 dark:text-gray-600", "transition-transform group-open:rotate-180")}
     />

package/lib/dev/TailwindIndicator.astro

@@ -1,6 +1,6 @@
 ---
-import { classMerge } from "~/utils/ui/classMerge"
-import { isDevEnv } from "~/utils/ui/isDevEnv"
+import { classMerge } from "~ui/utils/classMerge"
+import { isDevEnv } from "~ui/utils/isDevEnv"
 ---
 
 {

package/lib/form/Fieldset.astro

@@ -1,6 +1,7 @@
 ---
+import type { HTMLAttributes } from "astro/types"
 import { classesFieldset } from "./classesFieldset"
-import { classMerge } from "~/utils/ui/classMerge"
+import { classMerge } from "~ui/utils/classMerge"
 
 interface Props {
   title: string
@@ -8,13 +9,15 @@ interface Props {
   subtitles?: string | string[]
   subtitleClass?: string
   class?: string
+  restProps?: HTMLAttributes<"fieldset">
+  legendProps?: HTMLAttributes<"legend">
 }
-const props = Astro.props
+const p = Astro.props
 ---
 
-<fieldset class={classMerge(classesFieldset, props.class)}>
-  <legend class={classMerge("px-1", props.titleClass)}>
-    {props.title}
+<fieldset class={classMerge(classesFieldset, p.class)} {...p.restProps}>
+  <legend class={classMerge("px-1", p.titleClass)} {...p.legendProps}>
+    {p.title}
     <!--{props.subtitles && <PopoverI title={props.title} points={props.subtitles} />}-->
   </legend>
   <slot />

package/lib/generate_demo_list/DemoList.astro

@@ -1,19 +1,21 @@
 ---
-import { classesTextLink } from "~/link/classesTextLink"
-import { classArr } from "~/utils/ui/classArr"
+import { classesTextLink } from "~ui/link/classesTextLink"
+import { classArr } from "~ui/utils/classArr"
 import { type DemoListType } from "./DemoListType"
+import { classMerge } from "~ui/utils/classMerge"
 
 interface Props {
   demos: DemoListType
+  urlPrefix?: string
   class?: string
 }
-const props = Astro.props
+const p = Astro.props
 
 // Extract categories and their demo pages
-const categories = Object.entries(props.demos)
+const categories = Object.entries(p.demos)
 ---
 
-<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+<div class={classMerge("grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-4", p.class)}>
   {
     categories.map(([category, pages]) => (
       <section class="bg-white dark:bg-zinc-700 rounded-lg shadow-md p-4 border border-gray-200 dark:border-zinc-600">
@@ -21,7 +23,7 @@ const categories = Object.entries(props.demos)
         <ul class="list-disc pl-4 space-y-1">
           {pages.map((page) => (
             <li class={classArr(classesTextLink)}>
-              <a href={`/demos/${category}/${page}`}>{page.replace(/_/g, " ").replaceAll("demo ", "")}</a>
+              <a href={`${p.urlPrefix ?? ""}/${category}/${page}`}>{page.replace(/_/g, " ").replaceAll("demo ", "")}</a>
             </li>
           ))}
         </ul>

package/lib/generate_demo_list/generateDemoList.ts

@@ -1,6 +1,6 @@
 import { readdir, writeFile } from "node:fs/promises"
 import { join } from "node:path"
-import { runCmdAsync } from "~/utils/bun/runCmdAsync"
+import { runCmdAsync } from "~utils/bun/runCmdAsync"
 import type { DemoListType } from "./DemoListType"
 
 export async function generateDemoList(demosPath: string, outputPath: string) {
@@ -20,7 +20,7 @@ export async function generateDemoList(demosPath: string, outputPath: string) {
   }
   sortDemoPageList(demoPageList)
 
-  const outputContent = `import type { DemoListType } from "~/generate_demo_list/DemoListType"
+  const outputContent = `import type { DemoListType } from "~ui/generate_demo_list/DemoListType"
 
 export const demoList = ${JSON.stringify(demoPageList, null, 2)} satisfies DemoListType;
 `