From 85cb18f026dfdc56625a16418559e8543ff4bfd6 Mon Sep 17 00:00:00 2001
From: Matthew Holloway <matthew@holloway.co.nz>
Date: Tue, 1 Oct 2024 07:41:18 +1300
Subject: [PATCH] feat: RFC Documents (#6)

* feat: RFC Documents

* feat: RFC doc page

* chore: refactoring RFC Document

* chore: refactoring RFC tabs

* feat: dark mode and various responsive fixes

* chore: removing rfcsidebar unused

---------

Co-authored-by: Matthew Holloway <Matthew Holloway>
---
 client/components/Alert.vue                   |  32 ++++
 client/components/BodyLayout/Document.vue     |  12 ++
 client/components/Breadcrumbs.vue             |  33 +++++
 client/components/BreadcrumbsTypes.ts         |   4 +
 client/components/DiamondText.vue             |  28 ++++
 client/components/Footer.vue                  |   4 +-
 client/components/Graphics/Chevron.vue        |   4 +-
 client/components/Graphics/ExpandSidebar.vue  |  25 ++++
 client/components/Graphics/IETFMotif.vue      |  31 +---
 .../Graphics/QuestionMarkCircle.vue           |  13 ++
 client/components/HeaderSkipToContent.vue     |   2 +-
 client/components/Heading.vue                 |  10 +-
 client/components/IndexSubheader.vue          |   8 +-
 client/components/Main.vue                    |   2 +-
 client/components/RFCCard.vue                 |  29 ++--
 client/components/RFCDocument.vue             |  81 +++++++++++
 client/components/RFCDocumentBody.vue         | 137 ++++++++++++++++++
 client/components/RFCDocumentSidebar.vue      |  52 +++++++
 client/components/RFCMobileBanner.vue         |  35 +++++
 client/components/RFCTabs.vue                 |  79 ++++++++++
 client/components/Tag.vue                     |  86 ++++++++---
 client/components/VueUtils.ts                 |   4 +
 client/components/rfc.ts                      |  33 +++++
 client/layouts/default.vue                    |  10 +-
 client/layouts/white.vue                      |  20 +++
 client/pages/info/[id].vue                    |  82 +++++++++++
 client/stores/search.ts                       |   5 +-
 client/tailwind.config.js                     |   3 +-
 28 files changed, 781 insertions(+), 83 deletions(-)
 create mode 100644 client/components/Alert.vue
 create mode 100644 client/components/BodyLayout/Document.vue
 create mode 100644 client/components/Breadcrumbs.vue
 create mode 100644 client/components/BreadcrumbsTypes.ts
 create mode 100644 client/components/DiamondText.vue
 create mode 100644 client/components/Graphics/ExpandSidebar.vue
 create mode 100644 client/components/Graphics/QuestionMarkCircle.vue
 create mode 100644 client/components/RFCDocument.vue
 create mode 100644 client/components/RFCDocumentBody.vue
 create mode 100644 client/components/RFCDocumentSidebar.vue
 create mode 100644 client/components/RFCMobileBanner.vue
 create mode 100644 client/components/RFCTabs.vue
 create mode 100644 client/components/VueUtils.ts
 create mode 100644 client/components/rfc.ts
 create mode 100644 client/layouts/white.vue
 create mode 100644 client/pages/info/[id].vue

diff --git a/client/components/Alert.vue b/client/components/Alert.vue
new file mode 100644
index 0000000..9d019c2
--- /dev/null
+++ b/client/components/Alert.vue
@@ -0,0 +1,32 @@
+<template>
+  <div
+    :class="[
+      'rounded border border-l-4 px-3 py-2 my-5 ',
+      props.variant === 'warning' &&
+        'bg-pink-100 dark:bg-red-950 border-red-600',
+      props.variant === 'info' &&
+        'bg-white dark:bg-yellow-950 border-yellow-400'
+    ]"
+  >
+    <Heading
+      level="2"
+      style-level="4"
+      :class="[
+        props.variant === 'warning' && 'text-red-700 dark:text-red-200',
+        props.variant === 'info' && 'text-yellow-750 dark:text-yellow-300'
+      ]"
+    >
+      {{ props.heading }}
+    </Heading>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  variant: 'warning' | 'info'
+  heading: string
+}
+
+const props = defineProps<Props>()
+</script>
diff --git a/client/components/BodyLayout/Document.vue b/client/components/BodyLayout/Document.vue
new file mode 100644
index 0000000..122585e
--- /dev/null
+++ b/client/components/BodyLayout/Document.vue
@@ -0,0 +1,12 @@
+<template>
+  <div
+    class="w-full container m-auto flex flex-row-reverse justify-between lg:gap-5"
+  >
+    <div class="flex-1 p-3 bg-white dark:bg-black hidden lg:block">
+      <slot name="sidebar" />
+    </div>
+    <div class="flex-auto">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/client/components/Breadcrumbs.vue b/client/components/Breadcrumbs.vue
new file mode 100644
index 0000000..be6abeb
--- /dev/null
+++ b/client/components/Breadcrumbs.vue
@@ -0,0 +1,33 @@
+<template>
+  <ul class="block mt-1 -ml-2 mb-3 px-1 xs:px-0">
+    <li
+      v-for="(path, index) in props.breadcrumbItems"
+      :key="index"
+      class="inline-block"
+    >
+      <a
+        class="inline-block px-2 py-2 rounded hover:bg-gray-200 hover:text-blue-800"
+        :href="path.url"
+      >
+        {{ path.label }}
+      </a>
+      <template v-if="index >= 0 && index < props.breadcrumbItems.length - 1">
+        <GraphicsChevron
+          class="inline-block -rotate-90 text-gray-300"
+          width="14"
+          height="18"
+        />
+      </template>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import type { BreadcrumbItem } from './BreadcrumbsTypes'
+
+type Props = {
+  breadcrumbItems: BreadcrumbItem[]
+}
+
+const props = defineProps<Props>()
+</script>
diff --git a/client/components/BreadcrumbsTypes.ts b/client/components/BreadcrumbsTypes.ts
new file mode 100644
index 0000000..5c82a6f
--- /dev/null
+++ b/client/components/BreadcrumbsTypes.ts
@@ -0,0 +1,4 @@
+export type BreadcrumbItem = {
+  url: string
+  label: string
+}
diff --git a/client/components/DiamondText.vue b/client/components/DiamondText.vue
new file mode 100644
index 0000000..00a75ec
--- /dev/null
+++ b/client/components/DiamondText.vue
@@ -0,0 +1,28 @@
+<template>
+  <div
+    :class="[
+      'inline-flex flex-col justify-center items-center bg-yellow-400 dark:bg-yellow-800 text-black dark:text-white text-xs uppercase font-semibold',
+      {
+        'w-[20px] h-[20px] [clip-path:polygon(0%_50%,_50%_0%,_50%_0%,100%_50%,50%_100%,50%_100%)]':
+          props.text.length === 1,
+        'w-[25px] h-[20px] [clip-path:polygon(0%_50%,_25%_0%,_75%_0%,100%_50%,75%_100%,25%_100%)]':
+          props.text.length === 2,
+        'w-[30px] h-[20px] [clip-path:polygon(0%_50%,_10%_0%,_90%_0%,100%_50%,90%_100%,10%_100%)]':
+          props.text.length === 3
+        // longer lengths aren't specially styled
+      },
+      props.class
+    ]"
+  >
+    {{ props.text }}
+  </div>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  text: string
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
diff --git a/client/components/Footer.vue b/client/components/Footer.vue
index bc53e51..81d2404 100644
--- a/client/components/Footer.vue
+++ b/client/components/Footer.vue
@@ -6,13 +6,13 @@
           rfc-editor.org is maintained by the
           <a
             href="https://www.ietf.org/"
