Add headings to app template

src/components/default-listing.astro

@@ -0,0 +1,40 @@
+---
+// Default Listing template for Apps, Games, and formulas
+
+import {
+    ListingDetails
+} from '~/helpers/listing-page.js'
+
+import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue'
+
+
+const {
+  listing
+} = Astro.props
+
+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">
+        <h1 class="title text-sm md:text-xl font-bold">
+            { details.mainHeading }
+        </h1>
+        <h2 class="subtitle text-2xl md:text-5xl font-bold">
+            { details.subtitle }
+        </h2>
+
+
+
+        <AllUpdatesSubscribe
+            client:visible
+        />
+
+        <div class="links space-y-6 sm:space-x-6">
+            <!-- { relatedLinksHtml } -->
+        </div>
+
+    </div>
+
+</section>

src/pages/app/[...appPath].astro

@@ -5,12 +5,12 @@
 import axios from 'axios'
 
 import Layout from '../../layouts/default.astro'
+import Listing from '../../components/default-listing.astro'
 
 import { makeLastUpdatedFriendly } from '~/helpers/parse-date'
 import { getAppEndpoint } from '~/helpers/app-derived.js'
 
 import LinkButton from '~/components/link-button.vue'
-import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue'
 import VideoRow from '~/components/video/row.vue'
 
 // import appList from '~/static/app-list.json'
@@ -29,9 +29,9 @@ import VideoRow from '~/components/video/row.vue'
 // }
 
 
-const {
+// const {
-  slug
+//   appPath
-} = Astro.params
+// } = Astro.params
 
 
 // Parse the request url
@@ -58,7 +58,7 @@ console.log('Astro.request.url', Astro.request.url )
 console.log('Astro.site.pathname', Astro.site.pathname )
 // console.log('Astro.request', Astro.request )
 
-const appEntry = await axios.get( apiUrl.toString() )
+const appListing = await axios.get( apiUrl.toString() )
     .then( response => {
         // console.log( 'response', response )
         return response.data
@@ -80,15 +80,15 @@ const lastUpdatedFriendly = null
 
 ---
 <Layout
-	headTitle={ `${ appEntry.name } | Does It ARM` }
+	headTitle={ `${ appListing.name } | Does It ARM` }
 	headDescription={ 'Test' }
 >
-    { slug }
-    <br>
-    <br>
-    { JSON.stringify( appEntry ) }
 
-    <AllUpdatesSubscribe
+    <Listing
-        client:visible
+        listing={ appListing }
     />
+    <!-- <div>
+        { JSON.stringify( appListing ) }
+    </div> -->
+
 </Layout>