Merge pull request #2162 from soar/feature/github-thumbnails

✨ feat(shortcodes): Display thumbnails for GitHub repos

exampleSite/content/docs/shortcodes/index.md

@@ -390,9 +390,10 @@ In order to add images to the gallery, use `img` tags for each image and add `cl
 `github` allows you to quickly link a github repository, all while showing and updating in realtime stats about it, such as the number of stars and forks it has.
 
 <!-- prettier-ignore-start -->
-| Parameter | Description                                           |
-| --------- | ----------------------------------------------------- |
-| `repo`    | [String] github repo in the format of `username/repo` |
+| Parameter       | Description                                                   |
+|-----------------|---------------------------------------------------------------|
+| `repo`          | [String] github repo in the format of `username/repo`         |
+| `showThumbnail` | **Optional** [boolean] display a thumbnail for the repository |
 <!-- prettier-ignore-end -->
 
 **Example 1:**

layouts/shortcodes/github.html

@@ -2,13 +2,20 @@
 {{- $githubURL := print "https://api.github.com/repos/" (.Get "repo") -}}
 {{- $githubData := resources.GetRemote $githubURL | transform.Unmarshal -}}
 {{- $githubColors := .Site.Data.githubColors -}}
-{{- with $githubData -}}
+{{- $githubThumbnailURL := print "https://opengraph.githubassets.com/0/" (.Get "repo") -}}
 
 <div class="github-card-wrapper">
+
+{{- if (.Get "showThumbnail") -}}
+    <div class="w-full thumbnail_card nozoom" style="background-image:url({{ $githubThumbnailURL }});"></div>
+{{- end -}}
+
+{{- with $githubData -}}
 <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 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" }}
@@ -65,5 +72,6 @@
       .catch(error => console.error(error))
   </script>
 </a>
-</div>
 {{- end -}}
+
+</div>