New example with cssmodules and pages router (#641)

- added `04_cssmodules` example
- removed `09_cssmodules` example
- changed `12_css` example to include layout in `09_cssmodules`

Remaining:
- [ ] Flash of unstyled content (FOUC) in DEV
- [ ] No styles in client components in PRD

examples/04_cssmodules/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+.env*
+*.tsbuildinfo
+.cache
+.DS_Store
+*.pem

examples/09_cssmodules/package.json → examples/04_cssmodules/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "waku-example",
+  "name": "waku-starter",
   "version": "0.1.0",
   "type": "module",
   "private": true,

examples/04_cssmodules/src/components/counter.module.css

@@ -0,0 +1,22 @@
+.section {
+  border-color: rgb(96, 165, 250);
+  margin-left: -1rem;
+  margin-right: -1rem;
+  margin-top: 1rem;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  border-style: dashed;
+  padding: 1rem;
+}
+
+.button {
+  border-radius: 0.125rem;
+  background-color: rgb(0, 0, 0);
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: rgb(255, 255, 255);
+}

examples/04_cssmodules/src/components/counter.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { useState } from 'react';
+
+import styles from './counter.module.css';
+
+export const Counter = () => {
+  const [count, setCount] = useState(0);
+
+  const handleIncrement = () => setCount((c) => c + 1);
+
+  return (
+    <section className={styles.section}>
+      <div>Count: {count}</div>
+      <button onClick={handleIncrement} className={styles.button}>
+        Increment
+      </button>
+    </section>
+  );
+};

examples/04_cssmodules/src/components/footer.module.css

@@ -0,0 +1,17 @@
+.footer {
+  padding: 1.5rem;
+}
+
+@media (min-width: 1024px) {
+  .footer {
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+  }
+}
+
+.a {
+  margin-top: 1rem;
+  display: inline-block;
+  text-decoration-line: underline;
+}

examples/04_cssmodules/src/components/footer.tsx

@@ -0,0 +1,20 @@
+import styles from './footer.module.css';
+
+export const Footer = () => {
+  return (
+    <footer className={styles.footer}>
+      <div>
+        visit{' '}
+        <a
+          href="https://waku.gg/"
+          target="_blank"
+          rel="noreferrer"
+          className={styles.a}
+        >
+          waku.gg
+        </a>{' '}
+        to learn more
+      </div>
+    </footer>
+  );
+};

examples/04_cssmodules/src/components/header.module.css

@@ -0,0 +1,21 @@
+.header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+@media (min-width: 1024px) {
+  .header {
+    position: fixed;
+    left: 0px;
+    top: 0px;
+  }
+}
+
+.h2 {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}

examples/04_cssmodules/src/components/header.tsx

@@ -0,0 +1,13 @@
+import { Link } from 'waku';
+
+import styles from './header.module.css';
+
+export const Header = () => {
+  return (
+    <header className={styles.header}>
+      <h2 className={styles.h2}>
+        <Link to="/">Waku starter</Link>
+      </h2>
+    </header>
+  );
+};

examples/04_cssmodules/src/pages/_layout.module.css

@@ -0,0 +1,22 @@
+.div {
+  font-family: 'Nunito';
+}
+
+.main {
+  margin: 1.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.main > * {
+  min-height: 16rem;
+  min-width: 16rem;
+}
+
+@media (min-width: 1024px) {
+  .main {
+    margin: 0px;
+    min-height: 100svh;
+    justify-content: center;
+  }
+}

examples/04_cssmodules/src/pages/_layout.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+import '../styles.css';
+import styles from './_layout.module.css';
+import { Header } from '../components/header';
+import { Footer } from '../components/footer';
+
+type RootLayoutProps = { children: ReactNode };
+
+export default async function RootLayout({ children }: RootLayoutProps) {
+  const data = await getData();
+
+  return (
+    <div className={styles.div}>
+      <meta property="description" content={data.description} />
+      <link rel="icon" type="image/png" href={data.icon} />
+      <Header />
+      <main className={styles.main}>{children}</main>
+      <Footer />
+    </div>
+  );
+}
+
+const getData = async () => {
+  const data = {
+    description: 'An internet website!',
+    icon: '/images/favicon.png',
+  };
+
+  return data;
+};
+
+export const getConfig = async () => {
+  return {
+    render: 'static',
+  };
+};

examples/04_cssmodules/src/pages/about.module.css

@@ -0,0 +1,12 @@
+.h1 {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+
+.link {
+  margin-top: 1rem;
+  display: inline-block;
+  text-decoration-line: underline;
+}

examples/04_cssmodules/src/pages/about.tsx

@@ -0,0 +1,34 @@
+import { Link } from 'waku';
+
+import styles from './about.module.css';
+
+export default async function AboutPage() {
+  const data = await getData();
+
+  return (
+    <div>
+      <title>{data.title}</title>
+      <h1 className={styles.h1}>{data.headline}</h1>
+      <p>{data.body}</p>
+      <Link to="/" className={styles.link}>
+        Return home
+      </Link>
+    </div>
+  );
+}
+
+const getData = async () => {
+  const data = {
+    title: 'About',
+    headline: 'About Waku',
+    body: 'The minimal React framework',
+  };
+
+  return data;
+};
+
+export const getConfig = async () => {
+  return {
+    render: 'static',
+  };
+};

examples/04_cssmodules/src/pages/index.module.css

@@ -0,0 +1,12 @@
+.h1 {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+
+.link {
+  margin-top: 1rem;
+  display: inline-block;
+  text-decoration-line: underline;
+}

examples/04_cssmodules/src/pages/index.tsx

@@ -0,0 +1,36 @@
+import { Link } from 'waku';
+
+import styles from './index.module.css';
+import { Counter } from '../components/counter';
+
+export default async function HomePage() {
+  const data = await getData();
+
+  return (
+    <div>
+      <title>{data.title}</title>
+      <h1 className={styles.h1}>{data.headline}</h1>
+      <p>{data.body}</p>
+      <Counter />
+      <Link to="/about" className={styles.link}>
+        About page
+      </Link>
+    </div>
+  );
+}
+
+const getData = async () => {
+  const data = {
+    title: 'Waku',
+    headline: 'Waku',
+    body: 'Hello world!',
+  };
+
+  return data;
+};
+
+export const getConfig = async () => {
+  return {
+    render: 'static',
+  };
+};