princemuel · princemuel · Dec 29, 2023 · Dec 31, 2023 · Dec 31, 2023
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -9,7 +9,7 @@ import { PassThrough } from "node:stream";
 import type { AppLoadContext, EntryContext } from "@remix-run/node";
 import { createReadableStreamFromReadable } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
-import isbot from "isbot";
+import { isbot } from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
 
 const ABORT_DELAY = 5_000;
@@ -22,28 +22,28 @@ export default function handleRequest(
   // This is ignored so we can keep it in the template for visibility.  Feel
   // free to delete this parameter in your app if you're not using it!
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  loadContext: AppLoadContext
+  loadContext: AppLoadContext,
 ) {
-  return isbot(request.headers.get("user-agent"))
-    ? handleBotRequest(
+  return isbot(request.headers.get("user-agent") || "") ?
+      handleBotRequest(
         request,
         responseStatusCode,
         responseHeaders,
-        remixContext
+        remixContext,
       )
     : handleBrowserRequest(
         request,
         responseStatusCode,
         responseHeaders,
-        remixContext
+        remixContext,
       );
 }
 
 function handleBotRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false;
@@ -65,7 +65,7 @@ function handleBotRequest(
             new Response(stream, {
               headers: responseHeaders,
               status: responseStatusCode,
-            })
+            }),
           );
 
           pipe(body);
@@ -82,7 +82,7 @@ function handleBotRequest(
             console.error(error);
           }
         },
-      }
+      },
     );
 
     setTimeout(abort, ABORT_DELAY);
@@ -93,7 +93,7 @@ function handleBrowserRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false;
@@ -115,7 +115,7 @@ function handleBrowserRequest(
             new Response(stream, {
               headers: responseHeaders,
               status: responseStatusCode,
-            })
+            }),
           );
 
           pipe(body);
@@ -132,7 +132,7 @@ function handleBrowserRequest(
             console.error(error);
           }
         },
-      }
+      },
     );
 
     setTimeout(abort, ABORT_DELAY);

diff --git a/app/helpers/utils.ts b/app/helpers/utils.ts
@@ -5,6 +5,13 @@ export function tw(...inputs: ClassValue[]) {
   return clsx(inputs);
 }
 
