@moreonion/foundist 2.1.3 → 3.0.0

package/.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+    // the stylelint extension should do the validation
+    "css.validate": false,
+    "less.validate": false,
+    "scss.validate": false,
+    "[scss]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[javascript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[html]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
+  }
+}

package/README.md

@@ -6,10 +6,7 @@ Foundation based default theme for Impact Stack landing pages.
 
 ### As assets
 
-Compiled assets can be used directly:
-
-- A build of the `master` branch is available at http://assets.more-onion.at/foundist/v1 for testing.
-- A build of `v1` is available at https://assets.more-onion.com/foundist/v1/ for live sites.
+Compiled assets can be used directly.
 
 ### As module
 
@@ -24,7 +21,7 @@ the desired result)!
 ## Development
 
 The setup should give you a quite modern JS/SCSS-environment:
-- Parcel (with Babel, SCSS, browserlist, PostCSS)
+- Vite (with SCSS, browserlist, PostCSS)
 - Linting (`stylelint`, `eslint`)
 - Prettifying (`prettify`)
 - Pre-commit hooks for `.scss` and `.js` files
@@ -51,7 +48,7 @@ yarn build
 
 To serve the contents of the `dist/` folder (e.g. after a `build`)
 ```
-yarn http
+yarn preview
 ```
 
 ### HTML
@@ -60,10 +57,10 @@ The module provides some example HTML to make styling easier:
 
 - The files in the `template` folder represent the general page layout(s) that
   may be different for each derived theme.
-- The extension of template <blocks> make up the content for an individual page.
+- The extension of template `{% blocks %}` make up the content for an individual page.
 - The `include` folder offers predefined elements that would be generated by a
   CMS, e.g. form elements and social proof widgets.
-- The path of the main css and js file can be configured in `.posthtmlrc`
+- The path of the main css and js file can be configured in `_globals.html`
   (relative to the `html` folder).
 
 ### Pre-commit hooks
