create website starter

joist-framework · Oct 7, 2024 · db2983b · db2983b
1 parent b19b6ce
commit db2983b
Show file tree

Hide file tree

Showing 12 changed files with 690 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,8 @@
   "license": "MIT",
   "workspaces": [
     "packages/**",
-    "integration/**"
+    "integration/**",
+    "website"
   ],
   "scripts": {
     "prepare": "husky"

diff --git a/packages/ssr/README.md b/packages/ssr/README.md
@@ -21,7 +21,7 @@ applicator.apply(document, [])
 ## Vite
 
 ```TS
-import { Applicator. NoopTemplateCache, FileSysTemplateLoader } from '@joist/ssr';
+import { Applicator, NoopTemplateCache, FileSysTemplateLoader } from '@joist/ssr';
 import { defineConfig } from 'vite';
 
 const applicator = new Applicator(
@@ -35,13 +35,24 @@ const applicator = new Applicator(
 export default defineConfig({
   plugins: [
     {
+      name: 'Web Component SSR',
       transformIndexHtml: {
-        enforce: "pre",
-        transform(html) {
-          return applicator.apply(html, ['my-element', 'my-dropdown']);
+        order: 'pre',
+        handler(html) {
+          return applicator.apply(html, ['joist-header', 'joist-nav']);
+        }
+      },
+      handleHotUpdate({ file, server }) {
+        if (file.includes('elements') && (file.endsWith('.html') || file.endsWith('.css'))) {
+          console.log(`${file} updated...`);
+
+          server.ws.send({
+            type: 'full-reload',
+            path: '*'
+          });
         }
       }
     }
-  ],
+  ]
 });
 ```
diff --git a/website/elements/joist-header/joist-header.css b/website/elements/joist-header/joist-header.css
@@ -0,0 +1,8 @@
+:host {
+  display: contents;
+}
+
+header {
+  padding: 1rem;
+  background: blue;
+}
diff --git a/website/elements/joist-header/joist-header.html b/website/elements/joist-header/joist-header.html
@@ -0,0 +1 @@
+<header>Joist</header>
diff --git a/website/elements/joist-header/joist-header.ts b/website/elements/joist-header/joist-header.ts
@@ -0,0 +1,12 @@
+import { element } from '@joist/element';
+
+@element({
+  tagName: 'joist-header'
+})
+class JoistHeaderElement extends HTMLElement {
+  constructor() {
+    super();
+  }
+}
+
+export { JoistHeaderElement };
diff --git a/website/elements/joist-nav/joist-nav.css b/website/elements/joist-nav/joist-nav.css
@@ -0,0 +1,8 @@
+:host {
+  display: contents;
+}
+
+nav {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/website/elements/joist-nav/joist-nav.html b/website/elements/joist-nav/joist-nav.html
@@ -0,0 +1,4 @@
+<nav>
+  <a href="">Getting Started</a>
+  <a href="">API</a>
+</nav>
diff --git a/website/elements/joist-nav/joist-nav.ts b/website/elements/joist-nav/joist-nav.ts
@@ -0,0 +1,8 @@
+import { element } from '@joist/element';
+
+@element({
+  tagName: 'joist-nav'
+})
+class JoistNavElement extends HTMLElement {}
+
+export { JoistNavElement };
diff --git a/website/index.html b/website/index.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+
+  <body>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      * {
+        font-family:
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          'Segoe UI',
+          Roboto,
+          Oxygen,
+          Ubuntu,
+          Cantarell,
+          'Open Sans',
+          'Helvetica Neue',
+          sans-serif;
+      }
+    </style>
+
+    <joist-header></joist-header>
+
+    <joist-nav></joist-nav>
+
+    <script type="module" src="./elements/joist-header/joist-header.ts"></script>
+    <script type="module" src="./elements/joist-nav/joist-nav.ts"></script>
+  </body>
+</html>
diff --git a/website/package.json b/website/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@joist/website",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^5.4.7"
+  }
+}
diff --git a/website/vite.config.js b/website/vite.config.js
@@ -0,0 +1,34 @@
+import { Applicator, NoopTemplateCache, FileSysTemplateLoader } from '@joist/ssr';
+import { defineConfig } from 'vite';
+
+const applicator = new Applicator(
+  new NoopTemplateCache(),
+  new FileSysTemplateLoader(
+    (tag) => `elements/${tag}/${tag}.html`,
+    (tag) => `elements/${tag}/${tag}.css`
+  )
+);
+
+export default defineConfig({
+  plugins: [
+    {
+      name: 'Web Component SSR',
+      transformIndexHtml: {
+        order: 'pre',
+        handler(html) {
+          return applicator.apply(html, ['joist-header', 'joist-nav']);
+        }
+      },
+      handleHotUpdate({ file, server }) {
+        if (file.includes('elements') && (file.endsWith('.html') || file.endsWith('.css'))) {
+          console.log(`${file} updated...`);
+
+          server.ws.send({
+            type: 'full-reload',
+            path: '*'
+          });
+        }
+      }
+    }
+  ]
+});