Add schema and json-editor

app.py

-from flask import Flask, render_template, request
+from flask import Flask, render_template, request, abort, send_from_directory
 from dotenv import load_dotenv
 from markdown import markdown
+from glob import glob
 import json
+import os
 
 def preprocess_payload(payload):
     for column in payload.get('columns', []):
                 slide['content'] = markdown(md)
 
 load_dotenv()
-payload = json.load(open("slides.json"))
+payload = json.load(open("static/slides.json"))
 preprocess_payload(payload)
 
 application = Flask(__name__)
 def home():
     return render_template("slides.html", **payload)
 
+@application.get("/choices/<topic>")
+def choices(topic):
+    if topic in ["img", "bg"]:
+        return {"type": "string", "enum": glob("static/{}/*.*".format(topic))}
+    abort(404)
+
+@application.get("/schema.json")
+def schema():
+    return render_template("slides.schema.json", backgrounds=choices("bg"))
+
+def home():
+    return render_template("slides.html", **payload)
+
+@application.get("/editor")
+def editor():
+    return render_template("editor.html")
+
+@application.route('/favicon.ico')
+def favicon():
+    return send_from_directory(os.path.join(application.root_path, 'static'),
+                               'favicon.ico', mimetype='image/vnd.microsoft.icon')

slides.json → static/slides.json

             "params": {
                 "theme": "sky",
                 "background-image": "static/img/valley-1.svg",
-                "background-opacity": "0.25",
-                "background-position": "top left"
+                "background-opacity": "0.25"
             },
             "markdown": "This is my **farewell ceremony**.\n\nI [love](https://en.wikipedia.org/wiki/Love) you all."
         },
                     "params": {
                         "theme": "moon",
                         "background-image": "static/img/particles-1.png",
-                        "background-position": "center middle",
                         "background-size": "contain"
                     },
                     "markdown": "#### I've rested like a cat.\n\n![A cat resting|w-66 centered](static/img/cat-resting.png)"
                     "id": "cat",
                     "title": "My cat",
                     "params": {
-                        "background-position": "center middle",
                         "background-size": "contain"
                     },
                     "markdown": "![My cat|w-50 float-left](static/img/cat-resting.png)\n\nPlease forgive me, cat, for that and this"

static/slides.schema.json

+{
+  "type": "object",
+  "title": "Presentation",
+  "properties": {
+    "title": {
+      "type": "string"
+    },
+    "columns": {
+      "type": "array",
+      "title": "Columns",
+      "items": {
+        "type": "object",
+        "title": "Column",
+        "properties": {
+          "id": {
+            "type": "string"
+          },
+          "title": {
+            "type": "string"
+          },
+          "params": {
+            "$ref": "#/definitions/params"
+          },
+          "markdown": {
+            "$ref": "#/definitions/markdown"
+          },
+          "slides": {
+            "type": "array",
+            "options": {
+              "collapsed": "true"
+            },
+            "items": {
+              "type": "object",
+              "title": "Slide",
+              "properties": {
+                "id": {
+                  "type": "string"
+                },
+                "title": {
+                  "type": "string"
+                },
+                "params": {
+                  "$ref": "#/definitions/params"
+                },
+                "markdown": {
+                  "$ref": "#/definitions/markdown"
+                }
+              },
+              "required": [
+                "title",
+                "params",
+                "markdown"
+              ]
+            }
+          }
+        },
+        "required": [
+          "title",
+          "params",
+          "markdown"
+        ]
+      }
+    }
+  },
+  "definitions": {
+    "params": {
+      "type": "object",
+      "title": "Parameters",
+      "options": {
+        "collapsed": "true"
+      },
+      "properties": {
+        "theme": {
+          "type": "string",
+          "title": "Theme",
+          "enum": [
+            "beige",
+            "black",
+            "blood",
+            "league",
+            "moon",
+            "night",
+            "serif",
+            "simple",
+            "sky",
+            "solarized",
+            "white"
+          ],
+          "default": "simple"
+        },
+        "background-image": {
+          "$ref": "/choices/bg",
+          "title": "Background image",
+          "links": [
+            {
+              "rel": "Preview image",
+              "class": "link-info",
+              "href": "{{self}}"
+            }
+          ]
+        },
+        "background-opacity": {
+          "type": "string",
+          "title": "Background opacity",
+          "enum": [
+            "0.25",
+            "0.5",
+            "0.75",
+            "1"
+          ],
+          "default": "0.5"
+        },
+        "background-size": {
+          "type": "string",
+          "title": "Background size",
+          "enum": [
+            "contain",
+            "cover"
+          ],
+          "default": "cover"
+        }
+      }
+    },
+    "markdown": {
+      "type": "string",
+      "title": "Content",
+      "format": "markdown"
+    }
+  }
+}

templates/editor.html

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Presentation editor</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link rel="stylesheet" href=
+        "https://use.fontawesome.com/releases/v5.6.3/css/all.css"
+        integrity=
+            "sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
+            crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
+  </head>
+  <body>
+    <div class="container">
+      <h1>Presentation editor</h1>
+      <div id='editor_holder'></div>
+      <button class="btn btn-success" id='submit'>Submit (console.log)</button>
+    </div>
+    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+    <script>
+      fetch("/static/slides.schema.json")
+        .then(res => res.json())
+        .then(schema => {
+          console.log(schema);
+          fetch("/static/slides.json")
+            .then(res => res.json())
+            .then(slides => {
+              console.log(slides);
+              // Initialize the editor with a JSON schema
+              var editor = new JSONEditor(
+                document.getElementById('editor_holder'), {
+                  theme: "bootstrap5",
+                  iconlib: "fontawesome5",
+                  ajax: true,
+                  schema: schema,
+                  startval: slides
+                });
+              // Hook up the submit button to log to the console
+              document.getElementById('submit').addEventListener('click',() => {
+                // Get the value from the editor
+                console.log(editor.getValue());
+              });
+            });
+          });
+    </script>
+  </body>
+</html>