Editor Help

Keyboard Shortcuts

Shortcut	Action
Ctrl+S	Export markdown file
Delete	Remove selected block
Ctrl+D	Duplicate selected block

Editor Tips

• Click any block to edit its properties
• Drag blocks to reorder
• Use Split view to see changes live
• Markdown view shows raw output
• Import existing .md files to continue editing
• Export saves to downloads folder

Block Types

Block	Use For
Heading	Section titles (h1-h6)
Paragraph	Body text, supports markdown
Image	Single image with caption
Code	Code snippets with syntax highlighting
Table	Data tables
List	Bullet or numbered lists
Blockquote	Quoted text
Divider	Horizontal separator

Inline Hover Components

The paragraph rich text editor includes buttons to insert hover components that show tooltips when readers hover over them.

SkillHover

Insert an inline skill reference that shows skill details on hover:

<SkillHover id="10071">Skill Name</SkillHover>

• id: The skill ID from the database
• Text between tags: Display text (falls back to skill name if empty)

UmaHover

Insert an inline character reference that shows character details on hover:

<UmaHover cardId="100101">Special Week</UmaHover>

• cardId: The character card ID from the database
• Text between tags: Display text (falls back to character name if empty)

SupportCardHover

Insert an inline support card reference that shows card details on hover:

<SupportCardHover supportCardId="30001">Support Card Name</SupportCardHover>

• supportCardId: The support card ID from the database
• Text between tags: Display text (falls back to card name if empty)

SupportCardStats

Display a support card's stat progression table:

<SupportCardStats supportCardId="30001" />

• supportCardId: The support card ID from the database
• Shows effect values at each level breakpoint
• Highlights unique effect bonuses

DeckShowcase

Display high-res support card decks. Three usage modes:

Single deck:

<DeckShowcase name="Speed Deck" cards="30001 30002 30003 30004 30005 30036" />

Speed Deck

Multiple decks (compact string, pipe-separated):

<DeckShowcase
  decks="Speed: 30001 30002 30003 30004 30005 30036 | Wit: 30010 30054 30068 30001 30019 30036"
  columns="2"
/>

Speed

Wit

Multiple decks (slot-based, most flexible):

<DeckShowcase columns="3">
  <DeckShowcaseItem name="Speed" cards="30001 30002 30003 30004 30005 30036" />
  <DeckShowcaseItem name="Wit" cards="30010 30054 30068 30001 30019 30036" />
  <DeckShowcaseItem name="Balanced" cards="30001 30019 30010 30054 30036 30068" />
</DeckShowcase>

Speed

Wit

Balanced

• cards: Space-separated support card IDs (commas also work)
• name: Optional label shown above the deck
• decks: Pipe-separated deck definitions in format Name: id1 id2 id3 id4 id5 id6
• columns: Number of columns in the grid (defaults to number of decks, max 3)
• size: "small" (25% width), "default" (50% width), "large" (full width)
• Each card links to its detail page and renders with frame, type icon, and rarity badge

Sizes:

Small:

Small

Default:

Default

Large:

Large

ExpandableSection

A collapsible card with a title, up to three images, and a dropdown arrow — same style as banner reviews. Content inside the tags is shown when expanded.

Text only:

<ExpandableSection title="My Section">

Your content here. Supports full markdown.

</ExpandableSection>

With images (left / middle / right — all optional):

<ExpandableSection
  title="My Section"
  leftImage="/img/my-left.webp"
  middleImage="/img/my-middle.webp"
  rightImage="/img/my-right.webp"
>

Your content here.

</ExpandableSection>

Example — text only:

<ExpandableSection title="Example Section" defaultExpanded>

This text is inside the expandable section. You can use **bold**, *italic*, lists, and any other markdown here.

- Bullet one
- Bullet two

</ExpandableSection>

Example Section

This text is inside the expandable section. You can use bold, italic, lists, and any other markdown here.

• Bullet one
• Bullet two

Example — with images:

<ExpandableSection
  title="Example with Images"
  leftImage="/img/banner-reviews/badges/importance-must.webp"
  middleImage="/img/banner-reviews/badges/importance-good.webp"
  rightImage="/img/banner-reviews/badges/importance-skip.webp"
  leftAlt="Must"
  middleAlt="Good"
  rightAlt="Skip"
>

Images appear to the right of the title in the collapsed header.

</ExpandableSection>

Example with Images

Example — custom image size:

<ExpandableSection
  title="Example with Smaller Images"
  leftImage="/img/banner-reviews/badges/importance-must.webp"
  middleImage="/img/banner-reviews/badges/importance-good.webp"
  rightImage="/img/banner-reviews/badges/importance-skip.webp"
  imageSize="36"
>

Images are 36px tall here instead of the default 72px.

</ExpandableSection>

Example with Smaller Images

Image paths use the same root-relative format as all VitePress assets — starting with / from the public/ folder. For example, an image at docs/src/public/img/guides/my-image.webp is referenced as /img/guides/my-image.webp.

Props:

• title (required): Text shown in the collapsed header
• leftImage, middleImage, rightImage: Image URLs shown right of the title (all optional, use any combination)
• leftAlt, middleAlt, rightAlt: Alt text for the corresponding images
• imageSize: Height in pixels for all images (width scales automatically to preserve aspect ratio). Defaults to 72
• defaultExpanded: Set to true to start expanded

Insert via More → Expandable Section in the editor toolbar.

Frontmatter Reference

Article Layout

Pages with author use article layout automatically. Force it without author:

---
articleLayout: true
---

Featured Guides

Display prominently on guides page:

---
featured: true
---

Order

Control the display order on the guides page. Bigger numbers appear first (higher priority):

---
order: 100
---

Guides with order appear before guides without it. Guides without order fall back to date sorting.

Thumbnail

Add a thumbnail image for guide cards on the guides index page:

---
thumbnail: /img/guides/my-thumbnail.png
---

Place images in docs/src/public/img/guides/ and reference them with the path starting from /img/.

Date

Set the publication date (used for sorting, newest first):

---
date: 2026-01-21
---

Guide Categories

Guides can belong to one or more categories. Use an array format:

Category ID	Label
beginner	Beginner
race-mechanics	Race Mechanics
champions-meeting	Champion's Meeting
team-trials	Team Trials
career	Career
gacha	Gacha
research	Research

Single category:

---
category: [beginner]
---

Multiple categories:

---
category: [beginner, race-mechanics]
---

Disable Custom Layouts

---
customLayout: false    # Default VitePress page layout
customHome: false      # Default VitePress home layout
---

Complete Example

---
title: My Guide Title
description: Brief description
category: [beginner, race-mechanics]
tags: [tag1, tag2]
featured: true
author: Your Name
date: 2026-01-21
thumbnail: /img/guides/my-guide.png
---