feat(website): UI/UX improvements (#375)

packages/website/contents/post-001.mdx

@@ -1,8 +1,10 @@
 ---
 slug: introducing-waku
 title: Introducing Waku
-description: Learn about the minimal React framework and how it enables the RSC features.
+description: Learn about the minimal React framework and how it enables RSC features.
 author: daishi
+release: 0.18
+date: 2023/12/12
 ---
 
 React, as a pure client UI library, has traditionally relied on frameworks like Next.js, Gatsby, and Remix to implement their own proprietary server-side functionalities. This pattern is evolving with the introduction of React Server Components (RSC) to the core library.

packages/website/package.json

@@ -10,9 +10,9 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.17",
     "bright": "^0.8.4",
     "clsx": "^2.1.0",
+    "framer-motion": "^10.18.0",
     "jotai": "^2.6.1",
     "next-mdx-remote": "^4.4.1",
     "react": "18.3.0-canary-c5b937576-20231219",
@@ -23,9 +23,9 @@
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",
     "autoprefixer": "^10.4.16",
-    "prettier": "^3.1.1",
-    "prettier-plugin-tailwindcss": "^0.5.10",
-    "tailwindcss": "^3.4.0",
+    "prettier": "^3.2.2",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
     "vite": "5.0.10"
   }

packages/website/src/atoms/index.ts

@@ -1,3 +1,5 @@
 import { atom } from 'jotai';
 
 export const menuAtom = atom(false);
+
+export const scrolledAtom = atom(false);

packages/website/src/components/analytics.tsx

@@ -0,0 +1,24 @@
+import { getEnv } from 'waku/server';
+
+export const Analytics = () => {
+  const trackingId = getEnv('TRACKING_ID');
+
+  if (!trackingId) return null;
+
+  return (
+    <>
+      <script
+        async={true}
+        src={`https://www.googletagmanager.com/gtag/js?id=${trackingId}`}
+      />
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${trackingId}');`,
+        }}
+      />
+    </>
+  );
+};

packages/website/src/components/button.tsx

