Outstatic

https://outstatic.com/docs
Admin
Outstatic is an open-source, Git-based content management system for Next.js and Markdown websites...
Tokens:20,375
Snippets:256
Trust Score:7.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Clone and Start Outstatic Dashboard

Source: https://outstatic.com/docs/using-outstatic-for-markdown-content

Commands to clone the repository, install dependencies, and start the development server.

```bash
git clone git@github.com:avitorio/outstatic-dashboard.git
cd outstatic-dashboard
pnpm install
pnpm dev
```

--------------------------------

### Install dependencies

Source: https://outstatic.com/docs/local-development

Commands to install project dependencies using pnpm, yarn, or npm.

```bash
pnpm install
# or
yarn install
# or
npm install
```

--------------------------------

### Run the development server

Source: https://outstatic.com/docs/local-development

Command to start the local development server.

```bash
npm run dev
```

--------------------------------

### Install Outstatic via bun

Source: https://outstatic.com/docs/getting-started-with-next-js

Install the Outstatic package using the bun package manager.

```bash
bun add outstatic
```

--------------------------------

### Install Outstatic via npm

Source: https://outstatic.com/docs/getting-started-with-next-js

Install the Outstatic package using the npm package manager.

```bash
npm install outstatic
```

--------------------------------

### Install Outstatic via pnpm

Source: https://outstatic.com/docs/getting-started-with-next-js

Install the Outstatic package using the pnpm package manager.

```bash
pnpm install outstatic
```

--------------------------------

### Install LaTeX dependencies

Source: https://outstatic.com/docs/editing-modeling/the-content-editor

Install the necessary packages to support LaTeX rendering in a Next.js project.

```bash
pnpm i katex remark-math rehype-katex
```

--------------------------------

### Install Outstatic via yarn

Source: https://outstatic.com/docs/getting-started-with-next-js

Install the Outstatic package using the yarn package manager.

```bash
yarn add outstatic
```

--------------------------------

### Commit message example

Source: https://outstatic.com/docs/access-integration/commit-messages

A sample commit message showing the action and metadata tag.

```text
update draft "Introducing Outstatic" [outstatic:content]
```

--------------------------------

### Example generated posts type

Source: https://outstatic.com/docs/access-integration/type-generation

This is an example of the generated TypeScript interface for a posts collection containing base and custom fields.

```typescript
// ./outstatic/types/posts.ts
export type Posts = {
  // Base document fields
  title: string
  status: 'published' | 'draft'
  slug: string
  content: string
  publishedAt: string
  author: {
    name: string
    picture: string
  }
  coverImage: string

  // Custom fields from schema.json
  category: 'tech' | 'lifestyle' | 'news'
  featured: boolean
  tags: Array<{ label: string; value: string }>
}
```

--------------------------------

### Example generated file structure

Source: https://outstatic.com/docs/access-integration/type-generation

The generator creates several files within the ./outstatic/types directory to manage collection and singleton types.

```text
./outstatic/types
  index.ts              # Re-exports all types
  collections.ts        # Collection and Singleton type maps
  api.d.ts              # Typed overloads for server functions
  posts.ts              # Types for 'posts' collection
  projects.ts           # Types for 'projects' collection
  _singletons/
    home.ts             # Types for 'home' singleton
    about.ts            # Types for 'about' singleton
```

--------------------------------

### Set OST_AI_MODEL for self-hosted model selection

Source: https://outstatic.com/docs/editing-modeling/the-content-editor

Configure the AI model for self-hosted installations by setting the provider and model ID.

```bash
OST_AI_MODEL=provider/model-id-here
```

--------------------------------

### Fields only mode schema configuration

Source: https://outstatic.com/docs/editing-modeling/custom-fields

An example of a schema file configured with fieldsOnlyMode set to true.

```json
{
  "title": "homepage",
  "type": "object",
  "settings": {
    "fieldsOnlyMode": true
  },
  "properties": {
    "heroTitle": {
      "required": true,
      "description": "Main heading on the home page",
      "fieldType": "String",
      "dataType": "string",
      "title": "Hero Title"
    }
  }
}
```

--------------------------------

### Import statement in MDX block

Source: https://outstatic.com/docs/editing-modeling/mdx-block

Example of an import statement added to an MDX block.

```mdx
import Callout from '@/components/Callout'
```

--------------------------------

### HTML section in MDX block

