Merge pull request #354 from contentlayerdev/feat/v0.3.0

0.3.0

.github/workflows/ci.yml

@@ -51,3 +51,27 @@ jobs:
       - run: yarn build
       - run: yarn start
         working-directory: examples/node-script
+
+  build-example-node-script-mdx:
+    strategy:
+      matrix:
+        node-version: [14, 16, 17, 18]
+        os: [ubuntu-latest, windows-latest]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - uses: schickling-actions/checkout-and-install@main
+      - run: yarn build
+      - run: yarn start
+        working-directory: examples/node-script-mdx
+
+  build-example-node-script-remote-content:
+    strategy:
+      matrix:
+        node-version: [14, 16, 17, 18]
+        os: [ubuntu-latest, windows-latest]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - uses: schickling-actions/checkout-and-install@main
+      - run: yarn build
+      - run: yarn start
+        working-directory: examples/node-script-remote-content

.vscode/operators.code-snippets

@@ -9,6 +9,11 @@
     "body": ["function* ($) {}"],
     "description": "Generator FUnction with $ input"
   },
+  "Gen Yield * tmp": {
+    "prefix": "yy",
+    "body": ["yield* $($0)"],
+    "description": "Yield generator calling $()"
+  },
   "Gen Yield *": {
     "prefix": "!",
     "body": ["yield* $($0)"],

.vscode/tasks.json

@@ -3,6 +3,19 @@
   // for the documentation about the tasks.json format
   "version": "2.0.0",
   "tasks": [
+    {
+      "label": "yarn-install",
+      "type": "shell",
+      "command": "yarn install",
+      "presentation": {
+        "focus": true,
+        "panel": "shared",
+        "group": "yarn",
+        "showReuseMessage": true,
+        "clear": false,
+        "close": true
+      }
+    },
     {
       "label": "build:clean",
       "type": "shell",
@@ -13,7 +26,7 @@
         "group": "dev",
         "showReuseMessage": true,
         "clear": false,
-        "close": true,
+        "close": true
       }
     },
     {

examples/node-script-mdx/contentlayer.config.ts

@@ -0,0 +1,47 @@
+import { defineDocumentType, makeSource } from 'contentlayer/source-files'
+import { bundleMDX } from 'mdx-bundler'
+import * as ReactDOMServer from 'react-dom/server'
+import { getMDXComponent } from 'mdx-bundler/client/index.js'
+
+const mdxToHtml = async (mdxSource: string) => {
+  const { code } = await bundleMDX({ source: mdxSource })
+  const MDXLayout = getMDXComponent(code)
+  // TODO add your own components here
+  const element = MDXLayout({ components: {} })!
+  const html = ReactDOMServer.renderToString(element)
+  return html
+}
+
+const Post = defineDocumentType(() => ({
+  name: 'Post',
+  filePathPattern: `**/*.mdx`,
+  contentType: 'mdx',
+  fields: {
+    title: {
+      type: 'string',
+      description: 'The title of the post',
+      required: true,
+    },
+    date: {
+      type: 'date',
+      description: 'The date of the post',
+      required: true,
+    },
+  },
+  computedFields: {
+    url: {
+      type: 'string',
+      resolve: (doc) => `/posts/${doc._raw.flattenedPath}`,
+    },
+    mdxHtml: {
+      type: 'string',
+      resolve: async (doc) => mdxToHtml(doc.body.raw),
+    },
+  },
+}))
+
+export default makeSource({
+  contentDirPath: 'posts',
+  documentTypes: [Post],
+  disableImportAliasWarning: true,
+})

examples/node-script-mdx/my-script.mjs

@@ -0,0 +1,3 @@
+import { allPosts } from './.contentlayer/generated/index.mjs'
+
+console.log(allPosts)

examples/node-script-mdx/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "node-script-mdx-example",
+  "private": true,
+  "scripts": {
+    "start": "contentlayer build && node --experimental-json-modules my-script.mjs"
+  },
+  "dependencies": {
+    "contentlayer": "latest"
+  }
+}

examples/node-script-mdx/posts/change-me.mdx

@@ -0,0 +1,6 @@
+---
+title: Change me!
+date: 2022-03-11
+---
+
+When you change a source file, Contentlayer automatically updates the content cache, which prompts Next.js to reload the content on screen.

examples/node-script-mdx/posts/click-me.mdx

@@ -0,0 +1,6 @@
+---
+title: Click me!
+date: 2022-02-28
+---
+
+Blog posts have their own pages. The content source is a markdown file, parsed to HTML by Contentlayer.

examples/node-script-mdx/posts/what-is-contentlayer.mdx

@@ -0,0 +1,6 @@
+---
+title: What is Contentlayer?
+date: 2022-02-22
+---
+
+**Contentlayer makes working with content easy.** It is a content preprocessor that validates and transforms your content into type-safe JSON you can easily import into your application.

examples/node-script-remote-content/.gitignore

@@ -0,0 +1 @@
+nextjs-repo

examples/node-script-remote-content/contentlayer.config.ts

@@ -0,0 +1,86 @@
+import { defineDocumentType } from 'contentlayer/source-files'
+import { spawn } from 'node:child_process'
+import { makeSource } from 'contentlayer/source-remote-files'
+
+const Post = defineDocumentType(() => ({
+  name: 'Post',
+  filePathPattern: `docs/**/*.md`,
+  fields: {
+    title: {
+      type: 'string',
+      required: false,
+    },
+    description: {
+      type: 'string',
+      required: false,
+    },
+  },
+  computedFields: {
+    url: {
+      type: 'string',
+      resolve: (doc) => `/posts/${doc._raw.flattenedPath}`,
+    },
+  },
+}))
+
+const syncContentFromGit = async (contentDir: string) => {
+  const syncRun = async () => {
+    const gitUrl = 'https://github.com/vercel/next.js.git'
+    await runBashCommand(`
+      if [ -d  "${contentDir}" ];
+        then
+          cd "${contentDir}"; git pull;
+        else
+          git clone --depth 1 --single-branch ${gitUrl} ${contentDir};
+      fi
+    `)
+  }
+
+  let wasCancelled = false
+  let syncInterval
+
+  const syncLoop = async () => {
+    console.log('Syncing content files from git')
+
+    await syncRun()
+
+    if (wasCancelled) return
+
+    syncInterval = setTimeout(syncLoop, 1000 * 60)
+  }
+
+  // Block until the first sync is done
+  await syncLoop()
+
+  return () => {
+    wasCancelled = true
+    clearTimeout(syncInterval)
+  }
+}
+
+const runBashCommand = (command: string) =>
+  new Promise((resolve, reject) => {
+    const child = spawn(command, [], { shell: true })
+
+    child.stdout.setEncoding('utf8')
+    child.stdout.on('data', (data) => process.stdout.write(data))
+
+    child.stderr.setEncoding('utf8')
+    child.stderr.on('data', (data) => process.stderr.write(data))
+
+    child.on('close', function (code) {
+      if (code === 0) {
+        resolve(void 0)
+      } else {
+        reject(new Error(`Command failed with exit code ${code}`))
+      }
+    })
+  })
+
+export default makeSource({
+  syncFiles: syncContentFromGit,
+  contentDirPath: 'nextjs-repo',
+  contentDirInclude: ['docs'],
+  documentTypes: [Post],
+  disableImportAliasWarning: true,
+})

examples/node-script-remote-content/my-script.mjs

@@ -0,0 +1,6 @@
+import { allPosts } from './.contentlayer/generated/index.mjs'
+
+const postUrls = allPosts.map(post => post.url)
+
+console.log(`Found ${postUrls.length} posts:`);
+console.log(postUrls)

examples/node-script-remote-content/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "node-script-remote-content-example",
+  "private": true,
+  "scripts": {
+    "start": "contentlayer build && node --experimental-json-modules my-script.mjs"
+  },
+  "dependencies": {
+    "contentlayer": "latest"
+  }
+}

