feat: add body class to html component

y-nk · Sep 21, 2023 · 711b978 · 711b978
1 parent bea0d3b
commit 711b978
Show file tree

Hide file tree

Showing 3 changed files with 2,468 additions and 10 deletions.
diff --git a/astro-components/package.json b/astro-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@y_nk/astro-components",
   "type": "module",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A set of generic components used to kickstart a project",
   "homepage": "https://github.com/y-nk/nonorepo/tree/main/astro-components",
   "keywords": [
@@ -25,5 +25,7 @@
     "remark-rehype": "^10.1.0",
     "unified": "^10.1.2"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "astro": "^3.1.1"
+  }
 }
diff --git a/astro-components/src/components/Html.astro b/astro-components/src/components/Html.astro
@@ -1,7 +1,11 @@
 ---
+import type { AstroBuiltinAttributes } from 'astro'
+
 import DevMode from './debug/DevMode.astro'
 
 export type Props = {
+  class?: string
+  ['class:list']?: AstroBuiltinAttributes['class:list']
   lang?: string
   favicon?: string
   links?: Record<string, string>[]
@@ -10,6 +14,8 @@ export type Props = {
 }
 
 const {
+  class: className,
+  ['class:list']: classList,
   lang = 'en',
   favicon = '/favicon.svg',
   links = [],
@@ -51,7 +57,7 @@ const baseUrl = SITE ? new URL(BASE_URL ?? '', SITE) : null
     </noscript>
   </head>
 
-  <body>
+  <body class:list={[className, classList]}>
     {import.meta.env.DEV && <DevMode />}
 
     <slot name="body">