Source: https://outstatic.com/docs/editing-modeling/mdx-block

Example of raw HTML content used within an MDX block.

```mdx
<section className="feature">
  <h2>Custom layout</h2>
</section>
```

--------------------------------

### Querying Collections with find

Source: https://outstatic.com/docs/access-integration/fetching-data

Examples of using the find method to filter documents by collection, including support for logical operators like $or.

```javascript
// find all posts in the "blog" collection
db.find({
  collection: 'blog'
})

// find all posts in the "blog" or "essays" collection
db.find({
  $or: [{ collection: 'blog' }, { collection: 'essays' }]
})
```

--------------------------------

### Store Object and Array fields in frontmatter

Source: https://outstatic.com/docs/editing-modeling/custom-fields

Example of how complex Object and Array fields are represented in Markdown frontmatter.

```yaml
seo:
  metaTitle: Outstatic project
  social:
    image: /images/social.png
authors:
  - name: Ada Lovelace
    role: Writer
  - name: Grace Hopper
    role: Editor
```

--------------------------------

### Store Select fields in frontmatter

Source: https://outstatic.com/docs/editing-modeling/custom-fields

Example of how a Select field is stored as a raw value in Markdown frontmatter.

```yaml
category: news
```

--------------------------------

### Get document paths for static generation

Source: https://outstatic.com/docs/access-integration/fetching-data

Use getDocumentSlugs or getDocumentPaths to retrieve slugs for Next.js static generation functions.

```typescript
// Fetching document paths

// /app
export async function generateStaticParams() {
  const posts = getDocumentSlugs('posts')
  return posts.map((slug) => ({ slug }))
}

// /pages
export async function getStaticPaths() {
  return {
    paths: getDocumentPaths('posts'),
    fallback: false
  }
}
```

--------------------------------

### Getting paths for static generation

Source: https://outstatic.com/docs/access-integration/fetching-data

Retrieves only the slug field to generate static paths for Next.js using either generateStaticParams or getStaticPaths.

```typescript
// /app
export async function generateStaticParams() {
  const db = await load()
  const posts = await db
    .find({
      collection: 'posts'
    })
    .project(['slug'])
    .toArray()

  return posts
}

// /pages
export async function getStaticPaths() {
  const db = await load()
  const posts = await db
    .find({
      collection: 'posts'
    })
    .project(['slug'])
    .toArray()

  return {
    paths: posts.map((post) => `posts/${[post.slug]}`),
    fallback: false
  }
}
```

--------------------------------

### Static JSX attributes configuration

Source: https://outstatic.com/docs/editing-modeling/block-library

Example of static attributes to be appended verbatim to every insertion of a block, such as CSS classes or data attributes.

```jsx
className="my-callout" data-variant="info"
```

--------------------------------

### load()

Source: https://outstatic.com/docs/access-integration/fetching-data

Initializes and retrieves the Outstatic database instance.

```APIDOC
## load()

### Description
Retrieves the Outstatic JSON database instance to begin querying documents.

### Signature
`load(): Promise<Database>`
```

--------------------------------

### Configure Outstatic Pro API Key

Source: https://outstatic.com/docs/getting-started-with-next-js

Add your Outstatic Pro project API key to your .env file for managed authentication.

```text
OUTSTATIC_API_KEY=ost_******************************
```

--------------------------------

### JSX component in MDX block

Source: https://outstatic.com/docs/editing-modeling/mdx-block

Example of a JSX component tag used within an MDX block.

```mdx

<Callout title="Tip">
  This content is saved as raw MDX.
</Callout>
```

--------------------------------

### Configure Local Environment Variables

Source: https://outstatic.com/docs/access-integration/setting-up-github-authentication

Set these environment variables in your local environment using the credentials generated from your GitHub OAuth application.

```text
OST_GITHUB_ID=YOUR_GITHUB_OAUTH_APP_ID
OST_GITHUB_SECRET=YOUR_GITHUB_OAUTH_APP_SECRET
```

--------------------------------

### Fetch singleton in App directory

Source: https://outstatic.com/docs/access-integration/fetching-data

Use getSingletonBySlug to retrieve unique, standalone content items in the /app directory.

```typescript
// /app/page.tsx

import { getSingletonBySlug } from 'outstatic/server'

export default async function HomePage() {
  const home = await getData()
  return (
    <main>
      <h1>{home.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: home.content }} />
    </main>
  )
}

async function getData() {
  const home = getSingletonBySlug('home', ['title', 'content', 'description'])

  return home
}
```

