diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 0eba9cb..229de30 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -1,8 +1,13 @@ +# Copyright 2021 Marius Wilms, Christoph Labacher. All rights reserved. +# +# Use of this source code is governed by a BSD-style +# license that can be found in the LICENSE file. + name: Deploy on: push: branches: - - master + - main jobs: dsk: @@ -105,4 +110,4 @@ jobs: --itemize-changes \ assemblage/ deploy@${{ secrets.deploy_host }}:/var/www/dsk_website - ssh -o StrictHostKeyChecking=no deploy@${{ secrets.deploy_host }} 'sudo hoictl --project=/var/www/dsk_website load' \ No newline at end of file + ssh -o StrictHostKeyChecking=no deploy@${{ secrets.deploy_host }} 'sudo hoictl --project=/var/www/dsk_website load' diff --git a/10_The Design Definitions Tree/02_Documents/10_Components/06-Playground/02-Properties.md b/10_The Design Definitions Tree/02_Documents/01_Playground/02-Properties.md similarity index 100% rename from 10_The Design Definitions Tree/02_Documents/10_Components/06-Playground/02-Properties.md rename to 10_The Design Definitions Tree/02_Documents/01_Playground/02-Properties.md diff --git a/10_The Design Definitions Tree/02_Documents/01_Playground/Readme.md b/10_The Design Definitions Tree/02_Documents/01_Playground/Readme.md index 686e515..581c49c 100644 --- a/10_The Design Definitions Tree/02_Documents/01_Playground/Readme.md +++ b/10_The Design Definitions Tree/02_Documents/01_Playground/Readme.md @@ -1,7 +1,48 @@ - - This is a feature of the redesigned frontend and available with version 1.2. - - # Playgrounds -If you place a document called `playground.md` amongst your [documents](/The-Design-Definitions-Tree/Documents) for one [aspect](/The-Design-Definitions-Tree/Aspects) in the design defintions tree, its contents will be displayed in a large [Playground](The-Design-Definitions-Tree/Documents/Components/Playground) on the top of the aspect’s page in DSK. This is helpfull to display a general demo of the aspect, so your users can immediatly see what the aspect is about. You can see an example of this in the documentation for some of the frontend’s documentation components, e.g. the [Banner](The-Design-Definitions-Tree/Documents/Components/Banner). +Playgrounds are used to demonstrate components. To embed a playground +inside a document use the `` tags. + + + + + +```html + + + +``` + +## Annotating Components + +With annotations you can highlight specific points on the playground and add a comment. + + + {Component} + + +```html + + {Component} + +``` + +### Annotations File Format + +The annotations specification file has to be formatted like this (`annotationColor` is optional): + + + +## Large Standalone Playgrounds + +If you place a document called `playground.md` amongst your +[documents](/The-Design-Definitions-Tree/Documents) for one +[aspect](/The-Design-Definitions-Tree/Aspects) in the design +defintions tree, its contents will be displayed in a large +[Playground](The-Design-Definitions-Tree/Documents/Components/Playground) +on the top of the aspect’s page in DSK. This is helpfull to display a +general demo of the aspect, so your users can immediatly see what the +aspect is about. You can see an example of this in the documentation +for some of the frontend’s documentation components, e.g. the +[Banner](The-Design-Definitions-Tree/Documents/Components/Banner). + diff --git a/10_The Design Definitions Tree/02_Documents/10_Components/06-Playground/annotations.json b/10_The Design Definitions Tree/02_Documents/01_Playground/annotations.json similarity index 100% rename from 10_The Design Definitions Tree/02_Documents/10_Components/06-Playground/annotations.json rename to 10_The Design Definitions Tree/02_Documents/01_Playground/annotations.json diff --git a/10_The Design Definitions Tree/02_Documents/01_Playground/meta.yaml b/10_The Design Definitions Tree/02_Documents/01_Playground/meta.yaml index 8dff77c..562f6ef 100644 --- a/10_The Design Definitions Tree/02_Documents/01_Playground/meta.yaml +++ b/10_The Design Definitions Tree/02_Documents/01_Playground/meta.yaml @@ -1,3 +1,5 @@ +description: A playground is a distinct space to display a component from your Design System. tags: - - needs description - special document + - documentation + - components diff --git a/10_The Design Definitions Tree/02_Documents/10_Components/02-Code Block/01-Readme.md b/10_The Design Definitions Tree/02_Documents/10_Components/02-Code Block/01-Readme.md index ed4cb98..5922aa5 100644 --- a/10_The Design Definitions Tree/02_Documents/10_Components/02-Code Block/01-Readme.md +++ b/10_The Design Definitions Tree/02_Documents/10_Components/02-Code Block/01-Readme.md @@ -1,7 +1,3 @@ - - Documentation components are available since version 1.2. - - # Examples ## Basic Usage @@ -13,42 +9,17 @@ These get automatically converted to a ``. alert('Hello World!'); ``` -## Necessity of using ` - - -```html - - - -``` - ## Documenting Components As any other code, components can be documented using the ``, too. - + Blue ```html - + Blue ``` @@ -64,9 +35,7 @@ alert("highlight this code"); ```html - + alert("highlight this code"); ``` @@ -77,20 +46,16 @@ what the contents of a file called `fib.js` look like. To add a title you can set the `title` property of the `` component: - ```html - ``` @@ -100,4 +65,4 @@ A `` component can also load and display the content of a file stored ```html -``` \ No newline at end of file +``` diff --git a/10_The Design Definitions Tree/02_Documents/10_Components/04-Inline Color/01-Readme.md b/10_The Design Definitions Tree/02_Documents/10_Components/04-Inline Color/01-Readme.md index 3c5d346..b4746c4 100644 --- a/10_The Design Definitions Tree/02_Documents/10_Components/04-Inline Color/01-Readme.md +++ b/10_The Design Definitions Tree/02_Documents/10_Components/04-Inline Color/01-Readme.md @@ -1,7 +1,3 @@ - - This Documentation component is available since version 1.3. - - # Examples Colors can be used inline as well, for example this beautful shade of Red is just gorgeous! diff --git a/10_The Design Definitions Tree/02_Documents/10_Components/06-Playground/01-Readme.md b/10_The Design Definitions Tree/02_Documents/10_Components/06-Playground/01-Readme.md deleted file mode 100644 index 2e022b9..0000000 --- a/10_The Design Definitions Tree/02_Documents/10_Components/06-Playground/01-Readme.md +++ /dev/null @@ -1,39 +0,0 @@ - - Documentation components are available since version 1.2. - - -# Examples - -## Basic Usage - -{Component} - -```html -{Component} -``` - -## Configured - -{Component} - -```html -{Component} -``` - -For all configuration options see [Properties](?t=properties). - -## Annotations - -With annotations you can highlight specific points on the playground and add a comment. - -{Component} - -```html -{Component} -``` - -## File Format - -The annotations specification file has to be formatted like this (`annotationColor` is optional): - - diff --git a/10_The Design Definitions Tree/02_Documents/10_Components/06-Playground/meta.yaml b/10_The Design Definitions Tree/02_Documents/10_Components/06-Playground/meta.yaml deleted file mode 100644 index cbbedd1..0000000 --- a/10_The Design Definitions Tree/02_Documents/10_Components/06-Playground/meta.yaml +++ /dev/null @@ -1,5 +0,0 @@ -description: A Playground is a distinct space to display a component from your Design System. - -tags: - - documentation - - components diff --git "a/10_The Design Definitions Tree/02_Documents/10_Components/07-Do and Don\342\200\231t/01-Readme.md" "b/10_The Design Definitions Tree/02_Documents/10_Components/07-Do and Don\342\200\231t/01-Readme.md" index aaf3170..e9d6e20 100644 --- "a/10_The Design Definitions Tree/02_Documents/10_Components/07-Do and Don\342\200\231t/01-Readme.md" +++ "b/10_The Design Definitions Tree/02_Documents/10_Components/07-Do and Don\342\200\231t/01-Readme.md" @@ -1,7 +1,3 @@ - - Documentation components are available since version 1.2. - - # Example diff --git a/10_The Design Definitions Tree/02_Documents/10_Components/09-Code Embeds/01-Readme.md b/10_The Design Definitions Tree/02_Documents/10_Components/09-Code Embeds/01-Readme.md index 2009522..2441e2b 100644 --- a/10_The Design Definitions Tree/02_Documents/10_Components/09-Code Embeds/01-Readme.md +++ b/10_The Design Definitions Tree/02_Documents/10_Components/09-Code Embeds/01-Readme.md @@ -1,7 +1,3 @@ - - Documentation components are available since version 1.3. - - ## Glitch diff --git a/10_The Design Definitions Tree/06_Versioning/Readme.md b/10_The Design Definitions Tree/06_Versioning/Readme.md index 77d8bf7..3e57a3f 100644 --- a/10_The Design Definitions Tree/06_Versioning/Readme.md +++ b/10_The Design Definitions Tree/06_Versioning/Readme.md @@ -1,9 +1,5 @@ # Versioning - - Support for versioning has been added in version 1.3. - - Your Design Defintions Tree can be just any regular directory, but after a certain point it often makes sense to keep it in a [Git repository](https://git-scm.com/). This lets multiple authors collaborate in a more structured fashion, but it also comes with an added benefit: using Git you can have DSK display multiple versions of your design system. This is a powerful feature in larger organisations, were different products might have been built with different versions of the design system. When you keep your design system in a Git repository, all you have to do is [create a tag](https://git-scm.com/book/en/v2/Git-Basics-Tagging) for the version you want to expose and tell DSK about it by adding the tags name to the versions property of [DSK’s configuration file](/The-Design-Definitions-Tree/Configuration). The built-in frontend will now display a dropdown with all your versions in the lower left-hand corner and lets users select which one to look at.