diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..c8c2d2a
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..118e4e6
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,24 @@
+name: App CI
+
+on:
+ push:
+ branches: [ main ]
+ pull_request:
+ branches: [ main ]
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+
+ steps:
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+
+ - name: Install dependencies
+ run: yarn install
+
+ - name: Run tests
+ run: yarn run test
+
+ - name: Upload reports
+ run: npx codecov
diff --git a/.github/workflows/gh-pages-main.yml b/.github/workflows/gh-pages-main.yml
new file mode 100644
index 0000000..820805d
--- /dev/null
+++ b/.github/workflows/gh-pages-main.yml
@@ -0,0 +1,36 @@
+# This workflow will generate the static page under `main` subdirectory inside the `gh-pages` branch
+
+# This workflow will run every time new changes were pushed to the `main` branch
+
+name: App build CI/CD to main branch
+
+on:
+ push:
+ branches: [ main ]
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+
+ steps:
+ - uses: actions/checkout@v4
+ with:
+ persist-credentials: false
+ - uses: actions/setup-node@v4
+
+ - name: Install dependencies
+ run: yarn install
+
+ - name: Create build files for gh-pages deploy
+ run: yarn ghpages:build
+
+ # Reference: https://github.com/JamesIves/github-pages-deploy-action
+ - name: Deploy 🚀
+ uses: JamesIves/github-pages-deploy-action@v4.5.0
+ with:
+ branch: gh-pages
+ folder: ghpages
+ clean-exclude: pr/
+ force: false
+ target-folder: main
+ token: ${{ secrets.GH_TOKEN }}
diff --git a/.github/workflows/pr-preview.yml b/.github/workflows/pr-preview.yml
new file mode 100644
index 0000000..a53767e
--- /dev/null
+++ b/.github/workflows/pr-preview.yml
@@ -0,0 +1,35 @@
+# This workflow will generate the static page under `pr` subdirectory inside the `gh-pages` branch
+
+# This workflow will run every time there's a PR opened, reopened, synchronize, or closed
+
+name: Deploy PR previews
+
+on:
+ pull_request:
+ types:
+ - opened
+ - reopened
+ - synchronize
+ - closed
+
+concurrency: preview-${{ github.ref }}
+
+jobs:
+ deploy-preview:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+
+ - name: Install and Build
+ run: |
+ yarn install
+ yarn ghpages:build
+
+ # Reference: https://github.com/rossjrw/pr-preview-action
+ - name: Deploy preview
+ uses: rossjrw/pr-preview-action@v1
+ with:
+ source-dir: ./ghpages/
+ umbrella-dir: pr
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..f6d2310
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,39 @@
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+## npm
+/node_modules/
+/npm-debug.log
+
+## testing
+/coverage/
+
+## temp folders
+/.tmp/
+
+# build
+/_site/
+/dist/
+/out-tsc/
+/build/
+ghpages
+dist
+dist-ssr
+*.local
+
+storybook-static
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 0000000..36af219
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..0ad25db
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,661 @@
+ GNU AFFERO GENERAL PUBLIC LICENSE
+ Version 3, 19 November 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc.
+ Copyright (C)
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published
+ by the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program. If not, see /settings/badge`
+- copy link & paste into top of README.md
+
+## Steps to setup `gh-pages` static site generator
+
+Let's start with creating a `gh-pages` branch.
+
+This branch is where Github will look for the `index.html` to be hosted
+
+```
+git checkout --orphan gh-pages
+git reset --hard
+git commit --allow-empty -m "Initializing gh-pages branch"
+git push origin gh-pages
+```
+
+### Additional setup
+
+- Go to repo `Settings` -> sidebar `Pages`
+- In the `Source` drop-down, choose the branch where you want to host your Github Pages and the `directory` where it was hosted
+ - We'll use `gh-pages` branch for this but you can use other branch name for this
+ - Just make sure that's the branch where the `index.html` that you want to host lives in
+
+
+
+
+## Manual Deploy using `gh-pages`
+
+You can update the current Github Page without pushing a commit by running:
+```
+yarn run ghpages:publish
+```
+
+This build script does the following, see `package.json`:
+- `ghpages:publish`
+ - This executes `ghpages:prepare` in the current branch you are currently working on
+ - Note: The branch name is required so that it will not override the whole Github Pages directory
+ - You can check it by navigating through the branch name files directory you set from the [step to setup `gh-pages` branch](#steps-to-setup-gh-pages)
+ - You can checkout how it looks like in one of our projects here: [https://github.com/internetarchive/iaux-collection-browser/tree/gh-pages](https://github.com/internetarchive/iaux-collection-browser/tree/gh-pages)
+
+- `ghpages:prepare`
+ - This executes `ghpages:build` that builds the project dependencies and generates `vite` build from it
+ - We use [vite](https://vitejs.dev/) to bundle and generate the static assets that we host in Github Pages
+ - See `vite.config.ts` related to this
+
+- `ghpages:generate`
+ - This executes `gh-pages` [npm package](https://www.npmjs.com/package/gh-pages) command to publish/upload the generated files from our `vite` build files
+ - Upon executing this command:
+ - This generates a commit message formatted from the most recent commit message of the branch
+ - Push the commit to `gh-pages` branch that we setup earlier
+
+The live demo app URL from current branch will look something like this:
+`https://.github.io///demo`
+
+## Automatic Deploy of Demo App
+
+Things that trigger automatic site generation:
+- a merge to `main`
+ - See workflow: `gh-pages-main.yml`
+ - Example: `https://.github.io//main`
+
+- a pull request against `main`
+ - See workflow: `pr-preview.yml`
+ - The URL for your Pull Request will be deleted after merging to main but you can update that in the config
+ - When you create a Pull Request, if your code passes codecov unit tests, it will be always served live at base URL/pull request number.
+ - Example: `https://.github.io//pr//demo`
+ - Note that `demo` is another directory where the `index.html` lives in
+ - You are free to playaround with it and set your desired file directory/structure on your end
+
+Another thing to note: pushing a branch up alone will not trigger site creation.
+
+Happy devving ^_^ 🥳 🎉
diff --git a/demo/app-root.ts b/demo/app-root.ts
new file mode 100644
index 0000000..be4715f
--- /dev/null
+++ b/demo/app-root.ts
@@ -0,0 +1,20 @@
+import { html, css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import '../src/your-webcomponent';
+
+@customElement('app-root')
+export class AppRoot extends LitElement {
+ render() {
+ return html`
+
+ Some slotted content
+
+ `;
+ }
+
+ static styles = css`
+ :host {
+ display: block;
+ }
+ `;
+}
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..225bd2e
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,22 @@
+
+
+
+ ${this.title}, Number: ${this.counter}!
+ increment
+
+ `;
+ }
+
+ static styles = css`
+ :host {
+ display: block;
+ padding: 25px;
+ color: var(--your-webcomponent-text-color, #000);
+ }
+ `;
+}
diff --git a/test/your-webcomponent.test.ts b/test/your-webcomponent.test.ts
new file mode 100644
index 0000000..4cb7622
--- /dev/null
+++ b/test/your-webcomponent.test.ts
@@ -0,0 +1,40 @@
+import { html, fixture, expect } from '@open-wc/testing';
+
+import type { YourWebComponent } from '../src/your-webcomponent';
+import '../src/your-webcomponent';
+
+describe('YourWebComponent', () => {
+ it('has a default title "Hey there" and counter 5', async () => {
+ const el = await fixture(
+ html`(
+ html`(
+ html`(
+ html` 
+