.dockerignore

 node_modules
+public
 npm-debug.log
 Dockerfile
 .dockerignore

.gitlab-ci.yml

@@ -14,9 +14,11 @@ build:
     - npm install
     - npm run build
   after_script:
-    - echo "{\"job_token\":\"$CI_JOB_TOKEN\", \"name\":\"$SITE_NAME\" }" > request.json
+    - TAG=`git describe --tags $(git rev-list --tags --max-count=1)`
+    - echo "{\"name\":\"$SITE_NAME\", \"tag\":\"$TAG\" }" > request.json
     - "curl -H 'Content-Type: application/json' -X POST -d @request.json $WEBHOOK_URL"
   artifacts:
     expire_in: 30 min
     paths:
      - $ARTIFACTS_PATH
+

.nvmrc

+14.5

Dockerfile

-FROM node:13-alpine as build
+FROM node:14.5-alpine as build
 
 RUN mkdir -p /home/node/ui-styleguide/node_modules
 

README.md

 # Pirati UI kit
 
-This repository holds UI styleguide for Czech Pirate Party websites.
+This repository holds UI styleguide for Czech Pirate Party websites. It's
+intention is to made a core framework to be used across all sites and build all
+UI using it. This will ensure better consistency a easier updates.
 
 It is built upon:
 
