Add documentation site

.eslintrc.json

@@ -1,8 +1,3 @@
 {
-  "extends": "@chialab/eslint-config",
-  "rules": {
-    "indent": 0,
-    "import/extensions": 0,
-    "import/first": 0
-  }
+  "extends": "@chialab/eslint-config"
 }

.github/workflows/main.yml

@@ -13,28 +13,6 @@ jobs:
     secrets: inherit
 
   release:
-    name: Release
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    needs:
-      - lint-test
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@v4
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          cache: yarn
-
-      - name: Install project dependencies
-        run: yarn install
-
-      - name: Create Release Pull Request or Publish to npm
-        id: changesets
-        uses: changesets/action@v1
-        with:
-          publish: yarn changeset publish
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    needs: lint-test
+    uses: ./.github/workflows/release.yml
+    secrets: inherit

.github/workflows/pages.yml

@@ -0,0 +1,53 @@
+name: Pages
+on:
+  workflow_call:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          cache: yarn
+
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v3
+
+      - name: Install project dependencies
+        run: yarn install
+
+      - name: Build Documentation
+        run: yarn docs:build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: public
+
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    needs: build
+
+    permissions:
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.github/workflows/release.yml

@@ -0,0 +1,40 @@
+name: Release
+on:
+  workflow_call:
+    secrets:
+      NPM_TOKEN:
+        required: true
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          cache: yarn
+
+      - name: Install project dependencies
+        run: yarn install
+
+      - name: Build package
+        run: yarn tsc
+
+      - name: Lint package
+        run: yarn publint
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          version: yarn changeset version
+          publish: yarn changeset publish
+          createGithubReleases: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -5,3 +5,5 @@
 /types
 /dist
 tsconfig.tsbuildinfo
+docs/.vitepress/dist
+docs/.vitepress/cache

.prettierignore

@@ -13,3 +13,5 @@ package-lock.json
 yarn.lock
 
 /test/src/**/*
+docs/.vitepress/dist
+docs/.vitepress/cache

README.md

@@ -2,25 +2,14 @@
 
 Generate Custom Elements wrappers for Angular, React, Svelte and Vue.
 
+> [!NOTE]  
 > `plasma` is the imperative form for the Italian verb _plasmare_, _to shape_ in English.
 
