♻️ refactor: Move similar javascript inline code out of line

- Move variables oid, oid_likes out of line - Move background-blur out of line - Move fetch-repo code out of line
2025-12-05 14:17:50 +08:00 · 2025-06-04 23:51:03 +02:00
parent 8387c6ea0a
commit 37ab1055e7
18 changed files with 100 additions and 155 deletions
--- a/assets/js/background-blur.js
+++ b/assets/js/background-blur.js
@@ -0,0 +1,13 @@
+function backgroundBlur() {
+  const script = document.currentScript;
+  const targetId = script && script.getAttribute("data-target-id") ? script.getAttribute("data-target-id")
+    : (console.error("data-target-id is null"), null);
+
+  window.addEventListener("scroll", () => {
+    const scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+    const backgroundBlur = document.getElementById(targetId);
+    backgroundBlur.style.opacity = scroll / 300;
+  });
+}
+
+backgroundBlur();
--- a/assets/js/fetch-repo.js
+++ b/assets/js/fetch-repo.js
@@ -0,0 +1,30 @@
+function fetchRepo() {
+  const script = document.currentScript;
+  const repoURL = script && script.getAttribute("data-url") ? script.getAttribute("data-url")
+    : (console.error("data-url is null"), null);
+  const repoId = script && script.getAttribute("data-id") ? script.getAttribute("data-id")
+    : (console.error("data-id is null"), null);
+  const requestObjects =
+    repoId.startsWith("github") ? ["full_name", "description", "stargazers_count", "forks"]
+    : repoId.startsWith("gitlab") ? ["name_with_namespace", "description", "star_count", "forks_count"]
+    : ["full_name", "description", "stars_count", "forks_count"];
+  fetch(repoURL, {
+    headers: new Headers({
+      "User-agent": "Mozilla/4.0 Custom User Agent"
+    })
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      requestObjects.forEach((requestObject) => {
+        let element = document.getElementById(`${repoId}-${requestObject}`);
+        if (requestObject === "stargazers_count" && repoId.startsWith("github")) {
+            element = document.getElementById(`${repoId}-stargazers`);
+        }
+        element ? (element.innerHTML = data[requestObject])
+          : (console.error(`element.innerHTML for '${repoId}-${requestObject}' is null`), null);
+      });
+    })
+    .catch((error) => console.error(error));
+}
+
+fetchRepo();
--- a/assets/js/page.js
+++ b/assets/js/page.js
@@ -1,15 +1,17 @@
-var liked_page = false
-var id = oid ? oid.replaceAll("/", "-") : oid
-var id_likes = oid_likes ? oid_likes.replaceAll("/", "-") : oid_likes
+const pageScriptElement = document.currentScript;
+const oid = pageScriptElement && pageScriptElement.getAttribute("data-oid") ? pageScriptElement.getAttribute("data-oid") : (console.error("data-oid is null"), null);
+const oid_likes = pageScriptElement && pageScriptElement.getAttribute("data-oid-likes") ? pageScriptElement.getAttribute("data-oid-likes") : (console.error("data-oid-likes is null"), null);
+const liked_page = false;
+const id = oid ? oid.replaceAll("/", "-") : oid;
+const id_likes = oid_likes ? oid_likes.replaceAll("/", "-") : oid_likes;

