Getting Started

How Contentlayer Works

Content Modeling

Content Modeling with Contentlayer

Type Safety

Writing Type-Safe Code

Contentlayer vs X

Comparing Contentlayer to Other Tools

Concepts

Remote Files

Contentful

Sanity

Mapping Documents to Types

Mapping Documents to Document Types

Generated Data

Generated Type Definitions

Processing MDX Files

Images

Working with Images

Files

Files Source

Getting started

Configure databases

Configure properties

Configure renderer

Notion

Notion Source

Sources

Content Sources

Next.js

Remix

SvelteKit

Astro

Vite

Environments

Contentlayer CLI

next-contentlayer

makeSource

defineDocumentType

defineNestedType

Field Types

Field Types Reference

@contentlayer/source-files

defineDatabase

Properties

@contentlayer/source-notion

API Reference

Basic Tutorial

Stackbit + Contentlayer Tutorial

Configuration API

Stackbit Configuration

Development Server

Stackbit Development Server

Stackbit

Integrations

Frequently Asked Questions

Roadmap

Changelog

Contributing

Known Problems

Other

Other Examples

Examples

Johannes Schickling

Introducing Contentlayer (Beta): Content Made Easy for Developers

Motivation: Thinking of Content as Data

DIY Example with Next.js + Markdown

Introducing Contentlayer

Playground: Try it Yourself

Benefits of Contentlayer

Build Performance Comparison: Contentlayer vs DIY and Gatsby

The Future of Content(layer)

Join the Contentlayer Community

Thank You 💜

Sean C Davis

Why Working with Content is Hard for Developers

Template-Based Content

1. Traditional CMS Separated Content from Code

Monolithic Applications are Limiting

2. Static Site Generators Offered a Simplified Approach to Building Content-Driven Websites

Developer Experience with SSGs Degrades Beyond the Hobby Site

Content as Data

3. Headless CMS Decoupled Content and Code

Front Ends Weren’t Easier to Build Because of API-Driven Content

4. Gatsby Popularized Content as Data using GraphQL

Content Processing in Gatsby is too Opinionated

5. Modern Frameworks are Unopinionated on Content Processing

Building a Content-Processing Mechanism is Really Difficult

6. Contentlayer Makes Content Easy for Developers

