Fixing assets

.gitignore

@@ -11,6 +11,6 @@ packages/css/dist/
 npm-debug.log*
 dist/
 docs/generated/
-public/assets/
+public/assets/js/
 
 public/fragments/

README.md

@@ -2,7 +2,7 @@
 
 Basecoat is a Tailwind CSS, vanilla HTML/CSS/JavaScript implementation of the shadcn/ui design system. It provides shadcn-style components for any web stack without React, Radix, or framework runtime dependencies.
 
-![screenshot](docs/src/assets/images/screenshot.png)
+![screenshot](public/assets/images/screenshot.png)
 
 ## Features
 

docs/src/assets/discord.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>

docs/src/customization.mdx

@@ -45,7 +45,7 @@ Learn more in the [shadcn/ui theming docs](https://ui.shadcn.com/docs/theming).
 
 ## Fonts
 
-Basecoat does not ship web fonts by default. The docs site uses the same font choices as the current shadcn/ui site: [Geist Sans](https://fonts.google.com/specimen/Geist) for sans and heading text, and [Geist Mono](https://fonts.google.com/specimen/Geist+Mono) for monospace text.
+Basecoat does not ship web font files by default. Its font tokens prefer [Geist Sans](https://fonts.google.com/specimen/Geist) and [Geist Mono](https://fonts.google.com/specimen/Geist+Mono) when those fonts are available, then fall back to the full Tailwind default sans and mono stacks.
 
 Install the fonts with Fontsource:
 
@@ -67,9 +67,9 @@ Then import the font files and override the font tokens after Basecoat:
 @import "@fontsource/geist-mono/600.css";
 @import "@fontsource/geist-mono/700.css";
 :root {
-  --font-sans: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
-  --font-heading: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
-  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --font-sans: "Geist Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-heading: "Geist Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 ```
 

docs/src/site/StyleHead.astro

@@ -22,6 +22,65 @@ const styleUrls = {
 };
 ---
 
+<style is:inline>
+  @font-face {
+    font-family: "Geist Sans";
+    src: url("/assets/fonts/geist/geist-sans-latin-400-normal.woff2") format("woff2");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Geist Sans";
+    src: url("/assets/fonts/geist/geist-sans-latin-500-normal.woff2") format("woff2");
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Geist Sans";
+    src: url("/assets/fonts/geist/geist-sans-latin-600-normal.woff2") format("woff2");
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Geist Sans";
+    src: url("/assets/fonts/geist/geist-sans-latin-700-normal.woff2") format("woff2");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Geist Mono";
+    src: url("/assets/fonts/geist/geist-mono-latin-400-normal.woff2") format("woff2");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Geist Mono";
+    src: url("/assets/fonts/geist/geist-mono-latin-500-normal.woff2") format("woff2");
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Geist Mono";
+    src: url("/assets/fonts/geist/geist-mono-latin-600-normal.woff2") format("woff2");
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: "Geist Mono";
+    src: url("/assets/fonts/geist/geist-mono-latin-700-normal.woff2") format("woff2");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+  }
+</style>
+
 <style id="docs-style-gate" is:inline>
   html[data-style-pending] body {
     visibility: hidden;

src/css/base/base.css

@@ -84,6 +84,8 @@
 }
 
 @theme {
+  --font-sans: "Geist Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);

src/pages/index.astro

@@ -10,8 +10,6 @@ import miraUrl from "../../docs/src/assets/styles/style-mira.css?url";
 import lumaUrl from "../../docs/src/assets/styles/style-luma.css?url";
 import seraUrl from "../../docs/src/assets/styles/style-sera.css?url";
 import rheaUrl from "../../docs/src/assets/styles/style-rhea.css?url";
-import socialImage from "../../docs/src/assets/social.png";
-import favicon from "../../docs/src/assets/favicon.svg";
 import ArrowRight from "lucide-static/icons/arrow-right.svg?raw";
 import Activity from "lucide-static/icons/activity.svg?raw";
 import BanknoteArrowUp from "lucide-static/icons/banknote-arrow-up.svg?raw";
@@ -47,6 +45,8 @@ import Sun from "lucide-static/icons/sun.svg?raw";
 
 const title = "All of the shadcn/ui magic, none of the React";
 const description = "A component library built with Tailwind CSS that works with any web stack.";
+const favicon = "/assets/favicon.svg";
+const socialImage = "/assets/social.png";
 const styleUrls = {
   vega: vegaUrl,
   nova: novaUrl,
@@ -184,15 +184,15 @@ const sidebarSections = [
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{title} | Basecoat</title>
     <meta name="description" content={description} />
-    <link rel="icon" type="image/svg+xml" href={favicon.src} />
+    <link rel="icon" type="image/svg+xml" href={favicon} />
     <meta property="og:type" content="website" />
     <meta property="og:title" content={`${title} | Basecoat`} />
     <meta property="og:description" content={description} />
-    <meta property="og:image" content={socialImage.src} />
+    <meta property="og:image" content={socialImage} />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content={`${title} | Basecoat`} />
     <meta name="twitter:description" content={description} />
-    <meta name="twitter:image" content={socialImage.src} />
+    <meta name="twitter:image" content={socialImage} />
     <script src={basecoatJsUrl} defer></script>
   </head>
   <body class="min-h-dvh overflow-x-clip bg-background text-foreground antialiased">