feat: #8 inital styles and layout

greenwood.config.ts

@@ -1,8 +1,15 @@
+import { greenwoodPluginImportRaw } from '@greenwood/plugin-import-raw';
+import { greenwoodPluginCssModules } from '@greenwood/plugin-css-modules';
+import { greenwoodPluginImportJsx } from '@greenwood/plugin-import-jsx';
 import { replBundlerResourcePlugin } from './repl-bundler-plugin.ts';
 import type { Config } from "@greenwood/cli";
 
 const config: Config = {
+  prerender: true,
   plugins: [
+    greenwoodPluginCssModules(),
+    greenwoodPluginImportRaw(),
+    greenwoodPluginImportJsx(),
     replBundlerResourcePlugin()
   ]
 };

package.json

@@ -16,13 +16,20 @@
   "type": "module",
   "scripts": {
     "dev": "greenwood develop",
-    "build": "greenwood build",
+    "build": "NODE_OPTIONS='--import @greenwood/cli/register' greenwood build",
     "serve": "greenwood serve",
     "check": "tsc",
     "postinstall": "patch-package"
   },
+  "dependencies": {
+    "geist": "^1.2.0",
+    "open-props": "^1.7.23"
+  },
   "devDependencies": {
-    "@greenwood/cli": "~0.34.0-alpha.3",
+    "@greenwood/cli": "~0.34.0-alpha.4",
+    "@greenwood/plugin-css-modules": "^0.34.0-alpha.4",
+    "@greenwood/plugin-import-raw": "^0.34.0-alpha.4",
+    "@greenwood/plugin-import-jsx": "^0.34.0-alpha.4",
     "patch-package": "^8.0.1",
     "typescript": "^5.9.2"
   }

patches/wc-compiler+0.19.0.patch

@@ -0,0 +1,25 @@
+diff --git a/node_modules/wc-compiler/src/jsx.d.ts b/node_modules/wc-compiler/src/jsx.d.ts
+index 2dc9baa..a2cb857 100644
+--- a/node_modules/wc-compiler/src/jsx.d.ts
++++ b/node_modules/wc-compiler/src/jsx.d.ts
+@@ -3,12 +3,17 @@ type IsCSSStyleDeclaration<T> = T extends CSSStyleDeclaration ? string : T;
+
+ // create a utility type to extract the attributes from any given element's DOM interface.
+ type ElementAttributes<E extends HTMLElement> = {
+-  // Extract all properties from the element, including inherited ones.
++  // Extract all properties from the element, including inherited ones
+   [A in keyof E]?: E[A] extends (...args: any) => any ? any : IsCSSStyleDeclaration<E[A]>;
+ } & {
+   class?: string;
+-};
+-
++  // have to manage this manually, can't seem to get this from TypeScript itself (not sure if just skill issue? :D)
++  // https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1790
++  // it should be there per https://github.com/mdn/browser-compat-data/pull/21875
++  // https://github.com/ProjectEvergreen/wcc/issues/236
++  popovertarget?: string;
++  popovertargetaction?: 'show' | 'hide' | 'toggle';
++}
+ // map each HTML tag to a union of its attributes and the global attributes.
+ type IntrinsicElementsFromDom = {
+   [E in keyof HTMLElementTagNameMap]: ElementAttributes<HTMLElementTagNameMap[E]>;

src/components/footer/footer.module.css

@@ -0,0 +1,21 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--size-4);
+  margin-top: var(--size-6);
+  gap: var(--size-3);
+  background-color: var(--color-black);
+}
+
+.logoLink {
+  display: flex;
+  flex: 1;
+}
+
+.socialTray {
+  display: flex;
+  flex: 2;
+  color: white;
+  justify-content: right;
+}

src/components/footer/footer.tsx

@@ -0,0 +1,25 @@
+import styles from './footer.module.css';
+import '../social-tray/social-tray.tsx';
+import wccLogo from '../../assets/wcc-logo.svg?type=raw';
+
+export default class Footer extends HTMLElement {
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    return (
+      <footer class={styles.container}>
+        <a href="/" title="WCC Home Page" class={styles.logoLink}>
+          {wccLogo}
+        </a>
+
+        <div class={styles.socialTray}>
+          <wcc-social-tray></wcc-social-tray>
+        </div>
+      </footer>
+    );
+  }
+}
+
+customElements.define('wcc-footer', Footer);