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

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

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

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

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

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

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

.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

docs/.gitignore

@@ -5,4 +5,5 @@ configuration
 developer
 installation
 tutorial
+ui
 readme.md