diff --git a/.changeset/plain-css-styles.md b/.changeset/plain-css-styles.md new file mode 100644 index 00000000..7d9796c2 --- /dev/null +++ b/.changeset/plain-css-styles.md @@ -0,0 +1,5 @@ +--- +'@astrobook/ui': patch +--- + +Replace UnoCSS with a hand-written stylesheet built on CSS variables. diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 8dcd9078..00000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "unocss.root": ["packages/ui"] -} diff --git a/package.json b/package.json index aa45c3b3..34c0c0c4 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,6 @@ "license": "MIT", "scripts": { "dev": "turbo watch --filter example-playground dev", - "postinstall": "pnpm --filter=./packages/ui build", "build": "turbo run build --concurrency=1", "build:package": "turbo build --filter='./packages/*' --concurrency=1", "lint": "pnpm lint:eslint && pnpm lint:prettier", diff --git a/packages/astrobook/lib/pages/app.astro b/packages/astrobook/lib/pages/app.astro index 63b119e1..e269bbc5 100644 --- a/packages/astrobook/lib/pages/app.astro +++ b/packages/astrobook/lib/pages/app.astro @@ -2,6 +2,10 @@ import AppComponent from '@astrobook/ui/components/app.astro' import type { GetStaticPathsResult } from 'astro' +// Important that this is the last import, so that the user's CSS comes after +// every built-in style and can override it. +import 'virtual:astrobook/user-css.mjs' + export function getStaticPaths(): GetStaticPathsResult { return [ { diff --git a/packages/astrobook/lib/pages/story.astro b/packages/astrobook/lib/pages/story.astro index e6eb3fce..74b46780 100644 --- a/packages/astrobook/lib/pages/story.astro +++ b/packages/astrobook/lib/pages/story.astro @@ -2,6 +2,10 @@ import LayoutComponent from '@astrobook/ui/components/layout.astro' import type { ComponentProps } from 'astro/types' +// Important that this is the last import, so that the user's CSS comes after +// every built-in style and can override it. +import 'virtual:astrobook/user-css.mjs' + type Props = ComponentProps --- diff --git a/packages/ui/copy.ts b/packages/ui/copy.ts deleted file mode 100644 index f789d4b4..00000000 --- a/packages/ui/copy.ts +++ /dev/null @@ -1,65 +0,0 @@ -import * as crypto from 'node:crypto' -import { promises as fs } from 'node:fs' -import * as path from 'node:path' - -async function getFileHash(filePath: string): Promise { - const fileBuffer = await fs.readFile(filePath) - const hashSum = crypto.createHash('sha256') - hashSum.update(fileBuffer) - return hashSum.digest('hex') -} - -async function copyFile(srcPath: string, destPath: string): Promise { - // Check if destination file exists - try { - await fs.access(destPath) - // If file exists, compare content - const [srcHash, destHash] = await Promise.all([ - getFileHash(srcPath), - getFileHash(destPath), - ]) - - if (srcHash === destHash) { - return - } - } catch { - // Destination file doesn't exist, we'll copy it - } - - // Copy file - await fs.copyFile(srcPath, destPath) - console.log(`[copy.ts] ${srcPath} -> ${destPath}`) -} - -async function copyDirectory(srcPath: string, destPath: string): Promise { - // Create destination directory if it doesn't exist - await fs.mkdir(destPath, { recursive: true }) - - // Read all files/directories in the source directory - const entries = await fs.readdir(srcPath, { withFileTypes: true }) - - await Promise.all( - entries.map(async (entry) => { - const copy = entry.isDirectory() ? copyDirectory : copyFile - await copy( - path.join(srcPath, entry.name), - path.join(destPath, entry.name), - ) - }), - ) -} - -async function main() { - // Get command line arguments - const args = process.argv.slice(2) - - if (args.length !== 2) { - console.error('Usage: tsx copy.ts ') - process.exit(1) - } - - const [src, dest] = args - await copyDirectory(src, dest) -} - -await main() diff --git a/packages/ui/package.json b/packages/ui/package.json index 1e8f8538..4b3a35f0 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -14,15 +14,15 @@ "bugs": "https://github.com/ocavue/astrobook/issues", "keywords": [], "sideEffects": false, - "main": "./dist/index.ts", - "module": "./dist/index.ts", - "types": "./dist/index.ts", + "main": "./src/index.ts", + "module": "./src/index.ts", + "types": "./src/index.ts", "exports": { ".": { - "default": "./dist/index.ts" + "default": "./src/index.ts" }, "./components/*": { - "default": "./dist/components/*" + "default": "./src/components/*" }, "./package.json": { "default": "./package.json" @@ -31,19 +31,16 @@ "typesVersions": { "*": { ".": [ - "./dist/index.ts" + "./src/index.ts" ], "./components/*": [ - "./dist/components/*" + "./src/components/*" ] } }, "files": [ - "dist" + "src" ], - "scripts": { - "build": "tsx copy.ts src temp && unocss --rewrite && prettier -w temp/style.css && tsx copy.ts temp dist" - }, "dependencies": { "@astrobook/core": "workspace:*", "@astrobook/types": "workspace:*", @@ -59,16 +56,9 @@ } }, "devDependencies": { - "@iconify-json/fluent": "^1.2.54", - "@iconify-json/lucide": "^1.2.121", - "@iconify-json/mdi": "^1.2.3", "@types/node": "^22.19.17", - "@unocss/cli": "^66.7.5", "astro": "^7.2.1", - "prettier": "^3.9.6", - "tsx": "^4.23.12", "typescript": "^6.0.3", - "unocss": "^66.7.5", "vite": "^8.2.0", "vitest": "^4.1.10" } diff --git a/packages/ui/src/components/home.astro b/packages/ui/src/components/home.astro index 7d2b9512..d3eff5e5 100644 --- a/packages/ui/src/components/home.astro +++ b/packages/ui/src/components/home.astro @@ -1,41 +1,34 @@ --- import config from 'virtual:astrobook/global-config.mjs' +import Icon from './icon.astro' + const content = config.homeContent const showBadges = !!(content.version || content.repo) --- -
-
+
+
{ content.title == null ? null : ( -

- {content.title} -

+

{content.title}

) } { content.subtitle == null ? null : ( - +

{content.subtitle}

) } { showBadges && ( -
+
{content.version && ( {content.version.label} @@ -45,12 +38,9 @@ const showBadges = !!(content.version || content.repo) href={content.repo.href} target="_blank" rel="noopener noreferrer" - class:list={[ - ':uno: gap-1.5 font-medium @xs:gap-2', - ':uno: flex items-center justify-center rounded-full border border-solid border-gray-200 px-2.5 py-0.5 text-xs text-gray-500 no-underline transition hover:border-gray-300 hover:text-gray-600 @xs:px-3 @xs:py-1 @xs:text-sm dark:border-gray-700 dark:text-gray-500 dark:hover:border-gray-600 dark:hover:text-gray-300', - ]} + class="astrobook-badge astrobook-badge-repo" > - + {content.repo.label} )} @@ -59,3 +49,129 @@ const showBadges = !!(content.version || content.repo) }
+ + diff --git a/packages/ui/src/components/icon.astro b/packages/ui/src/components/icon.astro new file mode 100644 index 00000000..cdc6a5cd --- /dev/null +++ b/packages/ui/src/components/icon.astro @@ -0,0 +1,51 @@ +--- +import type { HTMLAttributes } from 'astro/types' + +type IconName = + 'chevron-down' | 'collection' | 'external-link' | 'search' | 'star' | 'story' + +interface Props extends HTMLAttributes<'span'> { + name: IconName +} + +const { name, ...attrs } = Astro.props +--- + + + + diff --git a/packages/ui/src/components/layout.astro b/packages/ui/src/components/layout.astro index fd2aacfc..379662c2 100644 --- a/packages/ui/src/components/layout.astro +++ b/packages/ui/src/components/layout.astro @@ -1,6 +1,5 @@ --- import '../style.css' -import './layout.css' import Sidebar from './sidebar.astro' import SidebarResizeHandle from './sidebar-resize-handle.astro' import { ThemeScript } from 'astro-theme-toggle/components' @@ -9,9 +8,6 @@ import config from 'virtual:astrobook/global-config.mjs' import { ClientRouter } from 'astro:transitions' -// Important that this is the last import so it can override built-in styles. -import 'virtual:astrobook/user-css.mjs' - interface Props { story: string | undefined hasSidebar: boolean @@ -24,7 +20,6 @@ const DEFAULT_SIDEBAR_RESIZING = false - - + { hasSidebar && ( <> -
+
@@ -94,7 +70,7 @@ const DEFAULT_SIDEBAR_RESIZING = false */ }
@@ -102,3 +78,63 @@ const DEFAULT_SIDEBAR_RESIZING = false
+ + diff --git a/packages/ui/src/components/layout.css b/packages/ui/src/components/layout.css deleted file mode 100644 index 34973746..00000000 --- a/packages/ui/src/components/layout.css +++ /dev/null @@ -1,12 +0,0 @@ -html { - /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */ - font-family: - system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, - 'Apple Color Emoji', 'Segoe UI Emoji'; - - /* Correct the line height in all browsers. */ - line-height: 1.15; - - /* Prevent adjustments of font size after orientation changes in iOS. */ - -webkit-text-size-adjust: 100%; -} diff --git a/packages/ui/src/components/sidebar-button-fullscreen.astro b/packages/ui/src/components/sidebar-button-fullscreen.astro index 128e71e0..e7cbdec5 100644 --- a/packages/ui/src/components/sidebar-button-fullscreen.astro +++ b/packages/ui/src/components/sidebar-button-fullscreen.astro @@ -2,6 +2,7 @@ import '@astrobook/types' import config from 'virtual:astrobook/global-config.mjs' +import Icon from './icon.astro' import SidebarButton from './sidebar-button.astro' import { buildPath } from './build-path' @@ -16,7 +17,7 @@ interface Props { href={buildPath(config.storyBase, Astro.props.story)} title="Go full screen" > - + ) : null } diff --git a/packages/ui/src/components/sidebar-button-search.astro b/packages/ui/src/components/sidebar-button-search.astro index 9930f329..8d16140e 100644 --- a/packages/ui/src/components/sidebar-button-search.astro +++ b/packages/ui/src/components/sidebar-button-search.astro @@ -1,7 +1,8 @@ --- +import Icon from './icon.astro' import SidebarButton from './sidebar-button.astro' --- - + diff --git a/packages/ui/src/components/sidebar-button-theme.astro b/packages/ui/src/components/sidebar-button-theme.astro index 873fb7ef..b856470c 100644 --- a/packages/ui/src/components/sidebar-button-theme.astro +++ b/packages/ui/src/components/sidebar-button-theme.astro @@ -3,6 +3,16 @@ import '@astrobook/types' import { Toggle } from 'astro-theme-toggle/components' --- - - + + + + diff --git a/packages/ui/src/components/sidebar-button.astro b/packages/ui/src/components/sidebar-button.astro index 44da3116..9042d3f2 100644 --- a/packages/ui/src/components/sidebar-button.astro +++ b/packages/ui/src/components/sidebar-button.astro @@ -11,9 +11,55 @@ const Element = Astro.props.href ? 'a' : 'button' - {Astro.props.title} + {Astro.props.title} + + diff --git a/packages/ui/src/components/sidebar-resize-handle.astro b/packages/ui/src/components/sidebar-resize-handle.astro index ae2b8ae1..4421e454 100644 --- a/packages/ui/src/components/sidebar-resize-handle.astro +++ b/packages/ui/src/components/sidebar-resize-handle.astro @@ -1,8 +1,20 @@ - - + + +