From 455e23f22b796c900568d1b772e5af68ede95604 Mon Sep 17 00:00:00 2001
From: Jimmy Cai <github@jimmycai.com>
Date: Tue, 28 Dec 2021 11:28:20 +0100
Subject: [PATCH] feat: page links (#446)

---
 exampleSite/content/page/links/index.md       |  37 ++++++++++++++++++
 .../content/page/links/ts-logo-128.jpg        | Bin 0 -> 2071 bytes
 layouts/_default/single.html                  |   4 ++
 .../partials/article/components/links.html    |  26 ++++++++++++
 4 files changed, 67 insertions(+)
 create mode 100644 exampleSite/content/page/links/index.md
 create mode 100644 exampleSite/content/page/links/ts-logo-128.jpg
 create mode 100644 layouts/partials/article/components/links.html

diff --git a/exampleSite/content/page/links/index.md b/exampleSite/content/page/links/index.md
new file mode 100644
index 0000000..9e29bf3
--- /dev/null
+++ b/exampleSite/content/page/links/index.md
@@ -0,0 +1,37 @@
+---
+title: Links
+links:
+  - title: GitHub
+    description: GitHub is the world's largest software development platform.
+    website: https://github.com
+    image: https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png
+  - title: TypeScript
+    description: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
+    website: https://www.typescriptlang.org
+    image: ts-logo-128.jpg
+menu:
+    main: 
+        weight: -50
+        params:
+            icon: link
+
+comments: false
+---
+
+To use this feature, add `links` section to frontmatter.
+
+This page's frontmatter:
+
+```yaml
+links:
+  - title: GitHub
+    description: GitHub is the world's largest software development platform.
+    website: https://github.com
+    image: https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png
+  - title: TypeScript
+    description: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
+    website: https://www.typescriptlang.org
+    image: ts-logo-128.jpg
+```
+
+`image` field accepts both local and external images.
\ No newline at end of file
diff --git a/exampleSite/content/page/links/ts-logo-128.jpg b/exampleSite/content/page/links/ts-logo-128.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..85e33236069a2534315630db8bfef9e02166c3e1
GIT binary patch
literal 2071
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
N?ko}Hf$Os8{{}vaa_0a5

literal 0
HcmV?d00001

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 8b21c52..8ce42e9 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -15,6 +15,10 @@
 {{ define "main" }}
     {{ partial "article/article.html" . }}
 
+    {{ if .Params.links }}
+        {{ partial "article/components/links" . }}
+    {{ end }}
+
     {{ partial "article/components/related-contents" . }}
      
     {{ if not (eq .Params.comments false) }}
diff --git a/layouts/partials/article/components/links.html b/layouts/partials/article/components/links.html
new file mode 100644
index 0000000..118dbb3
--- /dev/null
+++ b/layouts/partials/article/components/links.html
@@ -0,0 +1,26 @@
+<div class="article-list--compact links">
+    {{ range $i, $link := .Params.links }}
+        <article>
+            <a href="{{ $link.website }}" target="_blank" rel="noopener">
+                <div class="article-details">
+                    <h2 class="article-title">
+                        {{- $link.title -}}
+                    </h2>
+                    <footer class="article-time">
+                        {{ with $link.description }}
+                            {{ . }}
+                        {{ else }}
+                            {{ $link.website }}
+                        {{ end }}
+                    </footer>
+                </div>
+        
+                {{ with $link.image }}
+                    <div class="article-image">
+                        <img src="{{ . }}" loading="lazy">
+                    </div>
+                {{ end }}
+            </a>
+        </article>
+    {{ end }}
+</div>
\ No newline at end of file