@helpers/siteomat-webpack-plugin (0.2.0)

Published 2 years ago by HerrHase

Installation

@helpers:registry=https://git.node001.net/api/packages/HerrHase/npm/
npm install @helpers/siteomat-webpack-plugin@0.2.0
"@helpers/siteomat-webpack-plugin": "0.2.0"

About this package

Site-O-Mat Webpack Plugin

A Webpack Plugin for generating a Website as Html-Files from a Markdown-File Structure.

Why? The Main reason i had to update some Websites, but realize there were no benefit
to use a Full CMS or Headless CMS like Directus. Rendering the same pages that a rarely updated
seems like a waste of energy. Why not generate from a hierarchical file structure. Luckily i
i had development a CMS, a few years ago, that runs on Markdown Files it had been never
finished, it was a proof of concept.

Roadmap

Next will be,

  • Some Tests
  • Filtering for Queries
  • Standalone, handle Webpack only as wrapper

Maybe later,

  • Integrate Eta.js and LiquidJS
  • Hooks for handle generic content

Installation

Setup this registry in your project .npmrc file:

@helpers:registry=https://gitea.node001.net/api/packages/HerrHase/npm/

Install with npm or yarn

npm i --save-dev @helpers/siteomat-webpack-plugin
yarn add --dev @helpers/siteomat-webpack-plugin

Configuration

Basic Usage:

const SiteomatWebpackPlugin = require('siteomat-webpack-plugin')

plugins: [
    new SiteomatWebpackPlugin(
        './resources/site',
        './resources/views'
    )
]

Add options:

plugins: [
    new SiteomatWebpackPlugin(
        './resources/site',
        './resources/views',
        {
            <options>
        }
    )
]
Name Type Default Description
destination {String} null If not set, it will use the public path
htmlMinify {Boolean} true Minify Html and remove all Whitespace

Pages

Pages are Markdown-Files, they are separates in two parts. First part is a yaml-Section,

---
title: "health goth DIY tattooed"
view: "home.njk"
meta:
    description: "La"
media:
    teaser:
        src: "_images/test.jpeg"
        alt: "cold-pressed"
---

The yaml-Section will be parsed as an Object and available in the Templates. The
second part of the File will be parsed as Markdown, but it could be also empty.

Nesting

A Page can be a single Markdown-File, or a Directory with a index-File inside.
The Name of a file or a directory will the name of the html-File. To create Sub-pages,
create Sub-directories.

This Structure,

index.md
about-me.md
blog
└ index.md
  belly-polaroid-subway.md

will be,

index.html
about-me.html
blog.html
blog/belly-polaroid-subway.html

Blocks

Each Page can have Blocks. Blocks are like Pages, but they are only accessible
for a single Page. To add Blocks to a page, add a "_blocks"-Directory
to the Directory of the Page.

Markdown-Files in a "_blocks"-Directory will be automatic accessible for a Page. The yaml-Section is Optional.

recipes
└ index.md
  _blocks
  └ hero-1.md
    hero-2.md
    hero-3.md

Blocks will be Grouped by there name, and sorted by the number at the end. The "hero"-Files
can be used like this,

{% hero in page.blocks.hero %}
    {{ hero.content }}
{% endFor %}

Queries

Queries can be used in Templates to get Pages.

Pages

Basic Usage:

pageQuery.find()

or with options,

Name Type Default Description
parent {String} / Directory for start query
deep {Integer} -1 Deep of Recursive
orderBy {Array} null Name of field sorting, a "-" in front of the. Nested fields are also possible.
limit {Integer} null Limit results
filter {Object} null Filtering results by Fields in yaml

Filter

Basic Usage:

{
    <fieldname>: {
        <operator>: <value>
    }
}
Name Description
_eq Equal Value

Sitemap

Sitemap will be generating by Pages. Pages will be only add to Sitemap, if the have meta-robots is set
to "index". Pages default is "index".

Templates

At this Time only https://mozilla.github.io/nunjucks/ is used for Templating.

Nunjunks

Functions

asset(path)

This function handle manifest-File from https://laravel-mix.com/.

<script src="{{ asset('js/app.js') }}"></script>

Filters

resize

The Filter is using https://github.com/lovell/sharp, for crop, resize and
optimize Images. The Filter needs a relative Path in the File Structure.

Basic Usage:

{% page.teaser.src | resize({ 'width': '300' }) %}

Add options:

{% page.teaser.src | resize({ 'width': '300' }, { sigma: 2 }) %}

Dependencies

Dependencies

ID Version
assign-deep ^1.0.1
crypto ^1.0.1
dayjs ^1.11.6
fast-xml-parser ^4.0.11
html-minifier ^4.0.0
js-yaml ^4.1.0
lodash.merge ^4.6.2
lodash.orderby ^4.6.0
marked ^4.1.1
mkdirp ^1.0.4
nunjucks ^3.2.3
sharp ^0.31.1
slugify ^1.6.5
yaml ^2.1.3
Details
npm
2 years ago
35
Björn Hase
78 KiB
Assets (1)
Versions (5) View all
0.5.0 on 2023-01-15
0.4.0 on 2023-01-13
0.3.0 on 2023-01-11
0.2.0 on 2023-01-01
0.1.0 on 2022-12-04