From 68f353c6532866890f37c036736a3716f2676c96 Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Wed, 27 Apr 2022 13:34:21 -0500
Subject: [PATCH] Add related links

---
 src/components/default-listing.astro       | 16 ++++++++++++++--
 src/components/listing/related-links.astro | 22 ++++++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 src/components/listing/related-links.astro

diff --git a/src/components/default-listing.astro b/src/components/default-listing.astro
index d79b20a..b2870da 100644
--- a/src/components/default-listing.astro
+++ b/src/components/default-listing.astro
@@ -6,9 +6,16 @@ import {
 } from '~/helpers/listing-page.js'
 
 import Aliases from '~/src/components/listing/aliases.astro'
+import RelatedLinks from '~/src/components/listing/related-links.astro'
 
 import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue'
 
+import { makeLastUpdatedFriendly } from '~/helpers/parse-date'
+import { getAppEndpoint } from '~/helpers/app-derived.js'
+
+import LinkButton from '~/components/link-button.vue'
+import VideoRow from '~/components/video/row.vue'
+
 
 const {
   listing
@@ -19,7 +26,7 @@ const details = new ListingDetails( listing )
 ---
 <section class="container space-y-8 py-32">
 
-    <div class="intro-content flex flex-col items-center text-center min-h-3/4-screen md:min-h-0 space-y-8">
+    <div class="intro-content flex flex-col items-center text-center min-h-3/4-screen md:min-h-0 gap-8">
         <h1 class="title text-sm md:text-xl font-bold">
             { details.mainHeading }
         </h1>
@@ -30,11 +37,16 @@ const details = new ListingDetails( listing )
         <Aliases listing={ listing } />
 
 
-
         <AllUpdatesSubscribe
             client:visible
         />
 
+        <div class="links space-y-6 sm:space-x-6">
+            <RelatedLinks
+                listing={ listing }
+            />
+        </div>
+
         <div class="links space-y-6 sm:space-x-6">
             <!-- { relatedLinksHtml } -->
         </div>
diff --git a/src/components/listing/related-links.astro b/src/components/listing/related-links.astro
new file mode 100644
index 0000000..7982f8b
--- /dev/null
+++ b/src/components/listing/related-links.astro
@@ -0,0 +1,22 @@
+---
+const {
+  listing
+} = Astro.props
+
+---
+{ listing.relatedLinks.map( (link, i) => {
+
+    const notAppTestLink = !link.label.includes('🧪')
+
+    const isMainLink = (i === 0) && notAppTestLink
+
+    return (
+        <a
+            class="relative inline-flex items-center rounded-md px-4 py-2 leading-5 font-bold text-white border border-transparent focus:outline-none focus:border-indigo-600 neumorphic-shadow focus:shadow-outline-indigo bg-darker hover:bg-indigo-400 active:bg-indigo-600 transition duration-150 ease-in-out"
+            href="${link.href}"
+            target="_blank"
+            rel="noopener"
+            role="button"
+        >{ isMainLink ? 'View' : link.label }</a>
+    )
+} ) }