feat: BCP/etc in RFC Card (left) (#95)

* feat: bcp/etc in card (left)

* feat: 'part of'

* feat: BCP/etc formatting

* chore: refactoring rfc.ts into multiple files. New RfcCommon type to unify Rfc and TypeSense data structures

* chore: refactor more out of rfc.ts

* chore: linting

* chore: more RFCCommon refactoring, especially subseries

* chore: refactoring / tidy up of rfc parsing code

* chore: parse rfc status slug tests

* feat: bcp/etc aligned left after RFC Card number

* chore: removing stories that Histoire can't compile

* chore: linting

Author: holloway

client/.lostpixel/baseline/components-rfccard-story-vue_default.png

@@ -6,11 +6,11 @@
     ]"
   >
     <div :class="props.containerClass">
-      <Heading :level="props.headingLevel">
+      <Heading :level="props.headingLevel" class="text-[22px]">
         <NuxtLink
           :to="props.href"
           :class="[
-            'block text-[22px] font-bold text-blue-300 dark:text-blue-100 print:text-black no-underline focus:underline hover:underline group',
+            'font-bold text-blue-300 dark:text-blue-100 print:text-black no-underline focus:underline hover:underline group',
             props.hasCoverLink &&
               `before:absolute before:content-[\'\'] before:inset-0 before:transition-all dark:before:shadow-slate-700 hover:before:shadow-xl focus:before:shadow-xl dark:hover:before:shadow-[0_0px_40px_20px_#00101c] ${
                 /* this is only a template string so I can write an inline comment:
@@ -34,6 +34,7 @@
             ]"
           />
         </NuxtLink>
+        <slot name="afterHeadingTitle"></slot>
       </Heading>
       <slot />
     </div>

client/.lostpixel/baseline/components-rfcrouterlinkpreview-story-vue_default.png

@@ -0,0 +1,12 @@
+<template>
+  <Story title="RFC Card">
+    <RFCCard :rfc="rfcCommon" heading-level="3" />
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { rfcToRfcCommon } from '~/utilities/rfc-converters'
+import { exampleRfc } from '~/utilities/rfc.mocks'
+
+const rfcCommon = rfcToRfcCommon(exampleRfc)
+</script>

client/components/Card.vue

@@ -9,17 +9,33 @@
       : 'end'
     "
     :class="props.showAbstract && props.rfc.abstract ? 'lg:flex' : undefined"
-    :default-slot-class="
-      props.showAbstract && props.rfc.abstract ? 'pr-4' : 'ff'
-    "
+    :default-slot-class="props.showAbstract && props.rfc.abstract ? 'pr-4' : ''"
     :aside-slot-class="
       props.showAbstract && props.rfc.abstract ?
         'flex-1 lg:w-1/2 xl:w-3/5 border-l pl-12 pr-4'
       : undefined
     "
   >
     <template #headingTitle>
-      <component :is="formatTitle(`rfc${props.rfc.number}`)" />
+      <component :is="formatTitleAsVNode(`rfc${props.rfc.number}`)" />
+    </template>
+    <template #afterHeadingTitle>
+      <span v-if="props.rfc.subseries">
+        <span>: </span>
+        <NuxtLink
+          to="/"
+          class="relative z-50 no-underline hover:underline focus:underline px-2 py-3 rounded text-gray-700"
+          :title="`part of ${props.rfc.subseries.type.toUpperCase()}${props.rfc.subseries.number}`"
+        >
+          <component
+            :is="
+              formatTitleAsVNode(
+                `${props.rfc.subseries.type}${props.rfc.subseries.number}`
+              )
+            "
+          />
+        </NuxtLink>
+      </span>
     </template>
     <template #default>
       <RFCCardBody
@@ -50,14 +66,14 @@
 </template>
 
 <script setup lang="ts">
-import type { Rfc } from '../generated/red-client'
 import { infoRfcPathBuilder } from '../utilities/url'
-import { formatTitle } from '~/utilities/rfc'
+import { formatTitleAsVNode } from '~/utilities/rfc'
+import type { RfcCommon } from '~/utilities/rfc'
 import { useResponsiveModeStore } from '~/stores/responsiveMode'
 import { parseHeadingLevel, type HeadingLevel } from '~/utilities/html'
 
 type Props = {
-  rfc: Rfc
+  rfc: RfcCommon
   showAbstract?: boolean
   showTagDate?: boolean
   headingLevel?: HeadingLevel

client/components/RFCCard.disabled-story.vue

@@ -22,7 +22,11 @@
       class="hidden lg:block print:block text-base text-gray-800 mt-1 dark:text-white"
     >
       <li v-if="isAprilFool" class="inline pr-2">
-        <Icon name="fa6-solid:masks-theater" size="1em" class="text-violet-500 -mb-0.5" />
+        <Icon
+          name="fa6-solid:masks-theater"
+          size="1em"
+          class="text-violet-500 -mb-0.5"
+        />
       </li>
       <li v-for="(part, index) in list2" :key="index" class="inline">
         <GraphicsDiamond v-if="index > 0" class="align-middle" />{{ part }}
@@ -78,12 +82,12 @@
 
 <script setup lang="ts">
 import { DateTime } from 'luxon'
-import type { Rfc, RfcMetadata } from '../generated/red-client'
 import { infoRfcPathBuilder } from '../utilities/url'
-import { formatTitlePlaintext } from '~/utilities/rfc'
+import type { RfcCommon } from '~/utilities/rfc'
+import { formatTitlePlaintext } from '~/utilities/rfc-converters-utils'
 
 type Props = {
-  rfc: Rfc
+  rfc: RfcCommon
   showAbstract?: boolean
   showTagDate?: boolean
 }
@@ -94,23 +98,32 @@ const isMobileAbstractOpen = ref<boolean>(false)
 
 const abstractDomId = useId()
 
-function formatAuthors(authors: Rfc['authors']): string {
+function formatAuthors(authors: RfcCommon['authors']): string {
   if (authors.length === 0) {
     return ''
   } else if (authors.length === 1) {
     return `${authors[0].name}`
   } else {
-    return authors.slice(0, authors.length - 1).map(author => author.name).join(', ') + ` and ${authors.at(-1)?.name}`
+    return (
+      authors
+        .slice(0, authors.length - 1)
+        .map((author) => author.name)
+        .join(', ') + ` and ${authors.at(-1)?.name}`
+    )
   }
 }
 
 function formatDate(isoDate: string): string {
   const datetime = DateTime.fromISO(isoDate)
-  return datetime.toLocaleString({ month: 'long', year: 'numeric', ...isAprilFool.value && { day: 'numeric' } })
+  return datetime.toLocaleString({
+    month: 'long',
+    year: 'numeric',
+    ...(isAprilFool.value && { day: 'numeric' })
+  })
 }
 
 function formatObsoletedBy(
-  obsoletedBy: RfcMetadata['obsoleted_by']
+  obsoletedBy: RfcCommon['obsoleted_by']
 ): VNode | undefined {
   if (!obsoletedBy || obsoletedBy.length === 0) return undefined
 
@@ -144,20 +157,21 @@ const obsoletedBy = computed(() => {
   return formatObsoletedBy(props.rfc.obsoleted_by)
 })
 
-const list1 = computed(() => [
-  formatAuthors(props.rfc.authors)
-])
+const list1 = computed(() => [formatAuthors(props.rfc.authors)])
 
-const list2 = computed(() => [
-  formatDate(props.rfc.published),
-  props.rfc.stream?.name,
-  props.rfc.area?.name
-].filter(Boolean) as string[])
+const list2 = computed(
+  () =>
+    [
+      formatDate(props.rfc.published),
+      props.rfc.stream?.name,
+      props.rfc.area?.name
+    ].filter(Boolean) as string[]
+)
 
 const tagText = computed(() => {
   const tagText = []
-  if (props.rfc.status.name) {
-    tagText.push(props.rfc.status.name)
+  if (props.rfc.status) {
+    tagText.push(props.rfc.status)
   }
   const datetime = DateTime.fromISO(props.rfc.published)
   const relativeCalendar = datetime.toRelativeCalendar()
@@ -169,6 +183,6 @@ const tagText = computed(() => {
 
 const isAprilFool = computed(() => {
   const datetime = DateTime.fromISO(props.rfc.published)
-  return (datetime.month === 4 && datetime.day === 1)
+  return datetime.month === 4 && datetime.day === 1
 })
 </script>

client/components/RFCCard.story.vue

@@ -12,7 +12,7 @@
     container-class="flex"
   >
     <template #headingTitle>
-      <component :is="formatTitle(`rfc${props.rfc.number}`)" />
+      <component :is="formatTitleAsVNode(`rfc${props.rfc.number}`)" />
     </template>
     <p
       class="ml-4 pl-4 border-l-1 border-gray-300 text-base text-blue-900 dark:text-white flex items-center"
@@ -23,14 +23,14 @@
 </template>
 
 <script setup lang="ts">
-import type { Rfc } from '../generated/red-client'
 import { infoRfcPathBuilder } from '../utilities/url'
-import { formatTitle } from '~/utilities/rfc'
+import { formatTitleAsVNode } from '~/utilities/rfc'
+import type { RfcCommon } from '~/utilities/rfc'
 import { useResponsiveModeStore } from '~/stores/responsiveMode'
 import type { HeadingLevel } from '~/utilities/html'
 
 type Props = {
-  rfc: Rfc
+  rfc: RfcCommon
   headingLevel?: HeadingLevel
 }
 

client/components/RFCCard.vue

@@ -21,7 +21,7 @@
     "
   >
     <template #headingTitle>
-      <component :is="formatTitle(`rfc${props.rfc.number}`)" />
+      <component :is="formatTitleAsVNode(`rfc${props.rfc.number}`)" />
     </template>
     <template #default>
       <RFCCardBody
@@ -34,14 +34,14 @@
 </template>
 
 <script setup lang="ts">
-import type { Rfc } from '../generated/red-client'
 import { infoRfcPathBuilder } from '../utilities/url'
-import { formatTitle } from '~/utilities/rfc'
+import { formatTitleAsVNode } from '~/utilities/rfc'
+import type { RfcCommon } from '~/utilities/rfc'
 import { useResponsiveModeStore } from '~/stores/responsiveMode'
 import type { HeadingLevel } from '~/utilities/html'
 
 type Props = {
-  rfc: Rfc
+  rfc: RfcCommon
   showAbstract?: boolean
   showTagDate?: boolean
   headingLevel?: HeadingLevel