package.json

@@ -27,20 +27,20 @@
   "devDependencies": {
     "@changesets/cli": "2.19.0-temp.0",
     "@effect-ts/tracing-plugin": "^0.20.0",
-    "@types/prettier": "^2.7.1",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
-    "@typescript-eslint/parser": "^5.42.0",
-    "eslint": "^8.27.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
+    "@types/prettier": "^2.7.2",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
+    "eslint": "^8.32.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.27.4",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
-    "prettier": "^2.7.1",
-    "ts-patch": "^2.0.2",
-    "typescript": "^4.8.4"
+    "prettier": "^2.8.3",
+    "ts-patch": "^2.1.0",
+    "typescript": "^4.9.4"
   },
   "resolutions": {
-    "esbuild": "0.15.7",
+    "esbuild": "0.17.0",
     "contentlayer": "workspace:*",
     "@contentlayer/*": "workspace:*",
     "contentlayer-stackbit-yaml-generator": "workspace:*",

packages/@contentlayer/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentlayer/cli",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "type": "module",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -15,10 +15,10 @@
   "dependencies": {
     "@contentlayer/core": "workspace:*",
     "@contentlayer/utils": "workspace:*",
-    "clipanion": "^3.2.0-rc.13",
+    "clipanion": "^3.2.0-rc.14",
     "typanion": "^3.12.1"
   },
   "devDependencies": {
-    "@types/node": "^18.11.9"
+    "@types/node": "^18.11.18"
   }
 }

