Init website

.gitignore

@@ -2,4 +2,5 @@
 node_modules
 yarn.lock
 package-lock.json
-dist
+dist
+cache

docs/.vitepress/config.mjs

@@ -0,0 +1,59 @@
+import { defineConfig } from "vitepress";
+import config from "genji-theme-vitepress/config";
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "Charming",
+  description: "The JavaScript library for expressive creative coding",
+  cleanUrls: true,
+  extends: config,
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: "Home", link: "/" },
+      {
+        text: "Examples",
+        items: [
+          { text: "Flow", link: "https://observablehq.com/d/2f9bf9f52cb24090" },
+          { text: "Cell", link: "https://observablehq.com/d/18b3d6f3affff5bb" },
+        ],
+      },
+    ],
+    sidebar: [
+      {
+        text: "Introduction",
+        items: [
+          { text: "What is Charming?", link: "/what-is-charming" },
+          { text: "Getting started", link: "/getting-started" },
+        ],
+      },
+      {
+        text: "Flow",
+        link: "/flow",
+        items: [
+          { text: "What is Flow?", link: "/flow/what-is-flow" },
+          { text: "Getting started", link: "/flow/getting-started" },
+        ],
+      },
+      {
+        text: "Cell",
+        link: "/cell",
+        items: [
+          { text: "What is Cell?", link: "/cell/what-is-cell" },
+          { text: "Getting started", link: "/cell/getting-started" },
+        ],
+      },
+      {
+        text: "Lodash",
+        link: "/lodash",
+      },
+      {
+        text: "API Index",
+        link: "/api-index",
+      },
+    ],
+    socialLinks: [
+      { icon: "github", link: "https://github.com/charming-art/charming" },
+    ],
+  },
+});

docs/.vitepress/theme/index.js

@@ -0,0 +1,13 @@
+import DefaultTheme from "vitepress/theme";
+import Layout from "genji-theme-vitepress";
+import { h } from "vue";
+
+// More props: https://genji-md.dev/reference/props
+const props = {
+  Theme: DefaultTheme,
+};
+
+export default {
+  extends: DefaultTheme,
+  Layout: () => h(Layout, props),
+};

docs/api-examples.md

@@ -0,0 +1,49 @@
+---
+outline: deep
+---
+
+# Runtime API Examples
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+
+```md
+<script setup>
+import { useData } from 'vitepress'
+
+const { theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+```
+
+<script setup>
+import { useData } from 'vitepress'
+
+const { site, theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+
+## More
+
+Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).

docs/api-index.md

@@ -0,0 +1,21 @@
+# API Index
+
+## Cell
+
+### Methods {#cell-method}
+
+- cm.cell
+- cm.wide
+
+### Context {#cell-context}
+
+- context.stroke
+- context.point
+- context.cols
+- context.rows
+
+### Options {#cell-options}
+
+- options.width
+- options.height
+- options.mode

docs/cell/getting-started.md

@@ -0,0 +1 @@
+# Getting Started

docs/cell/index.md

@@ -0,0 +1 @@
+# Charming Cell

docs/cell/what-is-cell.md

@@ -0,0 +1 @@
+# What is Cell?

docs/flow/getting-started.md

@@ -0,0 +1 @@
+# Getting Started

docs/flow/index.md

@@ -0,0 +1 @@
+# Charming Flow

docs/flow/what-is-flow.md

@@ -0,0 +1 @@
+# What is Flow?

docs/getting-started.md

@@ -0,0 +1 @@
+# Getting Started

docs/index.md

@@ -0,0 +1,27 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "Charming"
+  text: "The JavaScript library for tailored creative coding"
+  tagline: Create expressive sketches with concise code
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /getting-started
+    - theme: alt
+      text: What is Charming?
+      link: /what-is-charming
+
+features:
+  - title: Flow
+    details: The functional JavaScript API for graphics.
+    link: /flow
+  - title: Cell
+    details: The P5 like JavaScript API for ASCII art.
+    link: /cell
+  - title: Lodash
+    link: /lodash
+    details: The helpful utils for graphics and geometries.
+---

docs/lodash/index.md

@@ -0,0 +1 @@
+# Charming Lodash

docs/what-is-charming.md

@@ -0,0 +1 @@
+# What is Charming?

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@charming-art/charming",
+  "version": "0.0.10",
+  "description": "The JavaScript library for expressive creative coding",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "genji-theme-vitepress": "^0.2.6",
+    "vitepress": "^1.3.4"
+  }
+}