nebula-atoms
v2.1.0
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.
Downloads
42
Readme
Nebula atoms
nebula-atoms is part of the Nebula suite.
Nebula connects Notion API and GatsbyJS 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">.
Helpers
extendHtml(html, customElements?: [key: string, html: 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
- Custom elements : replace block containg only
{key}text with given html string.
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