-## Status
-
-| Framework | Base wrapper | Properties | Events | Slots | Typings |
-| --------- | :----------: | :--------: | :----: | :---: | :-----: |
-| Angular   |      🚧      |     🚧     |   🚧   |  🚧   |   🚧    |
-| Preact    |      ✅      |     ✅     |   ✅   |  ✅   |   ✅    |
-| React     |      ✅      |     ✅     |   ✅   |  ✅   |   ✅    |
-| Svelte    |      ✅      |     ✅     |   ✅   |  ✅   |   ✅    |
-| Vue       |      🚧      |     🚧     |   🚧   |  🚧   |   🚧    |
-
-## How it works
-
 Plasma transformations are based on [Custom Element Manifest](https://github.com/webcomponents/custom-elements-manifest) (CEM) specifications. The CEM is a JSON files that describes a Custom Element, its properties, events and slots. Plasma uses the CEM to generate wrappers for the supported frameworks.
 
 You can generate the CEM for most of the Web Components library using this [Analyzer](https://github.com/open-wc/custom-elements-manifest/tree/master/packages/analyzer).
 
-## Installation
+## Install
 
 ```
 npm i -D @chialab/plasma
@@ -34,50 +23,10 @@ Plasma will try to autodetect the custom elements manifest (`custom-elements.jso
 npm run plasma
 ```
 
-### Other samples
-
-Create cross-framework wrappers for a Web Component library:
-
-```
-npm run plasma --entrypoint @acme/acme-button --outdir './dist/[framework]'
-```
-
-Create wrappers for React and Preact only:
-
-```
-npm run plasma --entrypoint @acme/acme-button --outdir './dist/[framework]' --frameworks react,preact
-```
-
-Create wrappers for Svelte only:
-
-```
-npm run plasma --entrypoint @acme/acme-button --outdir './svelte' --frameworks svelte
-```
-
-Specify custom elements manifest path:
-
-```
-npm run plasma 'dist/custom-elements.json' --entrypoint @acme/acme-button
-```
-
-### Options
+## Documentation
 
-```
-Usage: plasma [options] <input>
-
-Generate Custom Elements wrappers for Angular, React, Svelte and Vue.
-
-Arguments:
-  input                             custom elements manifest path
-
-Options:
-  -V, --version                     output the version number
-  -e, --entrypoint <path>           module entrypoint
-  -o, --outdir <outdir>             output directory
-  -f, --frameworks <frameworks...>  the framework to convert to
-  -y, --yes                         convert all candidates to all available frameworks
-  -h, --help                        display help for command
-```
+-   [Get started](https://chialab.github.io/plasma/docs/guide)
+-   [Options](https://chialab.github.io/plasma/docs/guide/options)
 
 ---
 

docs/.vitepress/config.js

@@ -0,0 +1,73 @@
+import { defineConfig } from 'vitepress';
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+    title: 'Plasma',
+    description: 'Generate Custom Elements wrappers for Angular, React, Svelte and Vue',
+    base: '/plasma/',
+    outDir: '../public',
+
+    head: [['link', { rel: 'icon', href: 'https://www.chialab.it/favicon.png' }]],
+
+    themeConfig: {
+        logo: 'https://raw.githubusercontent.com/chialab/dna/main/logo.svg',
+
+        editLink: {
+            pattern: 'https://github.com/chialab/plasma/edit/main/docs/:path',
+            text: 'Suggest changes to this page',
+        },
+
+        // https://vitepress.dev/reference/default-theme-config
+        nav: [
+            {
+                text: 'Home',
+                link: '/',
+            },
+            {
+                text: 'Guide',
+                link: '/guide/',
+            },
+            {
+                text: 'Chialab.io',
+                link: 'https://www.chialab.io',
+            },
+        ],
+
+        sidebar: [
+            {
+                text: 'Guide',
+                items: [
+                    {
+                        text: 'Get started',
+                        link: '/guide/',
+                    },
+                    {
+                        text: 'Options',
+                        link: '/guide/options',
+                    },
+                    {
+                        text: 'Examples',
+                        link: '/guide/examples',
+                    },
+                ],
+            },
+            {
+                text: 'Status',
+                link: '/guide/status',
+            },
+        ],
+
+        socialLinks: [
+            {
+                icon: 'github',
+                link: 'https://github.com/chialab/plasma',
+            },
+        ],
+
+        footer: {
+            message: 'Released under the MIT License.',
+            copyright: 'Copyright © 2024 - DNA project - Chialab',
+        },
+    },
+    lastUpdated: true,
+});

docs/.vitepress/theme/index.js

@@ -0,0 +1,6 @@
+import DefaultTheme from 'vitepress/theme';
+import './theme.css';
+
+export default {
+    extends: DefaultTheme,
+};

docs/.vitepress/theme/theme.css

@@ -0,0 +1,10 @@
+:root {
+    --vp-c-brand-1: #f07c00;
+    --vp-c-brand-2: #d56e00;
+    --vp-button-brand-bg: var(--vp-c-brand-1);
+    --vp-button-brand-hover-bg: #d56e00;
+    --vp-button-brand-active-bg: #ce5900;
+
+    --vp-home-hero-name-color: transparent;
+    --vp-home-hero-name-background: linear-gradient(to bottom right, #ffac52 0%, #f07c00 100%);
+}

docs/guide/examples.md

@@ -0,0 +1,34 @@
+# Examples
+
+Create cross-framework wrappers for a Web Component library:
+
+```bash
+npm run plasma \
+    --entrypoint @acme/acme-button \
+    --outdir './dist/[framework]'
+```
+
+Create wrappers for React and Preact only:
+
+```bash
+npm run plasma \
+    --entrypoint @acme/acme-button \
+    --outdir './dist/[framework]' \
+    --frameworks react,preact
+```
+
+Create wrappers for Svelte only:
+
+```bash
+npm run plasma \
+    --entrypoint @acme/acme-button \
+    --outdir './svelte' \
+    --frameworks svelte
+```
+
+Specify custom elements manifest path:
+
+```bash
+npm run plasma 'dist/custom-elements.json' \
+    --entrypoint @acme/acme-button
+```

docs/guide/index.md

@@ -0,0 +1,41 @@
+# Get started
+
+Generate Custom Elements wrappers for Angular, React, Svelte and Vue.
+
+::: info
+
+`plasma` is the imperative form for the Italian verb _plasmare_, _to shape_ in English.
+
+:::
+
+Plasma transformations are based on [Custom Element Manifest](https://github.com/webcomponents/custom-elements-manifest) (CEM) specifications. The CEM is a JSON files that describes a Custom Element, its properties, events and slots. Plasma uses the CEM to generate wrappers for the supported frameworks.
+
+You can generate the CEM for most of the Web Components library using this [Analyzer](https://github.com/open-wc/custom-elements-manifest/tree/master/packages/analyzer).
+
+## Install
+
+Plasma is published to the NPM registry
+
+::: code-group
+
+```bash [npm]
+npm install @chialab/plasma -D
+```
+
+```bash [yarn]
+yarn add @chialab/plasma -D
+```
+
+```bash [pnpm]
+pnpm add @chialab/plasma -D
+```
+
+:::
+
+## Usage
+
+Plasma will try to autodetect the custom elements manifest (`custom-elements.json`) and will read the entrypoint from the `package.json` if not specified. The output directory will be `./dist/[framework]` by default.
+
+```
+npm run plasma
+```