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

Usage Tips

1. Select text in the paragraph editor, then click the hover button to wrap it
2. Replace the placeholder ID with the actual ID from the database
3. Works inline with other markdown formatting

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
---