refator: replace gulp by webpack and npm scripts (#129)

BREAKING CHANGE: We have replaced `gulp` with `webpack` and `npm scripts` to build this theme. If you build it on your own or use build commands during the deployment, you may have to adjust your setup. BREAKING CHANGE: The `GeekblogIcons` font is using the icon name as Unicode now. As a consequence, you have to replace all references to Icons from this font if you have customized the theme.
2024-11-21 20:50:40 +00:00 · 2021-12-29 22:50:13 +01:00 · 2021-12-29 22:50:13 +01:00 · d5f6cfb13e
commit d5f6cfb13e
parent ea4fab356a
84 changed files with 19795 additions and 4265 deletions
--- a/.dictionary
+++ b/.dictionary
@ -33,3 +33,5 @@ prebuilt
 whitespace
 Theming
 Favicon[s]?
+webpack
+pre-processor(s)
--- a/.drone.yml
+++ b/.drone.yml
@ -7,11 +7,20 @@ platform:
  arch: amd64

 steps:
+  - name: eslint
+    image: node:lts
+    commands:
+      - npm install > /dev/null
+      - npm run lint
+    environment:
+      FORCE_COLOR: true
+      NPM_CONFIG_LOGLEVEL: error
+
  - name: assets
    image: node:lts
    commands:
      - npm install > /dev/null
-      - npx gulp default
+      - npm run build
    environment:
      FORCE_COLOR: true
      NPM_CONFIG_LOGLEVEL: error
@ -94,7 +103,7 @@ steps:
    image: node:lts
    commands:
      - npm install > /dev/null
-      - npx gulp default
+      - npm run build
    environment:
      FORCE_COLOR: true
      NPM_CONFIG_LOGLEVEL: error
@ -172,7 +181,7 @@ steps:
    image: node:lts
    commands:
      - npm install > /dev/null
-      - npx gulp svg-sprite-list
+      - npm run svg-sprite-list
      - mkdir -p exampleSite/themes/hugo-geekblog/
      - curl -sSL https://github.com/thegeeklab/hugo-geekblog/releases/latest/download/hugo-geekblog.tar.gz | tar -xz -C exampleSite/themes/hugo-geekblog/ --strip-components=1
    when:
@ -184,8 +193,8 @@ steps:
    image: node:lts
    commands:
      - npm install > /dev/null
-      - npx gulp default
-      - npx gulp svg-sprite-list
+      - npm run build
+      - npm run svg-sprite-list
      - mkdir exampleSite/themes/ && ln -s $(pwd)/ exampleSite/themes/hugo-geekblog
    environment:
      FORCE_COLOR: true
@ -277,6 +286,6 @@ depends_on:

 ---
 kind: signature
-hmac: ff0a79853d809a654675edb6c59e2789ea6f1bad1efaade1f7d72cb9c4a294ce
+hmac: 74a7e960eb8af67b40992bb60bb75db699d44e81ac28189f01e1c27e1ad74988

 ...
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -0,0 +1,22 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "amd": true
+  },
+  "extends": ["plugin:prettier/recommended"],
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "sourceType": "module",
+    "requireConfigFile": false,
+    "allowImportExportEverywhere": true
+  },
+  "plugins": ["prettier"],
+  "rules": {
+    "require-await": "warn"
+  },
+  "globals": {
+    "require": false,
+    "requirejs": false
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@ -1,25 +1,21 @@
 # local environments
 .swp
 .env*
-dist/
-build/
-node_modules/
-lhci_reports/
-exampleSite/themes/
-exampleSite/public/
+/dist/
+/build/
+/node_modules/
+/lhci_reports/
+/exampleSite/themes/
+/exampleSite/public/
 CHANGELOG.md

 # auto-generated files
-assets/sprites/
-static/*.min.css
-static/*.min.css.map
-static/js/
-static/favicon/
-static/fonts/GeekblogIcons.*
-resources/
-exampleSite/resources/
-exampleSite/data/sprites/
-data/assets.json
+/data/
+/static/
+/assets/sprites/
+/resources/
+/exampleSite/resources/
+/exampleSite/data/sprites/

 # testing
 .lighthouseci/
--- a/.lighthouserc.yml
+++ b/.lighthouserc.yml
@ -2,6 +2,7 @@
 ci:
  collect:
    numberOfRuns: 3
+    psiStrategy: desktop
    staticDistDir: exampleSite/public
    url:
      - http://localhost/
--- a/.prettierrc
+++ b/.prettierrc
@ -1,4 +1,8 @@
 {
+  "printWidth": 99,
+  "singleQuote": false,
+  "semi": false,
+  "trailingComma": "none",
  "overrides": [
    {
      "files": ["*.html"],
--- a/.tarignore
+++ b/.tarignore
@ -8,9 +8,11 @@
 .markdownlint*
 .jsbeautify*
 .prettier*
+.eslintrc*
 .chglog
 example*
-gulp*
+webpack*
+svgsprite*
 package*
 node*
 local*
--- a/README.md
+++ b/README.md
@ -14,16 +14,16 @@ Geekblog is a simple Hugo theme for personal blogs. It is intentionally designed

 ## Build and release process

-This theme is subject to a CI driven build and release process common for software development. During the release build, all necessary assets are automatically built by [gulp](https://gulpjs.com/) and bundled in a release tarball. You can download the latest release from the GitHub [release page](https://github.com/thegeeklab/hugo-geekblog/releases).
+This theme is subject to a CI driven build and release process common for software development. During the release build, all necessary assets are automatically built by [webpack](https://webpack.js.org/) and bundled in a release tarball. You can download the latest release from the GitHub [release page](https://github.com/thegeeklab/hugo-geekblog/releases).

-Due to the fact that `gulp` is used as pre-processor the theme cannot be used from the main branch by default. If you want to use the theme from a cloned branch instead of a release tarball you'll need to install `gulp` locally and run the default pipeline once to create all required assets.
+Due to the fact that `webpack` and `npm scripts` are used as pre-processors, the theme cannot be used from the main branch by default. If you want to use the theme from a cloned branch instead of a release tarball you'll need to install `webpack` locally and run build script once to create all required assets.

 ```Shell
 # install required packages from package.json
 npm install

-# run gulp pipeline to build required assets
-npx gulp default
+# run the build script to build required assets
+npm run build
 ```

 See the [Getting Started Guide](https://hugo-geekblog.geekdocs.de/posts/usage/getting-started/) for details about the different setup options.
--- a/data/assets-static.json
+++ b/data/assets-static.json
@ -1,3 +0,0 @@
-{
-  "custom.css": "custom.css"
-}
--- a/exampleSite/content/posts/advanced/includes.md
+++ b/exampleSite/content/posts/advanced/includes.md
@ -8,10 +8,12 @@ tags:
  - Shortcodes
 ---

-{{< toc >}}
-
 Include shortcode can include files of different types. By specifying a language, the included file will have syntax highlighting.

+<!--more-->
+
+{{< toc >}}
+
 ```tpl
 {{</* include file="relative/path/from/hugo/root" language="go" markdown=[false|true] */>}}
 ```
--- a/exampleSite/content/posts/usage/configuration.md
+++ b/exampleSite/content/posts/usage/configuration.md
@ -99,9 +99,6 @@ enableRobotsTXT = true
  # (Optional, default true) Add an anchor link to headlines.
  geekblogAnchor = true

-  # (Optional, default true) Copy anchor url to clipboard on click.
-  geekblogAnchorCopy = true
-
  # (Optional, default none) Sites main author.
  geekblogAuthor = "john-doe"

@ -231,9 +228,6 @@ params:
  # (Optional, default true) Add an anchor link to headlines.
  geekblogAnchor: true

-  # (Optional, default true) Copy anchor url to clipboard on click.
-  geekblogAnchorCopy: true
-
  # (Optional, default none) Sites main author.
  geekblogAuthor: john-doe

--- a/exampleSite/content/posts/usage/getting-started.md
+++ b/exampleSite/content/posts/usage/getting-started.md
@ -36,16 +36,16 @@ Geekblog is a simple Hugo theme for personal blogs. It is intentionally designed

 ## Setup requirements

-You need a recent version of Hugo for local builds and previews of sites that use Geekblog. As we are using [gulp](https://gulpjs.com/) as pre-processor the normal version of Hugo is sufficient. If you prefer the extended version of Hugo anyway this will work as well. For comprehensive Hugo documentation, see [gohugo.io](https://gohugo.io/documentation/).
+You need a recent version of Hugo for local builds and previews of sites that use Geekblog. As we are using [webpack](https://webpack.js.org/) as pre-processor, the normal version of Hugo is sufficient. If you prefer the extended version of Hugo anyway this will work as well. For comprehensive Hugo documentation, see [gohugo.io](https://gohugo.io/documentation/).

-If you want to use the theme from a cloned branch instead of a release tarball you'll need to install `gulp` locally and run the default pipeline once to create all required assets.
+If you want to use the theme from a cloned branch instead of a release tarball you'll need to install `webpack` locally and run the default pipeline once to create all required assets.

 ```Shell
 # install required packages from package.json
 npm install

