Merge pull request nunocoracao#1043 from nunocoracao/1023-make-some-s…

…hortcodes-eg-github-card-get-their-information-dynamically ✨ Make GitHub and GitLab shortcodes update dynamically
eread · Nov 2, 2023 · bf3f154 · bf3f154
2 parents 7970651 + c78d68d
commit bf3f154
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 14 deletions.
diff --git a/layouts/shortcodes/github.html b/layouts/shortcodes/github.html
@@ -1,46 +1,67 @@
-{{- $githubData := getJSON (print "https://api.github.com/repos/" (.Get "repo")) -}}
+{{ $id := delimit (slice "github" .Ordinal now.UnixNano) "-" }}
+{{- $githubURL := print "https://api.github.com/repos/" (.Get "repo") -}}
+{{- $githubData := getJSON ($githubURL) -}}
 {{- $githubColors := .Site.Data.githubColors -}}
 {{- with $githubData -}}
 
-<a target="_blank" href="{{ .html_url }}" class="cursor-pointer">
-  <div class="w-full md:w-auto pt-3 p-5 border border-neutral-200 dark:border-neutral-700 border rounded-md backdrop-blur shadow-2xl">
+<a id="{{ $id }}" target="_blank" href="{{ .html_url }}" class="cursor-pointer">
+  <div
+    class="w-full md:w-auto pt-3 p-5 border border-neutral-200 dark:border-neutral-700 border rounded-md backdrop-blur shadow-2xl">
 
     <div class="flex items-center">
       <span class="text-2xl text-neutral-800 dark:text-neutral" style="margin-right:10px;">
         {{ partial "icon.html" "github" }}
       </span>
-      <div class="m-0 font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
+      <div
+        id="{{ $id }}-full_name"
+        class="m-0 font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
         {{ .full_name | markdownify | emojify }}
       </div>
     </div>
 
-    <p class="m-0 mt-2 text-md text-neutral-800 dark:text-neutral">
+    <p id="{{ $id }}-description" class="m-0 mt-2 text-md text-neutral-800 dark:text-neutral">
       {{ .description | markdownify | emojify }}
     </p>
 
     <div class="m-0 mt-2 flex items-center">
-
-      <span class="mr-1 inline-block h-3 w-3 rounded-full" style="background-color: {{ if .language }} {{- index $githubColors .language -}} {{ else }} #0077b6 {{ end }}"></span>
+
+      <span class="mr-1 inline-block h-3 w-3 rounded-full"
+        style="background-color: {{ if .language }} {{- index $githubColors .language -}} {{ else }} #0077b6 {{ end }}"></span>
       <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
         {{ if .language }} {{ .language }} {{ else }} null {{ end }}
       </div>
 
       <span class="text-md mr-1 text-neutral-800 dark:text-neutral">
         {{ partial "icon.html" "star" }}
       </span>
-      <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
+      <div id="{{ $id }}-stargazers" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
         {{ .stargazers_count }}
       </div>
 
       <span class="text-md mr-1 text-neutral-800 dark:text-neutral">
         {{ partial "icon.html" "fork" }}
       </span>
-      <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
+      <div id="{{ $id }}-forks" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
         {{ .forks }}
       </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>
 </a>
 {{- end -}}
diff --git a/layouts/shortcodes/gitlab.html b/layouts/shortcodes/gitlab.html
@@ -1,4 +1,7 @@
-{{- $gitLabData := getJSON (print (default "https://gitlab.com/" (.Get "baseURL")) "api/v4/projects/" (.Get "projectID")) -}}
+{{ $id := delimit (slice "gitlab" .Ordinal now.UnixNano) "-" }}
+{{- $gitlabURL := print (default "https://gitlab.com/" (.Get "baseURL")) "api/v4/projects/" (.Get "projectID") -}}
+
+{{- $gitLabData := getJSON ($gitlabURL) -}}
 {{- with $gitLabData -}}
 
 <a target="_blank" href="{{ .html_url }}" class="cursor-pointer">
@@ -8,32 +11,49 @@
       <span class="text-2xl text-neutral-800 dark:text-neutral" style="margin-right:10px;">
         {{ partial "icon.html" "gitlab" }}
       </span>
-      <div class="m-0 font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
+      <div id="{{ $id }}-name_with_namespace" class="m-0 font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
         {{ .name_with_namespace | markdownify | emojify }}
       </div>
     </div>
 
-    <p class="m-0 mt-2 text-md text-neutral-800 dark:text-neutral">
+    <p id="{{ $id }}-description" class="m-0 mt-2 text-md text-neutral-800 dark:text-neutral">
       {{ .description | markdownify | emojify }}
     </p>
 
     <div class="m-0 mt-2 flex items-center">
       <span class="text-md mr-1 text-neutral-800 dark:text-neutral">
         {{ partial "icon.html" "star" }}
       </span>
-      <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
+      <div id="{{ $id }}-star_count" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
         {{ .star_count }}
       </div>
 
       <span class="text-md mr-1 text-neutral-800 dark:text-neutral">
         {{ partial "icon.html" "fork" }}
       </span>
-      <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
+      <div id="{{ $id }}-forks_count" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
         {{ .forks_count }}
       </div>
 
     </div>
 
   </div>
+  <script>
+    console.log({{ $gitlabURL }})
+    fetch({{ $gitlabURL }}, {
+      headers: new Headers({
+        'User-agent': 'Mozilla/4.0 Custom User Agent'
+      })
+    })
+      .then(response => response.json())
+      .then(data => {
+        console.log(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>
 </a>
 {{- end -}}