🚀 Astro — Base document enclosure
Provide sensible defaults for HTML base document.
The goal is to reduce boilerplate when using multiple layouts in Astro projects.
📦 Installation
pnpm i astro-base-document🛠 Usage
In your layout component, for example ./src/layouts/Default.astro:
---
import { Document, Body } from 'astro-base-document';
// ...
---
<!-- All properties are optional -->
<Document
id="test-base-rootDoc"
data-theme="default"
lang="en"
class:list={[`mode-${import.meta.env.MODE}`, 'my-class-html']}
>
<Fragment slot="head">
<!-- Things you can inject in `HEAD` -->
<style is:inline>
.some-class {
color: red;
}
</style>
</Fragment>
<Body slot="body" id="my-id" class:list={['my-class-body']}>
<!-- Things you can inject in `BODY` -->
<nav>My navbar</nav>
<!-- Your page content slot -->
<slot />
</Body>
</Document>🎉 Result
<!DOCTYPE html>
<html lang="es" class="some-class doby-doba js" id="the-id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
// CRITICAL
// Add `js` class to `HTML` tag if JavaScript is enabled
(() => {
const root = document.documentElement;
root.classList.add('js');
})();
</script>
<style is:inline>
.some-class {
color: red;
}
</style>
</head>
<body class="other-class dabadi-dabada" id="much-id">
<nav>My navbar</nav>
<!-- Page content slot -->
<div>My page content</div>
</body>
</html>The js class is added to HTML tag, critically.
That way, you can handle CSS for users with or without JS enabled
with .js & / :not(.js) & SCSS selectors.
💈 Interface
/// <reference types="astro/astro-jsx" />
export interface Props extends astroHTML.JSX.HTMLAttributes {
/**
* **Default**: `'en'`
* */
lang?: string;
/**
* Provides early JS detection for further CSS use
* by adding `js` class critically to HTML element.
*
* **Default**: `true`
* */
jsEnabledClass?: boolean;
/**
* **Default**: `null`
* */
redirectTo?: string | null;
}LIVE DEMO 🎭 DOCUMENTATION WEBSITE ⎋
Other projects:
- astro-content: A text based, structured content manager, for edition and consumption.
- remark-lint-frontmatter-schema: Validate your Markdown frontmatter data against a JSON schema.
- retext-case-police: Check popular names casing. Example: ⚠️
github→ ✅GitHub. - remark-embed: A
remarkplugin for embedding remote / local Markdown or code snippets.