--------------------------------

### Singleton schema file path

Source: https://outstatic.com/docs/editing-modeling/custom-fields

The file path where the schema for a singleton is stored.

```text
/outstatic/content/_singletons/{singleton}.schema.json
```

--------------------------------

### Fetch by slug

Source: https://outstatic.com/docs/access-integration/fetching-data

Retrieves a single post by its slug and converts its content from markdown to HTML.

```typescript
import { load } from 'outstatic/server'

export async function getStaticProps({ params }: Params) {
  const db = await load()
  const post = await db
    .find({
      collection: 'posts',
      slug: params.slug
    })
    .project([
      'title',
      'publishedAt',
      'slug',
      'author',
      'content',
      'coverImage'
    ])
    .first()

  const content = await markdownToHtml(post.content ?? '')

  return {
    props: {
      post: {
        ...post,
        content
      }
    }
  }
}
```

--------------------------------

### Import KaTeX CSS in layout.tsx

Source: https://outstatic.com/docs/editing-modeling/the-content-editor

Add the required KaTeX stylesheet to your layout file.

```typescript
import 'katex/dist/katex.min.css'
```

--------------------------------

### Fetching Documents with getStaticProps

Source: https://outstatic.com/docs/access-integration/fetching-data

Demonstrates the basic structure for loading the database and chaining query methods like find, sort, skip, limit, and project within a Next.js getStaticProps function.

```javascript
import { load } from 'outstatic/server'

export async function getStaticProps({ params }: Params) {
  const db = await load()
  const posts = await db
    .find(query, fields)
    .sort(/* sort */) // chain this to sort the results
    .skip(number) // chain this to skip the first `number` entries
    .limit(number) // chain this to set the max returned items to `number`
    .project(fields) // chain this to update the fields you want returned
    .toArray() // end the chain, returning a Promise of the resulting documents
}

//...
```

--------------------------------

### Create Outstatic Dashboard Routes

Source: https://outstatic.com/docs/getting-started-with-next-js

Set up the layout, page, and API route files required for the Outstatic dashboard within the App Router.

```typescript
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html suppressHydrationWarning>
      <body id="outstatic">{children}</body>
    </html>
  )
}
```

```typescript
import 'outstatic/outstatic.css'
import { Outstatic } from 'outstatic'
import { OstClient } from 'outstatic/client'

export default async function Page({
  params,
}: {
  params: { ost?: string[] }
}) {
  const ostData = await Outstatic()
  return <OstClient ostData={ostData} params={params} />
}
```

```typescript
import { OutstaticApi } from 'outstatic'

export const GET = OutstaticApi.GET
export const POST = OutstaticApi.POST
```

--------------------------------

### Using generated types for content fetching

Source: https://outstatic.com/docs/access-integration/type-generation

Leverage generated types to get full type safety when using Outstatic server functions.

```typescript
import {
  getDocuments,
  getDocumentBySlug,
  getSingletonBySlug
} from 'outstatic/server'

// Types are automatically inferred
const posts = getDocuments('posts', ['title', 'slug', 'category'])
// posts is typed as Array<Pick<Posts, 'title' | 'slug' | 'category'>>

const post = getDocumentBySlug('posts', 'my-post', [
  'title',
  'content',
  'author'
])
// post is typed as Pick<Posts, 'title' | 'content' | 'author'>

const home = getSingletonBySlug('home', ['title', 'description'])
// home is typed based on your home singleton schema
```

--------------------------------

### Outstatic Environment Variables Configuration

Source: https://outstatic.com/docs/access-integration/environment-variables

A list of required and optional environment variables for Outstatic. Choose between GitHub OAuth or Outstatic Pro relay authentication.

