ui wip

src/ttfrog/themes/default/base.html

@@ -19,7 +19,7 @@
     {% include "breadcrumbs.html" %}
     {% endblock %}
     <div class='main-aligned'>
-        <div class='table-wrapper'>
+        <div class='content'>
         <main>
             {% for message in g.messages %}
             <div class="alert">

src/ttfrog/themes/default/breadcrumbs.html

@@ -1,3 +1,3 @@
-<div id='breadcrumbs' class='main-aligned'>
+<div id='breadcrumbs' class='content-aligned'>
 <a href="{{ url_for('index') }}">Home</a>{% for (uri, name) in breadcrumbs %}.<a href="{{ uri }}">{{ name }}</a>{% endfor %}
 </div>

src/ttfrog/themes/default/nav.html

@@ -1,5 +1,5 @@
 <nav>
-    <ul class="container main-aligned">
+    <ul class="container content-aligned">
         <li><a href='{{ root.uri }}'>Home</a></li>
     {% for subpage in root.members %}
         {% if user.can_read(subpage) %}
@@ -14,24 +14,6 @@
         [<a href="{{ url_for('logout') }}">Logout</a>]
         {% endif %}
     </li>
-    <!--
-    <li class='dropdown'>
-      <a href='#'>Pages <i class="fa fa-angle-down"></i></a>
-      <div class='mega-menu'>
-      	<div class="container">
-          <div class="item">
-              <h3>Home Page</h3>
-              <ul>
-                <li><a href='#'>Home Page No #1</a></li>
-                <li><a href='#'>Home Page No #2</a></li>
-                <li><a href='#'>Home Page No #3</a></li>
-                <li><a href='#'>Home Page No #4</a></li>
-
-              </ul>
-          </div>
-        <</div>
-    </li>
-    -->
     </ul>
 </nav>
 <menu>

src/ttfrog/themes/default/page.html

@@ -2,9 +2,9 @@
 
 {% block styles %}
 {% if user.can_write(page) %}
-  <link rel="stylesheet" href="/static/toastui-editor.css" />
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='editor/editor.css' ) }}">
 {% else %}
-  <link rel="stylesheet" href="/static/toastui-editor-viewer.min.css" />
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='viewer/viewer.css' ) }}">
 {% endif %}
 {% endblock %}
 
@@ -16,18 +16,11 @@
 
 {% block scripts %}
     {% if user.can_write(page) %}
-        <script src="/static/toastui-editor-all.min.js"></script>
-        <script src="/static/site.js"></script>
+        <script src="{{ url_for('static', filename='editor/toastui-editor-all.min.js' ) }}"></script>
+        <script src="{{ url_for('static', filename='editor/editor.js' ) }}"></script>
         <script>initialize();</script>
     {% else %}
-        <script src="/static/toastui-editor-viewer.min.js"></script>
-        <script>
-            const viewer = new toastui.Editor({
-                viewer: true,
-                el: document.querySelector("#viewer"),
-                usageStatistics: false,
-            });
-            viewer.setMarkdown(document.getElementById("data_form__body").value);
-        </script>
+        <script src="{{ url_for('static', filename='viewer/toastui-editor-viewer.min.js' ) }}"></script>
+        <script src="{{ url_for('static', filename='viewer/viewer.js' ) }}"></script>
     {% endif %}
 {% endblock %}

src/ttfrog/themes/default/static/editor/editor.css

@@ -0,0 +1,106 @@
+@import 'toastui-editor.min.css';
+
+#editor {
+    display: inline;
+}
+
+.toastui-editor-defaultUI-toolbar {
+    padding: 0px !important;
+    margin: 0px !important;
+    border: 0px !important;
+    background: transparent !important;
+}
+
+.toastui-editor-toolbar {
+    box-shadow: 0px 3px 5px #CCC;
+    margin-bottom: 20px !important;
+}
+
+.toastui-editor-main-container {
+    display: contents;
+}
+
+.toastui-editor,
+.toastui-editor-main,
+.toastui-editor-md-container,
+.toastui-editor-defaultUI, 
+.toastui-editor-contents,
+.toastui-editor-ww-mode,
+.toastui-editor-md-preview,
+.toastui-editor-md, 
+.ProseMirror {
+    border: 0px !important;
+    padding: 0px !important;
+    margin: 0px !important;
+    font-size: var(--default-font-size) !important;
+    font-family: var(--default-font-family) !important;
+}
+
+#editor .toastui-editor-md-container > div > div,
+#editor .toastui-editor-ww-container > div > div {
+    border: 1px dotted #ccc;
+}
+
+#editor .toastui-editor-defaultUI-toolbar {
+    margin-bottom: 20px;
+}
+
+#editor .toastui-editor-toolbar {
+    position: sticky !important;
+    top: 0 !important;
+    z-index: 99 !important;
+    width: 100% !important;
+    background: #FFF !important;
+}
+
+/* applied to #editor */
+.read-only {
+}
+
+#editor.read-only .toastui-editor-toolbar {
+    box-shadow: none;
+}
+
+#editor.read-only .toastui-editor-ww-container > div > div {
+    background: #FFF;
+}
+
+div.toastui-editor-md-splitter,
+div.toastui-editor-md-preview {
+    display: none !Important;
+}
+
+div.toastui-editor.md-mode {
+    width: 100% !important;
+}
+
+#editor button.toastui-editor-toolbar-icons {
+    filter:unset;
+    pointer-events: all;
+    opacity: 1.0;
+}
+
+#editor.read-only button.toastui-editor-toolbar-icons {
+    filter:saturate(0) !Important;
+    pointer-events: none;
+    opacity: 0.3;
+}
+
+#editor button.actions {
+    background-image: none;
+    margin: 0;
+}
+
+#editor.read-only button.actions {
+    display: none;
+}
+
+#editor.read-only #toggleButton {
+    display: block !important;
+}
+
+
+.toastui-editor-defaultUI-toolbar > div:nth-child(5) {
+    flex: auto;
+    justify-content: flex-end;
+}

