[#43] Add direct link button

config/tailwind/buttons.js

@@ -23,17 +23,17 @@ module.exports = plugin(({ addComponents }) => {
     // Variants
     '.btn': {
       ...base,
-      '@apply bg-blue-500 text-white enabled:hover:bg-blue-600 enabled:active:bg-blue-700 aria-expanded:bg-blue-700':
+      '@apply bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-700 aria-expanded:bg-blue-700':
         {},
     },
     '.btn-outline': {
       ...base,
-      '@apply bg-transparent text-gray-600 border border-gray-600 enabled:hover:bg-black/5 enabled:active:bg-black/10 aria-expanded:bg-black/10':
+      '@apply bg-transparent text-gray-600 border border-gray-600 hover:bg-black/5 active:bg-black/10 aria-expanded:bg-black/10':
         {},
     },
     '.btn-subtle': {
       ...base,
-      '@apply bg-transparent text-gray-600 enabled:hover:bg-black/5 enabled:active:bg-black/10 aria-expanded:bg-black/10 dark:text-gray-300 dark:active:text-white dark:enabled:active:bg-black/30 dark:enabled:hover:bg-black/20 dark:aria-expanded:bg-black/30 dark:aria-expanded:text-white':
+      '@apply bg-transparent text-gray-600 hover:bg-black/5 active:bg-black/10 aria-expanded:bg-black/10 dark:text-gray-300 dark:active:text-white dark:active:bg-black/30 dark:hover:bg-black/20 dark:aria-expanded:bg-black/30 dark:aria-expanded:text-white':
         {},
     },
 

src/app.tsx

@@ -148,6 +148,7 @@ export function App(props: AppProps) {
           <UtilityBar
             isDoc={activeNavItem?.doc ?? false}
             showSettings={!hasConfigUrl}
+            partUrl={activeNavItem?.url ?? null}
           />
 
           <div className="flex flex-grow items-stretch justify-center">

src/features/utility-bar/DirectLink.tsx

@@ -0,0 +1,28 @@
+import { Link1Icon } from '@radix-ui/react-icons'
+
+interface DirectLinkProps {
+  url?: string
+}
+
+export function DirectLink({
+  url,
+}: DirectLinkProps) {
+  if (!url) {
+    return null
+  }
+
+  // TODO eventually refactor to use a button component
+  return (
+    <a
+      className="btn-subtle btn-icon"
+      href={url}
+      target="_blank"
+      rel="noreferrer noopener"
+      title="Open direct link"
+    >
+      <Link1Icon />
+    </a>
+  )
+}
+
+

src/features/utility-bar/UtilityBar.tsx

@@ -5,10 +5,12 @@ import ToggleFullscreen from './ToggleFullscreen'
 import ToggleTheme from './ToggleTheme'
 import ToggleViewportDropdown from './ToggleViewportDropdown'
 import ToggleSettingsDialog from './ToggleSettingsDialog'
+import { DirectLink } from './DirectLink'
 
 interface UtilityBarProps {
   showSettings: boolean
   isDoc: boolean
+  partUrl?: string|null
 }
 
 export default function (props: UtilityBarProps) {
@@ -36,6 +38,9 @@ export default function (props: UtilityBarProps) {
           {/* Settings Control */}
           {props.showSettings && <ToggleSettingsDialog />}
 
+          {/* Direct Link */}
+          {props.partUrl && <DirectLink url={props.partUrl} />}
+
           {/* Fullscreen control */}
           <ToggleFullscreen />
         </div>