finish documentation

develop
HerrHase 2 years ago
parent 4a2244ad3f
commit 1f5906f2cc

@ -1,22 +1,25 @@
# Site-O-Mat Webpack Plugin # 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 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 rarley updated 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 hierachical file structure. Luckly i seems like a waste of energy. Why not generate from a hierarchical file structure. Luckily i
i had development a CMS that runs on Markdown File a few years ago as a proof of concept. 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 ## Roadmap
Next will be, Next will be,
* Some tests * Some Tests
* Better Filtering in Queries * Filtering for Queries
* Standalone, handle Webpack only as wrapper
Maybe later, Maybe later,
* Integrate Eta.js and LiquidJS * Integrate Eta.js and LiquidJS
* Hooks for handle
## Installation ## Installation
@ -35,6 +38,8 @@ yarn add --dev @helpers/siteomat-webpack-plugin
## Configuration ## Configuration
Basic Usage:
``` ```
const SiteomatWebpackPlugin = require('siteomat-webpack-plugin') const SiteomatWebpackPlugin = require('siteomat-webpack-plugin')
@ -46,7 +51,7 @@ plugins: [
] ]
``` ```
or Add options:
``` ```
plugins: [ plugins: [
@ -67,7 +72,7 @@ plugins: [
## Pages ## 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 The yaml-Section will be parsed as an Object and available in the Templates. The
part will be parsed as Markdown, but could be empty. second part of the File will be parsed as Markdown, but it could be also empty.
## Nesting ## 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 index.md
about-me.md about-me.md
@ -95,7 +106,7 @@ blog
belly-polaroid-subway.md belly-polaroid-subway.md
``` ```
will be will be,
``` ```
index.html index.html
@ -106,12 +117,34 @@ blog/belly-polaroid-subway.html
## Blocks ## 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.
"_blocks" in a Directory, ```
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
Queries can be used in Templates to get
### Pages ### Pages
Basic Usage: Basic Usage:
@ -128,4 +161,42 @@ or with options,
| deep | {Integer} | -1 | Deep of Recursive | | deep | {Integer} | -1 | Deep of Recursive |
| orderBy | {Array} | null | Name of field sorting, a "-" in front of the. Nested fields are also possible. | | 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).
```
<script src="{{ asset('js/app.js') }}"></script>
```
#### 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 }) %}
```

@ -38,7 +38,7 @@ class Page {
// fields merge by default values // fields merge by default values
this._fields = merge({ this._fields = merge({
view: 'page', view: 'page.njk',
meta: { meta: {
robots: 'index' robots: 'index'
} }

Loading…
Cancel
Save