Compare revisions

build:

  stage: build

  script:

    - mkdir public

    - for f in dist/*.tgz; do tar -C ./public -xzf "$f"; done

    - 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 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) || [],

  whitelistPatterns: [

    /(sm|md|lg|xl)?(\\:)?w-\d\d?$/, // width

    /(sm|md|lg|xl)?(\\:)?h-\d\d?$/, // height

    /(sm|md|lg|xl)?(\\:)m.?-\d\d?$/, // margins

    /(sm|md|lg|xl)?(\\:)p.?-\d\d?$/, // paddings

    /max-w-*/, // maximum width

    /grid-cols-\d\d?/, // grid columns

    /col-span-\d\d?/, // grid spans

    /row-span-\d\d?/, // grid spans

    /grid-flow/, // grid flow

    /(sm|md|lg|xl)(\\:)text-.*/,

    // /text-*/,

    /ico--*/, // icons

  ],

});

function resolvePath(pathInput) {

 * 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", "patternlab:build", "rollup: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:build:production", "rollup:build:production"))

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

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

  }

}

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

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

    }

  },

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

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

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