@@ -19,7 +19,7 @@ export const Button = ({ href, children, ...rest }: ButtonProps) => {
 
   return (
     <Element
-      className="text-red-50 rounded-md bg-primary px-4 py-3 text-base font-black uppercase  leading-none transition duration-300 ease-in-out hover:bg-secondary focus:ring-4 focus:ring-primary-300"
+      className="text-red-50 rounded-md bg-primary px-4 py-3 text-base font-black uppercase leading-none transition-colors duration-300 ease-in-out hover:bg-secondary focus:ring-4 focus:ring-primary-300"
       {...props}
       {...rest}
     >

packages/website/src/components/credits.tsx

@@ -4,55 +4,35 @@ export const Credits = () => {
   if (getEnv('SHOW_CREDITS') !== 'YES') return null;
 
   return (
-    <div
-      style={{
-        position: 'fixed',
-        bottom: 0,
-        right: 0,
-        zIndex: '40',
-        padding: '96px 0 0 256px',
-        backgroundColor: 'transparent',
-        backgroundImage:
-          'url("https://storage.googleapis.com/candycode/bg.png")',
-        backgroundSize: '100% 100%',
-        backgroundRepeat: 'no-repeat',
-        lineHeight: 1,
-        pointerEvents: 'none',
-        overflow: 'clip',
-      }}
-    >
+    <div className="pointer-events-none fixed bottom-0 left-0 right-0 z-40 flex w-full items-center justify-between p-[16px]">
+      <a
+        href="https://vercel.com/home"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="group pointer-events-auto inline-flex origin-bottom-left scale-75 flex-col items-center rounded-md bg-black p-[16px] sm:scale-100"
+      >
+        <span className="mb-[4px] font-simple text-[11px] uppercase tracking-[0.125em] text-gray-600 transition-colors duration-300 ease-in-out group-hover:text-white">
+          sponsored by
+        </span>
+        <img
+          src="https://cdn.candycode.com/waku/vercel.svg"
+          alt="Vercel"
+          className="h-[20px] w-auto object-contain"
+        />
+      </a>
       <a
         href="https://candycode.com/"
         target="_blank"
         rel="noopener noreferrer"
-        style={{
-          position: 'relative',
-          zIndex: '40',
-          display: 'inline-flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-          width: '100%',
-          padding: '16px 16px 16px 16px',
-          pointerEvents: 'auto',
-        }}
+        className="group pointer-events-auto inline-flex origin-bottom-right scale-75 flex-col items-center rounded-md bg-black p-[16px] sm:scale-100"
       >
-        <span
-          style={{
-            fontFamily: "'Arial', sans-serif",
-            fontSize: '11px',
-            letterSpacing: '0.125em',
-            textTransform: 'uppercase',
-            color: '#808080',
-            marginBottom: '4px',
-          }}
-        >
+        <span className="mb-[4px] font-simple text-[11px] text-xs uppercase tracking-[0.125em] text-gray-600 transition-colors duration-300 ease-in-out group-hover:text-white">
           website by
         </span>
         <img
           src="https://storage.googleapis.com/candycode/candycode.svg"
           alt="candycode, an alternative graphic design and web development agency based in San Diego"
-          style={{ width: '104px', height: '20px' }}
+          className="h-[20px] w-[104px]"
         />
       </a>
     </div>

packages/website/src/components/fade.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import cx from 'clsx';
+import { useAtomValue } from 'jotai';
+
+import { scrolledAtom } from '../atoms/index.js';
+
+type FadeProps = {
+  always?: boolean;
+};
+
+export const Fade = ({ always = false }: FadeProps) => {
+  const hasScrolled = useAtomValue(scrolledAtom);
+
+  return (
+    <div
+      className={cx(
+        'pointer-events-none fixed inset-0 z-0 transition-opacity duration-500 ease-in-out',
+        always || hasScrolled ? 'opacity-100' : 'opacity-0',
+      )}
+    >
+      <div className="absolute inset-0 backdrop-blur" />
+      <div className="absolute inset-0 bg-gray-900/75" />
+      <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black" />
+    </div>
+  );
+};

packages/website/src/components/mdx.tsx

@@ -39,7 +39,11 @@ export const components = {
     </b>
   ),
   a: ({ children, ...rest }: any) => (
-    <a className="text-white/80 underline" target="_blank" {...rest}>
+    <a
+      className="text-white/80 underline transition-colors duration-300 ease-in-out hover:text-white"
+      target="_blank"
+      {...rest}
+    >
       {children}
     </a>
   ),
@@ -53,7 +57,7 @@ export const components = {
   ),
   code: ({ children, ...rest }: any) => (
     <span
-      className="-my-0.5 inline-block rounded bg-gray-800 px-1.5 py-px font-mono text-sm text-white/80 sm:text-base"
+      className="-my-0.5 inline-block rounded bg-gray-900 px-1.5 py-px font-mono text-sm text-white/80 sm:text-base"
       {...rest}
     >
       {children}
@@ -62,7 +66,7 @@ export const components = {
   pre: ({ children, ...rest }: any) => (
     <Code
       code={children.props.children}
-      className="max-w-full !overflow-clip overflow-x-scroll !rounded-xl !bg-gray-800 !p-0 !font-mono !text-sm sm:!-mx-[0.75em] sm:max-w-[calc(100%+1.5em)] sm:!p-[0.5em] sm:!text-base [&>*]:!bg-gray-800"
+      className="max-w-full !overflow-clip overflow-x-scroll !rounded-xl !bg-gray-900 !p-0 !font-mono !text-sm sm:!-mx-[0.75em] sm:max-w-[calc(100%+1.5em)] sm:!p-[0.5em] sm:!text-base [&>*]:!bg-gray-900"
       {...rest}
     />
   ),

packages/website/src/components/menu.tsx

@@ -16,12 +16,12 @@ export const Menu = () => {
 
   return (
     <>
-      <div className="fixed bottom-0 left-0 z-100 p-8 sm:left-auto xl:bottom-auto xl:right-0 xl:top-0">
+      <div className="fixed right-0 top-0 z-100 p-5 lg:left-0 lg:right-auto lg:p-8">
         <button
           onClick={() => setIsMenuOpen(!isMenuOpen)}
-          className="inline-flex aspect-square h-16 w-16 items-center justify-center overflow-clip rounded-full border-4 border-gray-950 bg-gray-900 text-3xl transition duration-300 ease-in-out hover:bg-gray-800 focus:ring-4 focus:ring-primary-300"
+          className="inline-flex aspect-square h-[3.5rem] w-[3.5rem] items-center justify-center overflow-clip rounded-full border-4 border-gray-950 bg-gray-900 text-3xl transition-colors duration-300 ease-in-out hover:bg-gray-800 focus:ring-4 focus:ring-primary-300"
         >
-          <div className="h-full w-full p-3">
+          <div className="h-full w-full p-2.5">
             {!isMenuOpen ? (
               <img
                 key="menu"
@@ -45,12 +45,14 @@ export const Menu = () => {
           isMenuOpen
             ? 'pointer-events-auto opacity-100'
             : 'pointer-events-none opacity-0',
-          'fixed inset-0 z-90 flex items-center justify-center overscroll-none bg-gray-950/90 pb-32 text-white backdrop-blur transition-opacity duration-700 ease-in-out lg:pb-0',
+          'fixed inset-0 z-90 flex items-center justify-center overscroll-none text-white transition-opacity duration-500 ease-in-out',
         )}
       >
-        <ul className="flex flex-col gap-6 sm:gap-8">
+        <div className="absolute inset-0 backdrop-blur" />
+        <div className="absolute inset-0 bg-gray-950/90" />
+        <ul className="relative z-100 flex-col gap-6 text-center last:flex sm:gap-8">
           {links.map((link) => {
-            return <MenuLink key={link.href} link={link} />;
+            return <MenuLink key={link.to} link={link} />;
           })}
         </ul>
       </nav>
@@ -60,7 +62,7 @@ export const Menu = () => {
 
 type MenuLinkProps = {
   link: {
-    href: string;
+    to?: string;
     label: string;
     disabled?: boolean;
   };
@@ -69,62 +71,53 @@ type MenuLinkProps = {
 export const MenuLink = ({ link }: MenuLinkProps) => {
   const setIsMenuOpen = useSetAtom(menuAtom);
 
-  const props = {
-    onClick: () => setIsMenuOpen(false),
-    className: cx(
-      'flex items-center gap-4 rounded-md focus:ring-4 focus:ring-primary-300',
-      !link.disabled
-        ? 'text-white transition-colors duration-300 ease-in-out hover:text-primary'
-        : 'cursor-not-allowed text-white/40',
-    ),
-  };
-
-  const label = (
-    <span className="text-4xl font-bold sm:text-6xl">{link.label}</span>
-  );
+  let Element: any = 'button';
+  const props: any = {};
 
-  if (link.disabled) {
-    return (
-      <li>
-        <div {...props}>
-          {label}
-          <span className="inline-block rounded-md bg-white px-2 py-1 text-[0.625rem] font-black uppercase tracking-wide text-black sm:text-xs">
-            Coming soon
-          </span>
-        </div>
-      </li>
-    );
+  if (link.to) {
+    if (link.to.startsWith('http')) {
+      Element = 'a';
+      props.href = link.to;
+      props.target = '_blank';
+      props.rel = 'noopener noreferrer';
+    } else {
+      Element = Link;
+      props.to = link.to;
+    }
   }
 
-  if (link.href.startsWith('http')) {
-    return (
-      <li>
-        <a
-          {...props}
-          target="_blank"
-          rel="noopener noreferrer"
-          href={link.href}
-        >
-          {label}
-        </a>
-      </li>
-    );
+  if (link.disabled) {
+    Element = 'div';
   }
 
   return (
     <li>
-      <Link {...props} to={link.href}>
-        {label}
-      </Link>
+      <Element
+        {...props}
+        onClick={() => setIsMenuOpen(false)}
+        className={cx(
+          'flex items-center gap-4 rounded-md focus:ring-4 focus:ring-primary-300',
+          !link.disabled
+            ? 'text-white transition-colors duration-300 ease-in-out hover:text-primary'
+            : 'cursor-not-allowed text-white/40',
+        )}
+      >
+        <span className="text-4xl font-bold sm:text-6xl">{link.label}</span>
+        {link.disabled && (
+          <span className="inline-block rounded-md bg-white px-2 py-1 text-[0.625rem] font-black uppercase tracking-wide text-black sm:text-xs">
+            Coming soon
+          </span>
+        )}
+      </Element>
     </li>
   );
 };
 
 const links = [
-  { href: '/', label: 'Home' },
-  { href: '/docs', label: 'Docs', disabled: true },
-  { href: 'https://github.com/dai-shi/waku/issues/24', label: 'Roadmap' },
-  { href: '/blog', label: 'Blog', disabled: true },
-  { href: 'https://github.com/dai-shi/waku', label: 'GitHub' },
-  { href: 'https://discord.gg/MrQdmzd', label: 'Discord' },
+  { to: '/', label: 'Home' },
+  { to: '/docs', label: 'Docs', disabled: true },
+  { to: 'https://github.com/dai-shi/waku/issues/24', label: 'Roadmap' },
+  { to: '/blog', label: 'Blog', disabled: true },
+  { to: 'https://github.com/dai-shi/waku', label: 'GitHub' },
+  { to: 'https://discord.gg/MrQdmzd', label: 'Discord' },
 ];