Make the source of the static assets configurable

- Easy to switch between different CDN - Allow self-host static assets
2022-02-09 22:32:50 +08:00 · 2022-02-09 22:32:50 +08:00 · 3685685b28
parent 51688ccc9f
commit 3685685b28
15 changed files with 240 additions and 53 deletions
--- a/_config.yml
+++ b/_config.yml
@ -53,7 +53,7 @@ social:
 google_site_verification:               # fill in to your verification string

 # ↑ --------------------------
-
+# The end of `jekyll-seo-tag` settings

 google_analytics:
  id:                 # fill in your Google Analytics ID
@ -98,6 +98,14 @@ comments:
    repo:         # <gh-username>/<repo>
    issue_term:   # < url | pathname | title | ...>

+# Self-hosted static assets, optional › https://github.com/cotes2020/chirpy-static-assets
+assets:
+  self_host:
+    enabled:      # boolean, keep empty means false
+    # specify the Jekyll environment, empty means both
+    # only works if `assets.self_host.enabled` is 'true'
+    env:          # [development|production]
+
 paginate: 10

 # ------------ The following options are not recommended to be modified ------------------
--- a/_data/assets/cross_origin.yml
+++ b/_data/assets/cross_origin.yml
@ -0,0 +1,65 @@
+# CDNs
+
+cdns:
+  # Google Fonts
+  - url: https://fonts.googleapis.com
+  - url: https://fonts.gstatic.com
+    args: crossorigin
+  - url: https://fonts.googleapis.com
+  # jsDelivr CDN
+  - url: https://cdn.jsdelivr.net
+
+# fonts
+
+webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;700;900&display=swap
+
+# Libraries
+
+jquery:
+  js: https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
+
+bootstrap:
+  css: https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css
+  js: https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.bundle.min.js
+
+bootstrap-toc:
+  css: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.css
+  js: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js
+
+fontawesome:
+  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css
+
+search:
+  js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js
+
+mermaid:
+  js: https://cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
+
+dayjs:
+  js:
+    common: https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js
+    locale: https://cdn.jsdelivr.net/npm/dayjs@1/locale/:LOCALE.min.js
+    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.min.js
+    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/localizedFormat.min.js
+
+countup:
+  js: https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js
+
+magnific-popup:
+  css: https://cdn.jsdelivr.net/npm/magnific-popup@1/dist/magnific-popup.min.css
+  js: https://cdn.jsdelivr.net/npm/magnific-popup@1/dist/jquery.magnific-popup.min.js
+
+lozad:
+  js: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
+
+clipboard:
+  js:  https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js
+
+polyfill:
+  js: https://polyfill.io/v3/polyfill.min.js?features=es6
+
+mathjax:
+  js: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js
+
+utterances:
+  js: https://utteranc.es/client.js
--- a/_data/assets/self_host.yml
+++ b/_data/assets/self_host.yml
@ -0,0 +1,54 @@
+# fonts
+
+webfonts: /assets/lib/fonts/main.css
+
+# Libraries
+
+jquery:
+  js: /assets/lib/jquery-3.6.0/jquery.min.js
+
+bootstrap:
+  css: /assets/lib/bootstrap-4.6.1/bootstrap.min.css
+  js: /assets/lib/bootstrap-4.6.1/bootstrap.bundle.min.js
+
+bootstrap-toc:
+  css: /assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css
+  js: /assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js
+
+fontawesome:
+  css: /assets/lib/fontawesome-free-5.15.4/css/all.min.css
+
+search:
+  js: /assets/lib/simple-jekyll-search-1.10.0/simple-jekyll-search.min.js
+
+mermaid:
+  js: /assets/lib/mermaid-8.13.10/mermaid.min.js
+
+dayjs:
+  js:
+    common: /assets/lib/dayjs-1.10.7/dayjs.min.js
+    locale: /assets/lib/dayjs-1.10.7/locale/en.min.js
+    relativeTime: /assets/lib/dayjs-1.10.7/plugin/relativeTime.min.js
+    localizedFormat: /assets/lib/dayjs-1.10.7/plugin/localizedFormat.min.js
+
+countup:
+  js: /assets/lib/countup.js-1.9.3/countUp.min.js
+
+magnific-popup:
+  css: /assets/lib/magnific-popup-1.1.0/magnific-popup.css
+  js: /assets/lib/magnific-popup-1.1.0/jquery.magnific-popup.min.js
+
+lozad:
+  js: /assets/lib/lozad-1.16.0/lozad.min.js
+
+clipboard:
+  js: /assets/lib/clipboard-2.0.9/clipboard.min.js
+
+polyfill:
+  js: /assets/lib/polyfill-v3-es6/polyfill.min.js
+
+mathjax:
+  js: /assets/lib/mathjax-3.2.0/tex-chtml.js
+
+utterances:
+  js: /assets/lib/utterances/client.js
--- a/_includes/assets-origin.html
+++ b/_includes/assets-origin.html
@ -0,0 +1,12 @@
+{% comment %} Site static assets origin {% endcomment %}
+{% assign origin = 'cross_origin' %}
+
+{% if site.assets.self_host.enabled %}
+  {% if site.assets.self_host.env %}
+    {% if site.assets.self_host.env == jekyll.environment %}
+      {% assign origin = 'self_host' %}
+    {% endif %}
+  {% else %}
+    {% assign origin = 'self_host' %}
+  {% endif %}
+{% endif %}
--- a/_includes/comments/utterances.html
+++ b/_includes/comments/utterances.html
@ -1,5 +1,5 @@
 <!-- https://utteranc.es/ -->
