Add props description components

.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