feat: print css on content pages and 'last updated' accessible widget

client/components/ContentDocLastUpdated.vue

@@ -0,0 +1,33 @@
+<template>
+  <Popover class="relative print:hidden">
+    <PopoverButton
+      class="focus:bg-gray-300 dark:focus:bg-gray-500 hover:bg-gray-300 dark:hover:bg-gray-500 rounded-md px-2 -ml-2"
+    >
+      Last updated {{ relativeDate }}
+    </PopoverButton>
+
+    <PopoverPanel class="absolute z-10 border-2 rounded-md py-1 px-2">
+      <p class="font-mono">Last updated {{ localisedDate }}</p>
+    </PopoverPanel>
+  </Popover>
+  <p class="hidden print:block font-mono">
+    Last updated {{ relativeDate }}, {{ localisedDate }}
+  </p>
+</template>
+
+<script setup lang="ts">
+import { DateTime } from 'luxon'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+
+import _contentMetadata from '../content-metadata.json'
+import type { ContentMetadata } from '~/scripts/generate-content-metadata'
+
+const contentMetadata: ContentMetadata = _contentMetadata
+const route = useRoute()
+const thisContentMetadata = contentMetadata[route.path]
+
+const datetime = DateTime.fromISO(thisContentMetadata.mtime)
+
+const relativeDate = datetime.toRelativeCalendar()
+const localisedDate = datetime.toLocaleString(DateTime.DATETIME_HUGE)
+</script>

client/components/RFCCard.vue

@@ -41,15 +41,21 @@
           type="button"
           :aria-expanded="isMobileAbstractOpen"
           :aria-controls="abstractDomId"
-          class="relative z-50 text-blue-800 dark:text-blue-100 underline text-base p-3 -left-3 -top-3 -mb-3"
+          class="relative z-50 text-blue-800 dark:text-blue-100 underline text-base p-3 -left-3 -top-3 -mb-3 print:hidden"
           @click="isMobileAbstractOpen = !isMobileAbstractOpen"
         >
           <template v-if="isMobileAbstractOpen">Hide abstract</template>
           <template v-else>Show abstract</template>
         </button>
         <div
           :id="abstractDomId"
-          :class="[isMobileAbstractOpen ? 'block' : 'hidden', 'mt-3']"
+          :class="[
+            'mt-3',
+            {
+              'block ': isMobileAbstractOpen,
+              'hidden print:block': !isMobileAbstractOpen
+            }
+          ]"
         >
           <Heading
             level="4"
@@ -80,8 +86,8 @@
     <p
       v-if="props.redNote"
       :class="[
-        'text-red-700 dark:text-red-300 text-base',
-        isMobileAbstractOpen && 'mt-2'
+        'text-red-700 dark:text-red-300 text-base print:text-black',
+        { 'mt-2': isMobileAbstractOpen }
       ]"
     >
       {{ props.redNote }}

client/pages/[...slug].vue

@@ -2,11 +2,8 @@
   <div class="min-h-[100vh]">
     <div class="container mx-auto">
       <Breadcrumbs :breadcrumb-items="breadcrumbItems" />
-      <pre>
-        {{ route.path }}
-        {{ thisContentMetadata }}
-      </pre>
       <ContentDoc />
+      <ContentDocLastUpdated />
     </div>
   </div>
 </template>
@@ -15,14 +12,9 @@
 import { startCase } from 'lodash-es'
 import _contentMetadata from '../content-metadata.json'
 import type { BreadcrumbItem } from '~/components/BreadcrumbsTypes'
-import type { ContentMetadata } from '~/scripts/generate-content-metadata'
-
-const contentMetadata: ContentMetadata = _contentMetadata
 
 const route = useRoute()
 
-const thisContentMetadata = contentMetadata[route.path]
-
 const pathParts = route.path.substring(1).split('/')
 
 // const { data: navigation } = await useAsyncData('navigation', () =>

client/pages/search.vue

@@ -52,7 +52,7 @@
                 </select>
               </label>
             </div>
-            <div class="lg:hidden">
+            <div class="lg:hidden print:hidden">
               <SearchMobileFilter />
             </div>
           </div>

client/scripts/generate-content-metadata.ts

@@ -15,7 +15,7 @@ const git = simpleGit()
 export type ContentMetadata = Record<
   string, // path within content directory
   {
-    timestamp: string // timestamp ISO 8601
+    mtime: string // timestamp ISO 8601
   }
 >
 
@@ -31,9 +31,11 @@ const markdownMetadataArray = await Promise.all(
           })
           .then((gitLog) => {
             if (gitLog.latest?.date) {
-              const relativePath = contentMarkdownPath.substring(contentPath.length).replace(/\.md$/, '')
+              const relativePath = contentMarkdownPath
+                .substring(contentPath.length)
+                .replace(/\.md$/, '')
               resolve({
-                [relativePath]: { timestamp: gitLog.latest?.date }
+                [relativePath]: { mtime: gitLog.latest?.date }
               })
             } else {
               reject(
@@ -45,7 +47,10 @@ const markdownMetadataArray = await Promise.all(
   )
 )
 
-const contentMetadata: ContentMetadata = Object.assign({}, ...markdownMetadataArray)
+const contentMetadata: ContentMetadata = Object.assign(
+  {},
+  ...markdownMetadataArray
+)
 
 const contentMetadataPath = path.join(clientPath, 'content-metadata.json')