Compare revisions

    - 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

13.8

14.5

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/

# 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

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

docker build -t pirati-ui .

```

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

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) {

    .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

  gulp.parallel(

    "pl-copy:img",

    "pl-copy:favicon",

    "pl-copy:icons",

    "pl-copy:font",

    "pl-copy:styleguide",

    "pl-copy:styleguide-css",

 * 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(

          loadPaths: ["images/"],

        }),

        require("postcss-clean"),

        postcssPurgecss,

      ])

    )

    .pipe(rename("styles.css"))

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

        server: {

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

        },

        cors: true,

        snippetOptions: {

          // Ignore all HTML files within the templates folder

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

      exclude: "node_modules/**/*",

      target: {

        chrome: 71,

        firefox: 64

        firefox: 64,

        edge: 19

      },

    }),

    commonjs(),

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

);

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

{

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

    "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": {

  "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": {

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

    "postcss-clean": "^1.1.0",

    "postcss-custom-properties": "^9.1.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.6.11"

    "vue-template-compiler": "^2.7.14"

  }

}

      "js" : "./source/js",

      "images" : "./source/images",

      "fonts" : "./source/fonts",

      "iconfont" : "./source/icons/fonts",

      "css" : "./source/css/"

    },

    "public" : {

#!/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."

#!/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));

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