chore: visual regression tests

client/components/IndexSubheader.vue

@@ -17,7 +17,7 @@
       <div class="self-end lg:text-right">
         <a
           href="/what"
-          class="rounded text-blue-100 lg:text-white inline-block px-5 py-3 md:-mx-5 font-bold text-nowrap hover:bg-black"
+          class="rounded text-blue-100 lg:text-white inline-block px-5 py-3 font-bold text-nowrap hover:bg-black"
         >
           What is an RFC?
           <GraphicsChevron class="-rotate-90 w-[16px] inline-block" />

client/components/RFCDocument.story.vue

@@ -0,0 +1,74 @@
+<template>
+  <Story title="RFC Document">
+    <RFCDocument
+      id="rfc1234"
+      :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"
+    />
+  </Story>
+</template>
+
+<script setup lang="ts">
+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']
+</script>

client/components/RFCMobileBanner.story.vue

@@ -0,0 +1,11 @@
+<template>
+  <Story title="RFC Mobile Banner">
+    <RFCMobileBanner :rfc-id="rfcId" :is-fixed="true" />
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { parseRFCId } from './rfc'
+
+const rfcId = parseRFCId('RFC1234')
+</script>

client/components/SectionHeader.story.vue

@@ -0,0 +1,13 @@
+<template>
+  <Story title="Section Header">
+    <SectionHeader>
+      <Heading level="1" class="w-full mt-0 mb-3 pl-5 md:p-0 text-balance">
+        Section index page
+      </Heading>
+      <p class="leading-6 mb-10 pl-5 md:p-0 md:w-1/2">
+        A Request for Comments is a publication in a series from the principal
+        technical development and standards-setting bodies for the Internet.
+      </p>
+    </SectionHeader>
+  </Story>
+</template>

client/components/Tag.story.vue

@@ -0,0 +1,20 @@
+<template>
+  <Story title="Tag(s)">
+    <Tag
+      :text="[
+        'Some',
+        '1'
+        // short title
+      ]"
+    />
+    <Tag
+      :text="[
+        'Internet Standard',
+        '1234'
+        // normal title
+      ]"
+    />
+    <Tag :text="['Internet Standard', '12345']" />
+    <Tag :text="['Internet Standard', 'A Long Title']" />
+  </Story>
+</template>

client/stores/search.ts

@@ -45,7 +45,7 @@ type SearchParams = {
 }
 
 type SearchResult = {
-  type: 'sdfsdf' // FIXME
+  type: 'sdfsdf' // TODO
 }
 
 type SearchResults = null | SearchResult[]
@@ -59,6 +59,11 @@ export const useSearchStore = defineStore('search', () => {
    * and ensures empty values (`''`) are removed from URL
    */
   function updateUrlParams(searchParams: Partial<SearchParams>) {
+    if (route.path !== '/search') {
+      // Only sync url params on '/search' route
+      return
+    }
+
     const filterEmpty = <T extends Partial<SearchParams>>(obj: T): T =>
       Object.entries(obj).reduce((acc, [key, value]) => {
         if (value !== '') {