diff --git a/site/.astro/content-assets.mjs b/site/.astro/content-assets.mjs new file mode 100644 index 000000000..2b8b8234b --- /dev/null +++ b/site/.astro/content-assets.mjs @@ -0,0 +1 @@ +export default new Map(); \ No newline at end of file diff --git a/site/.astro/content-modules.mjs b/site/.astro/content-modules.mjs new file mode 100644 index 000000000..2b8b8234b --- /dev/null +++ b/site/.astro/content-modules.mjs @@ -0,0 +1 @@ +export default new Map(); \ No newline at end of file diff --git a/site/.astro/content.d.ts b/site/.astro/content.d.ts new file mode 100644 index 000000000..97e873c04 --- /dev/null +++ b/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; + 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; + } + interface Render { + '.md': Promise; + } + + export interface RenderedContent { + html: string; + metadata?: { + imagePaths: Array; + [key: string]: unknown; + }; + } +} + +declare module 'astro:content' { + type Flatten = T extends { [K: string]: infer U } ? U : never; + + export type CollectionKey = keyof AnyEntryMap; + export type CollectionEntry = Flatten; + + export type ContentCollectionKey = keyof ContentEntryMap; + export type DataCollectionKey = keyof DataEntryMap; + + type AllValuesOf = T extends any ? T[keyof T] : never; + type ValidContentEntrySlug = 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 | (string & {}) = string, + > = { + collection: C; + slug: E; + }; + + /** @deprecated Use `getEntry` instead. */ + export function getEntryBySlug< + C extends keyof ContentEntryMap, + E extends ValidContentEntrySlug | (string & {}), + >( + collection: C, + // Note that this has to accept a regular string too, for SSR + entrySlug: E, + ): E extends ValidContentEntrySlug + ? Promise> + : Promise | undefined>; + + /** @deprecated Use `getEntry` instead. */ + export function getDataEntryById( + collection: C, + entryId: E, + ): Promise>; + + export function getCollection>( + collection: C, + filter?: (entry: CollectionEntry) => entry is E, + ): Promise; + export function getCollection( + collection: C, + filter?: (entry: CollectionEntry) => unknown, + ): Promise[]>; + + export function getEntry< + C extends keyof ContentEntryMap, + E extends ValidContentEntrySlug | (string & {}), + >( + entry: ReferenceContentEntry, + ): E extends ValidContentEntrySlug + ? Promise> + : Promise | undefined>; + export function getEntry< + C extends keyof DataEntryMap, + E extends keyof DataEntryMap[C] | (string & {}), + >( + entry: ReferenceDataEntry, + ): E extends keyof DataEntryMap[C] + ? Promise + : Promise | undefined>; + export function getEntry< + C extends keyof ContentEntryMap, + E extends ValidContentEntrySlug | (string & {}), + >( + collection: C, + slug: E, + ): E extends ValidContentEntrySlug + ? Promise> + : Promise | 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 | undefined + : Promise + : Promise | undefined>; + + /** Resolve an array of entry references from the same collection */ + export function getEntries( + entries: ReferenceContentEntry>[], + ): Promise[]>; + export function getEntries( + entries: ReferenceDataEntry[], + ): Promise[]>; + + export function render( + entry: AnyEntryMap[C][string], + ): Promise; + + export function reference( + collection: C, + ): import('astro/zod').ZodEffects< + import('astro/zod').ZodString, + C extends keyof ContentEntryMap + ? ReferenceContentEntry> + : ReferenceDataEntry + >; + // 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( + collection: C, + ): import('astro/zod').ZodEffects; + + type ReturnTypeOrOriginal = T extends (...args: any[]) => infer R ? R : T; + type InferEntrySchema = import('astro/zod').infer< + ReturnTypeOrOriginal['schema']> + >; + + type ContentEntryMap = { + + }; + + type DataEntryMap = { + + }; + + type AnyEntryMap = ContentEntryMap & DataEntryMap; + + export type ContentConfig = typeof import("../src/content.config.mjs"); +} diff --git a/site/.astro/data-store.json b/site/.astro/data-store.json new file mode 100644 index 000000000..0eb2c0282 --- /dev/null +++ b/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}}"] \ No newline at end of file diff --git a/site/.astro/settings.json b/site/.astro/settings.json new file mode 100644 index 000000000..23d293625 --- /dev/null +++ b/site/.astro/settings.json @@ -0,0 +1,5 @@ +{ + "_variables": { + "lastUpdateCheck": 1740585432909 + } +} \ No newline at end of file diff --git a/site/.astro/types.d.ts b/site/.astro/types.d.ts new file mode 100644 index 000000000..03d7cc43f --- /dev/null +++ b/site/.astro/types.d.ts @@ -0,0 +1,2 @@ +/// +/// \ No newline at end of file diff --git a/site/astro.config.js b/site/astro.config.js index 3c931e00c..270d17753 100644 --- a/site/astro.config.js +++ b/site/astro.config.js @@ -1,16 +1,15 @@ 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/"), @@ -18,10 +17,13 @@ export default defineConfig({ 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'], }, }, -}) +}) \ No newline at end of file diff --git a/site/package.json b/site/package.json index 33e098329..7fc3d4779 100644 --- a/site/package.json +++ b/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" } } diff --git a/site/src/components/anatomy-components.jsx b/site/src/components/anatomy-components.jsx index 7058169f0..fdb10a6fb 100644 --- a/site/src/components/anatomy-components.jsx +++ b/site/src/components/anatomy-components.jsx @@ -1,4 +1,3 @@ -import React from 'react' import './anatomy-component.css' export const AnatomyWrapper = ({ children }) => ( diff --git a/site/src/components/anatomy.jsx b/site/src/components/anatomy.jsx index da0d732db..1bf5588b7 100644 --- a/site/src/components/anatomy.jsx +++ b/site/src/components/anatomy.jsx @@ -1,4 +1,3 @@ -import React from 'react' import './anatomy.css' import { anatomiesByComponent } from '../sources' diff --git a/site/src/components/breadcrumb-anatomy.jsx b/site/src/components/breadcrumb-anatomy.jsx index 60f237daa..664a5c9dc 100644 --- a/site/src/components/breadcrumb-anatomy.jsx +++ b/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' diff --git a/site/src/components/checkbox-anatomy.jsx b/site/src/components/checkbox-anatomy.jsx index cd1fd36c9..52f950a57 100644 --- a/site/src/components/checkbox-anatomy.jsx +++ b/site/src/components/checkbox-anatomy.jsx @@ -1,4 +1,3 @@ -import React from 'react' import { AnatomyWrapper, Host, Part, Slot } from './anatomy-components' const CheckboxAnatomy = () => { diff --git a/site/src/components/combobox-anatomy.jsx b/site/src/components/combobox-anatomy.jsx index 357b895da..34bbd461e 100644 --- a/site/src/components/combobox-anatomy.jsx +++ b/site/src/components/combobox-anatomy.jsx @@ -1,4 +1,3 @@ -import React from 'react' import { AnatomyWrapper, Host, Part, Slot } from './anatomy-components' const ComboboxAnatomy = () => { diff --git a/site/src/components/community-links.jsx b/site/src/components/community-links.jsx index 262f987c3..96bda9dde 100644 --- a/site/src/components/community-links.jsx +++ b/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 ( ) diff --git a/site/src/components/component-coverage.jsx b/site/src/components/component-coverage.jsx index 125f1fa78..e2e4f1510 100644 --- a/site/src/components/component-coverage.jsx +++ b/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' diff --git a/site/src/components/component-name-matrix.jsx b/site/src/components/component-name-matrix.jsx index f3aea4106..f0f76b83d 100644 --- a/site/src/components/component-name-matrix.jsx +++ b/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' diff --git a/site/src/components/concept-coverage.jsx b/site/src/components/concept-coverage.jsx index d077a58bf..1e5c1033e 100644 --- a/site/src/components/concept-coverage.jsx +++ b/site/src/components/concept-coverage.jsx @@ -1,4 +1,3 @@ -import React from 'react' import { sourceNames, getSourcesWithComponentConcept } from '../sources' import './concept-coverage.css' diff --git a/site/src/components/concept.jsx b/site/src/components/concept.jsx index bbb21af9c..87efc1454 100644 --- a/site/src/components/concept.jsx +++ b/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) diff --git a/site/src/components/concepts.jsx b/site/src/components/concepts.jsx index b6696b6a8..821842e99 100644 --- a/site/src/components/concepts.jsx +++ b/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, diff --git a/site/src/components/contributors.astro b/site/src/components/contributors.astro index d2648f014..917b33d65 100644 --- a/site/src/components/contributors.astro +++ b/site/src/components/contributors.astro @@ -6,7 +6,8 @@ const CONTRIBUTORS = []; const fetchContributors = async (page) => { const response = await fetch(`${CONTRIBUTORS_URL}?page=${page}`); const contributors = await response.json(); - CONTRIBUTORS.push(...contributors); + if (Array.isArray(contributors)) + CONTRIBUTORS.push(...contributors); }; // Fetch contributors from page 1 diff --git a/site/src/components/design-systems-list.jsx b/site/src/components/design-systems-list.jsx index 3209d354f..1bb3ceda3 100644 --- a/site/src/components/design-systems-list.jsx +++ b/site/src/components/design-systems-list.jsx @@ -1,4 +1,3 @@ -import React from 'react' import { sources } from '../sources' import './design-systems-list.css' diff --git a/site/src/components/file-anatomy.jsx b/site/src/components/file-anatomy.jsx index bc335382b..a39cc3106 100644 --- a/site/src/components/file-anatomy.jsx +++ b/site/src/components/file-anatomy.jsx @@ -1,4 +1,3 @@ -import React from 'react' import { AnatomyWrapper, Host, Part, Slot } from './anatomy-components' const FileAnatomy = () => { diff --git a/site/src/components/image.jsx b/site/src/components/image.jsx index 8eafe7285..f05e0b7ee 100644 --- a/site/src/components/image.jsx +++ b/site/src/components/image.jsx @@ -1,5 +1,3 @@ -import React from 'react' - export function Image({ alt = src, src, style }) { return {alt} } diff --git a/site/src/components/missing-images.jsx b/site/src/components/missing-images.jsx index d295d64fa..b4f063ff0 100644 --- a/site/src/components/missing-images.jsx +++ b/site/src/components/missing-images.jsx @@ -1,4 +1,3 @@ -import React from 'react' import './missing-images.css' export function MissingImages(props) { diff --git a/site/src/components/navigation/navigation-container.jsx b/site/src/components/navigation/navigation-container.jsx index 997c34676..2add5014b 100644 --- a/site/src/components/navigation/navigation-container.jsx +++ b/site/src/components/navigation/navigation-container.jsx @@ -1,12 +1,22 @@ -import { useStore } from '@nanostores/react' -import React from 'react' -import { isMenuOpen } from '../../state/menuState' +import { useState } from 'preact/hooks' +import { apply, isSupported } from 'invokers-polyfill/fn' + +if (typeof window !== 'undefined') { + if (!isSupported()) apply() +} function NavigationContainer(props) { - const $isMenuOpen = useStore(isMenuOpen) + const [isMenuOpen, setIsMenuOpen] = useState(false) + + function handleCommand(e) { + if (e.command === '--toggle-menu') { + setIsMenuOpen(!isMenuOpen) + e.source.setAttribute('aria-expanded', isMenuOpen) + } + } return ( -