Markdownでスライドを作成できる Slidev をさくっと始めるためのテンプレート

はじめに

Slidevをさくっとはじめるためのテンプレート

https://github.com/ppluuums-jp/slidev-template

※本テンプレートは便利なコンポーネントが含まれているわけではありません。あくまで Slidevを始めるための環境を整えたものです。

テンプレート

テンプレートの中身紹介

ディレクトリ構成 (一部省略)

🍤

├── ReAdMe.md
├── components
│   └── Counter.vue
├── package.json
├── pages
│   ├── a
│   │   ├── a.md
│   │   ├── alphabet.md
│   │   ├── b.md
│   │   └── c.md
│   └── b
│       ├── a
│       │   ├── a.md
│       │   ├── alphabet.md
│       │   ├── b.md
│       │   └── c.md
│       ├── alphabet.md
│       ├── b
│       │   ├── a.md
│       │   ├── alphabet.md
│       │   ├── b.md
│       │   └── c.md
│       └── c
│           ├── a.md
│           ├── alphabet.md
│           ├── b.md
│           └── c.md
├── pnpm-lock.yaml
└── slides.md

基本的にSlidevでは、slides.mdが読み込まれる仕様になっているため、普通に作業しているとslides.mdが肥大化して作業しづらくなります。
なので、Multiple Entriesを使ってコンテンツごとにフォルダを分けました。

また、各コンテンツごとに一つのファイルに内容を集約して、最終的にslides.mdがよりすっきりなるようにしました。(TypescriptでいうところのBarrelみたいな)

Git hooks

🍤

format.sh

#!/bin/bash

## Format recursively for .md files
for file in `\find . -name '*.md'`; do
    if [[ $file == *"node_modules"* ]] || [[ $file == *"ReAdMe"* ]]; then
        :
    else
        npm run f $file
    fi
done

slidev format [enrty]でファイル名指定に正規表現を使えなかったため(./pages/**/*.mdとかが使えない)、format.shを使って対象のすべての*.mdファイルにフォーマットが走るようにしました。

Github Actions

🍤

export.yml

name: Export a pdf file
on:
  push:
    branches:
      - main
jobs:
  export-pdf:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: "14"
      - name: Install dependencies
        run: yarn
      - name: Format
        run: yarn f
      - name: Build
        run: yarn b
      - name: Export
        run: yarn e
      - name: Set current datetime
        env:
          TZ: "Europe/London"
        run: echo "CURRENT_DATETIME=$(date +'%Y%m%d')" >> $GITHUB_ENV

      - uses: upload-artifact@v2
        with:
          name: ${{ env.CURRENT_DATETIME }}_slidev
          path: ./slides-export.pdf

upload-artifactを使用して、以下のようにpdfファイル（を圧縮したzipファイル）を出力するようにしました。