.github/workflows/docs-deploy.yml

@@ -0,0 +1,32 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    name: Deploy to GitHub Pages
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install dependencies in apps/liveviewjs.com
+        run: npm install -w apps/liveviewjs.com
+      - name: Build docusaurus website
+        run: npm run build -w apps/liveviewjs.com
+
+      # Popular action to deploy to GitHub Pages:
+      # Docs: https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-docusaurus
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          # Build output to publish to the `gh-pages` branch:
+          publish_dir: ./apps/liveviewjs.com/build
+          user_name: floodfx
+          user_email: donnie@floodfx.com

.github/workflows/test-docs-deploy.yml

@@ -0,0 +1,23 @@
+name: Test Docs Deploy
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - "*"
+
+jobs:
+  test-deploy:
+    name: Test Docs Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install dependencies in apps/liveviewjs.com
+        run: npm install -w apps/liveviewjs.com
+      - name: Build docusaurus website
+        run: npm run build -w apps/liveviewjs.com

apps/lambda-examples/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @liveviewjs/lambda-examples
 
+## 0.10.4
+
+### Patch Changes
+
+- 87b658d: Detect closed sockets and handle more gracefully
+- Updated dependencies [87b658d]
+  - liveviewjs@0.10.4
+  - @liveviewjs/examples@0.10.4
+  - @liveviewjs/express@0.10.4
+
 ## 0.10.3
 
 ### Patch Changes

