|
|
|
@ -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.
|
|
|
|
|
|
|
|
|
|
"_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 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).
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
<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 }) %}
|
|
|
|
|
```
|