From 37ab1055e7f82fc4f51b7063cbbbacbc38441cf9 Mon Sep 17 00:00:00 2001
From: Served Smart <195884188+servedsmart@users.noreply.github.com>
Date: Wed, 4 Jun 2025 23:51:03 +0200
Subject: [PATCH] :recycle: 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
---
 assets/js/background-blur.js                  | 13 +++++++
 assets/js/fetch-repo.js                       | 30 ++++++++++++++++
 assets/js/page.js                             | 36 ++++++++++---------
 layouts/_default/list.html                    |  6 +---
 layouts/_default/single.html                  |  8 ++---
 layouts/_default/term.html                    |  6 +---
 layouts/_default/terms.html                   |  6 +---
 layouts/partials/header/fixed-fill-blur.html  | 10 ++----
 layouts/partials/header/fixed-gradient.html   | 10 ++----
 layouts/partials/header/fixed.html            | 10 ++----
 layouts/partials/hero/background.html         | 10 ++----
 layouts/partials/hero/thumbAndBackground.html | 10 ++----
 layouts/partials/home/background.html         | 10 ++----
 layouts/shortcodes/codeberg.html              | 18 ++--------
 layouts/shortcodes/forgejo.html               | 18 ++--------
 layouts/shortcodes/gitea.html                 | 18 ++--------
 layouts/shortcodes/github.html                | 18 ++--------
 layouts/shortcodes/gitlab.html                | 18 ++--------
 18 files changed, 100 insertions(+), 155 deletions(-)
 create mode 100644 assets/js/background-blur.js
 create mode 100644 assets/js/fetch-repo.js

diff --git a/assets/js/background-blur.js b/assets/js/background-blur.js
new file mode 100644
index 00000000..bf42aa58
--- /dev/null
+++ 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();
diff --git a/assets/js/fetch-repo.js b/assets/js/fetch-repo.js
new file mode 100644
index 00000000..c7ad744e
--- /dev/null
+++ 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();
diff --git a/assets/js/page.js b/assets/js/page.js
index e3cb9794..0aef831e 100644
--- 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)
     }
-}
\ No newline at end of file
+}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index d236e9b0..6533b347 100644
--- 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 -}}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 6c49cb42..c16b4aae 100644
--- 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>
diff --git a/layouts/_default/term.html b/layouts/_default/term.html
index e8448aa1..40c8cd04 100644
--- 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>
 
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
index 510f24ed..85b6ab73 100644
--- 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 }}
diff --git a/layouts/partials/header/fixed-fill-blur.html b/layouts/partials/header/fixed-fill-blur.html
index 02160bfe..1a0ceb01 100644
--- 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>
diff --git a/layouts/partials/header/fixed-gradient.html b/layouts/partials/header/fixed-gradient.html
index 2e1301a4..6d8b95ee 100644
--- 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>
diff --git a/layouts/partials/header/fixed.html b/layouts/partials/header/fixed.html
index eee26d9d..7f1d8c4b 100644
--- 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>
diff --git a/layouts/partials/hero/background.html b/layouts/partials/hero/background.html
index 66799507..c3adf2e0 100644
--- 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 -}}
diff --git a/layouts/partials/hero/thumbAndBackground.html b/layouts/partials/hero/thumbAndBackground.html
index 036ab514..d4cff87b 100644
--- 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 }}
 
diff --git a/layouts/partials/home/background.html b/layouts/partials/home/background.html
index 7bba6103..c011d816 100644
--- 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 }}
diff --git a/layouts/shortcodes/codeberg.html b/layouts/shortcodes/codeberg.html
index 49fe7380..13763044 100644
--- 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 -}}
diff --git a/layouts/shortcodes/forgejo.html b/layouts/shortcodes/forgejo.html
index 6bd3de2b..21c61354 100644
--- 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 -}}
diff --git a/layouts/shortcodes/gitea.html b/layouts/shortcodes/gitea.html
index 23bcb874..30dd6162 100644
--- 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 -}}
diff --git a/layouts/shortcodes/github.html b/layouts/shortcodes/github.html
index 02b9f84d..dfcfaf36 100644
--- 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 -}}
 
diff --git a/layouts/shortcodes/gitlab.html b/layouts/shortcodes/gitlab.html
index 3bdcd2c7..2467f9e0 100644
--- 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 -}}