Skip to content

Commit c2a2626

Browse files
VheissuVheissu
committed
feat(site): content type link parser helpers
Adding in the ability to parse links for various embed types.
1 parent 19cf21b commit c2a2626

File tree

8 files changed

+152
-0
lines changed

8 files changed

+152
-0
lines changed

‎themes/aurelia-theme/layouts/_default/_markup/render-link.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{{ $url := .Destination }}
2+
{{ $isYoutube := findRE "(youtube:|youtu.be/|youtube.com/watch)" $url 1 }}
3+
{{ $isGist := findRE "^(gist:|https://gist.github.com/)" $url 1 }}
4+
{{ $isStackBlitz := findRE "stackblitz.com/edit/([^/?]+)" $url 1 }}
5+
{{ $isCodePen := findRE "codepen.io/([^/]+)/pen/([^/?]+)" $url 1 }}
6+
{{ $isNpmPackage := findRE "npmjs.com/package/([^/?]+)" $url 1 }}
7+
{{ $isGitHubRepo := findRE "github.com/([^/]+/[^/]+)(?:/|$)" $url 1 }}
8+
{{ $isDumberGist := findRE "gist.dumber.app/\\?gist=([^/?&]+)" $url 1 }}
9+
10+
{{ if $isYoutube }}
11+
{{ $videoID := "" }}
12+
{{ if findRE "youtube.com/watch" $url 1 }}
13+
{{ $videoID = (index (findRE "[?&]v=([A-Za-z0-9_-]{11})" $url 1) 0) }}
14+
{{ $videoID = replaceRE "[?&]v=" "" $videoID }}
15+
<!-- YouTube.com Video ID: {{ $videoID }} -->
16+
{{ else if findRE "youtu.be/" $url 1 }}
17+
{{ $videoID = (index (findRE "youtu.be/([A-Za-z0-9_-]{11})" $url 1) 0) }}
18+
{{ $videoID = replaceRE "youtu.be/" "" $videoID }}
19+
<!-- YoutuBe Video ID: {{ $videoID }} -->
20+
{{ else }}
21+
{{ $videoID = replaceRE "youtube:" "" $url }}
22+
<!-- Direct Video ID: {{ $videoID }} -->
23+
{{ end }}
24+
{{ partial "render-hooks/youtube.html" (dict "Destination" $videoID) }}
25+
{{ else if $isGist }}
26+
{{ $gistID := replaceRE "^(gist:|https://gist.github.com/)" "" $url }}
27+
{{ partial "render-hooks/gist.html" (dict "Destination" $gistID) }}
28+
{{ else if $isStackBlitz }}
29+
{{ $projectId := index (findRE "stackblitz.com/edit/([^/?]+)" $url 1) 0 }}
30+
{{ $projectId = replaceRE "stackblitz.com/edit/" "" $projectId }}
31+
{{ partial "render-hooks/stackblitz.html" (dict "Destination" $projectId "Height" "800px") }}
32+
{{ else if $isCodePen }}
33+
{{ $matches := findRE "codepen.io/([^/]+)/pen/([^/?]+)" $url 1 }}
34+
{{ $user := replaceRE "codepen.io/([^/]+)/pen/.*" "$1" (index $matches 0) }}
35+
{{ $penId := replaceRE "codepen.io/[^/]+/pen/([^/?]+)" "$1" (index $matches 0) }}
36+
{{ partial "render-hooks/codepen.html" (dict "User" $user "PenId" $penId "Height" "400") }}
37+
{{ else if $isNpmPackage }}
38+
{{ $packageName := index (findRE "npmjs.com/package/([^/?]+)" $url 1) 0 }}
39+
{{ $packageName = replaceRE "npmjs.com/package/" "" $packageName }}
40+
{{ partial "render-hooks/npm-package.html" (dict "Destination" $packageName) }}
41+
{{ else if $isGitHubRepo }}
42+
{{ $repoPath := index (findRE "github.com/([^/]+/[^/]+)(?:/|$)" $url 1) 0 }}
43+
{{ $repoPath = replaceRE "github.com/" "" $repoPath }}
44+
{{ partial "render-hooks/github-repo.html" (dict "Destination" $repoPath) }}
45+
{{ else if $isDumberGist }}
46+
{{ $gistId := index (findRE "gist=([^/?&]+)" $url 1) 0 }}
47+
{{ $gistId = replaceRE "gist=" "" $gistId }}
48+
{{ partial "render-hooks/dumber-gist.html" (dict "Destination" $gistId "Height" "400px") }}
49+
{{ else }}
50+
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
51+
{{ end }}

