feat(site): content type link parser helpers

Adding in the ability to parse links for various embed types.
aurelia · Dec 19, 2024 · c2a2626 · c2a2626
1 parent 19cf21b
commit c2a2626
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 0 deletions.
diff --git a/themes/aurelia-theme/layouts/_default/_markup/render-link.html b/themes/aurelia-theme/layouts/_default/_markup/render-link.html
@@ -0,0 +1,51 @@
+{{ $url := .Destination }}
+{{ $isYoutube := findRE "(youtube:|youtu.be/|youtube.com/watch)" $url 1 }}
+{{ $isGist := findRE "^(gist:|https://gist.github.com/)" $url 1 }}
+{{ $isStackBlitz := findRE "stackblitz.com/edit/([^/?]+)" $url 1 }}
+{{ $isCodePen := findRE "codepen.io/([^/]+)/pen/([^/?]+)" $url 1 }}
+{{ $isNpmPackage := findRE "npmjs.com/package/([^/?]+)" $url 1 }}
+{{ $isGitHubRepo := findRE "github.com/([^/]+/[^/]+)(?:/|$)" $url 1 }}
+{{ $isDumberGist := findRE "gist.dumber.app/\\?gist=([^/?&]+)" $url 1 }}
+
+{{ if $isYoutube }}
+    {{ $videoID := "" }}
+    {{ if findRE "youtube.com/watch" $url 1 }}
+        {{ $videoID = (index (findRE "[?&]v=([A-Za-z0-9_-]{11})" $url 1) 0) }}
+        {{ $videoID = replaceRE "[?&]v=" "" $videoID }}
+        <!-- YouTube.com Video ID: {{ $videoID }} -->
+    {{ else if findRE "youtu.be/" $url 1 }}
+        {{ $videoID = (index (findRE "youtu.be/([A-Za-z0-9_-]{11})" $url 1) 0) }}
+        {{ $videoID = replaceRE "youtu.be/" "" $videoID }}
+        <!-- YoutuBe Video ID: {{ $videoID }} -->
+    {{ else }}
+        {{ $videoID = replaceRE "youtube:" "" $url }}
+        <!-- Direct Video ID: {{ $videoID }} -->
+    {{ end }}
+    {{ partial "render-hooks/youtube.html" (dict "Destination" $videoID) }}
+{{ else if $isGist }}
+    {{ $gistID := replaceRE "^(gist:|https://gist.github.com/)" "" $url }}
+    {{ partial "render-hooks/gist.html" (dict "Destination" $gistID) }}
+{{ else if $isStackBlitz }}
+    {{ $projectId := index (findRE "stackblitz.com/edit/([^/?]+)" $url 1) 0 }}
+    {{ $projectId = replaceRE "stackblitz.com/edit/" "" $projectId }}
+    {{ partial "render-hooks/stackblitz.html" (dict "Destination" $projectId "Height" "800px") }}
+{{ else if $isCodePen }}
+    {{ $matches := findRE "codepen.io/([^/]+)/pen/([^/?]+)" $url 1 }}
+    {{ $user := replaceRE "codepen.io/([^/]+)/pen/.*" "$1" (index $matches 0) }}
+    {{ $penId := replaceRE "codepen.io/[^/]+/pen/([^/?]+)" "$1" (index $matches 0) }}
+    {{ partial "render-hooks/codepen.html" (dict "User" $user "PenId" $penId "Height" "400") }}
+{{ else if $isNpmPackage }}
+    {{ $packageName := index (findRE "npmjs.com/package/([^/?]+)" $url 1) 0 }}
+    {{ $packageName = replaceRE "npmjs.com/package/" "" $packageName }}
+    {{ partial "render-hooks/npm-package.html" (dict "Destination" $packageName) }}
+{{ else if $isGitHubRepo }}
+    {{ $repoPath := index (findRE "github.com/([^/]+/[^/]+)(?:/|$)" $url 1) 0 }}
+    {{ $repoPath = replaceRE "github.com/" "" $repoPath }}
+    {{ partial "render-hooks/github-repo.html" (dict "Destination" $repoPath) }}
+{{ else if $isDumberGist }}
+    {{ $gistId := index (findRE "gist=([^/?&]+)" $url 1) 0 }}
+    {{ $gistId = replaceRE "gist=" "" $gistId }}
+    {{ partial "render-hooks/dumber-gist.html" (dict "Destination" $gistId "Height" "400px") }}
+{{ else }}
+    <a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
+{{ end }} 
diff --git a/themes/aurelia-theme/layouts/partials/render-hooks/codepen.html b/themes/aurelia-theme/layouts/partials/render-hooks/codepen.html
@@ -0,0 +1,13 @@
+<div class="my-4">
+    <p class="codepen" 
+       data-height="{{ with .Height }}{{ . }}{{ else }}400{{ end }}" 
+       data-default-tab="result" 
+       data-slug-hash="{{ .PenId }}" 
+       data-user="{{ .User }}"
+       style="height: {{ with .Height }}{{ . }}{{ else }}400{{ end }}px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
+        <span>See the Pen <a href="https://codepen.io/{{ .User }}/pen/{{ .PenId }}">
+        CodePen Example</a> by {{ .User }} (<a href="https://codepen.io/{{ .User }}">@{{ .User }}</a>)
+        on <a href="https://codepen.io">CodePen</a>.</span>
+    </p>
+    <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
+</div> 
diff --git a/themes/aurelia-theme/layouts/partials/render-hooks/dumber-gist.html b/themes/aurelia-theme/layouts/partials/render-hooks/dumber-gist.html
@@ -0,0 +1,8 @@
+<div class="my-4">
+    <iframe 
+        src="https://gist.dumber.app/?gist={{ .Destination }}"
+        class="w-full rounded-lg shadow-lg"
+        style="height: {{ with .Height }}{{ . }}{{ else }}400px{{ end }}; border: 2px solid #343a40;"
+        loading="lazy">
+    </iframe>
+</div> 
diff --git a/themes/aurelia-theme/layouts/partials/render-hooks/gist.html b/themes/aurelia-theme/layouts/partials/render-hooks/gist.html
@@ -0,0 +1,32 @@
+<div class="my-4">
+    <style>
+        /* https://github.com/lonekorean/gist-syntax-themes */
+        @import url('https://cdn.rawgit.com/lonekorean/gist-syntax-themes/d49b91b3/stylesheets/idle-fingers.css');
+
+        @import url('https://fonts.googleapis.com/css?family=Open+Sans');
+        body {
+          font: 16px 'Open Sans', sans-serif;
+        }
+        body .gist .gist-file {
+          border-color: #555 #555 #444
+        }
+        body .gist .gist-data {
+          border-color: #555
+        }
+        body .gist .gist-meta {
+          color: #ffffff;
+          background: #373737; 
+        }
+        body .gist .gist-meta a {
+          color: #ffffff
+        }
+        body .gist .gist-data .pl-s .pl-s1 {
+          color: #a5c261
+        }
+
+        body .gist tr {
+            border: none;
+        }
+    </style>
+    <script src="https://gist.github.com/{{ .Destination }}.js"></script>
+</div> 
diff --git a/themes/aurelia-theme/layouts/partials/render-hooks/github-repo.html b/themes/aurelia-theme/layouts/partials/render-hooks/github-repo.html
@@ -0,0 +1,15 @@
+<div class="my-4 p-4 bg-gray-50 rounded-lg shadow-lg">
+    <div class="flex items-center gap-3">
+        <i class="fab fa-github text-2xl"></i>
+        <a href="https://github.com/{{ .Destination }}" 
+           class="text-lg font-mono hover:text-aurelia-light"
+           target="_blank" 
+           rel="noopener">
+            {{ .Destination }}
+        </a>
+    </div>
+    <div class="mt-2 flex gap-2">
+        <img src="https://img.shields.io/github/stars/{{ .Destination }}" alt="GitHub stars" />
+        <img src="https://img.shields.io/github/last-commit/{{ .Destination }}" alt="Last commit" />
+    </div>
+</div> 
diff --git a/themes/aurelia-theme/layouts/partials/render-hooks/npm-package.html b/themes/aurelia-theme/layouts/partials/render-hooks/npm-package.html
@@ -0,0 +1,15 @@
+<div class="my-4 p-4 bg-gray-50 rounded-lg shadow-lg">
+    <div class="flex items-center gap-3">
+        <i class="fab fa-npm text-red-600 text-2xl"></i>
+        <a href="https://www.npmjs.com/package/{{ .Destination }}" 
+           class="text-lg font-mono hover:text-aurelia-light"
+           target="_blank" 
+           rel="noopener">
+            {{ .Destination }}
+        </a>
+    </div>
+    <div class="mt-2 flex gap-2">
+        <img src="https://img.shields.io/npm/v/{{ .Destination }}" alt="npm version" />
+        <img src="https://img.shields.io/npm/dm/{{ .Destination }}" alt="npm downloads" />
+    </div>
+</div> 
diff --git a/themes/aurelia-theme/layouts/partials/render-hooks/stackblitz.html b/themes/aurelia-theme/layouts/partials/render-hooks/stackblitz.html
@@ -0,0 +1,9 @@
+<div class="my-4">
+    <iframe 
+        src="https://stackblitz.com/edit/{{ .Destination }}?embed=1&view=preview"
+        class="w-full rounded-lg shadow-lg"
+        style="height: {{ with .Height }}{{ . }}{{ else }}600px{{ end }};"
+        loading="lazy"
+        allowfullscreen>
+    </iframe>
+</div> 
diff --git a/themes/aurelia-theme/layouts/partials/render-hooks/youtube.html b/themes/aurelia-theme/layouts/partials/render-hooks/youtube.html
@@ -0,0 +1,9 @@
+<div class="relative pb-[56.25%] my-4">
+    <iframe 
+        src="https://www.youtube.com/embed/{{ .Destination }}"
+        class="absolute top-0 left-0 w-full h-full rounded-lg shadow-lg"
+        loading="lazy"
+        title="YouTube video"
+        allowfullscreen>
+    </iframe>
+</div>