Add layout, header, and footer

package.json

@@ -16,6 +16,7 @@
     "@preact/preset-vite": "^2.9.3",
     "eslint": "^8.46.0",
     "eslint-config-prettier": "^8.6.0",
+    "patch-package": "^8.0.0",
     "prettier": "^2.8.8",
     "typescript": "^5.7.2",
     "vite": "^6.0.6"
@@ -28,7 +29,8 @@
     "eslint": "eslint src/**/*.{js,jsx,ts,tsx}",
     "tsc": "tsc -p tsconfig.json",
     "check-format": "prettier --no-error-on-unmatched-pattern --check **/*.{js,jsx,ts,tsx,css,md,html,yml,yaml,json}",
-    "format": "prettier --no-error-on-unmatched-pattern --write **/*.{js,jsx,ts,tsx,css,md,html,yml,yaml,json}"
+    "format": "prettier --no-error-on-unmatched-pattern --write **/*.{js,jsx,ts,tsx,css,md,html,yml,yaml,json}",
+    "postinstall": "patch-package"
   },
   "repository": {
     "type": "git",

patches/preact+10.25.3.patch

@@ -0,0 +1,46 @@
+diff --git a/node_modules/preact/compat/package.json b/node_modules/preact/compat/package.json
+index bb80a0f..a3cce5b 100644
+--- a/node_modules/preact/compat/package.json
++++ b/node_modules/preact/compat/package.json
+@@ -46,6 +46,7 @@
+       "import": "./scheduler.mjs",
+       "require": "./scheduler.js"
+     },
++    "./memo": "./src/memo.js",
+     "./package.json": "./package.json"
+   }
+ }
+diff --git a/node_modules/preact/compat/src/memo.d.ts b/node_modules/preact/compat/src/memo.d.ts
+new file mode 100644
+index 0000000..7d4ca0a
+--- /dev/null
++++ b/node_modules/preact/compat/src/memo.d.ts
+@@ -0,0 +1,13 @@
++
++import type { FunctionComponent } from 'preact'
++
++/**
++ * Memoize a component, so that it only updates when the props actually have
++ * changed. This was previously known as `React.pure`.
++ * @param c functional component
++ * @param comparer Custom equality function
++ */
++export function memo<P>(
++  c: FunctionComponent<P>,
++  comparer?: (prev: P, next: P) => boolean
++): FunctionComponent<P> ;
+diff --git a/node_modules/preact/package.json b/node_modules/preact/package.json
+index 9a8c293..4fdc438 100644
+--- a/node_modules/preact/package.json
++++ b/node_modules/preact/package.json
+@@ -25,6 +25,10 @@
+       "import": "./dist/preact.mjs",
+       "require": "./dist/preact.js"
+     },
++    "./compat/memo": {
++      "types": "./compat/src/memo.d.ts",
++      "import": "./compat/src/memo.js"
++    },
+     "./compat": {
+       "types": "./compat/src/index.d.ts",
+       "browser": "./compat/dist/compat.module.js",

patches/preact-iso+2.8.1.patch

@@ -0,0 +1,20 @@
+diff --git a/node_modules/preact-iso/src/router.d.ts b/node_modules/preact-iso/src/router.d.ts
+index 7958546..87715c7 100644
+--- a/node_modules/preact-iso/src/router.d.ts
++++ b/node_modules/preact-iso/src/router.d.ts
+@@ -40,9 +40,9 @@ export interface RouteProps<Props> extends RoutableProps {
+
+ export function Route<Props>(props: RouteProps<Props> & Partial<Props>): VNode;
+
+-declare module 'preact' {
+-	namespace JSX {
+-		interface IntrinsicAttributes extends RoutableProps {}
+-	}
+-	interface Attributes extends RoutableProps {}
+-}
++// declare module 'preact' {
++// 	namespace JSX {
++// 		interface IntrinsicAttributes extends RoutableProps {}
++// 	}
++// 	interface Attributes extends RoutableProps {}
++// }

src/App.tsx

@@ -6,6 +6,7 @@ import {
   Route,
 } from 'preact-iso'
 
+import { NotFound } from './components/NotFound'
 import aboutUsUrl from './routes/about-us.md'
 import { renderMarkdownRoute } from './utils/renderMarkdownRoute'
 
@@ -17,7 +18,7 @@ export default function App() {
       <ErrorBoundary>
         <Router>
           <Route path="/about-us" component={AboutUs} />
-          <Route default component={() => 'Not found'} />
+          <Route default component={NotFound} />
         </Router>
       </ErrorBoundary>
     </LocationProvider>

src/components/Footer.css

@@ -0,0 +1,21 @@
+footer {
+  padding: 7.5px;
+  background-color: rgb(140, 170, 29);
+  color: #fff;
+  text-align: center;
+}
+
+footer a {
+  display: inline-block;
+  color: #fff;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+footer a:visited {
+  color: #fff;
+}
+
+footer a:hover {
+  text-decoration: underline;
+}

src/components/Footer.tsx

@@ -0,0 +1,35 @@
+import { memo } from '../utils/memo'
+import './Footer.css'
+
+{
+  /* <script
+  src="https://kit.fontawesome.com/95fd764ad0.js"
+  crossorigin="anonymous"
+  async
+></script> */
+}
+
+const Footer = memo(() => {
+  return (
+    <footer>
+      <h2>Built with ❤️ in Seattle</h2>
+      <p>
+        This website is built using
+        <a target="_blank" href="https://preactjs.com">
+          Preact
+        </a>{' '}
+        and{' '}
+        <a target="_blank" href="https://vite.dev/">
+          Vite
+        </a>{' '}
+        and the code is open sourced on on
+        <a target="_blank" href="https://github.com/seattlejs/seattlejs.com">
+          Github
+        </a>
+        .
+      </p>
+    </footer>
+  )
+})
+
+export default Footer

src/components/Header.css

@@ -0,0 +1,107 @@
+header {
+  padding: 7.5px;
+  background-color: rgb(140, 170, 29);
+  color: #fff;
+}
+
+header a {
+  display: inline-block;
+  color: #fff;
+  text-decoration: none;
+  font-weight: 400;
+}
+
+#logo a {
+  display: flex;
+  margin-right: 8px;
+}
+
+#logo img {
+  display: block;
+  height: 32px;
+  border: 1px solid #fff;
+}
+
+nav {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+}
+
+nav > .nav-toggler {
+  grid-column: -2;
+  padding: 4px 12px;
+  background-color: transparent;
+  border: 1px solid #fff;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.nav-toggler > svg {
+  display: block;
+  height: 24px;
+}
+
+ul {
+  grid-row: 2;
+  grid-column: 1 / -1;
+  display: none;
+  margin-top: 8px;
+}
+
+.nav-toggler[aria-expanded='true'] + #nav-links {
+  display: block;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 8px 0 0 0;
+}
+
+a {
+  padding: 8px;
+}
+
+nav a:visited {
+  color: #fff;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a.special {
+  display: inline-block;
+  background-color: #f26c57;
+  border-radius: 4px;
+  padding: 8px;
+}
+
+#subheader {
+  background-color: #ffd007;
+  padding: 7.5px;
+  text-align: center;
+}
+
+@media only screen and (min-width: 768px) {
+  nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 80vw;
+    margin: 0 auto;
+  }
+
+  nav .nav-toggler {
+    display: none;
+  }
+
+  /* Always show the nav menu on desktop */
+  .nav-toggler[aria-expanded='true'] + #nav-links,
+  .nav-toggler[aria-expanded='false'] + #nav-links,
+  #nav-links {
+    display: flex;
+    gap: 24px;
+    margin: 0;
+  }
+}

