michael/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-01-23 06:55:43 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Merge pull request #1043 from nunocoracao/1023-make-some-shortcodes-eg-github-card-get-their-information-dynamically

Browse source 
✨ Make GitHub and GitLab shortcodes update dynamically
This commit is contained in:
Nuno Coração 2023-11-02 23:32:04 +00:00 committed by GitHub
commit bf3f154014
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 55 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
layouts/shortcodes/github.html
View file

@ -1,26 +1,32 @@
{{- $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>
@ -28,19 +34,34 @@
<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 -}}

30
layouts/shortcodes/gitlab.html
View file

@ -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,12 +11,12 @@
<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>
@ -21,19 +24,36 @@
<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 -}}