diff --git a/.changeset/native-liquid-registry.md b/.changeset/native-liquid-registry.md new file mode 100644 index 000000000..88bbbed61 --- /dev/null +++ b/.changeset/native-liquid-registry.md @@ -0,0 +1,7 @@ +--- +"fulldev-ui": minor +--- + +Add a native Liquid registry for Shopify themes with handwritten component styles, shared neutral tokens, data-slot ES modules and editor lifecycle. Universal shadcn items install directly into theme assets and snippets without Tailwind or a consuming build step. + +Integrate Liquid as the third docs framework, with its own navigation, 58 component pages, native rendered previews, usage and installation examples, Markdown endpoints and AI indexes. diff --git a/README.md b/README.md index 098275dd0..5efe754ee 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Fulldev UI -A shadcn-compatible set of components built for [Astro][astro], designed for content-driven websites. +A shadcn-compatible UI library for Astro, React and native Shopify Liquid. ## Features @@ -12,6 +12,10 @@ A shadcn-compatible set of components built for [Astro][astro], designed for con - **TypeScript** — Full TypeScript support - **React extension**: the Fulldev extras and blocks for official shadcn/ui React projects; see [react/README.md](react/README.md) +## Native Liquid + +Install into a Shopify theme with `vp dlx shadcn@latest add https://ui.full.dev/r/liquid/components.json`, then render `ui` once in the layout head. Readable CSS, native ES modules and shared tokens, with no theme build step. See [Liquid](https://ui.full.dev/liquid/) and [liquid/README.md](liquid/README.md). + ## Installation ### Prerequisites diff --git a/knip.jsonc b/knip.jsonc index 6455ba4c7..c275cf53c 100644 --- a/knip.jsonc +++ b/knip.jsonc @@ -19,6 +19,8 @@ // Read by the html-validate CLI in the build. "html-validate.config.mjs", "liquid/runtime/*.js", + // src/lib/liquid.ts loads this in the generated preview HTML. + "public/preview/liquid.js", ], // Read as text by src/lib/styles.ts and the registry scripts. "ignoreFiles": [ diff --git a/public/_redirects b/public/_redirects index 23cf976f4..60e37894d 100644 --- a/public/_redirects +++ b/public/_redirects @@ -239,3 +239,7 @@ /docs/layouts/ /components/layout/ 301! /docs/mcp/ /docs/introduction/ 301! /docs/skills/ /docs/introduction/ 301! + +# Native Liquid is a platform alongside Astro and React. +/docs/liquid/ /liquid/docs/installation/ 301! +/docs/liquid.md /liquid/docs/installation.md 301! diff --git a/public/preview/liquid.js b/public/preview/liquid.js new file mode 100644 index 000000000..2bee08e86 --- /dev/null +++ b/public/preview/liquid.js @@ -0,0 +1,34 @@ +// Docs-only bridge. The component controllers come from the native library. +const report = () => + parent.postMessage( + { type: "fulldev:liquid-height", height: document.body.scrollHeight }, + location.origin + ) +new ResizeObserver(report).observe(document.querySelector("#example")) +window.addEventListener("load", report) +window.addEventListener("message", ({ source, origin, data }) => { + if ( + source !== parent || + origin !== location.origin || + data?.type !== "fulldev:liquid-theme" + ) + return + document.documentElement.classList.toggle("dark", data.dark) + document.documentElement.style.colorScheme = data.dark ? "dark" : "light" + document.querySelector("#preview-theme").textContent = data.css + for (const href of data.fonts ?? []) { + if ( + [...document.querySelectorAll("link[data-font]")].some( + (link) => link.href === href + ) + ) + continue + const link = document.createElement("link") + link.rel = "stylesheet" + link.href = href + link.dataset.font = "" + document.head.append(link) + } + report() +}) +parent.postMessage({ type: "fulldev:liquid-ready" }, location.origin) diff --git a/skills/fulldev-ui/SKILL.md b/skills/fulldev-ui/SKILL.md index 3707823af..e7c0e86ca 100644 --- a/skills/fulldev-ui/SKILL.md +++ b/skills/fulldev-ui/SKILL.md @@ -18,6 +18,10 @@ components. Start at [llms.txt](https://ui.full.dev/llms.txt), or [react/llms.txt](https://ui.full.dev/react/llms.txt) for React. Where this skill and the shadcn skill differ, this skill wins. +## Native Liquid + +For Shopify themes, use `https://ui.full.dev/r/liquid/.json` with `shadcn add`; `components` installs the full set. Read [Liquid](https://ui.full.dev/liquid/docs/installation.md). These are universal items with explicit theme targets. Do not run `shadcn init` or add Tailwind to the theme. Render `ui` once in each layout head before theme overrides and other modules. Keep `content_for_header`; load `custom.css` after it. Existing Shopify adapters use `runtime: false` and the exported lifecycle with their own import map. Installed UI stays unchanged; theme settings and commerce code stay local. Native source supports Vega, not the Tailwind preset generator. + ## Astro setup - Fulldev UI serves only the Base UI styles (`base-vega`, `base-nova` and so diff --git a/src/components/create.astro b/src/components/create.astro index 5e23ebe4c..0668e9641 100644 --- a/src/components/create.astro +++ b/src/components/create.astro @@ -87,6 +87,7 @@ const command = (template: string) => > Astro React + Liquid @@ -193,7 +194,22 @@ const command = (template: string) => - + + New project Existing Fulldev UI project @@ -248,6 +264,11 @@ const command = (template: string) => "[data-create-framework]" ) const show = (framework: string) => { + document + .querySelectorAll("[data-framework-exclude]") + .forEach((panel) => { + panel.hidden = panel.dataset.frameworkExclude === framework + }) document .querySelectorAll("[data-framework-panel]") .forEach((panel) => { diff --git a/src/components/docs-header.astro b/src/components/docs-header.astro index fc7e2d006..0e8db811e 100644 --- a/src/components/docs-header.astro +++ b/src/components/docs-header.astro @@ -21,7 +21,12 @@ import { ThemeToggle } from "@/components/ui/theme-toggle" type Props = { logo: { label: string; href: string; alt?: string } - navigation: { label: string; href: string; reactHref?: string }[] + navigation: { + label: string + href: string + reactHref?: string + liquidHref?: string + }[] button: { label: string; href: string } githubRepo: string githubStars?: string @@ -71,6 +76,7 @@ const isCurrent = (href: string) => variant="ghost" size="sm" data-react-href={item.reactHref} + data-liquid-href={item.liquidHref} > {item.label} @@ -128,6 +134,7 @@ const isCurrent = (href: string) => diff --git a/src/components/docs-switcher.astro b/src/components/docs-switcher.astro index dcd0a62f3..bc8acbca5 100644 --- a/src/components/docs-switcher.astro +++ b/src/components/docs-switcher.astro @@ -5,6 +5,7 @@ import ArrowUpRightIcon from "@lucide/astro/icons/arrow-up-right" import CheckIcon from "@lucide/astro/icons/check" import ChevronsUpDownIcon from "@lucide/astro/icons/chevrons-up-down" +import LiquidLogo from "@lucide/astro/icons/droplet" import AstroLogo from "simple-icons/icons/astro.svg" import ReactLogo from "simple-icons/icons/react.svg" @@ -34,7 +35,7 @@ type Props = { } const { current, hrefs, labels } = Astro.props -const logos = { astro: AstroLogo, react: ReactLogo } +const logos = { astro: AstroLogo, react: ReactLogo, liquid: LiquidLogo } const Logo = logos[current] const title = (value: string) => value[0].toUpperCase() + value.slice(1) const [fallback] = NAMED_PRESETS @@ -46,7 +47,11 @@ const presets = NAMED_PRESETS.map(({ id, label, config }) => ({ })) --- -
+
({ )} > - @@ -80,7 +89,11 @@ const presets = NAMED_PRESETS.map(({ id, label, config }) => ({ href={hrefs[framework]} data-framework-choice={framework} > -