Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ereminnf/nunjucks-static
Nunjucks loader for webpack. Static site generator using nunjucks
https://github.com/ereminnf/nunjucks-static
nunjucks nunjucks-loader static-site-generation webpack webpack-loader
Last synced: 2 months ago
JSON representation
Nunjucks loader for webpack. Static site generator using nunjucks
- Host: GitHub
- URL: https://github.com/ereminnf/nunjucks-static
- Owner: ereminnf
- License: mit
- Created: 2020-08-24T17:00:25.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-13T17:33:58.000Z (about 2 years ago)
- Last Synced: 2024-11-14T00:50:01.658Z (2 months ago)
- Topics: nunjucks, nunjucks-loader, static-site-generation, webpack, webpack-loader
- Language: TypeScript
- Homepage: https://github.com/ereminnf/nunjucks-static-starter
- Size: 1.24 MB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[npm-url]: https://www.npmjs.com/package/nunjucks-static
[npm-image]: https://img.shields.io/npm/v/nunjucks-static?color=blue
[logo-url]: https://github.com/ereminnf/nunjucks-static
[logo-image]: https://i.ibb.co/ZLJQnqP/nunjucks-static.webp
[size-image]: https://img.shields.io/npm/dm/nunjucks-static.svg
[size-url]: https://www.npmjs.com/package/nunjucks-static
# Nunjucks static
[![NPM version][npm-image]][npm-url] [![NPM size][size-image]][size-url]
This package adds nunjucks support for webpack as an HTML templating engine. It also supports the development of a multi-page site with nested pages with static html generation.
Inside nunjucks templates, a "bundle" variable will be available, which will contain the entry files of the build.
In the "data" property in the getNunjucksStaticPlugins function, you can pass any variables in the object view, where the key is the name of the variable that will be available in the nunjucks templates.
- Webpack support: only 5+
- New 4+ version tested on node 16 version
## Install
```js
npm i --save-dev nunjucks-static
```
## Usage
### Custom webpack.config.js
```js
const { getNunjucksStaticPlugins } = require('nunjucks-static')
const path = require('path')
const resolvePath = (...pathResolve) => {
return path.join(process.cwd(), ...pathResolve)
}
const paths = {
src: resolvePath('src'),
build: resolvePath('build'),
templates: resolvePath('templates'),
pages: resolvePath('templates/pages'),
output: resolvePath('build/html'),
}
// Add nunjucks-static loader and plugin to webpack config
module.exports = {
// ...
entry: {
main: resolvePath(paths.src, 'pages/main'),
about: resolvePath(paths.src, 'pages/about'),
error: resolvePath(paths.src, 'pages/error'),
},
output: {
path: paths.build,
},
module: {
rules: [
{
test: /\.(html|njk|nunjucks)$/,
exclude: [/node_modules/],
use: [
'html-loader',
{
loader: 'nunjucks-static',
options: {
path: paths.templates,
},
},
],
},
],
},
plugins: [
...getNunjucksStaticPlugins({
pagesPath: paths.pages,
templatePath: paths.templates,
outputPath: paths.output,
data: {
title: 'Nunjucks-static',
},
filters: {
shorten: function (value, count) {
return value.slice(0, count || 5)
},
},
}),
],
devServer: {
// ...
historyApiFallback: {
rewrites: [
{
from: /./,
to: `/error/index.html`,
},
],
disableDotRule: true,
},
},
}
```
### Project structure example
```
root
├── ...
├── templates/
│ ├── components/
│ │ ├── header/
│ │ │ └── index.njk
│ │ └── footer/
│ │ └── index.njk
│ ├── pages/
│ │ ├── main/
│ │ │ └── index.njk
│ │ ├── about/
│ │ │ ├── pages/
│ │ │ │ └── us/
│ │ │ │ └── index.njk
│ │ │ └── index.njk
│ │ └── error/
│ │ └── index.njk
│ └── layout.njk
└── ...
```
### layout
```twig
{{ title }}
{% block css %}
{% for name, item in bundle.css %}
{% endfor %}
{% endblock %}
{% include "components/header/index.njk" %}
{% block content %}{% endblock %}
{% include "components/footer/index.njk" %}
{% block js %}
{% for name, item in bundle.js %}
{% endfor %}
{% endblock %}
```
### Page
```twig
{% extends "layout.njk" %}
{% block content %}
Page main
{{ foo | shorten(3) }}
bundles:
{{ bundles | dump | safe }}
{% endblock %}
{% block css %}
{% endblock %}
{% block js %}
{% endblock %}
```
```twig
{% extends "layout.njk" %}
{% block content %}
Page about
{% endblock %}
{% block css %}
{% endblock %}
{% block js %}
{% endblock %}
```
```twig
{% extends "layout.njk" %}
{% block content %}
Page error
{% endblock %}
{% block css %}
{% endblock %}
{% block js %}
{% endblock %}
````