Slidevのテンプレートリポジトリについて
3K Views
December 09, 23
スライド概要
Slidevの快適な執筆環境をテンプレートリポジトリとして公開しました
関連スライド
各ページのテキスト
のテンプレートリポジト リについて Slidev Dec 3rd, 2023. @ v0.0.3 Press Space for next page
自己紹介 （かつみ）と申します。 katzumi 以下のアカウントで活動しています。 katzchum k2tzumi katzumi
？ What is Slidev Markdown 形式のフォーマットを書くといい感じにスライドが出来ます！ 収録機能があり、素振りにも最適。 オフィシャルページはこちら https://sli.dev/
いままで Slidevで作ったスライド 用のちょっとしたスライドから、技術カンファレンスのスライドまで LT https://www.docswell.com/user/katzumi
いっぱい作った 書き味は大変良くスラスラ書ける
いっぱい作った 書き味は大変良くスラスラ書ける もっと便利に使いたい！
Motivation スライドを最速で量産するのに、執筆〜公開までの一連のプロセスを改善したい 素振り・本番・公開後それぞれのバージョンをいい感じに管理したい スライド共有サイト以外でスライドを自前公開をしたい Google Analytics でアクセスログを見られるように SNS へ共有する際に OGP を使っていい感じに 最新バージョンが勝手 よく使う slidev のコマンドをまとめておきたい typo とかはなるべくなくしたい 自作アドオンがデフォルトで有効にしたい よく使う CSS とかも管理したい 上記の執筆環境を環境依存せずにすぐ立ち上げたい
用のテンプレートリポジトリ作りました Slidev https://github.com/k2tzumi/slidev-boilerplate
機能紹介 boilerplate 使い方にも触れます
によるバージョン管理 tagpr 素振り・本番・公開後それぞれにバージョンを付けるようにします tagpr を GitHub Actions のワークフローに組み込んでバージョン管理しています。 tagpr の説明については以下の記事を参照 リリース用のpull requestを自動作成し、マージされたら自動でタグを打つtagpr スライド自体にもバージョンを埋め込んでいて、バージョンが上がると連動して更新されます。
によるバージョン管理 tagpr 動作イメージ リリース用 PR リリースノート自動生成 https://github.com/k2tzumi/slidev-boilerplate/pull/4 https://github.com/k2tzumi/slidevboilerplate/releases/tag/v0.0.2
へ自動 GitHub Pages Publish スライド共有サイトを使わず、自前でスライドをホスティングできる！ SlideShare の広告が大変なことになっているので、スライドを自前で配信させたかったので GiHub Pages へ 掲載するようにしました。 tagpr によるバージョン管理と連動して、リリース用の PR がマージされると自動で Publish されるようにな っています。 実際に出来上がった内容はこちら https://k2tzumi.github.io/slidev-boilerplate その他にも に対応して Google Analytics によるアクセス解析ができるようになっています OGP タグ対応でスライドのサムネを付きで SNS へ共有できます Google Tag Manager
よく使うコマンドは Makefileから呼び出し コマンドは優秀なタスクランチャー make slidev の操作するコマンドをすぐ忘れてしまうので make コマンドを叩けばわかるようにしました。 $ make build clean Build slide Delete slide dev Run dev server install lint Install packages Run textlint pdf Export PDF publish Publish slide upgrade Upgrades package.json
テクニカルライティング用の Linter導入 の達人を回避する為に機械でチェックさせる typo $ make lint npx textlint --cache slides.md /Users/katsumi/workspace/about-slidev-boilerplate/slides.md 142:31 error 143:26 error " " ら抜き言葉を使用しています。 ja-technical-w 一文に二回以上利用されている助詞 に がみつかりました。 次の助詞が連続しているため、文を読みにくくしています。 - "に" - "に" 同じ助詞を連続して利用しない、文の中で順番を入れ替える、文を分割するなどを検討してください。 ja-technical-writing/no-doubled-joshi 207:9 error 【dict5】 "操作を行う"は冗長な表現です。"操作する"など簡潔な表現にすると文章が明瞭になります。 解説: https://github.com/textlint-ja/textlint-rule-ja-no-redundant-expression#dict5 ja-technical-writing/ja-no-redundant-ex ✖ 3 problems (3 errors, 0 warnings) make: *** [.textlintcache] Error 1
テクニカルライティング用の Linter導入 上でレビューコメントがされます PR https://github.com/k2tzumi/about-slidev-boilerplate/pull/1#pullrequestreview-1761146122
コードのアドオンを導入済み QR QR コードでページ誘導するのは効果的 <QRCode width="180" height="180" value="https://twitter.com/katzchum" color="4329B9" image="Logo_of_X.svg" /> 👆これだけで、👇こう表示されます 以下のライブラリを公開中 https://www.npmjs.com/package/@katzumi/slidev-addon-qrcode
は外部ファイル化しておく のファイルに を付け加える CSS style.css “ 引用っぽいの 付箋っぽいの CSS
対応 Devcontainer 全てはクラウド環境に nodejs 環境がローカルになくてもボタン一発で CodeSpace 上に環境が構築されます。 出先で軽く修正。なんならそのままプレゼンも可能です。
GitHub Actions の設定 方法について いくつかの権限及び設定が必要にります
権限追加 GitHub Actions Workflow 権限に書き込み＆PR 作成を追加 https://github.com/{owner}/{repository}/settings/actions
デプロイ設定 GitHub Pages GitHub Pages のソースを決める https://github.com/{owner}/{repository}/settings/pages
環境設定のデプロイブランチ設定 GitHub Pages https://github.com/{owner}/{repository}/settings/environments github-pages をクリック `tagpr-from-* ` をブランチ追加
シークレット設定（オプション） 連携のシークレット追加 Google tag manager(Google Analytics) https://github.com/{owner}/{repository}/settings/secrets/actions/new Repository secrets を追加 `GA_TRACKING_ID ` に google タグ ID を設定
Special thanks Slidev tagpr textlint Reviewdog playwright qrcode-vue3 ！
F in .