Merge pull request #16 from elwood-software/chore/www-mobile-fixes

www & docs mobile 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],

apps/www/src/app/desktop/download/route.ts

@@ -1,6 +1,16 @@
-export async function GET() {
+import {type NextRequest} from 'next/server';
+import type {JsonObject} from '@elwood/common';
+
+type Platform = 'mac' | 'win' | 'linux';
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const p = (searchParams.get('p') ?? 'mac') as Platform;
+  const a = searchParams.get('a') ?? 'default';
+  const f = searchParams.get('f') ?? 'zip';
+
   const response = await fetch(
-    'https://api.github.com/repos/elwood-software/desktop/releases',
+    'https://api.github.com/repos/elwood-software/desktop/releases?per_page=1',
     {
       method: 'GET',
       headers: {
@@ -11,10 +21,64 @@ export async function GET() {
     },
   );
 
-  console.log(await response.text());
+  const body = (await response.json()) as Array<{
+    tag_name: string;
+    assets: Array<{
+      name: string;
+      browser_download_url: string;
+    }>;
+  }>;
 
-  return Response.redirect(
-    'https://github.com/elwood-software/desktop/releases/download/v0.0.1/Elwood-0.0.1.dmg',
-    302,
-  );
+  const urls: Record<Platform, JsonObject> = {
+    mac: {
+      arm64: {
+        dmg: '',
+        zip: '',
+      },
+      default: {
+        dmg: '',
+        zip: '',
+      },
+    },
+    win: {
+      x64: {
+        exe: '',
+        zip: '',
+      },
+    },
+    linux: {
+      x64: {
+        deb: '',
+        rpm: '',
+        tar: '',
+      },
+    },
+  };
+
+  for (const asset of body[0].assets) {
+    if (asset.name.endsWith('arm64.dmg')) {
+      urls.mac.arm64.dmg = asset.browser_download_url;
+    } else if (asset.name.endsWith('arm64-mac.zip')) {
+      urls.mac.arm64.zip = asset.browser_download_url;
+    } else if (asset.name.endsWith('.dmg')) {
+      urls.mac.default.dmg = asset.browser_download_url;
+    } else if (asset.name.endsWith('mac.zip')) {
+      urls.mac.default.zip = asset.browser_download_url;
+    }
+  }
+
+  if (request.headers.get('accept') === 'application/json') {
+    return Response.json({
+      v: body[0].tag_name,
+      urls,
+    });
+  }
+
+  const url = urls[p][a][f] ?? null;
+
+  if (url) {
+    return Response.redirect(url, 302);
+  }
+
+  return Response.redirect('/desktop?error=unknown', 302);
 }

apps/www/src/app/desktop/route.ts

@@ -0,0 +1,3 @@
+export async function GET() {
+  return Response.redirect('https://github.com/elwood-software/desktop', 302);
+}

apps/www/src/app/layout.tsx

@@ -18,7 +18,7 @@ export default function RootLayout(props: PropsWithChildren): JSX.Element {
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`overflow-hidden w-screen h-screen text-foreground bg-background ${themeClassName}`}
+        className={`w-screen h-screen text-foreground bg-background ${themeClassName}`}
         data-color-mode={themeClassName}
         data-color-server-theme={theme}>
         <ElwoodThemeProvider>{props.children}</ElwoodThemeProvider>

apps/www/src/app/page.tsx

@@ -10,7 +10,7 @@ export default function Page() {
     <div className="m-auto container min-h-screen flex flex-col">
       <main className="flex-grow">
         <header className="flex flex-col items-center justify-center">
-          <h1 className="size-24 mt-24">
+          <h1 className="size-24 md:mt-12 mt-24">
             <Link href="/">
               <Logo className="size-full fill-brand dark:fill-current" />
               <span className="sr-only">Elwood</span>
@@ -29,7 +29,7 @@ export default function Page() {
               variant="default"
               size="lg"
               href="/desktop/download"
-              className="w-full md:w-auto">
+              className="w-full md:w-auto hidden md:inline-flex">
               Download for Desktop
             </Button>
             <Button
@@ -63,14 +63,14 @@ export default function Page() {
               <ExternalLinkIcon className="size-[1em] inline ml-1" />
             </Link>
           </header>
-          <div className="h-[50vh] w-full flex flex-row overflow-hidden relative">
+          <div className="h-[80vh] w-full flex flex-row overflow-hidden relative">
             <NotMobile>
               <Demo />
             </NotMobile>
           </div>
         </div>
       </main>
-      <footer className="text-center text-muted-foreground text-xs py-2">
+      <footer className="text-center text-muted-foreground/50 text-xs pb-2 pt-12">
         &copy; The Elwood Technology Company
       </footer>
     </div>

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 (