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

@@ -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>

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>

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>

client/components/BreadcrumbsTypes.ts

@@ -0,0 +1,4 @@
+export type BreadcrumbItem = {
+  url: string
+  label: string
+}

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>

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>

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>(), {

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>

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>

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>

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>

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
 }
 

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>

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>

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>