Merge branch 'main' into live-asciidoc-notes

app/components/Header.tsx

@@ -28,7 +28,7 @@ export type SmallRfdItems = {
 }
 
 export default function Header({ currentRfd }: { currentRfd?: RfdItem }) {
-  const { user, rfds, isLocalMode, inlineComments } = useRootLoaderData()
+  const { user, rfds, localMode, inlineComments } = useRootLoaderData()
 
   const fetcher = useFetcher()
 
@@ -44,7 +44,7 @@ export default function Header({ currentRfd }: { currentRfd?: RfdItem }) {
     fetcher.submit({}, { method: 'post', action: '/logout' })
   }
 
-  const returnTo = currentRfd ? `/rfd/${currentRfd.number_string}` : '/'
+  const returnTo = currentRfd ? `/rfd/${currentRfd.formattedNumber}` : '/'
 
   const [open, setOpen] = useState(false)
 
@@ -106,11 +106,7 @@ export default function Header({ currentRfd }: { currentRfd?: RfdItem }) {
                 <DropdownItem onSelect={toggleInlineComments}>
                   {inlineComments ? 'Hide' : 'Show'} inline comments
                 </DropdownItem>
-                {isLocalMode ? (
-                  <></>
-                ) : (
-                  <DropdownItem onSelect={logout}>Log out</DropdownItem>
-                )}
+                {localMode ? <></> : <DropdownItem onSelect={logout}>Log out</DropdownItem>}
               </DropdownMenu>
             </Dropdown.Root>
           ) : (

app/components/Search.tsx

@@ -444,35 +444,36 @@ const RFDPreview = ({ number }: { number: number }) => {
           <div className="flex h-6 items-center border-b px-3 text-mono-xs border-b-secondary">
             <div className="text-quaternary">Updated:</div>
             <div className="ml-1 text-default">
-              {dayjs(rfd.commit_date).format('YYYY/MM/DD h:mm A')}
+              {dayjs(rfd.committedAt).format('YYYY/MM/DD h:mm A')}
             </div>
           </div>
 
           <div className="flex w-full flex-col items-start p-6">
-            <StatusBadge label={rfd.state} />
+            {rfd.state && <StatusBadge label={rfd.state} />}
             <div className="mt-2 !text-[32px] !leading-[1.15] text-sans-3xl text-raise">
               {rfd.title}
             </div>
             <ul className="mt-6 w-full">
-              {rfd.toc.map(
-                (item) =>
-                  item.level === 1 && (
-                    <div className="w-full border-b py-2 border-b-default" key={item.id}>
-                      <Link
-                        to={`/rfd/${rfd.number}#${item.id}`}
-                        className="block"
-                        prefetch="intent"
-                      >
-                        <DialogDismiss className="text-left">
-                          <li
-                            className="text-sans-sm text-default hover:text-default children:!text-sans-sm"
-                            dangerouslySetInnerHTML={{ __html: item.title }}
-                          />
-                        </DialogDismiss>
-                      </Link>
-                    </div>
-                  ),
-              )}
+              {rfd.toc &&
+                rfd.toc.map(
+                  (item) =>
+                    item.level === 1 && (
+                      <div className="w-full border-b py-2 border-b-default" key={item.id}>
+                        <Link
+                          to={`/rfd/${rfd.number}#${item.id}`}
+                          className="block"
+                          prefetch="intent"
+                        >
+                          <DialogDismiss className="text-left">
+                            <li
+                              className="text-sans-sm text-default hover:text-default children:!text-sans-sm"
+                              dangerouslySetInnerHTML={{ __html: item.title }}
+                            />
+                          </DialogDismiss>
+                        </Link>
+                      </div>
+                    ),
+                )}
             </ul>
           </div>
         </>

app/components/SelectRfdCombobox.tsx

@@ -130,7 +130,7 @@ const ComboboxWrapper = ({
           const lastIdx = matchedItems.length - 1
           if (e.key === 'Enter') {
             if (!selectedItem) return
-            navigate(`/rfd/${selectedItem.number_string}`)
+            navigate(`/rfd/${selectedItem.formattedNumber}`)
             handleDismiss()
           } else if (e.key === 'ArrowDown') {
             const newIdx = selectedIdx === lastIdx ? 0 : selectedIdx + 1
@@ -187,7 +187,7 @@ const ComboboxWrapper = ({
               matchedItems.map((rfd: Fuzzysort.KeysResult<RfdListItem>, index: number) => {
                 return (
                   <ComboboxItem
-                    key={rfd.obj.number_string}
+                    key={rfd.obj.formattedNumber}
                     rfd={rfd.obj}
                     selected={selectedIdx === index}
                     isDirty={input.length > 0}
@@ -243,7 +243,7 @@ const ComboboxItem = ({
 
   return (
     <Link
-      to={`/rfd/${rfd.number_string}`}
+      to={`/rfd/${rfd.formattedNumber}`}
       onClick={onClick}
       prefetch={shouldPrefetch ? 'render' : 'intent'}
     >

app/components/Suggested.tsx

@@ -11,7 +11,7 @@ import cn from 'classnames'
 import { cloneElement, type ReactElement, type ReactNode } from 'react'
 
 import Icon from '~/components/Icon'
-import { type RfdListItem } from '~/services/rfd.server'
+import type { RfdListItem } from '~/services/rfd.server'
 
 import type { Author } from './rfd/RfdPreview'
 
@@ -71,7 +71,7 @@ export const ExactMatch = ({ rfd }: { rfd: RfdListItem }) => (
       RFD {rfd.number}:{' '}
       <Link
         key={rfd.number}
-        to={`/rfd/${rfd.number_string}`}
+        to={`/rfd/${rfd.formattedNumber}`}
         state={{ shouldClearInput: true }}
         className="text-semi-sm underline"
       >

app/components/rfd/MoreDropdown.tsx

@@ -24,7 +24,7 @@ const MoreDropdown = () => {
       </Dropdown.Trigger>
 
       <DropdownMenu>
-        <DropdownLink to={rfd.discussion_link || ''} disabled={!rfd.discussion_link}>
+        <DropdownLink to={rfd.discussion || ''} disabled={!rfd.discussion}>
           View discussion
         </DropdownLink>
 
@@ -38,12 +38,12 @@ const MoreDropdown = () => {
           </DropdownLink>
         )}
 
-        <DropdownLink
+        {/* <DropdownLink
           to={rfd.pdf_link_google_drive || ''}
           disabled={!rfd.pdf_link_google_drive}
         >
           View PDF
-        </DropdownLink>
+        </DropdownLink> */}
       </DropdownMenu>
     </Dropdown.Root>
   )

app/components/rfd/RfdDiscussionDialog.tsx

@@ -28,7 +28,7 @@ import type {
   ListReviewsCommentsType,
   ListReviewsType,
   ReviewType,
-} from '~/services/rfd.server'
+} from '~/services/github-discussion.server'
 
 import { GotoIcon } from '../CustomIcons'
 import { CommentThreadBlock, matchCommentToBlock } from './RfdInlineComments'

app/components/rfd/RfdInlineComments.tsx

@@ -30,7 +30,10 @@ import diff from 'simple-text-diff'
 import Container from '~/components/Container'
 import Icon from '~/components/Icon'
 import useWindowSize from '~/hooks/use-window-size'
-import type { ListReviewsCommentsType, ReviewCommentsType } from '~/services/rfd.server'
+import type {
+  ListReviewsCommentsType,
+  ReviewCommentsType,
+} from '~/services/github-discussion.server'
 
 import { calcOffset } from './RfdPreview'
 

app/components/rfd/RfdPreview.tsx

@@ -202,8 +202,8 @@ const RfdPreview = ({ currentRfd }: { currentRfd: number }) => {
 
   if (!rfdPreview) return null
 
-  const { title, number, state, commit_date, number_string } = rfdPreview
-  const authors = generateAuthors(rfdPreview.authors || '')
+  const { title, number, state, committedAt, formattedNumber } = rfdPreview
+  const authors = rfdPreview.authors || []
   return (
     <div
       ref={floatingEl}
@@ -212,15 +212,15 @@ const RfdPreview = ({ currentRfd }: { currentRfd: number }) => {
     >
       <Link
         prefetch="intent"
-        to={`/rfd/${number_string}`}
+        to={`/rfd/${formattedNumber}`}
         className="mr-2 block text-sans-lg text-accent-tertiary hover:text-accent-secondary"
       >
         {number}
       </Link>
       <div>
         <Link
           prefetch="intent"
-          to={`/rfd/${number_string}`}
+          to={`/rfd/${formattedNumber}`}
           className="mb-1 block text-sans-lg hover:text-default"
         >
           {title}
@@ -246,9 +246,9 @@ const RfdPreview = ({ currentRfd }: { currentRfd: number }) => {
           ))}
         </div>
         <div className="flex space-x-1 text-sans-sm text-tertiary">
-          <div>{state.charAt(0).toUpperCase() + state.slice(1)}</div>
+          {state && <div>{state.charAt(0).toUpperCase() + state.slice(1)}</div>}
           <span className="text-quaternary">•</span>
-          <div>{dayjs(commit_date).fromNow()}</div>
+          <div>{dayjs(committedAt).fromNow()}</div>
         </div>
       </div>
     </div>

app/root.tsx

@@ -7,7 +7,6 @@
  */
 
 import {
-  json,
   type LinksFunction,
   type LoaderFunctionArgs,
   type MetaFunction,
@@ -25,19 +24,19 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 import type { Author } from '~/components/rfd/RfdPreview'
 import { auth, isAuthenticated } from '~/services/authn.server'
-import {
-  fetchRfds,
-  findAuthors,
-  findLabels,
-  isLocalMode,
-  provideNewRfdNumber,
-  type RfdListItem,
-} from '~/services/rfd.server'
 import styles from '~/styles/index.css?url'
 
 import { Layout } from './components/Layout'
 import LoadingBar from './components/LoadingBar'
 import { inlineCommentsCookie, themeCookie } from './services/cookies.server'
+import { isLocalMode } from './services/rfd.local.server'
+import {
+  fetchRfds,
+  getAuthors,
+  getLabels,
+  provideNewRfdNumber,
+  type RfdListItem,
+} from './services/rfd.server'
 
 export const shouldRevalidate: ShouldRevalidateFunction = ({ currentUrl, nextUrl }) => {
   if (currentUrl.pathname.startsWith('/notes/') && nextUrl.pathname.startsWith('/notes/')) {
@@ -59,12 +58,12 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 
   const user = await isAuthenticated(request)
   try {
-    const rfds: RfdListItem[] = await fetchRfds(user)
+    const rfds: RfdListItem[] = (await fetchRfds(user)) || []
 
-    const authors: Author[] = rfds ? findAuthors(rfds) : []
-    const labels: string[] = rfds ? findLabels(rfds) : []
+    const authors: Author[] = rfds ? getAuthors(rfds) : []
+    const labels: string[] = rfds ? getLabels(rfds) : []
 
-    return json({
+    return {
       // Any data added to the ENV key of this loader will be injected into the
       // global window object (window.ENV)
       theme,
@@ -73,14 +72,26 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
       rfds,
       authors,
       labels,
-      isLocalMode,
+      localMode: isLocalMode(),
       newRfdNumber: provideNewRfdNumber([...rfds]),
-    })
+    }
   } catch (err) {
     // The only error that should be caught here is the unauthenticated error.
     // And if that occurs we need to log the user out
     await auth.logout(request, { redirectTo: '/' })
   }
+
+  // Convince remix that a return type will always be provided
+  return {
+    theme,
+    inlineComments,
+    user,
+    rfds: [],
+    authors: [],
+    labels: [],
+    localMode: isLocalMode(),
+    newRfdNumber: undefined,
+  }
 }
 
 export function useRootLoaderData() {
@@ -109,14 +120,14 @@ export function ErrorBoundary() {
 const queryClient = new QueryClient()
 
 export default function App() {
-  const { theme, isLocalMode } = useLoaderData<typeof loader>()
+  const { theme, localMode } = useLoaderData<typeof loader>()
 
   return (
     <Layout theme={theme}>
       <LoadingBar />
       <QueryClientProvider client={queryClient}>
         <Outlet />
-        {isLocalMode && (
+        {localMode && (
           <div className="overlay-shadow fixed bottom-6 left-6 z-10 rounded p-2 text-sans-sm text-notice bg-notice-secondary">
             Local authoring mode
           </div>