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

0.3.0

Author: schickling

.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/next-contentlayer-example

@@ -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/contentlayer.config.ts

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

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

@@ -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/package.json

@@ -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/change-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/click-me.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.