docs: deploy docs to gh-pages using github actions (#144)

* github actions to deploy docs to gh-pages
* minor docs updates
* remove docs/ dir with old docs

Author: floodfx

.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/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/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/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

apps/liveviewjs.com/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
-    "build": "docusaurus build && rm -rf ../../docs && mv build ../../docs",
+    "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",