feat(shortcode): add mapbox shortcode (dillonzq#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

README.md

@@ -34,9 +34,11 @@ Compared to the original LeaveIt theme and the KeepIt theme, the LoveIt theme ha
 * More **social links**, **share sites** and **comment system**
 * Extended markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
 * Extended markdown syntax for **ruby annotation**
+* Extended markdown syntax for **fraction**
 * **Mathematical formula** supported by [KaTeX](https://katex.org/)
 * **Diagram syntax** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
 * **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
+* **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
 * Embedded **music player** supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
 * **Bilibili** player supported
 * Kinds of **admonitions** shortcode supported
@@ -91,9 +93,11 @@ I hope you will LoveIt ❤️!
 * **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
 * Extended markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
 * Extended markdown syntax for **ruby annotation**
+* Extended markdown syntax for **fraction**
 * **Mathematical formula** supported by [KaTeX](https://katex.org/)
 * **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
 * **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
+* **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
 * **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
 * **Bilibili player** shortcode
 * Kinds of **admonitions** shortcode
@@ -131,6 +135,7 @@ Thanks to the authors of following resources included in the theme:
 * [KaTeX](https://katex.org/)
 * [mermaid](https://github.com/knsv/mermaid)
 * [ECharts](https://echarts.apache.org/)
+* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
 * [APlayer](https://github.com/MoePlayer/APlayer)
 * [MetingJS](https://github.com/metowolf/MetingJS)
 * [Gitalk](https://github.com/gitalk/gitalk)

README.zh-cn.md

@@ -27,15 +27,17 @@
 * 自定义**CSS 样式**
 * 焕然一新的**主页**，已经兼容最新版 Hugo
 * 大量的**样式细节调整**，包括颜色、字体大小、边距、代码预览样式
-* 可读性更强的**暗黑模式**
+* 可读性更强的**深色模式**
 * 一些美观的 **CSS 动画**
 * 易用和自动展开的**文章目录**
 * 支持更多的**社交链接**、**网站分享**和**评论系统**
 * 支持基于 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
 * 支持**上标注释**的扩展 Markdown 语法
+* 支持**分数**的扩展 Markdown 语法
 * 支持基于 [KaTeX](https://katex.org/) 的**数学公式**
 * 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表**生成功能
 * 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化**生成功能
+* 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** 地图显示功能
 * 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的内嵌**音乐播放器**
 * 支持内嵌 **Bilibili** 视频
 * 支持多种**注释**的 shortcode
@@ -61,7 +63,7 @@
 ### 外观和布局
 
 * **响应式**布局
-* **夜晚/白天** 主题模式
+* **浅色/深色** 主题模式
 * 全局一致的**设计语言**
 * 支持**分页**
 * 易用和自动展开的**文章目录**
@@ -86,9 +88,11 @@
 * 支持基于 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 的**图片画廊**
 * 支持 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
 * 支持**上标注释**的扩展 Markdown 语法
+* 支持**分数**的扩展 Markdown 语法
 * 支持基于 [KaTeX](https://katex.org/) 的**数学公式**
 * 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** shortcode
 * 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** shortcode
+* 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** shortcode
 * 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的**音乐播放器** shortcode
 * 支持 **Bilibili 视频** shortcode
 * 支持多种**注释**的 shortcode
@@ -126,6 +130,7 @@ LoveIt 主题中用到了以下项目，感谢它们的作者：
 * [KaTeX](https://katex.org/)
 * [mermaid](https://github.com/knsv/mermaid)
 * [ECharts](https://echarts.apache.org/)
+* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
 * [APlayer](https://github.com/MoePlayer/APlayer)
 * [MetingJS](https://github.com/metowolf/MetingJS)
 * [Gitalk](https://github.com/gitalk/gitalk)

archetypes/default.md

@@ -19,6 +19,14 @@ featuredImagePreview: ""
 toc: false
 autoCollapseToc: true
 math: false
+mapbox:
+    accessToken: ""
+    lightStyle: ""
+    darkStyle: ""
+    navigation: true
+    geolocate: true
+    scale: true
+    fullscreen: true
 lightgallery: true
 linkToMarkdown: true
 share:

assets/css/_core/_base.scss

@@ -30,6 +30,7 @@ html {
 }
 
 body {
+  -webkit-font-smoothing: subpixel-antialiased;
   background-color: $global-background-color;
   color: $global-font-color;
   overflow-wrap: break-word;

assets/css/_page/_single.scss

@@ -34,7 +34,7 @@
   }
 
   .featured-image {
-    padding-top: .6rem;
+    margin: .5rem 0;
 
     img {
       display: block;
@@ -91,8 +91,14 @@
       .dark-theme & {
         font-weight: bolder;
       }
+    }
 
-      & > .header-mark::before {
+    > h2,
+    > h3,
+    > h4,
+    > h5,
+    > h6 {
+      > .header-mark::before {
         content: "|";
         margin-right: .3125rem;
         color: $single-link-color;
@@ -103,12 +109,11 @@
       }
     }
 
-    h2 > .header-mark::before {
+    > h2 > .header-mark::before {
       content: "#";
     }
 
     p {
-      font-size: 1rem;
       margin: .5rem 0;
     }
 
@@ -136,6 +141,7 @@
     }
 
     ul {
+      margin: .5rem 0;
       padding-left: 2rem;
       list-style-type: disc;
     }
@@ -278,12 +284,18 @@
       .dark-theme & {
         color: $global-font-secondary-color-dark;
       }
+
+      p {
+        margin: .25rem 0;
+      }
     }
 
     @import "../_partial/_single/code";
     @import "../_partial/_single/instagram";
     @import "../_partial/_single/admonition";
     @import "../_partial/_single/echarts";
+    @import "../_partial/_single/mapbox";
+    @import "../_partial/_single/music";
     @import "../_partial/_single/bilibili";
 
     hr {

assets/css/_partial/_single/_code.scss

@@ -18,7 +18,7 @@ code, pre, .highlight table, .highlight tr, .highlight td {
 }
 
 .highlight > .chroma {
-  margin: 1rem 0;
+  margin: .5rem 0;
 
   code, pre {
     margin: 0;

assets/css/_partial/_single/_echarts.scss

@@ -1,6 +1,6 @@
 .echarts {
   width: 100%;
   height: 30rem;
-  margin: 3% auto;
+  margin: .5rem 0;
   text-align: center;
 }

assets/css/_partial/_single/_mapbox.scss

@@ -0,0 +1,4 @@
+.mapbox {
+  margin: .5rem 0;
+  padding: .5rem 0;
+}

assets/css/_partial/_single/_music.scss

@@ -0,0 +1,3 @@
+meting-js {
+  margin: .5rem 0;
+}

assets/css/_partial/_single/_toc.scss

@@ -75,7 +75,7 @@
 
 #toc-static {
   display: none;
-  padding-top: .8rem;
+  margin: .8rem 0;
 
   details {
     summary {

assets/lib/VERSION

@@ -11,6 +11,7 @@ [email protected] https://github.com/knsv/mermaid
 [email protected] https://github.com/MoePlayer/APlayer
 [email protected] https://github.com/metowolf/MetingJS
 [email protected] https://echarts.apache.org/
+[email protected] https://github.com/mapbox/mapbox-gl-js
 [email protected] https://github.com/gitalk/gitalk
 [email protected] https://valine.js.org/
 iconfont https://www.iconfont.cn/