slidev-theme-watabegg 1.2.0 → 1.2.1

package/README.ja.md

@@ -1,6 +1,6 @@
 # slidev-theme-watabegg
 
-`slidev-theme-watabegg`（バージョン 1.2.0）は、研究発表や進捗報告での利用を想定した Slidev 向けの個人用テーマです。Vue 3 と TypeScript で開発されており、MIT ライセンスで公開されています。
+`slidev-theme-watabegg`（バージョン 1.2.1）は、研究発表や進捗報告での利用を想定した Slidev 向けの個人用テーマです。Vue 3 と TypeScript で開発されており、MIT ライセンスで公開されています。
 
 発表資料としての読みやすさを考慮し、日本語フォントには「M PLUS 2」、等幅フォントには「Fira Code」を採用しています。白を基調としたスライドに、5 色（red、yellow、green、blue、purple）のアクセントカラーを組み合わせて利用できます。カラーの初期値は green、デモ資料では blue を使用しています。コードハイライトには Shiki の `vitesse-light` および `vitesse-dark` を適用します。
 
@@ -108,7 +108,7 @@ themeConfig:
 - **文字サイズ**: アジェンダ項目の文字サイズは標準（research）で 30px、`themeConfig.watabegg.density: comfortable` 指定時は 36px です。
 - **バッジ**: 丸型のテーマバッジ内に白文字で番号を表示します。フォントは本文と同じ M PLUS 2 の等幅数字（tabular nums）を用い、直径は標準で 44px、comfortable で 48px です。桁数が多い数字には枠内に収まるフォントサイズが自動適用されます。
 - **余白**: アウトライン領域の余白はコンテンツ領域に対して上部 12px、左右 24px です。項目間の間隔は 24px、数字バッジとテキストの間隔は 18px です。
-- **配色と表示要素**: 選択中の項目を含め、タイトルにはテーマ色を使用せず本文テキスト色を維持します。アジェンダやセクションにサブタイトルは表示されません。セクションスライドは白背景に同デザインの大きめの丸型バッジとテーマ色の下線が表示され、波形装飾はありません。本文の配置は任意です。
+- **配色と表示要素**: 選択中の項目を含め、タイトルにはテーマ色を使用せず本文テキスト色を維持します。アジェンダやセクションにサブタイトルは表示されません。セクションスライドは白背景に同デザインの大きめの丸型バッジが表示され、波形装飾はありません。本文の配置は任意です。
 
 ### アウトラインの生成方式
 
@@ -226,10 +226,10 @@ flowchart LR
 
 #### 仕様と動作
 
-- **画像数**: `images` プロパティに `src` と `alt` を持つオブジェクトの配列を渡します。指定できる画像数は **2枚から4枚** に限られます。
-- **配置と寸法**: 画像は横一列に並びます。各画像は正方形の枠内に収められ、CSS の `object-fit: contain` によって元のアスペクト比を維持したまま表示されます。元の画像が正方形でなくてもトリミング（切り抜き）は行われません。
-- **自動サイズ計算**: コンポーネント全体の初期最大高さは 380 論理ピクセル（上下の補足文やキャプションを含む）です。画像の各辺の長さは、利用可能な高さと等分割された幅のうち、小さい方の値に合わせて自動的に決定されます。さらにサイズを抑えたい場合は、`height` プロパティで任意の高さを指定できます。
-- **補足文とキャプション**: 画像の上下に2〜3行程度のテキストを配置できるよう、`#before` スロットと `#after` スロットを用意しています（段落 `<p>` と改行 `<br>` を使用）。全体の共通キャプションは `caption` プロパティで指定できるほか、インライン引用などを埋め込みたい場合は `#caption` スロットを利用できます。
+- `images` には `src` と `alt` を持つオブジェクトの配列を指定します。指定できる枚数は従来の2〜4枚から1〜4枚へ拡張されました。1枚のときは利用できる横幅と高さ全体を使った長方形の表示枠に収め、2〜4枚のときは従来どおり横一列に並べて各画像を同じサイズの正方形枠に収めます。いずれも `object-fit: contain` により、縦横比を保ち切り抜かずに表示します。
+- コンポーネントの最大高さは、上下の補足文やキャプションを含めて既定で380論理ピクセルであり、`height` でさらに制限できます。前後の本文や参考文献が占める領域に応じて利用できる高さは減少し、2〜4枚表示時の正方形の1辺は、利用できる高さと等分割した横幅のうち小さい方に決まります。
+- `#before` および `#after` スロットを使用すると、画像の上下に2〜3行程度の補足文を配置できます。文章には `<p>` と `<br>` を使用します。
+- `caption` プロパティには共通キャプションを設定できます。プロパティの代わりに `#caption` スロットを使用すると、`Cite` などの引用要素を埋め込めます。
 
 標準的なスライドレイアウトでの使用を推奨します。前後の本文やキャプション、参考文献の分量が多いと画像の表示領域が狭くなります。要素を過密に配置すると視認性が損なわれる恐れがあるため、余白に余裕を持たせて構成してください。
 
