Add save function

Updates `static/slides.json` (copies backup `archive/`)

.gitignore

@@ -1,5 +1,6 @@
 venv/
 __pycache__/
+archive/*.json
 work/
 .env
 *.swp

app.py

@@ -4,28 +4,44 @@ from markdown import markdown
 from glob import glob
 import json
 import os
+import sys
+import time
+import shutil
 
 def preprocess_payload(payload):
-    for column in payload.get('columns', []):
-        md = column.get('markdown')
+    for column in payload.get("columns", []):
+        md = column.get("markdown")
         if md:
-            column['content'] = markdown(md)
-        for slide in column.get('slides', []):
-            md = slide.get('markdown')
+            column["content"] = markdown(md)
+        for slide in column.get("slides", []):
+            md = slide.get("markdown")
             if md:
-                slide['content'] = markdown(md)
+                slide["content"] = markdown(md)
 
 load_dotenv()
-payload = json.load(open("static/slides.json"))
-preprocess_payload(payload)
 
 application = Flask(__name__)
 
 @application.get("/")
 def home():
+    payload = json.load(open("static/slides.json"))
+    preprocess_payload(payload)
     return render_template("slides.html", **payload)
 
-@application.get("/choices/<topic>")
+@application.post("/update")
+def update():
+    shutil.copy(
+        "static/slides.json",
+        time.strftime(
+            "archive/slides-%Y-%m-%d-%H.%M.%S.json",
+            time.localtime()))
+    payload = request.get_json()
+    print(type(payload))
+    json.dump(payload, sys.stdout, indent=4)
+    json.dump(payload, open("static/slides.json", "w"), indent=4)
+    return({"status": "success"})
+
+@application.get("/enum/<topic>")
 def choices(topic):
     if topic in ["img", "bg"]:
         return {"type": "string", "enum": glob("static/{}/*.*".format(topic))}
@@ -35,14 +51,11 @@ def choices(topic):
 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')
+@application.route("/favicon.ico")
 def favicon():
-    return send_from_directory(os.path.join(application.root_path, 'static'),
-                               'favicon.ico', mimetype='image/vnd.microsoft.icon')
+    return send_from_directory(os.path.join(application.root_path, "static"),
+                               "favicon.ico", mimetype="image/vnd.microsoft.icon")

archive/README.md

@@ -0,0 +1 @@
+This is where we keep old versions of `slides.json`

static/slides.json

@@ -1,31 +1,31 @@
 {
-    "title": "Joe's farewell ceremony",
+    "title": "My Farewell Ceremony",
     "columns": [
         {
-            "id": "",
-            "title": "Goodbye from George",
+            "id": "welcome",
+            "title": "Goodbye, mates",
             "params": {
-                "theme": "sky",
-                "background-image": "static/img/valley-1.svg",
+                "theme": "simple",
+                "background-image": "static/bg/valley-1.svg",
                 "background-opacity": "0.25"
             },
-            "markdown": "This is my **farewell ceremony**.\n\nI [love](https://en.wikipedia.org/wiki/Love) you all."
+            "markdown": "Welcome, friends.\n\nWe're about to begin."
         },
         {
             "id": "memory",
             "title": "How I'd like to be remembered",
             "params": {
                 "theme": "solarized",
-                "background-image": "static/img/valley-1.svg",
+                "background-image": "static/bg/valley-1.svg",
                 "background-opacity": "0.25"
             },
-            "markdown": "I've done many things. Some of them I'm proud of:",
+            "markdown": "I've done many things.\n\nSome of them I'm proud of:",
             "slides": [
                 {
                     "id": "work",
                     "title": "My work",
                     "params": {
-                        "background-image": "static/img/valley-1.svg",
+                        "background-image": "static/bg/valley-1.svg",
                         "background-opacity": "0.25"
                     },
                     "markdown": "### I've worked like a horse.\n\n![A horse (of course)|w-50 centered](static/img/horse.png)"
@@ -35,7 +35,7 @@
                     "title": "The rest",
                     "params": {
                         "theme": "moon",
-                        "background-image": "static/img/particles-1.png",
+                        "background-image": "static/bg/twilight-1.svg",
                         "background-size": "contain"
                     },
                     "markdown": "#### I've rested like a cat.\n\n![A cat resting|w-66 centered](static/img/cat-resting.png)"
@@ -47,7 +47,7 @@
             "title": "Who I seek forgiveness from",
             "params": {
                 "theme": "league",
-                "background-image": "static/img/particles-1.svg",
+                "background-image": "static/bg/particles-1.svg",
                 "background-opacity": "0.25"
             },
             "markdown": "I've made many mistakes.\n\nI hope you can forgive me:",
@@ -55,6 +55,7 @@
                 {
                     "id": "horse",
                     "title": "My horse",
+                    "params": {},
                     "markdown": "![My horse|w-50 float-right](static/img/horse2.png)\n\nPlease forgive me, horse, for this and that."
                 },
                 {
@@ -68,4 +69,4 @@
             ]
         }
     ]
-}
+}

static/slides.schema.json

@@ -7,10 +7,13 @@
     },
     "columns": {
       "type": "array",
-      "title": "Columns",
+      "title": "Chapters",
+      "options": {
+        "collapsed": "true"
+      },
       "items": {
         "type": "object",
-        "title": "Column",
+        "title": "Chapter",
         "properties": {
           "id": {
             "type": "string"
@@ -26,12 +29,13 @@
           },
           "slides": {
             "type": "array",
+            "title": "Pages",
             "options": {
               "collapsed": "true"
             },
             "items": {
               "type": "object",
-              "title": "Slide",
+              "title": "Page",
               "properties": {
                 "id": {
                   "type": "string"
@@ -89,7 +93,7 @@
           "default": "simple"
         },
         "background-image": {
-          "$ref": "/choices/bg",
+          "$ref": "/enum/bg",
           "title": "Background image",
           "links": [
             {
@@ -124,7 +128,27 @@
     "markdown": {
       "type": "string",
       "title": "Content",
-      "format": "markdown"
+      "format": "markdown",
+      "options": {
+        "simplemde": {
+          "renderingConfig": {
+            "singleLineBreaks": false
+          },
+          "toolbar": [
+            "bold",
+            "italic",
+            "heading",
+            "|",
+            "ordered-list",
+            "unordered-list",
+            "|",
+            "link",
+            "quote",
+            "|",
+            "preview"
+          ]
+        }
+      }
     }
   }
 }

templates/editor.html

@@ -16,7 +16,10 @@
     <div class="container">
       <h1>Presentation editor</h1>
       <div id='editor_holder'></div>
-      <button class="btn btn-success" id='submit'>Submit (console.log)</button>
+      <div class="btn-group mt-2">
+        <button class="btn btn-success" id='submit'>Submit</button>
+        <a class="btn btn-secondary" href="/">Cancel</a>
+      </div>
     </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>
@@ -25,11 +28,9 @@
       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'), {
@@ -42,7 +43,13 @@
               // 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());
+                fetch("/update", {
+                  method: "POST",
+                  body: JSON.stringify(editor.getValue()),
+                  headers: {
+                      "Content-type": "application/json; charset=UTF-8"
+                  }
+                }).then((response) => { location.replace('/') });
               });
             });
           });

templates/slides.html

@@ -23,24 +23,24 @@
 	</head>
 	<body>
                 <div id="custom-nav">
-                  <a href="#/" title="Home">
                   <!-- the zero-width-space is a tweak against tidy removing empty tags -->
-                   <i class="fa fa-home">​</i></a> <a id="top-link" title="Section top"
-	                  disabled="disabled"><i class="fa fa-angle-double-up">​</i></a>
+                  <a href="#/" title="Home"><i class="fa fa-home">​</i></a>
+                  <a id="top-link" title="Section top" disabled="disabled"><i class="fa fa-angle-double-up">​</i></a>
+                  <a href="/editor" title="Edit"><i class="fa fa-user-edit">​</i></a>
                 </div>
 		<div class="reveal">
 			<div class="slides">
                           {% for column in columns %}
 				<section{% if column.params %}{% for key, value in column.params|dictsort %} data-{{key}}="{{value}}"{% endfor %}{% endif %}>
-                                    <section id="{{column.id|default('home')}}">
+                                    <section id="{{column.id}}">
                                         {# column's top slide #}
                                         <h3 class="title slide_title">{{column.title}}</h3>
                                         {% if column.content %}{{ column.content|safe }}{% endif %}
-                                        {# Main column (no id) shows links to other columns #}
-                                        {% if not column.id %}
+                                        {# Main column shows links to other columns #}
+                                        {% if loop.first %}
                                             <ul>
                                                 {% for other in columns %}
-                                                    {% if other.id %}<li><a href="#/{{other.id}}">{{other.title}}</a></li>{% endif %}
+                                                    {% if not loop.first %}<li><a href="#/{{other.id}}">{{other.title}}</a></li>{% endif %}
                                                 {% endfor %}
                                             </ul>
                                         {% endif %}