‎themes/aurelia-theme/layouts/partials/render-hooks/codepen.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="my-4">
2+
<p class="codepen"
3+
data-height="{{ with .Height }}{{ . }}{{ else }}400{{ end }}"
4+
data-default-tab="result"
5+
data-slug-hash="{{ .PenId }}"
6+
data-user="{{ .User }}"
7+
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;">
8+
<span>See the Pen <a href="https://codepen.io/{{ .User }}/pen/{{ .PenId }}">
9+
CodePen Example</a> by {{ .User }} (<a href="https://codepen.io/{{ .User }}">@{{ .User }}</a>)
10+
on <a href="https://codepen.io">CodePen</a>.</span>
11+
</p>
12+
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
13+
</div>

‎themes/aurelia-theme/layouts/partials/render-hooks/dumber-gist.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="my-4">
2+
<iframe
3+
src="https://gist.dumber.app/?gist={{ .Destination }}"
4+
class="w-full rounded-lg shadow-lg"
5+
style="height: {{ with .Height }}{{ . }}{{ else }}400px{{ end }}; border: 2px solid #343a40;"
6+
loading="lazy">
7+
</iframe>
8+
</div>

‎themes/aurelia-theme/layouts/partials/render-hooks/gist.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<div class="my-4">
2+
<style>
3+
/* https://github.com/lonekorean/gist-syntax-themes */
4+
@import url('https://cdn.rawgit.com/lonekorean/gist-syntax-themes/d49b91b3/stylesheets/idle-fingers.css');
5+
6+
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
7+
body {
8+
font: 16px 'Open Sans', sans-serif;
9+
}
10+
body .gist .gist-file {
11+
border-color: #555 #555 #444
12+
}
13+
body .gist .gist-data {
14+
border-color: #555
15+
}
16+
body .gist .gist-meta {
17+
color: #ffffff;
18+
background: #373737;
19+
}
20+
body .gist .gist-meta a {
21+
color: #ffffff
22+
}
23+
body .gist .gist-data .pl-s .pl-s1 {
24+
color: #a5c261
25+
}
26+
27+
body .gist tr {
28+
border: none;
29+
}
30+
</style>
31+
<script src="https://gist.github.com/{{ .Destination }}.js"></script>
32+
</div>

‎themes/aurelia-theme/layouts/partials/render-hooks/github-repo.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="my-4 p-4 bg-gray-50 rounded-lg shadow-lg">
2+
<div class="flex items-center gap-3">
3+
<i class="fab fa-github text-2xl"></i>
4+
<a href="https://github.com/{{ .Destination }}"
5+
class="text-lg font-mono hover:text-aurelia-light"
6+
target="_blank"
7+
rel="noopener">
8+
{{ .Destination }}
9+
</a>
10+
</div>
11+
<div class="mt-2 flex gap-2">
12+
<img src="https://img.shields.io/github/stars/{{ .Destination }}" alt="GitHub stars" />
13+
<img src="https://img.shields.io/github/last-commit/{{ .Destination }}" alt="Last commit" />
14+
</div>
15+
</div>

‎themes/aurelia-theme/layouts/partials/render-hooks/npm-package.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="my-4 p-4 bg-gray-50 rounded-lg shadow-lg">
2+
<div class="flex items-center gap-3">
3+
<i class="fab fa-npm text-red-600 text-2xl"></i>
4+
<a href="https://www.npmjs.com/package/{{ .Destination }}"
5+
class="text-lg font-mono hover:text-aurelia-light"
6+
target="_blank"
7+
rel="noopener">
8+
{{ .Destination }}
9+
</a>
10+
</div>
11+
<div class="mt-2 flex gap-2">
12+
<img src="https://img.shields.io/npm/v/{{ .Destination }}" alt="npm version" />
13+
<img src="https://img.shields.io/npm/dm/{{ .Destination }}" alt="npm downloads" />
14+
</div>
15+
</div>

‎themes/aurelia-theme/layouts/partials/render-hooks/stackblitz.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div class="my-4">
2+
<iframe
3+
src="https://stackblitz.com/edit/{{ .Destination }}?embed=1&view=preview"
4+
class="w-full rounded-lg shadow-lg"
5+
style="height: {{ with .Height }}{{ . }}{{ else }}600px{{ end }};"
6+
loading="lazy"
7+
allowfullscreen>
8+
</iframe>
9+
</div>

‎themes/aurelia-theme/layouts/partials/render-hooks/youtube.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div class="relative pb-[56.25%] my-4">
2+
<iframe
3+
src="https://www.youtube.com/embed/{{ .Destination }}"
4+
class="absolute top-0 left-0 w-full h-full rounded-lg shadow-lg"
5+
loading="lazy"
6+
title="YouTube video"
7+
allowfullscreen>
8+
</iframe>
9+
</div>

0 commit comments

Comments
 (0)