Add related links

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>

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>
+    )
+} ) }