apps/lambda-examples/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveviewjs/lambda-examples",
-  "version": "0.10.3",
+  "version": "0.10.4",
   "private": true,
   "scripts": {
     "start": "ts-node ./src/example/autorun.ts",

apps/liveviewjs.com/README.md

@@ -5,13 +5,13 @@ This website is built using [Docusaurus 2](https://docusaurus.io/), a modern sta
 ## Installation
 
 ```
-$ yarn
+$ npm install
 ```
 
 ### Local Development
 
 ```
-$ yarn start
+$ npm run start
 ```
 
 This command starts a local development server and opens up a browser window. Most changes are reflected live without
@@ -20,24 +20,24 @@ having to restart the server.
 ### Build
 
 ```
-$ yarn build
+$ npm run build
 ```
 
-This command generates static content into the `build` directory and can be served using any static contents hosting
+This command generates static content into the `docs` directory and can be served using any static contents hosting
 service.
 
 ### Deployment
 
 Using SSH:
 
 ```
-$ USE_SSH=true yarn deploy
+$ USE_SSH=true npm run deploy
 ```
 
 Not using SSH:
 
 ```
-$ GIT_USER=<Your GitHub username> yarn deploy
+$ GIT_USER=<Your GitHub username> npm run deploy
 ```
 
 If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the

apps/liveviewjs.com/docs/01-overview/gratitude.md

@@ -11,3 +11,5 @@ we can reuse on the client side.
 client code instead of reinventing!
 
 🙌 Thanks to [@blimmer](https://github.com/blimmer/) for the awesome feedback, documentation suggestions, and support!
+
+Thanks to you for checking out **LiveViewJS**! We hope you enjoy it as much as we do!

apps/liveviewjs.com/docs/01-overview/introduction.md

@@ -11,23 +11,39 @@ far less code and complexity and far more speed and efficiency**.
 
 ## What is a LiveView?
 
-A LiveView is a server-rendered HTML page that connects to the server via a persistent web socket. The web socket allows
-the client to send user events to the server and the server to send diffs in response. **LiveViewJS** is a LiveView
-framework that handles the complex part of this (handling websockets, diffing changes, applying DOM updates, etc.) so that
-you can focus on building your application.
+The LiveView pattern, [as popularized in Elixir’s Phoenix framework](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html), shifts your UI’s state management, event handling to the server, calculating minimal diffs to drive updates in your HTML over WebSockets.  
 
-Here's the typical "counter" example written as a LiveView in **LiveViewJS**:
+There are many benefits to this approach, including:
+ * extremely fast, SEO-friendly page loads
+ * simple state management that works well at any scale (not just small apps)
+ * minimal data transfer (only send diffs)
+ * no need to build (or operate) REST or GraphQL APIs
+
+There are also some drawbacks, including:
+ * requires a server (e.g. pure static sites are not the best fit)
+ * requires a internet connection (e.g. offline-first apps are not the best fit - though sporadic internet connectivity is fine)
+
+If you are building a web-based application, the LiveView approach is a super-powerful, some say "game-changing", way to build it and LiveViewJS is the best way to do it in NodeJS and Deno.
+
+### More detail
+
+As mentioned, a LiveView is a server-rendered HTML page that, when loaded, connects back to the server via a persistent web socket. As the user interacts with the LiveView, the client to sends user events (click, keys, etc) via the websocket back to the server and the server responds with diffs to the HTML page in return.
+
+### Websockets and Diffs? That sounds complicated!
+
+As a developer, you don't need to worry about connecting websockets or calculating diffs.  **LiveViewJS** handles all of the complex parts of this for you.  You just focus on implementing your business logic and rendering your views and LiveViewJS handles the rest.
+
+## Example "Counter" LiveView
+
+Here's the typical "counter" in **LiveViewJS**:
 
 ```ts
 import { createLiveView, html } from "liveviewjs";
 
 /**
  * A basic counter that increments and decrements a number.
  */
-export const counterLiveView = createLiveView<
-  { count: number }, // Define LiveView Context (a.k.a state)
-  { type: "increment" } | { type: "decrement" } // Define LiveView Events
->({
+export const counterLiveView = createLiveView({
   mount: (socket) => {
     // init state, set count to 0
     socket.assign({ count: 0 });
@@ -66,16 +82,20 @@ Yes, it "looks" like a React/Vue/Svelt UI but the main differences are:
 - This page was first rendered as plain HTML (not a bundle of JS)
 - The client is automatically connected to a server via a websocket
 - The click events are automatically shipped to the server
-- The server then runs the business logic to update the state
-- Using the new state, the server then renders a new view and calculates any diffs
-- Those diffs are shipped back to the client, where they are automatically applied
+- The server then runs the business logic to update the state 
+- The server automatically calculates the minimal diffs and sends them to the client
+- The client automatically applies the diffs to the DOM
 
 Pretty cool eh? We think so too! While this counter LiveView isn't particularly useful, it gives you a quick intro to how
-LiveViews work and what they look like both as code and in the browser. We've got a lot more to show you about
-**LiveViewJS** including: built-in real-time / multi-player support, built-in form validation with changesets, built-in
-file uploads with image previews and drag and drop support, and more!
+LiveViews work and what they look like both as code and in the browser. 
 
-But first, a bit more about LiveViews...
+We've got a lot more to show you about **LiveViewJS** including some amazing features built-in the framework like: 
+
+ * real-time / multi-player support
+ * simple, powerfil form validation with changesets
+ * file uploads with image previews and drag and drop support, and more!
+
+If you want more detail on LiveViews and how awesome they are feel free to keep reading.  If you want to jump right in, check out the [Quick Start](../02-quick-starts/get-liveviewjs-repo.md) guide.
 
 ## LiveView is already proven technology
 
@@ -115,9 +135,6 @@ Here is a quote from the author and inventor of LiveView, [Chris McCord](http://
 - **No client-side routing** - No need to use a library like React Router or Vue Router. LiveViews route like multi-page
   applications which is handled automatically by the browser and server. (Another major complication rendered
   unnecessary.)
-- **No component libraries (or Storybook) required** - Traditional SPAs require teams to adopt, build or buy and then
-  maintain, and customize a component library and use something like [Storybook](https://storybook.js.org/). LiveView
-  simplifies this greatly with server-side HTML templates.
 
 ## Disadvantages
 
@@ -134,11 +151,3 @@ and productivity of LiveView to the NodeJS and Deno ecosystems** and are obvious
 team that invented it. We believe in it so much that we think more developers should have access to the programming
 paradigm it enables.
 
-### Reach more developers
-
-Unfortunately, Elixir only represents
-[about 2%](https://survey.stackoverflow.co/2022/#section-most-popular-technologies-programming-scripting-and-markup-languages)
-of the programming language market share. We believe that **LiveViewJS** will help bring the productivity and magic of
-LiveView to the
-[65% of developers](https://survey.stackoverflow.co/2022/#section-most-popular-technologies-programming-scripting-and-markup-languages)
-that use Javascript (and Typescript).

apps/liveviewjs.com/docs/01-overview/paradigm.md

@@ -11,8 +11,12 @@ receives the events, it runs the business logic for that LiveView, calculates th
 the diffs to the client. The client automatically updates the page with the diffs. The server can also send diffs back
 to the client based on events on the server or received from other clients (think chat, or other pub/sub scenarios).
 
-:::info **LiveViewJS** solves the complex parts of LiveViews such as connecting and managing web sockets, diffing and
-patching the UI, routing events, real-time/multiplayer, file uploads, and more. :::
+:::info
+
+**LiveViewJS** solves the complex parts of LiveViews such as connecting and managing web sockets, diffing and
+patching the UI, routing events, real-time/multiplayer, file uploads, and more.
+
+:::
 
 ## How is this different from SPAs?
 

apps/liveviewjs.com/docs/01-overview/runtimes.md

@@ -40,10 +40,10 @@ LiveViewJS is broken up into the following packages:
 - `liveviewjs` [Node](https://www.npmjs.com/package/liveviewjs) and [Deno](https://deno.land/x/liveviewjs) - The core
   package that contains the **LiveViewJS** core server code. This package is runtime agnostic and can be used with
   either NodeJS or Deno.
+- `@liveviewjs/gen` [Link](https://www.npmjs.com/package/@liveviewjs/gen) - The code generator package that is used to
+  generate the LiveViewJS code including minimal project configuration for both NodeJS and Deno. This package will also add support for generating LiveViews and LiveComponents as well as other boilerplate code.
+- `@liveviewjs/express` [Node](https://www.npmjs.com/package/@liveviewjs/express) - The Express package contains [ExpressJS](https://expressjs.com/) integration code and NodeJS-specific utilities like Redis pub/sub. This package is used to integrate **LiveViewJS** with Express (NodeJS). To user this packages install via `npm install @liveviewjs/express` or `yarn add @liveviewjs/express`.
+- `deno` [Link](https://github.com/floodfx/liveviewjs/tree/main/packages/deno) - The Deno package contains [Oak](https://deno.land/x/oak) integration code and Deno-specific LiveViewJS utilities like BroadcastChannel pub/sub. This package is used to integrate **LiveViewJS** with Oak (Deno).  To use this package, import into your Deno project via `import { LiveViewJS } from "https://raw.githubusercontent.com/floodfx/liveviewjs/main/packages/deno/mod.ts";`. (Note: DenoLand is broken for mono-repos, so we're hosting the package on GitHub for now.)
 - `@liveviewjs/examples` [Node](https://www.npmjs.com/package/@liveviewjs/examples) or
-  [Deno](https://deno.land/x/liveviewjs/packages/examples/mod.ts) - The package contains all the example LiveViews that
-  can be run on either NodeJS or Deno. This package is runtime agnostic and can be used with either NodeJS or Deno.
-- `@liveviewjs/express` [Node](https://www.npmjs.com/package/@liveviewjs/express) - The Express package that contains
-  the Express server integration code. This package is used to integrate **LiveViewJS** with Express (NodeJS).
-- `https://deno.land/x/liveviewjs@VERSION/packages/deno/mod.ts` - The Deno package that contains the Oak server
-  integration code. This package is used to integrate **LiveViewJS** with Oak (Deno).
+  [Deno](https://raw.githubusercontent.com/floodfx/liveviewjs/main/packages/examples/mod.ts) - The package contains all the example LiveViews that
+  can be run on either NodeJS or Deno. This package is runtime agnostic and can be used with either NodeJS or Deno.  See the [examples](https://github.com/floodfx/liveviewjs/tree/main/packages/examples/src/liveviews) directory for the source code.

apps/liveviewjs.com/docs/02-quick-starts/deno-run-examples.md

@@ -23,10 +23,16 @@ Navigate to the `packages/deno` directory:
 cd packages/deno
 ```
 
+Install dependencies:
+
+```bash
+npm install
+```
+
 Then, start the Deno server with the examples:
 
 ```bash
-deno run --allow-run --allow-read --allow-env  src/example/autorun.ts
+deno run --allow-run --allow-read --allow-write --allow-net --allow-env  src/example/autorun.ts
 ```
 
 Point your browser to [http://localhost:9001](http://localhost:9001)

apps/liveviewjs.com/docs/02-quick-starts/get-liveviewjs-repo.md

@@ -2,6 +2,22 @@
 sidebar_position: 1
 ---
 
+# Let's Build a LiveView
+
+Building a LiveView is easy with **LiveViewJS**.  You can get started in just a few minutes.
+
+## Create a New Project
+
+**LiveViewJS** has a project generation tool that will setup the project structure and install the required dependencies for either NodeJS or Deno.
+
+Run:
+```bash
+npx @liveviewjs/gen
+```
+
+You will be prompted to select the type of project you want to create and a couple other questions.  Then, voilà, you will have a new project that runs out of the box!
+
+
 # Download the Repo
 
 The fastest way to run the example or build your own LiveView is by downloading the **LiveViewJS** repo. This repo
@@ -11,8 +27,12 @@ contains all the examples and configured webserver code for Express (NodeJS) and
 
 Either use `git clone` or `degit` to get the **LiveViewJS** GitHub repository.
 
-:::info `degit` is a lightweight way to clone a repo without the .git parts.
-[More info](https://github.com/Rich-Harris/degit). :::
+:::info 
+
+`degit` is a lightweight way to clone a repo without the .git parts.
+[More info](https://github.com/Rich-Harris/degit).
+
+:::
 
 ### Clone the **LiveViewJS** GitHub repository:
 
@@ -40,8 +60,12 @@ cd liveviewjs
 **LiveViewJS** runs on both Node and Deno, but you'll probably want to start down one path or the other depending on what
 runtime you are more familiar with or are already using.
 
-:::note The **LiveViewJS** library APIs are the same so you can build your LiveViews on one platform and run them on the
-other unless you are using Deno or Node-specific APIs in your LiveView implementation. :::
+:::note
+
+The **LiveViewJS** library APIs are the same so you can build your LiveViews on one platform and run them on the
+other unless you are using Deno or Node-specific APIs in your LiveView implementation.
+
+:::
 
 ### Node
 

apps/liveviewjs.com/docs/02-quick-starts/nodejs-build-first-liveview.md

@@ -27,8 +27,8 @@ browser.
 
 ## Setup a new Route
 
-Let's add a route to this LiveView to see it in our browser. Edit `packages/express/src/example/index.ts` and
-make the following highlighted changes:
+Let's add a route to this LiveView to see it in our browser. Edit `packages/express/src/example/index.ts` and make the
+following highlighted changes:
 
 ```ts title="packages/express/src/example/index.ts" {3,7}
 ...
@@ -60,14 +60,18 @@ Then, start the express server:
 npm run start -w packages/express
 ```
 
-:::info You will probably see a warning from NodeJS about using an experimental feature:
+:::info
+
+You will probably see a warning from NodeJS about using an experimental feature:
 
 ```
 ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 ```
 
-The feature we are using is the built-in `fetch` method. Feel free to ignore this warning. :::
+The feature we are using is the built-in `fetch` method. Feel free to ignore this warning.
+
+:::
 
 ## See the LiveView in Action
 
@@ -105,8 +109,12 @@ should look something like this:
 
 ![LiveViewJS Hello World Recording](/img/screenshots/liveviewjs_hello_toggle_liveview_rec.gif)
 
-:::info You'll notice that **LiveViewJS** automatically rebuilds and reloads the server when you make changes to your
-LiveView code. This is a great way to iterate quickly on your LiveView. :::
+:::info
+
+You'll notice that **LiveViewJS** automatically rebuilds and reloads the server when you make changes to your
+LiveView code. This is a great way to iterate quickly on your LiveView.
+
+:::
 
 ## Great start!
 

apps/liveviewjs.com/docs/02-quick-starts/nodejs-run-examples.md

@@ -12,7 +12,11 @@ to get a feel for the user experience of a LiveView. Let's get started!
 
 [Node.js](https://nodejs.org/en/download/) version 18.x or above.
 
-:::note We rely on the NodeJS Fetch API, which is only available in 18+. :::
+:::note
+
+We rely on the NodeJS Fetch API, which is only available in 18+.
+
+:::
 
 If you haven't already, [download the **LiveViewJS** repo](get-liveviewjs-repo).