-# run gulp pipeline to build required assets
-npx gulp default
+# run the build script to build required assets
+npm run build
 ```

 ## Using the theme
@ -151,10 +151,11 @@ Clone the Geekblog git repository.
 git clone https://github.com/thegeeklab/hugo-geekblog.git themes/hugo-geekblog
 ```

-Build required theme assets e.g. CSS files and SVG sprites with `gulp`.
+Build required theme assets e.g. CSS files and SVG sprites.

 ```Shell
-npx gulp default
+npm install
+npm run build
 ```

 ## Deployments
--- a/exampleSite/layouts/shortcodes/sprites.html
+++ b/exampleSite/layouts/shortcodes/sprites.html
@ -1,11 +1,11 @@
 <div class="flex flex-wrap justify-center">
-    {{ range .Site.Data.sprites.geekblog }}
+    {{ range $key, $value := .Site.Data.sprites.geekblog }}
    <div class="flex flex-grid icon-grid">
        <div class="flex align-center justify-center icon-grid__line">
-            <svg class="icon gblog_{{ . }}"><use xlink:href="#gblog_{{ . }}"></use></svg>
+            <svg class="icon {{ $key }}"><use xlink:href="#{{ $key }}"></use></svg>
        </div>
        <div class="flex align-center justify-center icon-grid__line icon-grid__line--text">
-            <span>#gblog_{{ (replace . "_" "_<wbr>") | safeHTML }}</span>
+            <span>#{{ (replace $key "_" "_<wbr>") | safeHTML }}</span>
        </div>
    </div>
    {{ end }}
--- a/gulpfile.js
+++ b/gulpfile.js
@ -1,307 +0,0 @@
-const devBuild = !(
-  (process.env.NODE_ENV || "prod").trim().toLowerCase() === "prod"
-);
-
-const gulp = require("gulp");
-const rename = require("gulp-rename");
-const { sass } = require("@mr-hope/gulp-sass");
-const cleanCSS = require("gulp-clean-css");
-const autoprefixer = require("gulp-autoprefixer");
-const iconfont = require("gulp-iconfont");
-const filelist = require("gulp-filelist");
-const uglify = require("gulp-uglify");
-const sourcemaps = require("gulp-sourcemaps");
-const realFavicon = require("gulp-real-favicon");
-const svgSprite = require("gulp-svg-sprite");
-const rev = require("gulp-rev");
-const replace = require("gulp-replace");
-
-const path = require("path");
-const fs = require("fs");
-const del = require("del");
-const through = require("through2");
-
-var BUILD = "build";
-var CSS_BUILD = BUILD + "/assets";
-var JS_BUILD = BUILD + "/assets/js";
-var FAVICON_DATA_FILE = BUILD + "/faviconData.json";
-var TIMESTAMP = Math.round(Date.now() / 1000);
-
-function noop() {
-  return through.obj();
-}
-
-gulp.task("sass", function () {
-  return gulp
-    .src("src/sass/{main,print,mobile}.scss")
-    .pipe(devBuild ? sourcemaps.init() : noop())
-    .pipe(sass().on("error", sass.logError))
-    .pipe(cleanCSS({ format: "beautify" }))
-    .pipe(
-      autoprefixer({
-        cascade: false,
-      })
-    )
-    .pipe(gulp.dest(CSS_BUILD))
-    .pipe(cleanCSS())
-    .pipe(rename({ extname: ".min.css" }))
-    .pipe(devBuild ? sourcemaps.write(".") : noop())
-    .pipe(gulp.dest(CSS_BUILD));
-});
-
-gulp.task("favicon-svg", function () {
-  return gulp
-    .src("src/favicon/favicon-master.svg")
-    .pipe(rename("favicon.svg"))
-    .pipe(gulp.dest("static/favicon/"));
-});
-
-gulp.task("favicon-generate", function (done) {
-  realFavicon.generateFavicon(
-    {
-      masterPicture: "src/favicon/favicon-master.svg",
-      dest: "static/favicon",
-      iconsPath: "/favicon",
-      design: {
-        ios: {
-          pictureAspect: "backgroundAndMargin",
-          backgroundColor: "#2f333e",
-          margin: "14%",
-          assets: {
-            ios6AndPriorIcons: false,
-            ios7AndLaterIcons: false,
-            precomposedIcons: false,
-            declareOnlyDefaultIcon: true,
-          },
-        },
-        desktopBrowser: {},
-        windows: {
-          pictureAspect: "whiteSilhouette",
-          backgroundColor: "#2f333e",
-          onConflict: "override",
-          assets: {
-            windows80Ie10Tile: false,
-            windows10Ie11EdgeTiles: {
-              small: false,
-              medium: true,
-              big: false,
-              rectangle: false,
-            },
-          },
-        },
-        androidChrome: {
-          pictureAspect: "shadow",
-          themeColor: "#2f333e",
-          manifest: {
-            display: "standalone",
-            orientation: "notSet",
-            onConflict: "override",
-            declared: true,
-          },
-          assets: {
-            legacyIcon: false,
-            lowResolutionIcons: false,
-          },
-        },
-        safariPinnedTab: {
-          pictureAspect: "silhouette",
-          themeColor: "#2f333e",
-        },
-      },
-      settings: {
-        scalingAlgorithm: "Mitchell",
-        errorOnImageTooSmall: false,
-        readmeFile: false,
-        htmlCodeFile: false,
-        usePathAsIs: false,
-      },
-      markupFile: FAVICON_DATA_FILE,
-    },
-    function () {
-      done();
-    }
-  );
-});
-
-gulp.task("favicon-check-update", function (done) {
-  var currentVersion = JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).version;
-  realFavicon.checkForUpdates(currentVersion, function (err) {
-    if (err) {
-      throw err;
-    }
-  });
-  done();
-});
-
-gulp.task("svg-sprite", function () {
-  config = {
-    shape: {
-      id: {
-        generator: "gblog_%s",
-      },
-      dimension: {
-        maxWidth: 22,
-        maxHeight: 22,
-        attributes: false,
-      },
-      spacing: {
-        padding: 5,
-        box: "content",
-      },
-      dest: BUILD + "/intermediate-svg",
-    },
-    svg: {
-      xmlDeclaration: false,
-      rootAttributes: {
-        class: "svg-sprite",
-      },
-    },
-    mode: {
-      inline: true,
-      symbol: {
-        dest: "assets/sprites/",
-        sprite: "geekblog.svg",
-        bust: false,
-      },
-    },
-  };
-
-  return gulp
-    .src("src/icons/*.svg")
-    .pipe(svgSprite(config))
-    .pipe(gulp.dest("."));
-});
-
-gulp.task("svg-sprite-list", function () {
-  config = { removeExtensions: true, flatten: true };
-
-  return gulp
-    .src("src/icons/*.svg")
-    .pipe(filelist("exampleSite/data/sprites/geekblog.json", config))
-    .pipe(gulp.dest("."));
-});
-
-gulp.task("iconfont", function () {
-  var lastUnicode = 0xea01;
-  var files = fs.readdirSync("src/iconfont");
-
-  // Filter files with containing unicode value and set last unicode
-  files.forEach(function (file) {
-    var basename = path.basename(file);
-    var matches = basename.match(/^(?:((?:u[0-9a-f]{4,6},?)+)\-)?(.+)\.svg$/i);
-    var currentCode = -1;
-
-    if (matches && matches[1]) {
-      currentCode = parseInt(matches[1].split("u")[1], 16);
-    }
-
-    if (currentCode >= lastUnicode) {
-      lastUnicode = ++currentCode;
-    }
-  });
-
-  return gulp
-    .src(["src/iconfont/*.svg"])
-    .pipe(
-      iconfont({
-        startUnicode: lastUnicode,
-        fontName: "GeekblogIcons",
-        prependUnicode: true,
-        normalize: true,
-        fontHeight: 1001,
-        centerHorizontally: true,
-        formats: ["woff", "woff2"],
-        timestamp: TIMESTAMP,
-      })
-    )
-    .pipe(gulp.dest("static/fonts/"));
-});
-
-gulp.task("js", function () {
-  return gulp
-    .src(["src/js/*.js"])
-    .pipe(devBuild ? sourcemaps.init() : noop())
-    .pipe(uglify())
-    .pipe(rename({ extname: ".min.js" }))
-    .pipe(devBuild ? sourcemaps.write(".") : noop())
-    .pipe(gulp.dest(JS_BUILD));
-});
-
-gulp.task("asset-sync", function () {
-  return gulp
-    .src([
-      "node_modules/clipboard/dist/clipboard.min.js",
-      "node_modules/mermaid/dist/mermaid.min.js",
-    ])
-    .pipe(replace(/\/\/# sourceMappingURL=.+$/, ""))
-    .pipe(gulp.dest(JS_BUILD));
-});
-
-gulp.task("asset-rev", function () {
-  return gulp
-    .src([CSS_BUILD + "/*.min.css", JS_BUILD + "/*.min.js"], {
-      base: BUILD + "/assets",
-    })
-    .pipe(rev())
-    .pipe(gulp.dest("static"))
-    .pipe(
-      rev.manifest("data/assets-static.json", {
-        base: "data",
-        merge: true,
-      })
-    )
-    .pipe(rename("assets.json"))
-    .pipe(gulp.dest("data"));
-});
-
-gulp.task("asset-map", function () {
-  return gulp
-    .src([CSS_BUILD + "/*.min.css.map", JS_BUILD + "/*.min.js.map"], {
-      base: BUILD + "/assets",
-    })
-    .pipe(gulp.dest("static"));
-});
-
-gulp.task("clean", function () {
-  return del([
-    BUILD,
-    "layouts/partials/svg-icon-symbols.svg",
-    "static/js/",
-    "static/favicon/",
-    "static/*.min.css",
-    "static/*.css.map",
-    "data/assets.json",
-    "resources",
-  ]);
-});
-
-/* Task series */
-
-gulp.task("asset", gulp.series("asset-sync", "asset-rev"));
-
-gulp.task("favicon", gulp.series("favicon-svg", "favicon-generate"));
-
-gulp.task("svg", gulp.series("svg-sprite", devBuild ? "svg-sprite-list" : []));
-
-gulp.task(
-  "default",
-  gulp.series([
-    devBuild ? [] : "clean",
-    "sass",
-    "js",
-    "asset",
-    devBuild ? "asset-map" : [],
-    "svg",
-    "iconfont",
-    "favicon",
-  ])
-);
-
-gulp.task("watch", function () {
-  gulp.series("default")();
-  gulp.watch(
-    "src/sass/**/*.*css",
-    gulp.series("sass", "asset-rev", "asset-map")
-  );
-  gulp.watch("src/js/*.js", gulp.series("js", "asset-rev", "asset-map"));
-});
--- a/layouts/404.html
+++ b/layouts/404.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ .Site.Language.Lang }}">
+<html lang="{{ .Site.Language.Lang }}" class="color-toggle-hidden">

 <head>
    {{ partial "head/meta" . }}