+export function capitalize(sentence = "") {
+  return sentence
+    .trim()
+    .replace(/\W+/g, " ")
+    .replace(/\b\w/g, (match) => match.toUpperCase());
+}
+
 /*---------------------------------*
             NUMBER UTILS           *
   ---------------------------------*

diff --git a/app/root.tsx b/app/root.tsx
@@ -50,6 +50,14 @@ function App() {
   const data = useLoaderData<typeof loader>();
   const [theme] = useTheme();
 
+  useEffect(() => {
+    (async function () {
+      //@ts-expect-error
+      const cssHasPseudo = (await import("css-has-pseudo/browser")).default;
+      cssHasPseudo(document);
+    })();
+  }, []);
+
   useEffect(() => {
     const type = data.toast?.type || "";
     const message = data.toast?.message;
@@ -80,7 +88,13 @@ function App() {
         <Meta />
         <PreventFlashOnWrongTheme ssrTheme={Boolean(data.theme)} />
         <Links />
-        <style></style>
+        <style
+          type="text/css"
+          dangerouslySetInnerHTML={{
+            __html:
+              "@font-face{font-family: __FontSans_Fallback;src:system-ui;}@font-face{font-family: '__FontSans';src:url('/fonts/PlusJakartaSans.ttf') format('truetype');font-style:normal;font-display:swap;}.__sans__{--font-sans: '__FontSans', '__FontSans_Fallback';}",
+          }}
+        />
       </head>
 
       <body className="relative min-h-screen antialiased">

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -1,9 +1,16 @@
 import type { MetaFunction } from "@remix-run/node";
+import { NavLink } from "@remix-run/react";
 
 export const meta: MetaFunction = () => {
   return [{ title: "Kanban TM" }, { name: "description", content: "" }];
 };
 
-export default function Index() {
-  return <h1>Kanban Task Manager</h1>;
+function PageRoute() {
+  return (
+    <div>
+      <NavLink to="/boards">Boards</NavLink>
+    </div>
+  );
 }
+
+export default PageRoute;
diff --git a/app/routes/boards._index.tsx b/app/routes/boards._index.tsx
@@ -1,7 +1,25 @@
 function PageRoute() {
+  const dummyArray = new Array(50).fill(0);
   return (
     <main className="">
-      <h1>MAIN CONTENT</h1>
+      {dummyArray.map((item, index) => (
+        <p key={`${item}${index}`}>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae
+          optio eligendi deleniti, minima est nulla dolores autem modi culpa quo
+          sapiente repellendus perspiciatis qui eum quis fuga nesciunt enim iure
+          omnis harum laudantium? Dicta, debitis nemo a beatae similique
+          dolorem. Lorem ipsum dolor sit amet consectetur adipisicing elit.
+          Inventore ducimus quisquam eius dolores nostrum praesentium molestiae
+          sed, quam magnam consectetur veniam cumque, eligendi fugit reiciendis
+          minima, dolorum laborum repellendus doloribus. Animi quibusdam, rerum
+          vel qui impedit incidunt fugit reiciendis ipsam. Lorem ipsum dolor sit
+          amet consectetur adipisicing elit. Inventore ducimus quisquam eius
+          dolores nostrum praesentium molestiae sed, quam magnam consectetur
+          veniam cumque, eligendi fugit reiciendis minima, dolorum laborum
+          repellendus doloribus. Animi quibusdam, rerum vel qui impedit incidunt
+          fugit reiciendis ipsam.
+        </p>
+      ))}
     </main>
   );
 }

diff --git a/app/routes/boards.tsx b/app/routes/boards.tsx
@@ -1,21 +1,46 @@
-import { Outlet } from "@remix-run/react";
+import { LogoDark, LogoLight } from "@/common";
+import { Text } from "@/components/text";
+import { capitalize } from "@/helpers/utils";
+import { Link, Outlet } from "@remix-run/react";
 
 function LayoutRoute() {
   return (
-    <div className="">
-      {/* HEADER */}
-      <header>HEADER</header>
-      {/* HEADER */}
+    <div className="min-h-svh font-sans">
+      <header className="grid grid-cols-[repeat(6,_[col-start]_1fr_[col-end])] bg-white dark:bg-brand-700">
+        <div className="col-[col-start_/_col-end] border-r border-brand-200 p-6 dark:border-brand-600">
+          <Link to="/" className="inline-flex items-center">
+            <LogoLight className="hidden dark:block" />
+            <LogoDark className="block dark:hidden" />
+          </Link>
+        </div>
 
-      {/* SIDEBAR */}
-      <aside className="">ASIDE</aside>
-      {/* SIDEBAR */}
+        <div className="col-[col-start_2_/_-1] flex items-center justify-between p-6">
+          <Text as="h1" size="xl" className="">
+            {capitalize("Platform Launch")}
+          </Text>
+        </div>
+      </header>
 
-      {/* MAIN CONTENT */}
-      <div className="">
-        <Outlet />
+      <div className="grid w-full grid-cols-[repeat(6,_[col-start]_1fr_[col-end])] grid-rows-[calc(100vh_-_5rem)] overflow-hidden transition-[grid-template-columns] duration-500 ease-in">
+        <aside className="group/aside peer col-[1_/_1] row-[1] grid grid-cols-[0fr] border-r border-brand-200 bg-white transition-[grid-template-columns] duration-500 ease-out has-[:checked]:col-[col-start_/_col-end] has-[:checked]:grid-cols-[1fr] dark:border-brand-600 dark:bg-brand-700">
+          <div className="overflow-hidden group-has-[:checked]/aside:py-8 group-has-[:checked]/aside:pr-6">
+            <div>
+              <Text as="h4" variant="primary" size="sm" className="uppercase">
+                <span>All Boards </span>
+                <output>({3})</output>
+              </Text>
+            </div>
+            <input
+              type="checkbox"
+              className="fixed bottom-5 size-4 accent-indigo-500"
+            />
+          </div>
+        </aside>
+
+        <div className="col-[col-start_1_/_-1] row-[1] w-full overflow-auto border-t border-brand-200 bg-brand-100 peer-has-[:checked]:col-[col-start_2_/_-1] dark:border-brand-600 dark:bg-brand-800">
+          <Outlet />
+        </div>
       </div>
-      {/* MAIN CONTENT */}
     </div>
   );
 }