docs: #202 website refresh

.github/workflows/ci-jsx-win.yml

@@ -11,9 +11,9 @@ jobs:
         node: [22]
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - name: Use Node.js ${{ matrix.node }}
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: ${{ matrix.node }}
       - name: Installing project dependencies
@@ -22,6 +22,3 @@ jobs:
       - name: Test
         run: |
           npm run test:jsx
-      - name: Build
-        run: |
-          npm run docs:build

.github/workflows/ci-jsx.yml

@@ -11,9 +11,9 @@ jobs:
         node: [22]
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - name: Use Node.js ${{ matrix.node }}
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: ${{ matrix.node }}
       - name: Installing project dependencies
@@ -22,6 +22,3 @@ jobs:
       - name: Test
         run: |
           npm run test:jsx
-      - name: Build
-        run: |
-          npm run docs:build

.github/workflows/ci-win.yml

@@ -11,9 +11,9 @@ jobs:
         node: [18, 20, 22]
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - name: Use Node.js ${{ matrix.node }}
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: ${{ matrix.node }}
       - name: Installing project dependencies
@@ -22,6 +22,3 @@ jobs:
       - name: Test
         run: |
           npm test
-      - name: Build
-        run: |
-          npm run docs:build

.github/workflows/ci.yml

@@ -11,9 +11,9 @@ jobs:
         node: [18, 20, 22]
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - name: Use Node.js ${{ matrix.node }}
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: ${{ matrix.node }}
       - name: Installing project dependencies
@@ -27,10 +27,7 @@ jobs:
           npm run lint
       - name: Check Types
         run: |
-          npm run lint:types
+          npm run check:types
       - name: Test
         run: |
           npm test
-      - name: Build
-        run: |
-          npm run docs:build

.gitignore

@@ -2,4 +2,7 @@
 .vscode/
 coverage/
 dist/
-node_modules/
+node_modules/
+.greenwood/
+public/
+docs/assets/repl.bundle.js

.ls-lint.yml

@@ -17,4 +17,5 @@ ignore:
   - .git
   - coverage
   - node_modules
-  - dist
+  - public
+  - .greenwood

.nvmrc

@@ -1 +1 @@
-22.12.0
+22.18.0

CONTRIBUTING.md

@@ -31,12 +31,11 @@ The local development flow is based around building the docs website, using `wcc
 
 ### Commands
 
-There are the main tasks, but you can see them all listed in _package.json#scripts_.
+These are the main tasks, and you can see them all listed in _package.json#scripts_.
 
-- `npm run docs:dev` - Builds the docs site for local development
-- `npm start` - Builds a production version of the docs site and serves it locally
-- `npm run sandbox` - Starts the sandbox app for live demos and testing
+- `npm run dev` - Builds the docs site for local development
 - `npm test` - Run all the tests
 - `npm test:tdd` - Run all the tests in watch mode
 - `npm run lint` - Run all linters
-- `npm run format` - Auto-format all files
+- `npm run check:types` - Run `tsc` to validate TypeScript types
+- `npm run format` - Auto-format all file

docs/components/banner-cta/banner-cta.module.css

@@ -0,0 +1,61 @@
+.container {
+  width: 100%;
+  margin: var(--size-1) 0;
+  padding: var(--size-4);
+  background-color: #e7e8ea;
+  border-radius: var(--radius-4);
+  color: var(--color-primary);
+  font-size: var(--font-size-1);
+}
+
+.snippetContainer {
+  width: 100%;
+}
+
+.snippet {
+  color: var(--color-primary);
+  border-radius: var(--radius-4);
+  border: var(--radius-1) solid #c1d3cd;
+  box-shadow: var(--shadow-2);
+  margin: var(--size-px-2) 0;
+  text-align: center;
+  padding: var(--size-2);
+  display: block;
+
+  & pre {
+    font-size: var(--font-size-1);
+  }
+
+  & wcc-ctc-button {
+    display: none;
+  }
+}
+
+@media (min-width: 430px) {
+  .snippet {
+    & pre {
+      display: inline;
+      vertical-align: text-top;
+    }
+
+    & wcc-ctc-button {
+      display: inline;
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    width: 80%;
+    margin: 0 auto;
+    padding: var(--size-4);
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    width: 60%;
+    margin: 0 auto;
+    padding: var(--size-4);
+  }
+}

docs/components/banner-cta/banner-cta.tsx

@@ -0,0 +1,30 @@
+import '../ctc-button/ctc-button.tsx';
+import styles from './banner-cta.module.css';
+
+export default class BannerCta extends HTMLElement {
+  static code = 'npm i -D wc-compiler';
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    return (
+      <div class={styles.container}>
+        <p>
+          WCC is a NodeJS package for server-rendering native Web Components. It outputs static HTML
+          from your custom element definitions based on either Light DOM or Declarative Shadow DOM
+          usage, supports Constructable Stylesheets, includes a minimal DOM shim, and more!
+        </p>
+        <div class={styles.snippetContainer}>
+          <div class={styles.snippet}>
+            <pre>&dollar; {BannerCta.code}</pre>
+            <wcc-ctc-button content={BannerCta.code}></wcc-ctc-button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+customElements.define('wcc-banner-cta', BannerCta);

docs/components/banner-splash/banner-splash.module.css

@@ -0,0 +1,35 @@
+.container {
+  width: 80%;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.splash {
+  display: inline-block;
+  background-image: url(/assets/wcc-splash.png);
+  background-repeat: no-repeat;
+  background-size: contain;
+  font-size: var(--size-6);
+  color: var(--color-white);
+  font-weight: bold;
+  width: 100px;
+}
+
+.text {
+  display: inline;
+  font-size: var(--size-6);
+  height: 136px;
+  font-weight: bold;
+}
+
+@media (min-width: 900px) {
+  .splash {
+    width: 297px;
+    height: 136px;
+  }
+
+  .splash,
+  .text {
+    font-size: var(--size-10);
+  }
+}