@ -10,7 +10,7 @@
 </head>

 <body>
-    {{ partial "svg-icon-symbols" . }}
+    {{ partial "svg-sprites" . }}

    <div class="wrapper">
        {{ partial "site-header" . }}
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -14,7 +14,7 @@
 </head>

 <body>
-    {{ partial "svg-icon-symbols" . }}
+    {{ partial "svg-sprites" . }}

    <div class="wrapper {{ if default false .Site.Params.GeekblogDarkModeDim }}dark-mode-dim{{ end }}">
        {{ partial "site-header" . }}
@ -25,7 +25,5 @@

        {{ partial "site-footer" . }}
    </div>
-
-    {{ partial "foot" . }}
 </body>
 </html>
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@ -16,7 +16,7 @@
        </section>
        <div class="gblog-post__readmore">
            {{ if .Truncated }}
-            <a class="flex-inline align-center fake-link" title="Read full post" href="{{ .RelPermalink }}">Read full post</a>
+            <a class="flex-inline align-center fake-link" title="Read full post" href="{{ .RelPermalink }}">Read full post<i class="gblog-icon">gblog_arrow_right</i></a>
            {{ end }}
        </div>

--- a/layouts/partials/foot.html
+++ b/layouts/partials/foot.html
@ -1,6 +0,0 @@
-{{ if default true .Site.Params.GeekblogAnchorCopy }}
-<script defer src="{{ index .Site.Data.assets "js/clipboard.min.js" | relURL }}"></script>
-<script defer src="{{ index .Site.Data.assets "js/clipboard-loader.min.js" | relURL }}"></script>
-{{ end }}
-
-<script defer src="{{ index .Site.Data.assets "js/copycode.min.js" | relURL }}"></script>
--- a/layouts/partials/head/favicons.html
+++ b/layouts/partials/head/favicons.html
@ -1,3 +1,4 @@
 <link rel="icon" type="image/svg+xml" href="{{ "favicon/favicon.svg" | relURL }}">
+<link rel="icon" type="image/png" sizes="48x48" href="{{ "favicon/favicon-32x32.png" | relURL }}">
 <link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon/favicon-32x32.png" | relURL }}">
 <link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon/favicon-16x16.png" | relURL }}">
--- a/layouts/partials/head/others.html
+++ b/layouts/partials/head/others.html
@ -1,19 +1,20 @@
-<script src="{{ index .Site.Data.assets "js/darkmode.min.js" | relURL }}"></script>
+<script src="{{ index (index .Site.Data.assets "bundle.js") "src" | relURL }}"></script>

 <link rel="preload" as="font" href="{{ "fonts/Metropolis.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
 <link rel="preload" as="font" href="{{ "fonts/LiberationSans.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
+<link rel="preload" as="font" href="{{ "fonts/GeekblogIcons.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">

-<link rel="preload" href="{{ index .Site.Data.assets "main.min.css" | relURL }}" as="style">
-<link rel="stylesheet" href="{{ index .Site.Data.assets "main.min.css" | relURL }}" media="all">
+<link rel="preload" href="{{ index (index .Site.Data.assets "main.scss") "src" | relURL }}" as="style">
+<link rel="stylesheet" href="{{ index (index .Site.Data.assets "main.scss") "src" | relURL }}" media="all">

-<link rel="preload" href="{{ index .Site.Data.assets "mobile.min.css" | relURL }}" as="style">
-<link rel="stylesheet" href="{{ index .Site.Data.assets "mobile.min.css" | relURL }}" media="screen and (max-width: 45rem)">
+<link rel="preload" href="{{ index (index .Site.Data.assets "mobile.scss") "src" | relURL }}" as="style">
+<link rel="stylesheet" href="{{ index (index .Site.Data.assets "mobile.scss") "src" | relURL }}" media="screen and (max-width: 45rem)">

-<link rel="preload" href="{{ index .Site.Data.assets "print.min.css" | relURL }}" as="style">
-<link rel="stylesheet" href="{{ index .Site.Data.assets "print.min.css" | relURL }}" media="print">
+<link rel="preload" href="{{ index (index .Site.Data.assets "print.scss") "src" | relURL }}" as="style">
+<link rel="stylesheet" href="{{ index (index .Site.Data.assets "print.scss") "src" | relURL }}" media="print">