-<script src="https://utteranc.es/client.js"
+<script src="{{ site.data.assets[origin].utterances.js }}"
        repo="{{ site.comments.utterances.repo }}"
        issue-term="{{ site.comments.utterances.issue_term }}"
        crossorigin="anonymous"
--- a/_includes/css-selector.html
+++ b/_includes/css-selector.html
@ -1,15 +0,0 @@
-<!--
-  CSS selector for site.
-->
-
-<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
-
-{% if site.toc and page.toc %}
-  <link rel="stylesheet"
-    href="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.css">
-{% endif %}
-
-{% if page.layout == 'page' or page.layout == 'post' %}
-  <!-- Manific Popup -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css">
-{% endif %}
--- a/_includes/head.html
+++ b/_includes/head.html
@ -34,9 +34,20 @@

  {% include favicons.html %}

-  <!-- Google Fonts -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
-  <link rel="dns-prefetch" href="https://fonts.gstatic.com">
+  {% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %}
+
+    <link href="{{ site.data.assets[origin].webfonts | relative_url }}" rel="stylesheet">
+
+  {% else %}
+
+    {% for cdn in site.data.assets[origin].cdns %}
+      <link rel="preconnect" href="{{ cdn.url }}" {{ cdn.args }}>
+      <link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}>
+    {% endfor %}
+
+    <link rel="stylesheet" href="{{ site.data.assets[origin].webfonts }}">
+
+  {% endif %}

  <!-- GA -->
  {% if jekyll.environment == 'production'
@ -49,27 +60,31 @@

    {% if site.google_analytics.pv.proxy_endpoint %}
      {% assign proxy_url = site.google_analytics.pv.proxy_endpoint
-        | replace: "https://", "" | split: "/" | first | prepend: "https://" %}
-
+          | replace: "https://", "" | split: "/" | first | prepend: "https://" %}
      <link rel="preconnect" href="{{ proxy_url }}" crossorigin="use-credentials">
      <link rel="dns-prefetch" href="{{ proxy_url }}">
    {% endif %}
  {% endif %}

-  <!-- jsDelivr CDN -->
-  <link rel="preconnect" href="https://cdn.jsdelivr.net">
-  <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
-
  <!-- Bootstrap -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
+  <link rel="stylesheet" href="{{ site.data.assets[origin].bootstrap.css }}">

  <!-- Font Awesome -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css">
+  <link rel="stylesheet" href="{{ site.data.assets[origin].fontawesome.css }}">

-  {% include css-selector.html %}
+  <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
+
+  {% if site.toc and page.toc %}
+    <link rel="stylesheet" href="{{ site.data.assets[origin].bootstrap-toc.css }}">
+  {% endif %}
+
+  {% if page.layout == 'page' or page.layout == 'post' %}
+    <!-- Manific Popup -->
+    <link rel="stylesheet" href="{{ site.data.assets[origin].magnific-popup.css }}">
+  {% endif %}

  <!-- JavaScript -->

-  <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
+  <script src="{{ site.data.assets[origin].jquery.js }}"></script>

 </head>
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@ -7,21 +7,27 @@
 {% if page.layout == 'post' %}
  {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
    <!-- pv-report needs countup.js -->
-    <script async src="https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js"></script>
+    <script async src="{{ site.data.assets[origin].countup.js }}"></script>
    <script defer src="{{ '/assets/js/dist/pvreport.min.js' | relative_url }}"></script>
  {% endif %}
 {% endif %}

 {% if page.layout == 'post' or page.layout == 'page' %}
-  <!-- image lazy-loading & popup -->
-  <script src="https://cdn.jsdelivr.net/combine/npm/lozad/dist/lozad.min.js,npm/magnific-popup@1/dist/jquery.magnific-popup.min.js,npm/clipboard@2/dist/clipboard.min.js"></script>
+  <!-- image lazy-loading & popup & clipboard -->
+  {% assign _urls = site.data.assets[origin].magnific-popup.js
+      | append: ',' | append: site.data.assets[origin].lozad.js
+      | append: ',' | append: site.data.assets[origin].clipboard.js
+  %}
+
+  {% include jsdelivr-combine.html urls=_urls %}
+
 {% endif %}

 {% if page.layout == 'home'
-      or page.layout == 'post'
-      or page.layout == 'archives'
-      or page.layout == 'category'
-      or page.layout == 'tag' %}
+    or page.layout == 'post'
+    or page.layout == 'archives'
+    or page.layout == 'category'
+    or page.layout == 'tag' %}

  {% if site.prefer_datetime_locale %}
    {% assign locale = site.prefer_datetime_locale | downcase %}
