Improve preact example

bcomnes · Dec 29, 2024 · 0cb25a0 · 0cb25a0
1 parent 0ec6f19
commit 0cb25a0
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@ npm install top-bun
 
 ## Usage
 
-``` console
+```console
 $ top-bun --help
 Usage: top-bun [options]
 
@@ -95,6 +95,30 @@ The core idea of `top-bun` is that a `src` directory of markdown, html and js "i
 
 It ships with sane defaults so that you can point `top-bun` at a standard [markdown documented repository](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github) and have it build a website with near-zero preparation.
 
+## Examples
+
+A collection of examples can be found in the [`./examples`](./examples) folder.
+
+To run examples:
+
+```console
+$ git clone git@github.com:bcomnes/top-bun.git
+$ cd top-bun
+$ npm i
+$ npm run example:{example-name}
+$ npm i
+$ npm start
+```
+
+### Additional examples
+
+Here are some additional external examples of larger top-bun projects.
+If you have an project that uses top-bun and could act as a nice example, please PR it to the list!
+
+- [Blog Example](https://github.com/bcomnes/bret.io/)
+- [Isomorphic Static/Client App](https://github.com/hifiwi-fi/breadcrum.net/tree/master/packages/web/client)
+- [Zero-Conf Markdown Docs](https://github.com/bcomnes/deploy-to-neocities/blob/70b264bcb37fca5b21e45d6cba9265f97f6bfa6f/package.json#L38)
+
 ## Pages
 
 Pages are a named directories inside of `src`, with **one of** the following page files inside of it.

diff --git a/examples/preact/src/README.md b/examples/preact/src/README.md
@@ -1,3 +1,5 @@
 # Preact example
 
-This is a preact example. 
+This is a preact example.
+
+[Isomorphic Component Rendering](./isomorphic/)
diff --git a/examples/preact/src/isomorphic/client.js b/examples/preact/src/isomorphic/client.js
@@ -44,7 +44,7 @@ class App extends Component {
 }
 
 export const page = () => html`
-    <${App}/>
+    <${App} page="Isomorphic"/>
     <${Footer}>footer content here<//>
     <${Footer}>footer content here<//>
   `

diff --git a/examples/preact/src/layouts/root.layout.js b/examples/preact/src/layouts/root.layout.js
@@ -48,12 +48,10 @@ export default function defaultRootLayout ({
       `)}
       ${render(html`
         <body class="safe-area-inset">
-          <main class="mine-layout app-main">
-            ${typeof children === 'string'
-                ? html`<main class="mine-layout app-main" dangerouslySetInnerHTML="${{ __html: children }}"/>`
-                : html`<main class="mine-layout app-main">${children}</main>`
-            }
-          </main>
+        ${typeof children === 'string'
+            ? html`<main class="mine-layout app-main" dangerouslySetInnerHTML="${{ __html: children }}"/>`
+            : html`<main class="mine-layout app-main">${children}</main>`
+        }
         </body>
       `)}
     </html>

diff --git a/package.json b/package.json
@@ -96,6 +96,7 @@
     "clean:public": "rm -rf public && mkdir -p public",
     "clean:declarations-top": "rm -rf $(find . -maxdepth 1 -type f -name '*.d.ts*')",
     "clean:declarations-lib": "rm -rf $(find lib -type f -name '*.d.ts*' ! -name '*-types.d.ts')",
+    "clean-node_modules": "rm -rf node_modules && rm -rf examples/*/node_modules",
     "build": "npm run clean && run-p build:*",
     "build:top-bun": "./bin.js --src . --ignore examples,test-cases,coverage,*.tsconfig.json",
     "build:declaration": "tsc -p declaration.tsconfig.json",
@@ -105,7 +106,7 @@
     "example:string-layouts": "cd examples/string-layouts && npm i --production && npm run build",
     "example:default-layout": "cd examples/default-layout && npm i --production && npm run build",
     "example:nested-dest": "cd examples/nested-dest && npm i --production && npm run build",
-    "example-skip:uhtml-isomorphic": "cd examples/nested-dest && npm i --production && npm run build",
+    "example:preact": "cd examples/preact && npm i --production && npm run build",
     "deps": "depcruise --exclude '^node_modules|^[a-zA-Z0-9\\_]+$' --output-type dot . | dot -T svg > dependencygraph.svg",
     "deps3d": "depcruise --exclude '^node_modules|^[a-zA-Z0-9\\_]+$' --output-type plugin:dependency-cruiser/sample-3d-reporter-plugin --output-to 3d-dependency-graph.html .",
     "start": "npm run watch"