@helpers/siteomat-webpack-plugin (0.4.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.4.0
"@helpers/siteomat-webpack-plugin": "0.4.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.

Default type for Pages is html.

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 }) %}

Json

Results from PageQuery can also be created as json-File. The can use with a
simple API https://gitea.node001.net/HerrHase/siteomat-api. Create a
File "json.yml" and add options.

Basic Usage:

posts:
    orderBy:
        - '-date_published'
    filter:
        view:
            _eq: 'post.njk'

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

Development Dependencies

ID Version
chai ^4.3.7
mocha ^10.2.0
Details
npm
2 years ago
27
Björn Hase
80 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