-- [Patternlab](https://patternlab.io/) is an awesome tool for developing design systems
+- [Patternlab](https://patternlab.io/) is a tool for developing design systems
 - [Tailwind CSS](https://tailwindcss.com/) is a brilliant utility-first CSS framework built on top of PostCSS
 
 ## Getting Started
@@ -17,132 +19,115 @@ These instructions are for getting the project running off a local development e
 
 ### System Requirements
 
-- [Node.js](https://nodejs.org) (v12.14.1 LTS or later recommended)
+- [Node.js](https://nodejs.org) (v14.5.x or later)
 
 ### Install and Run
 
-It's Javascript all the way down so once you have the the system requirements you can run the following commands:
+It's JavaScript all the way down so once you have the the system requirements
+you can run the following commands:
 
 ```
 npm i
 npm run develop
 ```
 
-The `npm` command will install project dependencies and the `npm run develop` command builds the project, sets up a local server for the Patternlab UI and watches relevant template files to rebuild on any changes.
-
+The `npm` command will install project dependencies and the `npm run develop`
+command builds the project, sets up a local server for the Patternlab UI and
+watches relevant template files to rebuild on any changes.
 
 ### Build
 
-The build command compiles the styleguide CSS and the Patternlab output but it doesn't create a server for the styleguide website. To build, run:
+The build command compiles the styleguide CSS and the Patternlab output but it
+doesn't create a server for the styleguide website. To build, run:
 
 ```
 npm run build
 ```
 
-## Configuring Tailwind
-
-Tailwind CSS comes with default configuration that sets up things like scales for typography, spacing and colours but these defaults and additional configuration can be made by editing the `tailwind.config.js` file in the project root.
-
-> **Note**: if changes to configuration or custom components aren't appearing you may need to rebuild/restart Patternlab. Use `control + c` to stop Gulp and `npm run develop` to rebuild and start the dev server for Patternlab.
-
-Find out more at the [Tailwind website](https://tailwindcss.com/docs/configuration).
-
-### Extending Tailwind with PostCSS modules
-
-PostCSS is a tool for transforming CSS using Javascript and there's already a huge number of modules you can use to do all kinds of things. This starter kit already has the Purge PostCSS module added but you can add additional modules in the Gulp configuration.
-
-For example:
-
-``` javascript
-// at root, in gulpfile.js
-gulp.task('tailwind-postcss', function () {
-  return gulp.src('./source/css/style.css')
-    .pipe(postcss([
-      // Add more modules here and
-      require('postcss-import'),
-      require('postcss-nested'),
-      require('postcss-preset-env'),
-      tailwindcss('./tailwind.config.js'),
-      require('autoprefixer'),
-      assets({
-        basePath: 'source/',
-        loadPaths: ['images/']
-      }),
-      require('postcss-clean')
-    ]))
-    .pipe(rename('style.pkgd.css'))
-    .pipe(gulp.dest('./source/dist'));
-});
-
-gulp.task('tailwind-postcss:production', function(){
-  return gulp.src('./source/css/style.css')
-    .pipe(postcss([
-      // Here same time
-      require('postcss-import'),
-      require('postcss-nested'),
-      require('postcss-preset-env'),
-      tailwindcss('./tailwind.config.js'),
-      require('autoprefixer'),
-      assets({
-        basePath: 'source/',
-        loadPaths: ['images/']
-      }),
-      require('postcss-clean'),
-      postcssPurgecss
-    ]))
-    .pipe(rename('style.pkgd.css'))
-    .pipe(gulp.dest('./source/dist'));
-});
+### Releasing
+
+First build for production as described previously:
+
 ```
-> **Note**: PurgeCSS should run only for the production build because added tailwind selector will not be applied when browser is reloaded.
+npm run build
+```
+
+Now, make new version using [semver principle](https://semver.org/):
 
+```
+npm version [VERSION_NUMBER]
+```
 
-## Configuring Patternlab
+This will create a new git tag which will be recongnized by the build server and it will generate following:
 
-The project has Patternlab setup to use the Tailwind CSS output but you can add additional CSS or JS to the Patternlab styleguide as you need.
+- update `latest` pointer
+- update minor version pointer like `1.x.x` in case this was a patch update or minor update
+- update patch version pointer like `1.3.x` in case this was the patch update
+- add `1.3.3` version if the tag name was `1.3.3`
 
-The existing CSS output file (sytle.css) is linked in the `_00-head.mustache` template file located at `/sources/_meta`.
+### Running locally with Docker
 
-You can add additional Javascript files to `/sources/js` and then link them into the header and footer templates located at `/sources/_meta`.
+Create a docker image:
 
-Find out more at the [Patternlab website](https://patternlab.io/docs/index.html).
+```
+docker build -t pirati-ui .
+```
 
+You can then run the docker container like this:
 
-## Background
+```
+docker run -p 8001:80 pirati-ui:latest
+```
 
-The version of Patternlab we're using is running in NodeJS with Gulp as a taskrunner, Tailwind CSS is a PostCSS project so it is part of the Javascript eco-system too.
+Your docker container will be available at [http://localhost:8001](http://localhost:8001).
 
-### Dependencies
 
-Here's a quick breakdown of the dependencies within the project and the job they're doing.
+### Updating icons
 
-| Module name                    | Description                                                               |
-| -------------------------------| ------------------------------------------------------------------------- |
-| gulp                           | workflow automation tool                                                  |
-| browser-sync                   | live browser reloading                                                    |
-| minimist                       | argument parser                                                           |
-| patternlab-node                | patternlab module                                                         |
-| styleguidekit-assets-default   | patternlab module                                                         |
-| styleguidekit-mustache-default | patternlab module                                                         |
-| gulp-postcss                   | a tool for transforming css with javascript                               |
-| gulp-rename                    | renames destination file                                                  |
-| postcss-assets                 | auto path resolver for assets                                             |
-| postcss-import                 | use @import for .css                                                      |
-| postcss-nested                 | use nesting like sass for .css                                            |
-| postcss-preset-env             | use future css syntax                                                     |
-| tailwindcss                    | a utility-first css framework for rapidly building custom user interfaces |
-| postcss-purgecss               | tool to remove unused css                                                 |
+This styleguide features iconset too. Icons themselves are managed using
+[Icomoon](https://icomoon.io) web app. If you don't have your Icomoon account
+yet, start by creating one. Then, use `source/icons/selection.json` to load
+current project settings. Add/modify icons and finally download your new icon
+font. Delete contents of the `source/icons` and put all the content from your
+downloaded font. When finished, run `npm run update-iconset` that will update
+both the style and pattern file automatically.
 
 
-## Reference sites
+## Developing other websites with pirati-ui
+
+In order to integrate `pirati-ui` with other websites, you will need to include
+at least the CSS source that defines look and feel. Simply place the following
+code in your `<head>`:
+
+
+```html
+<link rel="stylesheet" href="[ROOT_URL]/css/styles.css">
+```
+
+If you want to use the JS enahancements as well, you will also need to:
+
+1. Include Vue.js:
+
+    ```html
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
+    ```
+
+2. Include `pirati-ui` JS bundle:
+
+    ```html
+    <script src="[ROOT_URL]/js/main.bundle.js"></script>
+    ```
 
-- [Tailwind CSS](https://tailwindcss.com/docs/what-is-tailwind/)
-- [PostCSS](https://postcss.org/)
-- [Patternlab](https://patternlab.io/docs/)
-- [Gulp](https://gulpjs.com/)
-- [NodeJS](https://nodejs.org/dist/latest-v10.x/docs/api/)
+Make sure that Vue.js is included *before* the JS bundle. The best place for
+both of the JS sources is at the end of your HTML document.
 
+The `[ROOT_URL]` should point to the root address of your `pirati-ui` installation. This can either be
+one of official bundles hosted at `https://styleguide.pir-test.eu`:
 
-## Found something wrong? Let us know
+- https://styleguide.pir-test.eu/latest/
+- https://styleguide.pir-test.eu/1.x.x/
+- ... and so on
 
-If you find an error in the project or an inconsistency with the information in our README.md file feel free to submit an issue to the project or send us a pull request with improvements.
+Alternatively, you can run the `pirati-ui` locally. In this case, just run
+`npm run develop` and use whatever opens in the browser as your `ROOT_URL`.
+Usually, this will be `http://localhost:3000/`.

docker/nginx/default.conf

+server {
+    listen       80;
+    server_name  localhost;
+
+    gzip on;
+    gzip_disable "msie6";
+
+    gzip_comp_level 6;
+    gzip_min_length 1100;
+    gzip_buffers 16 8k;
+    gzip_proxied any;
+    gzip_types
+        text/plain
+        text/css
+        text/js
+        text/xml
+        text/javascript
+        application/javascript
+        application/json
+        application/xml
+        application/rss+xml
+        image/svg+xml;
+
+    location / {
+        root   /usr/share/nginx/html;
+        autoindex on;
+    }
+    location /images {
+        root   /usr/share/nginx/html/latest;
+    }
+}

gulpfile.js

@@ -8,20 +8,22 @@ var gulp = require("gulp"),
   browserSync = require("browser-sync").create(),
   argv = require("minimist")(process.argv.slice(2));
 
+const vue = require('rollup-plugin-vue');
+const { terser } = require('rollup-plugin-terser');
+const rollup = require('@rollup/stream');
+const buble = require('@rollup/plugin-buble');
+const commonjs = require('@rollup/plugin-commonjs');
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
+const replace = require('@rollup/plugin-replace');
+const source = require('vinyl-source-stream');
+const buffer = require('vinyl-buffer');
+const addsrc = require('gulp-add-src');
+const concat = require('gulp-concat');
 const postcss = require("gulp-postcss");
 const tailwindcss = require("tailwindcss");
 const rename = require("gulp-rename");
 const assets = require("postcss-assets");
-const postcssPurgecss = require("@fullhuman/postcss-purgecss")({
-  content: [
-    "./source/**/*.mustache",
-    "./source/**/*.json",
-    "./source/**/*.js",
-    "./public/**/*.html",
-    "./public/**/*.js",
-  ],
-  defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
-});
+
 
 function resolvePath(pathInput) {
   return path.resolve(pathInput).replace(/\\/g, "/");
@@ -30,14 +32,6 @@ function resolvePath(pathInput) {
 /******************************************************
  * COPY TASKS - stream assets from source to destination
  ******************************************************/
-// JS copy
-gulp.task("pl-copy:js", function (done) {
-  return gulp
-    .src("**/*.js", { cwd: resolvePath(paths().source.js) })
-    .pipe(gulp.dest(resolvePath(paths().public.js)))
-    .on("end", done);
-});
-
 // Images copy
 gulp.task("pl-copy:img", function (done) {
   return gulp
@@ -54,6 +48,14 @@ gulp.task("pl-copy:favicon", function (done) {
     .on("end", done);
 });
 
+// Iconset font copy
+gulp.task("pl-copy:icons", function (done) {
+  return gulp
+    .src("**/*.*", { cwd: resolvePath(paths().source.iconfont) })
+    .pipe(gulp.dest(resolvePath(paths().public.fonts)))
+    .on("end", done);
+});
+
 // Fonts copy
 gulp.task("pl-copy:font", function (done) {
   return gulp
@@ -62,14 +64,11 @@ gulp.task("pl-copy:font", function (done) {
     .on("end", done);
 });
 
-// CSS Copy
-// only copy style.pkgd.css and patternlab-scaffolding.css
-gulp.task("pl-copy:css", function (done) {
+// Custom styleguide CSS copy
+// only copy patternlab-scaffolding.css
+gulp.task("pl-copy:styleguide-custom-css", function (done) {
   return gulp
-    .src(resolvePath(paths().source.root) + "/dist/style.pkgd.css")
-    .pipe(
-      gulp.src(resolvePath(paths().source.css) + "/pattern-scaffolding.css")
-    )
+    .src(resolvePath(paths().source.css) + "/pattern-scaffolding.css")
     .pipe(gulp.dest(resolvePath(paths().public.css)))
     .pipe(browserSync.stream())
     .on("end", done);
@@ -122,13 +121,13 @@ function build(done) {
 gulp.task(
   "pl-assets",
   gulp.parallel(
-    "pl-copy:js",
     "pl-copy:img",
     "pl-copy:favicon",
+    "pl-copy:icons",
     "pl-copy:font",
-    "pl-copy:css",
     "pl-copy:styleguide",
-    "pl-copy:styleguide-css"
+    "pl-copy:styleguide-css",
+    "pl-copy:styleguide-custom-css",
   )
 );
 
@@ -217,45 +216,11 @@ gulp.task("tailwind-postcss", function (done) {
         require("postcss-clean"),
       ])
     )
-    .pipe(rename("style.pkgd.css"))
-    .pipe(gulp.dest("./source/dist"))
-    .on("end", done);
-});
-
-gulp.task("tailwind-postcss:production", function (done) {
-  return gulp
-    .src("./source/css/style.pcss")
-    .pipe(
-      postcss([
-        require("postcss-import"),
-        tailwindcss("./tailwind.config.js"),
-        require("postcss-nested"),
-        // require('postcss-preset-env'),
-        require("postcss-custom-properties"),
-        require("autoprefixer"),
-        assets({
-          basePath: "source/",
-          loadPaths: ["images/"],
-        }),
-        require("postcss-clean"),
-        postcssPurgecss,
-      ])
-    )
-    .pipe(rename("style.pkgd.css"))
-    .pipe(gulp.dest("./source/dist"))
+    .pipe(rename("styles.css"))
+    .pipe(gulp.dest(resolvePath(paths().public.css)))
     .on("end", done);
 });
 
-gulp.task(
-  "tailwind-postcss:build",
-  gulp.series("tailwind-postcss", "patternlab:build")
-);
-
-gulp.task(
-  "tailwind-postcss:build:production",
-  gulp.series("tailwind-postcss:production", "patternlab:build")
-);
-
 function rebuild(done) {
   return gulp.series(build, reload, () => done());
 }
@@ -263,7 +228,9 @@ function rebuild(done) {
 function watch () {
   const jsPaths = [
     resolvePath(paths().source.js) + "/*.js",
+    resolvePath(paths().source.js) + "/*.vue",
     resolvePath(paths().source.js) + "/**/*.js",
+    resolvePath(paths().source.js) + "/**/*.vue",
   ];
   const postcssPaths = [
     resolvePath(paths().source.css) + "/*.pcss",
@@ -274,24 +241,24 @@ function watch () {
   gulp.watch(
     jsPaths,
     {useFsEvents: false},
-    gulp.series("pl-copy:js", reloadJS)
+    gulp.series("rollup:build", reloadJS)
   );
 
   // Detect postcss file changes
   gulp.watch(
     postcssPaths,
     {useFsEvents: false},
-    gulp.series("tailwind-postcss", "pl-copy:css", reloadCSS)
+    gulp.series("tailwind-postcss", reloadCSS)
   );
 
   console.log("Watching following source files:", jsPaths.concat(postcssPaths));
 
-  // Detect updated css bundle change
-  // gulp.watch(
-  //   resolvePath(paths().source.root) + "/dist/style.pkgd.css",
-  //   {useFsEvents: false},
-  //   gulp.series("pl-copy:css", reloadCSS)
-  // );
+  // Detect changes in custom styleguide CSS
+  gulp.watch(
+    resolvePath(paths().source.css) + "/pattern-scaffolding.css",
+    {useFsEvents: false},
+    gulp.series("pl-copy:styleguide-custom-css", reloadCSS)
+  );
 
   // Detect changes in styleguide assets down in node_modules
   gulp.watch(
@@ -326,6 +293,7 @@ gulp.task(
         server: {
           baseDir: resolvePath(paths().public.root),
         },
+        cors: true,
         snippetOptions: {
           // Ignore all HTML files within the templates folder
           blacklist: ["/index.html", "/", "/?*"],
@@ -354,12 +322,78 @@ gulp.task(
   }
 );
 
+const buildJSBundle = (env) => {
+  const isProd = env === "production";
+
+  const plugins = [
+    vue({ css: false }),
+    buble({
+      exclude: "node_modules/**/*",
+      target: {
+        chrome: 71,
+        firefox: 64,
+        edge: 19
+      },
+    }),
+    commonjs(),
+    nodeResolve({
+      extensions: ['.js', '.vue'],
+      browser: true,
+      preferBuiltins: true
+    }),
+    replace({
+      'process.env.NODE_ENV': JSON.stringify(env),
+    })
+  ];
+
+  if (isProd) {
+    plugins.push(terser());
+  }
+
+  return function () {
+    return rollup({
+      plugins,
+      input: resolvePath(paths().source.js) + "/main.js",
+      output: {
+        format: "iife",
+        sourcemap: !isProd,
+        globals: {
+          'vue': 'Vue',
+        },
+      },
+      external: ["vue"],
+    })
+    // .on('bundle', bundle => { rollupCache = bundle })
+    .pipe(source("main.bundle.js"))
+    .pipe(buffer())
+    // .pipe(addsrc.prepend([
+    //   './node_modules/vue/dist/vue.js'
+    // ]))
+    // .pipe(concat("main.bundle.js"))
+    .pipe(gulp.dest("./public/js"));
+  };
+}
+
+gulp.task('rollup:build', buildJSBundle("development"));
+gulp.task('rollup:build:production', buildJSBundle("production"));
+
+gulp.task(
+  "site:build",
+  gulp.parallel("tailwind-postcss", "patternlab:build", "rollup:build")
+);
+
+gulp.task(
+  "site:build:production",
+  // Build patternlab first to have all the necessary CSS classes ready for auto purge.
+  gulp.series("patternlab:build", gulp.parallel("tailwind-postcss", "rollup:build:production"))
+);
+
 /******************************************************
  * COMPOUND TASKS
  ******************************************************/
-gulp.task("default", gulp.series("tailwind-postcss:build:production"));
-gulp.task("patternlab:watch", gulp.series("tailwind-postcss:build", watch));
+gulp.task("default", gulp.series("site:build:production"));
+gulp.task("patternlab:watch", gulp.series("site:build", watch));
 gulp.task(
   "patternlab:serve",
-  gulp.series("tailwind-postcss:build", "patternlab:connect", watch)
+  gulp.series("site:build", "patternlab:connect", watch)
 );

package.json

 {
   "name": "edition-node-gulp",
   "description": "The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.",
-  "version": "1.3.4",
+  "version": "2.20.0",
   "dependencies": {
-    "acorn": "^7.1.1",
+    "@fullcalendar/core": "^6.1.5",
+    "@fullcalendar/daygrid": "^6.1.5",
+    "@fullcalendar/interaction": "^6.1.5",
+    "@fullcalendar/multimonth": "^6.1.6",
+    "@fullcalendar/vue": "^6.1.5",
     "browser-sync": "^2.26.7",
     "gulp": "^4.0.2",
     "kind-of": "^6.0.3",
@@ -12,7 +16,10 @@
     "patternlab-node": "^2.12.0",
     "styleguidekit-assets-default": "^3.0.0",
     "styleguidekit-mustache-default": "^3.0.0",
-    "tailwindcss-elevation": "^0.3.4"
+    "tailwindcss-elevation": "^0.3.4",
+    "tippy.js": "^6.3.7",
+    "vue": "^2.7.14",
+    "vue2-flip-countdown": "^0.10.0"
   },
   "resolutions": {
     "lodash": "^4.17.12"
@@ -22,7 +29,8 @@
     "Atomic Web Design",
     "Node",
     "Gulp",
-    "Javascript"
+    "Javascript",
+    "Pirati"
   ],
   "repository": {
     "type": "git",
@@ -33,8 +41,10 @@
   "scripts": {
     "postinstall": "node scripts/postinstall.js",
     "gulp": "gulp -- ",
-    "develop": "gulp patternlab:serve",
-    "build": "gulp"
+    "develop": "NODE_ENV=development gulp patternlab:serve",
+    "build": "NODE_ENV=production gulp",
+    "make-version": "scripts/make-version.sh",
+    "update-iconset": "scripts/update-iconset.js"
   },
   "license": "MIT",
   "engines": {
@@ -42,17 +52,34 @@
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^1.3.0",
+    "@rollup/plugin-buble": "^0.21.3",
+    "@rollup/plugin-commonjs": "^13.0.0",
+    "@rollup/plugin-node-resolve": "^8.1.0",
+    "@rollup/plugin-replace": "^2.3.3",
+    "@rollup/stream": "^1.0.0",
+    "acorn": "^6.4.1",
     "autoprefixer": "^9.5.1",
-    "gulp-postcss": "^8.0.0",
+    "chart.js": "^4.2.0",
+    "color": "^3.1.2",
+    "gulp-add-src": "^1.0.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-postcss": "^9.0.0",
     "gulp-rename": "^2.0.0",
+    "lodash": "^4.17.15",
     "postcss-assets": "^5.0.0",
     "postcss-clean": "^1.1.0",
     "postcss-custom-properties": "^9.1.1",
     "postcss-import": "^12.0.1",
     "postcss-nested": "^4.2.1",
     "postcss-preset-env": "^6.7.0",
+    "rollup": "^2.18.1",
+    "rollup-plugin-terser": "^6.1.0",
+    "rollup-plugin-vue": "^5.1.9",
     "tailwind-css-variables": "^2.0.3",
-    "tailwindcss": "^1.4.6",
-    "tailwindcss-typography": "^3.1.0"
+    "tailwindcss": "^3.3.3",
+    "@tailwindcss/typography": "^0.5.10",
+    "vinyl-buffer": "^1.0.1",
+    "vinyl-source-stream": "^2.0.0",
+    "vue-template-compiler": "^2.7.14"
   }
 }

patternlab-config.json

@@ -11,6 +11,7 @@
       "js" : "./source/js",
       "images" : "./source/images",
       "fonts" : "./source/fonts",
+      "iconfont" : "./source/icons/fonts",
       "css" : "./source/css/"
     },
     "public" : {
@@ -51,8 +52,13 @@
     "tools-all": false,
     "tools-docs": false
   },
-  "ishMinimum": "240",
+  "ishMinimum": "360",
   "ishMaximum": "2600",
+  "ishViewportRange": {
+    "s": [360, 576],
+    "m": [577, 768],
+    "l": [769, 2600]
+  },
   "patternStateCascade": ["inprogress", "inreview", "complete"],
   "patternStates": {
   },

screens.js

+module.exports = {
+  'sm': '576px',
+  'md': '768px',
+  'lg': '992px',
+  'xl': '1200px',
+  '2xl': '1366px',
+};

scripts/update-iconset.js

+#!/usr/bin/env node
+
+const crypto = require('crypto');
+const fs = require("fs/promises");
+const path = require("path");
+
+const selection = require("../source/icons/selection.json");
+
+const buildBaseRules = (hash) => `
+@font-face {
+  font-family: 'pirati-ui';
+  src:  url('../fonts/pirati-ui.eot?${hash}');
+  src:  url('../fonts/pirati-ui.eot?${hash}#iefix') format('embedded-opentype'),
+    url('../fonts/pirati-ui.ttf?${hash}') format('truetype'),
+    url('../fonts/pirati-ui.woff?${hash}') format('woff'),
+    url('../fonts/pirati-ui.svg?${hash}#pirati-ui') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="ico--"], [class*=" ico--"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'pirati-ui' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+`;
+
+const buildIconRules = (icons) => {
+  return icons.map(icon => `.${icon.class}:before { content: "${icon.content}"; }`).join("\n");
+}
+
+const getHash = (icons) => {
+  return crypto.createHash('md5').update(icons, 'utf8').digest('hex');
+}
+
+const buildRuleset = (icons) => {
+  const iconRules = buildIconRules(icons);
+  const hash = getHash(iconRules);
+  const baseRules = buildBaseRules(hash);
+  return [baseRules, iconRules].join("\n");
+}
+
+const buildPattern = (icons) => {
+  const body = icons.map(icon => `
+<div class="card">
+  <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+    <i class="${icon.class}"></i>
+  </div>
+  <div class="card__body p-2 text-2xs">
+    <code>.${icon.class}</code>
+  </div>
+</div>`).join("\n");
+  return `<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 xl:grid-cols-16 gap-2 items-center">${body}</div>`;
+}
+
+async function writeFile(path, content) {
+  let filehandle;
+
+  try {
+    filehandle = await fs.open(path, "w");
+    filehandle.write(content);
+  } finally {
+    if (filehandle !== undefined)
+      await filehandle.close();
+  }
+}
+
+
+const prefix = selection.preferences.fontPref.prefix;
+const icons = selection.icons.map(icon => {
+  const content = `${'\\'}${icon.properties.code.toString(16)}`;
+  return icon.properties.name.split(", ").map(iconName => ({
+    class: `${prefix}${iconName}`,
+    content
+  }));
+}).flat();
+
+// Write PCSS
+writeFile(path.join(path.dirname(__filename), "..", "source", "css", "atoms", "icons.pcss"), buildRuleset(icons));
+
+// Write Pattern Lab pattern
+writeFile(path.join(path.dirname(__filename), "..", "source", "_patterns", "00-atoms", "02-icons", "icons.mustache"), buildPattern(icons));

source/_data/data.json

@@ -4,37 +4,44 @@
   "title": "Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu.",
   "img": {
     "avatar": {
-      "src": "http://placeimg.com/100/100/people",
+      "src": "https://picsum.photos/100",
       "alt": "Avatar"
     },
     "square": {
-      "src": "http://placeimg.com/300/300/nature",
+      "src": "https://picsum.photos/300",
       "alt": "Square"
     },
     "rectangle": {
-      "src": "http://placeimg.com/400/300/tech",
+      "src": "https://picsum.photos/400/300",
       "alt": "Rectangle"
     },
     "landscape-4x3": {
-      "src": "http://placeimg.com/400/300/tech",
+      "src": "https://picsum.photos/400/300",
       "alt": "4x3 Image"
     },
     "landscape-16x9": {
-      "src": "http://placeimg.com/640/360/tech",
+      "src": "https://picsum.photos/640/360",
       "alt": "16x9 Image"
+    },
+    "landscape-16x9-fullhd": {
+      "src": "https://picsum.photos/1920/1080",
+      "alt": "16x9 Image Full HD"
     }
   },
   "headline": {
     "short": "Lorizzle pimpin' dolizzle sit amet I",
     "medium": "Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my"
   },
+  "list": {
+    "item": "Shizz fo shizzle mah nizzle fo rizzle, <a href='#' class='underline'>mah home g-dizzle</a>, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv."
+  },
   "excerpt": {
     "short": "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
     "medium": "Izzle crazy tempizzle sizzle. We gonna chung gangsta get down get down fo shizzle turpizzle. Away break it down black. Pellentesque bling bling rhoncus fo shizzle. In hac the bizzle platea dictumst. Black dapibizzle. Crackalackin.",
     "long": "Curabitizzle fo shizzle diam quizzle nisi nizzle mollizzle. Suspendisse boofron. Morbi odio. Sure pizzle. Crazy orci. Shut the shizzle up maurizzle get down get down, check out this a, go to hizzle sit amizzle, malesuada izzle, pede. Pellentesque gravida. Vestibulizzle check it out mi, volutpat izzle, shiz sed, shiznit sempizzle, da bomb. Funky fresh in ipsum. Da bomb volutpat felis vizzle daahng dawg. Crizzle quis dope izzle fo shizzle my ni."
   },
   "cta": "Call to action",
-  "icon": "fas fa-skull-crossbones",
+  "icon": "ico--pirati",
   "description": "Fizzle crazy tortor. Sed rizzle. Ass pimpin' dolor dapibizzle turpis tempizzle fo shizzle my nizzle. Maurizzle pellentesque its fo rizzle izzle turpis. Get down get down we gonna chung nizzle. Shizzlin dizzle eleifend rhoncizzle break it down. In yo ghetto platea dictumst. Bling bling dapibizzle. Curabitur break yo neck, yall fo, pretizzle eu, go to hizzle dope, own yo' vitae, nunc. Bizzle suscipizzle. Ass semper velit sizzle fo.",
   "url": "http://lorizzle.nl/",
   "person": {
@@ -45,15 +52,20 @@
     "last": "Koolen",
     "lasti": "K",
     "occupation": "Software company manager and open-source software expert",
-    "email": "example@example.com",
+    "email": "someone.from.the.party@pirati.cz",
     "claim": "Evropská unie není vzdálená instituce žijící svým životem – jsme to my všichni. Přesto máme někdy problém se orientovat či přímo angažovat v evropské politice.",
     "party": "Pirátská strana",
     "age": "30",
+    "city": "Valašské Meziříčí",
     "position": "1"
   },
   "organization": {
     "name": "Piráti Pardubického kraje"
   },
+  "event": {
+    "title": "20:00 Mumble-předsednictvo",
+    "date": "Pondělí 10. dubna"
+  },
   "date": "22. 1. 2020",
   "dateverbose": "Pondělí 10. dubna",
   "datetime": "22. 1. 2020 19:30",
@@ -84,5 +96,102 @@
     "long": "20",
     "short": "20"
   },
-  "seconds": "31"
+  "seconds": "31",
+  "form": {
+    "label": "Název políčka",
+    "placeholder": "Placeholder"
+  },
+  "calendarData": "[{\"title\": \"event 1\", \"date\": \"2024-03-02\", \"url\": \"https://example.com\"}, {\"title\": \"event 2\", \"date\": \"2024-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 3\", \"date\": \"2024-03-02\", \"url\": \"https://example.com\"}, {\"title\": \"event 4\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 5\", \"date\": \"2023-04-01\", \"url\": \"https://example.com\"}, {\"title\": \"event 2\", \"date\": \"2023-04-10\", \"url\": \"https://example.com\"}]",
+  "greyColors": [
+    {"cls": "grey-50", "hex": "#f7f7f7", "name": "Grey 50"},
+    {"cls": "grey-100", "hex": "#f3f3f3", "name": "Grey 100"},
+    {"cls": "grey-125", "hex": "#f0f0f0", "name": "Grey 125"},
+    {"cls": "grey-200", "hex": "#adadad", "name": "Grey 200"},
+    {"cls": "grey-300", "hex": "#4c4c4c", "name": "Grey 300"},
+    {"cls": "grey-400", "hex": "#343434", "name": "Grey 400"},
+    {"cls": "grey-500", "hex": "#303132", "name": "Grey 500"},
+    {"cls": "grey-600", "hex": "#262626", "name": "Grey 600"},
+    {"cls": "grey-700", "hex": "#202020", "name": "Grey 700"},
+    {"cls": "grey-800", "hex": "#1f1f1f", "name": "Grey 800"}
+  ],
+  "brandColors": [
+    {
+      "name": "Primary",
+      "variants": [
+        {"cls": "black", "name": "Black", "hex": "#000000"},
+        {"cls": "white", "name": "White", "hex": "#ffffff"}
+      ]
+    },
+    {
+      "name": "Olive",
+      "variants": [
+        {"cls": "olive-100", "name": "Olive 100", "hex": "#d6e8b3"}
+      ]
+    },
+    {
+      "name": "Green",
+      "variants": [
+        {"cls": "green-200", "name": "Green 200", "hex": "#92c6ab"},
+        {"cls": "green-300", "name": "Green 300", "hex": "#76cc9f"},
+        {"cls": "green-400", "name": "Green 400", "hex": "#4ca971"}
+      ]
+    },
+    {
+      "name": "Yellow",
+      "variants": [
+        {"cls": "yellow-100", "name": "Yellow 100", "hex": "#fff7bf"},
+        {"cls": "yellow-200", "name": "Yellow 200", "hex": "#f7f38a"},
+        {"cls": "yellow-300", "name": "Yellow 300", "hex": "#ffea5a"},
+        {"cls": "yellow-400", "name": "Yellow 400", "hex": "#fde119"}
+      ]
+    },
+    {
+      "name": "Blue",
+      "variants": [
+        {"cls": "blue-100", "name": "Blue 100", "hex": "#abcdef"},
+        {"cls": "blue-200", "name": "Blue 200", "hex": "#76b4cf"},
+        {"cls": "blue-300", "name": "Blue 300", "hex": "#027da8"}
+      ]
+    },
+    {
+      "name": "Cyan",
+      "variants": [
+        {"cls": "cyan-100", "name": "Cyan 100", "hex": "#a7d4d1"},
+        {"cls": "cyan-200", "name": "Cyan 200", "hex": "#57b3bd"},
+        {"cls": "cyan-300", "name": "Cyan 300", "hex": "#3e8793"},
+        {"cls": "cyan-400", "name": "Cyan 400", "hex": "#497280"},
+        {"cls": "cyan-500", "name": "Cyan 500", "hex": "#004958"}
+      ]
+    },
+    {
+      "name": "Orange",
+      "variants": [
+        {"cls": "orange-100", "name": "Orange 100", "hex": "#f2d29f"},
+        {"cls": "orange-200", "name": "Orange 200", "hex": "#f1ae7b"},
+        {"cls": "orange-300", "name": "Orange 300", "hex": "#ed9654"}
+      ]
+    },
+    {
+      "name": "Violet",
+      "variants": [
+        {"cls": "violet-100", "name": "Violet 100", "hex": "#edc8bd"},
+        {"cls": "violet-200", "name": "Violet 200", "hex": "#d28c94"},
+        {"cls": "violet-300", "name": "Violet 300", "hex": "#8d415f"},
+        {"cls": "violet-400", "name": "Violet 400", "hex": "#840048"},
+        {"cls": "violet-500", "name": "Violet 500", "hex": "#670047"}
+      ]
+    },
+    {
+      "name": "Red",
+      "variants": [
+        {"cls": "red-600", "name": "Red 600", "hex": "#d60d53"}
+      ]
+    },
+    {
+      "name": "Pirati",
+      "variants": [
+        {"cls": "pirati-yellow", "name": "Yellow", "hex": "#fec934"}
+      ]
+    }
+  ]
 }

source/_meta/_00-head.mustache

@@ -5,9 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width" />
 
-    <link rel="stylesheet" href="../../css/style.pkgd.css?{{ cacheBuster }}" media="all" />
+    <link rel="stylesheet" href="../../css/styles.css?{{ cacheBuster }}" media="all" />
     <link rel="stylesheet" href="../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />
-    <script src="https://kit.fontawesome.com/cbdc6198f3.js" crossorigin="anonymous"></script>
 
     <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
     {{{ patternLabHead }}}

source/_meta/_01-foot.mustache

@@ -2,7 +2,30 @@
   <!--DO NOT REMOVE-->
   {{{ patternLabFoot }}}
 
-  <script src="../../js/main.js?{{ cacheBuster }}"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
+  <script src="../../js/main.bundle.js?{{ cacheBuster }}"></script>
+
+  <script>
+    /*
+     * By default, {{ link.[pattern] }} starts with /, which breaks when app
+     * isn't served from the root like in case of versioned styleguide.
+     * This fixes that in most cases by detecting the current prefix from
+     * location.pathname and makes it work the same way the main pattern lab nav.
+     * IMPORTANT: hrefs need to be marked with data-href instead of real href
+     */
+    var idx = location.pathname.indexOf("/patterns");
+    var prefix = location.pathname.substring(0, idx);
+    var anchors = document.querySelectorAll('a[data-href]');
+
+    for (var i = 0; i < anchors.length; i++) {
+      var anchor = anchors[i];
+      if (prefix != "") {
+        anchor.setAttribute('href', prefix +  anchor.dataset.href);
+      } else {
+        anchor.setAttribute('href', anchor.dataset.href);
+      }
+    }
+  </script>
 
   </body>
 </html>