From 1bc34f9feede21612f10c9f6e1f0a734c1cf9f21 Mon Sep 17 00:00:00 2001
From: Yannick Schaus <github@schaus.net>
Date: Mon, 1 Mar 2021 15:43:39 +0100
Subject: [PATCH] Add props description components (#276)

Those component can be used to describe config parameters & groups.
The UI component generated docs will use those but they could be useful
for describing configuration of e.g. thing types, channels, profiles,
rule modules...

Minor dark mode style adjustments.
Change wording of tip box in install instructions as per @mstormi's request.

Signed-off-by: Yannick Schaus <github@schaus.net>
---
 .vuepress/components/InstallInstructions.vue |  2 +-
 .vuepress/components/PropBlock.vue           | 52 ++++++++++++++++++++
 .vuepress/components/PropDescription.vue     | 16 ++++++
 .vuepress/components/PropGroup.vue           | 21 ++++++++
 .vuepress/components/PropOption.vue          | 16 ++++++
 .vuepress/components/PropOptions.vue         | 45 +++++++++++++++++
 .vuepress/styles/index.styl                  |  6 +++
 docs/.gitignore                              |  1 +
 8 files changed, 158 insertions(+), 1 deletion(-)
 create mode 100644 .vuepress/components/PropBlock.vue
 create mode 100644 .vuepress/components/PropDescription.vue
 create mode 100644 .vuepress/components/PropGroup.vue
 create mode 100644 .vuepress/components/PropOption.vue
 create mode 100644 .vuepress/components/PropOptions.vue

diff --git a/.vuepress/components/InstallInstructions.vue b/.vuepress/components/InstallInstructions.vue
index 5466a5a6..d87b8adc 100644
--- a/.vuepress/components/InstallInstructions.vue
+++ b/.vuepress/components/InstallInstructions.vue
@@ -74,7 +74,7 @@
       <h3>{{optionNumber('package')}}Install the APT Packages <span v-if="selectedSystem === 'tux'">(Recommended)</span></h3>
       <div class="tip custom-block">
         <p class="custom-block-title">TIP</p>
-        <p>On Debian-based systems you can also opt to add our openHABian turn-key solution on top of your existing operating system, follow <router-link to="/docs/installation/openhabian.html#other-linux-systems-add-openhabian-just-like-any-other-software">these instructions instead</router-link> to check whether your system is eligible and install it.</p>
+        <p>On Debian systems you can also opt to add our openHABian turn-key solution on top of your existing operating system, follow <router-link to="/docs/installation/openhabian.html#other-linux-systems-add-openhabian-just-like-any-other-software">these instructions instead</router-link> to check whether your system is eligible and install it.</p>
         <p v-if="selectedSystem === 'raspberry-pi'">For Raspberry Pi, however, we strongly recommend flashing the complete OS image, see above.</p>
       </div>
       <ol>
diff --git a/.vuepress/components/PropBlock.vue b/.vuepress/components/PropBlock.vue
new file mode 100644
index 00000000..3423d818
--- /dev/null
+++ b/.vuepress/components/PropBlock.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="prop-container">
+    <h4 class="prop-header" :id="name">
+      <a :href="'#' + name" class="header-anchor">#</a>
+      <code class="prop-name">{{name}}</code>
+      <span>{{label}}<span class="required" v-if="required" title="Required">*</span></span>
+      <Badge :type="type.toLowerCase()" :text="type" />
+      <Badge v-if="context" type="context" :text="context" />
+    </h4>
+    <slot />
+  </div>
+</template>
+
+<style lang="stylus">
+h4.prop-header
+  margin-top -3.5rem
+  padding-top 4.6rem
+  margin-bottom 0
+  font-size 17px
+  border-bottom 1px solid #77777733
+  padding-bottom 5px
+  .prop-name
+    background #777
+    color white
+    vertical-align text-bottom
+  .required
+    color red
+    margin-left 0.3rem
+  .badge
+    font-size 12px
+    margin-bottom 1px
+    float right
+    background-color rgb(127,127,127)
+    vertical-align bottom !important
+    &.boolean
+      background-color rgb(24,127,127)
+    &.text
+      background-color rgb(24,127,24)
+    &.integer
+      background-color rgb(127,24,127)
+    &.decimal
+      background-color rgb(24,127,127)
+    &.context
+      color rgb(127,127,127,0.6)
+      background-color transparent
+</style>
+
+<script>
+export default {
+  props: ['name', 'type', 'required', 'label', 'context']
+}
+</script>
diff --git a/.vuepress/components/PropDescription.vue b/.vuepress/components/PropDescription.vue
new file mode 100644
index 00000000..470f67b2
--- /dev/null
+++ b/.vuepress/components/PropDescription.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="prop-description">
+    <p><slot /></p>
+  </div>
+</template>
+
+<style lang="stylus">
+.prop-description
+  font-size 14px
+</style>
+
+<script>
+export default {
+
+}
+</script>
diff --git a/.vuepress/components/PropGroup.vue b/.vuepress/components/PropGroup.vue
new file mode 100644
index 00000000..1e05a837
--- /dev/null
+++ b/.vuepress/components/PropGroup.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="prop-group">
+    <!-- <h3 class="prop-group-header" :id="'prop-group-' + name">
+      <a :href="'#prop-group-' + name" class="header-anchor">#</a>
+      {{label}}
+    </h3> -->
+    <slot />
+  </div>
+</template>
+
+<style lang="stylus">
+h3.prop-group-header
+  margin-top -3.5rem
+  padding-top 4.6rem
+</style>
+
+<script>
+export default {
+  props: ['name', 'label']
+}
+</script>
diff --git a/.vuepress/components/PropOption.vue b/.vuepress/components/PropOption.vue
new file mode 100644
index 00000000..59ed19e5
--- /dev/null
+++ b/.vuepress/components/PropOption.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="prop-option">
+    <dt><code>{{value}}</code></dt>
+    <dd>{{label}}</dd>
+  </div>
+</template>
+
+<style lang="stylus">
+
+</style>
+
+<script>
+export default {
+  props: ['value', 'label']
+}
+</script>
diff --git a/.vuepress/components/PropOptions.vue b/.vuepress/components/PropOptions.vue
new file mode 100644
index 00000000..76cc9dc1
--- /dev/null
+++ b/.vuepress/components/PropOptions.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <h5>Options:</h5>
+    <dl class="prop-options">
+      <slot />
+    </dl>
+  </div>
+</template>
+
+<style lang="stylus">
+dl.prop-options
+  border-radius 0px 0px 5px 5px
+  padding-left 5px
+  margin-bottom 15px
+  font-size 14px
+  columns 1
+  column-gap 0px
+  div
+    margin-bottom 0.3rem
+    display block
+    break-inside avoid
+    dt
+      padding-left 5px
+      margin 0px
+      display inline-block
+      break-after avoid
+    dd
+      break-after avoid
+      // display inline
+      // margin-inline-start 5px
+@media (min-width: 900px)
+  dl.prop-options
+    columns 2
+    column-gap 60px
+@media (min-width: 1200px)
+  dl.prop-options
+    columns 3
+    column-gap 80px
+</style>
+
+<script>
+export default {
+
+}
+</script>
diff --git a/.vuepress/styles/index.styl b/.vuepress/styles/index.styl
index f132f95c..86860194 100644
--- a/.vuepress/styles/index.styl
+++ b/.vuepress/styles/index.styl
@@ -288,6 +288,8 @@ a[href*='.openhab.org'] .outbound
                 color rgb(221, 221, 221)
         .custom-block.tip
             background-color rgba(13, 25, 35, 0.6) !important
+        .custom-block.details
+            background-color rgb(32, 32, 32) !important
 
     .os-tab, .distro-tab, .version-tab
         &:hover
@@ -308,6 +310,10 @@ a[href*='.openhab.org'] .outbound
         .topic-link
             color rgb(221, 221, 221) !important
 
+    kbd
+        border-color rgb(68, 68, 68) !important
+        background-color rgb(24, 24, 24) !important
+
     footer
         background black !important
         border-top none !important
diff --git a/docs/.gitignore b/docs/.gitignore
index 4f7a77a0..d03bfd07 100644
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -5,4 +5,5 @@ configuration
 developer
 installation
 tutorial
+ui
 readme.md