Update changesets script, release job (#29)

* Update changesets script, release job * Update docs
terrazzoapp · May 23, 2023 · 9f967b5 · 9f967b5
1 parent 25f1080
commit 9f967b5
Show file tree

Hide file tree

Showing 14 changed files with 753 additions and 885 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -1,10 +1,9 @@
 {
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
-  "changelog": ["@changesets/cli/changelog", {"repo": "drwpow/cobalt-ui"}],
+  "changelog": ["@changesets/changelog-github", {"repo": "drwpow/cobalt-ui"}],
   "commit": false,
   "linked": [],
   "access": "public",
   "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": ["@example/**", "cobalt-docs"]
+  "updateInternalDependencies": "patch"
 }
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -27,4 +27,4 @@ jobs:
       - uses: actions/setup-node@v3
       - run: pnpm i
       - run: pnpm run build
-      - run: pnpm run test
+      - run: pnpm test
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -0,0 +1,30 @@
+name: release
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  changelog:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - run: pnpm i
+      - run: pnpm run build
+      - uses: changesets/action@v1
+        with:
+          version: pnpm run version
+          publish: pnpm exec changeset publish
+          commit: '[ci] release'
+          title: '[ci] release'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/docs/package.json b/docs/package.json
@@ -18,10 +18,10 @@
     "@cobalt-ui/core": "^1.0.0",
     "@cobalt-ui/plugin-css": "^1.2.0",
     "@cobalt-ui/plugin-sass": "^1.2.0",
-    "astro": "^2.3.0",
+    "astro": "^2.5.4",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.62.0",
-    "shiki": "^0.11.1",
-    "vite": "^4.2.1"
+    "sass": "^1.62.1",
+    "shiki": "^0.14.2",
+    "vite": "^4.3.8"
   }
 }
diff --git a/docs/scripts/update-readmes.js b/docs/scripts/update-readmes.js
@@ -6,6 +6,7 @@
 
 import fs from 'node:fs';
 import {URL} from 'node:url';
+const FRONTMATTER_RE = /^---/gm;
 
 const updates = {
   '../../packages/plugin-css/README.md': '../src/pages/docs/plugins/css.md',
@@ -26,7 +27,7 @@ for (const [input, output] of Object.entries(updates)) {
   }
 
   const dest = fs.readFileSync(new URL(output, import.meta.url), 'utf8');
-  const parts = dest.split('---');
+  const parts = dest.split(FRONTMATTER_RE);
   parts[parts.length - 1] = `\n\n${src}`;
   fs.writeFileSync(new URL(output, import.meta.url), parts.join('---'));
 }
