[Experimental] Live AsciiDoc editor

.github/workflows/playwright.yml

@@ -26,9 +26,3 @@ jobs:
         run: npx playwright test
         env:
           BASE_URL: ${{ github.event.deployment_status.target_url }}
-      - uses: actions/upload-artifact@v3
-        if: always()
-        with:
-          name: test-results
-          path: test-results/
-          retention-days: 30

.gitignore

@@ -17,3 +17,5 @@ test-results/
 .DS_Store
 
 /app/components/icons
+
+.npmrc

app/components/AsciidocBlocks/Document.tsx

@@ -7,6 +7,8 @@
  */
 import { Content, type DocumentBlock } from '@oxide/react-asciidoc'
 
+// add styles for main
+// max-w-full flex-shrink overflow-hidden 800:overflow-visible 800:pr-10 1200:w-[calc(100%-var(--toc-width))] 1200:pr-16 print:p-0
 const CustomDocument = ({ document }: { document: DocumentBlock }) => (
   <div
     id="content"
@@ -16,4 +18,10 @@ const CustomDocument = ({ document }: { document: DocumentBlock }) => (
   </div>
 )
 
-export { CustomDocument }
+const MinimalDocument = ({ document }: { document: DocumentBlock }) => (
+  <div id="content" className="asciidoc-body max-w-[1040px]">
+    <Content blocks={document.blocks} />
+  </div>
+)
+
+export { CustomDocument, MinimalDocument }

app/components/AsciidocBlocks/index.ts

@@ -22,4 +22,4 @@ export const opts: Options = {
     listing: Listing,
   },
   customDocument: CustomDocument,
-}
+}

app/components/CustomIcons.tsx

@@ -55,3 +55,21 @@ export const GotoIcon = ({ className }: { className?: string }) => (
     />
   </svg>
 )
+
+export const DragCursor = ({ className }: { className?: string }) => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5 1.667C5 1.29863 4.70137 1 4.333 1H3.667C3.29863 1 3 1.29863 3 1.667V2.333C3 2.70137 3.29863 3 3.667 3H4.333C4.70137 3 5 2.70137 5 2.333V1.667ZM9 1.667C9 1.29863 8.70137 1 8.333 1H7.667C7.29863 1 7 1.29863 7 1.667V2.333C7 2.70137 7.29863 3 7.667 3H8.333C8.70137 3 9 2.70137 9 2.333V1.667ZM9 5.667C9 5.29863 8.70137 5 8.333 5H7.667C7.29863 5 7 5.29863 7 5.667V6.333C7 6.70137 7.29863 7 7.667 7H8.333C8.70137 7 9 6.70137 9 6.333V5.667ZM7 9.667C7 9.29863 7.29863 9 7.667 9H8.333C8.70137 9 9 9.29863 9 9.667V10.333C9 10.7014 8.70137 11 8.333 11H7.667C7.29863 11 7 10.7014 7 10.333V9.667ZM3 5.667C3 5.29863 3.29863 5 3.667 5H4.333C4.70137 5 5 5.29863 5 5.667V6.333C5 6.70137 4.70137 7 4.333 7H3.667C3.29863 7 3 6.70137 3 6.333V5.667ZM5 9.667C5 9.29863 4.70137 9 4.333 9H3.667C3.29863 9 3 9.29863 3 9.667V10.333C3 10.7014 3.29863 11 3.667 11H4.333C4.70137 11 5 10.7014 5 10.333V9.667Z"
+      fill="currentColor"
+    />
+  </svg>
+)

app/components/Dropdown.tsx

