add markmap support

README.md

@@ -16,6 +16,7 @@ This blog template base on [base-blog](https://github.com/lumeland/base-blog/),
 - **For musicians.** Built-in [OSMD](https://opensheetmusicdisplay.org/) support. Inserting MusicXML score in markdown is as easy as inserting image. Express your feelings about music freely.
 - **MIDI Player.** Built-in [midi player](https://github.com/cifkao/html-midi-player) and visualizer.
 - **LaTeX.** Built-in KaTex plugin.
+- **Mindmap** Built-in markmap support.
 - **Disqus** comment system.
 - **CloudFlare** web Analytics.
 - **Forestry.io** headless cms. 

_config.js

@@ -6,6 +6,8 @@ import base_path from "lume/plugins/base_path.ts";
 import { parse } from "https://deno.land/std/encoding/yaml.ts";
 import anchor from "https://jspm.dev/markdown-it-anchor";
 import katex from "https://jspm.dev/@iktakahiro/markdown-it-katex"
+import resolveUrls from "lume/plugins/resolve_urls.ts";
+import markmap from "https://deno.land/x/[email protected]/index.js"
 
 const text = await Deno.readTextFile("./src/_data/site.yml")
 const data = parse(text)
@@ -17,8 +19,10 @@ const site = lume({
  markdown: {
  plugins: [
  [anchor, { permalink: anchor.permalink.headerLink() }],
- [katex, {}],
+ [katex],
+ [markmap]
  ],
+ keepDefaultPlugins: true,
  }
 });
 
@@ -39,6 +43,7 @@ site.use(postcss());
 site.use(date());
 site.use(code_highlight());
 site.use(base_path());
+site.use(resolveUrls());
 
 site.filter(
  "head",

src/_data/site.yml

@@ -55,5 +55,5 @@ cloudflareWebAnalytics:
 # Lume version this template should work.
 # Check lume-blog-muse github repository to get template for newer lume.
 version:
- lume: 1.1.0
+ lume: 1.1.1
  bulma: 0.9.3

src/_includes/layouts/base.njk

@@ -6,7 +6,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title or site.title }}</title>
  <meta name="description" content="{{ description or site.description }}">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css" integrity="sha384-zTROYFVGOfTw7JV7KUu8udsvW2fx4lWOsCEDqhBreBwlHI4ioVRtmIvEThzJHGET" crossorigin="anonymous">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css">
  {% if site.autoDarkMode %}
  <link rel="stylesheet" href="/css/themeSwitch.css">
  {% elif site.darkMode %}

src/_includes/layouts/post.njk

@@ -71,3 +71,11 @@ layout: layouts/base.njk
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/styles/github-dark.min.css">
 <script type="text/javascript" src="{{ '/script/osmdContainer.js' }}"></script>
 <script type="text/javascript" src="{{ '/script/midiContainer.js' }}"></script>
+<script src="https://cdn.jsdelivr.net/npm/d3"></script>
+<script type="module">
+ import { Markmap, } from 'https://jspm.dev/markmap-view';
+ const mindmaps = document.querySelectorAll('.markmap-svg');
+ for(const mindmap of mindmaps) {
+ Markmap.create(mindmap,null,JSON.parse(mindmap.getAttribute('data-json')));
+ }
+</script>

src/posts/MarkdownExample.md

@@ -122,9 +122,9 @@ Right aligned columns
 
 ## Links
 
-[link text](http:https://dev.nodeca.com)
+[link text](https:https://github.com/NeroBlackstone/lume-blog-muse)
 
-[link with title](http:https://nodeca.github.io/pica/demo/ "title text!")
+[link with title](https:https://github.com/NeroBlackstone/lume-blog-muse "title text!")
 
 
 ## Images
@@ -144,6 +144,10 @@ Like links, Images also have a footnote style syntax
 
 With a reference later in the document defining the URL location:
 
+```
+[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
+```
+
 [id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
 
 Insert MusicXML :
@@ -171,4 +175,22 @@ $$\begin{array}{c}
 
 \nabla \cdot \vec{\mathbf{B}} & = 0
 
-\end{array}$$
+\end{array}$$
+
+## mindmap
+
+```mindmap
+# markmap
+## Links
+- <https://markmap.js.org/>
+- [GitHub](https://github.com/gera2ld/markmap)
+## Related
+- [coc-markmap](https://github.com/gera2ld/coc-markmap)
+- [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap)
+## Features
+- links
+- **inline** ~~text~~ *styles*
+- multiline
+ text
+- `inline code`
+```

src/script/midiContainer.js

@@ -17,7 +17,6 @@ class MidiContainer extends HTMLElement {
  const player=document.getElementById(`#${playerId}`)
  const visualizerType=this.getAttribute('type')
  if (visualizerType){
- console.log("Here")
  const visualizer=document.createElement('midi-visualizer')
  visualizer.setAttribute('type',visualizerType)
  visualizer.setAttribute('id',playerId)