docs and www fixes

apps/docs/src/app/docs/desktop/page.md

@@ -0,0 +1,13 @@
+---
+title: Desktop
+---
+
+Elwood... but on your desktop. 🤯 {% .lead %}
+
+{% quick-links %}
+
+{% quick-link title="Install for Mac" icon="installation" href="https://elwood.software/desktop/download?p=mac" description="Download for macOS" /%}
+
+{% quick-link title="More Information" icon="plugins" href="https://github.com/elwood-software/desktop" description="Get more info in the repo." /%}
+
+{% /quick-links %}

apps/docs/src/app/layout.tsx

@@ -7,6 +7,7 @@ import clsx from 'clsx';
 import {Providers} from '@/app/providers';
 import {Layout} from '@/components/Layout';
 
+import '@elwood/ui/style.css';
 import '@/styles/tailwind.css';
 
 const inter = Inter({

apps/docs/src/components/DocsHeader.tsx

@@ -17,7 +17,7 @@ export function DocsHeader({title}: {title?: string}) {
   return (
     <header className="mb-9 space-y-1">
       {section && (
-        <p className="font-display text-sm font-medium text-sky-500">
+        <p className="font-display text-sm font-medium text-brand">
           {section.title}
         </p>
       )}

apps/docs/src/components/Icon.tsx

@@ -18,7 +18,7 @@ const icons = {
 };
 
 const iconStyles = {
-  blue: '[--icon-foreground:theme(colors.slate.900)] [--icon-background:theme(colors.white)]',
+  blue: '[--icon-foreground:theme(colors.brand)] [--icon-background:theme(colors.white)]',
   amber:
     '[--icon-foreground:theme(colors.amber.900)] [--icon-background:theme(colors.amber.100)]',
 };

apps/docs/src/components/Layout.tsx

@@ -38,22 +38,29 @@ function Header(): JSX.Element {
         'sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between bg-background px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none sm:px-6 lg:px-8',
         isScrolled
           ? 'dark:bg-background/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-background/75'
-          : 'dark:bg-transparent',
+          : 'dark:bg-background/95',
       )}>
       <div className="mr-6 flex lg:hidden">
         <MobileNavigation />
       </div>
-      <div className="relative flex flex-grow basis-0 items-center">
+      <div className="relative flex flex-grow basis-0 items-center space-x-4 text-sm font-medium text-muted-foreground">
         <Link href="/" aria-label="Home page">
-          <Logo className="hidden h-9 w-auto fill-slate-700 dark:fill-sky-100 lg:block" />
+          <Logo className="hidden h-9 w-auto fill-foreground lg:block" />
+        </Link>
+
+        <Link href="/" className="ml-3 hidden hover:text-foreground md:block">
+          Home
+        </Link>
+        <Link href="/docs" className="hidden hover:text-foreground md:block">
+          Docs
         </Link>
       </div>
       <div className="-my-5 mr-6 sm:mr-8 md:mr-0">{/* <Search /> */}</div>
       <div className="relative flex basis-0 justify-end gap-6 sm:gap-8 md:flex-grow">
         {/* <ThemeSelector className="relative z-10" /> */}
         <Link
           href="mailto:[email protected]"
-          className="group text-sm text-muted-foreground hover:text-foreground"
+          className="group hidden text-sm text-muted-foreground hover:text-foreground md:block"
           aria-label="Email us">
           [email protected]
         </Link>

apps/docs/src/components/Navigation.tsx

@@ -23,7 +23,7 @@ export function Navigation({
             </h2>
             <ul
               role="list"
-              className="mt-2 space-y-2 border-l-2 border-slate-100 dark:border-slate-800 lg:mt-4 lg:space-y-4 lg:border-slate-200">
+              className="mt-2 space-y-2 border-l-2 lg:mt-4 lg:space-y-4">
               {section.links.map(link => (
                 <li key={link.href} className="relative">
                   <Link
@@ -32,8 +32,8 @@ export function Navigation({
                     className={clsx(
                       'block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full',
                       link.href === pathname
-                        ? 'font-semibold text-sky-500 before:bg-sky-500'
-                        : 'text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300',
+                        ? 'font-semibold text-brand before:bg-brand'
+                        : 'text-muted-foreground before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300',
                     )}>
                     {link.title}
                   </Link>

apps/docs/src/lib/navigation.ts

@@ -7,6 +7,11 @@ export const navigation = [
       {title: 'Support', href: '/docs/support'},
     ],
   },
+  {
+    title: 'Desktop',
+
+    links: [{title: 'Install', href: '/docs/desktop'}],
+  },
   {
     title: 'Development',
 

apps/docs/src/styles/tailwind.css

@@ -2,9 +2,12 @@
 @import './prism.css';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
-@import '@elwood/ui/style.css';
 
 @layer base {
+  * {
+    @apply border-border;
+  }
+
   [inert] ::-webkit-scrollbar {
     display: none;
   }

apps/docs/tailwind.config.ts

@@ -34,6 +34,7 @@ export default {
       maxWidth: {
         '8xl': '88rem',
       },
+      colors: themeExtend.colors,
     },
   },
   plugins: [...Array.from(plugins as PluginCreator<any>[]), typographyPlugin],

packages/react/src/provider.tsx

@@ -10,6 +10,7 @@ import {Spinner} from '@elwood/ui';
 import {ProviderContext, type ProviderContextValue} from '@/context';
 import {NoAccess} from '@/components/no-access';
 import {defaultRenders} from '@/renderer/default-renderers';
+import {MainLayout} from '@/components/layouts/main';
 
 export type ElwoodProviderProps = Omit<
   ProviderContextValue,
@@ -85,7 +86,7 @@ export function ElwoodProvider(
   }
 
   if (member === null) {
-    return <Spinner full />;
+    return <MainLayout title={props.workspaceName} loading={true} />;
   }
 
   return (