-            class="text-blue-100 font-semibold text-nowrap"
+            class="text-blue-100 font-semibold md:text-nowrap"
             >Internet Engineering Task Force</a
           >
           and funded by the
           <a
             href="https://www.internetsociety.org/"
-            class="text-blue-100 font-semibold text-nowrap"
+            class="text-blue-100 font-semibold md:text-nowrap"
           >
             Internet Society
           </a>
diff --git a/client/components/Graphics/Chevron.vue b/client/components/Graphics/Chevron.vue
index 4b51326..2ad4944 100644
--- a/client/components/Graphics/Chevron.vue
+++ b/client/components/Graphics/Chevron.vue
@@ -15,12 +15,10 @@
 </template>
 
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-
 type Props = {
   width?: string
   height?: string
-  class?: HTMLAttributes['class']
+  class?: string | string[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/client/components/Graphics/ExpandSidebar.vue b/client/components/Graphics/ExpandSidebar.vue
new file mode 100644
index 0000000..d39cb5f
--- /dev/null
+++ b/client/components/Graphics/ExpandSidebar.vue
@@ -0,0 +1,25 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    role="img"
+    aria-hidden="true"
+    :class="props.class"
+  >
+    <title>Expand sidebar</title>
+    <path
+      d="M4.94598 8.47687L8.16206 11.8124C8.28266 11.9375 8.44347 12 8.60427 12C8.78518 12 8.94598 11.9375 9.06658 11.8124C9.32789 11.5622 9.32789 11.1244 9.06658 10.8743L6.95603 8.66449H13.1068C13.4686 8.66449 13.75 8.37264 13.75 7.99739C13.75 7.643 13.4686 7.33029 13.1068 7.33029H6.95603L9.06658 5.14137C9.32789 4.89121 9.32789 4.45342 9.06658 4.20326C8.82538 3.93225 8.40327 3.93225 8.16206 4.20326L4.94598 7.53876C4.68467 7.78892 4.68467 8.22671 4.94598 8.47687Z"
+    />
+    <rect width="1.5" height="10" transform="matrix(-1 0 0 1 3.75 3)" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
diff --git a/client/components/Graphics/IETFMotif.vue b/client/components/Graphics/IETFMotif.vue
index 321dd51..54dcf55 100644
--- a/client/components/Graphics/IETFMotif.vue
+++ b/client/components/Graphics/IETFMotif.vue
@@ -2,36 +2,21 @@
   <svg
     :width="props.width"
     :height="props.height"
-    viewBox="130 0 1190 1"
-    fill="none"
+    viewBox="0 0 475.29364 346.05695"
     xmlns="http://www.w3.org/2000/svg"
     :class="['pointer-events-none', props.class]"
+    fill="currentColor"
     aria-hidden="true"
   >
     <g :opacity="props.opacity">
-      <rect
-        x="528.128"
-        y="-313"
-        width="296.708"
-        height="746.886"
-        transform="rotate(45 528.128 -133)"
-        fill="currentColor"
+      <path
+        d="M 216.6199,2.4865995 5.794542,213.0781 89.851776,296.95018 300.68055,86.550968 Z"
       />
-      <rect
-        x="753.214"
-        y="-88"
-        width="296.708"
-        height="473.832"
-        transform="rotate(45 753.214 102.32)"
-        fill="currentColor"
+      <path
+        d="M 171.87956,229.45199 306.68695,95.278897 390.20493,179.88715 256.09455,313.8555 Z"
       />
-      <rect
-        x="979.621"
-        y="140"
-        width="296.708"
-        height="261.464"
-        transform="rotate(45 979.621 337.641)"
-        fill="currentColor"
+      <path
+        d="m 321.40782,263.69426 74.58039,-74.33433 83.68632,83.66101 -73.60691,74.10996 z"
       />
     </g>
   </svg>
diff --git a/client/components/Graphics/QuestionMarkCircle.vue b/client/components/Graphics/QuestionMarkCircle.vue
new file mode 100644
index 0000000..30bd1e2
--- /dev/null
+++ b/client/components/Graphics/QuestionMarkCircle.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="21"
+    height="21"
+    viewBox="0 0 21 21"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.69278 15.4998H11.3594V13.8332H9.69278V15.4998ZM10.5261 2.1665C9.43176 2.1665 8.34813 2.38205 7.33708 2.80084C6.32604 3.21963 5.40738 3.83346 4.63356 4.60728C3.07075 6.17008 2.19278 8.2897 2.19278 10.4998C2.19278 12.71 3.07075 14.8296 4.63356 16.3924C5.40738 17.1662 6.32604 17.78 7.33708 18.1988C8.34813 18.6176 9.43176 18.8332 10.5261 18.8332C12.7362 18.8332 14.8559 17.9552 16.4187 16.3924C17.9815 14.8296 18.8594 12.71 18.8594 10.4998C18.8594 9.40549 18.6439 8.32185 18.2251 7.31081C17.8063 6.29976 17.1925 5.3811 16.4187 4.60728C15.6448 3.83346 14.7262 3.21963 13.7151 2.80084C12.7041 2.38205 11.6205 2.1665 10.5261 2.1665ZM10.5261 17.1665C6.85111 17.1665 3.85945 14.1748 3.85945 10.4998C3.85945 6.82484 6.85111 3.83317 10.5261 3.83317C14.2011 3.83317 17.1928 6.82484 17.1928 10.4998C17.1928 14.1748 14.2011 17.1665 10.5261 17.1665ZM10.5261 5.49984C9.64206 5.49984 8.79421 5.85103 8.16909 6.47615C7.54397 7.10127 7.19278 7.94911 7.19278 8.83317H8.85945C8.85945 8.39114 9.03504 7.96722 9.3476 7.65466C9.66016 7.3421 10.0841 7.1665 10.5261 7.1665C10.9681 7.1665 11.3921 7.3421 11.7046 7.65466C12.0172 7.96722 12.1928 8.39114 12.1928 8.83317C12.1928 10.4998 9.69278 10.2915 9.69278 12.9998H11.3594C11.3594 11.1248 13.8594 10.9165 13.8594 8.83317C13.8594 7.94911 13.5083 7.10127 12.8831 6.47615C12.258 5.85103 11.4102 5.49984 10.5261 5.49984Z"
+    />
+  </svg>
+</template>
diff --git a/client/components/HeaderSkipToContent.vue b/client/components/HeaderSkipToContent.vue
index 924b765..13e4cdd 100644
--- a/client/components/HeaderSkipToContent.vue
+++ b/client/components/HeaderSkipToContent.vue
@@ -1,7 +1,7 @@
 <template>
   <a
     href="#main"
-    class="absolute bg-white text-black left-[40%] m-2 px-3 py-1 will-change-transform motion-safe:transition-transform -translate-y-10 focus:translate-y-0 hover:translate-y-0"
+    class="absolute bg-white text-black left-[40%] m-2 px-3 py-1 will-change-transform motion-safe:transition-transform -translate-y-[4em] focus:translate-y-0"
   >
     Skip to content
   </a>
diff --git a/client/components/Heading.vue b/client/components/Heading.vue
index 8e10d7e..ac90591 100644
--- a/client/components/Heading.vue
+++ b/client/components/Heading.vue
@@ -1,11 +1,7 @@
 <template>
   <component
     :is="`h${props.level}`"
-    :class="[
-      props.class,
-      headingStyles[`h${props.styleLevel || props.level}`],
-      'text-grey-100'
-    ]"
+    :class="[props.class, headingStyles[`h${props.styleLevel || props.level}`]]"
   >
     <GraphicsIETFMotif
       v-if="hasIcon"
@@ -19,6 +15,8 @@
 </template>
 
 <script setup lang="ts">
+import type { VueStyleClass } from './VueUtils'
+
 type Props = {
   level: Level
   /**
@@ -39,7 +37,7 @@ type Props = {
    * * https://dequeuniversity.com/rules/axe/3.0/page-has-heading-one
    */
   styleLevel?: Level
-  class?: string
+  class?: VueStyleClass
   hasIcon?: boolean
 }
 
diff --git a/client/components/IndexSubheader.vue b/client/components/IndexSubheader.vue
index 2a30469..6781f26 100644
--- a/client/components/IndexSubheader.vue
+++ b/client/components/IndexSubheader.vue
@@ -2,15 +2,11 @@
   <div class="container mx-auto">
     <div class="absolute pointer-events-none inset-0 overflow-hidden">
       <GraphicsIETFMotif
-        width="500"
-        height="400"
-        class="absolute bottom-0 left-[150px]"
+        class="absolute left-[57vw] top-[25vh] w-[30vw] h-[30vh]"
         :opacity="0.04"
       />
       <GraphicsIETFMotif
-        width="200"
-        height="200"
-        class="absolute bottom-0 left-[525px]"
+        class="absolute w-[80vw] h-[80vh] bottom-0 left-[0px]"
         :opacity="0.04"
       />
     </div>
diff --git a/client/components/Main.vue b/client/components/Main.vue
index b3ea88f..63b5931 100644
--- a/client/components/Main.vue
+++ b/client/components/Main.vue
@@ -1,5 +1,5 @@
 <template>
-  <main id="main" tabindex="0" class="flex-1 container mx-auto mb-10 visible">
+  <main id="main" tabindex="0" class="flex-1 w-full mx-auto mb-10 visible">
     <slot />
   </main>
 </template>
diff --git a/client/components/RFCCard.vue b/client/components/RFCCard.vue
index d0001e2..c622ffc 100644
--- a/client/components/RFCCard.vue
+++ b/client/components/RFCCard.vue
@@ -16,7 +16,7 @@
       <slot />
     </p>
     <div class="my-4">
-      <Tag :tag="props.tag" />
+      <Tag :text="[props.tag.type, formatDate(props.tag.date)]" />
     </div>
     <ul
       v-if="props.body"
@@ -90,6 +90,8 @@
 </template>
 
 <script setup lang="ts">
+import { DateTime } from 'luxon'
+import { parseRFCId } from './rfc'
 import { useResponsiveModeStore } from '~/stores/responsiveMode'
 
 type Props = {
@@ -108,6 +110,11 @@ type Props = {
 
 const props = defineProps<Props>()
 
+function formatDate(date: Date) {
+  const luxonDate = DateTime.fromJSDate(date)
+  return luxonDate.toRelativeCalendar() ?? ''
+}
+
 const isMobileAbstractOpen = ref<boolean>(false)
 
 const responsiveModeStore = useResponsiveModeStore()
@@ -117,21 +124,11 @@ const abstractDomId = computed(
 )
 
 const formatTitle = (title: string) => {
-  // split by groups of letters or numbers
-  // ie "RFC0000" becomes ["RFC", "0000"]
-  const parts = title.match(/\d+|\D+/g)
-  if (parts === null) {
-    return title
-  }
+  const parts = parseRFCId(title)
 
-  return h(
-    'span',
-    parts.map((part) => {
-      if (part.match(/\d+/)) {
-        return h('span', part.toString())
-      }
-      return h('span', { class: 'font-normal' }, part.toString())
-    })
-  )
+  return h('span', [
+    h('span', { class: 'font-normal' }, parts.type),
+    h('span', parts.number)
+  ])
 }
 </script>
diff --git a/client/components/RFCDocument.vue b/client/components/RFCDocument.vue
new file mode 100644
index 0000000..c331fe8
--- /dev/null
+++ b/client/components/RFCDocument.vue
@@ -0,0 +1,81 @@
+<template>
+  <BodyLayoutDocument>
+    <template #sidebar>
+      <RFCDocumentSidebar
+        :id="props.id"
+        v-model:is-modal-open="isModalOpen"
+        v-model:selected-tab="selectedTab"
+        :goto-errata="gotoErrata"
+        :errata="props.errata"
+        :change-tab="changeTab"
+      />
+    </template>
+    <RFCDocumentBody
+      :id="props.id"
+      v-model:is-modal-open="isModalOpen"
+      :intro="props.intro"
+      :pages-html="props.pagesHtml"
+      :breadcrumb-items="breadcrumbItems"
+      :goto-errata="gotoErrata"
+      :errata="props.errata"
+      :obsoleted-by="props.obsoletedBy"
+      :see-also="props.seeAlso"
+      :change-tab="changeTab"
+    />
+  </BodyLayoutDocument>
+</template>
+
+<script setup lang="ts">
+import type { BreadcrumbItem } from '~/components/BreadcrumbsTypes'
+
+type Props = {
+  id: string
+  meta?: ReturnType<typeof h>
+  intro: string
+  obsoletedBy?: string
+  seeAlso?: string
+  pagesHtml: string[]
+  errata: string[]
+}
+
+const props = defineProps<Props>()
+
+const selectedTab = ref(0)
+
+function changeTab(index: number) {
+  selectedTab.value = index
+}
+
+function gotoErrata() {
+  const responsiveModeStore = useResponsiveModeStore()
+
+  if (responsiveModeStore.responsiveMode === 'Mobile') {
+    isModalOpen.value = true
+  }
+
+  selectedTab.value = 2
+
+  nextTick(() => {
+    // there are potentially two in the DOM but only one should be visible
+    const errataTabs =
+      document.querySelectorAll<HTMLElement>('[data-errata-tab]')
+
+    function focusIfVisible(elm: HTMLElement) {
+      if (elm.checkVisibility()) {
+        elm.focus()
+      }
+    }
+
+    if (errataTabs) {
+      errataTabs.forEach(focusIfVisible)
+    }
+  })
+}
+
+const breadcrumbItems: BreadcrumbItem[] = [
+  { url: '/', label: 'Home' },
+  { url: '/info', label: 'Documents' }
+]
+
+const isModalOpen = ref(false)
+</script>
diff --git a/client/components/RFCDocumentBody.vue b/client/components/RFCDocumentBody.vue
new file mode 100644
index 0000000..173f805
--- /dev/null
+++ b/client/components/RFCDocumentBody.vue
@@ -0,0 +1,137 @@
+<template>
+  <GraphicsIETFMotif
+    class="absolute mt-8 -mb-[600px] left-0 w-[80vw] h-[80vh] max-h-[600px]"
+    :opacity="0.02"
+  />
+
+  <Breadcrumbs :breadcrumb-items="breadcrumbItems" />
+
+  <button
+    type="button"
+    class="fixed right-0 rounded-l bg-white dark:bg-black border border-gray-200 align-middle flex items-center p-1 pr-2 lg:hidden"
+    aria-label="Open details modal"
+    @click="isModalOpen = true"
+  >
+    <GraphicsExpandSidebar class="inline-block mr-1" />
+    Info
+  </button>
+
+  <Heading level="1" class="mb-2 px-1 xs:px-0">
+    {{ rfcId.type }} {{ rfcId.number }}
+  </Heading>
+
+  <RFCMobileBanner :rfc-id="rfcId" :is-fixed="true" />
+
+  <p v-if="props.intro" class="px-1 xs:px-0 mb-2 text-base lg:text-xl">
+    {{ props.intro }}
+  </p>
+
+  <div class="flex flex-row justify-between items-center flex-wrap">
+    <div class="align-middle">
+      <Tag
+        :text="
+          rfcId.type === RFC
+            ? ['Internet Standard', props.meta ?? rfcId.number]
+            : [rfcId.type, rfcId.number]
+        "
+      />
+      <HeadlessPopover class="inline align-middle">
+        <HeadlessPopoverButton
+          aria-label="Details of category"
+          class="inline-block text-blue-300 dark:text-blue-100 p-2 ml-1"
+        >
+          <GraphicsQuestionMarkCircle />
+        </HeadlessPopoverButton>
+
+        <HeadlessPopoverPanel
+          class="absolute z-10 shadow-md lg:w-auto bg-white border rounded dark:bg-black dark:border-white p-2"
+        >
+          <p class="leading-6">
+            For the definition of <b>Status</b>, see
+            <a href="/info/rfc2026">RFC 2026</a>.
+          </p>
+          <p class="leading-6">
+            For the definition of <b>Stream</b>, see
+            <a href="/info/rfc8729">RFC 8729</a>.
+          </p>
+        </HeadlessPopoverPanel>
+      </HeadlessPopover>
+    </div>
+
+    <div v-if="props.errata">
+      <button
+        type="button"
+        class="text-sm underline text-blue-300 dark:text-blue-100 p-2"
+        @click="gotoErrata"
+      >
+        {{ props.errata.length }}
+
+        <template v-if="props.errata.length === 1">erratum</template>
+        <template v-else>errata</template>
+      </button>
+    </div>
+  </div>
+
+  <Alert
+    v-if="props.obsoletedBy && obsoletedByRFCId"
+    variant="warning"
+    heading="This RFC is now obsolete"
+  >
+    <p class="text-sm">
+      For more information, please refer to
+      <a :href="`/info/${props.obsoletedBy}`"
+        >{{ obsoletedByRFCId.type }} {{ obsoletedByRFCId.number }}
+        {{ obsoletedByRFCId.title }}
+      </a>
+    </p>
+  </Alert>
+
+  <Alert
+    v-if="props.seeAlso"
+    variant="info"
+    heading="This RFC updates the following RFC:"
+  >
+    <p class="text-sm">
+      See also
+      <a href="/info/rfc9052"
+        >RFC 9052 CBOR Object Signing and Encryption (COSE): Structures and
+        Process</a
+      >
+    </p>
+  </Alert>
+
+  <div
+    v-for="(page, index) in props.pagesHtml"
+    :key="index"
+    class="mt-10 text-[9px] sm:text-xs lg:text-sm"
+  >
+    <div v-html="page" class="font-mono whitespace-pre-wrap px-3 xs:px-0" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { parseRFCId, RFC } from './rfc'
+import type { BreadcrumbItem } from '~/components/BreadcrumbsTypes'
+
+type Props = {
+  id: string
+  intro: string
+  errata: string[]
+  gotoErrata: () => void
+  meta?: ReturnType<typeof h>
+  obsoletedBy?: string
+  seeAlso?: string
+  pagesHtml: string[]
+  breadcrumbItems: BreadcrumbItem[]
+}
+
+const props = defineProps<Props>()
+
+const isModalOpen = defineModel<boolean>('isModalOpen')
+
+const rfcId = computed(() => parseRFCId(props.id))
+
+const obsoletedByRFCId = computed(() =>
+  props.obsoletedBy ? parseRFCId(props.obsoletedBy) : undefined
+)
+</script>
diff --git a/client/components/RFCDocumentSidebar.vue b/client/components/RFCDocumentSidebar.vue
new file mode 100644
index 0000000..8912e9e
--- /dev/null
+++ b/client/components/RFCDocumentSidebar.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="w-full">
+    <HeadlessDialog
+      :open="isModalOpen"
+      class="absolute inset-0 rounded bg-white dark:bg-black w-full h-full"
+      @close="isModalOpen = false"
+    >
+      <HeadlessDialogPanel>
+        <RFCMobileBanner :rfc-id="rfcId" :is-fixed="false">
+          <button
+            class="bg-white rounded-l text-black p-2 flex items-center"
+            aria-label="Close"
+            @click="isModalOpen = false"
+          >
+            <GraphicsExpandSidebar class="inline-block mr-1 rotate-180" />
+          </button>
+        </RFCMobileBanner>
+        <div class="px-2">
+          <RFCTabs
+            ref="mobileRFCTabs"
+            v-model:selected-tab="selectedTab"
+            :errata="props.errata"
+          />
+        </div>
+      </HeadlessDialogPanel>
+    </HeadlessDialog>
+    <div class="hidden lg:block">
+      <RFCTabs
+        ref="desktopRFCTabs"
+        v-model:selected-tab="selectedTab"
+        :errata="props.errata"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { parseRFCId } from './rfc'
+
+type Props = {
+  id: string
+  errata: string[]
+  gotoErrata: () => void
+}
+
+const isModalOpen = defineModel<boolean>('isModalOpen')
+
+const selectedTab = defineModel<number>('selectedTab')
+
+const props = defineProps<Props>()
+const rfcId = computed(() => parseRFCId(props.id))
+</script>
diff --git a/client/components/RFCMobileBanner.vue b/client/components/RFCMobileBanner.vue
new file mode 100644
index 0000000..419fb03
--- /dev/null
+++ b/client/components/RFCMobileBanner.vue
@@ -0,0 +1,35 @@
+<template>
+  <div
+    :class="[
+      'flex flex-row w-full justify-between items-center py-1 bg-[#002D3CE5] text-white dark:bg-black dark:border',
+      props.isFixed && 'fixed bottom-0 left-0 right-0 lg:hidden'
+    ]"
+  >
+    <div
+      :class="[
+        'xs:leading-5 sm:leading-6',
+        props.isFixed && 'container mx-auto p-2',
+        !props.isFixed && 'p-2'
+      ]"
+    >
+      <div class="font-bold">
+        {{ props.rfcId.type }} {{ props.rfcId.number }}
+      </div>
+      <div v-if="props.rfcId.type === RFC">Internet Standard</div>
+      <div class="text-red-400">Obsoleted by RFC 9052 CBOR</div>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RFC } from './rfc'
+import type { parseRFCId } from './rfc'
+
+type Props = {
+  isFixed: boolean
+  rfcId: ReturnType<typeof parseRFCId>
+}
+
+const props = defineProps<Props>()
+</script>
diff --git a/client/components/RFCTabs.vue b/client/components/RFCTabs.vue
new file mode 100644
index 0000000..cd51ede
--- /dev/null
+++ b/client/components/RFCTabs.vue
@@ -0,0 +1,79 @@
+<template>
+  <HeadlessTabGroup :selected-index="selectedTab" @change="changeTab">
+    <HeadlessTabList class="flex gap-7 border-b mr-6">
+      <HeadlessTab v-slot="{ selected }" as="template">
+        <button
+          type="button"
+          :class="[
+            DEFAULT_CLASS,
+            { [SELECTED_CLASS]: selected, [UNSELECTED_CLASS]: !selected }
+          ]"
+        >
+          Contents
+        </button>
+      </HeadlessTab>
+      <HeadlessTab v-slot="{ selected }" as="template">
+        <button
+          type="button"
+          :class="[
+            DEFAULT_CLASS,
+            { [SELECTED_CLASS]: selected, [UNSELECTED_CLASS]: !selected }
+          ]"
+        >
+          About this RFC
+        </button>
+      </HeadlessTab>
+      <HeadlessTab v-if="props.errata" v-slot="{ selected }" as="template">
+        <button
+          type="button"
+          :class="[
+            DEFAULT_CLASS,
+            { [SELECTED_CLASS]: selected, [UNSELECTED_CLASS]: !selected }
+          ]"
+          data-errata-tab
+        >
+          <template v-if="props.errata.length === 1">Erratum</template>
+          <template v-else>Errata</template>
+
+          <DiamondText
+            class="lg:absolute ml-1"
+            :text="props.errata.length.toString()"
+          />
+        </button>
+      </HeadlessTab>
+    </HeadlessTabList>
+    <HeadlessTabPanels class="">
+      <HeadlessTabPanel>Content 1</HeadlessTabPanel>
+      <HeadlessTabPanel>Content 2</HeadlessTabPanel>
+      <HeadlessTabPanel v-if="props.errata">
+        <ul>
+          <li
+            v-for="(errataItem, errataIndex) in props.errata"
+            :key="errataIndex"
+          >
+            {{ errataItem }}
+          </li>
+        </ul>
+      </HeadlessTabPanel>
+    </HeadlessTabPanels>
+  </HeadlessTabGroup>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  errata?: string[]
+}
+
+const props = defineProps<Props>()
+
+const selectedTab = defineModel<number>('selectedTab')
+
+function changeTab(index: number) {
+  selectedTab.value = index
+}
+
+const DEFAULT_CLASS = 'py-4 whitespace-nowrap'
+const SELECTED_CLASS =
+  'border-b-2 border-b-blue-900 dark:border-b-white font-medium'
+const UNSELECTED_CLASS = 'text-gray-800 dark:text-gray-300'
+</script>
diff --git a/client/components/Tag.vue b/client/components/Tag.vue
index 0a0b5f7..76b74a5 100644
--- a/client/components/Tag.vue
+++ b/client/components/Tag.vue
@@ -1,36 +1,82 @@
 <template>
   <div
     :class="[
