Upgrade to Astro v5 and preact

site/.astro/content-assets.mjs

@@ -0,0 +1 @@
+export default new Map();

site/.astro/content-modules.mjs

@@ -0,0 +1 @@
+export default new Map();

site/.astro/content.d.ts

@@ -0,0 +1,167 @@
+declare module 'astro:content' {
+	interface Render {
+		'.mdx': Promise<{
+			Content: import('astro').MarkdownInstance<{}>['Content'];
+			headings: import('astro').MarkdownHeading[];
+			remarkPluginFrontmatter: Record<string, any>;
+			components: import('astro').MDXInstance<{}>['components'];
+		}>;
+	}
+}
+
+declare module 'astro:content' {
+	export interface RenderResult {
+		Content: import('astro/runtime/server/index.js').AstroComponentFactory;
+		headings: import('astro').MarkdownHeading[];
+		remarkPluginFrontmatter: Record<string, any>;
+	}
+	interface Render {
+		'.md': Promise<RenderResult>;
+	}
+
+	export interface RenderedContent {
+		html: string;
+		metadata?: {
+			imagePaths: Array<string>;
+			[key: string]: unknown;
+		};
+	}
+}
+
+declare module 'astro:content' {
+	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
+
+	export type CollectionKey = keyof AnyEntryMap;
+	export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
+
+	export type ContentCollectionKey = keyof ContentEntryMap;
+	export type DataCollectionKey = keyof DataEntryMap;
+
+	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
+	type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf<
+		ContentEntryMap[C]
+	>['slug'];
+
+	export type ReferenceDataEntry<
+		C extends CollectionKey,
+		E extends keyof DataEntryMap[C] = string,
+	> = {
+		collection: C;
+		id: E;
+	};
+	export type ReferenceContentEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}) = string,
+	> = {
+		collection: C;
+		slug: E;
+	};
+
+	/** @deprecated Use `getEntry` instead. */
+	export function getEntryBySlug<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		collection: C,
+		// Note that this has to accept a regular string too, for SSR
+		entrySlug: E,
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+
+	/** @deprecated Use `getEntry` instead. */
+	export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>(
+		collection: C,
+		entryId: E,
+	): Promise<CollectionEntry<C>>;
+
+	export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => entry is E,
+	): Promise<E[]>;
+	export function getCollection<C extends keyof AnyEntryMap>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => unknown,
+	): Promise<CollectionEntry<C>[]>;
+
+	export function getEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		entry: ReferenceContentEntry<C, E>,
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(
+		entry: ReferenceDataEntry<C, E>,
+	): E extends keyof DataEntryMap[C]
+		? Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		collection: C,
+		slug: E,
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(
+		collection: C,
+		id: E,
+	): E extends keyof DataEntryMap[C]
+		? string extends keyof DataEntryMap[C]
+			? Promise<DataEntryMap[C][E]> | undefined
+			: Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+
+	/** Resolve an array of entry references from the same collection */
+	export function getEntries<C extends keyof ContentEntryMap>(
+		entries: ReferenceContentEntry<C, ValidContentEntrySlug<C>>[],
+	): Promise<CollectionEntry<C>[]>;
+	export function getEntries<C extends keyof DataEntryMap>(
+		entries: ReferenceDataEntry<C, keyof DataEntryMap[C]>[],
+	): Promise<CollectionEntry<C>[]>;
+
+	export function render<C extends keyof AnyEntryMap>(
+		entry: AnyEntryMap[C][string],
+	): Promise<RenderResult>;
+
+	export function reference<C extends keyof AnyEntryMap>(
+		collection: C,
+	): import('astro/zod').ZodEffects<
+		import('astro/zod').ZodString,
+		C extends keyof ContentEntryMap
+			? ReferenceContentEntry<C, ValidContentEntrySlug<C>>
+			: ReferenceDataEntry<C, keyof DataEntryMap[C]>
+	>;
+	// Allow generic `string` to avoid excessive type errors in the config
+	// if `dev` is not running to update as you edit.
+	// Invalid collection names will be caught at build time.
+	export function reference<C extends string>(
+		collection: C,
+	): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>;
+
+	type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
+	type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer<
+		ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
+	>;
+
+	type ContentEntryMap = {
+
+	};
+
+	type DataEntryMap = {
+
+	};
+
+	type AnyEntryMap = ContentEntryMap & DataEntryMap;
+
+	export type ContentConfig = typeof import("../src/content.config.mjs");
+}

site/.astro/data-store.json

@@ -0,0 +1 @@
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.2.5","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://open-ui.org\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":3000,\"streaming\":true},\"redirects\":{},\"prefetch\":{\"prefetchAll\":true},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":true,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"serializeConfig\":false},\"legacy\":{\"collections\":false}}"]

site/.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1740585432909
+	}
+}

site/.astro/types.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="astro/client" />
+/// <reference path="content.d.ts" />

site/astro.config.js

@@ -1,27 +1,29 @@
 import { defineConfig } from 'astro/config'
-import react from '@astrojs/react'
 import sitemap from '@astrojs/sitemap'
 import mdx from '@astrojs/mdx'
-import prefetch from '@astrojs/prefetch'
 import compress from 'astro-compress'
 import { rehypeHeadingIds } from '@astrojs/markdown-remark'
 import { autolinkHeadingsPlugin } from './src/plugins/rehypeHeadings'
 import rehypeResponsiveTables from './src/plugins/rehypeResponsiveTable'
 