```text
# REQUIRED Environment variables

# Authentication mode (choose one of the two options below):
# Option A - Free self-hosting with your own GitHub OAuth app
OST_GITHUB_ID=YOUR_GITHUB_OAUTH_OR_APPS_ID
OST_GITHUB_SECRET=YOUR_GITHUB_OAUTH_OR_APPS_SECRET

# Option B - Outstatic Pro relay auth (no local GitHub OAuth app needed)
OUTSTATIC_API_KEY=your_api_key_here

# OST_REPO_SLUG (Ex: for avitorio/outstatic, OST_REPO_SLUG=outstatic)
OST_REPO_SLUG=THE_REPOSITORY_SLUG
# If empty AND on Vercel, this will default to VERCEL_GIT_REPO_SLUG

# OPTIONAL Environment variables

# Main branch of the project. If empty, this will default to 'main'
OST_REPO_BRANCH=main

# Repository owner or organization. If empty, logged in GitHub username is used.
OST_REPO_OWNER=myusername

# Where content is saved. Defaults to outstatic/content if empty.
OST_CONTENT_PATH=outstatic/content

# If your Next.js project is inside a monorepo, ie: your /outstatic folder
# is not at the root level of your repository. Specify monorepo folder of
# your Next.js install
OST_MONOREPO_PATH=apps/web

# OpenAI API Key for AI Completions
OPENAI_API_KEY=sk-XXXXXXX

# Use with Next.js basePath
# https://nextjs.org/docs/app/api-reference/next-config-js/basePath
OST_BASE_PATH=/docs

# This is not needed but can make your install slightly more secure
OST_TOKEN_SECRET=A_32CHAR_RANDOM_STRING_FOR_YOUR_TOKEN_SECRET
```

--------------------------------

### Configure mdx-bundler for LaTeX

Source: https://outstatic.com/docs/editing-modeling/the-content-editor

Update your mdx-bundler configuration to include remark-math and rehype-katex plugins.

```typescript
import { bundleMDX } from 'mdx-bundler'
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'

export default async function MDXServer(code: string) {
  const result = await bundleMDX({
    source: code,
    mdxOptions(options) {
      ...
      options.remarkPlugins.push(remarkMath as any)
      options.rehypePlugins = options.rehypePlugins ?? []
      options.rehypePlugins.push(rehypeKatex as any)
      ...

      return options
    }
  })

  return result.code
}
```

--------------------------------

### Retrieving All Documents with toArray

Source: https://outstatic.com/docs/access-integration/fetching-data

Demonstrates how to execute a query and retrieve all matching documents as an array using the toArray method.

```javascript
// return ALL documents - pretty expensive
await db.find({}).toArray()
```

--------------------------------

### Set OUTSTATIC_API_KEY for managed AI

Source: https://outstatic.com/docs/editing-modeling/the-content-editor

Set this environment variable to use Outstatic-managed AI completions, available for Pro users.

```bash
OUTSTATIC_API_KEY=ost_XXXXXXXXXXXXXXXXXXXXXXXXX
```

--------------------------------

### Set AI_GATEWAY_API_KEY for Vercel AI Gateway

Source: https://outstatic.com/docs/editing-modeling/the-content-editor

Use this environment variable to centralize AI usage and billing through Vercel AI Gateway.

```bash
AI_GATEWAY_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXX
```

--------------------------------

### Projecting Fields in Queries

Source: https://outstatic.com/docs/access-integration/fetching-data

Shows how to restrict returned document fields by passing an array as a second argument to find or by chaining the .project() method.

```javascript
// as a second argument
db.find(query, ['title', 'collection', 'publishedAt', 'slug'])

// using .project()
db.find(query).project(['title', 'collection', 'publishedAt', 'slug'])
```

--------------------------------

### getSingletonBySlug(slug: string, fields: string[])

Source: https://outstatic.com/docs/access-integration/fetching-data

Fetches a unique, standalone singleton content item.

```APIDOC
## getSingletonBySlug(slug, fields)

### Description
Retrieves a singleton content item, which is a unique, standalone document.

### Parameters
- **slug** (string) - Required - The slug of the singleton.
- **fields** (string[]) - Required - An array of field names to be retrieved.
```

--------------------------------

### Fetch all documents in App directory

Source: https://outstatic.com/docs/access-integration/fetching-data

Use getDocuments in an async function within the /app directory to retrieve all documents from a collection.

```typescript
// Fetch ALL Documents from the posts collection
// /app/posts/[slug]/page.tsx

import { getDocuments } from 'outstatic/server'

export default async function Index() {
  const posts = await getData()
  return posts.map((post) => <h1>{post.title}</h1>)
}

async function getData() {
  const posts = getDocuments('posts', ['title'])

  return posts
}
```

--------------------------------

### Fetch singleton in Pages directory

Source: https://outstatic.com/docs/access-integration/fetching-data

Use getSingletonBySlug inside getStaticProps to retrieve unique, standalone content items in the /pages directory.

