feat: add json-editor shortcode

.bmycconfig.json

@@ -131,6 +131,18 @@
     },
     "currentVersion": "7.2.0"
   },
+  {
+    "package": "json-editor",
+    "hold": false,
+    "name": "js/json-editor",
+    "localPath": "assets/js/external/json-editor/jsoneditor.min.js",
+    "assetManager": {
+      "name": "cdnjs",
+      "library": "json-editor",
+      "fileName": "jsoneditor.min.js"
+    },
+    "currentVersion": "2.15.1"
+  },
   {
     "package": "fontawesome",
     "hold": false,

.github/workflows/hugo.yml

@@ -6,6 +6,7 @@ on:
   push:
     branches:
       - main
+    pull_request:
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -61,7 +62,7 @@ jobs:
             --gc \
             --minify \
             --source exampleSite \
-            --baseURL "${{ steps.pages.outputs.base_url }}/"
+            --baseURL "${{ steps.pages.outputs.base_url }}/shadocs/"
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

assets/js/shortcodes/jsoneditor.js

@@ -0,0 +1,60 @@
+// Dummy JSON schema
+const schema = {
+    "type": "object",
+    "properties": {
+        "JSON_FLUX_ID": {"type": "integer"},
+        "JSON_SOURCES": {
+            "type": "array",
+            "items": {
+                "type": "object",
+                "properties": {
+                    "JSON_ACCESS_POINT_CODE": {"type": "string", "minLength": 1, "maxLength": 10},
+                    "TEST1": {
+                        "type": "object",
+                        "properties": {
+                            "TEST2": {"type": "string", "minLength": 1, "maxLength": 10},
+                        }
+                    },
+                    "TEST3": {
+                        "type": "array",
+                        "items": {
+                            "type": "object",
+                            "properties": {
+                                "TEST4": {"type": "string", "minLength": 1, "maxLength": 10},
+                            }
+                        }
+                    },
+                    "TEST5": {
+                        "type": "array",
+                        "items": {
+                          "type": "string"
+                        }
+                    }
+                },
+                "required": ["JSON_ACCESS_POINT_CODE"]
+            }
+        },
+    },
+    "required": ["JSON_FLUX_ID"]
+};
+
+// Create the editor in form mode
+document.addEventListener("DOMContentLoaded", function () {
+    var editor = new JSONEditor(document.getElementById("jsoneditorContainer"), {
+        array_controls_top: false,
+        disable_array_delete_all_rows: true,
+        disable_array_delete_last_row: true,
+        disable_collapse: false,
+        disable_edit_json: true,
+        disable_properties: true,
+        iconlib: 'fontawesome5',
+        prompt_before_delete: false,
+        remove_button_labels: true,
+        schema: schema,
+        theme: "barebones"
+    });
+    document.getElementById("submit").addEventListener("click",function() {
+    // Get the value from the editor
+    console.log(editor.getValue());
+    });
+  });

assets/sass/theme/main.sass

@@ -26,6 +26,7 @@
 @import "shortcodes_collapsible";
 @import "shortcodes_highcharts";
 @import "shortcodes_intro";
+@import "shortcodes_jsoneditor";
 @import "shortcodes_openapi";
 @import "shortcodes_pagebreak";
 @import "shortcodes_snippet";

assets/sass/theme/shortcodes_jsoneditor.sass

@@ -0,0 +1,104 @@
+//
+// Treeview
+//
+#jsoneditorContainer
+  border: 1px solid smooth-color($content-background, 30)
+  background: smooth-color($content-background, 10)
+  padding: $theme-gap-medium-size
+  color: $content-writing-color
+  +font-family(roboto-mono)
+  .je-indented-panel
+    border: 1px solid smooth-color($content-background, 20)
+    padding: $theme-gap-medium-size
+    margin: 0
+  .row
+    padding: $theme-gap-medium-size
+    &:not(:has(.je-indented-panel))
+      &:focus-within,
+      &:hover
+        background: smooth-color($content-background, 15)
+  div[data-schematype="object"].je-object__container
+    >.je-indented-panel
+      padding: 0
+  div[data-schematype="array"]
+    >.je-indented-panel
+      div[data-schematype].je-indented-panel
+        &:focus-within,
+        &:hover
+          background: smooth-color($content-background, 15)
+      >div
+        >div[data-schematype]+div[data-schematype]
+            margin: $theme-gap-medium-size 0
+        >div[data-schematype]:first-child
+            margin-bottom: $theme-gap-medium-size
+    div:has(span>button.json-editor-btntype-delete),
+    div:has(span>button.json-editor-btntype-move)
+      position: relative
+      >span
+        &:has(button.json-editor-btntype-delete)
+        &:has(button.json-editor-btntype-move)
+          justify-content: space-between
+          flex-direction: row
+          position: absolute
+          flex-wrap: nowrap
+          display: flex
+          right: 0
+          top: 0
+      div[data-schematype="object"]>span
+        &:has(button.json-editor-btntype-delete),
+        &:has(button.json-editor-btntype-move)
+          button
+            margin-left: $theme-gap-small-size
+      .je-indented-panel>span
+        &:has(button.json-editor-btntype-delete),
+        &:has(button.json-editor-btntype-move)
+          margin: $theme-gap-medium-size $theme-gap-small-size
+          button
+            margin-right: $theme-gap-small-size
+  .je-header
+    font-weight: bold
+    button
+      border: 1px solid smooth-color($json-editor-color, 25)
+      padding: $theme-gap-small-size $theme-gap-medium-size
+      color: findColorInvert($json-editor-color)
+      background: $json-editor-color
+      &:before
+        padding-right: $theme-gap-medium-size
+        font: var(--fa-font-solid)
+        content: "\f550"
+      &:hover
+        background: smooth-color($json-editor-color, 20)
+        cursor: pointer
+    &.je-object__title
+      button:before
+        content: "\f1b2"
+  .json-editor-btn-add
+    border: 1px solid smooth-color($json-editor-add-color, 25)
+    color: findColorInvert($json-editor-add-color)
+    background: $json-editor-add-color
+    &:hover
+      background: smooth-color($json-editor-add-color, 15)
+      cursor: pointer
+  .json-editor-btntype-delete
+    border: 1px solid smooth-color($json-editor-delete-color, 25)
+    color: findColorInvert($json-editor-delete-color)
+    background: $json-editor-delete-color
+    &:hover
+      background: smooth-color($json-editor-delete-color, 15)
+      cursor: pointer
+  .json-editor-btntype-move
+    border: 1px solid smooth-color($json-editor-move-color, 25)
+    color: findColorInvert($json-editor-move-color)
+    background: $json-editor-move-color
+    &:hover
+      background: smooth-color($json-editor-move-color, 15)
+      cursor: pointer
+  .form-control
+    label
+      &:after
+        content: ":"
+    input
+      width: 100%
+    .errmsg
+      font-style: italic
+      color: red

assets/sass/theme/variables.sass

@@ -77,5 +77,9 @@ $intro-progressbar-color: mediumseagreen
 $intro-skipbutton-color: firebrick
 $intro-tooltip-min-width: 250px
 $intro-tooltip-max-width: 350px
+$json-editor-color: steelblue
+$json-editor-add-color: darkgreen
+$json-editor-delete-color: firebrick
+$json-editor-move-color: steelblue
 $mermaid-label-font-size: 0.875rem
 $treeview-icon-color: darkgreen

data/themeParams.toml

@@ -107,6 +107,10 @@
       "js/external/intro/intro.min.js",
       "js/shortcodes/intro.js"
     ]
+    jsoneditor = [
+      "js/external/json-editor/jsoneditor.min.js",
+      "js/shortcodes/jsoneditor.js"
+    ]
     openapi = [
       "js/shortcodes/openapi.js",
     ]

exampleSite/content/english/shortcodes/jsoneditor.md

@@ -0,0 +1,25 @@
+---
+title: "{{< jsoneditor >}}"
+description: "Shortcode {{< jsoneditor >}}."
+categories: ["Shortcode"]
+tags: ["Content management"]
+---
+
+# Description
+---
+
+The **jsoneditor** shortcode allows to ...
+
+# Paramètres
+---
+
+| Name | Type(named/positional) | Description |
+| ---- | ---------------------- | ----------- |
+
+{{< jsoneditor >}}
+
+# Examples
+---
+
+| Markdown | Rendering |
+| -------- | --------- |

layouts/shortcodes/jsoneditor.html

@@ -0,0 +1,7 @@
+<h1>Basic JSON Editor Example</h1>
+
+<div id='jsoneditorWrapper'>
+    <div id='jsoneditorContainer'>
+    </div>
+</div>
+<button id='submit'>Submit (console.log)</button>