new: linktree component

exampleSite/content/docs/content-examples/index.md

@@ -90,6 +90,64 @@ _In this example, the special `cascade` parameter is being used to hide the read
 
 The [samples section]({{< ref "samples" >}}) of this site is an example of a list page.
 
+### Linktree Page
+
+|                |                                               |
+| -------------- | --------------------------------------------- |
+| **Layout:**    | `linktree` (e.g. `layouts/_default/linktree.html`)  |
+| **Content:**   | `content/links/_index.md`                        |
+
+The [Linktree Page](/links) enables you to quickly build a page that displays a list of links—similar to Linktree. This component pulls links from two sources:
+
+- Page Front Matter:
+    You can directly define custom links in the Markdown file.
+- Author Social Links:
+    It also automatically appends social links defined in the Author configuration.
+
+**How It Works**
+
+The component retrieves the links parameter from the page’s front matter. Each link is defined as a mapping, with the link text as the key and the destination URL as the value. After rendering these links, the component will also include the social links configured under `.Site.Params.Author.Links`` at the bottom of the page.
+
+**Usage**
+
+In your Markdown file, set the layout to `linktree` and define your links like this:
+
+```yaml
+---
+layout: linktree
+links:
+  - "Awesome Masterclass": "https://example.com"
+---
+```
+
+*Note:*  
+- Each link is an item in a list.  
+- The key (e.g., `"Awesome Masterclass"`) represents the text to display.  
+- The value (e.g., `"https://example.com"`) is the URL where the link should navigate.
+
+**Directory Structure**
+
+For example, you might organize your site as follows:
+
+```shell
+.
+└── content
+    └── links
+        └── _index.md
+```
+
+**Adding More Links:**  
+  To add more links, simply update the front matter in your Markdown file by adding more items to the `links` list:
+
+  ```yaml
+  ---
+  layout: linktree
+  links:
+    - "Awesome Masterclass": "https://example.com"
+    - "Another Resource": "https://example.com"
+  ---
+  ```
+
 ### Taxonomy pages
 
 |                  |                                  |

exampleSite/content/links/_index.md

@@ -0,0 +1,5 @@
+---
+layout: linktree
+links:
+    - "Awesome Master Class": "https://example.com"
+---

layouts/_default/linktree.html

@@ -0,0 +1,43 @@
+{{ define "main" }}
+{{ $disableImageOptimization := .Site.Params.disableImageOptimization | default false }}
+<div class="flex flex-col items-center justify-center text-center">
+    {{ with .Site.Params.Author.image }}
+      {{ $authorImage := "" }}
+      {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
+        {{ $authorImage = resources.GetRemote . }}
+       {{ else }}
+        {{ $authorImage = resources.Get . }}
+       {{ end }}
+       {{ if $authorImage }}
+        {{ if not $disableImageOptimization }}
+         {{ $authorImage = $authorImage.Fill "192x192" }}
+       {{ end }}
+       <img class="mb-2 rounded-full h-36 w-36 medium-zoom-image" width="144" height="144"
+       alt="{{ $.Site.Params.Author.name | default " Author" }}" src="{{ $authorImage.RelPermalink }}">
+      {{ else }}
+       {{ $authorImage := resources.GetRemote . }}
+       {{ if not $disableImageOptimization }}
+         {{ $authorImage = $authorImage.Fill "192x192" }}
+       {{ end }}
+       <img class="mb-2 rounded-full h-36 w-36 medium-zoom-image" width="144" height="144"
+       alt="{{ $.Site.Params.Author.name | default " Author" }}" src="{{ $authorImage.RelPermalink }}" />
+      {{ end }}
+    {{ end }}
+
+    {{ with .Site.Params.Author.name | markdownify }}
+    <div class="font-extrabold leading-6 text-neutral-800 dark:text-neutral-300">
+      {{ . }}
+    </div>
+    {{ end }}
+</div>
+  <article class="max-w-full">
+    <header>
+      <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
+        {{ .Title | emojify }}
+      </h1>
+    </header>
+    <section class="max-w-full mt-6 prose dark:prose-invert">
+      {{ partial "linktree-list.html" . }}
+    </section>
+  </article>
+{{ end }}

layouts/partials/linktree-list.html

@@ -0,0 +1,34 @@
+<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
+    <div class="w-full max-w-md">
+      {{ $siteLinks := .Site.Params.Author.Links | default (slice) }}
+      {{ $pageLinks := .Params.Links | default (slice) }}
+      {{ $allLinks := slice }}
+  
+      {{ range $link := $pageLinks }}
+        {{ $allLinks = $allLinks | append $link }}
+      {{ end }}
+  
+      {{ range $link := $siteLinks }}
+        {{ $allLinks = $allLinks | append $link }}
+      {{ end }}
+  
+      {{ if gt (len $allLinks) 0 }}
+        {{ range $links := $allLinks }}
+          {{ range $name, $url := $links }}
+            <a class="text-center justify-center flex w-full h-24 mb-6 fold-bold relative inline-flex items-center justify-center rounded border-2 border-black bg-white px-3 py-2 text-base font-bold text-black transition duration-100 hover:bg-primary-400 hover:text-primary-900" href="{{ $url }}" target="_blank" rel="noopener">
+              {{ $icon := resources.Get (print "icons/" $name ".svg") }}
+              {{ if $icon }}
+                <span class="w-6 h-6 mr-2 inline-block">
+                  {{ $icon.Content | safeHTML }}
+                </span>
+              {{ end }}
+              <span>{{ $name }}</span>
+            </a>
+          {{ end }}
+        {{ end }}
+      {{ else }}
+        <p class="text-gray-500">No links configured.</p>
+      {{ end }}
+    </div>
+  </div>
+