packages/@contentlayer/cli/src/commands/DevCommand.ts

@@ -1,6 +1,6 @@
 import * as core from '@contentlayer/core'
 import { errorToString } from '@contentlayer/utils'
-import { E, pipe, S, T } from '@contentlayer/utils/effect'
+import { E, OT, pipe, S, T } from '@contentlayer/utils/effect'
 import type { Usage } from 'clipanion'
 
 import { BaseCommand } from './_BaseCommand.js'
@@ -31,6 +31,8 @@ export class DevCommand extends BaseCommand {
         core.generateDotpkgStream({ config, verbose: this.verbose, isDev: true }),
       ),
       S.tap(E.fold((error) => T.log(errorToString(error)), core.logGenerateInfo)),
+      OT.withStreamSpan('@contentlayer/cli/commands/DevCommand:stream'),
       S.runDrain,
+      OT.withSpan('@contentlayer/cli/commands/DevCommand:executeSafe'),
     )
 }

packages/@contentlayer/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentlayer/client",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "type": "module",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",

packages/@contentlayer/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentlayer/core",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "type": "module",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -13,7 +13,7 @@
     "test": "echo No tests yet"
   },
   "peerDependencies": {
-    "esbuild": "^0.12.1 || 0.13.x || 0.14.x || 0.15.x",
+    "esbuild": "0.17.x",
     "markdown-wasm": "1.x"
   },
   "peerDependenciesMeta": {
@@ -28,15 +28,15 @@
     "@contentlayer/utils": "workspace:*",
     "camel-case": "^4.1.2",
     "comment-json": "^4.2.3",
-    "esbuild": "^0.12.1 || 0.13.x || 0.14.x || 0.15.x",
+    "esbuild": "0.17.x",
     "gray-matter": "^4.0.3",
     "mdx-bundler": "^9.2.1",
     "rehype-stringify": "^9.0.3",
     "remark-frontmatter": "^4.0.1",
     "remark-parse": "^10.0.1",
     "remark-rehype": "^10.1.0",
     "source-map-support": "^0.5.21",
-    "type-fest": "^3.2.0",
+    "type-fest": "^3.5.2",
     "unified": "^10.1.2"
   },
   "devDependencies": {