feat: add vitepress

sgratzl · sgratzl · commit f1bb8441dd3f · 2023-07-04T20:58:48.000-04:00
diff --git a/.gitattributes b/.gitattributes
@@ -20,7 +20,9 @@
 *.less text
 *.styl text
 *.js text
+*.jsx text
 *.ts text
+*.tsx text
 *.coffee text
 *.json text
 *.htm text
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -25,9 +25,9 @@ jobs:
       - run: yarn build
       - run: yarn lint
       - run: yarn test
-      - run: yarn samples
       - uses: actions/upload-artifact@v2
         if: failure()
         with:
           name: diff outputs
           path: src/**/__diff_output__/*.png
+      - run: yarn docs:build
diff --git a/.github/workflows/deploy_website.yml b/.github/workflows/deploy_website.yml
@@ -0,0 +1,43 @@
+name: Deploy Website
+on:
+  workflow_dispatch: {}
+  push:
+    branches:
+      - main
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+      - run: npm i -g yarn
+      - run: yarn config set checksumBehavior ignore
+      - name: Cache Node.js modules
+        uses: actions/cache@v3
+        with:
+          path: |
+            ./.yarn/cache
+            ./.yarn/unplugged
+          key: ${{ runner.os }}-yarn2-v5-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn2-v5
+      - run: yarn install
+      - run: yarn docs:build
+      - uses: actions/configure-pages@v2
+      - uses: actions/upload-pages-artifact@v1
+        with:
+          path: docs/.vitepress/dist
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v1
diff --git a/.gitignore b/.gitignore
@@ -19,9 +19,11 @@ npm-debug.log*
 
 *.tgz
 /.vscode/extensions.json
-/docs
 *.tsbuildinfo
 .eslintcache
 __diff_output__
 
-/samples/type_test.js
+docs/.vitepress/dist
+docs/.vitepress/cache
+docs/.vitepress/config.ts.timestamp*
+docs/api/
diff --git a/.prettierignore b/.prettierignore
@@ -2,7 +2,10 @@
 /.yarnrc.yml
 /.yarn
 /build
-/docs
+/docs/.vitepress/cache
+/docs/.vitepress/dist
+/docs/.vitepress/config.ts.timestamp*
+/docs/api
 /coverage
 /.gitattributes
 /.gitignore
@@ -14,4 +17,4 @@
 *.tgz
 *.tsbuildinfo
 .eslintcache
-/samples/type_test.js
+.nojekyll
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -13,8 +13,6 @@
   "[yaml]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "prettier.packageManager": "yarn",
-  "eslint.packageManager": "yarn",
   "npm.packageManager": "yarn",
   "eslint.nodePath": ".yarn/sdks",
   "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
@@ -23,7 +21,6 @@
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "editor.detectIndentation": false,
   "editor.tabSize": 2,
-  "liveServer.settings.port": 5504,
   "search.exclude": {
     "**/.yarn": true,
     "**/.pnp.*": true
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019-2022 Samuel Gratzl
+Copyright (c) 2019-2023 Samuel Gratzl
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -0,0 +1,53 @@
+import { defineConfig } from 'vitepress';
+import { name, description, repository, license, author } from '../../package.json';
+import typedocSidebar from '../api/typedoc-sidebar.json';
+
+const cleanName = name.replace('@sgratzl/', '');
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: cleanName,
+  description,
+  base: `/${cleanName}/`,
+  useWebFonts: false,
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Getting Started', link: '/getting-started' },
+      { text: 'Examples', link: '/examples/' },
+      { text: 'API', link: '/api/' },
+      { text: 'Related Plugins', link: '/related' },
+    ],
+
+    sidebar: [
+      {
+        text: 'Examples',
+        items: [{ text: 'Basic', link: '/examples/' }],
+      },
+      {
+        text: 'API',
+        collapsed: true,
+        items: typedocSidebar,
+      },
+    ],
+
+    socialLinks: [{ icon: 'github', link: repository.url.replace('.git', '') }],
+
+    footer: {
+      message: `Released under the <a href="${repository.url.replace(
+        '.git',
+        ''
+      )}/tree/main/LICENSE">${license} license</a>.`,
+      copyright: `Copyright © 2019-present <a href="${author.url}">${author.name}</a>`,
+    },
+
+    editLink: {
+      pattern: `${repository.url.replace('.git', '')}/edit/main/docs/:path`,
+    },
+
+    search: {
+      provider: 'local',
+    },
+  },
+});
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -0,0 +1,22 @@
+import Theme from 'vitepress/theme';
+import { createTypedChart } from 'vue-chartjs';
+import { Tooltip, LineElement, PointElement } from 'chart.js';
+import { DendrogramController, ForceDirectedGraphController, EdgeLine, TreeController } from '../../../src';
+
+export default {
+  ...Theme,
+  enhanceApp({ app }) {
+    const deps = [
+      Tooltip,
+      LineElement,
+      PointElement,
+      DendrogramController,
+      ForceDirectedGraphController,
+      EdgeLine,
+      TreeController,
+    ];
+    app.component('DendrogramChart', createTypedChart('dendrogram', deps));
+    app.component('TreeChart', createTypedChart('tree', deps));
+    app.component('ForceDirectedGraphChart', createTypedChart('forceDirected', deps));
+  },
+};
diff --git a/docs/examples/force.md b/docs/examples/force.md
@@ -0,0 +1,24 @@
+---
+title: Force Directed Graph
+---
+
+# Force Directed Graph
+
+<script setup>
+import {config} from './force';
+</script>
+
+<ForceDirectedGraphChart
+  :options="config.options"
+  :data="config.data"
+/>
+
+### Code
+
+:::code-group
+
+<<< ./force.ts#config [config]
+
+<<< ./force.ts#data [data]
+
+:::
diff --git a/docs/examples/force.ts b/docs/examples/force.ts
@@ -0,0 +1,27 @@
+import type { ChartConfiguration } from 'chart.js';
+import type {} from '../../src';
+
+// #region data
+export const data: ChartConfiguration<'boxplot'>['data'] = {
+  labels: ['A'],
+  datasets: [
+    {
+      itemRadius: 2,
+      data: [[57297214, 57297216, 117540924, 117540928]],
+    },
+  ],
+};
+// #endregion data
+// #region config
+export const config: ChartConfiguration<'boxplot'> = {
+  type: 'boxplot',
+  data,
+  options: {
+    plugins: {
+      legend: {
+        display: false,
+      },
+    },
+  },
+};
+// #endregion config
diff --git a/docs/examples/index.md b/docs/examples/index.md
@@ -0,0 +1,26 @@
+---
+title: Examples
+---
+
+# Examples
+
+<script setup>
+import {config as force} from './force';
+</script>
+
+## Force Directed Graph
+
+<ForceDirectedGraphChart
+  :options="force.options"
+  :data="force.data"
+/>
+
+### Code
+
+:::code-group
+
+<<< ./force.ts#config [config]
+
+<<< ./force.ts#data [data]
+
+:::
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -0,0 +1,23 @@
+---
+title: Getting Started
+---
+
+
+## Install
+
+```sh
+npm install chart.js chartjs-chart-graph
+```
+
+## Usage
+
+see [Examples](./examples/)
+
+and [CodePen]()
+
+## Configuration
+
+### Data Structure
+
+
+### Styling
diff --git a/docs/index.md b/docs/index.md
@@ -0,0 +1,22 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: 'chartjs-chart-graphb'
+  text: 'chart.js plugin'
+  tagline: Chart.js module for charting graphs
+  actions:
+    - theme: brand
+      text: Getting Started
+      link: /getting-started
+    - theme: alt
+      text: Examples
+      link: /examples/
+    - theme: alt
+      text: API
+      link: /api/
+# features:
+#   - title: Feature A
+#     details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+---
diff --git a/docs/related.md b/docs/related.md
@@ -0,0 +1,15 @@
+---
+title: Related Plugins
+---
+
+There are several related chart.js plugins providing additional functionality and chart types:
+
+- [chartjs-chart-boxplot](https://github.com/sgratzl/chartjs-chart-boxplot) for rendering boxplots and violin charts
+- [chartjs-chart-error-bars](https://github.com/sgratzl/chartjs-chart-error-bars) for rendering errors bars to bars and line charts
+- [chartjs-chart-funnel](https://github.com/sgratzl/chartjs-chart-funnel) for rendering funnel charts
+- [chartjs-chart-geo](https://github.com/sgratzl/chartjs-chart-geo) for rendering map, bubble maps, and choropleth charts
+- [chartjs-chart-graph](https://github.com/sgratzl/chartjs-chart-graph) for rendering graphs, trees, and networks
+- [chartjs-chart-pcp](https://github.com/sgratzl/chartjs-chart-pcp) for rendering parallel coordinate plots
+- [chartjs-chart-venn](https://github.com/sgratzl/chartjs-chart-venn) for rendering venn and euler diagrams
+- [chartjs-chart-wordcloud](https://github.com/sgratzl/chartjs-chart-wordcloud) for rendering word clouds
+- [chartjs-plugin-hierarchical](https://github.com/sgratzl/chartjs-plugin-hierarchical) for rendering hierarchical categorical axes which can be expanded and collapsed
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chartjs-chart-graph",
-  "description": "Chart.js module for charting error bars",
+  "description": "Chart.js module for charting graphs",
   "version": "4.2.0",
   "author": {
     "name": "Samuel Gratzl",
@@ -100,27 +100,33 @@
     "ts-jest": "^29.1.0",
     "tslib": "^2.5.3",
     "typedoc": "^0.24.8",
-    "typescript": "^5.1.3"
+    "typedoc-plugin-markdown": "^4.0.0-next.16",
+    "typedoc-vitepress-theme": "^1.0.0-next.2",
+    "typescript": "^5.1.6",
+    "vitepress": "^1.0.0-beta.5",
+    "vue": "^3.3.4",
+    "vue-chartjs": "^5.2.0"
   },
   "scripts": {
     "clean": "rimraf --glob build docs node_modules \"*.tgz\" \"*.tsbuildinfo\"",
     "compile": "tsc -b tsconfig.c.json",
-    "compile:types": "tsc -p tsconfig.c.json --emitDeclarationOnly",
     "start": "yarn run watch",
     "watch": "rollup -c -w",
     "build": "rollup -c",
     "test": "yarn node --experimental-vm-modules $(yarn bin jest) --passWithNoTests --detectOpenHandles --forceExit",
     "test:watch": "yarn run test --watch",
     "test:coverage": "yarn run test --coverage",
-    "samples": "yarn tsc samples/type_test.ts",
     "lint": "yarn run eslint && yarn run prettier",
     "fix": "yarn run eslint:fix && yarn run prettier:write",
     "prettier:write": "prettier \"*\" \"*/**\" --write",
     "prettier": "prettier \"*\" \"*/**\" --check",
     "eslint": "eslint src --ext .ts,.tsx --cache",
     "eslint:fix": "yarn run eslint --fix",
-    "docs": "typedoc src/index.ts",
-    "prepare": "yarn run build"
+    "prepare": "yarn run build",
+    "docs:api": "typedoc --options typedoc.json",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "yarn run docs:api && vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   },
   "packageManager": "yarn@3.6.0"
 }
diff --git a/samples/default_esm.html b/samples/default_esm.html
diff --git a/samples/type_test.js b/samples/type_test.js
diff --git a/tsconfig.c.json b/tsconfig.c.json
diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/typedoc.json b/typedoc.json