@ -29,24 +35,32 @@
    {% assign locale = site.lang | split: '-' | first %}
  {% endif %}

-  <script src="https://cdn.jsdelivr.net/combine/npm/dayjs@1,npm/dayjs@1/locale/{{ locale }}.min.js,npm/dayjs@1/plugin/relativeTime.min.js,npm/dayjs@1/plugin/localizedFormat.min.js"></script>
+  {% assign _urls = site.data.assets[origin].dayjs.js.common
+      | append: ',' | append: site.data.assets[origin].dayjs.js.locale
+      | replace: ':LOCALE', locale
+      | append: ',' | append: site.data.assets[origin].dayjs.js.relativeTime
+      | append: ',' | append: site.data.assets[origin].dayjs.js.localizedFormat
+  %}
+
+  {% include jsdelivr-combine.html urls=_urls %}
+
 {% endif %}

 {% if page.layout == 'home'
-      or page.layout == 'categories'
-      or page.layout == 'post'
-      or page.layout == 'page' %}
+    or page.layout == 'categories'
+    or page.layout == 'post'
+    or page.layout == 'page' %}
  {% assign type = page.layout %}
 {% elsif page.layout == 'archives'
-      or page.layout == 'category'
-      or page.layout == 'tag' %}
+    or page.layout == 'category'
+    or page.layout == 'tag' %}
  {% assign type = "misc" %}
 {% else %}
  {% assign type = "commons" %}
 {% endif %}

-{% assign js = type | prepend: '/assets/js/dist/' | append: '.min.js' %}
-<script defer src="{{ js | relative_url }}"></script>
+{% capture script %}/assets/js/dist/{{ type }}.min.js{% endcapture %}
+<script defer src="{{ script | relative_url }}"></script>

 {% if page.math %}
  <!-- MathJax -->
@ -65,15 +79,14 @@
    }
  };
  </script>
-  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-  <script type="text/javascript" id="MathJax-script" async
-    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
+  <script src="{{ site.data.assets[origin].polyfill.js }}"></script>
+  <script id="MathJax-script" async src="{{ site.data.assets[origin].mathjax.js }}">
  </script>
 {% endif %}

 <!-- commons -->

-<script src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.16.1,npm/bootstrap@4/dist/js/bootstrap.min.js"></script>
+<script src="{{ site.data.assets[origin].bootstrap.js }}"></script>

 {% if jekyll.environment == 'production' %}
  <!-- PWA -->
--- a/_includes/jsdelivr-combine.html
+++ b/_includes/jsdelivr-combine.html
@ -0,0 +1,32 @@
+{% assign urls = include.urls | split: ',' %}
+
+{% assign combined_urls = nil %}
+
+{% assign domain = 'https://cdn.jsdelivr.net/' %}
+
+{% for url in urls %}
+
+  {% if url contains domain %}
+    {% assign url_snippet = url | slice: domain.size, url.size %}
+
+    {% if combined_urls %}
+      {% assign combined_urls = combined_urls | append: ',' | append: url_snippet %}
+    {% else %}
+      {% assign combined_urls = domain | append: 'combine/' | append: url_snippet %}
+    {% endif %}
+
+  {% elsif url contains '//' %}
+
+    <script src="{{ url }}"></script>
+
+  {% else %}
+
+    <script src="{{ url | relative_url }}"></script>
+
+  {% endif %}
+
+{% endfor %}
+
+{% if combined_urls %}
+  <script src="{{ combined_urls }}"></script>
+{% endif %}
--- a/_includes/mermaid.html
+++ b/_includes/mermaid.html
@ -2,7 +2,7 @@
  mermaid-js loader
 -->

-<script src="https://cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js"></script>
+<script src="{{ site.data.assets[origin].mermaid.js }}"></script>

 <script>
  $(function() {
--- a/_includes/search-loader.html
+++ b/_includes/search-loader.html
@ -16,7 +16,7 @@

 {% capture not_found %}<p class="mt-5">{{ site.data.locales[lang].search.no_results }}</p>{% endcapture %}

-<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js"></script>
+<script src="{{ site.data.assets[origin].search.js }}"></script>

 <script>
 SimpleJekyllSearch({
--- a/_includes/toc.html
+++ b/_includes/toc.html
@ -7,7 +7,7 @@

 {% if enable_toc %}
 <!-- BS-toc.js will be loaded at medium priority -->
-<script src="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js"></script>
+<script src="{{ site.data.assets[origin].bootstrap-toc.js }}"></script>

 <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
  <div class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[lang].panel.toc -}}</div>
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -7,6 +7,8 @@ layout: compress

 {% include lang.html %}

+{% include assets-origin.html %}
+
 {% capture prefer_mode %}
  {% if site.theme_mode %}
    data-mode="{{ site.theme_mode }}"
--- a/_layouts/page.html
+++ b/_layouts/page.html
@ -4,6 +4,8 @@ layout: default

 {% include lang.html %}

+{% include assets-origin.html %}
+
 <div class="row">

  <!-- core -->
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@ -1,7 +1,6 @@
 /*
  The common styles
 */
-@import url('https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap');

 html {
  @media (prefers-color-scheme: light) {