feat(website): add readme (#166)

* feat(website): add readme

* fix: linting

* fix: configuration

* fix: configuration

* fix: change implementation

* fix: return JSX element

* fix: build

* fix: build

* hack for website:dev

* hydrate if ssr is enabled

* disable ssr temporarily

* debugging with console.log

* Revert "debugging with console.log"

This reverts commit 2b396df.

* a hacky fix

* Revert "disable ssr temporarily"

This reverts commit 32c724e.

* remove unused libs

* remove unused libs

* add comment

---------

Co-authored-by: daishi <daishi@axlight.com>

README.md

@@ -232,40 +232,40 @@ However, it isn't too difficult to make a file-based router.
 Here's a file-based example code with builder:
 
 ```tsx
-import url from "node:url";
-import path from "node:path";
-import { glob } from "glob";
-import { defineRouter } from "waku/router/server";
+import url from 'node:url';
+import path from 'node:path';
+import { glob } from 'glob';
+import { defineRouter } from 'waku/router/server';
 
 const routesDir = path.join(
   path.dirname(url.fileURLToPath(import.meta.url)),
-  "routes",
+  'routes',
 );
 
 export default defineRouter(
-  // getComponent (id is "**/layout" or "**/page")
+  // getComponent (id is '**/layout' or '**/page')
   async (id) => {
-    const files = await glob(${"`"}$\{id}.{tsx,js}${"`"}, { cwd: routesDir });
+    const files = await glob(${'`'}$\{id}.{tsx,js}${'`'}, { cwd: routesDir });
     if (files.length === 0) {
       return null;
     }
-    const items = id.split("/");
+    const items = id.split('/');
     switch (items.length) {
       case 1:
-        return import(${"`"}./routes/$\{items[0]}.tsx${"`"});
+        return import(${'`'}./routes/$\{items[0]}.tsx${'`'});
       case 2:
-        return import(${"`"}./routes/$\{items[0]}/$\{items[1]}.tsx${"`"});
+        return import(${'`'}./routes/$\{items[0]}/$\{items[1]}.tsx${'`'});
       case 3:
-        return import(${"`"}./routes/$\{items[0]}/$\{items[1]}/$\{items[2]}.tsx${"`"});
+        return import(${'`'}./routes/$\{items[0]}/$\{items[1]}/$\{items[2]}.tsx${'`'});
       default:
-        throw new Error("too deep route");
+        throw new Error('too deep route');
     }
   },
   // getPathsForBuild
   async () => {
-    const files = await glob("**/page.{tsx,js}", { cwd: routesDir });
+    const files = await glob('**/page.{tsx,js}', { cwd: routesDir });
     return files.map(
-      (file) => "/" + file.slice(0, Math.max(0, file.lastIndexOf("/"))),
+      (file) => '/' + file.slice(0, Math.max(0, file.lastIndexOf('/'))),
     );
   },
 );

packages/website/package.json

@@ -10,8 +10,10 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
+    "@uidotdev/usehooks": "^2.4.1",
     "bright": "^0.8.4",
     "express": "^4.18.2",
+    "next-mdx-remote": "^4.4.1",
     "react": "18.3.0-canary-0e352ea01-20231109",
     "react-dom": "18.3.0-canary-0e352ea01-20231109",
     "react-server-dom-webpack": "18.3.0-canary-0e352ea01-20231109",

packages/website/src/components/app.tsx

@@ -1,6 +1,7 @@
+import { Button } from './button.js';
+import { Content } from './content.js';
 import { Credits } from './credits.js';
-import { ShowHide } from './showhide.js';
-import { Code1 } from './code.js';
+import { Readme } from './readme.js';
 
 const App = () => {
   return (
@@ -27,35 +28,22 @@ const App = () => {
           The minimal React framework
         </h3>
         <div className="mt-12 flex flex-col justify-center gap-4 px-12 sm:mt-8 sm:flex-row sm:gap-6 sm:px-0">
+          <Readme>
+            <Content />
+          </Readme>
           {links.map((link) => (
-            <Link key={link.href} {...link} />
+            <Button key={link.href} {...link} />
           ))}
         </div>
       </div>
       <Credits />
-      <ShowHide>
-        <Code1 />
-      </ShowHide>
     </div>
   );
 };
 
-const Link = ({ href, children }: any) => {
-  return (
-    <a
-      href={href}
-      target="_blank"
-      rel="noopenner noreferrer"
-      className="rounded-md bg-red-900 px-4 py-3 text-base font-black uppercase leading-none tracking-wide text-red-50"
-    >
-      {children}
-    </a>
-  );
-};
-
 const links = [
   { href: 'https://github.com/dai-shi/waku', children: 'GitHub' },
-  { href: 'https://www.npmjs.com/package/waku', children: 'NPM' },
+  // { href: 'https://www.npmjs.com/package/waku', children: 'NPM' },
   { href: 'https://discord.gg/MrQdmzd', children: 'Discord' },
 ];
 

packages/website/src/components/button.tsx

@@ -0,0 +1,32 @@
+// FIXME we should be able to remove this directive
+'use client';
+
+import type { ComponentPropsWithoutRef, ElementType } from 'react';
+
+type ButtonProps = ComponentPropsWithoutRef<'button'> &
+  ComponentPropsWithoutRef<'a'>;
+
+export const Button = ({ href, children, ...rest }: ButtonProps) => {
+  let Element: ElementType = 'button';
+  const props: ButtonProps = {};
+
+  if (href) {
+    Element = 'a';
+    props.href = href;
+
+    if (href.startsWith('http')) {
+      props.target = '_blank';
+      props.rel = 'noopener noreferrer';
+    }
+  }
+
+  return (
+    <Element
+      className="rounded-md bg-red-900 px-4 py-3 text-base font-black uppercase leading-none tracking-wide text-red-50 transition duration-300 ease-in-out hover:bg-red-800"
+      {...props}
+      {...rest}
+    >
+      {children}
+    </Element>
+  );
+};

packages/website/src/components/code.tsx

@@ -1,26 +1,11 @@
-import { Code } from 'bright';
+import { Code as Component } from 'bright';
 
-const code1 = `
-import { lazy } from "react";
-import { defineEntries } from "waku/server";
+import theme from '../theme.json';
 
-const App = lazy(() => import("./components/App.js"));
+type CodeProps = {
+  code: string;
+};
 
-export default defineEntries(
-  // renderEntries
-  async (input) => {
-    return {
-      App: <App name={input || "Waku"} />,
-    };
-  },
-);
-`.trim();
-
-export const Code1 = () => (
-  <Code
-    className="border-cVanilla !m-0 max-w-xs overflow-scroll !rounded-2xl border-2 !p-0 sm:max-w-sm md:max-w-md lg:max-w-full"
-    theme="solarized-dark"
-    code={code1}
-    lang="tsx"
-  />
+export const Code = ({ code, ...rest }: CodeProps) => (
+  <Component lang="tsx" theme={theme} code={code.trim()} {...rest} />
 );

packages/website/src/components/content.tsx

@@ -0,0 +1,61 @@
+import fs from 'node:fs';
+// @ts-expect-error no exported member
+import { MDXRemote } from 'next-mdx-remote/rsc';
+
+import { Code } from './code.js';
+
+export const Content = () => {
+  const file = fs.readFileSync('../../README.md', 'utf8');
+  const source = `## Introduction${file
+    .split('## Introduction')[1]
+    ?.split('## Tweets')[0]}`;
+
+  return <MDXRemote source={source} components={components} />;
+};
+
+const components = {
+  h2: ({ children, ...rest }: any) => (
+    <h2
+      className="mb-2 mt-16 text-[2.75rem] font-bold leading-none first-of-type:mt-0"
+      {...rest}
+    >
+      {children}
+    </h2>
+  ),
+  h3: ({ children, ...rest }: any) => (
+    <h3 className="mb-2 mt-8 text-3xl font-bold leading-none" {...rest}>
+      {children}
+    </h3>
+  ),
+  h4: ({ children, ...rest }: any) => (
+    <h3
+      {...rest}
+      className="mb-2 mt-8 text-xl font-bold uppercase leading-none tracking-wide"
+    >
+      {children}
+    </h3>
+  ),
+  p: ({ children, ...rest }: any) => (
+    <p
+      className="mb-4 text-lg font-normal leading-normal text-white/60 lg:text-xl"
+      {...rest}
+    >
+      {children}
+    </p>
+  ),
+  code: ({ children, ...rest }: any) => (
+    <span
+      className="-my-0.5 inline-block rounded bg-gray-800 px-1.5 py-px font-mono text-base text-white/80"
+      {...rest}
+    >
+      {children}
+    </span>
+  ),
+  pre: ({ children, ...rest }: any) => (
+    <Code
+      code={children.props.children}
+      className="!-mx-[0.75em] !overflow-clip !rounded-xl !bg-gray-800 !p-[0.5em] !font-mono [&>*]:!bg-gray-800"
+      {...rest}
+    />
+  ),
+};

packages/website/src/components/modal.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { Fragment } from 'react';
+import type { ReactNode } from 'react';
+import { useClickAway } from '@uidotdev/usehooks';
+
+type ModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+};
+
+export const Modal = ({ isOpen, onClose, children }: ModalProps) => {
+  const ref: any = useClickAway(onClose);
+
+  if (!isOpen) return <Fragment />;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-8">
+      <div className="inline-block overflow-clip rounded-2xl border-8 border-gray-950 bg-gray-900 p-2">
+        <div
+          ref={ref}
+          className="relative aspect-[1/1] w-full max-w-4xl overflow-y-auto p-6 text-left text-white sm:aspect-[4/3] lg:aspect-[16/9] lg:p-10"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};

packages/website/src/components/readme.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useState, Fragment } from 'react';
+import type { ReactNode } from 'react';
+
+import { Button } from './button.js';
+import { Modal } from './modal.js';
+
+type ReadmeProps = {
+  children: ReactNode;
+};
+
+export const Readme = ({ children }: ReadmeProps) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  return (
+    <Fragment>
+      <Button onClick={() => setIsOpen(true)}>Readme</Button>
+      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        {children}
+      </Modal>
+    </Fragment>
+  );
+};

packages/website/src/index.html

@@ -34,7 +34,20 @@
     <style>
       @import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=block');
       @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=block');
+      @import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=block');
       @tailwind base;
+      *::-webkit-scrollbar {
+        @apply h-full w-4 bg-gray-900;
+      }
+      *::-webkit-scrollbar-track {
+        @apply bg-gray-900;
+      }
+      *::-webkit-scrollbar-thumb {
+        @apply rounded-2xl border-4 border-solid border-gray-900 bg-gray-600;
+      }
+      *::-webkit-scrollbar-button {
+        @apply hidden;
+      }
       @tailwind components;
       @tailwind utilities;
     </style>

packages/website/src/main.tsx

@@ -1,5 +1,5 @@
 import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
+import { createRoot, hydrateRoot } from 'react-dom/client';
 import { Root, Slot } from 'waku/client';
 
 const rootElement = (
@@ -10,4 +10,17 @@ const rootElement = (
   </StrictMode>
 );
 
-createRoot(document.getElementById('root')!).render(rootElement);
+// FIXME temporary fix, doesn't feel ideal.
+function init() {
+  const root = document.getElementById('root');
+  if (!root) {
+    setTimeout(init);
+    return;
+  }
+  if ((globalThis as any).__WAKU_SSR_ENABLED__) {
+    hydrateRoot(root, rootElement);
+  } else {
+    createRoot(root).render(rootElement);
+  }
+}
+init();