Components

Alerts

● Available A GitHub alert becomes a callout with a localized title. Five types: note, tip, important, warning and caution. Screen readers announce each one as a note (role="note").

> [!NOTE]
> Useful information that users should know, even when skimming.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

Result

Note

Useful information that users should know, even when skimming.

Tip

Helpful advice for doing things better or more easily.

Important

Key information users need to know to achieve their goal.

Warning

Urgent info that needs immediate user attention to avoid problems.

Caution

Advises about risks or negative outcomes of certain actions.

Alerts with content

An alert can hold lists and code. Leave nothing after the marker on its line.

> [!TIP]
> Before you publish:
>
> - run `modootoday-check`
> - preview with `bundle exec jekyll serve`

Result

Tip

Before you publish:

• run modootoday-check
• preview with bundle exec jekyll serve

Badges

● Available Code spans with a known prefix become badges: status (available, partial, planned) and tag. The status symbol is hidden from screen readers, and the label is read instead.

`status:available` `status:partial` `status:planned`

`tag:beta`

Result

● Available ◐ Partial ○ Planned

beta

Keyboard keys

● Available A code span that starts with kbd and a colon becomes keyboard keys. Join keys with + and no spaces.

Open search with `kbd:Ctrl+K`, or press `kbd:/`.

Result

Open search with Ctrl+K, or press /.

Figure

● Available A paragraph with only an image, followed by a paragraph with only emphasis, becomes a figure with a caption. Alt text is required.

![A Markdown source on the left becomes a styled page on the right](../assets/images/sample.svg)

*Markdown on the left, the rendered page on the right.*

Result

Tables

● Available GFM tables scroll sideways on small screens instead of overflowing the page.

| Key | Default | Description |
|---|---|---|
| `color_scheme` | `auto` | follow the OS or force light or dark |
| `badges` | `true` | turn status code spans into badges |

Result

Code blocks

● Available Fenced code blocks are highlighted and get a copy button at the end of the first line. A long line scrolls, and the block can be reached with the keyboard.

```ruby
Jekyll::Hooks.register :site, :post_write do |site|
  puts "Built #{site.pages.size} pages"
end
```

Result

Jekyll::Hooks.register :site, :post_write do |site|
  puts "Built #{site.pages.size} pages"
end

Code titles and diffs

● Available A line holding only a code span that starts with file and a colon, right before a fenced block, becomes the block’s title bar. A diff block tints added and removed lines and keeps the plus and minus signs.

`file:_config.yml`

```yaml
theme: jekyll-theme-modootoday
```

```diff
- remote_theme: old/theme
+ theme: jekyll-theme-modootoday
```

Result

theme: jekyll-theme-modootoday

- remote_theme: old/theme
+ theme: jekyll-theme-modootoday

Progress

● Available A code span that starts with progress and a colon, followed by a whole number from 0 to 100, becomes a labelled progress bar with the value as text.

Translation `progress:60`

Result

Translation 60% 60%

Embeds

● Available A paragraph holding only a code span that starts with embed and a colon, then an https URL and an optional title, becomes a lazy 16:9 frame that keeps its space while it loads.

`embed:https://modootoday.github.io/jekyll-theme-modootoday/assets/images/sample.svg Sample page drawing`

Result

Loading and skeletons

● Available Code spans that start with loading or skeleton and a colon become a spinner, a thin top bar or a placeholder (text, card, image, avatar, row). Each one has role="status" and a Loading label for screen readers, and the motion stops when the reader asks for reduced motion. Their styles are an optional sheet that only pages using them load.

`loading:spinner`

`skeleton:avatar`
`skeleton:text`
`skeleton:card`

Result

Loading…

Loading… Loading… Loading…

Lists

● Available With modootoday.lists in _config.yml, plain sections and pages get two list styles. link_chips: true turns a list whose every item is one link into a row of chips; titled_items: true gives an item that starts with a bold title and a colon its own title and separator. hero: {checks: true} turns the first list in the hero into a row of check marks, as above. Lists in component sections keep their own style.

• Install
• Configuration
• Accessibility

Items with a title:

• Chips: a list of links only
• Titled items: a bold title, a colon, then the text

Navigation

● Available The header menu comes from _data/nav/main.yml. An entry with items: becomes a dropdown group on wide screens, and narrow screens get a menu button. Esc closes an open menu. The result is the header of this page.

- {title: Install, url: /install/}
- {title: Components, url: /components/}
- title: More
  items:
    - {title: Public API, url: /api/}

Language switcher

● Available With languages: and language_switcher: header, the header gets a globe button that opens a list of languages. It stays the same width however many languages you add. Each language is named in its own language, and the current one has aria-current. Esc closes the list. The result is the globe in the header of this page.

modootoday:
  languages: [en, ko, ja]
  language_switcher: header

Theme toggle

● Available The header button switches between light and dark and remembers the choice. Use color_scheme to fix one scheme. The result is the button in the header of this page.

modootoday:
  color_scheme: auto   # auto | light | dark

Icons and logo

● Available The theme draws its icons (globe, sun and moon, search, alert types, copy, edit, previous and next, external link, breadcrumb arrows) as inline SVG in currentColor, so they follow the light or dark scheme and need no extra requests. Icons are hidden from screen readers; each icon-only button has its own name. Arrows that point a direction flip in right-to-left pages. Set logo to put the modootoday mark (or your own image) before the site title, and favicon to add the matching browser icons. The result is the header and footer of this page.

modootoday:
  logo: brand        # brand | /assets/img/logo.svg
  favicon: brand     # brand | /favicon.ico

Search

● Available Client-side search over a search.json file, in the header (role="search"). Press Ctrl+K or / to focus it. Add a search.json file at the site root to turn it on: copy the one this site uses. The result is the search box in the header of this page.

Breadcrumb and table of contents

● Available Doc pages get a breadcrumb from the URL, and a table of contents from the ## and ### headings: at the side on wide screens and in a folding box on narrow ones. Both are added by the layout, so there is no source to write. Leave out breadcrumb or toc from components to turn them off. The result is at the top and side of this page.

modootoday:
  components: [callout, badge, hero, cta, card, tabs, code-copy, nav, pagination, theme-toggle]

Previous and next

● Available Pages listed in the nav get previous and next links in nav order. Set pagination: false in front matter to hide them. The result is at the bottom of this page.

---
title: Components
pagination: false
---

Posts and archives

● Available layout: post shows the date, author and tags (p.mt-post-meta).

---
layout: post
title: Hello
date: 2026-10-30
author: Won
tags: [release]
---

Status legend