Set up versioning, syntax highlighting, and some docs fixes.

.vscode/tasks.json

@@ -34,6 +34,18 @@
       "runOptions": {
         "runOn": "folderOpen"
       }
+    },
+    {
+      "type": "npm",
+      "script": "watch:config",
+      "path": "packages/code-snippets-website/",
+      "group": "none",
+      "problemMatcher": [],
+      "label": "npm: watch:config - packages/code-snippets-website",
+      "detail": "rollup -c -w",
+      "runOptions": {
+        "runOn": "folderOpen"
+      }
     }
   ]
 }

helpers/getBaseRollupConfig.js

@@ -7,22 +7,22 @@ import babel from '@rollup/plugin-babel';
 import typescript from 'rollup-plugin-typescript2';
 import path from 'path';
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
-const esmOnlyPackages = [/unist/];
+const esmOnlyPackages = [/unist/, /rehype/, /hast/, /lowlight/, /fault/];
 const esmExternal = (source) => !source.startsWith('.') && !path.isAbsolute(source);
 // we pack ESM-only packages for CJS users, just to be nice.
-const cjsExternal = (source) => esmExternal(source) &&
+export const cjsExternal = (source) => esmExternal(source) &&
     !esmOnlyPackages.find((esmOnlyPackage) => esmOnlyPackage.test(source));
