feat: render popertylist description as markdown (#426)

thegeeklab · May 30, 2022 · 33ea5c3 · 33ea5c3
1 parent b61b375
commit 33ea5c3
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/exampleSite/data/properties/demo.yaml b/exampleSite/data/properties/demo.yaml
@@ -15,3 +15,15 @@ properties:
       en:
         - tag1
         - tag2
+
+  prop3:
+    type: bool
+    defaultValue: false
+    description: |
+      A `bool` property with a complex multiline description and embedded Markdown:
+
+      - List item 1
+      - List item 2
+
+      More description how to use this property.
+    required: false
diff --git a/layouts/shortcodes/propertylist.html b/layouts/shortcodes/propertylist.html
@@ -26,18 +26,18 @@
           {{- end }}
         </dt>
         <dd>
-          <div>
+          <div class="gdoc-props__description">
             {{- with $value.description }}
               {{- $desc := . }}
               {{- if reflect.IsMap $desc }}
                 {{- $desc = (index $desc $.Site.Language.Lang) }}
               {{- end }}
 
-              {{ $desc }}
+              {{ $desc | $.Page.RenderString }}
             {{ end }}
           </div>
           <div class="gdoc-props__default">
-            {{- with default "none" $value.defaultValue }}
+            {{- with default "none" ($value.defaultValue | string) }}
               <span>{{ i18n "propertylist_default" | title }}:</span>
               <span>{{ . }}</span>
             {{- end }}

diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss
@@ -191,15 +191,24 @@
 
   &__meta {
     line-height: normal;
-    margin-bottom: $padding-8;
+    margin-bottom: $padding-4;
     > span {
-      margin-bottom: $padding-4;
+      margin-bottom: $padding-2;
       &:not(:last-child) {
         margin-right: $padding-8;
       }
     }
   }
 
+  &__description {
+    > :first-child {
+      margin-top: 0;
+    }
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
   @each $name, $color in $hint-colors {
     &__tag.#{$name} {
       border-color: scale-color($color, $lightness: 90%, $saturation: -30%);
@@ -218,7 +227,6 @@
   }
 
   &__default {
-    font-style: italic;
     font-size: $font-size-14;
   }
 }