Compare revisions

node_modules

public

npm-debug.log

Dockerfile

.dockerignore

    - 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

14.5

FROM node:13-alpine as build

FROM node:14.5-alpine as build

RUN mkdir -p /home/node/ui-styleguide/node_modules

# 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

### 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/`.

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;

    }

}

  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, "/");

/******************************************************

 * 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

    .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

    .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);

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

  )

);

        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());

}

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

  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(

        server: {

          baseDir: resolvePath(paths().public.root),

        },

        cors: true,

        snippetOptions: {

          // Ignore all HTML files within the templates folder

          blacklist: ["/index.html", "/", "/?*"],

  }

);

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)

);