-<link rel="preload" href="{{ index .Site.Data.assets "custom.css" | relURL }}" as="style">
-<link rel="stylesheet" href="{{ index .Site.Data.assets "custom.css" | relURL }}" media="all">
+<link rel="preload" href="{{ index (index .Site.Data.assets "custom.css") "src" | relURL }}" as="style">
+<link rel="stylesheet" href="{{ index (index .Site.Data.assets "custom.css") "src" | relURL }}" media="all">

 {{ with .OutputFormats.Get "atom" }}
    {{ printf `<link rel="%s" type="%s" href="%s" title="%s">` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
--- a/layouts/partials/pagination.html
+++ b/layouts/partials/pagination.html
@ -3,13 +3,13 @@
 <nav class="gblog-paging flex flex-even align-center" role="navigation">
    <div class="gblog-paging__item gblog-paging__item--prev">
    {{ if $pag.HasPrev }}
-        <a class="flex-inline align-center fake-link no-wrap" href="{{ $pag.Prev.URL }}">PREV</a>
+        <a class="flex-inline align-center fake-link no-wrap" href="{{ $pag.Prev.URL }}"><i class="gblog-icon">gblog_keyboard_arrow_left</i>PREV</a>
    {{ end }}
    </div>
    <div class="gblog-paging__state">Page {{ $pag.PageNumber }} of {{ $pag.TotalPages }}</div>
    <div class="gblog-paging__item gblog-paging__item--next">
    {{ if $pag.HasNext }}
-        <a class="flex-inline align-center fake-link no-wrap" href="{{ $pag.Next.URL }}">NEXT</a>
+        <a class="flex-inline align-center fake-link no-wrap" href="{{ $pag.Next.URL }}">NEXT<i class="gblog-icon">gblog_keyboard_arrow_right</i></a>
    {{ end }}
    </div>
 </nav>
--- a/layouts/partials/svg-icon-symbols.html
+++ b/layouts/partials/svg-icon-symbols.html
--- a/layouts/shortcodes/mermaid.html
+++ b/layouts/shortcodes/mermaid.html
@ -1,7 +1,6 @@
 {{ if not (.Page.Scratch.Get "mermaid") }}
 <!-- Include mermaid only first time -->
-<script defer src="{{ index .Site.Data.assets "js/mermaid.min.js" | relURL }}"></script>
-<script defer src="{{ index .Site.Data.assets "js/mermaid-loader.min.js" | relURL }}"></script>
+<script defer src="{{ index (index .Site.Data.assets "mermaid.js") "src" | relURL }}"></script>
 {{ .Page.Scratch.Set "mermaid" true }}
 {{ end }}

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -2,10 +2,23 @@
  "name": "geekblog",
  "version": "1.0.0",
  "description": "Hugo theme made for blogs",
-  "main": "gulpfile.js",
+  "main": "index.js",
  "scripts": {
-    "gulp": "gulp",
-    "server": "hugo server  -D -F -s exampleSite/"
+    "build": "run-s prep svg build:webpack-prod",
+    "build:webpack-prod": "webpack --mode=production",
+    "build:webpack-devel": "webpack --mode=development",
+    "start": "run-s prep svg build:webpack-devel ; run-p start:webpack start:hugo",
+    "start:webpack": "webpack --mode=development --watch",
+    "start:build": "webpack --mode=development",
+    "start:hugo": "hugo server -D -F -s exampleSite/",
+    "svg": "run-s svg:*",
+    "svg:sprite": "svg-sprite -C svgsprite.config.json 'src/icons/*.svg'",
+    "svg:font": "svgtofont --sources build/icons --output build/fonts",
+    "prep": "run-s prep:*",
+    "prep:clean": "del build/ static/",
+    "prep:make": "make-dir build/icons build/fonts",
+    "svg-sprite-list": "npm run svg:font ; make-dir exampleSite/data/sprites ; cpy build/fonts/GeekblogIcons.json exampleSite/data/sprites/ --rename geekblog.json",
+    "lint": "eslint src/js/ --color"
  },
  "repository": {
    "type": "git",
@ -15,31 +28,51 @@
  "license": "MIT",
  "dependencies": {
    "clipboard": "2.0.8",
-    "mermaid": "8.13.6"
+    "mermaid": "8.13.6",
+    "store2": "2.13.1"
  },
  "devDependencies": {
-    "@mr-hope/gulp-sass": "2.0.0",
-    "del": "6.0.0",
-    "gulp": "4.0.2",
-    "gulp-autoprefixer": "8.0.0",
-    "gulp-clean-css": "4.3.0",
-    "gulp-filelist": "2.0.5",
-    "gulp-iconfont": "11.0.1",
-    "gulp-real-favicon": "0.3.2",
-    "gulp-rename": "2.0.0",
-    "gulp-replace": "1.1.3",
-    "gulp-rev": "9.0.0",
-    "gulp-sourcemaps": "3.0.0",
-    "gulp-svg-sprite": "1.5.0",
-    "gulp-uglify": "3.0.2",
+    "@babel/eslint-parser": "7.16.5",
+    "autoprefixer": "10.4.0",
+    "copy-webpack-plugin": "10.2.0",
+    "cpy-cli": "3.1.1",
+    "css-loader": "6.5.1",
+    "del-cli": "4.0.1",
+    "eslint": "8.5.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "favicons-webpack-plugin": "5.0.2",
+    "make-dir-cli": "3.0.0",
+    "npm-run-all": "4.1.5",
+    "postcss-loader": "6.2.1",
    "prettier": "2.5.1",
    "prettier-plugin-go-template": "0.0.11",
-    "through2": "4.0.2"
+    "sass": "1.45.1",
+    "sass-loader": "12.4.0",
+    "svg-sprite": "1.5.3",
+    "svgtofont": "3.13.1",
+    "webpack": "5.65.0",
+    "webpack-assets-manifest": "5.0.6",
+    "webpack-cli": "4.9.1",
+    "webpack-remove-empty-scripts": "0.7.2"
  },
  "browserslist": [
    "last 2 version",
    "> 5%",
    "not dead",
    "Firefox ESR"
-  ]
+  ],
+  "svgtofont": {
+    "fontName": "GeekblogIcons",
+    "css": false,
+    "html": false,
+    "emptyDist": true,
+    "useNameAsUnicode": true,
+    "svgicons2svgfont": {
+      "fontHeight": 1001,
+      "normalize": true,
+      "centerHorizontally": true,
+      "centerVertically": true
+    }
+  }
 }
--- a/src/iconfont/uEA01-arrow_back.svg
+++ b/src/iconfont/uEA01-arrow_back.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M31.999 14.035v3.93H7.673l11.134 11.228L16 32 .001 16.001 16 .002l2.807 2.807L7.673 14.037h24.326z"/></svg>
--- a/src/iconfont/uEA02-arrow_right.svg
+++ b/src/iconfont/uEA02-arrow_right.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M24.046 14.035V8.047L31.999 16l-7.953 7.953v-5.988H0v-3.93h24.046z"/></svg>
--- a/src/iconfont/uEA03-bookmarks.svg
+++ b/src/iconfont/uEA03-bookmarks.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M20.357 5.856q1.157 0 2.043.851t.885 2.008v23.284l-10.212-4.357-10.144 4.357V8.715q0-1.157.885-2.008t2.042-.851h14.502zm5.787 18.859V5.856q0-1.157-.851-2.042t-2.008-.885H8.715q0-1.157.885-2.042t2.043-.885h14.502q1.157 0 2.043.885t.885 2.042v23.216z"/></svg>
--- a/src/iconfont/uEA04-clear.svg
+++ b/src/iconfont/uEA04-clear.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M32 3.222L19.222 16 32 28.778l-3.221 3.221-12.778-12.778L3.223 31.999.002 28.778 12.78 16 .002 3.222 3.223.001l12.778 12.778L28.779.001z"/></svg>
--- a/src/iconfont/uEA05-contacts.svg
+++ b/src/iconfont/uEA05-contacts.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M22.688 22.688v-2q0-1.5-2.281-2.438t-4.406-.938-4.406.938-2.281 2.438v2h13.375zM16 9q-1.25 0-2.125.875T13 12t.875 2.125T16 15t2.125-.875T19 12t-.875-2.125T16 9zm10.688-3.687q1.063 0 1.844.813t.781 1.875v16q0 1.063-.781 1.875t-1.844.813H5.313q-1.063 0-1.844-.813t-.781-1.875v-16q0-1.063.781-1.875t1.844-.813h21.375zM5.313 32v-2.688h21.375V32H5.313zM26.688 0v2.688H5.313V0h21.375z"/></svg>
--- a/src/iconfont/uEA06-create.svg
+++ b/src/iconfont/uEA06-create.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M31.499 7.167l-3.25 3.25-6.666-6.666 3.25-3.25q.5-.5 1.25-.5t1.25.5l4.166 4.166q.5.5.5 1.25t-.5 1.25zM.001 25.333L19.667 5.667l6.666 6.666L6.667 31.999H.001v-6.666z"/></svg>
--- a/src/iconfont/uEA07-date.svg
+++ b/src/iconfont/uEA07-date.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M27.192 28.844V11.192H4.808v17.652h22.384zm0-25.689q1.277 0 2.253.976t.976 2.253v22.459q0 1.277-.976 2.216t-2.253.939H4.808q-1.352 0-2.291-.901t-.939-2.253V6.385q0-1.277.939-2.253t2.291-.976h1.577V.001h3.23v3.155h12.769V.001h3.23v3.155h1.577zm-3.155 11.267v3.155h-3.23v-3.155h3.23zm-6.46 0v3.155h-3.155v-3.155h3.155zm-6.384 0v3.155h-3.23v-3.155h3.23z"/></svg>
--- a/src/iconfont/uEA08-download.svg
+++ b/src/iconfont/uEA08-download.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M2.866 28.209h26.269v3.79H2.866v-3.79zm26.268-16.925L16 24.418 2.866 11.284h7.493V.001h11.283v11.283h7.493z"/></svg>
--- a/src/iconfont/uEA09-code.svg
+++ b/src/iconfont/uEA09-code.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 41.33 41.33"><path d="M9.917 24.5a1.75 1.75 0 10-3.501.001 1.75 1.75 0 003.501-.001zm0-21a1.75 1.75 0 10-3.501.001A1.75 1.75 0 009.917 3.5zm11.666 2.333a1.75 1.75 0 10-3.501.001 1.75 1.75 0 003.501-.001zm1.75 0a3.502 3.502 0 01-1.75 3.026c-.055 6.581-4.721 8.039-7.82 9.023-2.898.911-3.846 1.349-3.846 3.117v.474a3.502 3.502 0 011.75 3.026c0 1.932-1.568 3.5-3.5 3.5s-3.5-1.568-3.5-3.5c0-1.294.711-2.424 1.75-3.026V6.526A3.502 3.502 0 014.667 3.5c0-1.932 1.568-3.5 3.5-3.5s3.5 1.568 3.5 3.5a3.502 3.502 0 01-1.75 3.026v9.06c.93-.456 1.914-.766 2.807-1.039 3.391-1.075 5.323-1.878 5.359-5.687a3.502 3.502 0 01-1.75-3.026c0-1.932 1.568-3.5 3.5-3.5s3.5 1.568 3.5 3.5z"/></svg>
--- a/src/iconfont/uEA0A-github.svg
+++ b/src/iconfont/uEA0A-github.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M16 .394c8.833 0 15.999 7.166 15.999 15.999 0 7.062-4.583 13.062-10.937 15.187-.813.146-1.104-.354-1.104-.771 0-.521.021-2.25.021-4.396 0-1.5-.5-2.458-1.083-2.958 3.562-.396 7.312-1.75 7.312-7.896 0-1.75-.625-3.167-1.646-4.291.167-.417.708-2.042-.167-4.25-1.333-.417-4.396 1.646-4.396 1.646a15.032 15.032 0 00-8 0S8.937 6.602 7.603 7.018c-.875 2.208-.333 3.833-.167 4.25-1.021 1.125-1.646 2.542-1.646 4.291 0 6.125 3.729 7.5 7.291 7.896-.458.417-.875 1.125-1.021 2.146-.917.417-3.25 1.125-4.646-1.333-.875-1.521-2.458-1.646-2.458-1.646-1.562-.021-.104.979-.104.979 1.042.479 1.771 2.333 1.771 2.333.938 2.854 5.396 1.896 5.396 1.896 0 1.333.021 2.583.021 2.979 0 .417-.292.917-1.104.771C4.582 29.455-.001 23.455-.001 16.393-.001 7.56 7.165.394 15.998.394zM6.063 23.372c.042-.083-.021-.187-.146-.25-.125-.042-.229-.021-.271.042-.042.083.021.187.146.25.104.062.229.042.271-.042zm.646.709c.083-.062.062-.208-.042-.333-.104-.104-.25-.146-.333-.062-.083.062-.062.208.042.333.104.104.25.146.333.062zm.625.937c.104-.083.104-.25 0-.396-.083-.146-.25-.208-.354-.125-.104.062-.104.229 0 .375s.271.208.354.146zm.875.875c.083-.083.042-.271-.083-.396-.146-.146-.333-.167-.417-.062-.104.083-.062.271.083.396.146.146.333.167.417.062zm1.187.521c.042-.125-.083-.271-.271-.333-.167-.042-.354.021-.396.146s.083.271.271.312c.167.062.354 0 .396-.125zm1.313.104c0-.146-.167-.25-.354-.229-.187 0-.333.104-.333.229 0 .146.146.25.354.229.187 0 .333-.104.333-.229zm1.208-.208c-.021-.125-.187-.208-.375-.187-.187.042-.312.167-.292.312.021.125.187.208.375.167s.312-.167.292-.292z"/></svg>
--- a/src/iconfont/uEA0B-heart.svg
+++ b/src/iconfont/uEA0B-heart.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M16 29.714a1.11 1.11 0 01-.786-.321L4.072 18.643c-.143-.125-4.071-3.714-4.071-8 0-5.232 3.196-8.357 8.535-8.357 3.125 0 6.053 2.464 7.464 3.857 1.411-1.393 4.339-3.857 7.464-3.857 5.339 0 8.535 3.125 8.535 8.357 0 4.286-3.928 7.875-4.089 8.035L16.785 29.392c-.214.214-.5.321-.786.321z"/></svg>
--- a/src/iconfont/uEA0C-link.svg
+++ b/src/iconfont/uEA0C-link.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M24.037 7.963q3.305 0 5.634 2.366T32 16t-2.329 5.671-5.634 2.366h-6.46v-3.08h6.46q2.028 0 3.493-1.465t1.465-3.493-1.465-3.493-3.493-1.465h-6.46v-3.08h6.46zM9.615 17.578v-3.155h12.77v3.155H9.615zM3.005 16q0 2.028 1.465 3.493t3.493 1.465h6.46v3.08h-6.46q-3.305 0-5.634-2.366T0 16.001t2.329-5.671 5.634-2.366h6.46v3.08h-6.46q-2.028 0-3.493 1.465t-1.465 3.493z"/></svg>
--- a/src/iconfont/uEA0D-menu.svg
+++ b/src/iconfont/uEA0D-menu.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M.001 5.334h31.998v3.583H.001V5.334zm0 12.416v-3.5h31.998v3.5H.001zm0 8.916v-3.583h31.998v3.583H.001z"/></svg>
--- a/src/iconfont/uEA0E-notifications.svg
+++ b/src/iconfont/uEA0E-notifications.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M25.846 22.154l3.308 3.308v1.615H2.847v-1.615l3.308-3.308V14q0-3.846 1.961-6.692t5.423-3.692V2.462q0-1 .692-1.731T16 0t1.769.731.692 1.731v1.154q3.461.846 5.423 3.692T25.846 14v8.154zM16 32q-1.385 0-2.346-.923t-.962-2.308h6.615q0 1.308-1 2.269T15.999 32z"/></svg>
--- a/src/iconfont/uEA0F-person.svg
+++ b/src/iconfont/uEA0F-person.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M16 20.023q5.052 0 10.526 2.199t5.473 5.754v4.023H0v-4.023q0-3.555 5.473-5.754t10.526-2.199zM16 16q-3.275 0-5.614-2.339T8.047 8.047t2.339-5.661T16 0t5.614 2.386 2.339 5.661-2.339 5.614T16 16z"/></svg>
--- a/src/iconfont/uEA10-rss_feed.svg
+++ b/src/iconfont/uEA10-rss_feed.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M-.481 12.048q8.482 0 14.457 5.976t5.976 14.457h-5.879q0-5.976-4.289-10.264T-.48 17.928v-5.879zm0-11.565q13.204 0 22.601 9.397t9.397 22.601h-5.783q0-10.891-7.662-18.553T-.481 6.266V.483zm0 27.468q0-1.831 1.301-3.132t3.229-1.301 3.181 1.253 1.253 3.181-1.301 3.229-3.132 1.301q-1.928 0-3.229-1.301T-.48 27.952z"/></svg>
--- a/src/iconfont/uEA11-search.svg
+++ b/src/iconfont/uEA11-search.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M11.925 20.161q3.432 0 5.834-2.402t2.402-5.834-2.402-5.834-5.834-2.402-5.834 2.402-2.402 5.834 2.402 5.834 5.834 2.402zm10.981 0L32 29.255 29.255 32l-9.094-9.094v-1.458l-.515-.515q-3.26 2.831-7.721 2.831-4.976 0-8.45-3.432T.001 11.925t3.474-8.45 8.45-3.474 8.407 3.474 3.432 8.45q0 1.802-.858 4.075t-1.973 3.646l.515.515h1.458z"/></svg>
--- a/src/iconfont/uEA12-security.svg
+++ b/src/iconfont/uEA12-security.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M16 0l13.072 5.855v8.715q0 6.059-3.745 11.063T16 31.999q-5.583-1.362-9.327-6.366T2.928 14.57V5.855zm0 16v13.004q4.017-1.294 6.808-4.868T26.144 16H16zm0 0V3.2L5.856 7.693v8.306H16z"/></svg>
--- a/src/iconfont/uEA14-tree.svg
+++ b/src/iconfont/uEA14-tree.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M32 14.423H20.808V9.616h-3.23v12.77h3.23v-4.807H32v12.845H20.808v-4.807h-6.385v-16h-3.23v4.807H.001V1.579h11.192v4.807h9.615V1.579H32v12.845z"/></svg>
--- a/src/iconfont/uEA15-email.svg
+++ b/src/iconfont/uEA15-email.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M28.845 9.615v-3.23L16 14.422 3.155 6.385v3.23L16 17.577zm0-6.46q1.277 0 2.216.977T32 6.385v19.23q0 1.277-.939 2.253t-2.216.977H3.155q-1.277 0-2.216-.977T0 25.615V6.385q0-1.277.939-2.253t2.216-.977h25.69z"/></svg>
--- a/src/iconfont/uEA16-arrow_left.svg
+++ b/src/iconfont/uEA16-arrow_left.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M7.954 17.965v5.988L.001 16l7.953-7.953v5.988H32v3.93H7.954z"/></svg>
--- a/src/iconfont/uEA17-keyboaed_arrow_right.svg
+++ b/src/iconfont/uEA17-keyboaed_arrow_right.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M6.125 28.25L18.375 16 6.125 3.75 9.875 0l15.999 15.999L9.875 31.998z"/></svg>
--- a/src/iconfont/uEA18-keyboard_arrow_left.svg
+++ b/src/iconfont/uEA18-keyboard_arrow_left.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M25.875 28.25L22.125 32 6.126 16.001 22.125.002l3.75 3.75-12.25 12.25z"/></svg>
--- a/src/iconfont/uEA19-bitbucket.svg
+++ b/src/iconfont/uEA19-bitbucket.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 41.33 41.33"><path d="M15.905 13.355c.189 1.444-1.564 2.578-2.784 1.839-1.375-.602-1.375-2.784-.034-3.403 1.151-.705 2.818.223 2.818 1.564zm1.907-.361c-.309-2.44-3.076-4.056-5.328-3.042-1.426.636-2.389 2.148-2.32 3.747.086 2.097 2.08 3.815 4.176 3.626s3.729-2.234 3.472-4.331zm4.108-9.315c-.756-.997-2.045-1.169-3.179-1.358-3.214-.516-6.513-.533-9.727.034-1.066.172-2.269.361-2.939 1.323 1.1 1.031 2.664 1.186 4.073 1.358 2.544.327 5.156.344 7.699.017 1.426-.172 3.008-.309 4.073-1.375zm.979 17.788c-.481 1.684-.206 3.953-1.994 4.932-3.076 1.701-6.806 1.89-10.191 1.289-1.787-.327-3.884-.894-4.864-2.578-.43-1.65-.705-3.334-.98-5.018l.103-.275.309-.155c5.121 3.386 12.288 3.386 17.427 0 .808.241.206 1.22.189 1.805zM26.01 4.951c-.584 3.764-1.255 7.51-1.908 11.257-.189 1.1-1.255 1.719-2.148 2.183-3.214 1.615-6.96 1.89-10.483 1.512-2.389-.258-4.829-.894-6.771-2.389-.911-.705-.911-1.908-1.083-2.922-.602-3.523-1.289-7.046-1.719-10.604.206-1.547 1.942-2.217 3.231-2.698C6.848.654 8.686.362 10.508.19c3.884-.378 7.854-.241 11.618.859 1.341.395 2.784.945 3.695 2.097.412.533.275 1.203.189 1.805z"/></svg>
--- a/src/iconfont/uEA1A-git.svg
+++ b/src/iconfont/uEA1A-git.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 41.33 41.33"><path d="M27.472 12.753L15.247.529a1.803 1.803 0 00-2.55 0l-2.84 2.84 2.137 2.137a2.625 2.625 0 013.501 3.501l3.499 3.499a2.625 2.625 0 11-1.237 1.237l-3.499-3.499c-.083.04-.169.075-.257.106v7.3a2.626 2.626 0 11-1.75 0v-7.3a2.626 2.626 0 01-1.494-3.607L8.62 4.606l-8.09 8.09a1.805 1.805 0 000 2.551l12.225 12.224a1.803 1.803 0 002.55 0l12.168-12.168a1.805 1.805 0 000-2.551z"/></svg>
--- a/src/iconfont/uEA1B-gitlab.svg
+++ b/src/iconfont/uEA1B-gitlab.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 41.33 41.33"><path d="M1.629 11.034L14 26.888.442 17.048a1.09 1.09 0 01-.39-1.203l1.578-4.811zm7.217 0h10.309l-5.154 15.854zM5.753 1.475l3.093 9.559H1.63l3.093-9.559a.548.548 0 011.031 0zm20.618 9.559l1.578 4.811c.141.437-.016.922-.39 1.203l-13.558 9.84 12.371-15.854zm0 0h-7.216l3.093-9.559a.548.548 0 011.031 0z"/></svg>
--- a/src/iconfont/uEA1C-brightness_auto.svg
+++ b/src/iconfont/uEA1C-brightness_auto.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-7.27 -7.27 42.55 42.55"><path d="M16.846 18.938h2.382L15.22 7.785h-2.44L8.772 18.938h2.382l.871-2.44h3.95zm7.087-9.062L27.999 14l-4.066 4.124v5.809h-5.809L14 27.999l-4.124-4.066H4.067v-5.809L.001 14l4.066-4.124V4.067h5.809L14 .001l4.124 4.066h5.809v5.809zm-11.385 4.937L14 10.282l1.452 4.531h-2.904z"/></svg>
--- a/src/iconfont/uEA1D-brightness_dark.svg
+++ b/src/iconfont/uEA1D-brightness_dark.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-7.27 -7.27 42.55 42.55"><path d="M14 21.435q3.079 0 5.257-2.178T21.435 14t-2.178-5.257T14 6.565q-1.51 0-3.079.697 1.917.871 3.108 2.701T15.22 14t-1.191 4.037-3.108 2.701q1.568.697 3.079.697zm9.933-11.559L27.999 14l-4.066 4.124v5.809h-5.809L14 27.999l-4.124-4.066H4.067v-5.809L.001 14l4.066-4.124V4.067h5.809L14 .001l4.124 4.066h5.809v5.809z"/></svg>
--- a/src/iconfont/uEA1E-brightness_light.svg
+++ b/src/iconfont/uEA1E-brightness_light.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-7.27 -7.27 42.55 42.55"><path d="M14 21.435q3.079 0 5.257-2.178T21.435 14t-2.178-5.257T14 6.565 8.743 8.743 6.565 14t2.178 5.257T14 21.435zm9.933-3.311v5.809h-5.809L14 27.999l-4.124-4.066H4.067v-5.809L.001 14l4.066-4.124V4.067h5.809L14 .001l4.124 4.066h5.809v5.809L27.999 14z"/></svg>
--- a/src/iconfont/uEA1F-keyborad_arrow_down.svg
+++ b/src/iconfont/uEA1F-keyborad_arrow_down.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-7.27 -7.27 42.55 42.55"><path d="M3.281 5.36L14 16.079 24.719 5.36 28 8.641l-14 14-14-14z"/></svg>
--- a/src/iconfont/uEA20-keyborad_arrow_up.svg
+++ b/src/iconfont/uEA20-keyborad_arrow_up.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-7.27 -7.27 42.55 42.55"><path d="M24.719 22.64L14 11.921 3.281 22.64 0 19.359l14-14 14 14z"/></svg>
--- a/src/iconfont/uEA21-check.svg
+++ b/src/iconfont/uEA21-check.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-7.27 -7.27 42.55 42.55"><path d="M8.885 20.197L25.759 3.323l2.24 2.24L8.885 24.677 0 15.792l2.24-2.24z"/></svg>
--- a/src/iconfont/uEA22-copy.svg
+++ b/src/iconfont/uEA22-copy.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-7.27 -7.27 42.55 42.55"><path d="M23.502 25.438V7.626H9.562v17.812h13.94zm0-20.315q1.013 0 1.787.745t.774 1.757v17.812q0 1.013-.774 1.787t-1.787.774H9.562q-1.013 0-1.787-.774t-.774-1.787V7.625q0-1.013.774-1.757t1.787-.745h13.94zM19.689 0v2.562H4.438v17.812H1.936V2.562q0-1.013.745-1.787T4.438.001h15.251z"/></svg>
--- a/src/js/clipboard-loader.js
+++ b/src/js/clipboard-loader.js
@ -1,21 +1,31 @@
+import { applyTheme } from "./darkmode"
+import { createCopyButton } from "./copycode.js"
+
+import Clipboard from "clipboard"
+;(() => {
+  applyTheme()
+})()
+
 document.addEventListener("DOMContentLoaded", function (event) {
-  var clipboard = new ClipboardJS(".clip");
+  let clipboard = new Clipboard(".clip")

  clipboard.on("success", function (e) {
-    const trigger = e.trigger;
+    const trigger = e.trigger

    if (trigger.hasAttribute("data-copy-feedback")) {
-      trigger.classList.add("gblog-post__codecopy--success");
-      trigger.querySelector(".icon.copy").classList.add("hidden");
-      trigger.querySelector(".icon.check").classList.remove("hidden");
+      trigger.classList.add("gblog-post__codecopy--success")
+      trigger.querySelector(".icon.copy").classList.add("hidden")
+      trigger.querySelector(".icon.check").classList.remove("hidden")

      setTimeout(function () {
-        trigger.classList.remove("gblog-post__codecopy--success");
-        trigger.querySelector(".icon.copy").classList.remove("hidden");
-        trigger.querySelector(".icon.check").classList.add("hidden");
-      }, 3000);
+        trigger.classList.remove("gblog-post__codecopy--success")
+        trigger.querySelector(".icon.copy").classList.remove("hidden")
+        trigger.querySelector(".icon.check").classList.add("hidden")
+      }, 3000)
    }

-    e.clearSelection();
-  });
-});
+    e.clearSelection()
+  })
+
+  document.querySelectorAll(".highlight").forEach((highlightDiv) => createCopyButton(highlightDiv))
+})
--- a/src/js/config.js
+++ b/src/js/config.js
@ -0,0 +1,5 @@
+export const DARK_MODE = "dark"
+export const LIGHT_MODE = "light"
+export const AUTO_MODE = "auto"
+export const THEME = "hugo-geekblog"
+export const TOGGLE_MODES = [AUTO_MODE, DARK_MODE, LIGHT_MODE]
--- a/src/js/copycode.js
+++ b/src/js/copycode.js
@ -1,34 +1,23 @@
-function createCopyButton(highlightDiv) {
-  const button = document.createElement("span");
+export function createCopyButton(highlightDiv) {
+  const button = document.createElement("span")
+  let selector = "pre > code"

  if (highlightDiv.querySelector(".lntable")) {
-    selector = ".lntable .lntd:last-child pre > code";
-  } else {
-    selector = "pre > code";
+    selector = ".lntable .lntd:last-child pre > code"
  }

-  const codeToCopy = highlightDiv.querySelector(selector).innerText.trim();
+  const codeToCopy = highlightDiv.querySelector(selector).innerText.trim()

-  button.classList.add(
-    "flex",
-    "align-center",
-    "justify-center",
-    "clip",
-    "gblog-post__codecopy"
-  );
-  button.type = "button";
+  button.classList.add("flex", "align-center", "justify-center", "clip", "gblog-post__codecopy")
+  button.type = "button"
  button.innerHTML =
    '<svg class="icon copy"><use xlink:href="#gblog_copy"></use></svg>' +
-    '<svg class="icon check hidden"><use xlink:href="#gblog_check"></use></svg>';
-  button.setAttribute("data-clipboard-text", codeToCopy);
-  button.setAttribute("data-copy-feedback", "Copied!");
-  button.setAttribute("role", "button");
-  button.setAttribute("aria-label", "Copy");
+    '<svg class="icon check hidden"><use xlink:href="#gblog_check"></use></svg>'
+  button.setAttribute("data-clipboard-text", codeToCopy)
+  button.setAttribute("data-copy-feedback", "Copied!")
+  button.setAttribute("role", "button")
+  button.setAttribute("aria-label", "Copy")

-  highlightDiv.classList.add("gblog-post__codecontainer");
-  highlightDiv.insertBefore(button, highlightDiv.firstChild);
+  highlightDiv.classList.add("gblog-post__codecontainer")
+  highlightDiv.insertBefore(button, highlightDiv.firstChild)
 }
-
-document
-  .querySelectorAll(".highlight")
-  .forEach((highlightDiv) => createCopyButton(highlightDiv));
--- a/src/js/darkmode.js
+++ b/src/js/darkmode.js
@ -1,51 +1,53 @@
-const DARK_MODE = "dark";
-const LIGHT_MODE = "light";
-const AUTO_MODE = "auto";
-const THEME = "hugo-geekblog";
+import Storage from "store2"

-const TOGGLE_MODES = [AUTO_MODE, DARK_MODE, LIGHT_MODE];
+import { TOGGLE_MODES, THEME, AUTO_MODE } from "./config.js"

-(applyTheme = function (init = true) {
-  let html = document.documentElement;
-  let currentMode = TOGGLE_MODES.includes(localStorage.getItem(THEME))
-    ? localStorage.getItem(THEME)
-    : AUTO_MODE;
+document.addEventListener("DOMContentLoaded", (event) => {
+  const darkModeToggle = document.getElementById("gblog-dark-mode")

-  html.setAttribute("class", "color-toggle-" + currentMode);
-  localStorage.setItem(THEME, currentMode);
+  darkModeToggle.onclick = function () {
+    let lstore = Storage.namespace(THEME)
+    let currentMode = lstore.get("color-mode")
+    let nextMode = toggle(TOGGLE_MODES, currentMode)
+
+    lstore.set("color-mode", TOGGLE_MODES[nextMode])
+    applyTheme(false)
+  }
+})
+
+export function applyTheme(init = true) {
+  if (Storage.isFake()) return
+
+  let lstore = Storage.namespace(THEME)
+  let html = document.documentElement
+  let currentMode = TOGGLE_MODES.includes(lstore.get("color-mode"))
+    ? lstore.get("color-mode")
+    : AUTO_MODE
+
+  html.setAttribute("class", "color-toggle-" + currentMode)
+  lstore.set("color-mode", currentMode)

  if (currentMode === AUTO_MODE) {
-    html.removeAttribute("color-mode");
+    html.removeAttribute("color-mode")
  } else {
-    html.setAttribute("color-mode", currentMode);
+    html.setAttribute("color-mode", currentMode)
  }

  if (!init) {
-    // Reload required to re-initialise e.g. Mermaid with the new theme and re-parse the Mermaid code blocks.
-    location.reload();
+    // Reload required to re-initialise e.g. Mermaid with the new theme
+    // and re-parse the Mermaid code blocks.
+    location.reload()
  }
-})();
-
-document.addEventListener("DOMContentLoaded", (event) => {
-  const darkModeToggle = document.getElementById("gblog-dark-mode");
-
-  darkModeToggle.onclick = function () {
-    let currentMode = localStorage.getItem(THEME);
-    let nextMode = toggle(TOGGLE_MODES, currentMode);
-
-    localStorage.setItem(THEME, TOGGLE_MODES[nextMode]);
-    applyTheme(false);
-  };
-});
+}

 function toggle(list = [], value) {
-  current = list.indexOf(value);
-  max = list.length - 1;
-  next = 0;
+  let current = list.indexOf(value)
+  let max = list.length - 1
+  let next = 0

  if (current < max) {
-    next = current + 1;
+    next = current + 1
  }

-  return next;
+  return next
 }
--- a/src/js/mermaid-loader.js
+++ b/src/js/mermaid-loader.js
@ -1,23 +0,0 @@
-document.addEventListener("DOMContentLoaded", function (event) {
-  let currentMode = localStorage.getItem(THEME);
-  let darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
-  let primaryColor = "#ececff";
-  let darkMode = false;
-
-  if (
-    currentMode === DARK_MODE ||
-    (currentMode === AUTO_MODE && darkModeQuery.matches)
-  ) {
-    primaryColor = "#6C617E";
-    darkMode = true;
-  }
-
-  mermaid.initialize({
-    flowchart: { useMaxWidth: true },
-    theme: "base",
-    themeVariables: {
-      darkMode: darkMode,
-      primaryColor: primaryColor,
-    },
-  });
-});
--- a/src/js/mermaid.js
+++ b/src/js/mermaid.js
@ -0,0 +1,29 @@
+import Storage from "store2"
+
+import { DARK_MODE, THEME, AUTO_MODE } from "./config.js"
+
+document.addEventListener("DOMContentLoaded", function (event) {
+  let lstore = Storage.namespace(THEME)
+  let currentMode = lstore.get("color-mode")
+  let darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)")
+  let primaryColor = "#ececff"
+  let darkMode = false
+
+  if (currentMode === DARK_MODE || (currentMode === AUTO_MODE && darkModeQuery.matches)) {
+    primaryColor = "#6C617E"
+    darkMode = true
+  }
+
+  import("mermaid")
+    .then(({ default: md }) => {
+      md.initialize({
+        flowchart: { useMaxWidth: true },
+        theme: "base",
+        themeVariables: {
+          darkMode: darkMode,
+          primaryColor: primaryColor
+        }
+      })
+    })
+    .catch((error) => console.error(error))
+})
--- a/src/sass/_base.scss
+++ b/src/sass/_base.scss
@ -134,6 +134,11 @@ a {
  }
 }

