PR #8のデザイン変更をSCSSで再実装

.github/github-script.js

@@ -12,6 +12,7 @@ module.exports = async ({ github, context }) => {
 <img src="https://github.com/${context.repo.owner}/${context.repo.repo}/raw/${context.sha}/example/example.002.png" height="360px" />
 <img src="https://github.com/${context.repo.owner}/${context.repo.repo}/raw/${context.sha}/example/example.003.png" height="360px" />
 <img src="https://github.com/${context.repo.owner}/${context.repo.repo}/raw/${context.sha}/example/example.004.png" height="360px" />
+<img src="https://github.com/${context.repo.owner}/${context.repo.repo}/raw/${context.sha}/example/example.005.png" height="360px" />
 
 </details>
     `,

.github/workflows/actionlint.yml

@@ -15,7 +15,7 @@ jobs:
   actionlint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Download actionlint
         id: get_actionlint
         run: bash <(curl https://raw.githubusercontent.com/rhysd/actionlint/main/scripts/download-actionlint.bash)

.github/workflows/test.yml

@@ -23,11 +23,14 @@ jobs:
 
     steps:
       - name: リポジトリのチェックアウト
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: sassコマンドのインストール
         run: npm install -g sass
 
+      - name: ImageMagickのインストール
+        run: sudo apt-get install -y imagemagick
+
       - name: コミットに含まれるスライド画像をバックアップ
         run: mkdir example-backup && mv example/example.0* example-backup
 
@@ -64,17 +67,25 @@ jobs:
             identify -format "%[mean]" -)"
           (( $(echo "0.001 > $result" |bc -l) ))
 
+          result="$(composite -compose difference \
+            example/example.005.png \
+            example-backup/example.005.png \
+            - | \
+            identify -format "%[mean]" -)"
+          (( $(echo "0.001 > $result" |bc -l) ))
+
       - name: 検証しやすいようにビルド結果をartifactへ保存
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         if: ${{ always() }}
         with:
           name: example
           path: example
           if-no-files-found: error
 
       - name: 結果画像をコミットへ貼り付け
-        uses: actions/github-script@v5
+        uses: actions/github-script@v7
         if: github.event_name == 'pull_request'
+        continue-on-error: true
         with:
           script: |
             const script = require('./.github/github-script.js')

CLAUDE.md

@@ -0,0 +1,36 @@
+## プロジェクト概要
+
+Speee社用のMarpプレゼンテーションテーマ。SCSSで定義されたテーマをCSSにコンパイルし、Marp CLIまたはVS Code Marp拡張機能でMarkdownプレゼンテーションを描画する。
+
+## ビルドコマンド
+
+```bash
+# 初期セットアップ（sassのグローバルインストール、gitフックの設定）
+make init
+
+# SCSSをCSSにコンパイルし、サンプルPNG画像を生成
+make
+
+# SCSS変更時に自動コンパイル（ウォッチモード）
+make csswatch
+
+# CSSやMarkdown変更時にサンプル画像を自動再生成（csswatchと併用）
+make marpwatch
+
+# 生成ファイルを削除
+make clean
+```
+
+## アーキテクチャ
+
+- `marp-themes/speee.scss` - テーマのソース（SCSS）、`speee.css`にコンパイルされる
+- `example/example.md` - テストとプレビュー用のサンプルプレゼンテーション
+- `example/example.*.png` - 生成されたスライド画像（コミット必須、CIでの画像差分テストに使用）
+
+pre-commitフックで`make`が実行され、生成ファイルが最新であることを確認する。CIでは生成画像とコミット済み画像を比較し、視覚的なリグレッションを検出する。
+
+## 設計方針
+
+- **Google Fontsのみ使用**: ポータビリティのためウェブフォント（Lato、Noto Sans JP、Roboto Mono）を使用
+- **2種類のスライドクラス**: 通常スライド（白背景）と`lead`クラス（セクションタイトル用のダークグラデーション背景）
+- **Speeeロゴ**: GitHub raw URL経由で埋め込み。Speee社員以外はライセンス規定によりロゴ画像の削除が必要

example/example.md

@@ -6,36 +6,46 @@ theme: speee
 ---
 
 <!--
-_class: lead
-_paginate: false
+_class: cover
 -->
 
-# タイトル
 
-サブタイトルなど
+# Marpスライドテンプレート
+
+
+2021/11/01
+
+
 
 ---
 
-# h1 要素
+
+# 見出し要素の文字サイズ見本
 
 ## h2 要素
 
 ### h3 要素
 
 #### h4 要素
 
-通常の文章、
-改行 1 回した直後の文章。
-
-改行 2 回した直後の文章(次のパラグラフ)
+##### h5 要素
+###### h6 要素
 
 ---
 
 <!--
 _class: lead
 -->
 
-## セクション切り替えなど
+# - セクション切り替えなど
+---
+# 箇条書きイメージ
+- 箇条書き
+    - あああ
+1. 番号付きリスト2
+    - あああ
+2. 番号付きリスト3
+    - eeee
 
 ---
 
@@ -53,6 +63,5 @@ _class: lead
 
 ```sh
 #!/bin/bash
-
 echo 'hello world!'
 ```