📝 Add link styles demo page

exampleSite/config.toml

@@ -9,6 +9,7 @@ disableKinds = ["taxonomy", "term"]
   image = "author.jpg"
   links = [
     { link = { href = "readme/", text = "View the readme" } },
+    { link = { href = "styles/", text = "All the link styles" } },
     { github = "https://github.com/jpanther/lynx" },
     { twitter = "https://twitter.com/jpanther" },
     { font-awesome = { href = "https://fontawesome.com/", text = "FontAwesome" } },
@@ -16,3 +17,7 @@ disableKinds = ["taxonomy", "term"]
 
 [markup.highlight]
   noClasses = false
+
+[markup.goldmark]
+[markup.goldmark.renderer]
+  unsafe = true

exampleSite/content/styles.md

@@ -0,0 +1,47 @@
+---
+title: Link styles
+---
+
+These are all the built-in link styles available in Lynx. Don't forget that you can also create your own styles --- check the [readme]({{< ref "readme#adding-custom-icons-and-link-styles" >}}) for more details.
+<br><br>
+
+</section>
+<section>
+<div class="flex flex-col flex-wrap min-w-full mt-4 sm:min-w-0">
+{{< link email >}}
+{{< link link >}}
+{{< link amazon >}}
+{{< link apple >}}
+{{< link codepen >}}
+{{< link dev >}}
+{{< link discord >}}
+{{< link dribbble >}}
+{{< link facebook >}}
+{{< link flickr >}}
+{{< link foursquare >}}
+{{< link github >}}
+{{< link gitlab >}}
+{{< link google >}}
+{{< link instagram >}}
+{{< link keybase >}}
+{{< link kickstarter >}}
+{{< link lastfm >}}
+{{< link linkedin >}}
+{{< link mastodon >}}
+{{< link medium >}}
+{{< link microsoft >}}
+{{< link patreon >}}
+{{< link pinterest >}}
+{{< link reddit >}}
+{{< link slack >}}
+{{< link snapchat >}}
+{{< link soundcloud >}}
+{{< link steam >}}
+{{< link telegram >}}
+{{< link tiktok >}}
+{{< link tumblr >}}
+{{< link twitch >}}
+{{< link twitter >}}
+{{< link whatsapp >}}
+{{< link youtube >}}
+</div>

exampleSite/layouts/shortcodes/link.html

@@ -0,0 +1,8 @@
+<a
+  class="link link-{{ .Get 0 }} sm:px-24 min-w-full py-2 mb-3 text-lg rounded"
+  href="#"
+  onclick="navigator.clipboard.writeText({{ .Get 0 }})"
+>
+  <span class="mr-1">{{ partial "icon.html" (.Get 0) }}</span>
+  {{ .Get 0 }}
+</a>