@@ -85,4 +82,3 @@ You might want to install the following VS Code plugins (or re-enable the build
 - Prettier - Code formatter `esbenp.prettier-vscode` <https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode>
 - ESLint `dbaeumer.vscode-eslint` <https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint>
 - stylelint `shinnn.stylelint` <https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint>
-- LintHTML `kamikillerto.vscode-linthtml` <https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-linthtml>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moreonion/foundist",
-  "version": "2.1.3",
+  "version": "3.0.0",
   "description": "Foundation based default theme for Impact Stack landing pages.",
   "author": "More Onion <kontakt@more-onion.at>",
   "license": "MIT",
@@ -13,46 +13,21 @@
   "files": [
     "src/*"
   ],
-  "js": "dist/main.js",
-  "css": "dist/main.css",
-  "targets": {
-    "main": false,
-    "js": {
-      "sourceMap": false
-    },
-    "css": {
-      "publicUrl": ".",
-      "sourceMap": false
-    }
-  },
   "scripts": {
-    "dev": "parcel serve --no-cache src/html/index.html",
-    "prod:css": "parcel build --target css --no-content-hash src/scss/main.scss",
-    "prod:js": "parcel build --target js --no-content-hash src/js/foundist.js",
-    "build": "yarn run prod:css && yarn run prod:js",
-    "http": "http-server --cors -d -p 1234 ./dist",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
     "lint:css": "stylelint src/scss && prettier --check 'src/scss/**/*.scss'",
     "lint:js": "eslint src",
     "lint": "yarn run lint:css && yarn run lint:js",
-    "lint:html": "linthtml src/html/**/*.html ",
     "fix:css": "stylelint --fix src/scss && prettier --write 'src/scss/**/*.scss'",
     "fix:js": "eslint --fix src",
     "fix": "yarn run fix:css && yarn run fix:js",
     "prepare": "husky install"
   },
-  "devDependencies": {
-    "@linthtml/linthtml": "^0.8.0"
-  },
   "dependencies": {
-    "@moreonion/foundation-base": "2.1.3",
-    "http-server": "^14.1.0",
-    "posthtml": "^0.16.5",
-    "posthtml-expressions": "^1.9.0",
-    "posthtml-extend": "0.6.0",
-    "posthtml-include": "^1.7.2"
-  },
-  "resolutions": {
-    "@parcel/transformer-css": "2.1.1"
+    "@moreonion/foundation-base": "^3.0.0",
+    "vite-plugin-nunjucks": "^0.1.10"
   },
   "lint-staged": {
     "*.scss": [

package/src/html/basic-action-page-cover-1col.html

@@ -1,48 +1,48 @@
-<extends src="templates/action-page-cover-1col.html">
+{% extends "src/html/templates/action-page-cover-1col.html" %}
 
-  <block name="page-title">Take action now!</block>
+{% set layout = "cover-1col" %}
 
-  <block name="banner">
+{% block page_title %}Take action now!{% endblock %}
+
+{% block background %}
     <img src="http://placekitten.com/1280/588" alt="test image with cats" crossorigin="">
-  </block>
+{% endblock %}
 
-  <block name="top">
+{% block top %}
     <p>Reward the chosen human with a slow blink. Scratch stand in front of the computer screen run off table persian cat jump eat fish. Roll on the floor purring your whiskers off cat dog hate mouse eat string barf pillow no baths hate everything.</p>
-  </block>
+{% endblock %}
 
-  <block name="form-intro">
+{% block form_intro %}
     <h2>Signup now!</h2>
     <p>Abyssinian tiger american shorthair british shorthair puma and maine coon.</p>
-  </block>
+{% endblock %}
 
-  <block name="progress-bar">
-    <include src="pgbar.html"></include>
-  </block>
+{% block progress_bar %}
+    {% include "src/html/includes/pgbar.html" %}
+{% endblock %}
 
-  <block name="form">
-    <include src="basic-form.html"></include>
-  </block>
+{% block form %}
+    {% include "src/html/includes/basic-form.html" %}
+{% endblock %}
 
-  <block name="recent-supporters">
-    <include src="recent-supporters.html"></include>
-  </block>
+{% block recent_supporters %}
+    {% include "src/html/includes/recent-supporters.html" %}
+{% endblock %}
 
-  <block name="content-top">
+{% block content_top %}
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
+        <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
     </div>
-  </block>
+{% endblock %}
 
-  <block name="content">
+{% block content %}
     <h2>Cougar British shorthair turkish angora</h2>
     <p>Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? Get my claw stuck in the dog's ear. Lick plastic bags ask to go outside and ask to come inside and ask to go outside and ask to come inside hell is other people, ignore the squirrels, you'll never catch them anyway or walk on car leaving trail of paw prints on hood and windshield.</p>
     <p>A very wise cat once said:</p>
     <blockquote><p>Always ensure to lay down in such a manner that tail can lightly brush human's nose sleep in the bathroom sink. Scratch catasstrophe and lick the curtain just to be annoying so your pillow is now my pet bed nya nya nyan so run up and down stairs curl up and sleep on the freshly laundered towels.</p></blockquote>
     <p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
-  </block>
-
-  <block name="footer">
-    <include src="menu.html"></include>
-  </block>
+{% endblock %}
 
-</extends>
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

package/src/html/basic-action-page-cover-2col-reversed.html

@@ -1,48 +1,48 @@
-<extends src="templates/action-page-cover-2col-reversed.html">
+{% extends "src/html/templates/action-page-reversed.html" %}
 
-  <block name="page-title">Take action now!</block>
+{% set layout = "cover-2col" %}
 
-  <block name="banner">
+{% block page_title %}Take action now!{% endblock %}
+
+{% block background %}
     <img src="http://placekitten.com/1600/1000" alt="test image with cats" crossorigin="">
-  </block>
+{% endblock %}
 
-  <block name="top">
+{% block top %}
     <p>Reward the chosen human with a slow blink. Scratch stand in front of the computer screen run off table persian cat jump eat fish. Roll on the floor purring your whiskers off cat dog hate mouse eat string barf pillow no baths hate everything.</p>
-  </block>
+{% endblock %}
 
-  <block name="form-intro">
+{% block form_intro %}
     <h2>Signup now!</h2>
     <p>Abyssinian tiger american shorthair british shorthair puma and maine coon.</p>
-  </block>
+{% endblock %}
 
-  <block name="progress-bar">
-    <include src="pgbar.html"></include>
-  </block>
+{% block progress_bar %}
+    {% include "src/html/includes/pgbar.html" %}
+{% endblock %}
 
-  <block name="form">
-    <include src="basic-form.html"></include>
-  </block>
+{% block form %}
+    {% include "src/html/includes/basic-form.html" %}
+{% endblock %}
 
-  <block name="recent-supporters">
-    <include src="recent-supporters.html"></include>
-  </block>
+{% block recent_supporters %}
+    {% include "src/html/includes/recent-supporters.html" %}
+{% endblock %}
 
-  <block name="content-top">
+{% block content_top %}
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
+        <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
     </div>
-  </block>
+{% endblock %}
 
-  <block name="content">
+{% block content %}
     <h2>Cougar British shorthair turkish angora</h2>
     <p>Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? Get my claw stuck in the dog's ear. Lick plastic bags ask to go outside and ask to come inside and ask to go outside and ask to come inside hell is other people, ignore the squirrels, you'll never catch them anyway or walk on car leaving trail of paw prints on hood and windshield.</p>
     <p>A very wise cat once said:</p>
     <blockquote><p>Always ensure to lay down in such a manner that tail can lightly brush human's nose sleep in the bathroom sink. Scratch catasstrophe and lick the curtain just to be annoying so your pillow is now my pet bed nya nya nyan so run up and down stairs curl up and sleep on the freshly laundered towels.</p></blockquote>
     <p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
-  </block>
-
-  <block name="footer">
-    <include src="menu.html"></include>
-  </block>
+{% endblock %}
 
-</extends>
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

package/src/html/basic-action-page-cover-2col.html

@@ -1,48 +1,48 @@
-<extends src="templates/action-page-cover-2col.html">
+{% extends "src/html/templates/action-page.html" %}
 
-  <block name="page-title">Take action now!</block>
+{% set layout = "cover-2col" %}
 
-  <block name="banner">
+{% block page_title %}Take action now!{% endblock %}
+
+{% block background %}
     <img src="http://placekitten.com/1600/1000" alt="test image with cats" crossorigin="">
-  </block>
+{% endblock %}
 
-  <block name="top">
+{% block top %}
     <p>Reward the chosen human with a slow blink. Scratch stand in front of the computer screen run off table persian cat jump eat fish. Roll on the floor purring your whiskers off cat dog hate mouse eat string barf pillow no baths hate everything.</p>
-  </block>
+{% endblock %}
 
-  <block name="form-intro">
+{% block form_intro %}
     <h2>Signup now!</h2>
     <p>Abyssinian tiger american shorthair british shorthair puma and maine coon.</p>
-  </block>
+{% endblock %}
 
-  <block name="progress-bar">
-    <include src="pgbar.html"></include>
-  </block>
+{% block progress_bar %}
+    {% include "src/html/includes/pgbar.html" %}
+{% endblock %}
 
-  <block name="form">
-    <include src="basic-form.html"></include>
-  </block>
+{% block form %}
+    {% include "src/html/includes/basic-form.html" %}
+{% endblock %}
 
-  <block name="recent-supporters">
-    <include src="recent-supporters.html"></include>
-  </block>
+{% block recent_supporters %}
+    {% include "src/html/includes/recent-supporters.html" %}
+{% endblock %}
 
-  <block name="content-top">
+{% block content_top %}
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
+        <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
     </div>
-  </block>
+{% endblock %}
 
-  <block name="content">
+{% block content %}
     <h2>Cougar British shorthair turkish angora</h2>
     <p>Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? Get my claw stuck in the dog's ear. Lick plastic bags ask to go outside and ask to come inside and ask to go outside and ask to come inside hell is other people, ignore the squirrels, you'll never catch them anyway or walk on car leaving trail of paw prints on hood and windshield.</p>
     <p>A very wise cat once said:</p>
     <blockquote><p>Always ensure to lay down in such a manner that tail can lightly brush human's nose sleep in the bathroom sink. Scratch catasstrophe and lick the curtain just to be annoying so your pillow is now my pet bed nya nya nyan so run up and down stairs curl up and sleep on the freshly laundered towels.</p></blockquote>
     <p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
-  </block>
-
-  <block name="footer">
-    <include src="menu.html"></include>
-  </block>
+{% endblock %}
 
-</extends>
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

package/src/html/basic-action-page-cover-banner.html

@@ -1,48 +1,48 @@
-<extends src="templates/action-page-cover-banner.html">
+{% extends "src/html/templates/action-page-cover-banner.html" %}
 
-  <block name="page-title">Take action now!</block>
+{% set layout = "cover-banner" %}
 
-  <block name="banner">
+{% block page_title %}Take action now!{% endblock %}
+
+{% block background %}
     <img src="http://placekitten.com/1280/588" alt="test image with cats" crossorigin="">
-  </block>
+{% endblock %}
 
-  <block name="top">
+{% block top %}
     <p>Reward the chosen human with a slow blink. Scratch stand in front of the computer screen run off table persian cat jump eat fish. Roll on the floor purring your whiskers off cat dog hate mouse eat string barf pillow no baths hate everything.</p>
-  </block>
+{% endblock %}
 
-  <block name="form-intro">
+{% block form_intro %}
     <h2>Signup now!</h2>
     <p>Abyssinian tiger american shorthair british shorthair puma and maine coon.</p>
-  </block>
+{% endblock %}
 
-  <block name="progress-bar">
-    <include src="pgbar.html"></include>
-  </block>
+{% block progress_bar %}
+    {% include "src/html/includes/pgbar.html" %}
+{% endblock %}
 
-  <block name="form">
-    <include src="basic-form.html"></include>
-  </block>
+{% block form %}
+    {% include "src/html/includes/basic-form.html" %}
+{% endblock %}
 
-  <block name="recent-supporters">
-    <include src="recent-supporters.html"></include>
-  </block>
+{% block recent_supporters %}
+    {% include "src/html/includes/recent-supporters.html" %}
+{% endblock %}
 
-  <block name="content-top">
+{% block content_top %}
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
+        <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
     </div>
-  </block>
+{% endblock %}
 
-  <block name="content">
+{% block content %}
     <h2>Cougar British shorthair turkish angora</h2>
     <p>Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? Get my claw stuck in the dog's ear. Lick plastic bags ask to go outside and ask to come inside and ask to go outside and ask to come inside hell is other people, ignore the squirrels, you'll never catch them anyway or walk on car leaving trail of paw prints on hood and windshield.</p>
     <p>A very wise cat once said:</p>
     <blockquote><p>Always ensure to lay down in such a manner that tail can lightly brush human's nose sleep in the bathroom sink. Scratch catasstrophe and lick the curtain just to be annoying so your pillow is now my pet bed nya nya nyan so run up and down stairs curl up and sleep on the freshly laundered towels.</p></blockquote>
     <p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
-  </block>
-
-  <block name="footer">
-    <include src="menu.html"></include>
-  </block>
+{% endblock %}
 
-</extends>
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}

package/src/html/basic-action-page-reversed.html

@@ -1,41 +1,40 @@
-<extends src="templates/action-page-reversed.html">
+{% extends "src/html/templates/action-page-reversed.html" %}
 
-  <block name="page-title">Take action now!</block>
+{% set layout = "default" %}
 
-  <block name="top">
+{% block page_title %}Take action now!{% endblock %}
+
+{% block top %}
     <p>Reward the chosen human with a slow blink. Scratch stand in front of the computer screen run off table persian cat jump eat fish. Roll on the floor purring your whiskers off cat dog hate mouse eat string barf pillow no baths hate everything.</p>
-  </block>
+{% endblock %}
 
-  <block name="form-intro">
+{% block form_intro %}
     <h2>Signup now!</h2>
     <p>Abyssinian tiger american shorthair british shorthair puma and maine coon.</p>
-  </block>
+{% endblock %}
 
-  <block name="progress-bar">
-    <include src="pgbar.html"></include>
-  </block>
+{% block progress_bar %}
+    {% include "src/html/includes/pgbar.html" %}
+{% endblock %}
 
-  <block name="form">
-    <include src="basic-form.html"></include>
-  </block>
+{% block form %}
+    {% include "src/html/includes/basic-form.html" %}
+{% endblock %}
 
-  <block name="recent-supporters">
-    <include src="recent-supporters.html"></include>
-  </block>
+{% block recent_supporters %}
+    {% include "src/html/includes/recent-supporters.html" %}
+{% endblock %}
 
-  <block name="content-top">
+{% block content_top %}
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
+        <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
     </div>
-  </block>
+{% endblock %}
 
-  <block name="content">
+{% block content %}
     <h2>Cougar British shorthair turkish angora</h2>
     <p>Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? Get my claw stuck in the dog's ear. Lick plastic bags ask to go outside and ask to come inside and ask to go outside and ask to come inside hell is other people, ignore the squirrels, you'll never catch them anyway or walk on car leaving trail of paw prints on hood and windshield.</p>
     <p>A very wise cat once said:</p>
     <blockquote><p>Always ensure to lay down in such a manner that tail can lightly brush human's nose sleep in the bathroom sink. Scratch catasstrophe and lick the curtain just to be annoying so your pillow is now my pet bed nya nya nyan so run up and down stairs curl up and sleep on the freshly laundered towels.</p></blockquote>
     <p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
-
-  </block>
-
-</extends>
+{% endblock %}

package/src/html/basic-action-page-with-banner-reversed.html

@@ -1,48 +1,48 @@
-<extends src="templates/action-page-with-banner-reversed.html">
+{% extends "src/html/templates/action-page-reversed.html" %}
 
-  <block name="page-title">Take action now!</block>
+{% set layout = "banner" %}
 
-  <block name="banner">
+{% block page_title %}Take action now!{% endblock %}
+
+{% block banner %}
     <img src="http://placekitten.com/1280/588" alt="test image with cats" crossorigin="">
-  </block>
+{% endblock %}
 
-  <block name="top">
+{% block top %}
     <p>Reward the chosen human with a slow blink. Scratch stand in front of the computer screen run off table persian cat jump eat fish. Roll on the floor purring your whiskers off cat dog hate mouse eat string barf pillow no baths hate everything.</p>
-  </block>
+{% endblock %}
 
-  <block name="form-intro">
+{% block form_intro %}
     <h2>Signup now!</h2>
     <p>Abyssinian tiger american shorthair british shorthair puma and maine coon.</p>
-  </block>
+{% endblock %}
 
-  <block name="progress-bar">
-    <include src="pgbar.html"></include>
-  </block>
+{% block progress_bar %}
+    {% include "src/html/includes/pgbar.html" %}
+{% endblock %}
 
-  <block name="form">
-    <include src="basic-form.html"></include>
-  </block>
+{% block form %}
+    {% include "src/html/includes/basic-form.html" %}
+{% endblock %}
 
-  <block name="recent-supporters">
-    <include src="recent-supporters.html"></include>
-  </block>
+{% block recent_supporters %}
+    {% include "src/html/includes/recent-supporters.html" %}
+{% endblock %}
 
-  <block name="content-top">
+{% block content_top %}
     <div class="media-stretch">
-      <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
+        <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
     </div>
-  </block>
+{% endblock %}
 
-  <block name="content">
+{% block content %}
     <h2>Cougar British shorthair turkish angora</h2>
     <p>Twitch tail in permanent irritation attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? Get my claw stuck in the dog's ear. Lick plastic bags ask to go outside and ask to come inside and ask to go outside and ask to come inside hell is other people, ignore the squirrels, you'll never catch them anyway or walk on car leaving trail of paw prints on hood and windshield.</p>
     <p>A very wise cat once said:</p>
     <blockquote><p>Always ensure to lay down in such a manner that tail can lightly brush human's nose sleep in the bathroom sink. Scratch catasstrophe and lick the curtain just to be annoying so your pillow is now my pet bed nya nya nyan so run up and down stairs curl up and sleep on the freshly laundered towels.</p></blockquote>
     <p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
-  </block>
-
-  <block name="footer">
-    <include src="menu.html"></include>
-  </block>
+{% endblock %}
 
-</extends>
+{% block footer %}
+    {% include "src/html/includes/menu.html" %}
+{% endblock %}