zouMacros

Nunjucks macros to be imported in other projects, made for Zou!JS.

Install

From NPM

npm i zoumacros --save-dev

Modules

...Obviously just a beginning, to start the collection.

CDN Loader

It replace the call to the macro with the CDN links of the package. Path depends on the layout file calling it. When it comes to CSS frameworks, that's an easy quick way to prototype with and discover, yet installing the full SASS version when available a more powerfull way.

In the head section of something like src/layouts/base.nkj:

{% import '../../node_modules/zoumacros/lib/cdn.njk' as cdn; %}

{{ cdn.pkg('alpinejs') }}

...and have fun.

Available Packages

To kick-off the list, we have:

CSS

• chota
• bulma
• bonsai
• bootstrap
• purecss
• openprops
• openprops-normalize
• openprops-buttons
• openprops-masks
• openprops-corners

Javascript

• alpinejs
• pocketbase
• hyperscript
• htmx

For SCSS, Tailwind, TS... just go Zou!

Embed YouTube Video

It replace the shortcode with a responsive, container's full width iframe with the video corresponding to the provided ID.

Anywhere in the template, generally on top:

{% import '../../node_modules/zoumacros/lib/embed.njk' as embed; %}

In the place where you want to place the video:

{{ embed.yt('6-MlH1t8t9I') }}

Changelog

1.0.2: Hyperscript and htmX added to the CDN-loader marcro.

1.1.2: CutestrapCSS replaced by Chota in CDN-loader, as it wasn't an official CDN.

1.2.0: PureCSS & OpenProps familly added in CDN-loader

1.3.0: Initiate a new Macro (embed) with YouTube videos.