@@ -252,6 +252,16 @@ flowchart LR
 </FigureGrid>
 ```
 
+1枚の図にキャプションを付ける場合も、同じコンポーネントを使います。
+
+```html
+<FigureGrid
+  :images="[{ src: '/plots/a.png', alt: '条件Aの測定結果' }]"
+  caption="図1: 条件Aの測定結果"
+  :height="340"
+/>
+```
+
 
 ### SmallText
 

package/README.md

@@ -104,7 +104,7 @@ Items may be strings or objects with a `title`. Section slides match manual agen
 
 `agendaActive` selects an item by its number. When omitted, an agenda after a section automatically emphasizes that section in bold. All item titles keep the body text color. `agendaActive: 0` disables emphasis.
 
-Agenda text is 30px (36px in `comfortable`). All number badges are theme-colored circles with white numbers in M PLUS 2 using tabular numerals. Longer numbers shrink to fit the circle. The outline is inset from the heading, with consistent gaps between chapters. Section slides use a white background, the same numbered badge at a larger size, and a theme-colored underline. Neither layout displays a subtitle. Both accept optional body content.
+Agenda text is 30px (36px in `comfortable`). All number badges are theme-colored circles with white numbers in M PLUS 2 using tabular numerals. Longer numbers shrink to fit the circle. The outline is inset from the heading, with consistent gaps between chapters. Section slides use a white background and the same numbered badge at a larger size. Neither layout displays a subtitle. Both accept optional body content.
 
 The shared outline follows the [USTC theme's section-derived agenda](https://github.com/luocfprime/slidev-theme-ustc/blob/main/utils/sectionModel.ts); no additional theme dependency is required.
 
@@ -149,7 +149,7 @@ Slidev's built-in layouts such as `default` and `center` remain available. Color
 
 ### FigureGrid
 
-Display **2–4 images** in a single row with one shared caption. Each image occupies a square box and preserves its aspect ratio without cropping. The default maximum height of 380 logical pixels includes the caption and before/after text; image sizes adapt to the remaining height and row width.
+FigureGrid supports 1–4 images in a row with one shared caption (previously 2–4). A single image fits the available full width and height, whereas 2–4 images each fit equal square boxes. Image sizes adapt to the available row width and remaining height within a default maximum total height of 380 logical pixels (including the caption and before/after text), preserving their aspect ratio without cropping (`object-fit: contain`).
 
 ```vue
 <FigureGrid
@@ -163,6 +163,16 @@ Display **2–4 images** in a single row with one shared caption. Each image occ
 
 The `before` and `after` slots allow 2–3 lines each. The `caption` slot replaces the caption prop and can contain `Cite`. Optional `height` further limits the total size. Use normal flow layouts; long text and references leave less space for images.
 
+For a single figure with a caption:
+
+```vue
+<FigureGrid
+  :images="[{ src: '/plots/a.png', alt: 'Result A' }]"
+  caption="Figure 1. Result A"
+  :height="340"
+/>
+```
+
 ### SmallText
 
 Supplementary text at 16px (`research`) or 18px (`comfortable`). It renders a block by default; `inline` renders a span.

package/components/FigureGrid.vue

@@ -15,7 +15,7 @@ const root = ref<HTMLElement | null>(null)
 const plots = ref<HTMLElement | null>(null)
 const height = useAvailableHeight(root, computed(() => props.height))
 const side = ref(0)
-const validCount = computed(() => props.images.length >= 2 && props.images.length <= 4)
+const validCount = computed(() => props.images.length >= 1 && props.images.length <= 4)
 let resize: ResizeObserver | undefined
 
 function measure() {
@@ -35,11 +35,16 @@ onUnmounted(() => resize?.disconnect())
 </script>
 
 <template>
-  <div v-if="!validCount" class="figure-error">FigureGridには画像を2〜4枚指定してください。</div>
+  <div v-if="!validCount" class="figure-error">FigureGridには画像を1〜4枚指定してください。</div>
   <div v-else ref="root" class="figure-grid" :style="{ height: `${height}px` }">
     <div v-if="$slots.before" class="figure-copy"><slot name="before" /></div>
     <figure class="figure-group">
-      <div ref="plots" class="figure-images" :style="{ '--figure-side': `${side}px` }">
+      <div
+        ref="plots"
+        class="figure-images"
+        :class="{ 'figure-single': images.length === 1 }"
+        :style="{ '--figure-side': `${side}px` }"
+      >
         <img
           v-for="(image, index) in images"
           :key="index"
@@ -105,4 +110,9 @@ onUnmounted(() => resize?.disconnect())
   line-height: 1.35;
   text-align: center;
 }
+
+.figure-single .figure-image {
+  width: 100%;
+  height: 100%;
+}
 </style>

package/layouts/section.vue

@@ -41,7 +41,6 @@ const title = computed(() => $frontmatter.title || slide.value?.title || item.va
   align-items: center;
   gap: 24px;
   padding-bottom: 24px;
-  border-bottom: 2px solid var(--slidev-theme-primary);
   font-size: var(--watabegg-section-size);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-watabegg",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "type": "module",
   "packageManager": "pnpm@11.1.3",
   "author": "watabegg",