<pre class="shiki github-dark twoslash lsp" style="background-color: #0d1117; color: #c9d1d9"><div class="language-id">tsx</div><div class='code-container'><code><div class='line'><span style="color: #FF7B72">import</span><span style="color: #C9D1D9"> { <data-lsp lsp='(alias) const defineDocumentType: &lt;DefName extends string>(def: Thunk&lt;DocumentTypeDef&lt;DefName>>) => DocumentType&#10;import defineDocumentType' >defineDocumentType</data-lsp>, <data-lsp lsp='(alias) const makeSource: core.MakeSourcePlugin&lt;Args>&#10;import makeSource' >makeSource</data-lsp> } </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">&apos;contentlayer/source-files&apos;</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF"><data-lsp lsp='const Post: DocumentType&lt;string>' >Post</data-lsp></span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> </span><span style="color: #D2A8FF"><data-lsp lsp='(alias) defineDocumentType&lt;"Post">(def: Thunk&lt;DocumentTypeDef&lt;"Post">>): DocumentType&lt;string>&#10;import defineDocumentType' >defineDocumentType</data-lsp></span><span style="color: #C9D1D9">(() </span><span style="color: #FF7B72">=&gt;</span><span style="color: #C9D1D9"> ({</span></div><div class='line'><span style="color: #C9D1D9">  <data-lsp lsp='(property) name: "Post"' >name</data-lsp>: </span><span style="color: #A5D6FF">&apos;Post&apos;</span><span style="color: #C9D1D9">,</span></div><div class='line'><span style="color: #C9D1D9">  <data-lsp lsp='Path is relative to the `contentDirPath` config&#10;&#10;(property) filePathPattern?: string' >filePathPattern</data-lsp>: </span><span style="color: #A5D6FF">`**/*.md`</span><span style="color: #C9D1D9">,</span></div><div class='line'><span style="color: #C9D1D9">  <data-lsp lsp='The field definitions can either be provided as an object with the field names as keys or&#10;as an array of all field definitions including the name as an extra field. (The array definition&#10;can be used if you want more control over the order of the fields.)&#10;&#10;(property) fields?: FieldDefs' >fields</data-lsp>: {</span></div><div class='line'><span style="color: #C9D1D9">    <data-lsp lsp='(property) title: {&#10;    type: "string";&#10;    required: true;&#10;}' >title</data-lsp>: { <data-lsp lsp='(property) type: "string"' >type</data-lsp>: </span><span style="color: #A5D6FF">&apos;string&apos;</span><span style="color: #C9D1D9">, <data-lsp lsp='Whether the field is required or not. Fields are optional by default.&#10;&#10;(property) FieldDefBase.required?: boolean' >required</data-lsp>: </span><span style="color: #79C0FF">true</span><span style="color: #C9D1D9"> },</span></div><div class='line'><span style="color: #C9D1D9">    <data-lsp lsp='(property) date: {&#10;    type: "date";&#10;    required: true;&#10;}' >date</data-lsp>: { <data-lsp lsp='(property) type: "date"' >type</data-lsp>: </span><span style="color: #A5D6FF">&apos;date&apos;</span><span style="color: #C9D1D9">, <data-lsp lsp='Whether the field is required or not. Fields are optional by default.&#10;&#10;(property) FieldDefBase.required?: boolean' >required</data-lsp>: </span><span style="color: #79C0FF">true</span><span style="color: #C9D1D9"> }</span></div><div class='line'><span style="color: #C9D1D9">  },</span></div><div class='line'><span style="color: #C9D1D9">  <data-lsp lsp='(property) computedFields?: ComputedFields&lt;"Post">' >computedFields</data-lsp>: {</span></div><div class='line'><span style="color: #C9D1D9">    <data-lsp lsp='(property) url: {&#10;    type: "string";&#10;    resolve: (post: LocalDocument) => string;&#10;}' >url</data-lsp>: { <data-lsp lsp='(property) type: "string" | "number" | "boolean" | "list" | "json" | "date" | "markdown" | "mdx" | "image" | "enum" | "nested" | "reference"' >type</data-lsp>: </span><span style="color: #A5D6FF">&apos;string&apos;</span><span style="color: #C9D1D9">, </span><span style="color: #D2A8FF"><data-lsp lsp='(property) resolve: ComputedFieldResolver&lt;"Post">' >resolve</data-lsp></span><span style="color: #C9D1D9">: (</span><span style="color: #FFA657"><data-lsp lsp='(parameter) post: LocalDocument' >post</data-lsp></span><span style="color: #C9D1D9">) </span><span style="color: #FF7B72">=&gt;</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">`/posts/${</span><span style="color: #C9D1D9"><data-lsp lsp='(parameter) post: LocalDocument' >post</data-lsp></span><span style="color: #A5D6FF">.</span><span style="color: #C9D1D9"><data-lsp lsp='(property) _raw: RawDocumentData' >_raw</data-lsp></span><span style="color: #A5D6FF">.</span><span style="color: #C9D1D9"><data-lsp lsp='A path e.g. useful as URL paths based on `sourceFilePath` with file extension removed and `/index` removed.&#10;&#10;(property) flattenedPath: string' >flattenedPath</data-lsp></span><span style="color: #A5D6FF">}`</span><span style="color: #C9D1D9"> },</span></div><div class='line'><span style="color: #C9D1D9">  },</span></div><div class='line'><span style="color: #C9D1D9">}))</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #FF7B72">export</span><span style="color: #FFA657"> </span><span style="color: #FF7B72">default</span><span style="color: #FFA657"> </span><span style="color: #D2A8FF"><data-lsp lsp='(alias) makeSource(_: Args | ThunkWithSourceKey&lt;Args> | ThunkWithSourceKey&lt;Promise&lt;Args>>): (sourceKey: string) => Promise&lt;...>&#10;import makeSource' >makeSource</data-lsp></span><span style="color: #FFA657">({</span></div><div class='line'><span style="color: #FFA657">  </span><span style="color: #C9D1D9"><data-lsp lsp='Path to the root directory that contains all content. Every content file path will be relative&#10;to this directory. This includes:&#10; - The `filePathPattern` option in `defineDocumentType` is relative to `contentDirPath`&#10; - Each document&apos;s `_raw` fields such as `flattenedPath`, `sourceFilePath`, `sourceFileDir`&#10;&#10;(property) contentDirPath: string' >contentDirPath</data-lsp>: </span><span style="color: #A5D6FF">&apos;posts&apos;</span><span style="color: #FFA657">,</span></div><div class='line'><span style="color: #FFA657">  </span><span style="color: #8B949E">/*              ^^^^^^^ Directory with the Markdown files. */</span></div><div class='line'><span style="color: #FFA657">  </span><span style="color: #C9D1D9"><data-lsp lsp='(property) documentTypes: DocumentTypes' >documentTypes</data-lsp>: [<data-lsp lsp='const Post: DocumentType&lt;string>' >Post</data-lsp>]</span></div><div class='line'><span style="color: #FFA657">})</span></div></code></div></pre>

<pre class="shiki github-dark twoslash lsp" style="background-color: #0d1117; color: #c9d1d9"><div class="language-id">tsx</div><div class='code-container'><code><div class='line'><span style="color: #FF7B72">import</span><span style="color: #C9D1D9"> { <data-lsp lsp='(alias) const allPosts: Post[]&#10;import allPosts' >allPosts</data-lsp> } </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">&apos;contentlayer/generated&apos;</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #FF7B72">export</span><span style="color: #FFA657"> </span><span style="color: #FF7B72">default</span><span style="color: #FFA657"> </span><span style="color: #FF7B72">function</span><span style="color: #FFA657"> </span><span style="color: #D2A8FF"><data-lsp lsp='function Home(): React.JSX.Element' >Home</data-lsp></span><span style="color: #FFA657">() </span><span style="color: #C9D1D9">{</span></div><div class='line'><span style="color: #C9D1D9">  </span><span style="color: #FF7B72">return</span><span style="color: #C9D1D9"> (</span></div><div class='line'><span style="color: #C9D1D9">    &lt;</span><span style="color: #7EE787"><data-lsp lsp='(property) JSX.IntrinsicElements.div: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement>, HTMLDivElement>' >div</data-lsp></span><span style="color: #C9D1D9">&gt;</span></div><div class='line'><span style="color: #C9D1D9">      &lt;</span><span style="color: #7EE787"><data-lsp lsp='(property) JSX.IntrinsicElements.h1: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLHeadingElement>, HTMLHeadingElement>' >h1</data-lsp></span><span style="color: #C9D1D9">&gt;All posts&lt;/</span><span style="color: #7EE787"><data-lsp lsp='(property) JSX.IntrinsicElements.h1: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLHeadingElement>, HTMLHeadingElement>' >h1</data-lsp></span><span style="color: #C9D1D9">&gt;</span></div><div class='line'><span style="color: #C9D1D9">      &lt;</span><span style="color: #7EE787"><data-lsp lsp='(property) JSX.IntrinsicElements.ul: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLUListElement>, HTMLUListElement>' >ul</data-lsp></span><span style="color: #C9D1D9">&gt;</span></div><div class='line'><span style="color: #C9D1D9">        {<data-lsp lsp='(alias) const allPosts: Post[]&#10;import allPosts' >allPosts</data-lsp>.</span><span style="color: #D2A8FF"><data-lsp lsp='Calls a defined callback function on each element of an array, and returns an array that contains the results.&#10;&#10;(method) Array&lt;Post>.map&lt;React.JSX.Element>(callbackfn: (value: Post, index: number, array: Post[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]' >map</data-lsp></span><span style="color: #C9D1D9">((</span><span style="color: #FFA657"><data-lsp lsp='(parameter) post: Post' >post</data-lsp></span><span style="color: #C9D1D9">) </span><span style="color: #FF7B72">=&gt;</span><span style="color: #C9D1D9"> (</span></div><div class='line'><span style="color: #C9D1D9">          &lt;</span><span style="color: #7EE787"><data-lsp lsp='(property) JSX.IntrinsicElements.li: React.DetailedHTMLProps&lt;React.LiHTMLAttributes&lt;HTMLLIElement>, HTMLLIElement>' >li</data-lsp></span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF"><data-lsp lsp='(property) React.Attributes.key?: React.Key' >key</data-lsp></span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9">{<data-lsp lsp='(parameter) post: Post' >post</data-lsp>.<data-lsp lsp='The URL path of this page relative to site root. For example, the site root page would be "/", and doc page would be "docs/getting-started/"&#10;&#10;(property) url: string' >url</data-lsp>}></span></div><div class='line'><span style="color: #C9D1D9">            &lt;</span><span style="color: #7EE787"><data-lsp lsp='(property) JSX.IntrinsicElements.a: React.DetailedHTMLProps&lt;React.AnchorHTMLAttributes&lt;HTMLAnchorElement>, HTMLAnchorElement>' >a</data-lsp></span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF"><data-lsp lsp='(property) React.AnchorHTMLAttributes&lt;HTMLAnchorElement>.href?: string' >href</data-lsp></span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9">{<data-lsp lsp='(parameter) post: Post' >post</data-lsp>.<data-lsp lsp='The URL path of this page relative to site root. For example, the site root page would be "/", and doc page would be "docs/getting-started/"&#10;&#10;(property) url: string' >url</data-lsp>}>{<data-lsp lsp='(parameter) post: Post' >post</data-lsp>.<data-lsp lsp='The title of the page&#10;&#10;(property) title: string' >title</data-lsp>}&lt;/</span><span style="color: #7EE787"><data-lsp lsp='(property) JSX.IntrinsicElements.a: React.DetailedHTMLProps&lt;React.AnchorHTMLAttributes&lt;HTMLAnchorElement>, HTMLAnchorElement>' >a</data-lsp></span><span style="color: #C9D1D9">&gt;</span></div><div class='line'><span style="color: #C9D1D9">          &lt;/</span><span style="color: #7EE787"><data-lsp lsp='(property) JSX.IntrinsicElements.li: React.DetailedHTMLProps&lt;React.LiHTMLAttributes&lt;HTMLLIElement>, HTMLLIElement>' >li</data-lsp></span><span style="color: #C9D1D9">&gt;</span></div><div class='line'><span style="color: #C9D1D9">        ))}</span></div><div class='line'><span style="color: #C9D1D9">      &lt;/</span><span style="color: #7EE787"><data-lsp lsp='(property) JSX.IntrinsicElements.ul: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLUListElement>, HTMLUListElement>' >ul</data-lsp></span><span style="color: #C9D1D9">&gt;</span></div><div class='line'><span style="color: #C9D1D9">    &lt;/</span><span style="color: #7EE787"><data-lsp lsp='(property) JSX.IntrinsicElements.div: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement>, HTMLDivElement>' >div</data-lsp></span><span style="color: #C9D1D9">&gt;</span></div><div class='line'><span style="color: #C9D1D9">  )</span></div><div class='line'><span style="color: #C9D1D9">}</span></div></code></div></pre>

<pre class="shiki github-dark twoslash lsp" style="background-color: #0d1117; color: #c9d1d9"><div class="language-id">tsx</div><div class='code-container'><code><div class='line'><span style="color: #FF7B72">import</span><span style="color: #C9D1D9"> { <data-lsp lsp='(alias) const allPosts: Post[]&#10;import allPosts' >allPosts</data-lsp> } </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">&apos;contentlayer/generated&apos;</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #FF7B72">export</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> </span><span style="color: #D2A8FF"><data-lsp lsp='const generateStaticParams: () => Promise&lt;{&#10;    slug: string;&#10;}[]>' >generateStaticParams</data-lsp></span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">async</span><span style="color: #C9D1D9"> () </span><span style="color: #FF7B72">=&gt;</span><span style="color: #C9D1D9"> <data-lsp lsp='(alias) const allPosts: Post[]&#10;import allPosts' >allPosts</data-lsp>.</span><span style="color: #D2A8FF"><data-lsp lsp='Calls a defined callback function on each element of an array, and returns an array that contains the results.&#10;&#10;(method) Array&lt;Post>.map&lt;{&#10;    slug: string;&#10;}>(callbackfn: (value: Post, index: number, array: Post[]) => {&#10;    slug: string;&#10;}, thisArg?: any): {&#10;    slug: string;&#10;}[]' >map</data-lsp></span><span style="color: #C9D1D9">((</span><span style="color: #FFA657"><data-lsp lsp='(parameter) post: Post' >post</data-lsp></span><span style="color: #C9D1D9">) </span><span style="color: #FF7B72">=&gt;</span><span style="color: #C9D1D9"> ({ <data-lsp lsp='(property) slug: string' >slug</data-lsp>: <data-lsp lsp='(parameter) post: Post' >post</data-lsp>.<data-lsp lsp='The URL path of this page relative to site root. For example, the site root page would be "/", and doc page would be "docs/getting-started/"&#10;&#10;(property) url: string' >url</data-lsp> }))</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #FF7B72">export</span><span style="color: #FFA657"> </span><span style="color: #FF7B72">default</span><span style="color: #FFA657"> </span><span style="color: #FF7B72">function</span><span style="color: #FFA657"> </span><span style="color: #D2A8FF"><data-lsp lsp='function Post({ params }: {&#10;    params: {&#10;        slug: string;&#10;    };&#10;}): React.JSX.Element' >Post</data-lsp></span><span style="color: #FFA657">({ <data-lsp lsp='(parameter) params: {&#10;    slug: string;&#10;}' >params</data-lsp> }</span><span style="color: #FF7B72">:</span><span style="color: #FFA657"> { <data-lsp lsp='(property) params: {&#10;    slug: string;&#10;}' >params</data-lsp></span><span style="color: #FF7B72">:</span><span style="color: #FFA657"> { <data-lsp lsp='(property) slug: string' >slug</data-lsp></span><span style="color: #FF7B72">:</span><span style="color: #FFA657"> </span><span style="color: #79C0FF">string</span><span style="color: #FFA657"> } }) </span><span style="color: #C9D1D9">{</span></div><div class='line'><span style="color: #C9D1D9">  </span><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF"><data-lsp lsp='const post: Post' >post</data-lsp></span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> <data-lsp lsp='(alias) const allPosts: Post[]&#10;import allPosts' >allPosts</data-lsp>.</span><span style="color: #D2A8FF"><data-lsp lsp='Returns the value of the first element in the array where predicate is true, and undefined&#13;&#10;otherwise.&#10;&#10;(method) Array&lt;Post>.find(predicate: (value: Post, index: number, obj: Post[]) => unknown, thisArg?: any): Post (+1 overload)' >find</data-lsp></span><span style="color: #C9D1D9">((</span><span style="color: #FFA657"><data-lsp lsp='(parameter) post: Post' >post</data-lsp></span><span style="color: #C9D1D9">) </span><span style="color: #FF7B72">=&gt;</span><span style="color: #C9D1D9"> <data-lsp lsp='(parameter) post: Post' >post</data-lsp>.<data-lsp lsp='The URL path of this page relative to site root. For example, the site root page would be "/", and doc page would be "docs/getting-started/"&#10;&#10;(property) url: string' >url</data-lsp> </span><span style="color: #FF7B72">===</span><span style="color: #C9D1D9"> <data-lsp lsp='(parameter) params: {&#10;    slug: string;&#10;}' >params</data-lsp>.<data-lsp lsp='(property) slug: string' >slug</data-lsp>)</span></div><div class='line'><span style="color: #C9D1D9">  </span><span style="color: #FF7B72">if</span><span style="color: #C9D1D9"> (</span><span style="color: #FF7B72">!</span><span style="color: #C9D1D9"><data-lsp lsp='const post: Post' >post</data-lsp>) </span><span style="color: #FF7B72">throw</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">new</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF"><data-lsp lsp='var Error: ErrorConstructor&#10;new (message?: string) => Error' >Error</data-lsp></span><span style="color: #C9D1D9">(</span><span style="color: #A5D6FF">`Post not found for slug: ${</span><span style="color: #C9D1D9"><data-lsp lsp='(parameter) params: {&#10;    slug: string;&#10;}' >params</data-lsp></span><span style="color: #A5D6FF">.</span><span style="color: #C9D1D9"><data-lsp lsp='(property) slug: string' >slug</data-lsp></span><span style="color: #A5D6FF">}`</span><span style="color: #C9D1D9">)</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #C9D1D9">  </span><span style="color: #FF7B72">return</span><span style="color: #C9D1D9"> (</span></div><div class='line'><span style="color: #C9D1D9">    &lt;</span><span style="color: #7EE787"><data-lsp lsp='(property) JSX.IntrinsicElements.div: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement>, HTMLDivElement>' >div</data-lsp></span><span style="color: #C9D1D9">&gt;</span></div><div class='line'><span style="color: #C9D1D9">      &lt;</span><span style="color: #7EE787"><data-lsp lsp='(property) JSX.IntrinsicElements.h1: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLHeadingElement>, HTMLHeadingElement>' >h1</data-lsp></span><span style="color: #C9D1D9">>{<data-lsp lsp='const post: Post' >post</data-lsp>.<data-lsp lsp='The title of the page&#10;&#10;(property) title: string' >title</data-lsp>}&lt;/</span><span style="color: #7EE787"><data-lsp lsp='(property) JSX.IntrinsicElements.h1: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLHeadingElement>, HTMLHeadingElement>' >h1</data-lsp></span><span style="color: #C9D1D9">&gt;</span></div><div class='line'><span style="color: #C9D1D9">      &lt;</span><span style="color: #7EE787"><data-lsp lsp='(property) JSX.IntrinsicElements.div: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement>, HTMLDivElement>' >div</data-lsp></span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF"><data-lsp lsp='(property) React.DOMAttributes&lt;HTMLDivElement>.dangerouslySetInnerHTML?: {&#10;    __html: string | TrustedHTML;&#10;}' >dangerouslySetInnerHTML</data-lsp></span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9">{{ <data-lsp lsp='(property) __html: string | TrustedHTML' >__html</data-lsp>: <data-lsp lsp='const post: Post' >post</data-lsp>.<data-lsp lsp='Markdown file body&#10;&#10;(property) body: Markdown' >body</data-lsp>.<data-lsp lsp='Generated HTML based on Markdown source&#10;&#10;(property) html: string' >html</data-lsp> }} /></span></div><div class='line'><span style="color: #C9D1D9">    &lt;/</span><span style="color: #7EE787"><data-lsp lsp='(property) JSX.IntrinsicElements.div: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement>, HTMLDivElement>' >div</data-lsp></span><span style="color: #C9D1D9">&gt;</span></div><div class='line'><span style="color: #C9D1D9">  )</span></div><div class='line'><span style="color: #C9D1D9">}</span></div></code></div></pre>

<pre class="shiki github-dark twoslash lsp" style="background-color: #0d1117; color: #c9d1d9"><div class="language-id">tsx</div><div class='code-container'><code><div class='line'><span style="color: #FF7B72">import</span><span style="color: #C9D1D9"> { <data-lsp lsp='(alias) const makeSource: core.MakeSourcePlugin&lt;PluginOptions &amp; core.PartialArgs>&#10;import makeSource' >makeSource</data-lsp>, <data-lsp lsp='(alias) const defineDatabase: &lt;DefName extends string>(def: Thunk&lt;DatabaseTypeDef&lt;false, DefName>>) => DatabaseType&lt;DefName>&#10;import defineDatabase' >defineDatabase</data-lsp> } </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">&apos;contentlayer-source-notion&apos;</span></div><div class='line'><span style="color: #FF7B72">import</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">*</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">as</span><span style="color: #C9D1D9"> <data-lsp lsp='import notion' >notion</data-lsp> </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">&apos;@notionhq/client&apos;</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF"><data-lsp lsp='const client: notion.Client' >client</data-lsp></span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">new</span><span style="color: #C9D1D9"> <data-lsp lsp='import notion' >notion</data-lsp>.</span><span style="color: #D2A8FF"><data-lsp lsp='(alias) new Client(options?: ClientOptions): notion.Client&#10;export Client' >Client</data-lsp></span><span style="color: #C9D1D9">({ <data-lsp lsp='(property) ClientOptions.auth?: string' >auth</data-lsp>: <data-lsp lsp='var process: NodeJS.Process' >process</data-lsp>.<data-lsp lsp='The `process.env` property returns an object containing the user environment.&#10;See [`environ(7)`](http://man7.org/linux/man-pages/man7/environ.7.html).&#10;&#10;An example of this object looks like:&#10;&#10;```js&#10;{&#10;  TERM: &apos;xterm-256color&apos;,&#10;  SHELL: &apos;/usr/local/bin/bash&apos;,&#10;  USER: &apos;maciej&apos;,&#10;  PATH: &apos;~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin&apos;,&#10;  PWD: &apos;/Users/maciej&apos;,&#10;  EDITOR: &apos;vim&apos;,&#10;  SHLVL: &apos;1&apos;,&#10;  HOME: &apos;/Users/maciej&apos;,&#10;  LOGNAME: &apos;maciej&apos;,&#10;  _: &apos;/usr/local/bin/node&apos;&#10;}&#10;```&#10;&#10;It is possible to modify this object, but such modifications will not be&#10;reflected outside the Node.js process, or (unless explicitly requested)&#10;to other `Worker` threads.&#10;In other words, the following example would not work:&#10;&#10;```bash&#10;node -e &apos;process.env.foo = "bar"&apos; &amp;#x26;&amp;#x26; echo $foo&#10;```&#10;&#10;While the following will:&#10;&#10;```js&#10;import { env } from &apos;node:process&apos;;&#10;&#10;env.foo = &apos;bar&apos;;&#10;console.log(env.foo);&#10;```&#10;&#10;Assigning a property on `process.env` will implicitly convert the value&#10;to a string. **This behavior is deprecated.** Future versions of Node.js may&#10;throw an error when the value is not a string, number, or boolean.&#10;&#10;```js&#10;import { env } from &apos;node:process&apos;;&#10;&#10;env.test = null;&#10;console.log(env.test);&#10;// => &apos;null&apos;&#10;env.test = undefined;&#10;console.log(env.test);&#10;// => &apos;undefined&apos;&#10;```&#10;&#10;Use `delete` to delete a property from `process.env`.&#10;&#10;```js&#10;import { env } from &apos;node:process&apos;;&#10;&#10;env.TEST = 1;&#10;delete env.TEST;&#10;console.log(env.TEST);&#10;// => undefined&#10;```&#10;&#10;On Windows operating systems, environment variables are case-insensitive.&#10;&#10;```js&#10;import { env } from &apos;node:process&apos;;&#10;&#10;env.TEST = 1;&#10;console.log(env.test);&#10;// => 1&#10;```&#10;&#10;Unless explicitly specified when creating a `Worker` instance,&#10;each `Worker` thread has its own copy of `process.env`, based on its&#10;parent thread&apos;s `process.env`, or whatever was specified as the `env` option&#10;to the `Worker` constructor. Changes to `process.env` will not be visible&#10;across `Worker` threads, and only the main thread can make changes that&#10;are visible to the operating system or to native add-ons. On Windows, a copy of`process.env` on a `Worker` instance operates in a case-sensitive manner&#10;unlike the main thread.&#10;&#10;(property) NodeJS.Process.env: NodeJS.ProcessEnv' >env</data-lsp>.</span><span style="color: #79C0FF"><data-lsp lsp='string' >NOTION_TOKEN</data-lsp></span><span style="color: #C9D1D9"> })</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #FF7B72">export</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF"><data-lsp lsp='const Post: DatabaseType&lt;"Post">' >Post</data-lsp></span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> </span><span style="color: #D2A8FF"><data-lsp lsp='(alias) defineDatabase&lt;"Post">(def: Thunk&lt;DatabaseTypeDef&lt;false, "Post">>): DatabaseType&lt;"Post">&#10;import defineDatabase' >defineDatabase</data-lsp></span><span style="color: #C9D1D9">(() </span><span style="color: #FF7B72">=&gt;</span><span style="color: #C9D1D9"> ({</span></div><div class='line'><span style="color: #C9D1D9">  <data-lsp lsp='The database name.&#10;&#10;(property) name: "Post"' >name</data-lsp>: </span><span style="color: #A5D6FF">&apos;Post&apos;</span><span style="color: #C9D1D9">,</span></div><div class='line'><span style="color: #C9D1D9">  <data-lsp lsp='The database ID used as the content source.&#10;&#10;(property) databaseId: string' >databaseId</data-lsp>: <data-lsp lsp='var process: NodeJS.Process' >process</data-lsp>.<data-lsp lsp='The `process.env` property returns an object containing the user environment.&#10;See [`environ(7)`](http://man7.org/linux/man-pages/man7/environ.7.html).&#10;&#10;An example of this object looks like:&#10;&#10;```js&#10;{&#10;  TERM: &apos;xterm-256color&apos;,&#10;  SHELL: &apos;/usr/local/bin/bash&apos;,&#10;  USER: &apos;maciej&apos;,&#10;  PATH: &apos;~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin&apos;,&#10;  PWD: &apos;/Users/maciej&apos;,&#10;  EDITOR: &apos;vim&apos;,&#10;  SHLVL: &apos;1&apos;,&#10;  HOME: &apos;/Users/maciej&apos;,&#10;  LOGNAME: &apos;maciej&apos;,&#10;  _: &apos;/usr/local/bin/node&apos;&#10;}&#10;```&#10;&#10;It is possible to modify this object, but such modifications will not be&#10;reflected outside the Node.js process, or (unless explicitly requested)&#10;to other `Worker` threads.&#10;In other words, the following example would not work:&#10;&#10;```bash&#10;node -e &apos;process.env.foo = "bar"&apos; &amp;#x26;&amp;#x26; echo $foo&#10;```&#10;&#10;While the following will:&#10;&#10;```js&#10;import { env } from &apos;node:process&apos;;&#10;&#10;env.foo = &apos;bar&apos;;&#10;console.log(env.foo);&#10;```&#10;&#10;Assigning a property on `process.env` will implicitly convert the value&#10;to a string. **This behavior is deprecated.** Future versions of Node.js may&#10;throw an error when the value is not a string, number, or boolean.&#10;&#10;```js&#10;import { env } from &apos;node:process&apos;;&#10;&#10;env.test = null;&#10;console.log(env.test);&#10;// => &apos;null&apos;&#10;env.test = undefined;&#10;console.log(env.test);&#10;// => &apos;undefined&apos;&#10;```&#10;&#10;Use `delete` to delete a property from `process.env`.&#10;&#10;```js&#10;import { env } from &apos;node:process&apos;;&#10;&#10;env.TEST = 1;&#10;delete env.TEST;&#10;console.log(env.TEST);&#10;// => undefined&#10;```&#10;&#10;On Windows operating systems, environment variables are case-insensitive.&#10;&#10;```js&#10;import { env } from &apos;node:process&apos;;&#10;&#10;env.TEST = 1;&#10;console.log(env.test);&#10;// => 1&#10;```&#10;&#10;Unless explicitly specified when creating a `Worker` instance,&#10;each `Worker` thread has its own copy of `process.env`, based on its&#10;parent thread&apos;s `process.env`, or whatever was specified as the `env` option&#10;to the `Worker` constructor. Changes to `process.env` will not be visible&#10;across `Worker` threads, and only the main thread can make changes that&#10;are visible to the operating system or to native add-ons. On Windows, a copy of`process.env` on a `Worker` instance operates in a case-sensitive manner&#10;unlike the main thread.&#10;&#10;(property) NodeJS.Process.env: NodeJS.ProcessEnv' >env</data-lsp>.</span><span style="color: #79C0FF"><data-lsp lsp='string' >NOTION_DATABASE_ID</data-lsp></span><span style="color: #C9D1D9">,</span></div><div class='line'><span style="color: #C9D1D9">  <data-lsp lsp='Sort and filter pages queried from the database.&#10;More information on the Notion API documentation https://developers.notion.com/reference/post-database-query-filter&#10;&#10;(property) query?: Omit&lt;QueryDatabaseParameters, "database_id" | "filter_properties" | "start_cursor" | "page_size">' >query</data-lsp>: {</span></div><div class='line'><span style="color: #C9D1D9">    <data-lsp lsp='(property) filter?: {&#10;    or: (PropertyFilter | TimestampCreatedTimeFilter | TimestampLastEditedTimeFilter | {&#10;        or: PropertyFilter[];&#10;    } | {&#10;        ...;&#10;    })[];&#10;} | {&#10;    ...;&#10;} | PropertyFilter | TimestampCreatedTimeFilter | TimestampLastEditedTimeFilter' >filter</data-lsp>: {</span></div><div class='line'><span style="color: #C9D1D9">      <data-lsp lsp='(property) property: string' >property</data-lsp>: </span><span style="color: #A5D6FF">&apos;Status&apos;</span><span style="color: #C9D1D9">,</span></div><div class='line'><span style="color: #C9D1D9">      <data-lsp lsp='(property) status: StatusPropertyFilter' >status</data-lsp>: { <data-lsp lsp='(property) equals: string' >equals</data-lsp>: </span><span style="color: #A5D6FF">&apos;Published&apos;</span><span style="color: #C9D1D9"> },</span></div><div class='line'><span style="color: #C9D1D9">    },</span></div><div class='line'><span style="color: #C9D1D9">  },</span></div><div class='line'><span style="color: #C9D1D9">  <data-lsp lsp='The fields configuration, usefull to remap keys and configure complex properties.&#10;&#10;(property) properties?: Record&lt;string, DatabasePropertyTypeDef> | DatabasePropertyTypeDef[]' >properties</data-lsp>: {</span></div><div class='line'><span style="color: #C9D1D9">    <data-lsp lsp='(property) date: {&#10;    name: string;&#10;}' >date</data-lsp>: { <data-lsp lsp='(property) name: string' >name</data-lsp>: </span><span style="color: #A5D6FF">&apos;Created time&apos;</span><span style="color: #C9D1D9"> },</span></div><div class='line'><span style="color: #C9D1D9">  },</span></div><div class='line'><span style="color: #C9D1D9">  <data-lsp lsp='(property) computedFields?: Record&lt;string, ComputedField&lt;"Post">>' >computedFields</data-lsp>: {</span></div><div class='line'><span style="color: #C9D1D9">    <data-lsp lsp='(property) url: {&#10;    type: "string";&#10;    resolve: (post: LocalDocument) => string;&#10;}' >url</data-lsp>: { <data-lsp lsp='(property) type: "string" | "number" | "boolean" | "date" | "list" | "list_polymorphic" | "json" | "markdown" | "mdx" | "image" | "enum" | "nested" | "nested_polymorphic" | "nested_unnamed" | "reference" | "reference_polymorphic"' >type</data-lsp>: </span><span style="color: #A5D6FF">&apos;string&apos;</span><span style="color: #C9D1D9">, </span><span style="color: #D2A8FF"><data-lsp lsp='(property) resolve: ComputedFieldResolver&lt;"Post">' >resolve</data-lsp></span><span style="color: #C9D1D9">: (</span><span style="color: #FFA657"><data-lsp lsp='(parameter) post: LocalDocument' >post</data-lsp></span><span style="color: #C9D1D9">) </span><span style="color: #FF7B72">=&gt;</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">`/posts/${</span><span style="color: #C9D1D9"><data-lsp lsp='(parameter) post: LocalDocument' >post</data-lsp></span><span style="color: #A5D6FF">.</span><span style="color: #C9D1D9"><data-lsp lsp='(property) _id: string' >_id</data-lsp></span><span style="color: #A5D6FF">}`</span><span style="color: #C9D1D9"> },</span></div><div class='line'><span style="color: #C9D1D9">  },</span></div><div class='line'><span style="color: #C9D1D9">}))</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #FF7B72">export</span><span style="color: #FFA657"> </span><span style="color: #FF7B72">default</span><span style="color: #FFA657"> </span><span style="color: #D2A8FF"><data-lsp lsp='(alias) makeSource(_: (PluginOptions &amp; PartialArgs) | ThunkWithSourceKey&lt;PluginOptions &amp; PartialArgs> | ThunkWithSourceKey&lt;...>): (sourceKey: string) => Promise&lt;...>&#10;import makeSource' >makeSource</data-lsp></span><span style="color: #FFA657">({ </span><span style="color: #C9D1D9"><data-lsp lsp='(property) client?: notion.Client | ClientOptions' >client</data-lsp></span><span style="color: #FFA657">, </span><span style="color: #C9D1D9"><data-lsp lsp='(property) databaseTypes: DatabaseTypes' >databaseTypes</data-lsp>: [<data-lsp lsp='const Post: DatabaseType&lt;"Post">' >Post</data-lsp>] </span><span style="color: #FFA657">})</span></div><div class='line'>&nbsp;</div></code></div></pre>

<pre class="shiki github-light twoslash lsp" style="background-color: #ffffff; color: #24292f"><div class="language-id">tsx</div><div class='code-container'><code><div class='line'><span style="color: #CF222E">import</span><span style="color: #24292F"> { <data-lsp lsp='(alias) const defineDocumentType: &lt;DefName extends string>(def: Thunk&lt;DocumentTypeDef&lt;DefName>>) => DocumentType&#10;import defineDocumentType' >defineDocumentType</data-lsp>, <data-lsp lsp='(alias) const makeSource: core.MakeSourcePlugin&lt;Args>&#10;import makeSource' >makeSource</data-lsp> } </span><span style="color: #CF222E">from</span><span style="color: #24292F"> </span><span style="color: #0A3069">&apos;contentlayer/source-files&apos;</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #CF222E">const</span><span style="color: #24292F"> </span><span style="color: #0550AE"><data-lsp lsp='const Post: DocumentType&lt;string>' >Post</data-lsp></span><span style="color: #24292F"> </span><span style="color: #CF222E">=</span><span style="color: #24292F"> </span><span style="color: #8250DF"><data-lsp lsp='(alias) defineDocumentType&lt;"Post">(def: Thunk&lt;DocumentTypeDef&lt;"Post">>): DocumentType&lt;string>&#10;import defineDocumentType' >defineDocumentType</data-lsp></span><span style="color: #24292F">(() </span><span style="color: #CF222E">=&gt;</span><span style="color: #24292F"> ({</span></div><div class='line'><span style="color: #24292F">  <data-lsp lsp='(property) name: "Post"' >name</data-lsp>: </span><span style="color: #0A3069">&apos;Post&apos;</span><span style="color: #24292F">,</span></div><div class='line'><span style="color: #24292F">  <data-lsp lsp='Path is relative to the `contentDirPath` config&#10;&#10;(property) filePathPattern?: string' >filePathPattern</data-lsp>: </span><span style="color: #0A3069">`**/*.md`</span><span style="color: #24292F">,</span></div><div class='line'><span style="color: #24292F">  <data-lsp lsp='The field definitions can either be provided as an object with the field names as keys or&#10;as an array of all field definitions including the name as an extra field. (The array definition&#10;can be used if you want more control over the order of the fields.)&#10;&#10;(property) fields?: FieldDefs' >fields</data-lsp>: {</span></div><div class='line'><span style="color: #24292F">    <data-lsp lsp='(property) title: {&#10;    type: "string";&#10;    required: true;&#10;}' >title</data-lsp>: { <data-lsp lsp='(property) type: "string"' >type</data-lsp>: </span><span style="color: #0A3069">&apos;string&apos;</span><span style="color: #24292F">, <data-lsp lsp='Whether the field is required or not. Fields are optional by default.&#10;&#10;(property) FieldDefBase.required?: boolean' >required</data-lsp>: </span><span style="color: #0550AE">true</span><span style="color: #24292F"> },</span></div><div class='line'><span style="color: #24292F">    <data-lsp lsp='(property) date: {&#10;    type: "date";&#10;    required: true;&#10;}' >date</data-lsp>: { <data-lsp lsp='(property) type: "date"' >type</data-lsp>: </span><span style="color: #0A3069">&apos;date&apos;</span><span style="color: #24292F">, <data-lsp lsp='Whether the field is required or not. Fields are optional by default.&#10;&#10;(property) FieldDefBase.required?: boolean' >required</data-lsp>: </span><span style="color: #0550AE">true</span><span style="color: #24292F"> }</span></div><div class='line'><span style="color: #24292F">  },</span></div><div class='line'><span style="color: #24292F">  <data-lsp lsp='(property) computedFields?: ComputedFields&lt;"Post">' >computedFields</data-lsp>: {</span></div><div class='line'><span style="color: #24292F">    <data-lsp lsp='(property) url: {&#10;    type: "string";&#10;    resolve: (post: LocalDocument) => string;&#10;}' >url</data-lsp>: { <data-lsp lsp='(property) type: "string" | "number" | "boolean" | "list" | "json" | "date" | "markdown" | "mdx" | "image" | "enum" | "nested" | "reference"' >type</data-lsp>: </span><span style="color: #0A3069">&apos;string&apos;</span><span style="color: #24292F">, </span><span style="color: #8250DF"><data-lsp lsp='(property) resolve: ComputedFieldResolver&lt;"Post">' >resolve</data-lsp></span><span style="color: #24292F">: (</span><span style="color: #953800"><data-lsp lsp='(parameter) post: LocalDocument' >post</data-lsp></span><span style="color: #24292F">) </span><span style="color: #CF222E">=&gt;</span><span style="color: #24292F"> </span><span style="color: #0A3069">`/posts/${</span><span style="color: #24292F"><data-lsp lsp='(parameter) post: LocalDocument' >post</data-lsp></span><span style="color: #0A3069">.</span><span style="color: #24292F"><data-lsp lsp='(property) _raw: RawDocumentData' >_raw</data-lsp></span><span style="color: #0A3069">.</span><span style="color: #24292F"><data-lsp lsp='A path e.g. useful as URL paths based on `sourceFilePath` with file extension removed and `/index` removed.&#10;&#10;(property) flattenedPath: string' >flattenedPath</data-lsp></span><span style="color: #0A3069">}`</span><span style="color: #24292F"> },</span></div><div class='line'><span style="color: #24292F">  },</span></div><div class='line'><span style="color: #24292F">}))</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #CF222E">export</span><span style="color: #953800"> </span><span style="color: #CF222E">default</span><span style="color: #953800"> </span><span style="color: #8250DF"><data-lsp lsp='(alias) makeSource(_: Args | ThunkWithSourceKey&lt;Args> | ThunkWithSourceKey&lt;Promise&lt;Args>>): (sourceKey: string) => Promise&lt;...>&#10;import makeSource' >makeSource</data-lsp></span><span style="color: #953800">({</span></div><div class='line'><span style="color: #953800">  </span><span style="color: #24292F"><data-lsp lsp='Path to the root directory that contains all content. Every content file path will be relative&#10;to this directory. This includes:&#10; - The `filePathPattern` option in `defineDocumentType` is relative to `contentDirPath`&#10; - Each document&apos;s `_raw` fields such as `flattenedPath`, `sourceFilePath`, `sourceFileDir`&#10;&#10;(property) contentDirPath: string' >contentDirPath</data-lsp>: </span><span style="color: #0A3069">&apos;posts&apos;</span><span style="color: #953800">,</span></div><div class='line'><span style="color: #953800">  </span><span style="color: #6E7781">/*              ^^^^^^^ Directory with the Markdown files. */</span></div><div class='line'><span style="color: #953800">  </span><span style="color: #24292F"><data-lsp lsp='(property) documentTypes: DocumentTypes' >documentTypes</data-lsp>: [<data-lsp lsp='const Post: DocumentType&lt;string>' >Post</data-lsp>]</span></div><div class='line'><span style="color: #953800">})</span></div></code></div></pre>

<pre class="shiki github-light twoslash lsp" style="background-color: #ffffff; color: #24292f"><div class="language-id">tsx</div><div class='code-container'><code><div class='line'><span style="color: #CF222E">import</span><span style="color: #24292F"> { <data-lsp lsp='(alias) const allPosts: Post[]&#10;import allPosts' >allPosts</data-lsp> } </span><span style="color: #CF222E">from</span><span style="color: #24292F"> </span><span style="color: #0A3069">&apos;contentlayer/generated&apos;</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #CF222E">export</span><span style="color: #953800"> </span><span style="color: #CF222E">default</span><span style="color: #953800"> </span><span style="color: #CF222E">function</span><span style="color: #953800"> </span><span style="color: #8250DF"><data-lsp lsp='function Home(): React.JSX.Element' >Home</data-lsp></span><span style="color: #953800">() </span><span style="color: #24292F">{</span></div><div class='line'><span style="color: #24292F">  </span><span style="color: #CF222E">return</span><span style="color: #24292F"> (</span></div><div class='line'><span style="color: #24292F">    &lt;</span><span style="color: #116329"><data-lsp lsp='(property) JSX.IntrinsicElements.div: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement>, HTMLDivElement>' >div</data-lsp></span><span style="color: #24292F">&gt;</span></div><div class='line'><span style="color: #24292F">      &lt;</span><span style="color: #116329"><data-lsp lsp='(property) JSX.IntrinsicElements.h1: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLHeadingElement>, HTMLHeadingElement>' >h1</data-lsp></span><span style="color: #24292F">&gt;All posts&lt;/</span><span style="color: #116329"><data-lsp lsp='(property) JSX.IntrinsicElements.h1: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLHeadingElement>, HTMLHeadingElement>' >h1</data-lsp></span><span style="color: #24292F">&gt;</span></div><div class='line'><span style="color: #24292F">      &lt;</span><span style="color: #116329"><data-lsp lsp='(property) JSX.IntrinsicElements.ul: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLUListElement>, HTMLUListElement>' >ul</data-lsp></span><span style="color: #24292F">&gt;</span></div><div class='line'><span style="color: #24292F">        {<data-lsp lsp='(alias) const allPosts: Post[]&#10;import allPosts' >allPosts</data-lsp>.</span><span style="color: #8250DF"><data-lsp lsp='Calls a defined callback function on each element of an array, and returns an array that contains the results.&#10;&#10;(method) Array&lt;Post>.map&lt;React.JSX.Element>(callbackfn: (value: Post, index: number, array: Post[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]' >map</data-lsp></span><span style="color: #24292F">((</span><span style="color: #953800"><data-lsp lsp='(parameter) post: Post' >post</data-lsp></span><span style="color: #24292F">) </span><span style="color: #CF222E">=&gt;</span><span style="color: #24292F"> (</span></div><div class='line'><span style="color: #24292F">          &lt;</span><span style="color: #116329"><data-lsp lsp='(property) JSX.IntrinsicElements.li: React.DetailedHTMLProps&lt;React.LiHTMLAttributes&lt;HTMLLIElement>, HTMLLIElement>' >li</data-lsp></span><span style="color: #24292F"> </span><span style="color: #0550AE"><data-lsp lsp='(property) React.Attributes.key?: React.Key' >key</data-lsp></span><span style="color: #CF222E">=</span><span style="color: #24292F">{<data-lsp lsp='(parameter) post: Post' >post</data-lsp>.<data-lsp lsp='The URL path of this page relative to site root. For example, the site root page would be "/", and doc page would be "docs/getting-started/"&#10;&#10;(property) url: string' >url</data-lsp>}></span></div><div class='line'><span style="color: #24292F">            &lt;</span><span style="color: #116329"><data-lsp lsp='(property) JSX.IntrinsicElements.a: React.DetailedHTMLProps&lt;React.AnchorHTMLAttributes&lt;HTMLAnchorElement>, HTMLAnchorElement>' >a</data-lsp></span><span style="color: #24292F"> </span><span style="color: #0550AE"><data-lsp lsp='(property) React.AnchorHTMLAttributes&lt;HTMLAnchorElement>.href?: string' >href</data-lsp></span><span style="color: #CF222E">=</span><span style="color: #24292F">{<data-lsp lsp='(parameter) post: Post' >post</data-lsp>.<data-lsp lsp='The URL path of this page relative to site root. For example, the site root page would be "/", and doc page would be "docs/getting-started/"&#10;&#10;(property) url: string' >url</data-lsp>}>{<data-lsp lsp='(parameter) post: Post' >post</data-lsp>.<data-lsp lsp='The title of the page&#10;&#10;(property) title: string' >title</data-lsp>}&lt;/</span><span style="color: #116329"><data-lsp lsp='(property) JSX.IntrinsicElements.a: React.DetailedHTMLProps&lt;React.AnchorHTMLAttributes&lt;HTMLAnchorElement>, HTMLAnchorElement>' >a</data-lsp></span><span style="color: #24292F">&gt;</span></div><div class='line'><span style="color: #24292F">          &lt;/</span><span style="color: #116329"><data-lsp lsp='(property) JSX.IntrinsicElements.li: React.DetailedHTMLProps&lt;React.LiHTMLAttributes&lt;HTMLLIElement>, HTMLLIElement>' >li</data-lsp></span><span style="color: #24292F">&gt;</span></div><div class='line'><span style="color: #24292F">        ))}</span></div><div class='line'><span style="color: #24292F">      &lt;/</span><span style="color: #116329"><data-lsp lsp='(property) JSX.IntrinsicElements.ul: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLUListElement>, HTMLUListElement>' >ul</data-lsp></span><span style="color: #24292F">&gt;</span></div><div class='line'><span style="color: #24292F">    &lt;/</span><span style="color: #116329"><data-lsp lsp='(property) JSX.IntrinsicElements.div: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement>, HTMLDivElement>' >div</data-lsp></span><span style="color: #24292F">&gt;</span></div><div class='line'><span style="color: #24292F">  )</span></div><div class='line'><span style="color: #24292F">}</span></div></code></div></pre>

<pre class="shiki github-light twoslash lsp" style="background-color: #ffffff; color: #24292f"><div class="language-id">tsx</div><div class='code-container'><code><div class='line'><span style="color: #CF222E">import</span><span style="color: #24292F"> { <data-lsp lsp='(alias) const allPosts: Post[]&#10;import allPosts' >allPosts</data-lsp> } </span><span style="color: #CF222E">from</span><span style="color: #24292F"> </span><span style="color: #0A3069">&apos;contentlayer/generated&apos;</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #CF222E">export</span><span style="color: #24292F"> </span><span style="color: #CF222E">const</span><span style="color: #24292F"> </span><span style="color: #8250DF"><data-lsp lsp='const generateStaticParams: () => Promise&lt;{&#10;    slug: string;&#10;}[]>' >generateStaticParams</data-lsp></span><span style="color: #24292F"> </span><span style="color: #CF222E">=</span><span style="color: #24292F"> </span><span style="color: #CF222E">async</span><span style="color: #24292F"> () </span><span style="color: #CF222E">=&gt;</span><span style="color: #24292F"> <data-lsp lsp='(alias) const allPosts: Post[]&#10;import allPosts' >allPosts</data-lsp>.</span><span style="color: #8250DF"><data-lsp lsp='Calls a defined callback function on each element of an array, and returns an array that contains the results.&#10;&#10;(method) Array&lt;Post>.map&lt;{&#10;    slug: string;&#10;}>(callbackfn: (value: Post, index: number, array: Post[]) => {&#10;    slug: string;&#10;}, thisArg?: any): {&#10;    slug: string;&#10;}[]' >map</data-lsp></span><span style="color: #24292F">((</span><span style="color: #953800"><data-lsp lsp='(parameter) post: Post' >post</data-lsp></span><span style="color: #24292F">) </span><span style="color: #CF222E">=&gt;</span><span style="color: #24292F"> ({ <data-lsp lsp='(property) slug: string' >slug</data-lsp>: <data-lsp lsp='(parameter) post: Post' >post</data-lsp>.<data-lsp lsp='The URL path of this page relative to site root. For example, the site root page would be "/", and doc page would be "docs/getting-started/"&#10;&#10;(property) url: string' >url</data-lsp> }))</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #CF222E">export</span><span style="color: #953800"> </span><span style="color: #CF222E">default</span><span style="color: #953800"> </span><span style="color: #CF222E">function</span><span style="color: #953800"> </span><span style="color: #8250DF"><data-lsp lsp='function Post({ params }: {&#10;    params: {&#10;        slug: string;&#10;    };&#10;}): React.JSX.Element' >Post</data-lsp></span><span style="color: #953800">({ <data-lsp lsp='(parameter) params: {&#10;    slug: string;&#10;}' >params</data-lsp> }</span><span style="color: #CF222E">:</span><span style="color: #953800"> { <data-lsp lsp='(property) params: {&#10;    slug: string;&#10;}' >params</data-lsp></span><span style="color: #CF222E">:</span><span style="color: #953800"> { <data-lsp lsp='(property) slug: string' >slug</data-lsp></span><span style="color: #CF222E">:</span><span style="color: #953800"> </span><span style="color: #0550AE">string</span><span style="color: #953800"> } }) </span><span style="color: #24292F">{</span></div><div class='line'><span style="color: #24292F">  </span><span style="color: #CF222E">const</span><span style="color: #24292F"> </span><span style="color: #0550AE"><data-lsp lsp='const post: Post' >post</data-lsp></span><span style="color: #24292F"> </span><span style="color: #CF222E">=</span><span style="color: #24292F"> <data-lsp lsp='(alias) const allPosts: Post[]&#10;import allPosts' >allPosts</data-lsp>.</span><span style="color: #8250DF"><data-lsp lsp='Returns the value of the first element in the array where predicate is true, and undefined&#13;&#10;otherwise.&#10;&#10;(method) Array&lt;Post>.find(predicate: (value: Post, index: number, obj: Post[]) => unknown, thisArg?: any): Post (+1 overload)' >find</data-lsp></span><span style="color: #24292F">((</span><span style="color: #953800"><data-lsp lsp='(parameter) post: Post' >post</data-lsp></span><span style="color: #24292F">) </span><span style="color: #CF222E">=&gt;</span><span style="color: #24292F"> <data-lsp lsp='(parameter) post: Post' >post</data-lsp>.<data-lsp lsp='The URL path of this page relative to site root. For example, the site root page would be "/", and doc page would be "docs/getting-started/"&#10;&#10;(property) url: string' >url</data-lsp> </span><span style="color: #CF222E">===</span><span style="color: #24292F"> <data-lsp lsp='(parameter) params: {&#10;    slug: string;&#10;}' >params</data-lsp>.<data-lsp lsp='(property) slug: string' >slug</data-lsp>)</span></div><div class='line'><span style="color: #24292F">  </span><span style="color: #CF222E">if</span><span style="color: #24292F"> (</span><span style="color: #CF222E">!</span><span style="color: #24292F"><data-lsp lsp='const post: Post' >post</data-lsp>) </span><span style="color: #CF222E">throw</span><span style="color: #24292F"> </span><span style="color: #CF222E">new</span><span style="color: #24292F"> </span><span style="color: #0550AE"><data-lsp lsp='var Error: ErrorConstructor&#10;new (message?: string) => Error' >Error</data-lsp></span><span style="color: #24292F">(</span><span style="color: #0A3069">`Post not found for slug: ${</span><span style="color: #24292F"><data-lsp lsp='(parameter) params: {&#10;    slug: string;&#10;}' >params</data-lsp></span><span style="color: #0A3069">.</span><span style="color: #24292F"><data-lsp lsp='(property) slug: string' >slug</data-lsp></span><span style="color: #0A3069">}`</span><span style="color: #24292F">)</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #24292F">  </span><span style="color: #CF222E">return</span><span style="color: #24292F"> (</span></div><div class='line'><span style="color: #24292F">    &lt;</span><span style="color: #116329"><data-lsp lsp='(property) JSX.IntrinsicElements.div: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement>, HTMLDivElement>' >div</data-lsp></span><span style="color: #24292F">&gt;</span></div><div class='line'><span style="color: #24292F">      &lt;</span><span style="color: #116329"><data-lsp lsp='(property) JSX.IntrinsicElements.h1: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLHeadingElement>, HTMLHeadingElement>' >h1</data-lsp></span><span style="color: #24292F">>{<data-lsp lsp='const post: Post' >post</data-lsp>.<data-lsp lsp='The title of the page&#10;&#10;(property) title: string' >title</data-lsp>}&lt;/</span><span style="color: #116329"><data-lsp lsp='(property) JSX.IntrinsicElements.h1: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLHeadingElement>, HTMLHeadingElement>' >h1</data-lsp></span><span style="color: #24292F">&gt;</span></div><div class='line'><span style="color: #24292F">      &lt;</span><span style="color: #116329"><data-lsp lsp='(property) JSX.IntrinsicElements.div: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement>, HTMLDivElement>' >div</data-lsp></span><span style="color: #24292F"> </span><span style="color: #0550AE"><data-lsp lsp='(property) React.DOMAttributes&lt;HTMLDivElement>.dangerouslySetInnerHTML?: {&#10;    __html: string | TrustedHTML;&#10;}' >dangerouslySetInnerHTML</data-lsp></span><span style="color: #CF222E">=</span><span style="color: #24292F">{{ <data-lsp lsp='(property) __html: string | TrustedHTML' >__html</data-lsp>: <data-lsp lsp='const post: Post' >post</data-lsp>.<data-lsp lsp='Markdown file body&#10;&#10;(property) body: Markdown' >body</data-lsp>.<data-lsp lsp='Generated HTML based on Markdown source&#10;&#10;(property) html: string' >html</data-lsp> }} /></span></div><div class='line'><span style="color: #24292F">    &lt;/</span><span style="color: #116329"><data-lsp lsp='(property) JSX.IntrinsicElements.div: React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement>, HTMLDivElement>' >div</data-lsp></span><span style="color: #24292F">&gt;</span></div><div class='line'><span style="color: #24292F">  )</span></div><div class='line'><span style="color: #24292F">}</span></div></code></div></pre>

<pre class="shiki github-light twoslash lsp" style="background-color: #ffffff; color: #24292f"><div class="language-id">tsx</div><div class='code-container'><code><div class='line'><span style="color: #CF222E">import</span><span style="color: #24292F"> { <data-lsp lsp='(alias) const makeSource: core.MakeSourcePlugin&lt;PluginOptions &amp; core.PartialArgs>&#10;import makeSource' >makeSource</data-lsp>, <data-lsp lsp='(alias) const defineDatabase: &lt;DefName extends string>(def: Thunk&lt;DatabaseTypeDef&lt;false, DefName>>) => DatabaseType&lt;DefName>&#10;import defineDatabase' >defineDatabase</data-lsp> } </span><span style="color: #CF222E">from</span><span style="color: #24292F"> </span><span style="color: #0A3069">&apos;contentlayer-source-notion&apos;</span></div><div class='line'><span style="color: #CF222E">import</span><span style="color: #24292F"> </span><span style="color: #0550AE">*</span><span style="color: #24292F"> </span><span style="color: #CF222E">as</span><span style="color: #24292F"> <data-lsp lsp='import notion' >notion</data-lsp> </span><span style="color: #CF222E">from</span><span style="color: #24292F"> </span><span style="color: #0A3069">&apos;@notionhq/client&apos;</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #CF222E">const</span><span style="color: #24292F"> </span><span style="color: #0550AE"><data-lsp lsp='const client: notion.Client' >client</data-lsp></span><span style="color: #24292F"> </span><span style="color: #CF222E">=</span><span style="color: #24292F"> </span><span style="color: #CF222E">new</span><span style="color: #24292F"> <data-lsp lsp='import notion' >notion</data-lsp>.</span><span style="color: #8250DF"><data-lsp lsp='(alias) new Client(options?: ClientOptions): notion.Client&#10;export Client' >Client</data-lsp></span><span style="color: #24292F">({ <data-lsp lsp='(property) ClientOptions.auth?: string' >auth</data-lsp>: <data-lsp lsp='var process: NodeJS.Process' >process</data-lsp>.<data-lsp lsp='The `process.env` property returns an object containing the user environment.&#10;See [`environ(7)`](http://man7.org/linux/man-pages/man7/environ.7.html).&#10;&#10;An example of this object looks like:&#10;&#10;```js&#10;{&#10;  TERM: &apos;xterm-256color&apos;,&#10;  SHELL: &apos;/usr/local/bin/bash&apos;,&#10;  USER: &apos;maciej&apos;,&#10;  PATH: &apos;~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin&apos;,&#10;  PWD: &apos;/Users/maciej&apos;,&#10;  EDITOR: &apos;vim&apos;,&#10;  SHLVL: &apos;1&apos;,&#10;  HOME: &apos;/Users/maciej&apos;,&#10;  LOGNAME: &apos;maciej&apos;,&#10;  _: &apos;/usr/local/bin/node&apos;&#10;}&#10;```&#10;&#10;It is possible to modify this object, but such modifications will not be&#10;reflected outside the Node.js process, or (unless explicitly requested)&#10;to other `Worker` threads.&#10;In other words, the following example would not work:&#10;&#10;```bash&#10;node -e &apos;process.env.foo = "bar"&apos; &amp;#x26;&amp;#x26; echo $foo&#10;```&#10;&#10;While the following will:&#10;&#10;```js&#10;import { env } from &apos;node:process&apos;;&#10;&#10;env.foo = &apos;bar&apos;;&#10;console.log(env.foo);&#10;```&#10;&#10;Assigning a property on `process.env` will implicitly convert the value&#10;to a string. **This behavior is deprecated.** Future versions of Node.js may&#10;throw an error when the value is not a string, number, or boolean.&#10;&#10;```js&#10;import { env } from &apos;node:process&apos;;&#10;&#10;env.test = null;&#10;console.log(env.test);&#10;// => &apos;null&apos;&#10;env.test = undefined;&#10;console.log(env.test);&#10;// => &apos;undefined&apos;&#10;```&#10;&#10;Use `delete` to delete a property from `process.env`.&#10;&#10;```js&#10;import { env } from &apos;node:process&apos;;&#10;&#10;env.TEST = 1;&#10;delete env.TEST;&#10;console.log(env.TEST);&#10;// => undefined&#10;```&#10;&#10;On Windows operating systems, environment variables are case-insensitive.&#10;&#10;```js&#10;import { env } from &apos;node:process&apos;;&#10;&#10;env.TEST = 1;&#10;console.log(env.test);&#10;// => 1&#10;```&#10;&#10;Unless explicitly specified when creating a `Worker` instance,&#10;each `Worker` thread has its own copy of `process.env`, based on its&#10;parent thread&apos;s `process.env`, or whatever was specified as the `env` option&#10;to the `Worker` constructor. Changes to `process.env` will not be visible&#10;across `Worker` threads, and only the main thread can make changes that&#10;are visible to the operating system or to native add-ons. On Windows, a copy of`process.env` on a `Worker` instance operates in a case-sensitive manner&#10;unlike the main thread.&#10;&#10;(property) NodeJS.Process.env: NodeJS.ProcessEnv' >env</data-lsp>.</span><span style="color: #0550AE"><data-lsp lsp='string' >NOTION_TOKEN</data-lsp></span><span style="color: #24292F"> })</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #CF222E">export</span><span style="color: #24292F"> </span><span style="color: #CF222E">const</span><span style="color: #24292F"> </span><span style="color: #0550AE"><data-lsp lsp='const Post: DatabaseType&lt;"Post">' >Post</data-lsp></span><span style="color: #24292F"> </span><span style="color: #CF222E">=</span><span style="color: #24292F"> </span><span style="color: #8250DF"><data-lsp lsp='(alias) defineDatabase&lt;"Post">(def: Thunk&lt;DatabaseTypeDef&lt;false, "Post">>): DatabaseType&lt;"Post">&#10;import defineDatabase' >defineDatabase</data-lsp></span><span style="color: #24292F">(() </span><span style="color: #CF222E">=&gt;</span><span style="color: #24292F"> ({</span></div><div class='line'><span style="color: #24292F">  <data-lsp lsp='The database name.&#10;&#10;(property) name: "Post"' >name</data-lsp>: </span><span style="color: #0A3069">&apos;Post&apos;</span><span style="color: #24292F">,</span></div><div class='line'><span style="color: #24292F">  <data-lsp lsp='The database ID used as the content source.&#10;&#10;(property) databaseId: string' >databaseId</data-lsp>: <data-lsp lsp='var process: NodeJS.Process' >process</data-lsp>.<data-lsp lsp='The `process.env` property returns an object containing the user environment.&#10;See [`environ(7)`](http://man7.org/linux/man-pages/man7/environ.7.html).&#10;&#10;An example of this object looks like:&#10;&#10;```js&#10;{&#10;  TERM: &apos;xterm-256color&apos;,&#10;  SHELL: &apos;/usr/local/bin/bash&apos;,&#10;  USER: &apos;maciej&apos;,&#10;  PATH: &apos;~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin&apos;,&#10;  PWD: &apos;/Users/maciej&apos;,&#10;  EDITOR: &apos;vim&apos;,&#10;  SHLVL: &apos;1&apos;,&#10;  HOME: &apos;/Users/maciej&apos;,&#10;  LOGNAME: &apos;maciej&apos;,&#10;  _: &apos;/usr/local/bin/node&apos;&#10;}&#10;```&#10;&#10;It is possible to modify this object, but such modifications will not be&#10;reflected outside the Node.js process, or (unless explicitly requested)&#10;to other `Worker` threads.&#10;In other words, the following example would not work:&#10;&#10;```bash&#10;node -e &apos;process.env.foo = "bar"&apos; &amp;#x26;&amp;#x26; echo $foo&#10;```&#10;&#10;While the following will:&#10;&#10;```js&#10;import { env } from &apos;node:process&apos;;&#10;&#10;env.foo = &apos;bar&apos;;&#10;console.log(env.foo);&#10;```&#10;&#10;Assigning a property on `process.env` will implicitly convert the value&#10;to a string. **This behavior is deprecated.** Future versions of Node.js may&#10;throw an error when the value is not a string, number, or boolean.&#10;&#10;```js&#10;import { env } from &apos;node:process&apos;;&#10;&#10;env.test = null;&#10;console.log(env.test);&#10;// => &apos;null&apos;&#10;env.test = undefined;&#10;console.log(env.test);&#10;// => &apos;undefined&apos;&#10;```&#10;&#10;Use `delete` to delete a property from `process.env`.&#10;&#10;```js&#10;import { env } from &apos;node:process&apos;;&#10;&#10;env.TEST = 1;&#10;delete env.TEST;&#10;console.log(env.TEST);&#10;// => undefined&#10;```&#10;&#10;On Windows operating systems, environment variables are case-insensitive.&#10;&#10;```js&#10;import { env } from &apos;node:process&apos;;&#10;&#10;env.TEST = 1;&#10;console.log(env.test);&#10;// => 1&#10;```&#10;&#10;Unless explicitly specified when creating a `Worker` instance,&#10;each `Worker` thread has its own copy of `process.env`, based on its&#10;parent thread&apos;s `process.env`, or whatever was specified as the `env` option&#10;to the `Worker` constructor. Changes to `process.env` will not be visible&#10;across `Worker` threads, and only the main thread can make changes that&#10;are visible to the operating system or to native add-ons. On Windows, a copy of`process.env` on a `Worker` instance operates in a case-sensitive manner&#10;unlike the main thread.&#10;&#10;(property) NodeJS.Process.env: NodeJS.ProcessEnv' >env</data-lsp>.</span><span style="color: #0550AE"><data-lsp lsp='string' >NOTION_DATABASE_ID</data-lsp></span><span style="color: #24292F">,</span></div><div class='line'><span style="color: #24292F">  <data-lsp lsp='Sort and filter pages queried from the database.&#10;More information on the Notion API documentation https://developers.notion.com/reference/post-database-query-filter&#10;&#10;(property) query?: Omit&lt;QueryDatabaseParameters, "database_id" | "filter_properties" | "start_cursor" | "page_size">' >query</data-lsp>: {</span></div><div class='line'><span style="color: #24292F">    <data-lsp lsp='(property) filter?: {&#10;    or: (PropertyFilter | TimestampCreatedTimeFilter | TimestampLastEditedTimeFilter | {&#10;        or: PropertyFilter[];&#10;    } | {&#10;        ...;&#10;    })[];&#10;} | {&#10;    ...;&#10;} | PropertyFilter | TimestampCreatedTimeFilter | TimestampLastEditedTimeFilter' >filter</data-lsp>: {</span></div><div class='line'><span style="color: #24292F">      <data-lsp lsp='(property) property: string' >property</data-lsp>: </span><span style="color: #0A3069">&apos;Status&apos;</span><span style="color: #24292F">,</span></div><div class='line'><span style="color: #24292F">      <data-lsp lsp='(property) status: StatusPropertyFilter' >status</data-lsp>: { <data-lsp lsp='(property) equals: string' >equals</data-lsp>: </span><span style="color: #0A3069">&apos;Published&apos;</span><span style="color: #24292F"> },</span></div><div class='line'><span style="color: #24292F">    },</span></div><div class='line'><span style="color: #24292F">  },</span></div><div class='line'><span style="color: #24292F">  <data-lsp lsp='The fields configuration, usefull to remap keys and configure complex properties.&#10;&#10;(property) properties?: Record&lt;string, DatabasePropertyTypeDef> | DatabasePropertyTypeDef[]' >properties</data-lsp>: {</span></div><div class='line'><span style="color: #24292F">    <data-lsp lsp='(property) date: {&#10;    name: string;&#10;}' >date</data-lsp>: { <data-lsp lsp='(property) name: string' >name</data-lsp>: </span><span style="color: #0A3069">&apos;Created time&apos;</span><span style="color: #24292F"> },</span></div><div class='line'><span style="color: #24292F">  },</span></div><div class='line'><span style="color: #24292F">  <data-lsp lsp='(property) computedFields?: Record&lt;string, ComputedField&lt;"Post">>' >computedFields</data-lsp>: {</span></div><div class='line'><span style="color: #24292F">    <data-lsp lsp='(property) url: {&#10;    type: "string";&#10;    resolve: (post: LocalDocument) => string;&#10;}' >url</data-lsp>: { <data-lsp lsp='(property) type: "string" | "number" | "boolean" | "date" | "list" | "list_polymorphic" | "json" | "markdown" | "mdx" | "image" | "enum" | "nested" | "nested_polymorphic" | "nested_unnamed" | "reference" | "reference_polymorphic"' >type</data-lsp>: </span><span style="color: #0A3069">&apos;string&apos;</span><span style="color: #24292F">, </span><span style="color: #8250DF"><data-lsp lsp='(property) resolve: ComputedFieldResolver&lt;"Post">' >resolve</data-lsp></span><span style="color: #24292F">: (</span><span style="color: #953800"><data-lsp lsp='(parameter) post: LocalDocument' >post</data-lsp></span><span style="color: #24292F">) </span><span style="color: #CF222E">=&gt;</span><span style="color: #24292F"> </span><span style="color: #0A3069">`/posts/${</span><span style="color: #24292F"><data-lsp lsp='(parameter) post: LocalDocument' >post</data-lsp></span><span style="color: #0A3069">.</span><span style="color: #24292F"><data-lsp lsp='(property) _id: string' >_id</data-lsp></span><span style="color: #0A3069">}`</span><span style="color: #24292F"> },</span></div><div class='line'><span style="color: #24292F">  },</span></div><div class='line'><span style="color: #24292F">}))</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #CF222E">export</span><span style="color: #953800"> </span><span style="color: #CF222E">default</span><span style="color: #953800"> </span><span style="color: #8250DF"><data-lsp lsp='(alias) makeSource(_: (PluginOptions &amp; PartialArgs) | ThunkWithSourceKey&lt;PluginOptions &amp; PartialArgs> | ThunkWithSourceKey&lt;...>): (sourceKey: string) => Promise&lt;...>&#10;import makeSource' >makeSource</data-lsp></span><span style="color: #953800">({ </span><span style="color: #24292F"><data-lsp lsp='(property) client?: notion.Client | ClientOptions' >client</data-lsp></span><span style="color: #953800">, </span><span style="color: #24292F"><data-lsp lsp='(property) databaseTypes: DatabaseTypes' >databaseTypes</data-lsp>: [<data-lsp lsp='const Post: DatabaseType&lt;"Post">' >Post</data-lsp>] </span><span style="color: #953800">})</span></div><div class='line'>&nbsp;</div></code></div></pre>

A better way to Buy, store, send and swap tokens

Supported Applications

Partnerships & Collabs

Ecosystem

Community