nebula-atoms
v2.2.17
Published
Contains re-usable Astro layouts, components & components' helpers (extendHtml(), parsers ...) for Nebula. Nebula is an integration of Notion in Astro static websites, provided with a minimalist, user-friendly, dashboard.
Readme
Nebula atoms
nebula-atoms is part of the Nebula suite.
Nebula connects Astro SSG to Notion API & GitHub Actions$$ to automatically create static websites.Nebula Atoms provides a set of templates and components ready to integrate and display Notion content.
Table of contents
Quick start
First, install package inside a site project from npm registry :
npm i nebula-atomsFeatures
Templates
Layout
Generic layout with <slot> for <body> content, <slot name="navbar"> & <slot name="footbar"> (the left side menu, usually dedicated to sitemap).
Helpers
extendHtml()
extendHtml(
html: string,
specialBlocks?: { [key: string]: (...args: string[]) => string }
)Add support for :
- Thumbnail : if image is page's first block, put it before h1,
- Button-like links : a block containing only a link, get the "btn" class,
- Button-like links group : multiple button-like links (block) are grouped in a single "btn-list" div
- Special blocks : replace block(s) containg
{#key ...args}(single line) or{#key}<></>...{#key}(multiple line) text with string the transformer returned.
Automatically add : img lazy loading
stringToUrl(string): string
Transform a string to an url-ready one.
dateToString(date: Date): 'dd-mm-yyyy'
Core SCSS
Some rules that can be applied on every sites.
Use it like that : @use "../node_modules/nebula-atoms-astro/styles/core";
Extend the package
Local development
Install nebula-atoms in local projet using :
npm uninstall nebula-atoms
npm i ../nebula-atomsDon't forget to run the dev routine build with the following command :
npm run devBuild & publish
- Increase
package.jsonversion prop accordingly. - Run the following :
npm run build
npm publish