create-waku 0.7.0 → 0.7.2

package/template/02_demo/postcss.config.js

@@ -0,0 +1,7 @@
+/** @type {import('postcss-load-config').Config} */
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/template/02_demo/src/components/error-boundary.tsx

@@ -0,0 +1,28 @@
+import { Component } from 'react';
+import type { ReactNode, FunctionComponent } from 'react';
+
+interface Props {
+  fallback: (error: unknown) => ReactNode;
+  children: ReactNode;
+}
+
+class ErrorBoundaryClass extends Component<Props, { error?: unknown }> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {};
+  }
+
+  static getDerivedStateFromError(error: unknown) {
+    return { error };
+  }
+
+  render() {
+    if ('error' in this.state) {
+      return this.props.fallback(this.state.error);
+    }
+    return this.props.children;
+  }
+}
+
+export const ErrorBoundary =
+  ErrorBoundaryClass as unknown as FunctionComponent<Props>;

package/template/02_demo/src/components/footer.tsx

@@ -0,0 +1,18 @@
+export const Footer = () => {
+  return (
+    <footer className="fixed bottom-0 left-0 p-6">
+      <div>
+        visit{' '}
+        <a
+          href="https://waku.gg/"
+          target="_blank"
+          rel="noreferrer"
+          className="mt-4 inline-block underline"
+        >
+          waku.gg
+        </a>{' '}
+        to learn more
+      </div>
+    </footer>
+  );
+};

package/template/02_demo/src/components/header.tsx

@@ -0,0 +1,11 @@
+import { Link } from 'waku';
+
+export const Header = () => {
+  return (
+    <header className="fixed left-0 top-0 p-6">
+      <h2 className="text-lg font-bold tracking-tight">
+        <Link to="/">Waku pokemon</Link>
+      </h2>
+    </header>
+  );
+};

package/template/02_demo/src/entries.tsx

@@ -0,0 +1,29 @@
+import { createPages } from 'waku';
+
+import { getPokemonPaths } from './lib/index.js';
+import { RootLayout } from './templates/root-layout.js';
+import { HomePage } from './templates/home-page.js';
+import { PokemonPage } from './templates/pokemon-page.js';
+
+export default createPages(async ({ createPage, createLayout }) => {
+  createLayout({
+    render: 'static',
+    path: '/',
+    component: RootLayout,
+  });
+
+  createPage({
+    render: 'dynamic',
+    path: '/',
+    component: HomePage,
+  });
+
+  const pokemonPaths = await getPokemonPaths();
+
+  createPage({
+    render: 'static',
+    path: '/[slug]',
+    component: PokemonPage,
+    staticPaths: pokemonPaths,
+  });
+});

package/template/02_demo/src/lib/index.ts

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { pokemon } from './pokemon.js';
+
+/**
+ * Mock database
+ * @param {TemplateStringsArray} query: mock query string
+ */
+export const sql = async (query: TemplateStringsArray) => {
+  const shuffledPokemon = shuffle(pokemon).slice(0, 9);
+
+  return { rows: shuffledPokemon };
+};
+
+const shuffle = (array: Array<any>) => {
+  return array
+    .map((value: any) => ({ value, sort: Math.random() }))
+    .sort((a: any, b: any) => a.sort - b.sort)
+    .map(({ value }: any) => value);
+};
+
+/**
+ * Mock static paths
+ */
+export const getPokemonPaths = async () => {
+  return pokemon.map((row) => row.slug);
+};