fix(deps): update contentlayer to v0.3.3 - abandoned - #233

v0.3.3: 0.3.3

Compare Source

ℹ️ [TLDR] New onSuccess callback that runs after completing a build successfully

✨ onSuccess Callback

A new callback will now be called when a successful build has completed.

The callback function receives a single argument that is an asynchronous function from which you can access data objects processed and generated by Contentlayer.

import { makeSource } from '@​contentlayer/source-files'

export default makeSource({
  onSuccess: async (importData) => {
    const { allDocuments } = await importData()
    console.log('allDocuments', allDocuments.length)
  }
})

Running a build with the above configuration would yield something like the following on the console.

allDocuments 3

Closes #​473

Better Non-Latin Character Support

Support has improved for characters in non-Latin languages. Fixes #​337.

🙌 Thanks to @​huanfe1 for help!

Other Improvements

Here are the other improvements shipped with this version.

Fix Body Field Handling for MDX

@​stefanprobst resolved the discrepancy in handling a body field in frontmatter. Now, both Markdown and MDX files behave in the same way, supporting a body field in the frontmatter. See #​451 for details.

Upgraded Dependencies

Dependencies have been upgraded to avoid warning messages. Fixes #​360.

v0.3.2: 0.3.2

Compare Source

ℹ️ [TLDR] Bug fixes for next dev, Support for next export, bug fixes and updated dependencies

Improved next-contentlayer integration

As part of 0.3.2 we've overhauled the next-contentlayer integration with the goal of making it more stable and less dependent on implementation details of Next.js. This fixes #​415 and #​416 (thanks @​kamto7).

As part of this effort (and by no longer relying on the redirects workaround) Contentlayer now also works with next export. (closes #​426)

Other Improvements

• Fix: Opentelemetry version incompatibility with next 13.2 (closes #​407 - thanks @​jgillich)
• Fix: Type resolution when using modern TypeScript module resolution (closes #​373 - thanks @​jrolfs)
• Fix: Korean file names are not supported (closes #​431 - thanks @​mi-reu)
• Fix: contentDirInclude didn't work in some cases (closes #​383 - thanks to @​teobler)

Note about state of the project

Please also take a look at #​429 to read about the current state of the project. 💜

v0.3.1: 0.3.1

Compare Source

ℹ️ [TLDR] React Server Components support, Dynamic content fetching (experimental), updated dependencies, bug fixes

React Server Components (RSC) support

We're super excited to announce that Contentlayer now supports React Server Components (RSC) out of the box! 🎉

We've updated our Next.js example to use RSC and it works like a charm. You can find the full example here. (Our docs will be updated shortly as well.)

We now recommend using RSC over the old getStaticProps/getStaticPaths approach. RSC is much more flexible and even allows you to use Contentlayer's dynamic content fetching API (see below).

Note: While it's theoretically also possible to use Contentlayer combined with the 'use client' approach, we don't recommend it as it massively increases page sizes and thus the page load time.

Experimental: Dynamic content fetching (e.g. in React Server Components)

Contentlayer is mostly used to build content-based static sites. However, in some cases it can be required/useful to fetch & process (remote) content dynamically at runtime (e.g. via React Server Components). This is now possible with the new (still experimental) fetchContent API for the contentlayer/source-remote-files content source. (Closes #​85).

Here is a shortend example of how to use it (see full example for full details):

// app/some-dynamic-page.tsx
import { fetchContent } from 'contentlayer/generated'

export default function SomeDynamicPage({ }) {
  const contentResult = await fetchContent('some-branch')

  return <div>{content}</div>
}

// contentlayer.config.ts
import { defineDocumentType } from 'contentlayer/source-files'
import { makeSource } from 'contentlayer/source-remote-files'

const Post = defineDocumentType(() => ({
  // ...
}))

const syncContentFromGit = async ({ contentDir, gitTag }: { contentDir: string; gitTag: string }) => {
  // See full example
}

export default makeSource((contentBranch = 'main') => ({
  syncFiles: (contentDir) => syncContentFromGit({ contentDir, gitTag: contentBranch }),
  contentDirPath: `content/repo-${sourceKey}`,
  documentTypes: [Post],
  experimental: { enableDynamicBuild: true },
  //              ^^^^^^^^^^^^^^^^^^ enable dynamic content fetching
}))

Other Improvements

• Fix: Unable to install contentlayer in NextJs v13.2.1 (closes #​386)
• Fix: contentType data doesn't support empty files (closes #​361)
• Fix: Replace faker with alternative library (closes #​217 - thanks @​feliskio)
• Fix: Incorrect type inference from Stackbit config (closes #​363)

v0.3.0: 0.3.0

Compare Source

ℹ️ [TLDR] New experimental source and required peer dependency update.

⚠️ Breaking Change: Updated esbuild Dependency

0.3.0 requires use of esbuild 0.17.0. You may need to update peer dependencies if experiencing installation issues.

✨ New Source: Remote Files [experimental]

While still focused on content coming from files, you can begin to explore loading content from files not located in your repository.

This works by syncing content from a remote location into your local workspace, and then behaves similarly to the files source. Contentlayer provides the hook (via a syncFiles property) for syncing the files, but you must write the code that pulls the files in.

Here is simple example with a remote Git repo and documentation.

import { makeSource } from 'contentlayer/source-remote-files'

export default makeSource({
  syncFiles: () => syncContentFromGit(),
  contentDirPath: 'remote-content',
  documentTypes: [Post],
  disableImportAliasWarning: true,
})

const syncContentFromGit = async () => {
  const syncRun = async () => {
    const repoAlreadyCloned = false
    if (repoAlreadyCloned) {
      // TODO `git clone` the repo
    } else {
      // TODO `git pull` the repo
    }
  }

  let wasCancelled = false
  let syncInterval

  const syncLoop = async () => {
    await syncRun()

    if (wasCancelled) return

    syncInterval = setTimeout(syncLoop, 1000 * 60)
  }

  syncLoop()

  return () => {
    wasCancelled = true
    clearTimeout(syncInterval)
  }
}

✨ New helper functions: defineComputedFields & defineFields

You can now use a defineComputedFields function to leverage the document type, including its static fields. Here's an example:

import { defineDocumentType, defineComputedFields } from 'contentlayer/source-files'

const computedFields = defineComputedFields<'Post'>({
  upperTitle: {
    type: 'string',
    resolve: (doc) => doc.title.toUpperCase(),
  },
})

const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `**/*.md`,
  fields: {
    // ...
  },
  computedFields,
}))

Other Improvements

• mdxOptions now always applies default Contentlayer remark plugins.
• Fixed a bug that avoids the issue demonstrated in #​306.
• Upgraded dependencies.

v0.2.9: 0.2.9

Compare Source

Changes

Next.js 13 Support

Slightly delayed (sorry about that) Contentlayer now finally supports the Next.js version 13. Things should work just as they did before when using getStaticProps. 🚀

However, unfortunately React Server Components (RSC) can't yet be used with Contentlayer as there's a number of blocking bugs in Next.js itself (e.g. https://github.com/vercel/next.js/issues/41865) which need to be fixed first. You can track the progress here: https://github.com/contentlayerdev/contentlayer/issues/311

Other changes

• Improved types for useMDXComponent (https://github.com/contentlayerdev/contentlayer/pull/312 - thanks @​Andrey-Bazhanov)
• Upgraded other deps