+export const getBaseBuildConfig = (include = ['src/**/*']) => ({
+    plugins: [
+        // Allows node_modules resolution
+        resolve({ extensions }),
+        // Allow bundling cjs modules. Rollup doesn't understand cjs
+        commonjs(),
+        // Compile TypeScript/JavaScript files
+        babel({ extensions, include: ['src/**/*'], babelHelpers: 'runtime' }),
+    ],
+});
 export const getBaseRollupConfig = (tsConfig, esmCallback, cjsCallback) => {
-    const baseBuildConfig = {
-        plugins: [
-            // Allows node_modules resolution
-            resolve({ extensions }),
-            // Allow bundling cjs modules. Rollup doesn't understand cjs
-            commonjs(),
-            // Compile TypeScript/JavaScript files
-            babel({ extensions, include: ['src/**/*'], babelHelpers: 'runtime' }),
-        ],
-    };
     const tsDefinitionsConfig = tsConfig
         ? [
             {
@@ -42,11 +42,11 @@ export const getBaseRollupConfig = (tsConfig, esmCallback, cjsCallback) => {
         : [];
     return tsDefinitionsConfig.concat([
         esmCallback({
-            ...baseBuildConfig,
+            ...getBaseBuildConfig(),
             external: esmExternal,
         }),
         cjsCallback({
-            ...baseBuildConfig,
+            ...getBaseBuildConfig(),
             external: cjsExternal,
         }),
     ]);

helpers/getBaseRollupConfig.ts

@@ -12,34 +12,34 @@ type RollupConfigCallback = (config: RollupOptions) => RollupOptions;
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 
-const esmOnlyPackages = [/unist/];
+const esmOnlyPackages = [/unist/, /rehype/, /hast/, /lowlight/, /fault/];
 
 const esmExternal = (source: string) =>
   !source.startsWith('.') && !path.isAbsolute(source);
 
 // we pack ESM-only packages for CJS users, just to be nice.
-const cjsExternal = (source: string) =>
+export const cjsExternal = (source: string) =>
   esmExternal(source) &&
   !esmOnlyPackages.find((esmOnlyPackage) => esmOnlyPackage.test(source));
 
+export const getBaseBuildConfig = (include = ['src/**/*']): RollupOptions => ({
+  plugins: [
+    // Allows node_modules resolution
+    resolve({ extensions }),
+
+    // Allow bundling cjs modules. Rollup doesn't understand cjs
+    commonjs(),
+
+    // Compile TypeScript/JavaScript files
+    babel({ extensions, include: ['src/**/*'], babelHelpers: 'runtime' }),
+  ],
+});
+
 export const getBaseRollupConfig = (
   tsConfig: string | false,
   esmCallback: RollupConfigCallback,
   cjsCallback: RollupConfigCallback
 ): (RollupOptions | [])[] => {
-  const baseBuildConfig: RollupOptions = {
-    plugins: [
-      // Allows node_modules resolution
-      resolve({ extensions }),
-
-      // Allow bundling cjs modules. Rollup doesn't understand cjs
-      commonjs(),
-
-      // Compile TypeScript/JavaScript files
-      babel({ extensions, include: ['src/**/*'], babelHelpers: 'runtime' }),
-    ],
-  };
-
   const tsDefinitionsConfig: RollupOptions[] = tsConfig
     ? [
         {
@@ -60,11 +60,11 @@ export const getBaseRollupConfig = (
 
   return tsDefinitionsConfig.concat([
     esmCallback({
-      ...baseBuildConfig,
+      ...getBaseBuildConfig(),
       external: esmExternal,
     }),
     cjsCallback({
-      ...baseBuildConfig,
+      ...getBaseBuildConfig(),
       external: cjsExternal,
     }),
   ]);

lerna.json

@@ -1,6 +1,8 @@
 {
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "packages": ["packages/*"],
-  "version": "0.0.1"
+  "packages": [
+    "packages/*"
+  ],
+  "version": "1.0.0-beta.0"
 }

package.json

@@ -7,21 +7,21 @@
   "author": "John Rom <john@nimblelight.com>",
   "scripts": {
     "start": "lerna run start --stream",
-    "build:core": "yarn --cwd packages/code-snippets build",
-    "build:remark-plugin": "yarn --cwd packages/remark-code-snippets build",
-    "build:gatsby-plugin": "yarn --cwd packages/gatsby-remark-code-snippets build",
-    "build": "yarn run build:core && yarn run build:remark-plugin && yarn run build:gatsby-plugin",
+    "build": "lerna run build",
     "watch-all": "lerna run watch",
-    "test": "lerna run test -- --silent",
-    "test:vscode": "lerna run test --stream --no-sort --"
+    "serve": "lerna run serve --stream",
+    "test": "lerna run test --stream --concurrency=1",
+    "test:vscode": "lerna run test --stream --no-sort --",
+    "prepublishOnly": "lerna run prepublishOnly --stream",
+    "release": "lerna publish",
+    "release:dryRun": "lerna publish --no-git-tag-version --no-push"
   },
   "devDependencies": {
     "lerna": "^4.0.0"
   },
   "workspaces": {
     "packages": [
-      "packages/*",
-      "examples/*"
+      "packages/*"
     ]
   }
 }

packages/code-snippets-website/.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 .cache/
 public
-.generated/
+.generated/
+/gatsby-config.js

packages/code-snippets-website/content/docs/index.md

@@ -44,11 +44,12 @@ I've created a snippet surrounding the header of this very website. If there is
 
 If you're reading this on an actual website (not the source code, silly), and there is output above, then I have proven my point. Convinced? Here's some further reading:
 
+- [Installing](installing)
 - [Preserving Snippets](preserving-snippets)
 
 Not convinced? That's ok, too. Here's a llama:
 
-> ```
+> ```plaintext
 > \\
 > l'>
 > ll

packages/code-snippets-website/content/docs/installing.md

@@ -0,0 +1,151 @@
+---
+slug: '/docs/installing'
+---
+
+# Installing
+
+The code snippets tool itself can be used by itself by manually passing in markdown, or you can use a tool built for
+
+- [Remark](#remark-plugin), or
+- [Gatsby](#gatsby-plugin)
+  - [Plain Markdown](#gatsby-plugin-plain-markdown)
+  - [MDX](#gatsby-plugin-mdx)
+
+## Remark Plugin
+
+`@nmbl/code-snippets` can be used as a remark plugin.
+
+### First, install the Remark Plugin
+
+#### Yarn
+
+```sh
+yarn add remark @nmbl/remark-code-snippets
+```
+
+#### NPM
+
+```sh
+npm install remark @nmbl/remark-code-snippets
+```
+
+### Then, add it as a plugin to remark:
+
+```ts file=../remark-code-snippets/tests/integration.test.ts snippet=remark-plugin
+
+```
+
+## Gatsby Plugin: Plain Markdown
+
+> This documentation assumes you have initialized a Gatsby project already and are sourcing markdown from somewhere to process.
+
+`@nmbl/code-snippets` can be used as a Gatsby plugin for plain markdown, like with `gatsby-transformer-remark`.
+
+### `gatsby-transformer-remark`
+
+#### First, install the plugins:
+
+##### Yarn
+
+```sh
+yarn add gatsby-transformer-remark @nmbl/gatsby-remark-code-snippets
+```
+
+##### NPM
+
+```sh
+npm install gatsby-transformer-remark @nmbl/gatsby-remark-code-snippets
+```
+
+#### Then, add it as a plugin
+
+```js
+module.exports = {
+  plugins: [
+    {
+      resolve: `gatsby-transformer-remark`,
+      options: {
+        plugins: [
+          {
+            resolve: '@johnrom/remark-code-import/gatsby',
+            options: {
+              async: true,
+              basePath: process.cwd(),
+            },
+          },
+          {
+            resolve: '@nmbl/gatsby-remark-code-snippets',
+            options: {},
+          },
+        ],
+      },
+    },
+  ],
+};
+```
+
+## Gatsby Plugin: `MDX`
+
+> This documentation assumes you have initialized a Gatsby project already and are sourcing markdown from somewhere to process.
+
+With `gatsby-plugin-mdx`, either the plugin `@nmbl/remark-code-snippets` can be used as a plugin via `remarkPlugins`, or `@nmbl/gatsby-remark-code-snippets` can be used as a plugin via `plugins`.
+
+Choosing one or the other for all of your plugins is preferable, so they can be reliably called in order. I prefer using remarkPlugins + rehypePlugins for full power.
+
+### `gatsby-plugin-mdx`: `remarkPlugins`.
+
+With `remarkPlugins`, install just the plain remark plugin:
+
+#### Yarn
+
+```sh
+yarn add gatsby-plugin-mdx @nmbl/remark-code-snippets
+```
+
+##### NPM
+
+```sh
+npm install gatsby-plugin-mdx @nmbl/remark-code-snippets
+```
+
+Then, add it to remarkPlugins:
+
+```js file=../code-snippets-website/gatsby-config.src.js snippet=gatsby-plugin-mdx
+
+```
+
+### `gatsby-plugin-mdx`: `gatsbyRemarkPlugins`.
+
+With `gatsbyRemarkPlugins`, install the Gatsby plugin:
+
+#### Yarn
+
+```sh
+yarn add gatsby-plugin-mdx @nmbl/gatsby-remark-code-snippets
+```
+
+##### NPM
+
+```sh
+npm install gatsby-plugin-mdx @nmbl/gatsby-remark-code-snippets
+```
+
+Then, add it to gatsbyRemarkPlugins:
+
+```js
+module.exports = {
+  plugins: [
+    {
+      resolve: `gatsby-plugin-mdx`,
+      options: {
+        gatsbyRemarkPlugins: [
+          {
+            resolve: `@nmbl/gatsby-remark-code-snippets`,
+            options: {},
+          },
+        ],
+      },
+    },
+  ],
+};
+```