Experiment with better docs shortcuts on the type keyword (#37)

See: #35 Signed-off-by: Juan Cruz Viotti <[email protected]>
sourcemeta · Oct 24, 2023 · 8816a0e · 8816a0e
1 parent 3ba37f5
commit 8816a0e
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 8 deletions.
diff --git a/assets/main.scss b/assets/main.scss
@@ -3,6 +3,8 @@
 
 // Overrides
 $blue: #0969da;
+$success: rgba(213, 255, 230, 1);
+$danger: rgba(255, 213, 213, 1);
 
 // Required components
 @import "../vendor/bootstrap/scss/variables";
@@ -94,3 +96,27 @@ a {
 article table {
   @extend .table;
 }
+
+.code,
+.code .border-end,
+.code .border-bottom {
+  border-color: #aaa !important;
+}
+
+.code .highlight {
+  @extend .py-3;
+  @extend .m-0;
+  @extend .border-0;
+}
+
+.code.bg-success .highlight {
+  @extend .bg-success;
+}
+
+.code.bg-danger .highlight {
+  @extend .bg-danger;
+}
+
+.code + .code {
+  @extend .border-top-0;
+}
diff --git a/content/2020-12/validation/type.markdown b/content/2020-12/validation/type.markdown
@@ -10,13 +10,34 @@ introduced_in: draft1
 index: -99999
 ---
 
-The supported types are:
+The supported types are as follows:
 
-- `"null"`
-- `"boolean"`
-- `"object"`
-- `"array"`
-- `"number"`
-- `"integer"`
-- `"string"`
+| Type        | Description                              |
+|-------------|------------------------------------------|
+| `"null"`    | The JSON null constant                   |
+| `"boolean"` | The JSON true or false constants         |
+| `"object"`  | A JSON object                            |
+| `"array"`   | A JSON array                             |
+| `"number"`  | A JSON number                            |
+| `"integer"` | A JSON number that represents an integer |
+| `"string"`  | A JSON string                            |
 
+Note that the JSON grammar does not distinguish between integer and real
+numbers. Still, JSON Schema provides the `integer` logical type.
+
+## Examples
+
+{{< schema "A schema that describes numeric instances" >}}
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "number"
+}
+{{< /schema >}}
+
+{{< instance-pass "A JSON integer" >}}
+42
+{{< /instance-pass >}}
+
+{{< instance-fail "A JSON string" >}}
+"foo"
+{{< /instance-fail >}}
diff --git a/layouts/shortcodes/instance-fail.html b/layouts/shortcodes/instance-fail.html
@@ -0,0 +1,11 @@
+<div class="code bg-danger border">
+  <div class="d-flex align-items-center border-bottom">
+    <small class="px-2 py-1 border-end flex-grow-1">
+      <i class="bi bi-x-lg me-1"></i> {{ .Get 0 }}</small>
+    <span class="fw-light px-2 py-1">
+      <i class="bi bi-filetype-json me-1"></i>
+      Instance</span>
+  </div>
+  {{ $code := trim .Inner "\n" }}
+  {{ transform.Highlight ($code) "json" }}
+</div>
diff --git a/layouts/shortcodes/instance-pass.html b/layouts/shortcodes/instance-pass.html
@@ -0,0 +1,11 @@
+<div class="code bg-success border">
+  <div class="d-flex align-items-center border-bottom">
+    <small class="px-2 py-1 border-end flex-grow-1">
+      <i class="bi bi-check-lg me-1"></i> {{ .Get 0 }}</small>
+    <span class="fw-light px-2 py-1">
+      <i class="bi bi-filetype-json me-1"></i>
+      Instance</span>
+  </div>
+  {{ $code := trim .Inner "\n" }}
+  {{ transform.Highlight ($code) "json" }}
+</div>
diff --git a/layouts/shortcodes/schema.html b/layouts/shortcodes/schema.html
@@ -0,0 +1,11 @@
+<div class="code bg-light border">
+  <div class="d-flex align-items-center border-bottom">
+    <small class="px-2 py-1 border-end flex-grow-1">
+      <i class="bi bi-braces me-1"></i> {{ .Get 0 }}</small>
+    <span class="fw-light px-2 py-1">
+      <i class="bi bi-file-code-fill me-1"></i>
+      Schema</span>
+  </div>
+  {{ $code := trim .Inner "\n" }}
+  {{ transform.Highlight ($code) "json" }}
+</div>