```typescript
// /pages/index.tsx

import { getSingletonBySlug } from 'outstatic/server'

export default function HomePage({ home }) {
  return (
    <main>
      <h1>{home.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: home.content }} />
    </main>
  )
}

export const getStaticProps = async () => {
  const home = getSingletonBySlug('home', ['title', 'content', 'description'])

  return {
    props: { home }
  }
}
```

--------------------------------

### getDocumentSlugs(collection: string) and getDocumentPaths(collection: string)

Source: https://outstatic.com/docs/access-integration/fetching-data

Helper functions to retrieve paths or slugs for static generation.

```APIDOC
## getDocumentSlugs(collection)
### Description
Returns an array of slugs for a specific collection, used for generateStaticParams.

## getDocumentPaths(collection)
### Description
Returns an array of paths for a specific collection, used for getStaticPaths.
```

--------------------------------

### Set OPENAI_API_KEY for direct OpenAI access

Source: https://outstatic.com/docs/editing-modeling/the-content-editor

Set this environment variable to call OpenAI directly for AI completions.

```bash
OPENAI_API_KEY=sk-XXXXXXXXXXXXXXXXXXXXXXXXX
```

--------------------------------

### Set Callback Origin for API Keys

Source: https://outstatic.com/docs/deploy-an-outstatic-project-on-vercel

The initial callback origin URL to be used during the API key generation process in the Outstatic dashboard.

```text
https://localhost:3000/outstatic
```

--------------------------------

### db.find(query, fields)

Source: https://outstatic.com/docs/access-integration/fetching-data

Initiates a query against the document collection using a MongoDB-like syntax.

```APIDOC
## db.find(query, fields)

### Description
Queries the database for documents matching the provided criteria. Supports MongoDB-like operators via the sift library.

### Parameters
- **query** (Object) - Required - A MongoDB-like query object.
- **fields** (Array) - Optional - An array of field names to project in the result.

### Chaining Methods
- `.sort(sortOptions)`: Sorts results (string, object, or array).
- `.skip(number)`: Skips a specified number of entries.
- `.limit(number)`: Limits the number of returned entries.
- `.project(fields)`: Specifies fields to return.
- `.toArray()`: Executes the query and returns an array of documents.
- `.first()`: Executes the query and returns the first document.
```

--------------------------------

### Configure swcMinify in next.config.js

Source: https://outstatic.com/docs/help/troubleshooting

If using a Next.js version below 13.4.8, add swcMinify: false to your next.config.js to prevent dashboard errors.

```javascript
const nextConfig = {
  swcMinify: false
}
```

--------------------------------

### Commit message format

Source: https://outstatic.com/docs/access-integration/commit-messages

The standard structure for Outstatic commit messages.

```text
action status/target "label" [outstatic:scope]
```

--------------------------------

### Update settings commit message

Source: https://outstatic.com/docs/access-integration/commit-messages

Format for committing changes to Outstatic settings.

```text
update settings [outstatic:config]
```

--------------------------------

### Fetch a collection

Source: https://outstatic.com/docs/access-integration/fetching-data

Retrieves a list of posts from the 'posts' collection, projecting specific fields to optimize the data returned.

```typescript
import { load } from 'outstatic/server'

export async function getStaticProps({ params }: Params) {
  const db = await load()
  const posts = await db
    .find({
      collection: 'posts'
    })
    .project(['title', 'publishedAt', 'slug', 'author', 'coverImage'])
    .toArray()

  return {
    props: {
      posts
    }
  }
}
```

--------------------------------

### Build only published content changes script

Source: https://outstatic.com/docs/access-integration/commit-messages

A bash script to configure Vercel to build only when published content or configuration changes.

```bash
#!/bin/bash

COMMIT_MESSAGE="$VERCEL_GIT_COMMIT_MESSAGE"

case "$COMMIT_MESSAGE" in
  publish\ *"[outstatic:content]"*)
    echo "Building published content change"
    exit 1
    ;;

  unpublish\ *"[outstatic:content]"*)
    echo "Building unpublished content change"
    exit 1
    ;;

  update\ published\ *"[outstatic:content]"*)
    echo "Building published content update"
    exit 1
    ;;

  delete\ published\ *"[outstatic:content]"*)
    echo "Building published content deletion"
    exit 1
    ;;

  *"[outstatic:config]"*)
    echo "Building Outstatic config change"
    exit 1
    ;;

  *"[outstatic:content]"* | *"[outstatic:media]"*)
    echo "Ignoring Outstatic draft or media-only change"
    exit 0
    ;;

  *)
    echo "Building non-Outstatic commit"
    exit 1
    ;;
esac
```