@@ -19,18 +19,18 @@ export const dropdownInnerStyles = `focus:outline-0 focus:bg-hover px-3 py-2 pr-
 
 export const DropdownItem = ({
   children,
-  classNames,
+  className,
   onSelect,
 }: {
   children: ReactNode | string
-  classNames?: string
+  className?: string
   onSelect?: () => void
 }) => (
   <Dropdown.Item
     onSelect={onSelect}
     className={cn(
       dropdownOuterStyles,
-      classNames,
+      className,
       dropdownInnerStyles,
       !onSelect && 'cursor-default',
     )}
@@ -42,12 +42,12 @@ export const DropdownItem = ({
 
 export const DropdownSubTrigger = ({
   children,
-  classNames,
+  className,
 }: {
   children: JSX.Element | string
-  classNames?: string
+  className?: string
 }) => (
-  <Dropdown.SubTrigger className={cn(dropdownOuterStyles, classNames, dropdownInnerStyles)}>
+  <Dropdown.SubTrigger className={cn(dropdownOuterStyles, className, dropdownInnerStyles)}>
     {children}
     <Icon
       name="carat-down"
@@ -59,13 +59,13 @@ export const DropdownSubTrigger = ({
 
 export const DropdownLink = ({
   children,
-  classNames,
+  className,
   internal = false,
   to,
   disabled = false,
 }: {
   children: React.ReactNode
-  classNames?: string
+  className?: string
   internal?: boolean
   to: string
   disabled?: boolean
@@ -76,7 +76,7 @@ export const DropdownLink = ({
     className={cn(
       'block ',
       dropdownOuterStyles,
-      classNames,
+      className,
       disabled && 'pointer-events-none',
     )}
   >
@@ -88,18 +88,18 @@ export const DropdownLink = ({
 
 export const DropdownMenu = ({
   children,
-  classNames,
+  className,
   align = 'end',
 }: {
   children: React.ReactNode
-  classNames?: string
+  className?: string
   align?: 'end' | 'start' | 'center' | undefined
 }) => (
   <Dropdown.Portal>
     <Dropdown.Content
       className={cn(
         'menu overlay-shadow z-30 mt-2 min-w-[12rem] rounded border bg-raise border-secondary [&>*:last-child]:border-b-0',
-        classNames,
+        className,
       )}
       align={align}
     >
@@ -110,16 +110,16 @@ export const DropdownMenu = ({
 
 export const DropdownSubMenu = ({
   children,
-  classNames,
+  className,
 }: {
   children: JSX.Element[]
-  classNames?: string
+  className?: string
 }) => (
   <Dropdown.Portal>
     <Dropdown.SubContent
       className={cn(
         'menu overlay-shadow z-10 ml-2 max-h-[30vh] min-w-[12rem] overflow-y-auto rounded border bg-raise border-secondary [&>*:last-child]:border-b-0',
-        classNames,
+        className,
       )}
     >
       {children}

app/components/ErrorPage.tsx

@@ -0,0 +1,48 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { Error12Icon, PrevArrow12Icon } from '@oxide/design-system/icons/react'
+import { Link } from '@remix-run/react'
+import type { ReactNode } from 'react'
+
+const GradientBackground = () => (
+  <div
+    // negative z-index avoids covering MSW warning banner
+    className="fixed bottom-0 left-0 right-0 top-0 -z-10"
+    style={{
+      background:
+        'radial-gradient(200% 100% at 50% 100%, var(--surface-default) 0%, #161B1D 100%)',
+    }}
+  />
+)
+
+type Props = { children: ReactNode; backLink?: string }
+
+export function ErrorPage({ children, backLink }: Props) {
+  return (
+    <div className="flex w-full justify-center">
+      <GradientBackground />
+      <div className="relative flex w-full justify-between">
+        <Link
+          to={backLink ? backLink : '/'}
+          className="flex items-center p-6 text-mono-sm text-default hover:text-raise"
+        >
+          <PrevArrow12Icon title="Select" className="mr-2 text-secondary" />
+          Back
+        </Link>
+      </div>
+      <div className="absolute left-1/2 top-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center space-y-4 rounded-lg border p-8 !bg-raise border-secondary elevation-3">
+        <div className="my-2 flex h-12 w-12 items-center justify-center">
+          <div className="absolute h-12 w-12 rounded-full opacity-20 bg-info motion-safe:animate-[ping_2s_cubic-bezier(0,0,0.2,1)_infinite]" />
+          <Error12Icon className="relative h-8 w-8 text-info-secondary" />
+        </div>
+
+        <div className="space-y-2 text-center">{children}</div>
+      </div>
+    </div>
+  )
+}

app/components/Header.tsx

@@ -10,12 +10,13 @@ import { buttonStyle } from '@oxide/design-system'
 import * as Dropdown from '@radix-ui/react-dropdown-menu'
 import { Link, useFetcher } from '@remix-run/react'
 import { useCallback, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
 
 import Icon from '~/components/Icon'
 import NewRfdButton from '~/components/NewRfdButton'
-import { useKey } from '~/hooks/use-key'
 import { useRootLoaderData } from '~/root'
 import type { RfdItem, RfdListItem } from '~/services/rfd.server'
+import { userIsInternal } from '~/utils/rfdApi'
 
 import { DropdownItem, DropdownMenu } from './Dropdown'
 import { PublicBanner } from './PublicBanner'
@@ -53,7 +54,9 @@ export default function Header({ currentRfd }: { currentRfd?: RfdItem }) {
     return false // Returning false prevents default behaviour in Firefox
   }, [open])
 
-  useKey('mod+k', toggleSearchMenu)
+  useHotkeys('mod+k', toggleSearchMenu)
+
+  const isInternal = userIsInternal(user)
 
   return (
     <div className="sticky top-0 z-20">
@@ -79,6 +82,14 @@ export default function Header({ currentRfd }: { currentRfd?: RfdItem }) {
             <Icon name="search" size={16} />
           </button>
           <Search open={open} onClose={() => setOpen(false)} />
+          {user && isInternal && (
+            <Link
+              to="/notes"
+              className="flex h-8 w-8 items-center justify-center rounded border text-tertiary bg-secondary border-secondary elevation-1 hover:bg-hover"
+            >
+              <Icon name="edit" size={16} />
+            </Link>
+          )}
           <NewRfdButton />
 
           {user ? (

app/components/Layout.tsx

@@ -0,0 +1,43 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { Links, Meta, Scripts, ScrollRestoration, useLocation } from '@remix-run/react'
+import cn from 'classnames'
+
+export const Layout = ({
+  children,
+  theme,
+}: {
+  children: React.ReactNode
+  theme?: string
+}) => {
+  const location = useLocation()
+  const bodyClass = location.pathname.startsWith('/notes') ? 'note' : 'rfd'
+
+  return (
+    <html lang="en" className={theme}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+        <link rel="icon" href="/favicon.svg" />
+        <link rel="icon" type="image/png" href="/favicon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        {/* Use plausible analytics only on Vercel */}
+        {process.env.NODE_ENV === 'production' && (
+          <script defer data-domain="rfd.shared.oxide.computer" src="/js/viewscript.js" />
+        )}
+      </head>
+      <body className={cn('mb-32', bodyClass)}>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  )
+}

app/components/SelectRfdCombobox.tsx

@@ -10,9 +10,9 @@ import { Link, useNavigate } from '@remix-run/react'
 import cn from 'classnames'
 import fuzzysort from 'fuzzysort'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
 
 import Icon from '~/components/Icon'
-import { useKey } from '~/hooks/use-key'
 import { useSteppedScroll } from '~/hooks/use-stepped-scroll'
 import type { RfdItem, RfdListItem } from '~/services/rfd.server'
 import { classed } from '~/utils/classed'
@@ -33,7 +33,7 @@ const SelectRfdCombobox = ({
   // memoized to avoid render churn in useKey
   const toggleCombobox = useCallback(() => setOpen(!open), [setOpen, open])
 
-  useKey('mod+/', toggleCombobox)
+  useHotkeys('mod+/', toggleCombobox)
 
   const handleDismiss = () => setOpen(false)
 
@@ -220,7 +220,7 @@ const ComboboxItem = ({
 }) => {
   const [shouldPrefetch, setShouldPrefetch] = useState(false)
 
-  const timer = useRef<NodeJS.Timeout | null>(null)
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   function clear() {
     if (timer.current) clearTimeout(timer.current)

app/components/home/FilterDropdown.tsx

@@ -149,7 +149,7 @@ const DropdownFilterItem = ({
 }) => (
   <DropdownItem
     onSelect={onSelect}
-    classNames={selected ? 'bg-accent-secondary text-accent' : ''}
+    className={selected ? 'text-accent bg-accent-secondary' : ''}
   >
     {selected && <Outline />}
     <div className="flex items-center justify-between">