Create configOption component

Author: Ndpnt

themes/opentermsarchive/assets/css/components/configOption/configOption.css

@@ -0,0 +1,32 @@
+.config-option {
+    padding: 2rem 0;
+}
+
+.config-option + .config-option {
+  box-shadow: inset 0 1px var(--colorBlack200);
+}
+
+.config-option .config-option-name code {
+  font-weight: 600;
+}
+
+.config-option-type {
+  color: var(--colorBlack600);
+  padding-left: 1rem;
+}
+
+.config-option-description,
+.config-option-default,
+.config-option-example {
+  padding: 1rem 0.4em;
+}
+
+.config-option-example code,
+.config-option-default code {
+  margin-left: 0.4em;
+}
+
+.config-option-example,
+.config-option-default {
+  font-size: 0.9em;
+}

themes/opentermsarchive/assets/css/loader.css

@@ -35,3 +35,4 @@
 @import "themes/opentermsarchive/assets/css/components/divider/divider.css";
 @import "themes/opentermsarchive/assets/css/components/textContent/textContent.css";
 @import "themes/opentermsarchive/assets/css/components/aside/aside.css";
+@import "themes/opentermsarchive/assets/css/components/configOption/configOption.css";

themes/opentermsarchive/layouts/shortcodes/configOption.html

@@ -0,0 +1,10 @@
+<div class="config-option">
+    <div class="config-option-name"><code>{{ .Get "name" }}</code><span class="config-option-type">{{ .Get "type" }}</span></div>
+    <div class="config-option-description">{{ .Get "description" | markdownify }}</div>
+    {{ if .Get "default" }}
+    <div class="config-option-default"><span>Default:</span><code>{{ .Get "default" }}</code></div>
+    {{ end }}
+    {{ if .Get "example" }}
+    <div class="config-option-example"><span>Example:</span><code>{{ .Get "example" }}</code></div>
+    {{ end }}
+</div>