--------------------------------

### Fetch document by slug in App directory

Source: https://outstatic.com/docs/access-integration/fetching-data

Use getDocumentBySlug to fetch a specific document by its slug for dynamic routes in the /app directory.

```typescript
// Example of a app/posts/[slug]/page.tsx

async function getData(params: { slug: string }) {
  const post = getDocumentBySlug('posts', params.slug, [
    'title',
    'publishedAt',
    'slug',
    'author',
    'content',
    'coverImage'
  ])

  const content = await markdownToHtml(post.content || '')

  return {
    ...post,
    content
  }
}
```

--------------------------------

### Fetch all documents in Pages directory

Source: https://outstatic.com/docs/access-integration/fetching-data

Use getDocuments inside getStaticProps in the /pages directory to retrieve all documents from a collection.

```typescript
// Fetch ALL Documents from the posts collection
// /pages/posts/[slug].tsx

import { getDocuments } from 'outstatic/server'

export default function Index({ posts }) {
  return posts.map((post) => <h1>{post.title}</h1>)
}

export const getStaticProps = async () => {
  const posts = getDocuments('posts', ['title'])
  return {
    props: { posts }
  }
}
```

--------------------------------

### Ignore draft and media changes script

Source: https://outstatic.com/docs/access-integration/commit-messages

A bash script to ignore draft-only and media-only changes in Vercel, followed by the command to run it in the Ignored Build Step settings.

```bash
#!/bin/bash

COMMIT_MESSAGE="$VERCEL_GIT_COMMIT_MESSAGE"

case "$COMMIT_MESSAGE" in
  *"[outstatic:content]"*)
    if [[ "$COMMIT_MESSAGE" == create\ draft* || "$COMMIT_MESSAGE" == update\ draft* || "$COMMIT_MESSAGE" == delete\ draft* ]]; then
      echo "Ignoring Outstatic draft-only content change"
      exit 0
    fi

    echo "Building Outstatic published content change"
    exit 1
    ;;

  *"[outstatic:media]"*)
    echo "Ignoring Outstatic media-only change"
    exit 0
    ;;

  *)
    echo "Building"
    exit 1
    ;;
esac
```

```bash
bash ignore-outstatic-draft.sh
```

--------------------------------

### Configure withOutstatic in next.config.js

Source: https://outstatic.com/docs/access-integration/type-generation

Enable type generation by wrapping your Next.js configuration with the withOutstatic plugin.

```javascript
// next.config.js
const { withOutstatic } = require('outstatic')

module.exports = withOutstatic({
  // your Next.js config
})
```

--------------------------------

### Access Outstatic Dashboard

Source: https://outstatic.com/docs/deploy-an-outstatic-project-on-vercel

The URL pattern to access the Outstatic dashboard after deployment.

```text
https://myblog.vercel.app/outstatic
```

--------------------------------

### Update media index commit message

Source: https://outstatic.com/docs/access-integration/commit-messages

Format for committing a rebuild of the internal media.json manifest.

```text
update media-index [outstatic:config]
```

--------------------------------

### Collection schema file path

Source: https://outstatic.com/docs/editing-modeling/custom-fields

The file path where the schema for a collection is stored.

```text
/outstatic/content/{collection}/schema.json
```

--------------------------------

### Upload media commit message

Source: https://outstatic.com/docs/access-integration/commit-messages

Format for committing a media file upload.

```text
upload media "hero.jpg" [outstatic:media]
```

--------------------------------

### Fetch document by slug in Pages directory

Source: https://outstatic.com/docs/access-integration/fetching-data

Use getDocumentBySlug inside getStaticProps to fetch a specific document by its slug in the /pages directory.

```typescript
// Example of a /pages/posts/[slug].tsx page

export async function getStaticProps({ params }: Params) {
  const post = getDocumentBySlug('posts', params.slug, [
    'title',
    'publishedAt',
    'slug',
    'author',
    'content',
    'coverImage'
  ])
  const content = await markdownToHtml(post.content || '')

  return {
    props: {
      post: {
        ...post,
        content
      }
    }
  }
}
```
Tokens:
Raw