Add reference to config option

Author: clementbiron

content/terms/references/declaration.md

@@ -26,10 +26,9 @@ The examples given throughout this reference can be seen in context in the [decl
 
 To facilitate cross-service comparisons and ensure consistency, a standardized list of term types is maintained in a [dedicated repository](https://github.com/OpenTermsArchive/terms-types).
 
-Please note, the terms type may differ from the exact name provided by the service, but it should align with the underlying commitment. For example, some providers might call “Terms and Conditions” or “Terms of Use” what some others call “Terms of Service”.
-    `
+Please note, the terms type may differ from the exact name provided by the service, but it should align with the underlying commitment. For example, some providers might call “Terms and Conditions” or “Terms of Use” what some others call “Terms of Service”.`
     required=true
-    allowedValues="See the [terms-types repository](https://github.com/OpenTermsArchive/terms-types)."
+    reference="[Terms Types](https://github.com/OpenTermsArchive/terms-types)."
 >}}
 ```json
 "terms": {

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

@@ -38,7 +38,8 @@
 .config-option-description,
 .config-option-default,
 .config-option-example,
-.config-option-allowed-values {
+.config-option-allowed-values,
+.config-option-reference {
   padding: 1rem 0.4em;
 }
 
@@ -51,7 +52,8 @@
 
 .config-option-example,
 .config-option-default,
-.config-option-allowed-values {
+.config-option-allowed-values,
+.config-option-reference {
   font-size: 0.85em;
 }
 
@@ -63,3 +65,7 @@
 .config-option-details_full .config-option-example .highlight {
   margin-top: 0.4em;
 }
+
+.config-option-reference span{
+  margin-right: 0.4em;
+}

themes/opentermsarchive/layouts/shortcodes/configOption.html

@@ -45,6 +45,9 @@
                 </span>
             </div>
         {{ end }}
+        {{ if $reference }}
+            <div class="config-option-reference"><span>Reference:</span>{{ $reference | markdownify }}</div>
+        {{ end }}
     </div>
 </div>