+i.gblog-icon {
+  font-family: "GeekblogIcons";
+  font-style: normal;
+}
+
 img {
  vertical-align: middle;
 }
@ -320,11 +325,6 @@ img {
      background: var(--link-color);
      color: $gray-100;
    }
-
-    a:after {
-      font-family: GeekblogIcons;
-      content: "\ea02";
-    }
  }

  &__tag {
@ -488,10 +488,7 @@ img {
  color: $gray-100;

  .fake-link {
-    background-image: linear-gradient(
-      var(--footer-link-color),
-      var(--footer-link-color)
-    );
+    background-image: linear-gradient(var(--footer-link-color), var(--footer-link-color));
  }

  &__item {
@ -535,22 +532,10 @@ img {

    &--next {
      text-align: right;
-
-      a:after {
-        font-family: GeekblogIcons;
-        content: "\ea17";
-        margin-top: -0.125em;
-      }
    }

    &--prev {
      text-align: left;
-
-      a::before {
-        font-family: GeekblogIcons;
-        content: "\ea18";
-        margin-top: -0.125em;
-      }
    }
  }
 }
--- a/src/sass/_defaults.scss
+++ b/src/sass/_defaults.scss
@ -56,10 +56,7 @@ $main-color: rgba(65, 134, 201, 1) !default;
 $second-color: rgba(47, 51, 62, 1) !default;
 $mark-color: rgba(255, 171, 0, 1) !default;

-$body-background-dark: mix(
-  invert($body-background, 75%),
-  $second-color
-) !default;
+$body-background-dark: mix(invert($body-background, 75%), $second-color) !default;
 $link-color-dark: rgba(110, 168, 212, 1) !default;
 $link-color-visited-dark: rgba(186, 142, 240) !default;

@ -76,5 +73,5 @@ $hint-colors: (
  info: rgba(0, 145, 234, 1),
  ok: rgba(0, 200, 83, 1),
  warning: rgba(255, 171, 0, 1),
-  danger: rgba(213, 0, 0, 1),
+  danger: rgba(213, 0, 0, 1)
 ) !default;
--- a/src/sass/_fonts.scss
+++ b/src/sass/_fonts.scss
@ -45,8 +45,7 @@

@font-face {
  font-family: "Metropolis";
-  src: url("fonts/Metropolis.woff2") format("woff2"),
-    url("fonts/Metropolis.woff") format("woff");
+  src: url("fonts/Metropolis.woff2") format("woff2"), url("fonts/Metropolis.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
--- a/src/static/brand.svg
+++ b/src/static/brand.svg
--- a/src/static/custom.css
+++ b/src/static/custom.css
--- a/src/static/favicon/favicon.svg
+++ b/src/static/favicon/favicon.svg
--- a/src/static/fonts/LiberationMono.woff
+++ b/src/static/fonts/LiberationMono.woff
--- a/src/static/fonts/LiberationMono.woff2
+++ b/src/static/fonts/LiberationMono.woff2
--- a/src/static/fonts/LiberationSans-Bold.woff
+++ b/src/static/fonts/LiberationSans-Bold.woff
--- a/src/static/fonts/LiberationSans-Bold.woff2
+++ b/src/static/fonts/LiberationSans-Bold.woff2
--- a/src/static/fonts/LiberationSans-BoldItalic.woff
+++ b/src/static/fonts/LiberationSans-BoldItalic.woff
--- a/src/static/fonts/LiberationSans-BoldItalic.woff2
+++ b/src/static/fonts/LiberationSans-BoldItalic.woff2
--- a/src/static/fonts/LiberationSans-Italic.woff
+++ b/src/static/fonts/LiberationSans-Italic.woff
--- a/src/static/fonts/LiberationSans-Italic.woff2
+++ b/src/static/fonts/LiberationSans-Italic.woff2
--- a/src/static/fonts/LiberationSans.woff
+++ b/src/static/fonts/LiberationSans.woff
--- a/src/static/fonts/LiberationSans.woff2
+++ b/src/static/fonts/LiberationSans.woff2
--- a/src/static/fonts/Metropolis.woff
+++ b/src/static/fonts/Metropolis.woff
--- a/src/static/fonts/Metropolis.woff2
+++ b/src/static/fonts/Metropolis.woff2
--- a/svgsprite.config.json
+++ b/svgsprite.config.json
@ -0,0 +1,30 @@
+{
+  "shape": {
+    "id": {
+      "generator": "gblog_%s"
+    },
+    "dimension": {
+      "maxWidth": 22,
+      "maxHeight": 22,
+      "attributes": false
+    },
+    "spacing": {
+      "padding": 5,
+      "box": "content"
+    },
+    "dest": "build/icons"
+  },
+  "svg": {
+    "xmlDeclaration": false,
+    "rootAttributes": {
+      "class": "svg-sprite"
+    }
+  },
+  "mode": {
+    "defs": {
+      "dest": "build/sprites/",
+      "sprite": "geekblog.svg",
+      "bust": false
+    }
+  }
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,117 @@
+const path = require("path")
+
+const WebpackAssetsManifest = require("webpack-assets-manifest")
+const FaviconsWebpackPlugin = require("favicons-webpack-plugin")
+const RemoveEmptyScriptsPlugin = require("webpack-remove-empty-scripts")
+const CopyPlugin = require("copy-webpack-plugin")
+
+var config = {
+  entry: {
+    css: [
+      path.resolve("src", "sass", "main.scss"),
+      path.resolve("src", "sass", "mobile.scss"),
+      path.resolve("src", "sass", "print.scss")
+    ],
+    bundle: path.resolve("src", "js", "app.js"),
+    mermaid: path.resolve("src", "js", "mermaid.js")
+  },
+  output: {
+    filename: "js/[name].bundle.min.js",
+    chunkFilename: "js/[name].chunk.min.js",
+    path: path.join(__dirname, "static"),
+    publicPath: "/",
+    clean: true
+  },
+  watchOptions: {
+    ignored: ["/exampleSite/", "/node_modules/"]
+  },
+  plugins: [
+    new RemoveEmptyScriptsPlugin(),
+
+    new CopyPlugin({
+      patterns: [
+        {
+          from: "**/*",
+          context: path.resolve(__dirname, "src", "static")
+        },
+        {
+          from: "fonts/*.{woff,woff2}",
+          context: path.resolve(__dirname, "build")
+        },
+        {
+          from: "sprites/*.svg",
+          to: path.resolve(__dirname, "assets"),
+          context: path.resolve(__dirname, "build")
+        }
+      ]
+    }),
+
+    new WebpackAssetsManifest({
+      output: "../data/assets.json",
+      integrity: true,
+      integrityHashes: ["sha512"]
+    }),
+
+    new FaviconsWebpackPlugin({
+      logo: path.resolve("src", "static", "favicon", "favicon.svg"),
+      cache: true,
+      prefix: "favicon/",
+      inject: false,
+      favicons: {
+        background: "#2f333e",
+        theme_color: "#2f333e",
+        icons: {
+          android: { offset: 10 },
+          appleIcon: { offset: 10 },
+          appleStartup: { offset: 10 },
+          favicons: true,
+          windows: { offset: 10 },
+          yandex: false,
+          coast: false
+        }
+      }
+    })
+  ]
+}
+
+module.exports = (env, argv) => {
+  if (argv.mode === "development") {
+    config.devtool = "eval-cheap-source-map"
+  }
+
+  config.module = {
+    rules: [
+      {
+        test: /\.(sa|sc|c)ss$/,
+        exclude: /node_modules/,
+        type: "asset/resource",
+        generator: {
+          filename: "[name]-[contenthash:8].min.css"
+        },
+        use: [
+          {
+            loader: "postcss-loader",
+            options: {
+              postcssOptions: {
+                plugins: ["autoprefixer"]
+              }
+            }
+          },
+          {
+            loader: "sass-loader",
+            options: {
+              sassOptions: {
+                // FIXME: https://github.com/webpack-contrib/sass-loader/issues/962#issuecomment-1002675051
+                sourceMap: argv.mode === "development" ? true : false,
+                sourceMapEmbed: argv.mode === "development" ? true : false,
+                outputStyle: "compressed"
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+
+  return config
+}
				`@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 45.33 45.33"><path d="M31.999 14.035v3.93H7.673l11.134 11.228L16 32 .001 16.001 16 .002l2.807 2.807L7.673 14.037h24.326z"/></svg>`
				`@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-6.67 -6.67 41.33 41.33"><path d="M9.917 24.5a1.75 1.75 0 10-3.501.001 1.75 1.75 0 003.501-.001zm0-21a1.75 1.75 0 10-3.501.001A1.75 1.75 0 009.917 3.5zm11.666 2.333a1.75 1.75 0 10-3.501.001 1.75 1.75 0 003.501-.001zm1.75 0a3.502 3.502 0 01-1.75 3.026c-.055 6.581-4.721 8.039-7.82 9.023-2.898.911-3.846 1.349-3.846 3.117v.474a3.502 3.502 0 011.75 3.026c0 1.932-1.568 3.5-3.5 3.5s-3.5-1.568-3.5-3.5c0-1.294.711-2.424 1.75-3.026V6.526A3.502 3.502 0 014.667 3.5c0-1.932 1.568-3.5 3.5-3.5s3.5 1.568 3.5 3.5a3.502 3.502 0 01-1.75 3.026v9.06c.93-.456 1.914-.766 2.807-1.039 3.391-1.075 5.323-1.878 5.359-5.687a3.502 3.502 0 01-1.75-3.026c0-1.932 1.568-3.5 3.5-3.5s3.5 1.568 3.5 3.5z"/></svg>