chore(lib): update mapbox-gl 1.10.1 -> 2.8.2

assets/data/cdn/jsdelivr.yml

@@ -47,9 +47,9 @@ libFiles:
   mermaidJS: mermaid@9.0.1/dist/mermaid.min.js
   # echarts@5.3.2 https://echarts.apache.org/
   echartsJS: echarts@5.3.2/dist/echarts.min.js
-  # mapbox-gl@1.10.1 https://docs.mapbox.com/mapbox-gl-js
-  mapboxGLCSS: mapbox-gl@1.10.1/dist/mapbox-gl.min.css
-  mapboxGLJS: mapbox-gl@1.10.1/dist/mapbox-gl.min.js
+  # mapbox-gl@2.8.2 https://docs.mapbox.com/mapbox-gl-js
+  mapboxGLCSS: mapbox-gl@2.8.2/dist/mapbox-gl.min.css
+  mapboxGLJS: mapbox-gl@2.8.2/dist/mapbox-gl.min.js
   # aplayer@1.10.1 https://github.com/MoePlayer/APlayer
   aplayerCSS: aplayer@1.10.1/dist/APlayer.min.css
   aplayerJS: aplayer@1.10.1/dist/APlayer.min.js

assets/lib/VERSION

@@ -19,7 +19,7 @@ typeit@7.0.4 https://github.com/alexmacarthur/typeit
 katex@0.15.3 https://katex.org/
 mermaid@9.0.1 https://github.com/mermaid-js/mermaid
 echarts@5.3.2 https://echarts.apache.org/
-mapbox-gl@1.10.1 https://github.com/mapbox/mapbox-gl-js
+mapbox-gl@2.8.2 https://github.com/mapbox/mapbox-gl-js
 aplayer@1.10.1 https://github.com/MoePlayer/APlayer
 meting@2.0.1 https://github.com/metowolf/MetingJS
 gitalk@1.7.2 https://github.com/gitalk/gitalk

assets/lib/mapbox-gl/mapbox-gl-language.js

