diff --git a/CHANGELOG.md b/CHANGELOG.md index 8443e0c4fb34fdb346e08fd6e6e18c10f6139625..21da1893ee06292a84e05334d1868b83b50f5d2e 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 3fc95cc4bc66964c9c5855f6bdcec3752631a2e8..174cd440d8a552b2915eb6492c9818d3583cddf8 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 a6eaa450b2553e5648586adb234e75e6b2e7571a..938d728158e2a179b559073c16935051ee61f92e 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 1e3b424ad95453ee7beddc2ec995751992a4eba7..a145d96816eb47e3445c3faf6e05c10d2f8d7376 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>