Styleguide versioning

.dockerignore

 node_modules
+public
 npm-debug.log
 Dockerfile
 .dockerignore

Dockerfile

-FROM node:13.8-alpine as build
-
-RUN mkdir -p /home/node/ui-styleguide/node_modules
-
-WORKDIR /home/node/ui-styleguide
-
-COPY package*.json ./
-
-RUN npm install
-
-COPY . .
-
-RUN npm run build
-
-# ---
 
 FROM nginx:alpine
 
-COPY --from=build /home/node/ui-styleguide/public /usr/share/nginx/html/
+# Remove default index file
+RUN rm /usr/share/nginx/html/*
+# Copy customized config
+COPY ./docker/nginx/default.conf /etc/nginx/conf.d/
+# Add all tarballs and unzip it
+ADD ./dist/* /usr/share/nginx/html/

README.md

@@ -39,110 +39,30 @@ The build command compiles the styleguide CSS and the Patternlab output but it d
 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'));
-});
-```
-> **Note**: PurgeCSS should run only for the production build because added tailwind selector will not be applied when browser is reloaded.
-
-
-## Configuring Patternlab
-
-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.
-
-The existing CSS output file (sytle.css) is linked in the `_00-head.mustache` template file located at `/sources/_meta`.
-
-You can add additional Javascript files to `/sources/js` and then link them into the header and footer templates located at `/sources/_meta`.
-
-Find out more at the [Patternlab website](https://patternlab.io/docs/index.html).
-
-
-## Background
-
-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.
+### Releasing
 
-### Dependencies
+First build for production as described  previously:
 
-Here's a quick breakdown of the dependencies within the project and the job they're doing.
+```
+npm run build
+```
 
-| 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                                                 |
+Now, make new version
 
+```
+./scripts/make-version.sh [VERSION_NUMBER]
+```
 
-## Reference sites
+This will create new version bundle under `dist` and also update `dist/latest.tgz` to be your new version.
 
-- [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/)
+Finally, create a docker build:
 
+```
+docker build -t pirati-ui
+```
 
-## Found something wrong? Let us know
+You can then run the docker container like this:
 
-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.
+```
+docker run -p 8001:80 pirati-ui:latest
+```

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

@@ -66,14 +66,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);
@@ -129,9 +126,9 @@ gulp.task(
     "pl-copy:img",
     "pl-copy:favicon",
     "pl-copy:font",
-    "pl-copy:css",
     "pl-copy:styleguide",
-    "pl-copy:styleguide-css"
+    "pl-copy:styleguide-css",
+    "pl-copy:styleguide-custom-css",
   )
 );
 
@@ -202,7 +199,7 @@ function reloadJS(done) {
  * TAILWIND AND POSTCSS TASKS
  ******************************************************/
 
