More example improvements

Author: bcomnes

.github/dependabot.yml

@@ -14,22 +14,55 @@ updates:
     directory: "/examples/basic"
     schedule:
       interval: "daily"
+  - package-ecosystem: "npm"
+    directory: "/examples/css-modules/"
+    schedule:
+      interval: "daily"
   - package-ecosystem: "npm"
     directory: "/examples/default-layout/"
     schedule:
       interval: "daily"
+  - package-ecosystem: "npm"
+    directory: "/examples/esbuild-settings"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "npm"
+    directory: "/examples/markdown-settings/"
+    schedule:
+      interval: "daily"
   - package-ecosystem: "npm"
     directory: "/examples/nested-dest/"
     schedule:
       interval: "daily"
   - package-ecosystem: "npm"
-    directory: "/examples/preact/"
+    directory: "/examples/preact-isomorphic/"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "npm"
+    directory: "/examples/react/"
     schedule:
       interval: "daily"
   - package-ecosystem: "npm"
     directory: "/examples/string-layouts/"
     schedule:
       interval: "daily"
+  - package-ecosystem: "npm"
+    directory: "/examples/tailwind/"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "npm"
+    directory: "/examples/type-stripping/"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "npm"
+    directory: "/examples/uhtml-isomorphic/"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "npm"
+    directory: "/examples/worker-examples/"
+    schedule:
+      interval: "daily"
+  # Enable version updates for pnpm
   # Enable updates to github actions
   - package-ecosystem: "github-actions"
     directory: "/"

README.md

