Live:

https://klimakrise-schnelldurchlauf.mandrasch.eu/

State: experimental

Minimal template for OER one pagers based on markdown content. The template uses some minification, privacy-friendly embeds and other goodies such as a visual scroll progress bar, but keeps the main goal of simplicity in mind. Based on startbootstrap/clean-blog (MIT license).

VIDEO: Demonstration of development process: https://www.youtube.com/watch?v=Ju8Sxcw6hkE

Features:

• local dev environment with gulp (auto-refresh in browser, scss, js minification, npm packages)
• convert markdown to html with gulp-markdown
• "subpage" content via bootstrap modal (therefore no need of complex URL routing or something like that), e.g. Imprint and Privacy Page

1. Install nodejs
2. Open a terminal
3. Check if node is installed with node -v and check npm -v
4. Clone this repository to your local harddrive
5. Change the directory to the cloned local repository
6. Run npm install (this will install dependencies)
7. Run npm start run for dev live preview (this generates build/ dir and watches for changes in scss, markdown files, etc.)
8. To create production build use npx gulp
9. For deployment checkout GitHub Actions gh-pages actions-gh-pages / ftpdeploy, see .github/ directory in this repo

2DO:

• add GithubAction for gulp, otherwise local gulp command + push is necessary and changes can not only be done via Github Editor e.g.

Third party libraries:

• 2ClickIframePrivacy

• JS task only minifies clean-blog.js to clean-blog.min.js and adds header
• Do not edit /css directly, use /scss directory (changes will be overriden by gulp)

1. add to /js
2. add as ignore line in gulpfile if it should not be minified (files with .min.js will be automatically ignored)
3. include it in html

Nice way: Use .js file in editor, include .min.js in html, run 'npm start run' while developing (this will automatically minify your js if you change something and reload the browser)

Use iframes with following attributes (see https://github.com/01-Scripts/2Click-Iframe-Privacy for more information)

src="" data-src="https://www.youtube-nocookie.com/embed/DdKhKxShJf0" data-2click-type="video"