diff --git a/docs/src/pages/docs/plugins/js.md b/docs/src/pages/docs/plugins/js.md
@@ -46,306 +46,6 @@ const red = token('color.red.10');
 const redDark = token('color.red.10', 'dark');
 ```
 
-You’ll also be able to see any `$description`s specified in your IDE in the form of JSDoc. If using TypeScript, this will be fully typed and will throw a type error if a bad token ID is passed.
-
-In addition, you’ll also find the following exports:
-
-| Name | Type | Description |
-| :--- | :--- | :---------- |
-
-# @cobalt-ui/plugin-js
-
-Generate JS, TS, and JSON output from design tokens.
-
-```
-npm i -D @cobalt-ui/plugin-js
-```
-
-```js
-// tokens.config.mjs
-import pluginJS from '@cobalt-ui/plugin-js';
-
-/** @type import('@cobalt-ui/core').Config */
-export default {
-  plugins: [
-    pluginJS({
-      /** output JS (with TS types)? boolean or filename (default: true) */
-      js: true,
-      /** output JSON? boolean or filename (default: false) */
-      json: false,
-    }),
-  ],
-};
-```
-
-_Note: the default plugin exports a `.d.ts` file alongside the `.js`, which means the same file can either be used in JS or TS._
-
-## Usage
-
-### JS
-
-To use a token, import the `token()` function and reference it by its full ID:
-
-```ts
-import {token} from './tokens/index.js';
-
-// get default token
-const red = token('color.red.10');
-
-// get token for mode: dark
-const redDark = token('color.red.10', 'dark');
-```
-
-You’ll also be able to see any `$description`s specified in your IDE in the form of JSDoc. If using TypeScript, this will be fully typed and will throw a type error if a bad token ID is passed.
-
-In addition, you’ll also find the following exports:
-
-| Name | Type | Description |
-| :--- | :--- | :---------- |
-
-# @cobalt-ui/plugin-js
-
-Generate JS, TS, and JSON output from design tokens.
-
-```
-npm i -D @cobalt-ui/plugin-js
-```
-
-```js
-// tokens.config.mjs
-import pluginJS from '@cobalt-ui/plugin-js';
-
-/** @type import('@cobalt-ui/core').Config */
-export default {
-  plugins: [
-    pluginJS({
-      /** output JS (with TS types)? boolean or filename (default: true) */
-      js: true,
-      /** output JSON? boolean or filename (default: false) */
-      json: false,
-    }),
-  ],
-};
-```
-
-_Note: the default plugin exports a `.d.ts` file alongside the `.js`, which means the same file can either be used in JS or TS._
-
-## Usage
-
-### JS
-
-To use a token, import the `token()` function and reference it by its full ID:
-
-```ts
-import {token} from './tokens/index.js';
-
-// get default token
-const red = token('color.red.10');
-
-// get token for mode: dark
-const redDark = token('color.red.10', 'dark');
-```
-
-You’ll also be able to see any `$description`s specified in your IDE in the form of JSDoc. If using TypeScript, `token()` is statically typed as it‘s only a thin wrapper around the `tokens` and `modes` exports.
-
-In addition, you’ll also find the following exports:
-
-| Name | Type | Description |
-| :--- | :--- | :---------- |
-
-# @cobalt-ui/plugin-js
-
-Generate JS, TS, and JSON output from design tokens.
-
-```
-npm i -D @cobalt-ui/plugin-js
-```
-
-```js
-// tokens.config.mjs
-import pluginJS from '@cobalt-ui/plugin-js';
-
-/** @type import('@cobalt-ui/core').Config */
-export default {
-  plugins: [
-    pluginJS({
-      /** output JS (with TS types)? boolean or filename (default: true) */
-      js: true,
-      /** output JSON? boolean or filename (default: false) */
-      json: false,
-    }),
-  ],
-};
-```
-
-_Note: the default plugin exports a `.d.ts` file alongside the `.js`, which means the same file can either be used in JS or TS._
-
-## Usage
-
-### JS
-
-To use a token, import the `token()` function and reference it by its full ID:
-
-```ts
-import {token} from './tokens/index.js';
-
-// get default token
-const red = token('color.red.10');
-
-// get token for mode: dark
-const redDark = token('color.red.10', 'dark');
-```
-
-You’ll also be able to see any `$description`s specified in your IDE in the form of JSDoc. If using TypeScript, `token()` is statically typed as it‘s only a thin wrapper around the `tokens` and `modes` exports.
-
-In addition, you’ll also find the following exports:
-
-| Name | Type | Description |
-| :--- | :--- | :---------- |
-
-# @cobalt-ui/plugin-js
-
-Generate JS, TS, and JSON output from design tokens.
-
-```
-npm i -D @cobalt-ui/plugin-js
-```
-
-```js
-// tokens.config.mjs
-import pluginJS from '@cobalt-ui/plugin-js';
-
-/** @type import('@cobalt-ui/core').Config */
-export default {
-  plugins: [
-    pluginJS({
-      /** output JS (with TS types)? boolean or filename (default: true) */
-      js: true,
-      /** output JSON? boolean or filename (default: false) */
-      json: false,
-    }),
-  ],
-};
-```
-
-_Note: the default plugin exports a `.d.ts` file alongside the `.js`, which means the same file can either be used in JS or TS._
-
-## Usage
-
-### JS
-
-To use a token, import the `token()` function and reference it by its full ID:
-
-```ts
-import {token} from './tokens/index.js';
-
-// get default token
-const red = token('color.red.10');
-
-// get token for mode: dark
-const redDark = token('color.red.10', 'dark');
-```
-
-You’ll also be able to see any `$description`s specified in your IDE in the form of JSDoc. If using TypeScript, `token()` is statically typed as it‘s only a thin wrapper around the `tokens` and `modes` exports.
-
-In addition, you’ll also find the following exports:
-
-| Name | Type | Description |
-| :--- | :--- | :---------- |
-
-# @cobalt-ui/plugin-js
-
-Generate JS, TS, and JSON output from design tokens.
-
-```
-npm i -D @cobalt-ui/plugin-js
-```
-
-```js
-// tokens.config.mjs
-import pluginJS from '@cobalt-ui/plugin-js';
-
-/** @type import('@cobalt-ui/core').Config */
-export default {
-  plugins: [
-    pluginJS({
-      /** output JS (with TS types)? boolean or filename (default: true) */
-      js: true,
-      /** output JSON? boolean or filename (default: false) */
-      json: false,
-    }),
-  ],
-};
-```
-
-_Note: the default plugin exports a `.d.ts` file alongside the `.js`, which means the same file can either be used in JS or TS._
-
-## Usage
-
-### JS
-
-To use a token, import the `token()` function and reference it by its full ID:
-
-```ts
-import {token} from './tokens/index.js';
-
-// get default token
-const red = token('color.red.10');
-
-// get token for mode: dark
-const redDark = token('color.red.10', 'dark');
-```
-
-You’ll also be able to see any `$description`s specified in your IDE in the form of JSDoc. If using TypeScript, `token()` is statically typed as it‘s only a thin wrapper around the `tokens` and `modes` exports.
-
-In addition, you’ll also find the following exports:
-
-| Name | Type | Description |
-| :--- | :--- | :---------- |
-
-# @cobalt-ui/plugin-js
-
-Generate JS, TS, and JSON output from design tokens.
-
-```
-npm i -D @cobalt-ui/plugin-js
-```
-
-```js
-// tokens.config.mjs
-import pluginJS from '@cobalt-ui/plugin-js';
-
-/** @type import('@cobalt-ui/core').Config */
-export default {
-  plugins: [
-    pluginJS({
-      /** output JS (with TS types)? boolean or filename (default: true) */
-      js: true,
-      /** output JSON? boolean or filename (default: false) */
-      json: false,
-    }),
-  ],
-};
-```
-
-_Note: the default plugin exports a `.d.ts` file alongside the `.js`, which means the same file can either be used in JS or TS._
-
-## Usage
-
-### JS
-
-To use a token, import the `token()` function and reference it by its full ID:
-
-```ts
-import {token} from './tokens/index.js';
-
-// get default token
-const red = token('color.red.10');
-
-// get token for mode: dark
-const redDark = token('color.red.10', 'dark');
-```
-
 You’ll also be able to see any `$description`s specified in your IDE in the form of JSDoc. If using TypeScript, `token()` is statically typed as it‘s only a thin wrapper around the `tokens` and `modes` exports.
 
 In addition, you’ll also find the following exports: