From f15d3fb199725043e44bcf7c9861ca83fa315bb9 Mon Sep 17 00:00:00 2001 From: Marius Wilms Date: Sun, 2 May 2021 21:12:19 +0200 Subject: [PATCH 1/4] Merge playground documents, increase visibility "not just a documentation component" --- .../02-Properties.md | 0 .../02_Documents/01_Playground/Readme.md | 48 ++++++++++++++++++- .../annotations.json | 0 .../02_Documents/01_Playground/meta.yaml | 4 +- .../10_Components/06-Playground/01-Readme.md | 39 --------------- .../10_Components/06-Playground/meta.yaml | 5 -- 6 files changed, 50 insertions(+), 46 deletions(-) rename 10_The Design Definitions Tree/02_Documents/{10_Components/06-Playground => 01_Playground}/02-Properties.md (100%) rename 10_The Design Definitions Tree/02_Documents/{10_Components/06-Playground => 01_Playground}/annotations.json (100%) delete mode 100644 10_The Design Definitions Tree/02_Documents/10_Components/06-Playground/01-Readme.md delete mode 100644 10_The Design Definitions Tree/02_Documents/10_Components/06-Playground/meta.yaml 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..234df73 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,53 @@ This is a feature of the redesigned frontend and available with version 1.2. + Playgrounds support interactive components with version 1.4. # 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/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 From 9b47413fb00814a8fe528a154dc4886ed5b1070e Mon Sep 17 00:00:00 2001 From: Marius Wilms Date: Fri, 20 Aug 2021 08:21:26 +0200 Subject: [PATCH 2/4] Update action to use main branch --- .github/workflows/deploy.yml | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) 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' From ffeafeddb15925a1ae6196dbece0a5c121640a1a Mon Sep 17 00:00:00 2001 From: Marius Wilms Date: Fri, 15 Oct 2021 09:43:29 +0200 Subject: [PATCH 3/4] Don't need to use script tags anymore --- .../10_Components/02-Code Block/01-Readme.md | 39 ++----------------- 1 file changed, 4 insertions(+), 35 deletions(-) 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..e59c19d 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 @@ -13,42 +13,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 +39,7 @@ alert("highlight this code"); ```html - + alert("highlight this code"); ``` @@ -77,20 +50,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 +69,4 @@ A `` component can also load and display the content of a file stored ```html -``` \ No newline at end of file +``` From 788db66811688f2132736a71a89503f9597e3259 Mon Sep 17 00:00:00 2001 From: Marius Wilms Date: Fri, 15 Oct 2021 09:47:07 +0200 Subject: [PATCH 4/4] Drop usage of version banners, stop trying to make docs work BC --- .../02_Documents/01_Playground/Readme.md | 5 ----- .../02_Documents/10_Components/02-Code Block/01-Readme.md | 4 ---- .../02_Documents/10_Components/04-Inline Color/01-Readme.md | 4 ---- .../10_Components/07-Do and Don\342\200\231t/01-Readme.md" | 4 ---- .../02_Documents/10_Components/09-Code Embeds/01-Readme.md | 4 ---- 10_The Design Definitions Tree/06_Versioning/Readme.md | 4 ---- 6 files changed, 25 deletions(-) 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 234df73..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,8 +1,3 @@ - - This is a feature of the redesigned frontend and available with version 1.2. - Playgrounds support interactive components with version 1.4. - - # Playgrounds Playgrounds are used to demonstrate components. To embed a playground 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 e59c19d..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 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/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.