@@ -1,11 +1,26 @@
 /**
  * Create a new [Mapbox GL JS plugin](https://www.mapbox.com/blog/build-mapbox-gl-js-plugins/) that
- * modifies the layers of the map style to use the 'text-field' that matches the browser language.
+ * modifies the layers of the map style to use the `text-field` that matches the browser language.
+ * As of Mapbox GL Language v1.0.0, this plugin no longer supports token values (e.g. `{name}`). v1.0+ expects the `text-field`
+ * property of a style to use an [expression](https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/) of the form `['get', 'name_en']` or `['get', 'name']`; these expressions can be nested. Note that `get` expressions used as inputs to other expressions may not be handled by this plugin. For example:
+ * ```
+ * ["match",
+ *   ["get", "name"],
+ *   "California",
+ *   "Golden State",
+ *   ["coalesce",
+ *     ["get", "name_en"],
+ *     ["get", "name"]
+ *   ]
+ * ]
+ * ```
+ * Only styles based on [Mapbox v8 styles](https://docs.mapbox.com/help/troubleshooting/streets-v8-migration-guide/) are supported.
+ *
  * @constructor
  * @param {object} options - Options to configure the plugin.
  * @param {string[]} [options.supportedLanguages] - List of supported languages
  * @param {Function} [options.languageTransform] - Custom style transformation to apply
- * @param {RegExp} [options.languageField=/^\{name/] - RegExp to match if a text-field is a language field
+ * @param {RegExp} [options.languageField=/^name_/] - RegExp to match if a text-field is a language field
  * @param {Function} [options.getLanguageField] - Given a language choose the field in the vector tiles
  * @param {string} [options.languageSource] - Name of the source that contains the different languages.
  * @param {string} [options.defaultLanguage] - Name of the default language to initialize style after loading.
@@ -21,121 +36,53 @@ function MapboxLanguage(options) {
   this._initialStyleUpdate = this._initialStyleUpdate.bind(this);
 
   this._defaultLanguage = options.defaultLanguage;
-  this._isLanguageField = options.languageField || /^\{name/;
+  this._isLanguageField = options.languageField || /^name_/;
   this._getLanguageField = options.getLanguageField || function nameField(language) {
-    return language === 'mul' ? '{name}' : '{name_' + language + '}';
+    return language === 'mul' ? 'name' : `name_${language}`;
   };
   this._languageSource = options.languageSource || null;
-  this._languageTransform = options.languageTransform || function (style, language) {
-    if (language === 'ar') {
-      return noSpacing(style);
-    } else {
-      return standardSpacing(style);
-    }
-  };
+  this._languageTransform = options.languageTransform;
   this._excludedLayerIds = options.excludedLayerIds || [];
-  this.supportedLanguages = options.supportedLanguages || ['ar', 'en', 'es', 'fr', 'de', 'ja', 'ko', 'mul', 'pt', 'ru', 'zh'];
+  this.supportedLanguages = options.supportedLanguages || ['ar', 'de', 'en', 'es', 'fr', 'it', 'ja', 'ko', 'mul', 'pt', 'ru', 'vi', 'zh-Hans', 'zh-Hant'];
 }
 
-function standardSpacing(style) {
-  var changedLayers = style.layers.map(function (layer) {
-    if (!(layer.layout || {})['text-field']) return layer;
-    var spacing = 0;
-    if (layer['source-layer'] === 'state_label') {
-      spacing = 0.15;
-    }
-    if (layer['source-layer'] === 'marine_label') {
-      if (/-lg/.test(layer.id)) {
-        spacing = 0.25;
-      }
-      if (/-md/.test(layer.id)) {
-        spacing = 0.15;
-      }
-      if (/-sm/.test(layer.id)) {
-        spacing = 0.1;
-      }
-    }
-    if (layer['source-layer'] === 'place_label') {
-      if (/-suburb/.test(layer.id)) {
-        spacing = 0.15;
-      }
-      if (/-neighbour/.test(layer.id)) {
-        spacing = 0.1;
-      }
-      if (/-islet/.test(layer.id)) {
-        spacing = 0.01;
-      }
-    }
-    if (layer['source-layer'] === 'airport_label') {
-      spacing = 0.01;
-    }
-    if (layer['source-layer'] === 'rail_station_label') {
-      spacing = 0.01;
-    }
-    if (layer['source-layer'] === 'poi_label') {
-      if (/-scalerank/.test(layer.id)) {
-        spacing = 0.01;
-      }
-    }
-    if (layer['source-layer'] === 'road_label') {
-      if (/-label-/.test(layer.id)) {
-        spacing = 0.01;
-      }
-      if (/-shields/.test(layer.id)) {
-        spacing = 0.05;
-      }
-    }
-    return Object.assign({}, layer, {
-      layout: Object.assign({}, layer.layout, {
-        'text-letter-spacing': spacing
-      })
-    });
-  });
-
-  return Object.assign({}, style, {
-    layers: changedLayers
-  });
+const isTokenField = /^\{name/;
+function isFlatExpressionField(isLangField, property) {
+  const isGetExpression = Array.isArray(property) && property[0] === 'get';
+  if (isGetExpression && isTokenField.test(property[1])) {
+    console.warn('This plugin no longer supports the use of token syntax (e.g. {name}). Please use a get expression. See https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/ for more details.');
   }
 
-function noSpacing(style) {
-  var changedLayers = style.layers.map(function (layer) {
-    if (!(layer.layout || {})['text-field']) return layer;
-    var spacing = 0;
-    return Object.assign({}, layer, {
-      layout: Object.assign({}, layer.layout, {
-        'text-letter-spacing': spacing
-      })
-    });
-  });
-
-  return Object.assign({}, style, {
-    layers: changedLayers
-  });
+  return isGetExpression && isLangField.test(property[1]);
 }
 
-function isNameStringField(isLangField, property) {
-  return typeof property === 'string' && isLangField.test(property);
+function adaptNestedExpressionField(isLangField, property, languageFieldName) {
+  if (Array.isArray(property)) {
+    for (let i = 1; i < property.length; i++) {
+      if (Array.isArray(property[i])) {
+        if (isFlatExpressionField(isLangField, property[i])) {
+          property[i][1] = languageFieldName;
+        }
+        adaptNestedExpressionField(isLangField, property[i], languageFieldName);
+      }
+    }
   }
-
-function isNameFunctionField(isLangField, property) {
-  return property.stops && property.stops.filter(function (stop) {
-    return isLangField.test(stop[1]);
-  }).length > 0;
 }
 
 function adaptPropertyLanguage(isLangField, property, languageFieldName) {
-  if (isNameStringField(isLangField, property)) return languageFieldName;
-  if (isNameFunctionField(isLangField, property)) {
-    var newStops = property.stops.map(function (stop) {
-      if (isLangField.test(stop[1])) {
-        return [stop[0], languageFieldName];
+  if (isFlatExpressionField(isLangField, property)) {
+    property[1] = languageFieldName;
   }
-      return stop;
-    });
-    return Object.assign({}, property, {
-      stops: newStops
-    });
+
+  adaptNestedExpressionField(isLangField, property, languageFieldName);
+
+  // handle special case of bare ['get', 'name'] expression by wrapping it in a coalesce statement
+  if (property[0] === 'get' && property[1] === 'name') {
+    const defaultProp = property.slice();
+    const adaptedProp = ['get', languageFieldName];
+    property = ['coalesce', adaptedProp, defaultProp];
   }
+
   return property;
 }
 
@@ -151,10 +98,13 @@ function changeLayerTextProperty(isLangField, layer, languageFieldName, excluded
 }
 
 function findStreetsSource(style) {
-  var sources = Object.keys(style.sources).filter(function (sourceName) {
-    var source = style.sources[sourceName];
-    return /mapbox-streets-v\d/.test(source.url);
+  const sources = Object.keys(style.sources).filter((sourceName) => {
+    const url = style.sources[sourceName].url;
+    // the source URL can reference the source version or the style version
+    // this check and the error forces users to migrate to styles using source version 8
+    return url && url.indexOf('mapbox.mapbox-streets-v8') > -1 || /mapbox-streets-v[1-9][1-9]/.test(url);
   });
+  if (!sources.length) throw new Error('If using MapboxLanguage with a Mapbox style, the style must be based on vector tile version 8, e.g. "streets-v11"');
   return sources[0];
 }
 
@@ -165,38 +115,36 @@ function findStreetsSource(style) {
  * @returns {object} the modified style
  */
 MapboxLanguage.prototype.setLanguage = function (style, language) {
-  if (this.supportedLanguages.indexOf(language) < 0) throw new Error('Language ' + language + ' is not supported');
-  var streetsSource = this._languageSource || findStreetsSource(style);
+  if (this.supportedLanguages.indexOf(language) < 0) throw new Error(`Language ${  language  } is not supported`);
+  const streetsSource = this._languageSource || findStreetsSource(style);
   if (!streetsSource) return style;
 
-  var field = this._getLanguageField(language);
-  var isLangField = this._isLanguageField;
-  var excludedLayerIds = this._excludedLayerIds;
-  var changedLayers = style.layers.map(function (layer) {
+  const field = this._getLanguageField(language);
+  const isLangField = this._isLanguageField;
+  const excludedLayerIds = this._excludedLayerIds;
+  const changedLayers = style.layers.map((layer) => {
     if (layer.source === streetsSource) return changeLayerTextProperty(isLangField, layer, field, excludedLayerIds);
     return layer;
   });
 
-  var languageStyle = Object.assign({}, style, {
+  const languageStyle = Object.assign({}, style, {
     layers: changedLayers
   });
 
-  return this._languageTransform(languageStyle, language);
+  return this._languageTransform ? this._languageTransform(languageStyle, language) : languageStyle;
 };
 
 MapboxLanguage.prototype._initialStyleUpdate = function () {
-  var style = this._map.getStyle();
-  var language = this._defaultLanguage || browserLanguage(this.supportedLanguages);
+  const style = this._map.getStyle();
+  const language = this._defaultLanguage || browserLanguage(this.supportedLanguages);
 
-  // We only update the style once
-  this._map.off('styledata', this._initialStyleUpdate);
   this._map.setStyle(this.setLanguage(style, language));
 };
 
 function browserLanguage(supportedLanguages) {
-  var language = navigator.languages ? navigator.languages[0] : (navigator.language || navigator.userLanguage);
-  var parts = language.split('-');
-  var languageCode = language;
+  const language = navigator.languages ? navigator.languages[0] : (navigator.language || navigator.userLanguage);
+  const parts = language && language.split('-');
+  let languageCode = language;
   if (parts.length > 1) {
     languageCode = parts[0];
   }
@@ -208,53 +156,18 @@ function browserLanguage(supportedLanguages) {
 
 MapboxLanguage.prototype.onAdd = function (map) {
   this._map = map;
-  this._map.on('styledata', this._initialStyleUpdate);
+  this._map.on('style.load', this._initialStyleUpdate);
   this._container = document.createElement('div');
   return this._container;
 };
 
 MapboxLanguage.prototype.onRemove = function () {
-  this._map.off('styledata', this._initialStyleUpdate);
+  this._map.off('style.load', this._initialStyleUpdate);
   this._map = undefined;
 };
 
-function ie11Polyfill() {
-  if (typeof Object.assign != 'function') {
-    // Must be writable: true, enumerable: false, configurable: true
-    Object.defineProperty(Object, 'assign', {
-      // eslint-disable-next-line no-unused-vars
-      value: function assign(target, varArgs) { // .length of function is 2
-        // eslint-disable-next-line strict
-        'use strict';
-        if (target === null) { // TypeError if undefined or null
-          throw new TypeError('Cannot convert undefined or null to object');
-        }
-
-        var to = Object(target);
-
-        for (var index = 1; index < arguments.length; index++) {
-          var nextSource = arguments[index];
-
-          if (nextSource !== null) { // Skip over if undefined or null
-            for (var nextKey in nextSource) {
-              // Avoid bugs when hasOwnProperty is shadowed
-              if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
-                to[nextKey] = nextSource[nextKey];
-              }
-            }
-          }
-        }
-        return to;
-      },
-      writable: true,
-      configurable: true
-    });
-  }
-}
-
 if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
   module.exports = MapboxLanguage;
 } else {
-  ie11Polyfill();
   window.MapboxLanguage = MapboxLanguage;
 }

exampleSite/content/posts/theme-documentation-basics/index.en.md

@@ -448,9 +448,9 @@ Please open the code block below to view the complete sample configuration :(far
       # access token of Mapbox GL JS
       accessToken = ""
       # style for the light theme
-      lightStyle = "mapbox://styles/mapbox/light-v9"
+      lightStyle = "mapbox://styles/mapbox/light-v10?optimize=true"
       # style for the dark theme
-      darkStyle = "mapbox://styles/mapbox/dark-v9"
+      darkStyle = "mapbox://styles/mapbox/dark-v10?optimize=true"
       # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol" NavigationControl >}}
       navigation = true
       # whether to add {{< link "https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol" GeolocateControl >}}

exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md

@@ -455,9 +455,9 @@ hugo
       # Mapbox GL JS 的 access token
       accessToken = ""
       # 浅色主题的地图样式
-      lightStyle = "mapbox://styles/mapbox/light-v9"
+      lightStyle = "mapbox://styles/mapbox/light-v10?optimize=true"
       # 深色主题的地图样式
-      darkStyle = "mapbox://styles/mapbox/dark-v9"
+      darkStyle = "mapbox://styles/mapbox/dark-v10?optimize=true"
       # 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api#navigationcontrol" NavigationControl >}}
       navigation = true
       # 是否添加 {{< link "https://docs.mapbox.com/mapbox-gl-js/api#geolocatecontrol" GeolocateControl >}}

exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md

@@ -21,9 +21,6 @@ lightgallery: true
 
 math:
   enable: true
-mapbox:
-  lightStyle: mapbox://styles/mapbox/light-zh-v1?optimize=true
-  darkStyle: mapbox://styles/mapbox/dark-zh-v1?optimize=true
 ---
 
 **LoveIt** 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode.

exampleSite/content/posts/theme-documentation-mapbox-shortcode/index.zh-cn.md

@@ -19,6 +19,9 @@ hiddenFromHomePage: true
 
 toc:
   enable: false
+mapbox:
+  lightStyle: mapbox://styles/mapbox/light-zh-v1?optimize=true
+  darkStyle: mapbox://styles/mapbox/dark-zh-v1?optimize=true
 ---
 
 {{< version 0.2.0 >}}
@@ -94,9 +97,9 @@ toc:
 一个带有自定义样式的 `mapbox` 示例:
 
 ```markdown
-{{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1" */>}}
+{{</* mapbox -122.252 37.453 10 false "mapbox://styles/mapbox/streets-zh-v1?optimize=true" */>}}
 或者
-{{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/streets-zh-v1" */>}}
+{{</* mapbox lng=-122.252 lat=37.453 zoom=10 marked=false light-style="mapbox://styles/mapbox/streets-zh-v1?optimize=true" */>}}
 ```
 
 呈现的输出效果如下: