From 13f1b24b9e5ea58397032d569e9904b0cdd0c7ea Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Fri, 3 Sep 2021 14:22:43 +0100
Subject: [PATCH] added markdown support
small changed to CSS for myNodes and OtherNodes vue files as well (removed scoped)
---
CHANGELOG.md | 6 ++++-
package.json | 2 +-
src/components/MyNodes.vue | 48 ++++++++++++++++++++++++++++++-----
src/components/OtherNodes.vue | 45 +++++++++++++++++++++++++++++---
4 files changed, 88 insertions(+), 13 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8443e0c..21da189 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/package.json b/package.json
index 3fc95cc..174cd44 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "nodenogg.in",
- "version": "0.2.2",
+ "version": "0.2.3",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
diff --git a/src/components/MyNodes.vue b/src/components/MyNodes.vue
index a6eaa45..938d728 100644
--- a/src/components/MyNodes.vue
+++ b/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>
diff --git a/src/components/OtherNodes.vue b/src/components/OtherNodes.vue
index 1e3b424..a145d96 100644
--- a/src/components/OtherNodes.vue
+++ b/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>
--
GitLab