Merge pull request #15 from elwood-software/feature/new-www

fancy new www

apps/www/package.json

@@ -13,6 +13,8 @@
   },
   "dependencies": {
     "@elwood/common": "workspace:*",
+    "@elwood/js": "workspace:*",
+    "@elwood/react": "workspace:*",
     "@elwood/ui": "workspace:*",
     "@supabase/ssr": "^0.3.0",
     "autoprefixer": "^10.4.19",
@@ -21,6 +23,7 @@
     "postcss": "^8.4.38",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.23.1",
     "react-use": "^17.5.0",
     "tailwindcss": "^3.4.3",
     "zod": "^3.23.8"

apps/www/src/app/demo.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import {useEffect, useState} from 'react';
+import {createMemoryRouter} from 'react-router-dom';
+import {
+  Router,
+  ElwoodProvider,
+  MainLayout,
+  dashboardRoutes,
+} from '@elwood/react';
+import {Spinner} from '@elwood/ui';
+import {type ElwoodClient, createClient, type User} from '@elwood/js';
+
+export function Demo() {
+  const [router] = useState(createMemoryRouter(dashboardRoutes));
+  const [client, setClient] = useState<ElwoodClient | null>(null);
+  const [_user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (client) {
+      return;
+    }
+
+    setLoading(true);
+    const localClient = createClient(
+      process.env.NEXT_PUBLIC_SUPABASE_URL!,
+      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    );
+
+    localClient.auth
+      .signInWithPassword({
+        email: process.env.NEXT_PUBLIC_DEMO_USER_EMAIL!,
+        password: process.env.NEXT_PUBLIC_DEMO_USER_PW!,
+      })
+      .then(response => {
+        setUser(response.data?.user ?? null);
+      })
+      .catch(error => {
+        console.log(error.message);
+      })
+      .finally(() => {
+        setClient(localClient);
+        setLoading(false);
+      });
+
+    return function unload() {
+      localClient.auth.signOut();
+    };
+  }, []);
+
+  const workspaceName = 'Dunder Mifflin';
+
+  if (!client || loading) {
+    return (
+      <MainLayout title={workspaceName} sidebarFooter={<></>} sidebar={<></>}>
+        <Spinner className="stroke-muted-foreground m-3" />
+      </MainLayout>
+    );
+  }
+
+  return (
+    <ElwoodProvider workspaceName={workspaceName} client={client}>
+      <Router router={router} />
+    </ElwoodProvider>
+  );
+}

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

@@ -0,0 +1,20 @@
+export async function GET() {
+  const response = await fetch(
+    'https://api.github.com/repos/elwood-software/desktop/releases',
+    {
+      method: 'GET',
+      headers: {
+        Authorization: `Bearer ${process.env.GH_RELEASES_TOKEN}`,
+        Accept: 'application/vnd.github+json',
+        'X-GitHub-Api-Version': '2022-11-28',
+      },
+    },
+  );
+
+  console.log(await response.text());
+
+  return Response.redirect(
+    'https://github.com/elwood-software/desktop/releases/download/v0.0.1/Elwood-0.0.1.dmg',
+    302,
+  );
+}

apps/www/src/app/global.css

@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  --splash-shadow: 0px 0px 121px 34px rgba(79, 72, 122, 0.5);
+}
+
+.dark {
+  --splash-shadow: 0px 0px 121px 34px rgba(79, 72, 122, 0.2);
+}

apps/www/src/app/not-mobile.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import {PropsWithChildren} from 'react';
+import {useMedia} from 'react-use';
+
+export function NotMobile(props: PropsWithChildren) {
+  const isWide = useMedia('(min-width: 960px)', false);
+  return isWide ? props.children : null;
+}

apps/www/src/app/page.tsx