-gulp.task("tailwind-postcss", function (done) {
+gulp.task("tailwind-postcss:build", function (done) {
   return gulp
     .src("./source/css/style.pcss")
     .pipe(
@@ -220,12 +217,12 @@ gulp.task("tailwind-postcss", function (done) {
         require("postcss-clean"),
       ])
     )
-    .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:production", function (done) {
+gulp.task("tailwind-postcss:build:production", function (done) {
   return gulp
     .src("./source/css/style.pcss")
     .pipe(
@@ -244,21 +241,11 @@ gulp.task("tailwind-postcss:production", function (done) {
         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());
 }
@@ -286,17 +273,17 @@ function watch () {
   gulp.watch(
     postcssPaths,
     {useFsEvents: false},
-    gulp.series("tailwind-postcss", "pl-copy:css", reloadCSS)
+    gulp.series("tailwind-postcss:build", 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(
@@ -392,7 +379,10 @@ const buildJSBundle = (env) => {
       input: resolvePath(paths().source.js) + "/main.js",
       output: {
         format: "iife",
-        sourcemap: isProd,
+        sourcemap: !isProd,
+        globals: {
+          'vue': 'Vue',
+        },
       },
       external: ["vue"],
     })
@@ -410,12 +400,22 @@ const buildJSBundle = (env) => {
 gulp.task('rollup:build', buildJSBundle("development"));
 gulp.task('rollup:build:production', buildJSBundle("production"));
 
+gulp.task(
+  "site:build",
+  gulp.parallel("tailwind-postcss:build", "rollup:build", "patternlab:build")
+);
+
+gulp.task(
+  "site:build:production",
+  gulp.parallel("tailwind-postcss:build:production", "rollup:build:production", "patternlab:build")
+);
+
 /******************************************************
  * COMPOUND TASKS
  ******************************************************/
-gulp.task("default", gulp.series("tailwind-postcss:build:production", "rollup: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", "rollup:build", watch)
+  gulp.series("site:build", "patternlab:connect", watch)
 );

package.json

@@ -36,7 +36,8 @@
     "postinstall": "node scripts/postinstall.js",
     "gulp": "gulp -- ",
     "develop": "gulp patternlab:serve",
-    "build": "gulp"
+    "build": "gulp",
+    "make-version": "scripts/make-version.sh"
   },
   "license": "MIT",
   "engines": {

screens.js

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

scripts/make-version.sh

+#!/bin/bash
+
+VERSION=$1
+
+if [ -z "$VERSION" ]
+then
+      echo "Please specify a new version in argument"
+      exit 1
+fi
+
+CURRENT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+PROJECT_DIR="$CURRENT_DIR/.."
+DIST_DIR="$PROJECT_DIR/dist"
+
+mkdir -p $DIST_DIR
+
+rm -f "$DIST_DIR/latest.tgz" &&
+  rm -rf "$DIST_DIR/latest" &&
+  cp -rf "$PROJECT_DIR/public" "$DIST_DIR/latest"
+  tar -czf "$DIST_DIR/latest.tgz" -C "$DIST_DIR" latest &&
+  mv "$DIST_DIR/latest" "$DIST_DIR/$VERSION"
+  tar -czf "$DIST_DIR/$VERSION.tgz" -C "$DIST_DIR" $VERSION &&
+  rm -rf "$DIST_DIR/$VERSION" &&
+  echo "New version ${VERSION} is ready as $DIST_DIR/$VERSION.tgz, please add it to repository."

source/_meta/_00-head.mustache

@@ -5,7 +5,7 @@
     <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>
 

source/_meta/_01-foot.mustache

@@ -5,5 +5,26 @@
   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.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);
+
+    if (prefix != "") {
+      var anchors = document.querySelectorAll('a[data-href]');
+
+      for (var i = 0; i < anchors.length; i++) {
+        var anchor = anchors[i];
+        anchor.setAttribute('href', prefix +  anchor.dataset.href);
+      }
+    }
+  </script>
+
   </body>
 </html>

source/_patterns/01-molecules/02-candidate-card/candidate-card.mustache

@@ -3,10 +3,10 @@
     <div class="card candidate-card__body elevation-0 hover:elevation-10 transition duration-200">
       <div class="candidate-card__avatar">
         <div class="candidate-card__position">{{ person.position }}</div>
-        <a href="{{ link.templates-candidate-detail }}">{{> atoms-basic-avatar(classes: "avatar--sm sm:avatar--lg") }}</a>
+        <a href="#" data-href="{{ link.templates-candidate-detail }}">{{> atoms-basic-avatar(classes: "avatar--sm sm:avatar--lg") }}</a>
       </div>
       <div class="candidate-card__bio">
-        <h1 class="head-heavy-xs"><a href="{{ link.templates-candidate-detail }}">{{ person.first }} {{ person.last }}</a></h1>
+        <h1 class="head-heavy-xs"><a href="#" data-href="{{ link.templates-candidate-detail }}">{{ person.first }} {{ person.last }}</a></h1>
         <div class="font-light mb-4">{{ person.email }}</div>
         <h2 class="head-allcaps-4xs md:head-allcaps-3xs">{{ person.occupation }}</h2>
       </div>

source/_patterns/01-molecules/03-candidate-table-row/candidate-table-row.mustache

-<a href="{{ link.templates-candidate-detail }}" class="candidate-table-row">
+<a href="#" data-href="{{ link.templates-candidate-detail }}" class="candidate-table-row">
   <div class="candidate-table-row__position head-allcaps-heavy-2xs text-right">{{ person.position }}</div>
   {{> atoms-basic-avatar(classes: "candidate-table-row__avatar") }}
   <div class="candidate-table-row__name head-heavy-2xs font-bold">{{ person.first }} {{ person.last }}</div>

source/_patterns/02-organisms/00-global/navbar.mustache

@@ -24,34 +24,34 @@
         <div v-if="show || isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto">
           <ul class="navbar-menu text-white">
             <li class="navbar-menu__item">
-              <a href="{{ link.templates-homepage }}" class="navbar-menu__link">Hlavní strana</a>
+              <a href="#" data-href="{{ link.templates-homepage }}" class="navbar-menu__link">Hlavní strana</a>
             </li>
             <li class="navbar-menu__item">
-              <a href="{{ link.templates-people }}" class="navbar-menu__link">Lidé</a>
+              <a href="#" data-href="{{ link.templates-people }}" class="navbar-menu__link">Lidé</a>
             </li>
             <li class="navbar-menu__item">
               <ui-navbar-subitem label="Aktuality" href="{{ link.templates-article-listing }}">
                 <ul class="navbar-menu__submenu">
-                  <li><a href="{{ link.templates-article-detail }}" class="navbar-menu__link">Detail aktuality</a></li>
+                  <li><a href="#" data-href="{{ link.templates-article-detail }}" class="navbar-menu__link">Detail aktuality</a></li>
                 </ul>
               </ui-navbar-subtitem>
             </li>
             <li class="navbar-menu__item">
               <ui-navbar-subitem label="Volby">
                 <ul class="navbar-menu__submenu">
-                  <li><a href="{{ link.templates-elections-candidates }}" class="navbar-menu__link">Kandidáti</a></li>
-                  <li><a href="{{ link.templates-elections-program }}" class="navbar-menu__link">Program</a></li>
+                  <li><a href="#" data-href="{{ link.templates-elections-candidates }}" class="navbar-menu__link">Kandidáti</a></li>
+                  <li><a href="#" data-href="{{ link.templates-elections-program }}" class="navbar-menu__link">Program</a></li>
                 </ul>
               </ui-navbar-subtitem>
             </li>
             <li class="navbar-menu__item">
-              <a href="{{ link.templates-elections-candidates }}" class="navbar-menu__link">Kandidáti</a>
+              <a href="#" data-href="{{ link.templates-elections-candidates }}" class="navbar-menu__link">Kandidáti</a>
             </li>
             <li class="navbar-menu__item">
-              <a href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>
+              <a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>
             </li>
             <li class="navbar-menu__item">
-              <a href="{{ link.templates-contact }}" class="navbar-menu__link">Kontakt</a>
+              <a href="#" data-href="{{ link.templates-contact }}" class="navbar-menu__link">Kontakt</a>
             </li>
           </ul>
         </div>

source/css/organisms/region-map.pcss

@@ -9,7 +9,6 @@
   stroke: theme('colors.white');
   stroke-width: 2px;
   stroke-linejoin: round;
-  shape-rendering: crispEdges;
 }
 
 .region-map__region--current {

source/js/apps/footer/FooterCollapsible.vue

@@ -9,9 +9,9 @@
 </template>
 
 <script>
-import tailwindConfig from "../../../../tailwind.config";
+import screens from "../../../../screens";
 
-const lgScreenSize = parseInt(tailwindConfig.theme.screens.lg.replace("px", ""), 10);
+const lgScreenSize = parseInt(screens.lg.replace("px", ""), 10);
 
 export default {
   data() {

source/js/apps/navbar/Navbar.vue

 <script>
   import UiNavbarSubitem from "./NavbarSubitem";
-  import tailwindConfig from "../../../../tailwind.config";
+  import screens from "../../../../screens";
 
-  const lgScreenSize = parseInt(tailwindConfig.theme.screens.lg.replace("px", ""), 10);
+  const lgScreenSize = parseInt(screens.lg.replace("px", ""), 10);
 
   export default {
     components: {