src/components/Header.tsx

@@ -0,0 +1,67 @@
+import { useState, useCallback } from 'preact/hooks'
+
+import { memo } from '../utils/memo'
+import './Header.css'
+
+const Header = memo(() => {
+  const [expanded, setExpanded] = useState(false)
+  const onClick = useCallback(() => {
+    setExpanded(expanded => !expanded)
+  }, [])
+
+  return (
+    <header>
+      <nav>
+        <div id="logo">
+          <a href="/">
+            <img
+              src="/_public/images/logo.png"
+              alt="SeattleJS logo"
+              width="32"
+              height="32"
+            />
+          </a>
+        </div>
+        <button
+          class="nav-toggler"
+          type="button"
+          aria-controls="nav-links"
+          aria-expanded={expanded ? 'true' : 'false'}
+          aria-label="Site navigation"
+          onClick={onClick}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+            <path
+              stroke="#fff"
+              stroke-linecap="round"
+              stroke-miterlimit="10"
+              stroke-width="2"
+              d="M4 7h22M4 15h22M4 23h22"
+            />
+          </svg>
+        </button>
+        <ul id="nav-links">
+          <li>
+            <a href="/about-us">About Us</a>
+          </li>
+          <li>
+            <a href="/join">Join Our Community</a>
+          </li>
+          <li>
+            <a href="/conf">SeattleJS Conf 2023</a>
+          </li>
+          <li>
+            <a href="/code-of-conduct">Code of Conduct</a>
+          </li>
+          <li>
+            <a target="_blank" href="https://lu.ma/seattlejs/">
+              Tickets
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  )
+})
+
+export default Header

src/components/Layout.tsx

@@ -0,0 +1,28 @@
+import Footer from './Footer'
+import Header from './Header'
+
+export default function Layout({
+  children,
+}: {
+  children: preact.ComponentChildren
+}) {
+  // TODO: Figure out styling
+  //
+  //   <style>
+  //   :host {
+  //     display: flex;
+  //     flex-direction: column;
+  //     min-height: 100vh;
+  //   }
+  //   #main {
+  //     flex: 1;
+  //   }
+  // </style>
+  return (
+    <div>
+      <Header />
+      <div id="main">{children} </div>
+      <Footer />
+    </div>
+  )
+}

src/components/NotFound.tsx

@@ -0,0 +1,14 @@
+import Layout from './Layout'
+
+export function NotFound() {
+  return (
+    <Layout>
+      <video autoplay muted loop width="100%">
+        <source
+          type="video/mp4"
+          src="https://media.giphy.com/media/jkZtSdwKOx05BOlapR/source.mp4?cid=ecf05e474kgt0ax6stge6re5otcyqmhf7p7bx1ncirx3lp2q&rid=source.mp4&ct=g"
+        />
+      </video>
+    </Layout>
+  )
+}

src/utils/memo.ts

@@ -0,0 +1,3 @@
+import { memo } from 'preact/compat/memo'
+
+export { memo }