@@ -5,7 +5,7 @@
 [![Types in JS](https://img.shields.io/badge/types_in_js-yes-brightgreen)](https://github.com/voxpelli/types-in-js)
 [![Neocities][neocities-img]](https://domstack.net)
 
-`domstack`: Cut the gordian knot of modern web development and build websites with actual html, md, css, js, ts and jsx.
+`domstack`: Cut the [gordian knot](https://en.wikipedia.org/wiki/Gordian_Knot) of modern web development and build websites with a stack of html, md, css, js, ts, jsx. DOMStack provides a few project based conventions around esbuild ande Node.js that lets you quickly, cleanly and easily build websites and web apps using all of your favorite technolgies without any framework specific impurities. It's also extreemly fast.
 
 ```console
 npm install @domstack/cli

examples/basic/package.json

@@ -19,7 +19,7 @@
     "npm-run-all2": "^6.0.0"
   },
   "dependencies": {
-    "@domstack/cli": "../../.",
+    "@domstack/cli": "file:../../.",
     "htm": "^3.1.1",
     "preact": "^10.26.6",
     "preact-render-to-string": "^6.5.13",

examples/basic/src/README.md

@@ -37,7 +37,7 @@ Navigate through different page types:
 - [Loose Markdown File](./loose-file.md)
 - [Markdown Page Example](./md-page/README.md)
 - [Nested Markdown Page](./md-page/sub-page/README.md)
-- [JavaScript Page Example](./js-page/page.js)
+- [JavaScript Page Example](./js-page/)
 - [HTML Page Example](./html-page/page.html)
 
 ## How It Works

examples/basic/src/js-page/loose-assets/page.js

@@ -1,10 +1,9 @@
 import { html } from 'htm/preact'
-import { render } from 'preact-render-to-string'
 
 import sharedData from './shared-lib.js'
 
 export default async function JSPage () {
-  return render(html`
+  return html`
   <div>
     <p>
       You can keep loose assets basically anywhere in the <pre>src</pre> directory.
@@ -17,7 +16,7 @@ export default async function JSPage () {
     </p>
     <p>${sharedData.shared}</p>
   </div>
-  `)
+  `
 }
 
 export const vars = {

examples/basic/src/js-page/page.js

@@ -1,20 +1,26 @@
+/**
+ * @import { PageFunction } from '@domstack/cli'
+ * @import { PageVars } from '../layouts/root.layout.js
+ */
 import { html } from 'htm/preact'
-import { render } from 'preact-render-to-string'
 
+/**
+* @type { PageFunction <PageVars>}
+*/
 export default async function JSPage ({
   vars: {
     siteName,
     title,
   }
 }) {
-  return render(html`
+  return html`
   <div class="js-page-example">
     <h1>JavaScript Page Example</h1>
-    
+
     <section class="explanation">
       <h2>What is a JavaScript Page?</h2>
       <p>
-        The JavaScript page type is the most powerful and flexible option in DOMStack. 
+        The JavaScript page type is the most powerful and flexible option in DOMStack.
         It allows you to:
       </p>
       <ul>
@@ -29,12 +35,12 @@ export default async function JSPage ({
       <h2>How to Implement</h2>
       <p>
         Export a default function (async or sync) that returns a string or any
-        type that your layout can handle. In this example, we're using 
+        type that your layout can handle. In this example, we're using
         <a href="https://github.com/developit/htm"><code>htm/preact</code></a> for JSX-like syntax.
       </p>
       <div class="code-example">
         <pre><code>export default async function MyPage({ vars }) {
-  return render(html\`<div>Content here</div>\`)
+  return html\`<div>Content here</div>\`
 }</code></pre>
       </div>
     </section>
@@ -61,7 +67,7 @@ export default async function JSPage ({
 
     <a href="../" class="back-link">← Back to Home</a>
   </div>
-  `)
+  `
 }
 
 // Define page-specific variables

examples/basic/src/layouts/child.layout.js

@@ -1,8 +1,13 @@
+/**
+ * @import { LayoutFunction } from '@domstack/cli'
+ * @import { PageVars } from './root.layout.js'
+ */
 import { html } from 'htm/preact'
 import { render } from 'preact-render-to-string'
 
 import defaultRootLayout from './root.layout.js'
 
+/** @type{LayoutFunction<PageVars>} */
 export default function articleLayout (args) {
   const { children, ...rest } = args
   const wrappedChildren = render(html`

examples/basic/src/layouts/root.layout.js

@@ -7,13 +7,29 @@
 //
 // All other variables are set on a page level basis, either by hand or by data extraction from the page type.
 
+/**
+ * @import { LayoutFunction } from '@domstack/cli'
+ */
+
 import { html } from 'htm/preact'
 import { render } from 'preact-render-to-string'
 
+/**
+ * @typedef {{
+ * title: string,
+ * siteName: string,
+ * basePath?: string,
+ }} PageVars
+ */
+
+/**
+  * @type {LayoutFunction<PageVars>}
+  */
 export default async function RootLayout ({
   vars: {
     title,
     siteName,
+    basePath
   },
   scripts,
   styles,
@@ -24,24 +40,23 @@ export default async function RootLayout ({
     <html>
       ${render(html`
         <head>
-          <meta charset="utf-8">
+          <meta charset="utf-8" />
           <title>${siteName}${title ? ` | ${title}` : ''}</title>
           <meta name="viewport" content="width=device-width, user-scalable=no" />
           ${scripts
-            ? scripts.map(script => html`<script src="${script}" type='module'></script>`)
+            ? scripts.map(script => html`<script type='module' src="${script.startsWith('/') ? `${basePath ?? ''}${script}` : script}" />`)
             : null}
           ${styles
-            ? styles.map(style => html`<link rel="stylesheet" href="${style}" />`)
+            ? styles.map(style => html`<link rel="stylesheet" href="${style.startsWith('/') ? `${basePath ?? ''}${style}` : style}" />`)
             : null}
         </head>
       `)}
       ${render(html`
-        <body>
-          <div class="mine-layout">
-            ${typeof children === 'string'
-              ? html`<div dangerouslySetInnerHTML=${{ __html: children }}></div>`
-              : children /* Support both preact and string children */}
-          </div>
+        <body className="safe-area-inset">
+        ${typeof children === 'string'
+            ? html`<main className="mine-layout app-main" dangerouslySetInnerHTML="${{ __html: children }}"/>`
+            : html`<main className="mine-layout app-main">${children}</main>`
+        }
         </body>
       `)}
     </html>

examples/css-modules/package.json

@@ -6,7 +6,7 @@
     "start": "npm run watch",
     "build": "npm run clean && domstack",
     "clean": "rm -rf public && mkdir -p public",
-    "watch": "npm run clean && tb --watch"
+    "watch": "npm run clean && dom --watch"
   },
   "author": "Bret Comnes <[email protected]> (https://bret.io/)",
   "license": "MIT",
@@ -17,7 +17,7 @@
     "mine.css": "^9.0.1",
     "preact": "^10.24.0",
     "preact-render-to-string": "^6.5.11",
-    "@domstack/cli": "../../."
+    "@domstack/cli": "file:../../."
   },
   "devDependencies": {
     "npm-run-all2": "^6.0.0"

examples/css-modules/src/globals/global.client.js

@@ -1,4 +1,2 @@
-// @ts-ignore
 import { toggleTheme } from 'mine.css'
-// @ts-ignore
 window.toggleTheme = toggleTheme