-if (typeof auth !== 'undefined') {
-    
-    var viewed = localStorage.getItem(id);
+if (typeof auth !== "undefined") {
+  const viewed = localStorage.getItem(id);

    if (!viewed) {
        auth.signInAnonymously()
            .then(() => {
-                var docRef = db.collection('views').doc(id)
+                const docRef = db.collection('views').doc(id)
                localStorage.setItem(id, true);
                docRef.get().then((doc) => {
                    if (doc.exists) {
@@ -24,13 +26,13 @@ if (typeof auth !== 'undefined') {
                });
            })
            .catch((error) => {
-                var errorCode = error.code;
-                var errorMessage = error.message;
+                const errorCode = error.code;
+                const errorMessage = error.message;
                console.error(errorCode, errorMessage)
            });
    }

-    var liked = localStorage.getItem(id_likes);
+    const liked = localStorage.getItem(id_likes);

    if (liked) {
        liked_page = true
@@ -44,7 +46,7 @@ if (typeof auth !== 'undefined') {
 function like_article(id_likes) {
    auth.signInAnonymously()
        .then(() => {
-            var docRef = db.collection('likes').doc(id_likes)
+            const docRef = db.collection('likes').doc(id_likes)
            docRef.get().then((doc) => {
                liked_page = true
                localStorage.setItem(id_likes, true);
@@ -63,8 +65,8 @@ function like_article(id_likes) {
            });
        })
        .catch((error) => {
-            var errorCode = error.code;
-            var errorMessage = error.message;
+            const errorCode = error.code;
+            const errorMessage = error.message;
            console.error(errorCode, errorMessage)
        });
 }
@@ -72,7 +74,7 @@ function like_article(id_likes) {
 function remove_like_article(id_likes) {
    auth.signInAnonymously()
        .then(() => {
-            var docRef = db.collection('likes').doc(id_likes)
+            const docRef = db.collection('likes').doc(id_likes)
            docRef.get().then((doc) => {
                liked_page = false
                localStorage.removeItem(id_likes);
@@ -91,8 +93,8 @@ function remove_like_article(id_likes) {
            });
        })
        .catch((error) => {
-            var errorCode = error.code;
-            var errorMessage = error.message;
+            const errorCode = error.code;
+            const errorMessage = error.message;
            console.error(errorCode, errorMessage)
        });
 }
@@ -103,4 +105,4 @@ function process_article() {
    } else {
        remove_like_article(id_likes)
    }
-}
+}
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -26,13 +26,9 @@
      {{ $lang := print "."  .Lang  ".md" }}
      {{ $path = replace $path $lang ".md" }}
    {{end}}
-  <script>
-    var oid = "views_{{ $path }}"
-    var oid_likes = "likes_{{ $path }}"
-  </script>
  {{ $jsPage := resources.Get "js/page.js" }}
  {{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
-  <script type="text/javascript" src="{{ $jsPage.RelPermalink }}" integrity="{{ $jsPage.Data.Integrity }}"></script>
+  <script type="text/javascript" src="{{ $jsPage.RelPermalink }}" integrity="{{ $jsPage.Data.Integrity }}" data-oid="views_{{ $path }}" data-oid-likes="likes_{{ $path }}"></script>
  {{ end }}
  </header>
  <section class="{{ if $toc -}}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -132,7 +132,7 @@
        {{ partial "sharing-links.html" . }}
        {{ partial "related.html" . }}  
      </div>
-     
+
      {{ $translations := .AllTranslations }}
      {{ with .File }}
        {{ $path := .Path }}
@@ -140,13 +140,9 @@
          {{ $lang := print "."  .Lang  ".md" }}
          {{ $path = replace $path $lang ".md" }}
        {{end}}
-      <script>
-        var oid = "views_{{ $path }}"
-        var oid_likes = "likes_{{ $path }}"
-      </script>
      {{ $jsPage := resources.Get "js/page.js" }}
      {{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
-      <script type="text/javascript" src="{{ $jsPage.RelPermalink }}" integrity="{{ $jsPage.Data.Integrity }}"></script>
+      <script type="text/javascript" src="{{ $jsPage.RelPermalink }}" integrity="{{ $jsPage.Data.Integrity }}" data-oid="views_{{ $path }}" data-oid-likes="likes_{{ $path }}"></script>
      {{ end }}
  
    </section>
--- a/layouts/_default/term.html
+++ b/layouts/_default/term.html
@@ -26,13 +26,9 @@
    <div class="min-w-0 min-h-0 max-w-prose">
      {{ .Content }}
    </div>
-    <script>
-      var oid = "views_term_{{ .Data.Term }}"
-      var oid_likes = "likes_term_{{ .Data.Term }}"
-    </script>
    {{ $jsPage := resources.Get "js/page.js" }}
    {{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
-    <script type="text/javascript" src="{{ $jsPage.RelPermalink }}" integrity="{{ $jsPage.Data.Integrity }}"></script>
+    <script type="text/javascript" src="{{ $jsPage.RelPermalink }}" integrity="{{ $jsPage.Data.Integrity }}" data-oid="views_term_{{ .Data.Term }}" data-oid-likes="likes_term_{{ .Data.Term }}"></script>
    {{ end }}
  </section>

--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@@ -28,13 +28,9 @@
        {{ .Content }}
      </div>
    </section>
-  <script>
-    var oid = "views_taxonomy_{{ .Data.Plural }}"
-    var oid_likes = "likes_taxonomy_{{ .Data.Plural }}"
-  </script>
  {{ $jsPage := resources.Get "js/page.js" }}
  {{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
-  <script type="text/javascript" src="{{ $jsPage.RelPermalink }}" integrity="{{ $jsPage.Data.Integrity }}"></script>
+  <script type="text/javascript" src="{{ $jsPage.RelPermalink }}" integrity="{{ $jsPage.Data.Integrity }}" data-oid="views_taxonomy_{{ .Data.Plural }}" data-oid-likes="likes_taxonomy_{{ .Data.Plural }}"></script>
  {{ end }}

  {{ if .Site.Params.taxonomy.cardView }}
--- a/layouts/partials/header/fixed-fill-blur.html
+++ b/layouts/partials/header/fixed-fill-blur.html
@@ -5,10 +5,6 @@
    {{ partial "header/basic.html" . }}
  </div>
 </div>
-<script>
-  window.addEventListener('scroll', function (e) {
-    var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-    var background_blur = document.getElementById('menu-blur');
-    background_blur.style.opacity = (scroll / 300);
-  });
-</script>
+{{ $backgroundBlur := resources.Get "js/background-blur.js" }}
+{{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
+<script type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}" data-target-id="menu-blur"></script>
--- a/layouts/partials/header/fixed-gradient.html
+++ b/layouts/partials/header/fixed-gradient.html
@@ -6,10 +6,6 @@
    {{ partial "header/basic.html" . }}
  </div>
 </div>
-<script>
-  window.addEventListener('scroll', function (e) {
-    var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-    var background_blur = document.getElementById('menu-blur');
-    background_blur.style.opacity = (scroll / 300);
-  });
-</script>
+{{ $backgroundBlur := resources.Get "js/background-blur.js" }}
+{{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
+<script type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}" data-target-id="menu-blur"></script>
--- a/layouts/partials/header/fixed.html
+++ b/layouts/partials/header/fixed.html
@@ -5,10 +5,6 @@
    {{ partial "header/basic.html" . }}
  </div>
 </div>
-<script>
-  window.addEventListener('scroll', function (e) {
-    var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-    var background_blur = document.getElementById('menu-blur');
-    background_blur.style.opacity = (scroll / 300);
-  });
-</script>
+{{ $backgroundBlur := resources.Get "js/background-blur.js" }}
+{{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
+<script type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}" data-target-id="menu-blur"></script>
--- a/layouts/partials/hero/background.html
+++ b/layouts/partials/hero/background.html
@@ -55,12 +55,8 @@
 </div>
 {{ if $shouldBlur | default false }}
 <div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
-<script>
-    window.addEventListener('scroll', function (e) {
-        var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-        var background_blur = document.getElementById('background-blur');
-        background_blur.style.opacity = (scroll / 300)
-    });
-</script>
+{{ $backgroundBlur := resources.Get "js/background-blur.js" }}
+{{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
+<script type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}" data-target-id="background-blur"></script>
 {{ end }}
 {{- end -}}
--- a/layouts/partials/hero/thumbAndBackground.html
+++ b/layouts/partials/hero/thumbAndBackground.html
@@ -79,12 +79,8 @@

 {{ if $shouldBlur | default false }}
 <div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
-<script>
-    window.addEventListener('scroll', function (e) {
-        var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-        var background_blur = document.getElementById('background-blur');
-        background_blur.style.opacity = (scroll / 300)
-    });
-</script>
+{{ $backgroundBlur := resources.Get "js/background-blur.js" }}
+{{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
+<script type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}" data-target-id="background-blur"></script>
 {{ end }}

--- a/layouts/partials/home/background.html
+++ b/layouts/partials/home/background.html
@@ -78,11 +78,7 @@
 </section>
 {{ if .Site.Params.homepage.layoutBackgroundBlur | default false }}
 <div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
-<script>
-    window.addEventListener('scroll', function (e) {
-        var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-        var background_blur = document.getElementById('background-blur');
-        background_blur.style.opacity = (scroll / 300)
-    });
-</script>
+{{ $backgroundBlur := resources.Get "js/background-blur.js" }}
+{{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
+<script type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}" data-target-id="background-blur"></script>
 {{ end }}
--- a/layouts/shortcodes/codeberg.html
+++ b/layouts/shortcodes/codeberg.html
@@ -49,21 +49,9 @@
    </div>

  </div>
-  <script>
-    fetch({{ $codebergURL }}, {
-      headers: new Headers({
-        'User-agent': 'Mozilla/4.0 Custom User Agent'
-      })
-    })
-      .then(response => response.json())
-      .then(data => {
-        document.getElementById('{{ $id }}-full_name').innerHTML = data.full_name;
-        document.getElementById('{{ $id }}-description').innerHTML = data.description;
-        document.getElementById('{{ $id }}-stars_count').innerHTML = data.stars_count;
-        document.getElementById('{{ $id }}-forks_count').innerHTML = data.forks_count;
-      })
-      .catch(error => console.error(error))
-  </script>
+  {{ $fetchRepo := resources.Get "js/fetch-repo.js" }}
+  {{ $fetchRepo = $fetchRepo | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
+  <script type="text/javascript" src="{{ $fetchRepo.RelPermalink }}" integrity="{{ $fetchRepo.Data.Integrity }}" data-url="{{ $codebergURL }}" data-id="{{ $id }}"></script>
 </a>
 </div>
 {{- end -}}
--- a/layouts/shortcodes/forgejo.html
+++ b/layouts/shortcodes/forgejo.html
@@ -49,21 +49,9 @@
    </div>

  </div>
-  <script>
-    fetch({{ $forgejoURL }}, {
-      headers: new Headers({
-        'User-agent': 'Mozilla/4.0 Custom User Agent'
-      })
-    })
-      .then(response => response.json())
-      .then(data => {
-        document.getElementById('{{ $id }}-full_name').innerHTML = data.full_name;
-        document.getElementById('{{ $id }}-description').innerHTML = data.description;
-        document.getElementById('{{ $id }}-stars_count').innerHTML = data.stars_count;
-        document.getElementById('{{ $id }}-forks_count').innerHTML = data.forks_count;
-      })
-      .catch(error => console.error(error))
-  </script>
+  {{ $fetchRepo := resources.Get "js/fetch-repo.js" }}
+  {{ $fetchRepo = $fetchRepo | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
+  <script type="text/javascript" src="{{ $fetchRepo.RelPermalink }}" integrity="{{ $fetchRepo.Data.Integrity }}" data-url="{{ $forgejoURL }}" data-id="{{ $id }}"></script>
 </a>
 </div>
 {{- end -}}
--- a/layouts/shortcodes/gitea.html
+++ b/layouts/shortcodes/gitea.html
@@ -49,21 +49,9 @@
    </div>

  </div>
-  <script>
-    fetch({{ $giteaURL }}, {
-      headers: new Headers({
-        'User-agent': 'Mozilla/4.0 Custom User Agent'
-      })
-    })
-      .then(response => response.json())
-      .then(data => {
-        document.getElementById('{{ $id }}-full_name').innerHTML = data.full_name;
-        document.getElementById('{{ $id }}-description').innerHTML = data.description;
-        document.getElementById('{{ $id }}-stars_count').innerHTML = data.stars_count;
-        document.getElementById('{{ $id }}-forks_count').innerHTML = data.forks_count;
-      })
-      .catch(error => console.error(error))
-  </script>
+  {{ $fetchRepo := resources.Get "js/fetch-repo.js" }}
+  {{ $fetchRepo = $fetchRepo | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
+  <script type="text/javascript" src="{{ $fetchRepo.RelPermalink }}" integrity="{{ $fetchRepo.Data.Integrity }}" data-url="{{ $giteaURL }}" data-id="{{ $id }}"></script>
 </a>
 </div>
 {{- end -}}
--- a/layouts/shortcodes/github.html
+++ b/layouts/shortcodes/github.html
@@ -65,21 +65,9 @@
        </div>
      </div>
    </div>
-    <script>
-      fetch({{ $githubURL }}, {
-        headers: new Headers({
-          'User-agent': 'Mozilla/4.0 Custom User Agent'
-        })
-      })
-        .then(response => response.json())
-        .then(data => {
-          document.getElementById('{{ $id }}-full_name').innerHTML = data.full_name;
-          document.getElementById('{{ $id }}-description').innerHTML = data.description;
-          document.getElementById('{{ $id }}-stargazers').innerHTML = data.stargazers_count;
-          document.getElementById('{{ $id }}-forks').innerHTML = data.forks;
-        })
-        .catch(error => console.error(error))
-    </script>
+  {{ $fetchRepo := resources.Get "js/fetch-repo.js" }}
+  {{ $fetchRepo = $fetchRepo | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
+  <script type="text/javascript" src="{{ $fetchRepo.RelPermalink }}" integrity="{{ $fetchRepo.Data.Integrity }}" data-url="{{ $githubURL }}" data-id="{{ $id }}"></script>
  </a>
  {{- end -}}

--- a/layouts/shortcodes/gitlab.html
+++ b/layouts/shortcodes/gitlab.html
@@ -39,21 +39,9 @@
    </div>

  </div>
-  <script>
-    fetch({{ $gitlabURL }}, {
-      headers: new Headers({
-        'User-agent': 'Mozilla/4.0 Custom User Agent'
-      })
-    })
-      .then(response => response.json())
-      .then(data => {
-        document.getElementById('{{ $id }}-name_with_namespace').innerHTML = data.name_with_namespace;
-        document.getElementById('{{ $id }}-description').innerHTML = data.description;
-        document.getElementById('{{ $id }}-star_count').innerHTML = data.star_count;
-        document.getElementById('{{ $id }}-forks_count').innerHTML = data.forks_count;
-      })
-      .catch(error => console.error(error))
-  </script>
+  {{ $fetchRepo := resources.Get "js/fetch-repo.js" }}
+  {{ $fetchRepo = $fetchRepo | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
+  <script type="text/javascript" src="{{ $fetchRepo.RelPermalink }}" integrity="{{ $fetchRepo.Data.Integrity }}" data-url="{{ $gitlabURL }}" data-id="{{ $id }}"></script>
 </a>
 </div>
 {{- end -}}