๐Ÿš€ย ย Astro โ€” Base document enclosure


Provide sensible defaults for HTML base document. The goal is to reduce boilerplate when using multiple layouts in Astro projects.

Keywords:

  • astro
  • astro-component
  • boilerplate
  • app
  • base
  • wrapper
  • javascript
  • html
  • document

๐Ÿš€ย ย Astro โ€” Base document enclosure

NPM Downloads ISC License PRs Welcome

Astro TypeScript Prettier EditorConfig ESLint

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 {
  /**
   * 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;
}

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.2 (2022-10-17)

Bug Fixes

  • remove package prefix, simplify import method (73bd31b)

0.13.7 (2022-09-22)

Note: Version bump only for package @julian_cataldo/astro-base

0.13.6 (2022-09-06)

Note: Version bump only for package @julian_cataldo/astro-base

0.13.5 (2022-08-20)

Note: Version bump only for package @julian_cataldo/astro-base

0.13.4 (2022-07-31)

Note: Version bump only for package @julian_cataldo/astro-base

0.13.3 (2022-07-30)

Bug Fixes

  • compiler bug workaround, // before export (23d6614)
  • remove internal slot prop from extraAttrs (9069676)
  • soft redirection, /app to /component (55b9cc6)

0.13.2 (2022-07-24)

Note: Version bump only for package @julian_cataldo/astro-base

0.13.1 (2022-07-24)

Note: Version bump only for package @julian_cataldo/astro-base

0.13.0 (2022-07-18)

Features

  • add redirection mechanism (21f8856)
  • ts properties extractor for docs (9a8e65e)

0.12.0 (2022-06-28)

Features

  • better defaults for app base (ba9ee93)
  • better defaults properties (cc55aec)

0.11.5 (2022-06-26)

Note: Version bump only for package @julian_cataldo/astro-base

0.11.4 (2022-06-25)

Note: Version bump only for package @julian_cataldo/astro-base

0.11.3 (2022-06-22)

Note: Version bump only for package @julian_cataldo/astro-base

0.11.2 (2022-06-22)

Note: Version bump only for package @julian_cataldo/astro-base

0.11.1 (2022-06-21)

Note: Version bump only for package @julian_cataldo/astro-base

0.11.0 (2022-06-20)

Features

  • option for js detection (929faca)

0.10.4 (2022-06-20)

Note: Version bump only for package @julian_cataldo/astro-base

0.10.3 (2022-06-19)

Note: Version bump only for package @julian_cataldo/astro-base

0.10.2 (2022-06-19)

Note: Version bump only for package @julian_cataldo/astro-base

0.10.1 (2022-06-19)

Note: Version bump only for package @julian_cataldo/astro-base

0.10.0 (2022-06-19)

Features

  • init app base component (4b5da37)
...

Licenses

Package
Author
License
URL

โš ๏ธ  Having an issue? / ๐Ÿ—ฃ   Wanna share feedback or suggestion?

โœ๏ธ  Open an Issue or a Pull Request   on GitHub -or-   Contact me   on my Website.