@@ -1,28 +1,78 @@
-import {Logo, Button} from '@elwood/ui';
+import Link from 'next/link';
+
+import {Logo, Button, StarIcon, FileIcon, ExternalLinkIcon} from '@elwood/ui';
+
+import {NotMobile} from './not-mobile';
+import {Demo} from './demo';
 
 export default function Page() {
   return (
-    <div className="w-screen h-screen flex flex-col items-center justify-center">
-      <h1 className="size-1/4">
-        <Logo className="size-full fill-current" />
-        <span className="sr-only">Elwood</span>
-      </h1>
-
-      <h2 className="mt-12 font-bold text-2xl">
-        Open source Dropbox alternative
-      </h2>
+    <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">
+            <Link href="/">
+              <Logo className="size-full fill-brand dark:fill-current" />
+              <span className="sr-only">Elwood</span>
+            </Link>
+          </h1>
+          <h2 className="mt-6 font-medium text-2xl text-center">
+            The open source Dropbox alternative
+          </h2>
+          <h3 className="text-sm text-muted-foreground mt-1 max-w-2xl text-center">
+            <strong>Elwood</strong> has lighting fast, resumable uploads.
+            Real-time, multi-user collaboration. Powerful role-based sharing. AI
+            powered assistant (to the) file manager. And much more to come.
+          </h3>
+          <div className="flex flex-col md:flex-row items-center justify-center space-y-3 md:space-y-0 md:space-x-3 mt-12 w-full">
+            <Button
+              variant="default"
+              size="lg"
+              href="/desktop/download"
+              className="w-full md:w-auto">
+              Download for Desktop
+            </Button>
+            <Button
+              variant="outline"
+              href="/docs"
+              className="w-full md:w-auto"
+              icon={<FileIcon className="size-[1em]" />}>
+              Docs
+            </Button>
+            <Button
+              variant="outline"
+              className="w-full md:w-auto"
+              href="https://github.com/elwood-software/elwood"
+              icon={<StarIcon className="size-[1em]" />}>
+              Github
+            </Button>
+          </div>
+        </header>
 
-      <div className="flex items-center space-x-3 mt-6">
-        <Button variant="outline" href="/docs">
-          Docs
-        </Button>
-        <Button variant="outline" href="https://github.elwood.software">
-          Github
-        </Button>
-        <Button variant="outline" href="https://discord.elwood.software">
-          Discord
-        </Button>
-      </div>
+        <div className="hidden md:block border rounded-md mt-10 shadow-splash transition-all scale-[.99] hover:scale-100  relative top-2 hover:top-0 duration-300">
+          <header className="border-b rounded-t-md px-3 py-3 flex justify-between">
+            <div className="space-x-1.5 flex">
+              <div className="size-2.5 bg-foreground/20 rounded-full" />
+              <div className="size-2.5 bg-foreground/20 rounded-full" />
+              <div className="size-2.5 bg-foreground/20 rounded-full" />
+            </div>
+            <Link
+              className="opacity-20 flex items-center hover:opacity-100 transition-opacity text-xs"
+              href="https://demo.elwood.software">
+              Open the full demo{' '}
+              <ExternalLinkIcon className="size-[1em] inline ml-1" />
+            </Link>
+          </header>
+          <div className="h-[50vh] 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">
+        &copy; The Elwood Technology Company
+      </footer>
     </div>
   );
 }

apps/www/tailwind.config.js

@@ -3,13 +3,26 @@ const {resolve, dirname} = require('path');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
   content: [
     resolve(
       dirname(require.resolve('@elwood/ui')),
       './**/*.{js,ts,jsx,tsx,mdx}',
     ),
+    resolve(
+      dirname(require.resolve('@elwood/react')),
+      './**/*.{js,ts,jsx,tsx,mdx}',
+    ),
     './src/**/*.{js,ts,jsx,tsx,mdx}',
   ],
-  theme,
+  theme: {
+    ...theme,
+    extend: {
+      ...theme.extend,
+      boxShadow: {
+        splash: 'var(--splash-shadow)',
+      },
+    },
+  },
   plugins: [...plugins],
 };

packages/react/src/components/layouts/page.tsx

@@ -28,7 +28,7 @@ export function PageLayout(
 
   return (
     <>
-      <div className="flex flex-col min-h-0 h-screen w-full">
+      <div className="flex flex-col min-h-0 h-full w-full">
         {showHeader ? (
           <header className="flex items-center justify-between px-8 pt-4">
             <div>{headerLeft}</div>

packages/react/src/hooks/ui/use-upload-button.tsx

@@ -66,7 +66,7 @@ export function useUploadButton(input: UseUploadButtonInput): JSX.Element {
   return (
     <>
       <input
-        className="fixed -top-96 -left-96"
+        className="fixed -top-[9999rem] -left-[9999rem]"
         multiple
         name={`UploadFileInput-${prefixAsString}`}
         onChange={onChange}

packages/react/src/index.ts

@@ -2,6 +2,7 @@
 
 export * from './components/auth/form';
 export * from './components/layouts/main';
+export * from './components/layouts/page';
 export * from './components/render';
 
 export * from './provider';

packages/react/src/routes/dashboard/routes.tsx

@@ -4,7 +4,7 @@ import {MainLayout} from '@/components/layouts/main';
 import {PageLayout} from '@/components/layouts/page';
 import {useProviderContext} from '@/hooks/use-provider-context';
 
-const Home = lazy(() => import('./home'));
+import Home from './home';
 
 const NodeLayout = lazy(() => import('./node/layout'));
 const Tree = lazy(() => import('./node/tree'));
@@ -23,11 +23,7 @@ export const dashboardRoutes: RouteObject[] = [
       {
         path: '/',
         index: true,
-        element: (
-          <Suspense fallback={mainFallback}>
-            <Home />
-          </Suspense>
-        ),
+        element: <Home />,
       },
       {
         path: '/bookmarks',

packages/ui/src/svg/icons.tsx

@@ -59,6 +59,7 @@ export {
   BellRingIcon,
   ListIcon,
   XIcon,
+  ExternalLinkIcon,
 } from 'lucide-react';
 
 export const Icons: Record<string, LucideIcon> = {

packages/ui/style.css

@@ -19,7 +19,7 @@
   --input: 20 5.9% 90%;
   --ring: 20 14.3% 4.1%;
   --radius: 0.75rem;
-  --brand: 249 26% 38%;
+  --brand: 249 26% 38%; /* #4f487a */
 }
 
 .dark {