added markdown support

small changed to CSS for myNodes and OtherNodes vue files as well (removed scoped)

CHANGELOG.md

@@ -2,9 +2,13 @@
 
 _3rd September 2021_
 
+## Added
+
+- markdown support added for all nodes
+
 ## Fixed
 
-- nodes are now correctly colored in the Cards view
+- nodes are now correctly colored in the Cards view as well as Collect view
 
 # 0.2.2
 

package.json

 {
   "name": "nodenogg.in",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/components/MyNodes.vue

@@ -45,9 +45,11 @@
         <button @click.prevent="discardNode(nodes.node_id)">Discard</button>
       </template>
       <template v-else>
-        <p class="readmode" :id="nodes.node_id">
-          {{ nodes.node_text }}
-        </p>
+        <p
+          class="readmode"
+          :id="nodes.node_id"
+          v-html="marked(nodes.node_text)"
+        ></p>
         <button @click.prevent="toggleMode(nodes.node_id)">Edit</button>
       </template>
     </form>
@@ -87,9 +89,6 @@ export default {
     ...mapState({
       myNodes: (state) => state.myNodes,
     }),
-    markdowntoHTML() {
-      return marked(this.markdown)
-    },
   },
 
   watch: {
@@ -111,6 +110,7 @@ export default {
   },
 
   methods: {
+    marked,
     loadData() {
       var nodesFiltered = this.myNodes.myNodes.filter(
         (nodes) => nodes.node_deleted == false
@@ -155,7 +155,37 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
+h1 {
+  margin: 0em;
+  padding: 0em;
+  font-size: 4.2em;
+  font-family: houschka-rounded, sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  color: black;
+}
+
+h2 {
+  margin: 0em;
+  padding: 0em;
+  font-size: 3.2em;
+  font-family: houschka-rounded, sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  color: black;
+}
+
+h3 {
+  margin: 0em;
+  padding: 0em;
+  font-size: 2.2em;
+  font-family: houschka-rounded, sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  color: black;
+}
+
 .nodes {
   width: 95%;
   border: 2px dashed black;
@@ -172,4 +202,8 @@ textarea {
   width: 100%;
   box-sizing: border-box;
 }
+
+img {
+  width: 45%;
+}
 </style>

src/components/OtherNodes.vue

@@ -7,15 +7,18 @@
       backgroundColor: nodes.node_color,
     }"
   >
-    <p class="readmode" :id="nodes.node_id">
-      {{ nodes.node_text }}
-    </p>
+    <p
+      class="readmode"
+      :id="nodes.node_id"
+      v-html="marked(nodes.node_text)"
+    ></p>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
 import { mapState } from 'vuex'
+import marked from 'marked'
 
 export default {
   name: 'OtherNodes',
@@ -36,15 +39,49 @@ export default {
     loadData() {
       this.$store.dispatch('setOthernodes')
     },
+    marked,
   },
 }
 </script>
 
-<style scoped>
+<style>
+h1 {
+  margin: 0em;
+  padding: 0em;
+  font-size: 4.2em;
+  font-family: houschka-rounded, sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  color: black;
+}
+
+h2 {
+  margin: 0em;
+  padding: 0em;
+  font-size: 3.2em;
+  font-family: houschka-rounded, sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  color: black;
+}
+
+h3 {
+  margin: 0em;
+  padding: 0em;
+  font-size: 2.2em;
+  font-family: houschka-rounded, sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  color: black;
+}
+
 .nodes {
   width: 95%;
   background-color: rgb(155, 194, 216);
   margin-top: 1em;
   margin-left: 0.5em;
 }
+img {
+  width: 45%;
+}
 </style>