feat(shortcode): add mapbox shortcode (#190)

* feat(shortcode): add mapbox shortcode

* docs: split shortcodes into built-in shortcodes and extended shortcodes

* docs(shortcodes): add docs for mapbox shortcode

* docs(shortcodes): fix an error in shortcodes docs

5 files changed, 63 insertions, 13 deletions

diff --git a/layouts/partials/assets.html b/layouts/partials/assets.html
index 70b2fae..27735b4 100644
--- a/layouts/partials/assets.html
+++ b/layouts/partials/assets.html
@@ -150,20 +150,17 @@
 {{- end -}}
 
 {{- /* mermaid */ -}}
-{{- with $scratch.Get "mermaidArr" -}}
+{{- if $scratch.Get "mermaid" -}}
     {{- with $CDN.mermaidJS -}}
         {{- slice . | $scratch.Add "scriptCDN" -}}
     {{- else -}}
         {{- slice "lib/mermaid/mermaid.min.js" | $scratch.Add "scriptLocal" -}}
     {{- end -}}
     {{- slice "lib/mermaid/mermaid.scss" | $scratch.Add "linkLocal" -}}
-    <script>
-        window.mermaidArr = {{ jsonify . | safeJS }};
-    </script>
 {{- end -}}
 
 {{- /* ECharts */ -}}
-{{- with $scratch.Get "echartsArr" -}}
+{{- if $scratch.Get "echarts" -}}
     {{- with $CDN.echartsJS -}}
         {{- slice . | $scratch.Add "scriptCDN" -}}
     {{- else -}}
@@ -174,8 +171,26 @@
     {{- else -}}
         {{- slice "lib/echarts/macarons.js" | $scratch.Add "scriptLocal" -}}
     {{- end -}}
+{{- end -}}
+
+{{- /* Mapbox GL */ -}}
+{{- if $scratch.Get "mapbox" -}}
+    {{- with $CDN.mapboxGLCSS -}}
+        {{- slice . | $scratch.Add "linkCDN" -}}
+    {{- else -}}
+        {{- slice "lib/mapbox-gl/mapbox-gl.min.css" | $scratch.Add "linkLocal" -}}
+    {{- end -}}
+    {{- with $CDN.mapboxGLJS -}}
+        {{- slice . | $scratch.Add "scriptCDN" -}}
+    {{- else -}}
+        {{- slice "lib/mapbox-gl/mapbox-gl.min.js" | $scratch.Add "scriptLocal" -}}
+    {{- end -}}
+    {{- slice "lib/mapbox-gl/mapbox-gl-language.js" | $scratch.Add "scriptLocal" -}}
     <script>
-        window.echartsArr = {{ jsonify . | safeJS }};
+        document.addEventListener('DOMContentLoaded', function () {
+            mapboxgl.accessToken = '{{ .Params.mapbox.accessToken | default .Site.Params.mapbox.accessToken }}';
+            mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.0/mapbox-gl-rtl-text.js');
+        });
     </script>
 {{- end -}}
 
diff --git a/layouts/shortcodes/echarts.html b/layouts/shortcodes/echarts.html
index 9d609f0..4f24b26 100644
--- a/layouts/shortcodes/echarts.html
+++ b/layouts/shortcodes/echarts.html
@@ -3,4 +3,4 @@
 {{- $content := .Inner | transform.Unmarshal | jsonify -}}
 {{- $id := partial "function/id.html" (dict "content" $content "scratch" $scratch) -}}
 <div class="echarts" id="{{ $id }}"></div>
-{{- slice $id | $scratch.Add "echartsArr" -}}
+{{- $scratch.Set "echarts" true -}}
diff --git a/layouts/shortcodes/mapbox.html b/layouts/shortcodes/mapbox.html
new file mode 100644
index 0000000..fbe515c
--- /dev/null
+++ b/layouts/shortcodes/mapbox.html
@@ -0,0 +1,33 @@
+{{- $scratch := .Page.Scratch.Get "scratch" -}}
+
+{{- $lng := cond .IsNamedParams (.Get "lng") (.Get 0) -}}
+{{- $lat := cond .IsNamedParams (.Get "lat") (.Get 1) -}}
+{{- $zoom := cond .IsNamedParams (.Get "zoom") (.Get 2) | default 10 -}}
+{{- $marked := cond .IsNamedParams (.Get "marked") (.Get 3) | ne false -}}
+{{- $lightStyle := .Page.Params.mapbox.lightStyle | default .Page.Site.Params.mapbox.lightStyle -}}
+{{- $darkStyle := .Page.Params.mapbox.darkStyle | default .Page.Site.Params.mapbox.darkStyle -}}
+{{- $navigation := ne .Page.Params.mapbox.navigation false | and (ne .Page.Site.Params.mapbox.navigation false) -}}
+{{- $geolocate := ne .Page.Params.mapbox.geolocate false | and (ne .Page.Site.Params.mapbox.geolocate false) -}}
+{{- $scale := ne .Page.Params.mapbox.scale false | and (ne .Page.Site.Params.mapbox.scale false) -}}
+{{- $fullscreen := ne .Page.Params.mapbox.fullscreen false | and (ne .Page.Site.Params.mapbox.fullscreen false) -}}
+{{- $width := "100%" -}}
+{{- $height := "20rem" -}}
+
+{{- if .IsNamedParams -}}
+    {{- $lightStyle = .Get "light-style" | default $lightStyle -}}
+    {{- $darkStyle = .Get "dark-style" | default $darkStyle -}}
+    {{- $navigation = .Get "navigation" | ne false | and $navigation -}}
+    {{- $geolocate = .Get "geolocate" | ne false | and $geolocate -}}
+    {{- $scale = .Get "scale" | ne false | and $scale -}}
+    {{- $fullscreen = .Get "fullscreen" | ne false | and $fullscreen -}}
+    {{- $width = .Get "width" | default $width -}}
+    {{- $height = .Get "height" | default $height -}}
+{{- else -}}
+    {{- $lightStyle = .Get 4 | default $lightStyle -}}
+    {{- $darkStyle = .Get 5 | default $darkStyle -}}
+{{- end -}}
+{{- $darkStyle = $darkStyle | default $lightStyle -}}
+{{- $options := dict "lng" $lng "lat" $lat "zoom" $zoom "marked" $marked "light-style" $lightStyle "dark-style" $darkStyle "geolocate" $geolocate "navigation" $navigation "scale" $scale "fullscreen" $fullscreen -}}
+{{- $id := partial "function/id.html" (dict "content" $options "scratch" $scratch) -}}
+<div class="mapbox" id="{{ $id }}" style="width: {{ $width }}; height: {{ $height }};"></div>
+{{- $scratch.Set "mapbox" true -}}
diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
index dd11ce8..872fae8 100644
--- a/layouts/shortcodes/mermaid.html
+++ b/layouts/shortcodes/mermaid.html
@@ -2,4 +2,4 @@
 
 {{- $id := partial "function/id.html" (dict "content" (trim .Inner "\n") "scratch" $scratch) -}}
 <div class="mermaid" id="{{ $id }}"></div>
-{{- slice $id | $scratch.Add "mermaidArr" -}}
+{{- $scratch.Set "mermaid" true -}}
diff --git a/layouts/shortcodes/music.html b/layouts/shortcodes/music.html
index ca8a51f..82228fc 100644
--- a/layouts/shortcodes/music.html
+++ b/layouts/shortcodes/music.html
@@ -1,8 +1,10 @@
 {{- $scratch := .Page.Scratch.Get "scratch" -}}
 
+{{- $theme := "#448aff" -}}
 {{- if .IsNamedParams -}}
+    {{- $theme = .Get "theme" | default $theme -}}
     {{- if .Get "url" -}}
-        <meting-js url="{{ .Get `url` }}" name="{{ .Get `name` }}" artist="{{ .Get `artist` }}" cover="{{ .Get `cover` }}" theme="{{ .Get `theme` | default `#a9a9b3` }}"
+        <meting-js url="{{ .Get `url` }}" name="{{ .Get `name` }}" artist="{{ .Get `artist` }}" cover="{{ .Get `cover` }}" theme="{{ $theme }}"
         {{- with .Get "fixed" }} fixed="{{ . }}"{{ end -}}
         {{- with .Get "mini" }} mini="{{ . }}"{{ end -}}
         {{- with .Get "autoplay" }} autoplay="{{ . }}"{{ end -}}
@@ -10,7 +12,7 @@
         {{- with .Get "mutex" }} mutex="{{ . }}"{{ end -}}
         ></meting-js>
     {{- else if .Get "auto" -}}
-        <meting-js auto="{{ .Get `auto` }}" theme="{{ .Get `theme` | default `#a9a9b3` }}"
+        <meting-js auto="{{ .Get `auto` }}" theme="{{ $theme }}"
         {{- with .Get "fixed" }} fixed="{{ . }}"{{ end -}}
         {{- with .Get "mini" }} mini="{{ . }}"{{ end -}}
         {{- with .Get "autoplay" }} autoplay="{{ . }}"{{ end -}}
@@ -22,7 +24,7 @@
         {{- with .Get "list-max-height" }} list-max-height="{{ . }}"{{ end -}}
         ></meting-js>
     {{- else -}}
-        <meting-js server="{{ .Get `server` }}" type="{{ .Get `type` }}" id="{{ .Get `id` }}" theme="{{ .Get `theme` | default `#a9a9b3` }}"
+        <meting-js server="{{ .Get `server` }}" type="{{ .Get `type` }}" id="{{ .Get `id` }}" theme="{{ $theme }}"
         {{- with .Get "fixed" }} fixed="{{ . }}"{{ end -}}
         {{- with .Get "mini" }} mini="{{ . }}"{{ end -}}
         {{- with .Get "autoplay" }} autoplay="{{ . }}"{{ end -}}
@@ -35,8 +37,8 @@
         ></meting-js>
     {{- end -}}
 {{- else if strings.HasSuffix (.Get 0) "http" -}}
-    <meting-js auto="{{ .Get 0 }}" theme="#a9a9b3"></meting-js>
+    <meting-js auto="{{ .Get 0 }}" theme="{{ $theme }}"></meting-js>
 {{- else -}}
-    <meting-js server="{{ .Get 0 }}" type="{{ .Get 1 }}" id="{{ .Get 2 }}" theme="#a9a9b3"></meting-js>
+    <meting-js server="{{ .Get 0 }}" type="{{ .Get 1 }}" id="{{ .Get 2 }}" theme="{{ $theme }}"></meting-js>
 {{- end -}}
 {{- $scratch.Set "music" true -}}