-      'pointer-events-none inline-flex items-center bg-blue-200 dark:bg-blue-800 text-white text-xs uppercase font-semibold [clip-path:polygon(0%_50%,_6%_0%,_96%_0%,100%_50%,96%_100%,6%_100%)]',
-      props.class
+      'pointer-events-none inline-flex items-center bg-blue-200 dark:bg-blue-800 text-white text-xs uppercase font-semibold',
+      props.class,
+      {
+        '[clip-path:polygon(0%_50%,_6%_0%,_96%_0%,100%_50%,96%_100%,6%_100%)]':
+          totalTextLength < 5,
+        '[clip-path:polygon(0%_50%,_10%_0%,_90%_0%,100%_50%,90%_100%,10%_100%)]':
+          totalTextLength >= 5 && totalTextLength <= 10,
+        '[clip-path:polygon(0%_50%,_7%_0%,_93%_0%,100%_50%,93%_100%,7%_100%)]':
+          totalTextLength > 10 && totalTextLength <= 15,
+        '[clip-path:polygon(0%_50%,_5%_0%,_95%_0%,100%_50%,95%_100%,5%_100%)]':
+          totalTextLength > 15
+      }
     ]"
   >
-    <span class="pl-5 pr-2 py-2 whitespace-nowrap">
-      {{ props.tag.type }}
-    </span>
-    <span
-      class="bg-yellow-400 dark:bg-yellow-700 dark:text-white text-black pl-2 pr-5 py-2"
-    >
-      {{ formatDate(props.tag.date) }}
-    </span>
+    <template v-if="props.text.length === 1">
+      <span class="px-3 py-1 whitespace-nowrap">
+        <template v-if="typeof props.text[0] === 'string'">
+          {{ props.text[0] }}
+        </template>
+        <template v-else>
+          <component :is="props.text[0]" />
+        </template>
+      </span>
+    </template>
+    <template v-else-if="props.text.length === 2">
+      <span class="pl-5 pr-2 py-2 whitespace-nowrap">
+        <template v-if="typeof props.text[0] === 'string'">
+          {{ props.text[0] }}
+        </template>
+        <template v-else>
+          <component :is="props.text[0]" />
+        </template>
+      </span>
+      <span
+        class="bg-yellow-400 dark:bg-yellow-700 dark:text-white text-black pl-2 pr-5 py-2"
+      >
+        <template v-if="typeof props.text[1] === 'string'">
+          {{ props.text[1] }}
+        </template>
+        <template v-else>
+          <component :is="props.text[1]" />
+        </template>
+      </span>
+    </template>
+    <template v-else>
+      <!-- you'll have to add support for this yourself -->
+      {{ props.text }}
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { DateTime } from 'luxon'
-
 type Props = {
-  tag: {
-    type: string
-    date: Date
-  }
+  text: (string | ReturnType<typeof h>)[]
   class?: string
 }
 