+import preact from '@astrojs/preact';
+
 export default defineConfig({
   integrations: [
-    react(),
     sitemap({
       filter: (page) =>
         !page.endsWith("/component-spec-template/"),
     }),
     mdx({
       rehypePlugins: [rehypeHeadingIds, autolinkHeadingsPlugin, rehypeResponsiveTables],
     }),
-    prefetch(),
     compress(),
+    preact(),
   ],
   site: 'https://open-ui.org',
+  prefetch: {
+    prefetchAll: true,
+  },
   markdown: {
     shikiConfig: {
       langs: [],
@@ -33,4 +35,4 @@ export default defineConfig({
       external: ['svgo'],
     },
   },
-})
+})

site/package.json

@@ -32,30 +32,22 @@
     ]
   },
   "devDependencies": {
-    "@astrojs/mdx": "^1.1.1",
-    "@astrojs/prefetch": "^0.4.1",
-    "@astrojs/react": "^3.0.3",
-    "@astrojs/sitemap": "^3.0.1",
-    "astro": "^3.2.4",
-    "astro-compress": "^2.0.15",
+    "@astrojs/mdx": "^4.0.8",
+    "@astrojs/sitemap": "3.2.1",
+    "astro": "5.3.1",
+    "astro-compress": "^2.3.6",
     "eslint": "^8.18.0",
-    "eslint-plugin-react": "^7.30.0",
     "hast-util-to-string": "^2.0.0",
     "hastscript": "^7.2.0",
     "husky": "^4.2.3",
     "lint-staged": "^11.1.2",
     "prettier": "^2.0.4",
     "prettier-plugin-astro": "^0.5.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "rehype-autolink-headings": "^6.1.1"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@nanostores/react": "^0.4.0",
-    "nanostores": "^0.7.1"
+    "@astrojs/preact": "^4.0.4",
+    "invokers-polyfill": "^0.5.2",
+    "preact": "^10.26.2"
   }
 }

site/src/components/anatomy-components.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import './anatomy-component.css'
 
 export const AnatomyWrapper = ({ children }) => (

site/src/components/anatomy.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import './anatomy.css'
 
 import { anatomiesByComponent } from '../sources'

site/src/components/breadcrumb-anatomy.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { AnatomyWrapper, Host, Slot, Part } from './anatomy-components'
 import './breadcrumb-anatomy.css'
 

site/src/components/checkbox-anatomy.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { AnatomyWrapper, Host, Part, Slot } from './anatomy-components'
 
 const CheckboxAnatomy = () => {

site/src/components/combobox-anatomy.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { AnatomyWrapper, Host, Part, Slot } from './anatomy-components'
 
 const ComboboxAnatomy = () => {

site/src/components/community-links.jsx

@@ -1,26 +1,48 @@
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faDiscord, faGithub, faXTwitter } from '@fortawesome/free-brands-svg-icons'
 import './community-links.css'
 
-const iconStyle = {
-  width: '24px',
-  height: '24px',
-}
-
 export default function CommunityLinks({ className = '' }) {
   return (
     <div className={'community-links ' + className}>
       <a href="https://github.com/openui/open-ui" title="GitHub" rel="noreferrer noopener">
-        <FontAwesomeIcon style={iconStyle} icon={faGithub} />
+        <svg
+          aria-hidden="true"
+          style="width: 24px; height: 24px"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 496 512"
+        >
+          <path
+            fill="currentColor"
+            d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+          />
+        </svg>
       </a>
 
       <a href="https://discord.gg/DEWjhSw" title="Discord" rel="noreferrer noopener">
-        <FontAwesomeIcon style={iconStyle} icon={faDiscord} />
+        <svg
+          aria-hidden="true"
+          style="width: 24px; height: 24px"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 640 512"
+        >
+          <path
+            fill="currentColor"
+            d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"
+          />
+        </svg>
       </a>
 
       <a href="https://x.com/openuicg" title="X" rel="noreferrer noopener">
-        <FontAwesomeIcon style={iconStyle} icon={faXTwitter} />
+        <svg
+          aria-hidden="true"
+          style="width: 24px; height: 24px"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+        >
+          <path
+            fill="currentColor"
+            d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
+          />
+        </svg>
       </a>
     </div>
   )

site/src/components/component-coverage.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { componentsByName, get, uniqBy, groupBy } from '../sources'
 import './component-coverage.css'
 

site/src/components/component-name-matrix.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'preact/hooks'
 import { componentOriginalNames, sources, sourcesCount } from '../sources'
 import './component-name-matrix.css'
 

site/src/components/concept-coverage.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { sourceNames, getSourcesWithComponentConcept } from '../sources'
 import './concept-coverage.css'
 

site/src/components/concept.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import { useEffect, useState } from 'preact/hooks'
 import ConceptCoverage from './concept-coverage'
 import Specimens from './specimens'
 import './concept.css'
@@ -11,7 +11,7 @@ export default function Concept({
   showDescriptions,
   initExpand,
 }) {
-  const [open, toggleOpen] = React.useState(initExpand)
+  const [open, toggleOpen] = useState(initExpand)
 
   useEffect(() => {
     toggleOpen(initExpand)

site/src/components/concepts.jsx

@@ -1,12 +1,12 @@
-import React from 'react'
+import { useState } from 'preact/hooks'
 import { openUIConceptsByComponent } from '../sources'
 import './concepts.css'
 
 import Concept from './concept'
 
 const Concepts = ({ component }) => {
-  const [showDescriptions, setShowDescriptions] = React.useState(false)
-  const [collapseAll, toggleCollapseAll] = React.useState(true)
+  const [showDescriptions, setShowDescriptions] = useState(false)
+  const [collapseAll, toggleCollapseAll] = useState(true)
 
   const conceptsForComponent = Object.entries(openUIConceptsByComponent[component] || []).sort(
     ([_a, conceptsA], [_b, conceptsB]) => conceptsA.length - conceptsB.length,