📦 plugin-content-showcase

Provides the Showcase feature and is the default blog plugin for Docusaurus.

Installation

npm

npm install --save @docusaurus/plugin-content-showcase

Yarn

yarn add @docusaurus/plugin-content-showcase

pnpm

pnpm add @docusaurus/plugin-content-showcase

tip

If you use the preset @docusaurus/preset-classic, you don't need to install this plugin as a dependency.

You can configure this plugin through the preset options.

Configuration

Accepted fields:

Name	Type	Default	Description
path	string	'showcase'	Path to the blog content directory on the file system, relative to site dir.
routeBasePath	string	'/showcase'	URL route for the blog section of your site. DO NOT include a trailing slash. Use / to put the blog at root path.
include	string[]	['**/*.{yml,yaml}']	Array of glob patterns matching Markdown files to be built, relative to the content path.
exclude	string[]	See example configuration	Array of glob patterns matching Markdown files to be excluded. Serves as refinement based on the include option.
tags	string | [TagOption](#TagsOption)	string

Types

TagsOption

type Tag = {
  label: string;
  description: {
    message: string;
    id: string;
  };
  color: string;
};

type TagsOption = {
  [key: string]: Tag;
};

Example configuration

You can configure this plugin through preset options or plugin options.

tip

Most Docusaurus users configure this plugin through the preset options.

Preset options

If you use a preset, configure this plugin through the preset options:

docusaurus.config.js

module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          path: 'showcase',
          routeBasePath: 'showcase',
          include: ['**/*.{yml,yaml}'],
          exclude: [
            '**/_*.{js,jsx,ts,tsx,md,mdx}',
            '**/_*/**',
            '**/*.test.{js,jsx,ts,tsx}',
            '**/__tests__/**',
          ],
          // tags: 'tags.yml'
          // or
          tags: {
            hello: {
              label: 'Hello',
              description: {
                message: 'Hello',
                id: 'Hello',
              },
              color: '#FF0000',
            },
            docusaurus: {
              label: 'Docusaurus',
              description: {
                message: 'Docusaurus',
                id: 'Docusaurus',
              },
              color: '#00FF00',
            },
          },
        },
      },
    ],
  ],
};

Plugin options

If you are using a standalone plugin, provide options directly to the plugin:

docusaurus.config.js

module.exports = {
  plugins: [
    [
      '@docusaurus/plugin-content-showcase',
      {
        path: 'showcase',
        routeBasePath: 'showcase',
        include: ['**/*.{yml,yaml}'],
        exclude: [
          '**/_*.{js,jsx,ts,tsx,md,mdx}',
          '**/_*/**',
          '**/*.test.{js,jsx,ts,tsx}',
          '**/__tests__/**',
        ],
        // tags: 'tags.yml'
        // or
        tags: {
          hello: {
            label: 'Hello',
            description: {
              message: 'Hello',
              id: 'Hello',
            },
            color: '#FF0000',
          },
          docusaurus: {
            label: 'Docusaurus',
            description: {
              message: 'Docusaurus',
              id: 'Docusaurus',
            },
            color: '#00FF00',
          },
        },
      },
    ],
  ],
};

Markdown front matter

Markdown documents can use the following Markdown front matter metadata fields, enclosed by a line --- on either side.

Accepted fields:

Name	Type	Default	Description
title	string	undefined	Title of the showcase item.
description	string	undefined	Description on the showcase item.
preview	string | null	undefined	Image preview of the showcase item, either an url or link to a file
website	string	undefined
source	string | null	undefined	Link of the showcase item's source code
tags	string[]	undefined	⚠️ Prefer using authors. A description of the author.

Example:

---
title: Dyte
description: The most developer friendly live video SDK
preview: ./showcase/dyte.png
website: https://docs.dyte.io
source: https://github.com/dyte-in/docs
tags:
  - favorite
  - product
  - design
  - versioning
  - large
  - opensource
---

A Markdown blog post

i18n

Read the i18n introduction first.

Translation files location

• Base path: website/i18n/[locale]/docusaurus-plugin-content-showcase
• Multi-instance path: website/i18n/[locale]/docusaurus-plugin-content-showcase-[pluginId]
• JSON files: extracted with docusaurus write-translations
• Markdown files: website/i18n/[locale]/docusaurus-plugin-content-showcase

Example file-system structure

website/i18n/[locale]/docusaurus-plugin-content-showcase
│
│ # translations for website/blog
├── authors.yml
├── first-blog-post.md
├── second-blog-post.md
│
│ # translations for the plugin options that will be rendered
└── options.json