From 5c9b928996019a2ae295c283b9e845847700dcef Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Mon, 4 Nov 2024 15:31:32 +0000 Subject: [PATCH] deploy: 9aa2459f01e5b4470ecf76b99571ec690fd83251 --- _state.json | 338 +++++++++++++++++++-------------------- index.html | 36 ++--- test-project/_state.json | 2 +- test-project/index.html | 2 +- 4 files changed, 189 insertions(+), 189 deletions(-) diff --git a/_state.json b/_state.json index 29f84324..4b47c920 100644 --- a/_state.json +++ b/_state.json @@ -2,7 +2,7 @@ "config": { "name": "UIengine Documentation", "version": "3.3.18", - "update": 1730733252993, + "update": 1730734282488, "logo": "/images/logo.svg", "source": { "pages": "/home/runner/work/uiengine/uiengine/docs/site", @@ -15,6 +15,7 @@ }, "target": "/home/runner/work/uiengine/uiengine/docs/dist", "ui": { + "base": "/uiengine/", "customStylesFile": "/styles/docs.css", "meta": [ { @@ -105,7 +106,7 @@ "tag": "meta", "attrs": { "name": "og:url", - "content": "https://uiengine.uix.space/" + "content": "https://dennisreimann.github.io/uiengine/" } }, { @@ -140,21 +141,21 @@ "tag": "meta", "attrs": { "name": "og:image", - "content": "http://uiengine.uix.space/card.png" + "content": "http://dennisreimann.github.io/uiengine/card.png" } }, { "tag": "meta", "attrs": { "name": "og:image:secure_url", - "content": "https://uiengine.uix.space/card.png" + "content": "https://dennisreimann.github.io/uiengine/card.png" } }, { "tag": "meta", "attrs": { "name": "twitter:image", - "content": "https://uiengine.uix.space/card.png" + "content": "https://dennisreimann.github.io/uiengine/card.png" } }, { @@ -172,8 +173,7 @@ } } ], - "foot": "\n \n ", - "base": "/" + "foot": "\n \n " }, "browserSync": { "open": false @@ -212,7 +212,7 @@ "sourceFile": "site/page.config.js", "readmeFile": "site/README.md", "type": "documentation", - "content": "

UIengine

\n

Workbench for UI-driven development:\nA tool for developers and designers to build and document web sites and apps.

\n

Useful if you want to …

\n\n
\"UIengine:
\n

🚀 What it enables

\n\n

🏎 Quickstart

\n

To explore the features yourself you can quickly initialize a project with some demo content:

\n
mkdir uiengine-demo && cd uiengine-demo && npm init -y\nnpm install @uiengine/core @uiengine/adapter-html --save-dev\nnpx uiengine init --demo\nnpx uiengine build --serve --watch\n
\n

See the getting started guide\nfor further details.\nThere are also some introduction videos:

\n
\n

🖥 Examples and Screenshots

\n

To get an idea of what a real-world project looks like, see the React sample project:

\n\n

📘 Documentation

\n

See the documentation site, which is also generated with the UIengine.

\n

🔩 Technical TL;DR

\n

\"npm\"\n\"Standard\n\"Build\n\"Test\n\"Known\n\"Coverage\n\"All\n\"Maintained\n\"Support

\n

⚒ How does it work?

\n

At its core, the UIengine is a static site generator.\nIt can be used in standalone mode or integrated into your build process.

\n

➡️ Input: Your projects components, templates, pages and documentation

\n

⬅️ Output: A static site that can be used as a workbench for development and deployed documentation

\n

It consumes the files and structure of your project and generates the documentation based on this.\nIn development mode the output is regenerated on file change and synced to the browser.\nThis provides you with a development environment for creating the components, prototyping and writing the docs.

\n

💯 Main features

\n\n

For the evaluation process you might also want to have a look at the alternatives.

\n

🗜 Prerequisites

\n

UIengine requires at least Node.js 16.16 (tracking the latest active Node.js LTS version).\nThis guarantees a reasonable level of backwards compatibility.

\n

🖖 Alternatives

\n

OK, the UIengine looks really cool but it’s not quite what you are looking for?\nOr you want to first compare a few solutions to see which one is the right fit?\nHere are some other projects that you might want to evaluate:

\n\n

🛠 Development

\n

You like this project and are interested in participating?\nSee the development docs for an introduction and workflows when hacking on the UIengine.

\n

✨ Contributors

\n

Thanks goes to these wonderful people:

\n\n\n\n \n \n \n \n \n \n \n \n
\"Jan
Jan Persiel
🎨		\"Cos
Cos Anca
🎨 💻		\"Michael
Michael Geers
💻		\"Matteo
Matteo Fogli
💻		\"Jonas
Jonas Havers
📖		\"René
René Mäkeler
💡
\n\n

This project follows the all-contributors specification.\nContributions of any kind welcome!

\n
\n

👨🏻‍💻 Brought to you by the nice people behind UIengineering. 👨🏻‍💻

", + "content": "

UIengine

\n

Workbench for UI-driven development:\nA tool for developers and designers to build and document web sites and apps.

\n

Useful if you want to …

\n\n
\"UIengine:
\n

🚀 What it enables

\n\n

🏎 Quickstart

\n

To explore the features yourself you can quickly initialize a project with some demo content:

\n
mkdir uiengine-demo && cd uiengine-demo && npm init -y\nnpm install @uiengine/core @uiengine/adapter-html --save-dev\nnpx uiengine init --demo\nnpx uiengine build --serve --watch\n
\n

See the getting started guide\nfor further details.\nThere are also some introduction videos:

\n
\n

🖥 Examples and Screenshots

\n

To get an idea of what a real-world project looks like, see the React sample project:

\n\n

📘 Documentation

\n

See the documentation site, which is also generated with the UIengine.

\n

🔩 Technical TL;DR

\n

\"npm\"\n\"Standard\n\"Build\n\"Test\n\"Known\n\"Coverage\n\"All\n\"Maintained\n\"Support

\n

⚒ How does it work?

\n

At its core, the UIengine is a static site generator.\nIt can be used in standalone mode or integrated into your build process.

\n

➡️ Input: Your projects components, templates, pages and documentation

\n

⬅️ Output: A static site that can be used as a workbench for development and deployed documentation

\n

It consumes the files and structure of your project and generates the documentation based on this.\nIn development mode the output is regenerated on file change and synced to the browser.\nThis provides you with a development environment for creating the components, prototyping and writing the docs.

\n

💯 Main features

\n\n

For the evaluation process you might also want to have a look at the alternatives.

\n

🗜 Prerequisites

\n

UIengine requires at least Node.js 16.16 (tracking the latest active Node.js LTS version).\nThis guarantees a reasonable level of backwards compatibility.

\n

🖖 Alternatives

\n

OK, the UIengine looks really cool but it’s not quite what you are looking for?\nOr you want to first compare a few solutions to see which one is the right fit?\nHere are some other projects that you might want to evaluate:

\n\n

🛠 Development

\n

You like this project and are interested in participating?\nSee the development docs for an introduction and workflows when hacking on the UIengine.

\n

✨ Contributors

\n

Thanks goes to these wonderful people:

\n\n\n\n \n \n \n \n \n \n \n \n
\"Jan
Jan Persiel
🎨		\"Cos
Cos Anca
🎨 💻		\"Michael
Michael Geers
💻		\"Matteo
Matteo Fogli
💻		\"Jonas
Jonas Havers
📖		\"René
René Mäkeler
💡
\n\n

This project follows the all-contributors specification.\nContributions of any kind welcome!

\n
\n

👨🏻‍💻 Brought to you by the nice people behind UIengineering. 👨🏻‍💻

", "files": [ "/home/runner/work/uiengine/uiengine/docs/site/card.png", "/home/runner/work/uiengine/uiengine/docs/site/favicon.ico", @@ -222,6 +222,22 @@ "/home/runner/work/uiengine/uiengine/docs/site/styles/docs.css" ] }, + "advanced": { + "childIds": [ + "advanced/deployment", + "advanced/design-tokens", + "advanced/integrations", + "advanced/plugins", + "advanced/properties", + "advanced/ui" + ], + "title": "Advanced", + "id": "advanced", + "path": "advanced", + "sourcePath": "site/advanced", + "sourceFile": "site/advanced/page.config.js", + "type": "documentation" + }, "adapters": { "childIds": [ "adapters/css", @@ -244,22 +260,6 @@ "type": "documentation", "content": "

Adapters

\n

UIengine supports multiple templating engines by abstracting them with adapters.\nThis offers a templating language agnostic way for rendering and additional functionality.

\n

Adapters are registered for a particular file extension.\nUIengine will require an adapter when it needs to process a file with the given extension.

\n

You configure the adapters for your project in the project configuration file,\nusing the file extension as the adapter key:

\n
{\n  adapters: {\n    pug: '@uiengine/adapter-pug'\n  }\n}\n
\n

You can also provide a set of adapter specifict options – see the individual adapters documentation for details:

\n
{\n  adapters: {\n    pug: {\n      module: '@uiengine/adapter-pug',\n      options: {\n        pretty: true,\n        basedir: './src/components'\n      }\n    }\n  }\n}\n
\n

See the list of available adapters – either to find an existing one or for a starting point to create a custom one:

\n\n

Adapter Modules

\n

An adapter module has to export at least a render function.\nIn addition to that there are more optional hook functions, like setup and registerComponentFile.\nThere are also optional hooks for scaffolding new components and variants.

\n

Note: All of these functions are expected to work asynchronously and should return a Promise.

\n

Functions

\n

All the functions get called with the adapter options that are defined in the adapter config.\nThis set of opts is also extended with the following properties:

\n\n

render(opts, filePath, data)

\n

This function should render the file at filePath with the given data and return the rendered output.

\n\n

The return value can either be a string of HTML or a structured object containing the rendered HTML and an optional foot:

\n\n

setup(opts)

\n

This function is called before the project gets generated.\nYou can use this hook to e.g. register partials when working with Handlebars.

\n

registerComponentFile(opts, filePath)

\n

This function gets called for each component file, which has an associated adapter.\nUse this function to generate documentation from your components, e.g. extract properties from React PropTypes.

\n

When generating incremental changes during development you can also use this to update the registered component files.

\n

Scaffolding

\n

Adapters can also provide async functions to be used when scaffolding components and variants:

\n\n

Both functions should resolve with an array containing information about the files that need to be created.\nFor each file the array should contain an object providing a basename and data.

\n

Here is an example from the Pug adapter:

\n
const filesForComponent = (opts, componentName) =>\n  [\n    {\n      basename: `${componentName}.pug`,\n      data: `mixin ${componentName}()\\n  .${componentName}\\n    //- TODO: implement`\n    }\n  ]\n\nconst filesForVariant = (opts, componentName, variantName) =>\n  [\n    {\n      basename: `${variantName}.pug`,\n      data: `+${componentName}()`\n    }\n  ]\n
\n

To skip scaffolding for certain adapters, provide the skipScaffold option in the adapter configuration:

\n
{\n  adapters: {\n    pug: {\n      module: '@uiengine/adapter-pug',\n      options: {\n        skipScaffold: true\n      }\n    }\n  }\n}\n
" }, - "advanced": { - "childIds": [ - "advanced/deployment", - "advanced/design-tokens", - "advanced/integrations", - "advanced/plugins", - "advanced/properties", - "advanced/ui" - ], - "title": "Advanced", - "id": "advanced", - "path": "advanced", - "sourcePath": "site/advanced", - "sourceFile": "site/advanced/page.config.js", - "type": "documentation" - }, "basics": { "childIds": [ "basics/getting-started", @@ -289,6 +289,72 @@ "sourceFile": "site/development/page.config.js", "type": "documentation" }, + "advanced/deployment": { + "childIds": [], + "id": "advanced/deployment", + "title": "Deployment", + "isTitleFromHeading": true, + "path": "advanced/deployment", + "sourcePath": "site/advanced/deployment", + "readmeFile": "site/advanced/deployment/README.md", + "type": "documentation", + "content": "

Deployment

\n

As the output is a single-page website, the deployment requires some server configuration.

\n

Without a proper server configuration, the users will get a 404 error if they access pages ther than the homepage directly in their browser.\nTo fix the issue, all you need to do is add a simple catch-all fallback route to your server.\nIf the URL doesn’t match any static assets, it should serve the same index.html page that your UIengine output lives in.

\n

Here you can find some examples.

\n

nginx

\n
location / {\n  try_files $uri $uri/ /index.html;\n}\n
\n

Apache

\n
<IfModule mod_rewrite.c>\n  RewriteEngine On\n  RewriteBase /\n  RewriteRule ^index\\.html$ - [L]\n  RewriteCond %{REQUEST_FILENAME} !-f\n  RewriteCond %{REQUEST_FILENAME} !-d\n  RewriteRule . /index.html [L]\n</IfModule>\n
\n

Express with Node.js

\n

For Node.js/Express, consider using connect-history-api-fallback middleware.

\n

Native Node.js

\n
const { createServer } = require('http')\nconst { readFile } = require('fs')\nconst PORT = 80\n\ncreateServer((req, res) => {\n  readFile('index.html', 'utf-8', (err, content) => {\n    if (err) {\n      console.error('Cannot open "index.html" file.')\n    }\n\n    res.writeHead(200, {\n      'Content-Type': 'text/html; charset=utf-8'\n    })\n\n    res.end(content)\n  })\n}).listen(PORT, () => {\n  console.log('Server listening on: http://localhost:%s', PORT)\n})\n
" + }, + "advanced/design-tokens": { + "childIds": [], + "id": "advanced/design-tokens", + "title": "Design Tokens", + "isTitleFromHeading": true, + "path": "advanced/design-tokens", + "sourcePath": "site/advanced/design-tokens", + "readmeFile": "site/advanced/design-tokens/README.md", + "type": "documentation", + "content": "

Design Tokens

\n

The UIengine interface includes templates for displaying various types of design tokens.

\n
\n

Tokens definition

\n

The design tokens are listed under the tokens key of a page.config.js file:

\n
module.exports = {\n  tokens: [\n    {\n      type: 'size',\n      name: 'S',\n      value: '.5rem'\n    },\n    {\n      type: 'size',\n      name: 'M',\n      value: '1rem'\n    },\n    {\n      type: 'size',\n      name: 'L',\n      value: '1.5rem'\n    },\n    {\n      type: 'size',\n      name: 'XL',\n      value: '3rem'\n    }\n  ]\n}\n
\n

Each token consists of the following attributes:

\n\n

These attributes are optional:

\n\n

Types

\n

category

\n

The tokens can also be seperated into multiple categories.

\n

The category type supports the following attributes:

\n\n
module.exports = {\n  title: 'Colors',\n  tokens: [\n    {\n      type: 'category',\n      name: 'Brand',\n      tokens: [\n        {\n          type: 'color',\n          name: 'brandPrimary',\n          value: 'yellow'\n        },\n        {\n          type: 'color',\n          name: 'brandSecondary',\n          value: 'blue'\n        }\n      ]\n    },\n    {\n      type: 'category',\n      name: 'Neutral',\n      tokens: [\n        {\n          type: 'color',\n          name: 'neutralWhite',\n          value: '#FFF'\n        },\n        {\n          type: 'color',\n          name: 'neutralBlack',\n          value: '#000'\n        }\n      ]\n    }\n  ]\n}\n
\n

color

\n

The color type supports the following attributes:

\n\n
module.exports = {\n  title: 'Colors',\n  tokens: [\n    {\n      type: 'color',\n      name: 'Brand Primary',\n      value: 'yellow',\n      variable: '--brand-primary'\n    },\n    {\n      type: 'color',\n      name: 'Brand Secondary',\n      value: 'blue',\n      variable: '--brand-secondary'\n    },\n    {\n      type: 'color',\n      name: 'Background',\n      value: 'blue',\n      reference: 'Brand Secondary'\n    }\n  ]\n}\n
\n

font

\n

The font type supports the following attributes:

\n\n
module.exports = {\n  title: 'Fonts',\n  tokens: [\n    {\n      type: 'category',\n      name: 'Arial',\n      tokens: [\n        {\n          type: 'font',\n          fontweight: 'light / 100',\n          value: 'font-family: Arial; font-weight: 100;'\n        },\n        {\n          type: 'font',\n          fontweight: 'regular / 400',\n          value: 'font-family: Arial; font-weight: 400;'\n        },\n        {\n          type: 'font',\n          fontweight: 'bold / 800',\n          value: 'font-family: Arial; font-weight: 800;'\n        }\n      ]\n    },\n    {\n      type: 'category',\n      name: 'Lato',\n      tokens: [\n        {\n          type: 'font',\n          fontweight: 'regular',\n          value: 'font-family: Lato;',\n          variable: 'Lato',\n          description: 'Use wisely.',\n          text: 'Just some custom sample text to show the usage of this font.',\n          license: 'Google Fonts',\n          sizes: ['24px', '18px', '14px']\n        }\n      ]\n    }\n  ]\n}\n
\n

icon

\n

The icon type supports the following attributes:

\n\n
module.exports = {\n  title: 'Icons',\n  layout: 'grid',  // 'grid' is default, the other option is 'table'\n  tokens: [\n    {\n      type: 'icon',\n      name: 'Search',\n      value: '<i class="search icon"></i>',\n      variable: 'search'\n    },\n    {\n      type: 'icon',\n      name: 'Check',\n      value: '<i class="green check icon"></i>',\n      description: 'Display successful user input',\n      variable: 'green check'\n    },\n    {\n      type: 'icon',\n      name: 'Error',\n      value: '<i class="red error icon"></i>',\n      description: 'Error hints and messages',\n      variable: 'red error'\n    }\n  ]\n}\n
\n

border-width

\n

The border-width type supports the following attributes:

\n\n
module.exports = {\n  title: 'Border Widths',\n  tokens: [\n    {\n      name: 'Border Width Thin',\n      value: '1px',\n      variable: '$border-width-thin'\n    },\n    {\n      name: 'Border Width Thick',\n      value: '4px',\n      variable: '$border-width-thick'\n    }\n  ]\n}\n
\n

border-style

\n

The border-style type supports the following attributes:

\n\n
module.exports = {\n  title: 'Border Styles',\n  tokens: [\n    {\n      name: 'Border Style Solid',\n      value: 'solid',\n      variable: '$border-style-solid'\n    },\n    {\n      name: 'Border Style Dashed',\n      value: 'dashed',\n      variable: '$border-style-dashed'\n    }\n  ]\n}\n
\n

border-radius

\n

The border-radius type supports the following attributes:

\n\n
module.exports = {\n  title: 'Border Radius',\n  tokens: [\n    {\n      name: 'Border Radius Default',\n      value: '6px',\n      variable: '$border-radius-default'\n    },\n    {\n      name: 'Border Radius Pill',\n      value: '20rem',\n      variable: '$border-radius-pill'\n    }\n  ]\n}\n
\n

box-shadow

\n

The box-shadow type supports the following attributes:

\n\n
module.exports = {\n  title: 'Box Shadows',\n  tokens: [\n    {\n      name: 'Box Shadow Default',\n      value: '0 2px 6px 0 rgba(0, 41, 77, 0.1)',\n      variable: '$box-shadow-default'\n    },\n    {\n      name: 'Box Shadow Modal',\n      value: '0 2px 20px 0 rgba(0, 0, 0, 0.2)',\n      variable: '$box-shadow-modal'\n    }\n  ]\n}\n
\n

opacity

\n

The opacity type supports the following attributes:

\n\n
module.exports = {\n  title: 'Opacity',\n  tokens: [\n    {\n      name: 'Opacity 30%',\n      value: '0.3',\n      variable: '$opacity-30'\n    },\n    {\n      name: 'Opacity 75%',\n      value: '0.75',\n      variable: '$opacity-75'\n    }\n  ]\n}\n
" + }, + "advanced/integrations": { + "childIds": [], + "id": "advanced/integrations", + "title": "Integrations", + "isTitleFromHeading": true, + "path": "advanced/integrations", + "sourcePath": "site/advanced/integrations", + "readmeFile": "site/advanced/integrations/README.md", + "type": "documentation", + "content": "

Integrations

\n

Gulp

\n

To integrate the UIengine into your Gulp build you have to add the following lines of code to your Gulpfile:

\n
const gulp = require('gulp')\nconst UIengine = require('@uiengine/core')\n\nconst isDev = process.env.NODE_ENV !== 'production'\n\ngulp.task('uiengine', done => {\n  const opts = {\n    serve: isDev,\n    watch: isDev\n  }\n\n  UIengine.build(opts)\n    .then(() => { done() })\n    .catch(err => { done(err) })\n})\n
\n

The UIengine.build() function accepts an options object with the following optional properties:

\n\n

Note: To use the serve and watch options, you will also need to install two optional dependencies.\nYou can do so by adding the following packages to you projects devDependencies:

\n\n

In case your project has additional files that should trigger a rebuild you can pass them as a String or Array for the watch option:

\n
gulp.task('uiengine', done => {\n  const opts = {\n    serve: isDev,\n    watch: isDev ? ['src/data/*.json', 'src/custom/**/*.md'] : false\n  }\n\n  UIengine.build(opts)\n    .then(() => { done() })\n    .catch(err => { done(err) })\n})\n
\n

html-sketchapp

\n

The html-sketchapp functionality is integrated via a html-sketchapp-cli compatible export.\nIt generates Sketch libraries for your component variants.

\n

The UIengine generates the /_sketch/THEME_ID.html file which can be used with html-sketchapp-cli.

\n

Theo

\n

Please note: The Theo integration is now deprecated, docs stay as reference for older versions.

\n

You can integrate and consume design tokens defined with the Theo tokens spec.

\n

You need the @uiengine/bridge-theo package for this.

\n

The UIengine integration can be used inside the page.config.js:

\n
const { resolve } = require('path')\nconst convert = require('@uiengine/bridge-theo')\n\nconst filePath = resolve(__dirname, 'colors.yml')\n\nmodule.exports = {\n  title: 'Colors',\n  tokens: convert(filePath)\n}\n
\n

The transformations converts your Theo props into a format that can be rendered by the UIengine tokens template.\nFor details on the format see the design token docs.

\n

You can also pass a modification callback to the convert function.\nThis allows you to further modify the property data:

\n
const { resolve } = require('path')\nconst convert = require('@uiengine/bridge-theo')\n\nconst filePath = resolve(__dirname, 'colors.yml')\nconst titleize = string => string.replace(/^color/, '').replace(/([A-Z\\d]+)/g, ' $1').replace(/^./, str => str.toUpperCase())\nconst variablize = string => `$${string.replace(/([a-z])([A-Z\\d]+)/g, '$1-$2').replace(/\\s+/g, '-').toLowerCase()}`\nconst modify = prop => {\n  const { name, reference } = prop\n  prop.name = titleize(name)\n  prop.variable = variablize(name)\n  if (reference) prop.reference = titleize(reference)\n  return prop\n}\n\nmodule.exports = {\n  title: 'Colors',\n  tokens: convert(filePath, modify)\n}\n
" + }, + "advanced/plugins": { + "childIds": [], + "id": "advanced/plugins", + "title": "Plugins", + "isTitleFromHeading": true, + "path": "advanced/plugins", + "sourcePath": "site/advanced/plugins", + "readmeFile": "site/advanced/plugins/README.md", + "type": "documentation", + "content": "

Plugins

\n

You configure the plugins for your project in the project configuration file:

\n
{\n  plugins: [\n    {\n      module: '@uiengine/plugin-preview-toggle-class'\n    }\n  }\n}\n
\n

You can also provide a set of options – see the individual plugins documentation for details:

\n
{\n  plugins: [\n    {\n      module: '@uiengine/plugin-preview-toggle-class',\n      options: {\n        title: 'Toggle Grid',\n        selector: 'body',\n        className: 'show-grid'\n      }\n    }\n  ]\n}\n
\n

See the list of available plugins – either to find an existing one or for a starting point to create a custom one:

\n\n

Plugin Modules

\n

A plugin module has to export at least a setup function.

\n

Functions

\n

All the functions get called with the plugin options that are defined in the plugin config.

\n

Note: All of these functions are expected to work asynchronously and should return a Promise.

\n

setup(opts, api)

\n

This function is called on project initialization.\nYou can use this hook to configure your plugins features via the api.

\n

TODO: API description

" + }, + "advanced/properties": { + "childIds": [], + "id": "advanced/properties", + "title": "Properties", + "isTitleFromHeading": true, + "path": "advanced/properties", + "sourcePath": "site/advanced/properties", + "readmeFile": "site/advanced/properties/README.md", + "type": "documentation", + "content": "

Properties

\n

You can document the component properties in the component config file.

\n

List the components using the name as key and the definition for each property as value:

\n
module.exports = {\n  properties: {\n    '+episode(episode)': {\n      episode: {\n        type: 'Episode',\n        required: true\n      }\n    },\n    '+cta(title, url)': {\n      title: {\n        type: 'String',\n        description: 'Button-Title',\n        required: true\n      },\n      url: {\n        type: 'String',\n        description: 'URL the button leads to',\n        required: true\n      }\n    }\n  }\n}\n
\n

The name (e.g. +episode(episode)) is an arbitrary value and will be displayed as the title.\nYou can use it to describe the code that should be used to render the component – like the example above for a Pug component.

" + }, + "advanced/ui": { + "childIds": [], + "id": "advanced/ui", + "title": "User Interface", + "isTitleFromHeading": true, + "path": "advanced/ui", + "sourcePath": "site/advanced/ui", + "readmeFile": "site/advanced/ui/README.md", + "type": "documentation", + "content": "

User Interface

\n

Configuration

\n

This is what the full options look like:

\n
{\n  ui: {\n    lang: 'en',\n    hljs: 'atom-one-dark',\n    base: '/',\n    repoBaseUrl: 'https://github.com/dennisreimann/uiengine/blob/master/test/project/',\n    customStylesFile: '/custom-styles-file.css',\n    analyticsId: 'UA-XXX-X',\n    debug: false,\n    cache: true,\n\n    breakpoints: {\n      XS: 320,\n      S: 560,\n      M: 760,\n      L: 960,\n      XL: 1280\n    },\n\n    viewports: {\n      Phone: {\n        width: 320\n      },\n      Tablet: {\n        width: 768\n      },\n      Desktop: {\n        width: 1280\n      }\n    },\n\n    locales: {\n      en: {\n        // custom locale overrides\n      }\n    },\n\n    meta: [\n      {\n        tag: 'link',\n        attrs: {\n          rel: 'icon',\n          href: '/my-special-favicon.ico'\n        }\n      }\n    ],\n\n    foot: '<script src="/scripts/my-custom-script.js"></script>'\n  }\n}\n
\n

lang

\n

Localization language for the interface. Available options:

\n\n

Feel free to send a pull request with additional localizations!

\n

hljs

\n

The highlight.js theme for the code blocks, defaults to atom-one-dark.\nFor a list of available options see the highlight.js demo.

\n

customStylesFile

\n

The path to a css files containing variable overrides and extensions for the UI.\nFor an example see the custom styles file of the test project.

\n

analyticsId

\n

Optionally you can provide an analyticsId (from Google Analytics UA-XXX-X) to track the site.

\n

base

\n

Sets the base path for the output.\nDefaults to /.

\n

repoBaseUrl

\n

Sets the repository web view base URL (e.g. for GitHub/GitLab).\nThis adds a link for components and pages to view/edit the corresponding files in the repo.\nSet this to the blob resource for a particular branch, e.g. https://github.com/dennisreimann/uiengine/blob/master/test/project/.

\n

debug

\n

Enable debug output, most likely to be used during UI development.

\n

Available options:

\n\n

cache

\n

Enable template cache, most likely to be disabled during UI development.

\n

Available options:

\n\n

breakpoints

\n

The breakpoints defined here will be shown in the preview settings.\nDeclare the breakpoints with the name as key and the minimum media query pixel being the value:

\n
breakpoints: {\n  XS: 320,\n  S: 560,\n  M: 768,\n  L: 960,\n  XL: 1280\n}\n
\n

viewports

\n

The viewports defined here will be shown in the preview settings.\nDeclare the viewports with the name as key and the width (required) and height (optional) being the value:

\n
viewports: {\n  Phone: {\n    width: 320\n  },\n  Tablet: {\n    width: 768\n  },\n  Desktop: {\n    width: 1280\n  }\n}\n
\n

If the height is defined, the preview container will be scrollable.\nIt the height is omitted, the preview content will define the height – just like with breakpoints.

\n

defaultPreviewMode

\n

When viewports and breakpoints are defined, breakpoints take precedence.\nYou can also define defaultPreviewMode: 'viewports' to switch this default.

\n

Available options:

\n\n

The preview mode can also be switched in the preference settings.

\n

locales

\n

You can override the whole locale or specific keys.\nThe keys you provide get merged deeply with the existing locales.

\n

meta

\n

An optional list of tags to be included in the <head>:

\n
meta: [\n  {\n    tag: 'link',\n    attrs: {\n      rel: 'icon',\n      href: '/my-special-favicon.ico'\n    }\n  }\n]\n
\n

foot

\n

Optional tags for the end of the body.

" + }, "adapters/css": { "childIds": [], "id": "adapters/css", @@ -298,7 +364,7 @@ "sourcePath": "site/adapters/css", "readmeFile": "site/adapters/css/README.md", "type": "documentation", - "content": "

CSS

\n

🚦 State: Production ready

\n
\"npm\"
\n

This adapter parses css files for custom properties.\nYou can use it to display theme settings for your components.\nThe adapter extracts css variables and constructs a data structure that gets displayed in the UI.

\n

Configuration

\n

Plain and simple:

\n
{\n  adapters: {\n    css: '@uiengine/adapter-css'\n  }\n}\n
\n

With options:

\n
{\n  adapters: {\n    css: {\n      module: '@uiengine/adapter-css',\n      options: {\n        componentThemesDir: 'themes', // 'themes' is the default\n        globalThemesDir: './src/styles/themes'\n      }\n    }\n  }\n}\n
\n

The componentThemesDir option is the directory name of the component custom properties (defaults to “themes”).\nThe globalThemesDir option is the path to the directory containing the app-wide custom properties (optional).

\n

Example

\n

File structure:

\n
src\n|___styles\n|   |___themes              <- globalThemesDir\n|   |   |___funky.css\n|   |   |___plain.css\n|   |___app.css\n|___components\n    |___button\n        |___themes          <- componentThemesDir\n        |   |___funky.css\n        |   |___plain.css\n        |___button.css\n
\n

See the test project for an example of the file contents.

\n

For an example of the output have a look at the “Themes” tab of the label component sample.

" + "content": "

CSS

\n

🚦 State: Production ready

\n
\"npm\"
\n

This adapter parses css files for custom properties.\nYou can use it to display theme settings for your components.\nThe adapter extracts css variables and constructs a data structure that gets displayed in the UI.

\n

Configuration

\n

Plain and simple:

\n
{\n  adapters: {\n    css: '@uiengine/adapter-css'\n  }\n}\n
\n

With options:

\n
{\n  adapters: {\n    css: {\n      module: '@uiengine/adapter-css',\n      options: {\n        componentThemesDir: 'themes', // 'themes' is the default\n        globalThemesDir: './src/styles/themes'\n      }\n    }\n  }\n}\n
\n

The componentThemesDir option is the directory name of the component custom properties (defaults to “themes”).\nThe globalThemesDir option is the path to the directory containing the app-wide custom properties (optional).

\n

Example

\n

File structure:

\n
src\n|___styles\n|   |___themes              <- globalThemesDir\n|   |   |___funky.css\n|   |   |___plain.css\n|   |___app.css\n|___components\n    |___button\n        |___themes          <- componentThemesDir\n        |   |___funky.css\n        |   |___plain.css\n        |___button.css\n
\n

See the test project for an example of the file contents.

\n

For an example of the output have a look at the “Themes” tab of the label component sample.

" }, "adapters/ejs": { "childIds": [], @@ -399,72 +465,6 @@ "type": "documentation", "content": "

Webpack

\n

🚦 State: Production ready

\n
\"npm\"
\n

Configuration

\n

This adapter needs the following options:

\n\n
{\n  adapters: {\n    vue: {\n      module: '@uiengine/adapter-webpack',\n      options: require('./vue-adapter-options')\n    },\n    jsx: {\n      module: '@uiengine/adapter-webpack',\n      options: require('./react-adapter-options')\n    }\n  }\n}\n
\n

See the test project lib and webpack folder for full details on how to configure the adapter.

\n

Note: This feature requires the <!-- uiengine:foot --> comment to be present in the template.

\n

Webpack build

\n

The adapter builds the components/variants by merging your Webpack configuration with some custom additions.\nFor instance you can use the process.env.target variable provided by the DefinePlugin to check whether rendering occurs on the server or client:

\n
if (process.env.target === 'client') window.doSomething()\n
\n

The build output is stored in the ${config.target}/_webpack directory.

\n

Options for Vue

\n

The vue-adapter-options.js file required above might look like this:

\n
const { resolve } = require('path')\n\n// this depends on how you handle your webpack config:\n// in this case it exports an array of configs, bur you\n// might as well import them from separate files.\nconst [clientConfig, serverConfig] = require('./webpack.conf')\n\n// see file contents below\nconst serverRenderPath = resolve(__dirname, 'vue-server-render.js')\nconst clientRenderPath = resolve(__dirname, 'vue-client-render.js')\n\nconst properties = 'vue'\n\nmodule.exports = {\n  serverConfig,\n  clientConfig,\n  serverRenderPath,\n  clientRenderPath,\n  properties\n}\n
\n

For details on the filesForComponent and filesForVariant options see the\nadapter scaffolding docs and the accompanying\ntest project file.

\n

The vue-server-render.js file might look like this:

\n
const Vue = require('vue')\nconst { createRenderer } = require('vue-server-renderer')\n\nconst renderer = createRenderer({\n  template: (result, context) => {\n    const state = context.renderState()\n    const styles = context.renderStyles()\n    const scripts = context.renderScripts()\n\n    return styles + result + state + scripts\n  }\n})\n\nmodule.exports = function serverRender (Component, props) {\n  return renderer.renderToString(\n    new Vue({\n      render (h) {\n        return h(Component, { props })\n      }\n    }), { state: props }\n  )\n}\n
\n

The vue-client-render.js file might look like this:

\n
import Vue from 'vue'\n\nexport default function clientRender (Component, props) {\n  return new Vue({\n    el: '#app', // your app container selector defined in the uiengine preview template\n    render (h) {\n      return h(Component, { props })\n    }\n  })\n}\n
\n

Options for React

\n

The react-adapter-options.js file required above might look like this:

\n
const { resolve } = require('path')\n\n// this depends on how you handle your webpack config:\n// in this case it exports an array of configs, bur you\n// might as well import them from separate files.\nconst [clientConfig, serverConfig] = require('./webpack.conf')\n\n// see file contents below\nconst serverRenderPath = resolve(__dirname, 'react-server-render.js')\nconst clientRenderPath = resolve(__dirname, 'react-client-render.js')\n\nconst properties = 'prop-types'\n\nmodule.exports = {\n  serverConfig,\n  clientConfig,\n  serverRenderPath,\n  clientRenderPath,\n  properties\n}\n
\n

For details on the filesForComponent and filesForVariant options see the\nadapter scaffolding docs and the accompanying\ntest project file.

\n

The react-server-render.js file might look like this:

\n
const { renderToString } = require('react-dom/server')\n\nmodule.exports = function serverRender (Component, props) {\n  return renderToString(Component(props))\n}\n
\n

The react-client-render.js file might look like this:

\n
import React from 'react'\nimport { hydrateRoot } from 'react-dom/client'\n\nexport default function clientRender (Component, props) {\n  const app = document.getElementById('app') // your app container defined in the uiengine preview template\n  hydrateRoot(app, React.createElement(Component, props))\n}\n\n
" }, - "advanced/deployment": { - "childIds": [], - "id": "advanced/deployment", - "title": "Deployment", - "isTitleFromHeading": true, - "path": "advanced/deployment", - "sourcePath": "site/advanced/deployment", - "readmeFile": "site/advanced/deployment/README.md", - "type": "documentation", - "content": "

Deployment

\n

As the output is a single-page website, the deployment requires some server configuration.

\n

Without a proper server configuration, the users will get a 404 error if they access pages ther than the homepage directly in their browser.\nTo fix the issue, all you need to do is add a simple catch-all fallback route to your server.\nIf the URL doesn’t match any static assets, it should serve the same index.html page that your UIengine output lives in.

\n

Here you can find some examples.

\n

nginx

\n
location / {\n  try_files $uri $uri/ /index.html;\n}\n
\n

Apache

\n
<IfModule mod_rewrite.c>\n  RewriteEngine On\n  RewriteBase /\n  RewriteRule ^index\\.html$ - [L]\n  RewriteCond %{REQUEST_FILENAME} !-f\n  RewriteCond %{REQUEST_FILENAME} !-d\n  RewriteRule . /index.html [L]\n</IfModule>\n
\n

Express with Node.js

\n

For Node.js/Express, consider using connect-history-api-fallback middleware.

\n

Native Node.js

\n
const { createServer } = require('http')\nconst { readFile } = require('fs')\nconst PORT = 80\n\ncreateServer((req, res) => {\n  readFile('index.html', 'utf-8', (err, content) => {\n    if (err) {\n      console.error('Cannot open "index.html" file.')\n    }\n\n    res.writeHead(200, {\n      'Content-Type': 'text/html; charset=utf-8'\n    })\n\n    res.end(content)\n  })\n}).listen(PORT, () => {\n  console.log('Server listening on: http://localhost:%s', PORT)\n})\n
" - }, - "advanced/design-tokens": { - "childIds": [], - "id": "advanced/design-tokens", - "title": "Design Tokens", - "isTitleFromHeading": true, - "path": "advanced/design-tokens", - "sourcePath": "site/advanced/design-tokens", - "readmeFile": "site/advanced/design-tokens/README.md", - "type": "documentation", - "content": "

Design Tokens

\n

The UIengine interface includes templates for displaying various types of design tokens.

\n
\n

Tokens definition

\n

The design tokens are listed under the tokens key of a page.config.js file:

\n
module.exports = {\n  tokens: [\n    {\n      type: 'size',\n      name: 'S',\n      value: '.5rem'\n    },\n    {\n      type: 'size',\n      name: 'M',\n      value: '1rem'\n    },\n    {\n      type: 'size',\n      name: 'L',\n      value: '1.5rem'\n    },\n    {\n      type: 'size',\n      name: 'XL',\n      value: '3rem'\n    }\n  ]\n}\n
\n

Each token consists of the following attributes:

\n\n

These attributes are optional:

\n\n

Types

\n

category

\n

The tokens can also be seperated into multiple categories.

\n

The category type supports the following attributes:

\n\n
module.exports = {\n  title: 'Colors',\n  tokens: [\n    {\n      type: 'category',\n      name: 'Brand',\n      tokens: [\n        {\n          type: 'color',\n          name: 'brandPrimary',\n          value: 'yellow'\n        },\n        {\n          type: 'color',\n          name: 'brandSecondary',\n          value: 'blue'\n        }\n      ]\n    },\n    {\n      type: 'category',\n      name: 'Neutral',\n      tokens: [\n        {\n          type: 'color',\n          name: 'neutralWhite',\n          value: '#FFF'\n        },\n        {\n          type: 'color',\n          name: 'neutralBlack',\n          value: '#000'\n        }\n      ]\n    }\n  ]\n}\n
\n

color

\n

The color type supports the following attributes:

\n\n
module.exports = {\n  title: 'Colors',\n  tokens: [\n    {\n      type: 'color',\n      name: 'Brand Primary',\n      value: 'yellow',\n      variable: '--brand-primary'\n    },\n    {\n      type: 'color',\n      name: 'Brand Secondary',\n      value: 'blue',\n      variable: '--brand-secondary'\n    },\n    {\n      type: 'color',\n      name: 'Background',\n      value: 'blue',\n      reference: 'Brand Secondary'\n    }\n  ]\n}\n
\n

font

\n

The font type supports the following attributes:

\n\n
module.exports = {\n  title: 'Fonts',\n  tokens: [\n    {\n      type: 'category',\n      name: 'Arial',\n      tokens: [\n        {\n          type: 'font',\n          fontweight: 'light / 100',\n          value: 'font-family: Arial; font-weight: 100;'\n        },\n        {\n          type: 'font',\n          fontweight: 'regular / 400',\n          value: 'font-family: Arial; font-weight: 400;'\n        },\n        {\n          type: 'font',\n          fontweight: 'bold / 800',\n          value: 'font-family: Arial; font-weight: 800;'\n        }\n      ]\n    },\n    {\n      type: 'category',\n      name: 'Lato',\n      tokens: [\n        {\n          type: 'font',\n          fontweight: 'regular',\n          value: 'font-family: Lato;',\n          variable: 'Lato',\n          description: 'Use wisely.',\n          text: 'Just some custom sample text to show the usage of this font.',\n          license: 'Google Fonts',\n          sizes: ['24px', '18px', '14px']\n        }\n      ]\n    }\n  ]\n}\n
\n

icon

\n

The icon type supports the following attributes:

\n\n
module.exports = {\n  title: 'Icons',\n  layout: 'grid',  // 'grid' is default, the other option is 'table'\n  tokens: [\n    {\n      type: 'icon',\n      name: 'Search',\n      value: '<i class="search icon"></i>',\n      variable: 'search'\n    },\n    {\n      type: 'icon',\n      name: 'Check',\n      value: '<i class="green check icon"></i>',\n      description: 'Display successful user input',\n      variable: 'green check'\n    },\n    {\n      type: 'icon',\n      name: 'Error',\n      value: '<i class="red error icon"></i>',\n      description: 'Error hints and messages',\n      variable: 'red error'\n    }\n  ]\n}\n
\n

border-width

\n

The border-width type supports the following attributes:

\n\n
module.exports = {\n  title: 'Border Widths',\n  tokens: [\n    {\n      name: 'Border Width Thin',\n      value: '1px',\n      variable: '$border-width-thin'\n    },\n    {\n      name: 'Border Width Thick',\n      value: '4px',\n      variable: '$border-width-thick'\n    }\n  ]\n}\n
\n

border-style

\n

The border-style type supports the following attributes:

\n\n
module.exports = {\n  title: 'Border Styles',\n  tokens: [\n    {\n      name: 'Border Style Solid',\n      value: 'solid',\n      variable: '$border-style-solid'\n    },\n    {\n      name: 'Border Style Dashed',\n      value: 'dashed',\n      variable: '$border-style-dashed'\n    }\n  ]\n}\n
\n

border-radius

\n

The border-radius type supports the following attributes:

\n\n
module.exports = {\n  title: 'Border Radius',\n  tokens: [\n    {\n      name: 'Border Radius Default',\n      value: '6px',\n      variable: '$border-radius-default'\n    },\n    {\n      name: 'Border Radius Pill',\n      value: '20rem',\n      variable: '$border-radius-pill'\n    }\n  ]\n}\n
\n

box-shadow

\n

The box-shadow type supports the following attributes:

\n\n
module.exports = {\n  title: 'Box Shadows',\n  tokens: [\n    {\n      name: 'Box Shadow Default',\n      value: '0 2px 6px 0 rgba(0, 41, 77, 0.1)',\n      variable: '$box-shadow-default'\n    },\n    {\n      name: 'Box Shadow Modal',\n      value: '0 2px 20px 0 rgba(0, 0, 0, 0.2)',\n      variable: '$box-shadow-modal'\n    }\n  ]\n}\n
\n

opacity

\n

The opacity type supports the following attributes:

\n\n
module.exports = {\n  title: 'Opacity',\n  tokens: [\n    {\n      name: 'Opacity 30%',\n      value: '0.3',\n      variable: '$opacity-30'\n    },\n    {\n      name: 'Opacity 75%',\n      value: '0.75',\n      variable: '$opacity-75'\n    }\n  ]\n}\n
" - }, - "advanced/integrations": { - "childIds": [], - "id": "advanced/integrations", - "title": "Integrations", - "isTitleFromHeading": true, - "path": "advanced/integrations", - "sourcePath": "site/advanced/integrations", - "readmeFile": "site/advanced/integrations/README.md", - "type": "documentation", - "content": "

Integrations

\n

Gulp

\n

To integrate the UIengine into your Gulp build you have to add the following lines of code to your Gulpfile:

\n
const gulp = require('gulp')\nconst UIengine = require('@uiengine/core')\n\nconst isDev = process.env.NODE_ENV !== 'production'\n\ngulp.task('uiengine', done => {\n  const opts = {\n    serve: isDev,\n    watch: isDev\n  }\n\n  UIengine.build(opts)\n    .then(() => { done() })\n    .catch(err => { done(err) })\n})\n
\n

The UIengine.build() function accepts an options object with the following optional properties:

\n\n

Note: To use the serve and watch options, you will also need to install two optional dependencies.\nYou can do so by adding the following packages to you projects devDependencies:

\n\n

In case your project has additional files that should trigger a rebuild you can pass them as a String or Array for the watch option:

\n
gulp.task('uiengine', done => {\n  const opts = {\n    serve: isDev,\n    watch: isDev ? ['src/data/*.json', 'src/custom/**/*.md'] : false\n  }\n\n  UIengine.build(opts)\n    .then(() => { done() })\n    .catch(err => { done(err) })\n})\n
\n

html-sketchapp

\n

The html-sketchapp functionality is integrated via a html-sketchapp-cli compatible export.\nIt generates Sketch libraries for your component variants.

\n

The UIengine generates the /_sketch/THEME_ID.html file which can be used with html-sketchapp-cli.

\n

Theo

\n

Please note: The Theo integration is now deprecated, docs stay as reference for older versions.

\n

You can integrate and consume design tokens defined with the Theo tokens spec.

\n

You need the @uiengine/bridge-theo package for this.

\n

The UIengine integration can be used inside the page.config.js:

\n
const { resolve } = require('path')\nconst convert = require('@uiengine/bridge-theo')\n\nconst filePath = resolve(__dirname, 'colors.yml')\n\nmodule.exports = {\n  title: 'Colors',\n  tokens: convert(filePath)\n}\n
\n

The transformations converts your Theo props into a format that can be rendered by the UIengine tokens template.\nFor details on the format see the design token docs.

\n

You can also pass a modification callback to the convert function.\nThis allows you to further modify the property data:

\n
const { resolve } = require('path')\nconst convert = require('@uiengine/bridge-theo')\n\nconst filePath = resolve(__dirname, 'colors.yml')\nconst titleize = string => string.replace(/^color/, '').replace(/([A-Z\\d]+)/g, ' $1').replace(/^./, str => str.toUpperCase())\nconst variablize = string => `$${string.replace(/([a-z])([A-Z\\d]+)/g, '$1-$2').replace(/\\s+/g, '-').toLowerCase()}`\nconst modify = prop => {\n  const { name, reference } = prop\n  prop.name = titleize(name)\n  prop.variable = variablize(name)\n  if (reference) prop.reference = titleize(reference)\n  return prop\n}\n\nmodule.exports = {\n  title: 'Colors',\n  tokens: convert(filePath, modify)\n}\n
" - }, - "advanced/plugins": { - "childIds": [], - "id": "advanced/plugins", - "title": "Plugins", - "isTitleFromHeading": true, - "path": "advanced/plugins", - "sourcePath": "site/advanced/plugins", - "readmeFile": "site/advanced/plugins/README.md", - "type": "documentation", - "content": "

Plugins

\n

You configure the plugins for your project in the project configuration file:

\n
{\n  plugins: [\n    {\n      module: '@uiengine/plugin-preview-toggle-class'\n    }\n  }\n}\n
\n

You can also provide a set of options – see the individual plugins documentation for details:

\n
{\n  plugins: [\n    {\n      module: '@uiengine/plugin-preview-toggle-class',\n      options: {\n        title: 'Toggle Grid',\n        selector: 'body',\n        className: 'show-grid'\n      }\n    }\n  ]\n}\n
\n

See the list of available plugins – either to find an existing one or for a starting point to create a custom one:

\n\n

Plugin Modules

\n

A plugin module has to export at least a setup function.

\n

Functions

\n

All the functions get called with the plugin options that are defined in the plugin config.

\n

Note: All of these functions are expected to work asynchronously and should return a Promise.

\n

setup(opts, api)

\n

This function is called on project initialization.\nYou can use this hook to configure your plugins features via the api.

\n

TODO: API description

" - }, - "advanced/properties": { - "childIds": [], - "id": "advanced/properties", - "title": "Properties", - "isTitleFromHeading": true, - "path": "advanced/properties", - "sourcePath": "site/advanced/properties", - "readmeFile": "site/advanced/properties/README.md", - "type": "documentation", - "content": "

Properties

\n

You can document the component properties in the component config file.

\n

List the components using the name as key and the definition for each property as value:

\n
module.exports = {\n  properties: {\n    '+episode(episode)': {\n      episode: {\n        type: 'Episode',\n        required: true\n      }\n    },\n    '+cta(title, url)': {\n      title: {\n        type: 'String',\n        description: 'Button-Title',\n        required: true\n      },\n      url: {\n        type: 'String',\n        description: 'URL the button leads to',\n        required: true\n      }\n    }\n  }\n}\n
\n

The name (e.g. +episode(episode)) is an arbitrary value and will be displayed as the title.\nYou can use it to describe the code that should be used to render the component – like the example above for a Pug component.

" - }, - "advanced/ui": { - "childIds": [], - "id": "advanced/ui", - "title": "User Interface", - "isTitleFromHeading": true, - "path": "advanced/ui", - "sourcePath": "site/advanced/ui", - "readmeFile": "site/advanced/ui/README.md", - "type": "documentation", - "content": "

User Interface

\n

Configuration

\n

This is what the full options look like:

\n
{\n  ui: {\n    lang: 'en',\n    hljs: 'atom-one-dark',\n    base: '/',\n    repoBaseUrl: 'https://github.com/dennisreimann/uiengine/blob/master/test/project/',\n    customStylesFile: '/custom-styles-file.css',\n    analyticsId: 'UA-XXX-X',\n    debug: false,\n    cache: true,\n\n    breakpoints: {\n      XS: 320,\n      S: 560,\n      M: 760,\n      L: 960,\n      XL: 1280\n    },\n\n    viewports: {\n      Phone: {\n        width: 320\n      },\n      Tablet: {\n        width: 768\n      },\n      Desktop: {\n        width: 1280\n      }\n    },\n\n    locales: {\n      en: {\n        // custom locale overrides\n      }\n    },\n\n    meta: [\n      {\n        tag: 'link',\n        attrs: {\n          rel: 'icon',\n          href: '/my-special-favicon.ico'\n        }\n      }\n    ],\n\n    foot: '<script src="/scripts/my-custom-script.js"></script>'\n  }\n}\n
\n

lang

\n

Localization language for the interface. Available options:

\n\n

Feel free to send a pull request with additional localizations!

\n

hljs

\n

The highlight.js theme for the code blocks, defaults to atom-one-dark.\nFor a list of available options see the highlight.js demo.

\n

customStylesFile

\n

The path to a css files containing variable overrides and extensions for the UI.\nFor an example see the custom styles file of the test project.

\n

analyticsId

\n

Optionally you can provide an analyticsId (from Google Analytics UA-XXX-X) to track the site.

\n

base

\n

Sets the base path for the output.\nDefaults to /.

\n

repoBaseUrl

\n

Sets the repository web view base URL (e.g. for GitHub/GitLab).\nThis adds a link for components and pages to view/edit the corresponding files in the repo.\nSet this to the blob resource for a particular branch, e.g. https://github.com/dennisreimann/uiengine/blob/master/test/project/.

\n

debug

\n

Enable debug output, most likely to be used during UI development.

\n

Available options:

\n\n

cache

\n

Enable template cache, most likely to be disabled during UI development.

\n

Available options:

\n\n

breakpoints

\n

The breakpoints defined here will be shown in the preview settings.\nDeclare the breakpoints with the name as key and the minimum media query pixel being the value:

\n
breakpoints: {\n  XS: 320,\n  S: 560,\n  M: 768,\n  L: 960,\n  XL: 1280\n}\n
\n

viewports

\n

The viewports defined here will be shown in the preview settings.\nDeclare the viewports with the name as key and the width (required) and height (optional) being the value:

\n
viewports: {\n  Phone: {\n    width: 320\n  },\n  Tablet: {\n    width: 768\n  },\n  Desktop: {\n    width: 1280\n  }\n}\n
\n

If the height is defined, the preview container will be scrollable.\nIt the height is omitted, the preview content will define the height – just like with breakpoints.

\n

defaultPreviewMode

\n

When viewports and breakpoints are defined, breakpoints take precedence.\nYou can also define defaultPreviewMode: 'viewports' to switch this default.

\n

Available options:

\n\n

The preview mode can also be switched in the preference settings.

\n

locales

\n

You can override the whole locale or specific keys.\nThe keys you provide get merged deeply with the existing locales.

\n

meta

\n

An optional list of tags to be included in the <head>:

\n
meta: [\n  {\n    tag: 'link',\n    attrs: {\n      rel: 'icon',\n      href: '/my-special-favicon.ico'\n    }\n  }\n]\n
\n

foot

\n

Optional tags for the end of the body.

" - }, "basics/component": { "childIds": [], "id": "basics/component", @@ -529,7 +529,7 @@ "sourcePath": "site/development/changelog", "readmeFile": "site/development/changelog/README.md", "type": "documentation", - "content": "

Changelog

\n

[3.3.0] - 19.06.2022

\n

Added

\n\n

Changed

\n\n

[3.2.0] - 14.06.2021

\n

Added

\n\n

Changed

\n\n

[3.1.0] - 17.07.2020

\n

Changed

\n\n

Added

\n\n

[3.0.0] - 22.04.2020

\n

Added

\n\n

Changed

\n\n

Removed

\n\n

[2.6.0] - 17.01.2020

\n

Added

\n\n

Changed

\n\n

Fixes

\n\n

[2.5.0] - 2019-08-22

\n

Added

\n\n

Removed

\n\n

Changed

\n\n

[2.4.0] - 2019-07-24

\n

Added

\n\n

Removed

\n\n

Changed

\n\n

Fixes

\n\n

[2.3.0] - 2019-06-28

\n

Added

\n\n

[2.2.0] - 2019-05-09

\n

Added

\n\n

Removed

\n\n

[2.1.0] - 2019-04-25

\n

Added

\n\n

Changed

\n\n

Fixes

\n\n

[2.0.0] - 2019-01-28

\n

Added

\n\n

Changed

\n\n

Removed

\n\n
\n

[1.4.0] - 2018-11-01

\n

Added

\n\n

[1.3.0] - 2018-10-14

\n

Added

\n\n

Changed

\n\n

[1.2.0] - 2018-09-30

\n

Added

\n\n

Changed

\n\n

[1.1.0] - 2018-09-02

\n

Added

\n\n

Changed

\n\n

Fixed

\n\n

[1.0.0] - 2018-07-17

\n

First public stable release. 🎉

\n

For details see the\nUIengien 1.0 blog post.

\n

[0.23.0] - 2018-07-15

\n

Added

\n\n

Changed

\n\n

Fixed

\n\n

[0.22.0] - 2018-06-19

\n

Added

\n\n

Fixed

\n\n

[0.21.0] - 2018-06-11

\n

Added

\n\n

Changed

\n\n

Fixed

\n\n

[0.20.0] - 2018-05-24

\n

Added

\n\n

Changed

\n\n

[0.19.0] - 2018-04-14

\n

Added

\n\n

Changed

\n\n

[0.18.0] - 2018-04-02

\n

Changed

\n\n

[0.17.0] - 2018-04-02

\n

Added

\n\n

Changed

\n\n

[0.16.0] - 2018-03-11

\n

Added

\n\n

[0.15.0] - 2018-03-01

\n

Changed

\n\n

[0.14.0] - 2018-02-10

\n

Changed

\n\n

[0.13.0] - 2018-02-09

\n

Changed

\n\n
\n

All notable changes to this project will be documented in this file.

\n

The format is based on Keep a Changelog\nand this project adheres to Semantic Versioning.

" + "content": "

Changelog

\n

[3.3.0] - 19.06.2022

\n

Added

\n\n

Changed

\n\n

[3.2.0] - 14.06.2021

\n

Added

\n\n

Changed

\n\n

[3.1.0] - 17.07.2020

\n

Changed

\n\n

Added

\n\n

[3.0.0] - 22.04.2020

\n

Added

\n\n

Changed

\n\n

Removed

\n\n

[2.6.0] - 17.01.2020

\n

Added

\n\n

Changed

\n\n

Fixes

\n\n

[2.5.0] - 2019-08-22

\n

Added

\n\n

Removed

\n\n

Changed

\n\n

[2.4.0] - 2019-07-24

\n

Added

\n\n

Removed

\n\n

Changed

\n\n

Fixes

\n\n

[2.3.0] - 2019-06-28

\n

Added

\n\n

[2.2.0] - 2019-05-09

\n

Added

\n\n

Removed

\n\n

[2.1.0] - 2019-04-25

\n

Added

\n\n

Changed

\n\n

Fixes

\n\n

[2.0.0] - 2019-01-28

\n

Added

\n\n

Changed

\n\n

Removed

\n\n
\n

[1.4.0] - 2018-11-01

\n

Added

\n\n

[1.3.0] - 2018-10-14

\n

Added

\n\n

Changed

\n\n

[1.2.0] - 2018-09-30

\n

Added

\n\n

Changed

\n\n

[1.1.0] - 2018-09-02

\n

Added

\n\n

Changed

\n\n

Fixed

\n\n

[1.0.0] - 2018-07-17

\n

First public stable release. 🎉

\n

For details see the\nUIengien 1.0 blog post.

\n

[0.23.0] - 2018-07-15

\n

Added

\n\n

Changed

\n\n

Fixed

\n\n

[0.22.0] - 2018-06-19

\n

Added

\n\n

Fixed

\n\n

[0.21.0] - 2018-06-11

\n

Added

\n\n

Changed

\n\n

Fixed

\n\n

[0.20.0] - 2018-05-24

\n

Added

\n\n

Changed

\n\n

[0.19.0] - 2018-04-14

\n

Added

\n\n

Changed

\n\n

[0.18.0] - 2018-04-02

\n

Changed

\n\n

[0.17.0] - 2018-04-02

\n

Added

\n\n

Changed

\n\n

[0.16.0] - 2018-03-11

\n

Added

\n\n

[0.15.0] - 2018-03-01

\n

Changed

\n\n

[0.14.0] - 2018-02-10

\n

Changed

\n\n

[0.13.0] - 2018-02-09

\n

Changed

\n\n
\n

All notable changes to this project will be documented in this file.

\n

The format is based on Keep a Changelog\nand this project adheres to Semantic Versioning.

" }, "development/code-of-conduct": { "childIds": [], @@ -569,6 +569,25 @@ "type": "documentation", "title": "UIengine" }, + "advanced": { + "prevSiblingId": "basics", + "nextSiblingId": "adapters", + "childIds": [ + "advanced/deployment", + "advanced/design-tokens", + "advanced/integrations", + "advanced/plugins", + "advanced/properties", + "advanced/ui" + ], + "parentId": "index", + "id": "advanced", + "itemId": "advanced", + "isStructural": true, + "path": "/advanced/", + "type": "documentation", + "title": "Advanced" + }, "adapters": { "prevSiblingId": "advanced", "nextSiblingId": "development", @@ -591,25 +610,6 @@ "type": "documentation", "title": "Adapters" }, - "advanced": { - "prevSiblingId": "basics", - "nextSiblingId": "adapters", - "childIds": [ - "advanced/deployment", - "advanced/design-tokens", - "advanced/integrations", - "advanced/plugins", - "advanced/properties", - "advanced/ui" - ], - "parentId": "index", - "id": "advanced", - "itemId": "advanced", - "isStructural": true, - "path": "/advanced/", - "type": "documentation", - "title": "Advanced" - }, "basics": { "nextSiblingId": "advanced", "childIds": [ @@ -642,6 +642,64 @@ "type": "documentation", "title": "Development" }, + "advanced/deployment": { + "nextSiblingId": "advanced/design-tokens", + "parentId": "advanced", + "id": "advanced/deployment", + "itemId": "advanced/deployment", + "path": "/advanced/deployment/", + "type": "documentation", + "title": "Deployment" + }, + "advanced/design-tokens": { + "prevSiblingId": "advanced/deployment", + "nextSiblingId": "advanced/integrations", + "parentId": "advanced", + "id": "advanced/design-tokens", + "itemId": "advanced/design-tokens", + "path": "/advanced/design-tokens/", + "type": "documentation", + "title": "Design Tokens" + }, + "advanced/integrations": { + "prevSiblingId": "advanced/design-tokens", + "nextSiblingId": "advanced/plugins", + "parentId": "advanced", + "id": "advanced/integrations", + "itemId": "advanced/integrations", + "path": "/advanced/integrations/", + "type": "documentation", + "title": "Integrations" + }, + "advanced/plugins": { + "prevSiblingId": "advanced/integrations", + "nextSiblingId": "advanced/properties", + "parentId": "advanced", + "id": "advanced/plugins", + "itemId": "advanced/plugins", + "path": "/advanced/plugins/", + "type": "documentation", + "title": "Plugins" + }, + "advanced/properties": { + "prevSiblingId": "advanced/plugins", + "nextSiblingId": "advanced/ui", + "parentId": "advanced", + "id": "advanced/properties", + "itemId": "advanced/properties", + "path": "/advanced/properties/", + "type": "documentation", + "title": "Properties" + }, + "advanced/ui": { + "prevSiblingId": "advanced/properties", + "parentId": "advanced", + "id": "advanced/ui", + "itemId": "advanced/ui", + "path": "/advanced/ui/", + "type": "documentation", + "title": "User Interface" + }, "adapters/css": { "nextSiblingId": "adapters/ejs", "parentId": "adapters", @@ -740,64 +798,6 @@ "type": "documentation", "title": "Webpack" }, - "advanced/deployment": { - "nextSiblingId": "advanced/design-tokens", - "parentId": "advanced", - "id": "advanced/deployment", - "itemId": "advanced/deployment", - "path": "/advanced/deployment/", - "type": "documentation", - "title": "Deployment" - }, - "advanced/design-tokens": { - "prevSiblingId": "advanced/deployment", - "nextSiblingId": "advanced/integrations", - "parentId": "advanced", - "id": "advanced/design-tokens", - "itemId": "advanced/design-tokens", - "path": "/advanced/design-tokens/", - "type": "documentation", - "title": "Design Tokens" - }, - "advanced/integrations": { - "prevSiblingId": "advanced/design-tokens", - "nextSiblingId": "advanced/plugins", - "parentId": "advanced", - "id": "advanced/integrations", - "itemId": "advanced/integrations", - "path": "/advanced/integrations/", - "type": "documentation", - "title": "Integrations" - }, - "advanced/plugins": { - "prevSiblingId": "advanced/integrations", - "nextSiblingId": "advanced/properties", - "parentId": "advanced", - "id": "advanced/plugins", - "itemId": "advanced/plugins", - "path": "/advanced/plugins/", - "type": "documentation", - "title": "Plugins" - }, - "advanced/properties": { - "prevSiblingId": "advanced/plugins", - "nextSiblingId": "advanced/ui", - "parentId": "advanced", - "id": "advanced/properties", - "itemId": "advanced/properties", - "path": "/advanced/properties/", - "type": "documentation", - "title": "Properties" - }, - "advanced/ui": { - "prevSiblingId": "advanced/properties", - "parentId": "advanced", - "id": "advanced/ui", - "itemId": "advanced/ui", - "path": "/advanced/ui/", - "type": "documentation", - "title": "User Interface" - }, "basics/component": { "prevSiblingId": "basics/config", "nextSiblingId": "basics/variant", diff --git a/index.html b/index.html index c450fb71..36b9c9b9 100644 --- a/index.html +++ b/index.html @@ -16,31 +16,31 @@ - + - - - + + + - - + + - - - - + + + + @@ -67,10 +67,10 @@
- - - - + + + +