src/ttfrog/themes/default/static/editor/toastui-editor.min.css

@@ -0,0 +1,6 @@
+/*!
+ * @toast-ui/editor
+ * @version 3.2.2 | Fri Feb 17 2023
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
+ * @license MIT
+ */.ProseMirror{word-wrap:break-word;font-feature-settings:"liga" 0;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;position:relative;white-space:pre-wrap;white-space:break-spaces}.ProseMirror pre{white-space:pre-wrap}.ProseMirror li{position:relative}.ProseMirror-hideselection ::selection{background:transparent}.ProseMirror-hideselection ::-moz-selection{background:transparent}.ProseMirror-hideselection{caret-color:transparent}.ProseMirror-selectednode{outline:2px solid #8cf}li.ProseMirror-selectednode{outline:none}li.ProseMirror-selectednode:after{border:2px solid #8cf;bottom:-2px;content:"";left:-32px;pointer-events:none;position:absolute;right:-2px;top:-2px}img.ProseMirror-separator{border:none!important;display:inline!important;margin:0!important}.auto-height,.auto-height .toastui-editor-defaultUI{height:auto}.auto-height .toastui-editor-md-container{position:relative}:not(.auto-height)>.toastui-editor-defaultUI,:not(.auto-height)>.toastui-editor-defaultUI>.toastui-editor-main{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:not(.auto-height)>.toastui-editor-defaultUI>.toastui-editor-main{-ms-flex:1;flex:1}.toastui-editor-defaultUI-toolbar:after,.toastui-editor-md-container:after{clear:both;content:"";display:block;height:0}.toastui-editor-main{box-sizing:border-box;height:inherit;min-height:0;position:relative}.toastui-editor-md-container{display:none;height:100%;overflow:hidden}.toastui-editor-md-container .toastui-editor{line-height:1.5;position:relative}.toastui-editor-md-container .toastui-editor,.toastui-editor-md-container .toastui-editor-md-preview{box-sizing:border-box;height:inherit;padding:0}.toastui-editor-md-container .toastui-editor-md-preview{height:100%;overflow:auto;padding:0 25px}.toastui-editor-md-container .toastui-editor-md-preview>p:first-child{margin-top:0!important}.toastui-editor-md-container .toastui-editor-md-preview .toastui-editor-contents{padding-top:8px}.toastui-editor-main .toastui-editor-md-tab-style>.toastui-editor,.toastui-editor-main .toastui-editor-md-tab-style>.toastui-editor-md-preview{display:none;width:100%}.toastui-editor-main .toastui-editor-md-tab-style>.active{display:block}.toastui-editor-main .toastui-editor-md-vertical-style>.toastui-editor-tabs{display:none}.toastui-editor-main .toastui-editor-md-tab-style>.toastui-editor-tabs{display:block}.toastui-editor-main .toastui-editor-md-vertical-style .toastui-editor,.toastui-editor-main .toastui-editor-md-vertical-style .toastui-editor-md-preview{width:50%}.toastui-editor-main .toastui-editor-md-splitter{background-color:#ebedf2;display:none;height:100%;left:50%;position:absolute;width:1px}.toastui-editor-main .toastui-editor-md-vertical-style .toastui-editor-md-splitter{display:block}.toastui-editor-ww-container{background-color:#fff;display:none;height:inherit;overflow:hidden}.auto-height .toastui-editor-main-container{position:relative}.toastui-editor-main-container{color:#222;height:inherit;line-height:1;position:absolute;width:100%}.toastui-editor-ww-container>.toastui-editor{height:inherit;position:relative;width:100%}.toastui-editor-ww-container .toastui-editor-contents{box-sizing:border-box;height:inherit;margin:0;overflow:auto;padding:16px 25px 0}.toastui-editor-ww-container .toastui-editor-contents p{margin:0}.toastui-editor-md-mode .toastui-editor-md-container,.toastui-editor-ww-mode .toastui-editor-ww-container{display:block;z-index:20}.toastui-editor-md-mode .toastui-editor-md-vertical-style{display:-ms-flexbox;display:flex}.toastui-editor-defaultUI.hidden,.toastui-editor-main.hidden{display:none}.toastui-editor-defaultUI .ProseMirror{padding:18px 25px}.toastui-editor-defaultUI{border:1px solid #dadde6;border-radius:4px;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,나눔바른고딕,Nanum Barun Gothic,맑은고딕,Malgun Gothic,sans-serif;height:100%;position:relative}.toastui-editor-defaultUI button{border:none;border-radius:2px;color:#333;cursor:pointer;font-size:13px;height:28px}.toastui-editor-defaultUI .toastui-editor-ok-button{background-color:#00a9ff;color:#fff;height:32px;min-width:63px;outline-color:#009bf2}.toastui-editor-defaultUI .toastui-editor-ok-button:hover{background-color:#009bf2}.toastui-editor-defaultUI .toastui-editor-close-button{background-color:#f7f9fc;border:1px solid #dadde6;height:32px;margin-right:5px;min-width:63px;outline-color:#cbcfdb}.toastui-editor-defaultUI .toastui-editor-close-button:hover{border-color:#cbcfdb}.toastui-editor-mode-switch{background-color:#fff;border-radius:0 0 3px 3px;border-top:1px solid #dadde6;font-size:12px;height:28px;padding-right:10px;text-align:right}.toastui-editor-mode-switch .tab-item{background:#f7f9fc;border:1px solid #dadde6;border-radius:0 0 4px 4px;box-sizing:border-box;color:#969aa5;cursor:pointer;display:inline-block;font-weight:500;height:24px;line-height:24px;margin-right:-1px;margin-top:-1px;text-align:center;width:96px}.toastui-editor-mode-switch .tab-item.active{bacLine truncated

src/ttfrog/themes/default/static/site.css

@@ -9,6 +9,7 @@ html {
 body {
     font-family: var(--default-font-family);
     font-size: var(--default-font-size);
+    background: var(--body-background);
     height: inherit;
     width: 100%;
     margin: 0px;
@@ -18,7 +19,7 @@ body {
     scrollbar-gutter: stable;
 }
 
-h1, .toastui-editor-contents h1 {
+h1 {
     font-size: var(--h1-size) !important;
     font-weight: var(--header-weight) !important;
     font-family: var(--header-font) !important;
@@ -31,7 +32,7 @@ h1, .toastui-editor-contents h1 {
 }
 
 
-h2, .toastui-editor-contents h2 {
+h2 {
     font-size: var(--h2-size) !important;
     font-weight: var(--header2-weight) !important;
     font-family: var(--header-font) !important;
@@ -44,7 +45,7 @@ h2, .toastui-editor-contents h2 {
 }
 
 
-h3, .toastui-editor-contents h3 {
+h3 {
     font-size: var(--h3-size) !important;
     font-weight: var(--header3-weight) !important;
     font-family: var(--header-font) !important;
@@ -57,7 +58,7 @@ h3, .toastui-editor-contents h3 {
 }
 
 
-h4, .toastui-editor-contents h4 {
+h4 {
     font-size: var(--h4-size) !important;
     font-weight: var(--header4-weight) !important;
     font-family: var(--header-font) !important;
@@ -70,7 +71,7 @@ h4, .toastui-editor-contents h4 {
 }
 
 
-h5, .toastui-editor-contents h5 {
+h5 {
     font-size: var(--h5-size) !important;
     font-weight: var(--header5-weight) !important;
     font-family: var(--header-font) !important;
@@ -83,7 +84,7 @@ h5, .toastui-editor-contents h5 {
 }
 
 
-h6, .toastui-editor-contents h6 {
+h6 {
     font-size: var(--h6-size) !important;
     font-weight: var(--header6-weight) !important;
     font-family: var(--header-font) !important;
@@ -99,14 +100,15 @@ h6, .toastui-editor-contents h6 {
 a {text-decoration: none;}
 
 nav ul.container {
+    height: 100%;
+    align-content: center;
 	margin: auto;
 }
 
 ul {
-	padding-left: 0;
-    margin-top: 0;
-    margin-bottom: 0;
 	list-style: none;
+	padding-left: 0;
+    margin:0;
 }
 
 nav {
@@ -114,13 +116,12 @@ nav {
     margin: 0px;
     padding: 0px;
     height: var(--nav-height);
-	background: #0ca0d6;
+	background: var(--blue);
 }
 
 nav > ul > li {
 	display: inline-block;
-  	font-size: 14px;
-  	padding: 0 15px;
+  	padding: 0 var(--nav-spacing);
   	position: relative;
 }
 
@@ -129,60 +130,19 @@ nav > ul > li:first-child {
 }
 
 nav > ul > li > a {
-	color: #fff;
+	color: var(--nav-color);
   	display: inline-block;
-  	padding: 20px 0;
-  	border-bottom: 3px solid transparent;
-    transition: all .3s ease;
 }
 nav > ul > li:hover > a {
-	color: #444; 
-  	border-bottom: 3px solid #444;
+	color: var(--nav-hover-color);
 }
 
-.mega-menu {
-	background: #eee;
-  	visibility: hidden;
-    opacity: 0;
-    transition: visibility 0s, opacity 0.5s linear;
-  	position: absolute;
-  	left: 0;
-  	width: 100%;
-    padding-bottom: 20px;
-}
-.mega-menu h3 {color: #444;}
-
-.mega-menu .container {
-    display: flex;
-}
-.mega-menu .item {
-	flex-grow: 1;
-    margin: 0 10px;
-}
-.mega-menu .item img {
-    width: 100%;
-}
-.mega-menu a {
-	border-bottom: 1px solid #ddd;
-  	color: #4ea3d8;
-  	display: block;
-  	padding: 10px 0;
-}
-.mega-menu a:hover {color: #2d6a91;}
-
-
 .dropdown {position: static;}
 
-.dropdown:hover .mega-menu {
-    visibility: visible;
-    opacity: 1;
-}
-
 #breadcrumbs  {
     display: block;
     align-content: center;
-    height: 46px;
-    line-height: 46px;
+    height: var(--breadcrumbs-height);
     width: 100%;
 }
 
@@ -190,46 +150,6 @@ nav > ul > li:hover > a {
     display: none;
 }
 
-#editor {
-    display: inline;
-}
-
-.toastui-editor-defaultUI-toolbar {
-    padding: 0px !important;
-    margin: 0px !important;
-    border: 0px !important;
-    background: transparent !important;
-}
-
-.toastui-editor-toolbar {
-    box-shadow: 0px 3px 5px #CCC;
-    margin-bottom: 20px !important;
-}
-
-/*
-#actions {
-    display: flex;
-    float: right;
-}
-
-#actions > a {
-    display: flex;
-    border: 1px solid black;
-    border-radius: 5px;
-    padding: 5px;
-    background: #FFF;
-    color: blue;
-    cursor: pointer;
-    margin-left: 5px;
-
-}
-#actions a:hover {
-    color: white;
-    background: blue;
-}
-*/
-
-
 .main-aligned {
     display: block;
     margin: auto;
@@ -237,10 +157,23 @@ nav > ul > li:hover > a {
     min-width: var(--min-width);
 }
 
-.table-wrapper {
+.content-aligned {
+    display: block;
+    margin: auto;
+    max-width: calc(var(--max-width) - (2 * var(--content-padding)));
+    min-width: var(--min-width);
+    padding-left: var(--content-padding); 
+    padding-right: var(--content-padding); 
+}
+
+.content {
     position: relative;
     display: table;
-    width: 100%;
+    width: calc(100% - (2 * var(--content-padding)));
+    padding: var(--content-padding);
+    background: var(--content-background);
+    border: var(--content-border);
+    border-radius: var(--content-border-radius);
 }
 
 main {
@@ -251,98 +184,10 @@ main {
 footer {
     display: block;
     position: relative;
-    bottom: 100vh - var(--footer-height);
+    bottom: 0;
+    margin-top: var(--footer-spacing);
     height: var(--footer-height);
-    background-color: #DEDEDE;
-}
-
-.toastui-editor-main-container {
-    display: contents;
-}
-
-.toastui-editor,
-.toastui-editor-main,
-.toastui-editor-md-container,
-.toastui-editor-defaultUI, 
-.toastui-editor-contents,
-.toastui-editor-ww-mode,
-.toastui-editor-md-preview,
-.toastui-editor-md, 
-.ProseMirror {
-    border: 0px !important;
-    padding: 0px !important;
-    margin: 0px !important;
-    font-size: var(--default-font-size) !important;
-    font-family: var(--default-font-family) !important;
-}
-
-#editor .toastui-editor-md-container > div > div,
-#editor .toastui-editor-ww-container > div > div {
-    border: 1px dotted #ccc;
-}
-
-#editor .toastui-editor-defaultUI-toolbar {
-    margin-bottom: 20px;
-}
-
-#editor .toastui-editor-toolbar {
-    position: sticky !important;
-    top: 0 !important;
-    z-index: 99 !important;
-    width: 100% !important;
-    background: #FFF !important;
-}
-
-/* applied to #editor */
-.read-only {
-}
-
-#editor.read-only .toastui-editor-toolbar {
-    box-shadow: none;
-}
-
-#editor.read-only .toastui-editor-ww-container > div > div {
-    background: #FFF;
-}
-
-div.toastui-editor-md-splitter,
-div.toastui-editor-md-preview {
-    display: none !Important;
-}
-
-div.toastui-editor.md-mode {
-    width: 100% !important;
-}
-
-#editor button.toastui-editor-toolbar-icons {
-    filter:unset;
-    pointer-events: all;
-    opacity: 1.0;
-}
-
-#editor.read-only button.toastui-editor-toolbar-icons {
-    filter:saturate(0) !Important;
-    pointer-events: none;
-    opacity: 0.3;
-}
-
-#editor button.actions {
-    background-image: none;
-    margin: 0;
-}
-
-#editor.read-only button.actions {
-    display: none;
-}
-
-#editor.read-only #toggleButton {
-    display: block !important;
-}
-
-
-.toastui-editor-defaultUI-toolbar > div:nth-child(5) {
-    flex: auto;
-    justify-content: flex-end;
+    background-color: var(--footer-background-color);
 }
 
 menu {

src/ttfrog/themes/default/static/theme.css

@@ -12,11 +12,29 @@
     --h6-size: 10.72px;
 
     /* Layout */
+    --content-padding: 20px;
     --nav-height: 50px;
-    --footer-height: 150px;
+    --nav-spacing: 15px;
     --breadcrumbs-height: 50px;
-    --wrapper-padding: 20px;
-    --main-height: calc(100vh - var(--nav-height) - var(--footer-height) - var(--breadcrumbs-height));
+    --footer-height: 50px;
+    --footer-spacing: var(--breadcrumbs-height);
+
     --max-width: 1024px;
-    --min-width: 710px;
+    --min-width: calc(710px + (2 * var(--content-padding)));
+
+    --main-height: calc(100vh - var(--nav-height) - var(--footer-height) - var(--breadcrumbs-height) - calc(2 * var(--content-padding)) - var(--footer-spacing));
+
+    --content-border-radius: calc(0.5 * var(--content-padding));
+
+    /* colors */
+	--blue: #0ca0d6;
+    --white: #FFF;
+
+    --body-background: #EEE;
+    --nav-color: #000055;
+    --nav-hover-color: #FFF;
+    --content-background: #FFF;
+    --footer-background-color: #DDD;
+
+
 }

src/ttfrog/themes/default/static/viewer/toastui-editor-viewer.min.css

@@ -0,0 +1,6 @@
+/*!
+ * @toast-ui/editor
+ * @version 3.2.2 | Fri Feb 17 2023
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
+ * @license MIT
+ */.ProseMirror{overflow-X:hidden;color:#222;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,나눔바른고딕,Nanum Barun Gothic,맑은고딕,Malgun Gothic,sans-serif;font-size:13px;height:calc(100% - 36px);overflow-y:auto}.ProseMirror .placeholder{color:#999}.ProseMirror-selectednode,.ProseMirror:focus{outline:none}.html-block.ProseMirror-selectednode,table.ProseMirror-selectednode{border-radius:2px;outline:2px solid #00a9ff}.toastui-editor-contents{font-family:Open Sans,Helvetica Neue,Helvetica,Arial,나눔바른고딕,Nanum Barun Gothic,맑은고딕,Malgun Gothic,sans-serif;font-size:13px;margin:0;padding:0;z-index:20}.toastui-editor-contents :not(table){box-sizing:content-box;line-height:160%}.toastui-editor-contents address,.toastui-editor-contents cite,.toastui-editor-contents dfn,.toastui-editor-contents em,.toastui-editor-contents i,.toastui-editor-contents var{font-style:italic}.toastui-editor-contents strong{font-weight:700}.toastui-editor-contents p{color:#222;margin:10px 0}.toastui-editor-contents>div>div:first-of-type h1,.toastui-editor-contents>h1:first-of-type{margin-top:14px}.toastui-editor-contents h1,.toastui-editor-contents h2,.toastui-editor-contents h3,.toastui-editor-contents h4,.toastui-editor-contents h5,.toastui-editor-contents h6{color:#222;font-weight:700}.toastui-editor-contents h1{border-bottom:3px double #999;font-size:24px;line-height:28px;margin:52px 0 15px;padding-bottom:7px}.toastui-editor-contents h2{border-bottom:1px solid #dbdbdb;font-size:22px;line-height:23px;margin:20px 0 13px;padding-bottom:7px}.toastui-editor-contents h3{font-size:20px;margin:18px 0 2px}.toastui-editor-contents h4{font-size:18px;margin:10px 0 2px}.toastui-editor-contents h3,.toastui-editor-contents h4{line-height:18px}.toastui-editor-contents h5{font-size:16px}.toastui-editor-contents h6{font-size:14px}.toastui-editor-contents h5,.toastui-editor-contents h6{line-height:17px;margin:9px 0 -4px}.toastui-editor-contents del{color:#999}.toastui-editor-contents blockquote{border-left:4px solid #e5e5e5;color:#999;margin:14px 0;padding:0 16px}.toastui-editor-contents blockquote ol,.toastui-editor-contents blockquote p,.toastui-editor-contents blockquote ul{color:#999}.toastui-editor-contents blockquote>:first-child{margin-top:0}.toastui-editor-contents blockquote>:last-child{margin-bottom:0}.toastui-editor-contents code,.toastui-editor-contents pre{border:0;border-radius:0;font-family:Consolas,Courier,Apple SD 산돌고딕 Neo,-apple-system,Lucida Grande,Apple SD Gothic Neo,맑은 고딕,Malgun Gothic,Segoe UI,돋움,dotum,sans-serif}.toastui-editor-contents pre{background-color:#f4f7f8;margin:2px 0 8px;padding:18px}.toastui-editor-contents code{background-color:#f9f2f4;border-radius:2px;color:#c1798b;letter-spacing:-.3px;padding:2px 3px}.toastui-editor-contents pre code{background-color:transparent;color:inherit;padding:0;white-space:pre-wrap}.toastui-editor-contents img{box-sizing:border-box;margin:4px 0 10px;max-width:100%;vertical-align:top}.toastui-editor-contents table{border:1px solid rgba(0,0,0,.1);border-collapse:collapse;box-sizing:border-box;color:#222;margin:12px 0 14px;width:auto}.toastui-editor-contents table td,.toastui-editor-contents table th{border:1px solid rgba(0,0,0,.1);height:32px;padding:5px 14px 5px 12px}.toastui-editor-contents table th{background-color:#555;color:#fff;font-weight:300;padding-top:6px}.toastui-editor-contents th p{color:#fff;margin:0}.toastui-editor-contents td p{margin:0;padding:0 2px}.toastui-editor-contents td.toastui-editor-cell-selected{background-color:#d8dfec}.toastui-editor-contents th.toastui-editor-cell-selected{background-color:#908f8f}.toastui-editor-contents dir,.toastui-editor-contents menu,.toastui-editor-contents ol,.toastui-editor-contents ul{color:#222;display:block;list-style-type:none;margin:6px 0 10px;padding-left:24px}.toastui-editor-contents ol{counter-reset:li;list-style-type:none}.toastui-editor-contents ol>li{counter-increment:li}.toastui-editor-contents ol>li:before,.toastui-editor-contents ul>li:before{display:inline-block;position:absolute}.toastui-editor-contents ul>li:before{background-color:#ccc;border-radius:50%;content:"";height:5px;margin-left:-17px;margin-top:6px;width:5px}.toastui-editor-contents ol>li:before{color:#aaa;content:"." counter(li);direction:rtl;margin-left:-28px;text-align:right;width:24px}.toastui-editor-contents ol ol,.toastui-editor-contents ol ul,.toastui-editor-contents ul ol,.toastui-editor-contents ul ul{margin-bottom:0!important;margin-top:0!important}.toastui-editor-contents ol li,.toastui-editor-contents ul li{position:relative}.toastui-editor-contents ol p,.toastui-editor-contents ul p{margin:0}.toastui-editor-contents hr{border-top:1px solid #eee;margin:16px 0}.toastui-editor-contents a{color:#4b96e6;text-decoration:underline}.toastui-editor-contents a:hover{color:#1f70de}.toastui-editor-contents .image-link{position:relative}.toastui-editor-contents .image-link:hover:before{background:#fff url(datLine truncated

src/ttfrog/themes/default/static/viewer/toastui-editor-viewer.min.js

@@ -0,0 +1,24 @@
+/*!
+ * @toast-ui/editor
+ * @version 3.2.2 | Fri Feb 17 2023
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
+ * @license MIT
+ */
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("prosemirror-inputrules"),require("prosemirror-keymap"),require("prosemirror-model"),require("prosemirror-state"),require("prosemirror-view")):"function"==typeof define&&define.amd?define(["prosemirror-inputrules","prosemirror-keymap","prosemirror-model","prosemirror-state","prosemirror-view"],t):"object"==typeof exports?exports.toastui=t(require("prosemirror-inputrules"),require("prosemirror-keymap"),require("prosemirror-model"),require("prosemirror-state"),require("prosemirror-view")):(e.toastui=e.toastui||{},e.toastui.Editor=t(e[void 0],e[void 0],e[void 0],e[void 0],e[void 0]))}(self,(function(e,t,r,n,i){return function(){var o={368:function(e){
+/*! @license DOMPurify 2.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.3.3/LICENSE */
+e.exports=function(){"use strict";function e(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}var t=Object.hasOwnProperty,r=Object.setPrototypeOf,n=Object.isFrozen,i=Object.getPrototypeOf,o=Object.getOwnPropertyDescriptor,a=Object.freeze,s=Object.seal,l=Object.create,u="undefined"!=typeof Reflect&&Reflect,c=u.apply,p=u.construct;c||(c=function(e,t,r){return e.apply(t,r)}),a||(a=function(e){return e}),s||(s=function(e){return e}),p||(p=function(t,r){return new(Function.prototype.bind.apply(t,[null].concat(e(r))))});var f=k(Array.prototype.forEach),d=k(Array.prototype.pop),h=k(Array.prototype.push),g=k(String.prototype.toLowerCase),m=k(String.prototype.match),v=k(String.prototype.replace),y=k(String.prototype.indexOf),b=k(String.prototype.trim),w=k(RegExp.prototype.test),x=C(TypeError);function k(e){return function(t){for(var r=arguments.length,n=Array(r>1?r-1:0),i=1;i<r;i++)n[i-1]=arguments[i];return c(e,t,n)}}function C(e){return function(){for(var t=arguments.length,r=Array(t),n=0;n<t;n++)r[n]=arguments[n];return p(e,r)}}function L(e,t){r&&r(e,null);for(var i=t.length;i--;){var o=t[i];if("string"==typeof o){var a=g(o);a!==o&&(n(t)||(t[i]=a),o=a)}e[o]=!0}return e}function T(e){var r=l(null),n=void 0;for(n in e)c(t,e,[n])&&(r[n]=e[n]);return r}function N(e,t){for(;null!==e;){var r=o(e,t);if(r){if(r.get)return k(r.get);if("function"==typeof r.value)return k(r.value)}e=i(e)}function n(e){return console.warn("fallback value for",e),null}return n}var D=a(["a","abbr","acronym","address","area","article","aside","audio","b","bdi","bdo","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","content","data","datalist","dd","decorator","del","details","dfn","dialog","dir","div","dl","dt","element","em","fieldset","figcaption","figure","font","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","img","input","ins","kbd","label","legend","li","main","map","mark","marquee","menu","menuitem","meter","nav","nobr","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","s","samp","section","select","shadow","small","source","spacer","span","strike","strong","style","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","tr","track","tt","u","ul","var","video","wbr"]),A=a(["svg","a","altglyph","altglyphdef","altglyphitem","animatecolor","animatemotion","animatetransform","circle","clippath","defs","desc","ellipse","filter","font","g","glyph","glyphref","hkern","image","line","lineargradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialgradient","rect","stop","style","switch","symbol","text","textpath","title","tref","tspan","view","vkern"]),E=a(["feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence"]),S=a(["animate","color-profile","cursor","discard","fedropshadow","feimage","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignobject","hatch","hatchpath","mesh","meshgradient","meshpatch","meshrow","missing-glyph","script","set","solidcolor","unknown","use"]),M=a(["math","menclose","merror","mfenced","mfrac","mglyph","mi","mlabeledtr","mmultiscripts","mn","mo","mover","mpadded","mphantom","mroot","mrow","ms","mspace","msqrt","mstyle","msub","msup","msubsup","mtable","mtd","mtext","mtr","munder","munderover"]),R=a(["maction","maligngroup","malignmark","mlongdiv","mscarries","mscarry","msgroup","mstack","msline","msrow","semantics","annotation","annotation-xml","mprescripts","none"]),O=a(["#text"]),q=a(["accept","action","align","alt","autocapitalize","autocomplete","autopictureinpicture","autoplay","background","bgcolor","border","capture","cellpadding","cellspacing","checked","cite","class","clear","color","cols","colspan","controls","controlslist","coords","crossorigin","datetime","decoding","default","dir","disabled","disablepictureinpicture","disableremoteplayback","download","draggable","enctype","enterkeyhint","face","for","headers","height","hidden","high","href","hreflang","id","inputmode","integrity","ismap","kind","label","lang","list","loading","loop","low","max","maxlength","media","method","min","minlength","multiple","muted","name","noshade","novalidate","nowrap","open","optimum","pattern","placeholder","playsinline","poster","preload","pubdate","radiogroup","readonly","rel","required","rev","reversed","role","rows","rowspan","spellcheck","scope","selected","shape","size","sizes","span","srclang","start","src","srcset","step","style","summary","tabindex","title","translate","type","usemap","valign","value","width","xmlns","slot"]),F=a(["accent-height","accumulatLine truncated
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var r=function(e,t){return r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},r(e,t)};function n(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var i=function(){return i=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.apply(this,arguments)};function o(e,t,r){if(r||2===arguments.length)for(var n,i=0,o=t.length;i<o;i++)!n&&i in t||(n||(n=Array.prototype.slice.call(t,0,i)),n[i]=t[i]);return e.concat(n||Array.prototype.slice.call(t))}var a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:void 0!==s.g?s.g:"undefined"!=typeof self?self:{},u={};function c(e,t,r){var n,i,o,a,s,l="";for("string"!=typeof t&&(r=t,t=c.defaultChars),void 0===r&&(r=!0),s=function(e){var t,r,n=u[e];if(n)return n;for(n=u[e]=[],t=0;t<128;t++)r=String.fromCharCode(t),/^[0-9a-z]$/i.test(r)?n.push(r):n.push("%"+("0"+t.toString(16).toUpperCase()).slice(-2));for(t=0;t<e.length;t++)n[e.charCodeAt(t)]=e[t];return n}(t),n=0,i=e.length;n<i;n++)if(o=e.charCodeAt(n),r&&37===o&&n+2<i&&/^[0-9a-f]{2}$/i.test(e.slice(n+1,n+3)))l+=e.slice(n,n+3),n+=2;else if(o<128)l+=s[o];else if(o>=55296&&o<=57343){if(o>=55296&&o<=56319&&n+1<i&&(a=e.charCodeAt(n+1))>=56320&&a<=57343){l+=encodeURIComponent(e[n]+e[n+1]),n++;continue}l+="%EF%BF%BD"}else l+=encodeURIComponent(e[n]);return l}c.defaultChars=";/?:@&=+$,-_.!~*'()#",c.componentChars="-_.!~*'()";var p=c,f={},d={},h={Aacute:"Á",aacute:"á",Abreve:"Ă",abreve:"ă",ac:"∾",acd:"∿",acE:"∾̳",Acirc:"Â",acirc:"â",acute:"´",Acy:"А",acy:"а",AElig:"Æ",aelig:"æ",af:"⁡",Afr:"𝔄",afr:"𝔞",Agrave:"À",agrave:"à",alefsym:"ℵ",aleph:"ℵ",Alpha:"Α",alpha:"α",Amacr:"Ā",amacr:"ā",amalg:"⨿",amp:"&",AMP:"&",andand:"⩕",And:"⩓",and:"∧",andd:"⩜",andslope:"⩘",andv:"⩚",ang:"∠",ange:"⦤",angle:"∠",angmsdaa:"⦨",angmsdab:"⦩",angmsdac:"⦪",angmsdad:"⦫",angmsdae:"⦬",angmsdaf:"⦭",angmsdag:"⦮",angmsdah:"⦯",angmsd:"∡",angrt:"∟",angrtvb:"⊾",angrtvbd:"⦝",angsph:"∢",angst:"Å",angzarr:"⍼",Aogon:"Ą",aogon:"ą",Aopf:"𝔸",aopf:"𝕒",apacir:"⩯",ap:"≈",apE:"⩰",ape:"≊",apid:"≋",apos:"'",ApplyFunction:"⁡",approx:"≈",approxeq:"≊",Aring:"Å",aring:"å",Ascr:"𝒜",ascr:"𝒶",Assign:"≔",ast:"*",asymp:"≈",asympeq:"≍",Atilde:"Ã",atilde:"ã",Auml:"Ä",auml:"ä",awconint:"∳",awint:"⨑",backcong:"≌",backepsilon:"϶",backprime:"‵",backsim:"∽",backsimeq:"⋍",Backslash:"∖",Barv:"⫧",barvee:"⊽",barwed:"⌅",Barwed:"⌆",barwedge:"⌅",bbrk:"⎵",bbrktbrk:"⎶",bcong:"≌",Bcy:"Б",bcy:"б",bdquo:"„",becaus:"∵",because:"∵",Because:"∵",bemptyv:"⦰",bepsi:"϶",bernou:"ℬ",Bernoullis:"ℬ",Beta:"Β",beta:"β",beth:"ℶ",between:"≬",Bfr:"𝔅",bfr:"𝔟",bigcap:"⋂",bigcirc:"◯",bigcup:"⋃",bigodot:"⨀",bigoplus:"⨁",bigotimes:"⨂",bigsqcup:"⨆",bigstar:"★",bigtriangledown:"▽",bigtriangleup:"△",biguplus:"⨄",bigvee:"⋁",bigwedge:"⋀",bkarow:"⤍",blacklozenge:"⧫",blacksquare:"▪",blacktriangle:"▴",blacktriangledown:"▾",blacktriangleleft:"◂",blacktriangleright:"▸",blank:"␣",blk12:"▒",blk14:"░",blk34:"▓",block:"█",bne:"=⃥",bnequiv:"≡⃥",bNot:"⫭",bnot:"⌐",Bopf:"𝔹",bopf:"𝕓",bot:"⊥",bottom:"⊥",bowtie:"⋈",boxbox:"⧉",boxdl:"┐",boxdL:"╕",boxDl:"╖",boxDL:"╗",boxdr:"┌",boxdR:"╒",boxDr:"╓",boxDR:"╔",boxh:"─",boxH:"═",boxhd:"┬",boxHd:"╤",boxhD:"╥",boxHD:"╦",boxhu:"┴",boxHu:"╧",boxhU:"╨",boxHU:"╩",boxminus:"⊟",boxplus:"⊞",boxtimes:"⊠",boxul:"┘",boxuL:"╛",boxUl:"╜",boxUL:"╝",boxur:"└",boxuR:"╘",boxUr:"╙",boxUR:"╚",boxv:"│",boxV:"║",boxvh:"┼",boxvH:"╪",boxVh:"╫",boxVH:"╬",boxvl:"┤",boxvL:"╡",boxVl:"╢",boxVL:"╣",boxvr:"├",boxvR:"╞",boxVr:"╟",boxVR:"╠",bprime:"‵",breve:"˘",Breve:"˘",brvbar:"¦",bscr:"𝒷",Bscr:"ℬ",bsemi:"⁏",bsim:"∽",bsime:"⋍",bsolb:"⧅",bsol:"\\",bsolhsub:"⟈",bull:"•",bullet:"•",bump:"≎",bumpE:"⪮",bumpe:"≏",Bumpeq:"≎",bumpeq:"≏",Cacute:"Ć",cacute:"ć",capand:"⩄",capbrcup:"⩉",capcap:"⩋",cap:"∩",Cap:"⋒",capcup:"⩇",capdot:"⩀",CapitalDifferentialD:"ⅅ",caps:"∩︀",caret:"⁁",caron:"ˇ",Cayleys:"ℭ",ccaps:"⩍",Ccaron:"Č",ccaron:"č",Ccedil:"Ç",ccedil:"ç",Ccirc:"Ĉ",ccirc:"ĉ",Cconint:"∰",ccups:"⩌",ccupssm:"⩐",Cdot:"Ċ",cdot:"ċ",cedil:"¸",Cedilla:"¸",cemptyv:"⦲",cent:"¢",centerdot:"·",CenterDot:"·",cfr:"𝔠",Cfr:"ℭ",CHcy:"Ч",chcy:"ч",check:"✓",checkmark:"✓",Chi:"Χ",chi:"χ",circ:"ˆ",circeq:"≗",circlearrowleft:"↺",circlearrowright:"↻",circledast:"⊛",circledcirc:"⊚",circleddash:"⊝",Line truncated

src/ttfrog/themes/default/static/viewer/viewer.css

@@ -0,0 +1,9 @@
+@import 'toastui-editor-viewer.min.css';
+
+#viewer {
+    display: inline;
+}
+
+.toastui-editor-contents {
+    font-size: var(--default-font-size);
+}

src/ttfrog/themes/default/static/viewer/viewer.js

@@ -0,0 +1,6 @@
+var viewer = new toastui.Editor({
+    viewer: true,
+    el: document.querySelector("#viewer"),
+    usageStatistics: false,
+});
+viewer.setMarkdown(document.getElementById("data_form__body").value);

src/ttfrog/web.py

@@ -28,15 +28,19 @@ def get_page(path: str, table: str = "Page", create_okay: bool = False):
     uri = relative_uri(path)
 
     if table not in app.db.tables():
+        app.web.logger.debug(f"Table {table} does not exist in {app.db.tables()}.")
         return None
 
     page = app.db.table(table).get(where("uri") == uri, recurse=False)
 
     if not page:
+        app.web.logger.debug("Page does not exist.")
         if not create_okay:
+            app.web.logger.debug("Page does not exist and creating is not okay.")
             return None
         parent = get_parent(table, uri)
-        if not app.authorize(g.user, parent, schema.Permissions.READ):
+        if not app.authorize(g.user, parent, schema.Permissions.WRITE):
+            app.web.logger.debug(f"User {g.user} is not authorized to write {parent}")
             return None
         return getattr(schema, table)(name=uri.split("/")[-1], body="This page does not exist", parent=parent)
 
@@ -111,6 +115,8 @@ def logout():
 @app.web.route(f"{app.config.VIEW_URI}/<path:path>", methods=["GET"], defaults={"table": "Page"})
 def view(table, path):
     parent = get_parent(table, relative_uri())
+    if table not in app.db.tables():
+        table = parent.__class__.__name__ if parent else "Page"
     page = get_page(request.path, table=table, create_okay=(parent and parent.doc_id is not None))
     return rendered(page)