.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

-13.8
+14.5

Dockerfile

+FROM node:14.5-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
 
-# 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/
+COPY --from=build /home/node/ui-styleguide/public /usr/share/nginx/html/

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,23 +19,26 @@ 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
@@ -47,15 +52,22 @@ First build for production as described  previously:
 npm run build
 ```
 
-Now, make new version
+Now, make new version using [semver principle](https://semver.org/):
 
 ```
-./scripts/make-version.sh [VERSION_NUMBER]
+npm version [VERSION_NUMBER]
 ```
 
-This will create new version bundle under `dist` and also update `dist/latest.tgz` to be your new version.
+This will create a new git tag which will be recongnized by the build server and it will generate following:
+
+- 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`
+
+### Running locally with Docker
 
-Finally, create a docker build:
+Create a docker image:
 
 ```
 docker build -t pirati-ui .
@@ -66,3 +78,56 @@ You can then run the docker container like this:
 ```
 docker run -p 8001:80 pirati-ui:latest
 ```
+
+Your docker container will be available at [http://localhost:8001](http://localhost:8001).
+
+
+### Updating icons
+
+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.
+
+
+## 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>
+    ```
+
+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`:
+
+- https://styleguide.pir-test.eu/latest/
+- https://styleguide.pir-test.eu/1.x.x/
+- ... and so on
+
+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/`.

gulpfile.js

@@ -23,16 +23,6 @@ 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",
-    "./source/**/*.vue",
-    "./public/**/*.html",
-  ],
-  defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
-});
 
 
 function resolvePath(pathInput) {
@@ -58,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
@@ -125,6 +123,7 @@ gulp.task(
   gulp.parallel(
     "pl-copy:img",
     "pl-copy:favicon",
+    "pl-copy:icons",
     "pl-copy:font",
     "pl-copy:styleguide",
     "pl-copy:styleguide-css",
@@ -199,30 +198,7 @@ function reloadJS(done) {
  * TAILWIND AND POSTCSS TASKS
  ******************************************************/
 
-gulp.task("tailwind-postcss:build", 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"),
-      ])
-    )
-    .pipe(rename("styles.css"))
-    .pipe(gulp.dest(resolvePath(paths().public.css)))
-    .on("end", done);
-});
-
-gulp.task("tailwind-postcss:build:production", function (done) {
+gulp.task("tailwind-postcss", function (done) {
   return gulp
     .src("./source/css/style.pcss")
     .pipe(
@@ -238,7 +214,6 @@ gulp.task("tailwind-postcss:build:production", function (done) {
           loadPaths: ["images/"],
         }),
         require("postcss-clean"),
-        postcssPurgecss,
       ])
     )
     .pipe(rename("styles.css"))
@@ -273,7 +248,7 @@ function watch () {
   gulp.watch(
     postcssPaths,
     {useFsEvents: false},
-    gulp.series("tailwind-postcss:build", reloadCSS)
+    gulp.series("tailwind-postcss", reloadCSS)
   );
 
   console.log("Watching following source files:", jsPaths.concat(postcssPaths));
@@ -318,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", "/", "/?*"],
@@ -355,7 +331,8 @@ const buildJSBundle = (env) => {
       exclude: "node_modules/**/*",
       target: {
         chrome: 71,
-        firefox: 64
+        firefox: 64,
+        edge: 19
       },
     }),
     commonjs(),
@@ -402,12 +379,13 @@ gulp.task('rollup:build:production', buildJSBundle("production"));
 
 gulp.task(
   "site:build",
-  gulp.parallel("tailwind-postcss:build", "rollup:build", "patternlab:build")
+  gulp.parallel("tailwind-postcss", "patternlab:build", "rollup:build")
 );
 
 gulp.task(
   "site:build:production",
-  gulp.parallel("tailwind-postcss:build:production", "rollup:build:production", "patternlab:build")
+  // 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"))
 );
 
 /******************************************************

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": {
+    "@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 +17,8 @@
     "styleguidekit-assets-default": "^3.0.0",
     "styleguidekit-mustache-default": "^3.0.0",
     "tailwindcss-elevation": "^0.3.4",
-    "vue": "^2.6.11",
+    "tippy.js": "^6.3.7",
+    "vue": "^2.7.14",
     "vue2-flip-countdown": "^0.10.0"
   },
   "resolutions": {
@@ -35,9 +41,10 @@
   "scripts": {
     "postinstall": "node scripts/postinstall.js",
     "gulp": "gulp -- ",
-    "develop": "gulp patternlab:serve",
-    "build": "gulp",
-    "make-version": "scripts/make-version.sh"
+    "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": {
@@ -52,10 +59,11 @@
     "@rollup/stream": "^1.0.0",
     "acorn": "^6.4.1",
     "autoprefixer": "^9.5.1",
+    "chart.js": "^4.2.0",
     "color": "^3.1.2",
     "gulp-add-src": "^1.0.0",
     "gulp-concat": "^2.6.1",
-    "gulp-postcss": "^8.0.0",
+    "gulp-postcss": "^9.0.0",
     "gulp-rename": "^2.0.0",
     "lodash": "^4.17.15",
     "postcss-assets": "^5.0.0",
@@ -68,10 +76,10 @@
     "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.6.11"
+    "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" : {

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."

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,27 +4,27 @@
   "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://loremflickr.com/1920/1080",
+      "src": "https://picsum.photos/1920/1080",
       "alt": "16x9 Image Full HD"
     }
   },
@@ -32,13 +32,16 @@
     "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": {
@@ -49,10 +52,11 @@
     "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": {
@@ -93,6 +97,11 @@
     "short": "20"
   },
   "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"},
@@ -113,11 +122,27 @@
         {"cls": "white", "name": "White", "hex": "#ffffff"}
       ]
     },
+    {
+      "name": "Olive",
+      "variants": [
+        {"cls": "olive-100", "name": "Olive 100", "hex": "#d6e8b3"}
+      ]
+    },
     {
       "name": "Green",
       "variants": [
-        {"cls": "green-100", "name": "Green 100", "hex": "#d6e8b3"},
-        {"cls": "green-200", "name": "Green 200", "hex": "#92c6ab"}
+        {"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"}
       ]
     },
     {
@@ -155,6 +180,18 @@
         {"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

@@ -7,7 +7,6 @@
 
     <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,7 @@
   <!--DO NOT REMOVE-->
   {{{ patternLabFoot }}}
 
-  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></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>