feat: Improved docs (#151)

* chore: initial commit

* feat: setup homepage

* feat: customize design

* feat: improve homepage

* docs: add props & methods

* docs: add sandpack

* docs: add api docs

* docs: add examples

* feat: update deployment & remove old docs

* fix: job

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["documentation", "tests"]
+  "ignore": ["docs", "tests"]
 }

.github/workflows/deploy.yml

@@ -6,58 +6,35 @@ on:
 
   workflow_dispatch:
 
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
 # Allow one concurrent deployment
 concurrency:
   group: "pages"
   cancel-in-progress: true
 
 jobs:
-  deploy:
-    name: Deploy ReactSketchCanvas documentation
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout your repository using git
+        uses: actions/checkout@v3
+      - name: Install, build, and upload your site
+        uses: withastro/action@v1
+        with:
+         path: ./apps/docs
+         package-manager: pnpm@latest
 
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
-
-    runs-on: ubuntu-latest
-
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v4
-
-      - name: Use Node 18.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18.x
-
-      - uses: pnpm/action-setup@v3
-        name: Install pnpm
-        with:
-          version: 8
-          run_install: false
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install --no-frozen-lockfile
-
-      - name: Build documentation
-        run: pnpm build
-
-      - name:
-        uses: JamesIves/[email protected]
-        with:
-          branch: gh-pages
-          folder: apps/documentation/dist
-          clean: true
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.github/workflows/test.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: [ "16.x" ]
+        node: [ "18.x" ]
         os: [ ubuntu-latest ]
 
     steps:
@@ -45,7 +45,7 @@ jobs:
         run: pnpm lint
 
       - name: Install Playwright browsers
-        run: pnpx playwright install --with-deps
+        run: pnpx playwright install chromium
 
       - name: Test
         run: pnpm test

.gitignore

@@ -18,3 +18,4 @@ packages/tests/coverage/
 packages/tests/cypress/downloads/
 .idea/
 .turbo/cookies/
+/apps/docs/src/content/docs/api/

.vscode/extensions.json

@@ -1,3 +1,8 @@
 {
-  "recommendations": ["esbenp.prettier-vscode", "rvest.vs-code-prettier-eslint"]
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "rvest.vs-code-prettier-eslint",
+    "astro-build.astro-vscode"
+  ],
+  "unwantedRecommendations": []
 }

CONTRIBUTING.md

@@ -1,22 +1,22 @@
 ## Prerequisites
 
-[Node.js](http://nodejs.org/) >= v14.17.0 must be installed.
+[Node.js](http://nodejs.org/) >= 18.x must be installed.
 
 ## Installation
 
-- Running `yarn install` in the component's root directory will install everything you need for development.
+- Install [pnpm](https://pnpm.io/) globally using `npm install -g pnpm`
 
-## Demo Development Server
+- Run `pnpm install` to install the project dependencies.
 
-- Running `yarn install:example` will install the documentation site.
+## Demo Development Server
 
-- `yarn watch:example` will run a documentation server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
+- Run `pnpm start` to start the development server.
+- Open `http://localhost:4321/react-sketch-canvas/` in your browser.
 
 ## Running Tests
 
-- Install the documentation site using `yarn install:example
-- `yarn e2e:ci` will run the tests once. `yarn e2e` will start the cypress test server.
+- Run `pnpm test` to run the tests.
 
 ## Building
 
-- `yarn build:prod` will build the component for publishing to npm.
+- Run `pnpm build` to build the project.

apps/docs/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

apps/docs/README.md

@@ -0,0 +1,54 @@
+# Starlight Starter Kit: Basics
+
+[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
+
+```
+npm create astro@latest -- --template starlight
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Fbasics&project-name=my-starlight-docs&repository-name=my-starlight-docs)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro + Starlight project, you'll see the following folders and files:
+
+```
+.
+├── public/
+├── src/
+│   ├── assets/
+│   ├── content/
+│   │   ├── docs/
+│   │   └── config.ts
+│   └── env.d.ts
+├── astro.config.mjs
+├── package.json
+└── tsconfig.json
+```
+
+Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
+
+Images can be added to `src/assets/` and embedded in Markdown with a relative link.
+
+Static assets, like favicons, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).

apps/docs/astro.config.mjs

@@ -0,0 +1,53 @@
+import { defineConfig } from "astro/config";
+import starlight from "@astrojs/starlight";
+import tailwind from "@astrojs/tailwind";
+import react from "@astrojs/react";
+import starlightTypeDoc, { typeDocSidebarGroup } from "starlight-typedoc";
+
+
+// https://astro.build/config
+export default defineConfig({
+  site: 'https://vinoth.info',
+  base: '/react-sketch-canvas',
+  integrations: [
+    starlight({
+      title: "React Sketch Canvas",
+      customCss: [
+        "./src/styles/tailwind.css",
+        "./src/styles/customize.css",
+        "@fontsource/kalam/400.css"
+      ],
+      social: {
+        github: "https://github.com/vinothpandian/react-sketch-canvas"
+      },
+      plugins: [
+        // Generate the documentation.
+        starlightTypeDoc({
+          entryPoints: ["../../packages/react-sketch-canvas/src/index.tsx"],
+          tsconfig: "../../packages/react-sketch-canvas/tsconfig.json",
+          watch: false
+        })
+      ],
+      sidebar: [
+        {
+          label: "Guides",
+          autogenerate: {
+            directory: "guides"
+          }
+        },
+        {
+          label: "Examples",
+          autogenerate: {
+            directory: "examples"
+          }
+        },
+        // Add the generated sidebar group to the sidebar.
+        typeDocSidebarGroup
+      ]
+    }),
+    tailwind({
+      applyBaseStyles: false
+    }),
+    react()
+  ]
+});

apps/docs/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "documentation",
+  "type": "module",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.5.4",
+    "@astrojs/react": "^3.0.10",
+    "@astrojs/starlight": "^0.19.0",
+    "@astrojs/starlight-tailwind": "^2.0.1",
+    "@astrojs/tailwind": "^5.1.0",
+    "@codesandbox/sandpack-react": "^2.12.1",
+    "@codesandbox/sandpack-themes": "^2.0.21",
+    "@fontsource/kalam": "^5.0.8",
+    "@tabler/icons-react": "^2.47.0",
+    "@types/react": "^18.2.56",
+    "@types/react-dom": "^18.2.19",
+    "astro": "^4.3.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-sketch-canvas": "workspace:*",
+    "sharp": "^0.32.5",
+    "starlight-typedoc": "^0.9.0",
+    "tailwindcss": "^3.4.1",
+    "typedoc": "^0.25.8",
+    "typedoc-plugin-markdown": "4.0.0-next.53",
+    "typescript": "^5.3.3"
+  },
+  "devDependencies": {
+    "eslint-config-custom": "workspace:*"
+  }
+}