added assets compiling scripts, added syntax highlighting for text editor, fix for #73

.babelrc

@@ -1 +1,13 @@
-{ "presets": ["env"] }
+{
+  "presets": [],
+  "plugins": [
+    [
+      "prismjs",
+      {
+        "languages": ["html", "markdown", "markup"],
+        "theme": "okaidia",
+        "css": false
+      }
+    ]
+  ]
+}

.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 src/node_modules/
+.parcel-cache/
 .sass-cache/
 .cache/
 .nova/

brain/data/Render.inc.php

@@ -74,7 +74,7 @@ class Render
     $featured = [];
     $limit = 4;
     foreach ($pages as $page) {
-      //TODO: Move page data organization to render to utility class
+      //TODO: Plugin Sorting Class for page options
       if (!$page["deleted"] && $page["published"]) {
         if (count($recent) < $limit) {
           array_push($recent, [
@@ -163,7 +163,7 @@ class Render
           $template = $this->theme . "/index.twig";
           $location = "../public/index.html";
           $dir = null;
-
+          //
           $pageOptions = [
             "title" => $page["title"],
             "background" => $page["feature"],

brain/utility/Sorting.inc.php

@@ -181,7 +181,6 @@ class Sorting
       $limit = 4;
       $pages = (new Book("../content/pages"))->getContents();
       foreach ($pages as $item) {
-        //TODO: Move page data organization to render to utility class
         if (!$item["deleted"] && $item["published"]) {
           if (count($recent) < $limit) {
             array_push($recent, [

brain/views/dash/book.twig

@@ -120,5 +120,5 @@
     {% endblock %}
 
     {% block javascripts %}
-        <script src="/assets/scripts/dash.min.js" type="text/javascript"></script>
+        <script src="/assets/scripts/Start.js" type="text/javascript"></script>
     {% endblock %}

brain/views/dash/init.twig

@@ -44,5 +44,5 @@
 	{% endblock %}
 
 	{% block javascripts %}
-		<script src="/assets/scripts/dash.min.js" type="text/javascript"></script>
+		<script src="/assets/scripts/Start.js" type="text/javascript"></script>
 	{% endblock %}

brain/views/dash/navigation.twig

@@ -39,5 +39,5 @@
 	{% endblock %}
 
 	{% block javascripts %}
-		<script src="/assets/scripts/dash.min.js" type="text/javascript"></script>
+		<script src="/assets/scripts/Start.js" type="text/javascript"></script>
 	{% endblock %}

brain/views/dash/page-edit.twig

@@ -32,7 +32,7 @@
 {% endblock %}
 
 {% block stylesheets %}
-  <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfvbn">
+  <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfdfd">
   {% endblock %}
 
   {% block mainContent %}
@@ -106,7 +106,7 @@
               {{ include("dash/partials/editor.twig") }}
             {% endapply %}         
             <div id="edit-post-wrapper">
-              <pre><code id="edit-post-text" contenteditable="true"> {{- content -}}</code></pre>
+              <pre><code spellcheck="false" id="edit-post-text" contenteditable="true" class="language-markdown"> {{- content -}}</code></pre>
             </div>
         </div>
       </div>
@@ -114,5 +114,5 @@
   {% endblock %}
 
   {% block javascripts %}
-    <script src="/assets/scripts/dash.min.js" type="text/javascript"></script>
+    <script src="/assets/scripts/Start.js" type="text/javascript"></script>
   {% endblock %}

brain/views/dash/reset-password.twig

@@ -37,5 +37,5 @@
 	{% endblock %}
 
 	{% block javascripts %}
-		<script src="/assets/scripts/dash.min.js" type="text/javascript"></script>
+		<script src="/assets/scripts/Start.js" type="text/javascript"></script>
 	{% endblock %}

brain/views/dash/settings.twig

@@ -188,5 +188,5 @@
 	{% endblock %}
 
 	{% block javascripts %}
-		<script src="/assets/scripts/dash.min.js?" type="text/javascript"></script>
+		<script src="/assets/scripts/Start.js" type="text/javascript"></script>
 	{% endblock %}

brain/views/dash/start.twig

@@ -23,5 +23,5 @@
     {% endblock %}
 
     {% block javascripts %}
-        <script src="/assets/scripts/dash.min.js?" type="text/javascript"></script>
+        <script src="/assets/scripts/Start.js" type="text/javascript"></script>
     {% endblock %}

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "fipamo-dash",
+  "version": "2.5.0",
+  "private": true,
+  "apidoc": {
+    "name": "Fipamo API",
+    "version": "1.0.0",
+    "description": "The most chill API for the most chill blog framework"
+  },
+  
+  "devDependencies": {
+    "@babel/preset-env": "^7.16.5",
+    "babel-cli": "^6.26.0",
+    "eslint": "^8.5.0",
+    "eslint-plugin-babel": "^5.3.1",
+    "parcel": "^2.0.1"
+  },
+  "dependencies": {
+    "@babel/core": "^7.16.5",
+    "@babel/eslint-parser": "^7.16.5",
+    "animejs": "^3.2.1",
+    "babel-plugin-prismjs": "^2.1.0",
+    "babel-preset-env": "^1.7.0",
+    "bulma": "^0.9.3",
+    "caret-pos": "^2.0.0",
+    "jsdoc": "^3.6.7",
+    "minami": "^1.2.3",
+    "prismjs": "^1.25.0",
+    "sass": "^1.45.1",
+    "sortablejs": "^1.14.0"
+  },
+  "license": "UNLICENSED",
+  "author": "Are0h",
+  "scripts": {
+    "watch": "sass --watch src/styles:public/assets/css & npx parcel watch src/com/Start.js --dist-dir public/assets/scripts --public-url /assets/scripts"
+  },
+  "description": "Front end script for the most chill blog framework ever.",
+  "repository": "https://code.playvicio.us/Are0h/Fipamo"
+}

src/com/actions/PageActions.js

@@ -13,7 +13,7 @@ export default class PostActions {
       let txt = document.createElement("textarea");
       txt.innerHTML = document.getElementById("edit-post-text").innerHTML;
       let html = txt.value;
-      //html = html.replace(/<\/?span[^>]*>/g, ''); //removes highightjs styling
+      html = html.replace(/<\/?span[^>]*>/g, ''); //removes prism styling
       html = html.replace(/<\/?br[^>]*>/g, "\n"); //convert back to encoded line break for storage
       pageInfo.append(
         "id",
@@ -56,7 +56,10 @@ export default class PostActions {
         "published",
         document.getElementById("option-published").getAttribute("data-active")
       );
-      pageInfo.append("layout", document.getElementById('page-templates').value);
+      pageInfo.append(
+        "layout",
+        document.getElementById("page-templates").value
+      );
       pageInfo.append(
         "form_token",
         document.getElementById("form_token").value

src/com/controllers/PageEditor.js

@@ -4,7 +4,7 @@ import FipamoAdminAPI, {
   TASK_PAGE_EDIT,
   TASK_PAGE_DELETE
 } from "../../libraries/FipamoAdminAPI";
-import Maintenance from "MaintenanceManager";
+import Maintenance from "./MaintenanceManager";
 import * as DataEvent from "../events/DataEvent";
 import PageActions from "../actions/PageActions";
 import * as EditorEvent from "../events/EditorEvent";

src/com/controllers/SettingsIndex.js

@@ -1,5 +1,5 @@
 import SettingsActions from "../actions/SettingsActions";
-import Maintenance from "MaintenanceManager";
+import Maintenance from "./MaintenanceManager";
 import FipamoAdminAPI, {
   TASK_SYNC_SETTNIGS
 } from "../../libraries/FipamoAdminAPI";

src/com/ui/TextEditor.js

@@ -2,6 +2,7 @@ import * as DataEvent from "../events/DataEvent";
 import { position } from "caret-pos";
 import EventEmitter from "../events/EventEmitter";
 import * as EditorEvent from "../events/EditorEvent";
+import Prism from "prismjs";
 class TextEditor extends EventEmitter {
   /**
    * Text Editor UI Component
@@ -60,8 +61,13 @@ class TextEditor extends EventEmitter {
     });
   }
   refresh() {
-    //var spiffed = hljs.highlight('markdown', this.textEditor.innerText).value;
+    
-    var spiffed = this.textEditor.innerText;
+    var spiffed = Prism.highlight(
+      this.textEditor.innerText,
+      Prism.languages.md,
+      "md"
+    );
+    //var spiffed = this.textEditor.innerText;
     spiffed = spiffed.replace(new RegExp("\r?\n", "g"), "<br>");
     var temp = document.createElement("div");
     temp.innerText = spiffed;
@@ -133,13 +139,13 @@ class TextEditor extends EventEmitter {
           );
           break;
         case "edit-header1":
-          range.insertNode(document.createTextNode("# " + pulled));
+          range.insertNode(document.createTextNode("# " + pulled + "\n"));
           break;
         case "edit-header2":
-          range.insertNode(document.createTextNode("## " + pulled));
+          range.insertNode(document.createTextNode("## " + pulled + "\n"));
           break;
         case "edit-header3":
-          range.insertNode(document.createTextNode("### " + pulled));
+          range.insertNode(document.createTextNode("### " + pulled + "\n"));
           break;
         case "edit-image":
           this.caretPos = position(this.textEditor).pos;

src/package.json

@@ -1,30 +0,0 @@
-{
-  "name": "fipamo-dash",
-  "version": "1.2.4",
-  "description": "Front end script for the most chill blog framework ever.",
-  "scripts": {},
-  "author": "Are0h",
-  "license": "UNLICENSED",
-  "repository": "https://code.playvicio.us/Are0h/Fipamo",
-  "private": true,
-  "dependencies": {
-    "@babel/core": "^7.14.6",
-    "@babel/eslint-parser": "^7.14.5",
-    "animejs": "^3.2.1",
-    "apidoc": "^0.28.1",
-    "bulma": "^0.9.3",
-    "caret-pos": "^2.0.0",
-    "jsdoc": "^3.6.7",
-    "minami": "^1.2.3",
-    "sortablejs": "^1.13.0"
-  },
-  "devDependencies": {
-    "eslint": "^7.28.0",
-    "eslint-plugin-babel": "^5.3.1"
-  },
-  "apidoc": {
-    "name": "Fipamo API",
-    "version": "1.0.0",
-    "description": "The most chill API for the most chill blog framework"
-  }
-}

src/styles/dash.sass

@@ -1,8 +1,8 @@
 @use "sass:color"
-
+//CSS
 //Bulma
-@import '../node_modules/bulma/sass/utilities/_all'
+@import '../../node_modules/bulma/sass/utilities/_all'
-@import '../node_modules/bulma/sass/grid/columns'
+@import '../../node_modules/bulma/sass/grid/columns'
 
 //Colors
 @import 'main/_colors'

src/styles/main/_editor-highlight.sass

@@ -1,46 +1,85 @@
-
+code[class*="language-"],
-.hljs
+pre[class*="language-"] 
-    display: block
+    color: #f8f8f2 
-    overflow-x: auto
+    background: none 
-    padding: 0.5em
+    text-shadow: 0 1px rgba(0, 0, 0, 0.3) 
-    background: color.adjust($primary, $lightness: -6%)
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace 
-
+    font-size: 1em 
-.hljs, .hljs-subst
+    text-align: left 
-    color: #ebdbb2
+    white-space: pre 
-
+    word-spacing: normal 
-.hljs-deletion, .hljs-formula, .hljs-keyword .hljs-selector-tag
+    word-break: normal 
-    color: $editorPrimary
+    word-wrap: normal 
-    font-style: italic
+    line-height: 1.5 
-
+    -moz-tab-size: 4 
-.hljs-link
+    -o-tab-size: 4 
-    color: $highlight
+    tab-size: 4 
-
+    -webkit-hyphens: none 
-.hljs-built_in, .hljs-emphasis, .hljs-name, .hljs-quote, .hljs-strong, .hljs-title, .hljs-variable
+    -moz-hyphens: none 
+    -ms-hyphens: none 
+    hyphens: none 
+pre[class*="language-"] 
+    padding: 1em 
+    margin: .5em 0 
+    overflow: auto 
+    border-radius: 0.3em 
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] 
+    background: $primary 
+:not(pre) 
+    & > code[class*="language-"] 
+        padding: .1em 
+        border-radius: .3em 
+        white-space: normal 
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata 
+    color: #8292a2 
+.token 
+    &.punctuation 
         color: $editorSecondary
-
+    &.namespace 
-.hljs-attr, .hljs-params, .hljs-template-tag, .hljs-type
+        opacity: .7 
-    color: $editorTertiary
+    &.keyword 
-
+        color: #66d9ef 
-.hljs-builtin-name, .hljs-doctag, .hljs-literal, .hljs-number
+    &.italic 
-    color: #8f3f71
-
-.hljs-code, .hljs-meta, .hljs-regexp, .hljs-selector-id, .hljs-template-variable
-    color: $tertiary
-
-.hljs-addition, .hljs-meta-string, .hljs-section, .hljs-selector-attr, .hljs-selector-class, .hljs-string, .hljs-symbol
-    color: $editorString
-
-.hljs-attribute, .hljs-bullet, .hljs-class, .hljs-function, .hljs-function .hljs-keyword, .hljs-meta-keyword, .hljs-selector-pseudo, .hljs-tag
-    color: color.adjust($primary, $lightness: 50%)
-
-.hljs-comment
-    color: #928374
-
-.hljs-link_label, .hljs-literal, .hljs-number
-    color: #d3869b
-
-.hljs-comment, .hljs-emphasis
         font-style: italic 
-
+    &.entity 
-.hljs-section, .hljs-strong, .hljs-tag
+        cursor: help 
-    font-weight: normal
+    &.content
+        color: $editorTertiary
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted 
+    color: #f92672 
+.token.boolean,
+.token.number 
+    color: #ae81ff 
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted 
+    color: #a6e22e 
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable 
+    color: #f8f8f2 
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name 
+    color: #e6db74 
+.token.regex,
+.token.important 
+    color: #fd971f 
+.token.important,
+.token.bold 
+    font-weight: bold 

src/styles/main/_posts.sass

@@ -327,6 +327,7 @@
                         width: 100%
                         max-width: 900px
                         min-height: 200px
+                        caret-color: $highlight
 
 //Responsive
 @media only screen and (max-width: 800px)