Skip to main content

Configuration reference

Plugin options

OptionTypeRequiredDescription
dataDirstringDirectory containing .yaml data files, relative to the Docusaurus site root.
routeBasePathstringURL path for the showcase page. plugins produces a page at /plugins.
tagsRecord<string, TagDef>Tag definitions. At least one tag is required.
statusesRecord<string, StatusDef>Status definitions. Omit or pass {} to hide the status filter UI.
idstringPlugin instance ID - required when registering the plugin more than once in docusaurus.config.ts.
favouriteTagstringTag key whose items are surfaced in a highlighted "Our favourites" section above the main grid.
schemaPathstringAbsolute path to a JSON Schema Draft 2020-12 file. Items that fail validation are skipped with a build-time warning.
pageTitlestringPage <title> and visible heading. Defaults to "Showcase".
pageDescriptionstringSub-heading shown below the page title. Defaults to "A community showcase.".
submitUrlstringURL for the "Add an item" call-to-action button. Opens in a new tab. Hidden when both this and submitFormPath are omitted. Ignored when submitFormPath is also set.
submitLabelstringCustom label for the "Add an item" button. Defaults to "Add an item".
submitFormPathstringPath segment for a built-in submission form. When set, the plugin registers a route at /{routeBasePath}/{submitFormPath} rendering a live form with a card preview and copyable YAML output. The "Add an item" button links to this page instead of submitUrl.
submitGithubRepostringGitHub repository in owner/repo format. When set alongside submitFormPath, the form shows a Copy YAML & open GitHub button that copies the generated YAML to the clipboard and opens github.com/{repo}/new/main?filename={dataDir}/{id}.yaml in a new tab, guiding the contributor through a pull-request submission.
schemaUrlstringPublic URL of the JSON Schema for this showcase's data files. Used as the # yaml-language-server: $schema= header in YAML generated by the submission form. The built-in presets set this automatically to a jsDelivr CDN URL.
screenshotUrlstringURL template used to auto-generate a preview image for items that have no preview field. Use {url} for the percent-encoded site URL or {rawUrl} for the raw URL. Example: https://screenshot.example.com/{url}/thumb. When omitted, items with no preview render without an image.

If you are using ScreenGrabber as your screenshot service, the following screenshotUrl value is recommended:

https://screengrabber.example.wales/{url}/opengraph/_width:640?format=jpeg
  • opengraph — captures at a 1200×630 viewport, which renders the desktop layout of most sites and produces a landscape image that suits the card's aspect ratio.
  • _width:640 — resizes the output to 640px wide, retina-crisp at typical card display widths (~350px).
  • ?format=jpeg — delivers smaller files than PNG; sufficient quality for site previews.

Replace screengrabber.example.wales with your ScreenGrabber instance hostname.

TagDef

Defines a single tag that items can be assigned and that appears as a filterable chip in the UI.

FieldTypeRequiredDescription
labelstringDisplay name shown on the filter chip and on each card.
descriptionstringTooltip text shown when hovering the filter chip.
colorstringCSS colour for the tag colour dot (hex, rgb, named, etc.).
iconstringLucide icon name rendered beside the tag label.

StatusDef

Defines a single status that an item can be assigned. Statuses are displayed on the card and optionally shown as a filter.

FieldTypeRequiredDescription
labelstringDisplay name shown on the card status row.
descriptionstringDescription of what this status means.
colorstringCSS colour for the status indicator dot.
iconstringLucide icon name rendered beside the status label.

ShowcaseItem fields

These are the standard fields read from each YAML file. Custom fields are passed through as-is and are accessible in swizzled components.

FieldTypeDescription
idstringUnique identifier for the item.
namestringDisplay name shown as the card title.
descriptionstringShort description shown on the card body.
websitestringPrimary URL - linked from the card title.
sourcestring | nullSource code URL - shown as a "source" button.
previewstring | nullPreview image URL. Overridden by a co-located image if one exists.
authorstring | nullAuthor name shown on the card.
tagsstring[]Array of tag keys defined in the plugin options.
statusstring | nullStatus key defined in the plugin options.
npmPackagesstring[] | null(Plugins preset) npm package names.
minimumVersionstring | null(Plugins preset) Minimum Docusaurus version required.