From 1f5906f2cce4cb2f70a7b917bc1334046a8c0d9e Mon Sep 17 00:00:00 2001 From: HerrHase Date: Sun, 4 Dec 2022 23:21:57 +0100 Subject: [PATCH] finish documentation --- README.md | 97 +++++++++++++++++++++++++++++++++++++------ src/factories/page.js | 2 +- 2 files changed, 85 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index a2adb3a..a04dd64 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,25 @@ # Site-O-Mat Webpack Plugin -A Webpack Plugin for generating a Website as Html-Files from a Markdown File Structure. +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 realise there were no benfit -to use a Full CMS or Headless CMS like Directus. Rendering the same pages that a rarley updated -seems like a waste of energy. Why not generate from a hierachical file structure. Luckly i -i had development a CMS that runs on Markdown File a few years ago as a proof of concept. +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 -* Better Filtering in Queries +* Some Tests +* Filtering for Queries +* Standalone, handle Webpack only as wrapper Maybe later, * Integrate Eta.js and LiquidJS +* Hooks for handle ## Installation @@ -35,6 +38,8 @@ yarn add --dev @helpers/siteomat-webpack-plugin ## Configuration +Basic Usage: + ``` const SiteomatWebpackPlugin = require('siteomat-webpack-plugin') @@ -46,7 +51,7 @@ plugins: [ ] ``` -or +Add options: ``` plugins: [ @@ -67,7 +72,7 @@ plugins: [ ## Pages -Pages are Markdown-Files, they are seperates in two parts. First part is a yaml-Section, +Pages are Markdown-Files, they are separates in two parts. First part is a yaml-Section, ``` --- @@ -82,11 +87,17 @@ media: --- ``` -These yaml will be parsed as a Object and available in Templates. "view" is required. Second -part will be parsed as Markdown, but could be empty. +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 @@ -95,7 +106,7 @@ blog belly-polaroid-subway.md ``` -will be +will be, ``` index.html @@ -106,12 +117,34 @@ 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, -"_blocks" in a Directory, +``` +{% hero in page.blocks.hero %} + {{ hero.content }} +{% endFor %} +``` ## Queries +Queries can be used in Templates to get + ### Pages Basic Usage: @@ -128,4 +161,42 @@ or with options, | deep | {Integer} | -1 | Deep of Recursive | | orderBy | {Array} | null | Name of field sorting, a "-" in front of the. Nested fields are also possible. | +## 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/](Nunjunks) is used for Templating. + +### Nunjunks +#### Functions + +##### asset(path) + +This function handle manifest-File from [https://laravel-mix.com/](Laravel-Mix). + +``` + +``` + +#### Filters + +##### resize + +The Filter is using [https://github.com/lovell/sharp](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 }) %} +``` \ No newline at end of file diff --git a/src/factories/page.js b/src/factories/page.js index b5f3209..94271a0 100644 --- a/src/factories/page.js +++ b/src/factories/page.js @@ -38,7 +38,7 @@ class Page { // fields merge by default values this._fields = merge({ - view: 'page', + view: 'page.njk', meta: { robots: 'index' }