-function formatDate(date: Date) {
-  const luxonDate = DateTime.fromJSDate(date)
-  return luxonDate.toRelativeCalendar()
+const props = defineProps<Props>()
+
+// Is this safe? It seems to work
+function getText(obj: ReturnType<typeof h>): string {
+  if (typeof obj === 'string') {
+    return obj
+  } else if (typeof obj.children === 'string') {
+    return obj.children
+  } else if (Array.isArray(obj.children)) {
+    return obj.children
+      .map((item) => getText(item as ReturnType<typeof h>))
+      .join('')
+  }
+  return ''
 }
 
-const props = defineProps<Props>()
+const totalTextLength = computed(() =>
+  props.text.reduce((acc, item): number => {
+    return acc + (typeof item === 'string' ? item.length : getText(item).length)
+  }, 0)
+)
 </script>
diff --git a/client/components/VueUtils.ts b/client/components/VueUtils.ts
new file mode 100644
index 0000000..8b8fe9b
--- /dev/null
+++ b/client/components/VueUtils.ts
@@ -0,0 +1,4 @@
+export type VueStyleClass =
+  | string
+  | (string | boolean)[]
+  | Record<string, boolean | undefined>
diff --git a/client/components/rfc.ts b/client/components/rfc.ts
new file mode 100644
index 0000000..bcf7c41
--- /dev/null
+++ b/client/components/rfc.ts
@@ -0,0 +1,33 @@
+type RFCId = {
+  type: string | typeof RFC
+  number: string
+  title?: string
+}
+
+export const RFC = 'RFC'
+
+export const parseRFCId = (title: string): RFCId => {
+  // split by groups of letters or numbers
+  // ie "RFC0000" becomes ["RFC", "0000"]
+  const parts = title.match(/\d+|\D+/g)
+
+  if (parts?.length === 2) {
+    return {
+      type: parts[0].toUpperCase(),
+      number: parts[1]
+    }
+  }
+
+  if (parts?.length === 3) {
+    return {
+      type: parts[0].toUpperCase(),
+      number: parts[1],
+      title: parts[2]
+    }
+  }
+
+  return {
+    type: 'unknown',
+    number: title
+  }
+}
diff --git a/client/layouts/default.vue b/client/layouts/default.vue
index 438ba73..e1fae99 100644
--- a/client/layouts/default.vue
+++ b/client/layouts/default.vue
@@ -3,13 +3,21 @@
     <Header>
       <slot name="subheader"></slot>
     </Header>
-    <Main>
+    <Main :class="props.mainClass">
       <slot />
     </Main>
     <Footer />
   </div>
 </template>
 
+<script setup lang="ts">
+type Props = {
+  mainClass?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
 <style>
 html {
   /* https://fonts.nuxt.com/get-started/configuration */
diff --git a/client/layouts/white.vue b/client/layouts/white.vue
new file mode 100644
index 0000000..14bd725
--- /dev/null
+++ b/client/layouts/white.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="flex flex-col min-h-[100vh]">
+    <Header>
+      <slot name="subheader"></slot>
+    </Header>
+    <div class="bg-white dark:bg-black flex-1">
+      <Main>
+        <slot />
+      </Main>
+    </div>
+    <Footer />
+  </div>
+</template>
+
+<style>
+html {
+  /* https://fonts.nuxt.com/get-started/configuration */
+  font-family: 'Inter', sans-serif;
+}
+</style>
diff --git a/client/pages/info/[id].vue b/client/pages/info/[id].vue
new file mode 100644
index 0000000..93315a5
--- /dev/null
+++ b/client/pages/info/[id].vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="min-h-[100vh]">
+    <NuxtLayout name="white">
+      <RFCDocument
+        :id="route.params.id.toString()"
+        :meta="
+          h('span', ['part of ', h('a', { href: '/info/std96' }, ['STD 96'])])
+        "
+        intro="CBOR Object Signing and Encryption (COSE): Countersignatures"
+        :pages-html="pagesHtml"
+        :errata="errata"
+        obsoleted-by="RFC9052CBOR"
+        see-also="RFC9052CBOR"
+      />
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+
+const pagesHtml = [
+  `Network Working Group                                      J. Bouknight
+Request for Comments: 76                                      J. Madden
+NIC 5180                                                    G. Grossman
+                                                 University of Illinois
+                                                        28 October 1970
+
+
+               <span class="h1">Connection-By-Name: User-Oriented Protocol</span>
+
+
+<span class="h2"><a class="selflink" id="appendix-I" href="#appendix-I">I</a>. Introduction</span>
+
+   Shortly after the first of the year, 1971, the Center for Advanced
+   Computation (CAC) at the University of Illinois will begin to use the
+   facilities of the ARPA network.  We are the first of a small class of
+   network nodes whose chief characteristic is that the node is a port
+   to the network only.  All computational power for these nodes will be
+   taken from other nodes on the network, ILLIAC IV for example.
+
+   An important characteristic of most of the users at our Center is a
+   lack of sophistication about data communication techniques and
+   practices.  The user will eventually be in the majority of those
+   using the network from all nodes but the problem is ours, almost from
+   the start.
+
+   In our discussions with our prospective users of the network as we
+   designed our port facility, we found that the greatest confusion and
+   consternation arose over having to deal with network protocol at the
+   "nitty-gritty" level of sockets, links, etc.  While most of them have
+   been acclimated to computer systems at the file and device-by-name
+   level where the software system handles details, here on the current
+   version of the network, the user handles all details.
+
+   Thus, we were compelled to seek a user level interface to network
+   protocol where all user protocol is handled symbolically with system
+   procedures making the translation into host-to-host protocol.
+
+   Currently, connections are established by exchange of known socket
+   numbers for the four loose ends of the connection.  This requires
+   either that the user or process always know all socket numbers he
+   will use at his or other installations OR that his NCP (and/or
+   related software) remember them for him, allowing him to reference
+   them symbolically.
+
+   We propose a more general solution to the "telephone book" approach
+   of obtaining socket numbers for user or processes.  Only the host, at
+   each site, knows its socket number space at any given instant in time
+   as well as the status of the user or process to which a socket number
+
+
+
+<span class="grey">Bouknight, et al.                                               [Page 1]</span>`
+]
+
+const errata = ['something', 'something else', 'and something else']
+
+definePageMeta({
+  layout: false
+})
+</script>
diff --git a/client/stores/search.ts b/client/stores/search.ts
index a171f30..0446b2d 100644
--- a/client/stores/search.ts
+++ b/client/stores/search.ts
@@ -59,7 +59,7 @@ export const useSearchStore = defineStore('search', () => {
    * and ensures empty values (`''`) are removed from URL
    */
   function updateUrlParams(searchParams: Partial<SearchParams>) {
-    const filterNull = <T extends Partial<SearchParams>>(obj: T): T =>
+    const filterEmpty = <T extends Partial<SearchParams>>(obj: T): T =>
       Object.entries(obj).reduce((acc, [key, value]) => {
         if (value !== '') {
           acc[key as keyof SearchParams] = value
@@ -67,7 +67,7 @@ export const useSearchStore = defineStore('search', () => {
         return acc
       }, {} as T)
 
-    const query = filterNull({
+    const query = filterEmpty({
       ...route.query,
       ...searchParams
     })
@@ -231,7 +231,6 @@ export function stringifyDate(date: Date | undefined): string {
   if (!date) {
     return ''
   }
-
   return formatDateString(date.getFullYear(), date.getMonth() + 1)
 }
 
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 30f95ae..6e8768d 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -17,7 +17,8 @@ export default {
           950: '#00101C'
         },
         yellow: {
-          400: '#FFD13E'
+          400: '#FFD13E',
+          750: '#A78201'
         }
       }
     }