我试图在GitHub Pages上整理编程竞赛的解说图片，形成故事书
首先
当我在解决AtCoder竞赛的问题时，偶尔会想要画解题图。我曾在2023年11月4日画了ABC327-F的解题图，并发布到X（Twitter）上。
有时候，在制作完图像之后，还会配上解说和代码示例，来完成一篇在Qiita上的文章。有时候，不愿意花费那么多时间，只满足于制作图像本身。这样一来，就不再会有人注意到这些图像了。
考虑到不想写内容，而只想简单整理图片的方式，我决定尝试使用流行的UI样本集Storybook作为目录。
- Storybook: Frontend workshop for UI development
这个感觉相当不错。可以在树形结构中切换图像，并且可以轻松地添加问题和答案的链接。
我不使用storybook作为UI目录或测试框架。虽然感觉我在为想要做的事情准备过于繁琐的工具，但我将把它尝试并写成一篇文章。
示威活动
-
- ツリーで、問題に対応するページを選べます
-
- 各ページを開くと、以下を見られます
解説画像: 1600 * 900px, 1枚以上
AtCoder 問題文へのリンク
AtCoder 解答例へのリンク、または Qiita 過去に投稿した解説記事へのリンク
解説画像をクリックすると拡大表示できます
本文所讨论的主题
-
- Storybook 7 + React 18 + TypeScript + Vite でプロジェクトを作成する
-
- Storybook でスライド画像を表示する
個々のスライドに対応する Docs (MDX) を作成する
スライドを共通で扱う UI コンポーネントを作成し、使用する
Storybook でその他調整
ツリー表示順
Open Graph protocol 設定
GitHub Pages に GitHub Actions でデプロイする
这里是源代码。
- hossy3/atcoder-slides: 競技プログラミングの解法を図示したスライド集
想要追求的受众群体
-
- React 18 + TypeScript が分かる方
- Storybook のプロジェクト作成・公開方法を知りたい方
创建项目
开发环境
提前准备。
Node.js 18
Visual Studio Code – Code Editing. Redefined
GitHub Desktop | Simple collaboration from your desktop
确认故事书的安装方法
故事书 一边盯着公式文档前进。许多库似乎可以通过npm安装(package)来获得。
- Install Storybook
在现有项目的根目录下，使用Storybook CLI以一个简单的命令进行安装。
Storybook 与其这样做，不如将其作为一个附加安装的方式集成到现有项目中。一般来说，这是因为我们首先开发了 UI 组件等内容。例如，当识别到一个 React 项目时，能提供适用于 React 的 Storybook 推荐配置并进行安装，这将是非常方便的。
因此，我们将创建一个临时项目来安装Storybook。在React中创建一个适当的UI组件。
前往此页面内的 “Create React App” 链接页。
确认React的安装方法
- React プロジェクトを始める – React
我进入了React官方网页。
最近，有很多关于在 Next.js 框架中安装 React 的方法被介绍出来。过去，我们只能选择 create-react-app。但如今时代已经变了。
好吧，那么问题是在哪个框架上安装 React……。这次我们想要做的是为安装 Storybook 框架做准备。说实话，我真的不需要框架，我想要的是最简洁的配置。
在安装方法下方有一个问题是“在没有框架的情况下可以使用 React 吗？”
使用npm获取react和react-dom，并使用类似Vite或Parcel的打包工具来设置自定义构建过程。
听说不太推荐，但是Vite可以做到。点击链接以继续。
快速安装 Vite + React。
-
- Vite | Next Generation Frontend Tooling
- Getting Started | Vite
我通过 Storybook 官方网站、React 官方网站，最后找到了 Vite 官方网站。官网上有写着安装命令。
npm create vite@latest my-app -- --template react-ts
这正是我想要的东西。
运行命令后，react和react-dom都安装了18.2版本。
作为模板，我们选择了我们熟悉的 React + TypeScript 构建方式。还有其他多个模板可供选择。
Vite 和 React 的操作确认
npm run dev
我已确认动作。
这个项目只是为了准备 Storybook。之后将不再使用。尽管如此，我们仍然感到进展顺利。
故事书安装
npx storybook@latest init
这次我们成功地安装了它。恭喜！
故事書的行動驗證
npm run storybook
显示了类似于Storybook中介绍的网站。
在故事书中展示幻灯片图像
项目结构和进行方式
故事书安装过程中创建了以下类型的文件。
.storybook/
main.ts
preview.ts
src/
stories/
Button.stories.ts
Button.tsx
Configure.mdx
Header.stories.ts
Header.tsx
Page.stories.ts
Page.tsx
assets/
*.png
接下来将逐渐更换为解释图像显示用途。
.storybook/
main.ts
preview.ts
src/
stories/
Readme.mdx
Slide.tsx
SlideAbc327d.mdx
SlideAbc327e.mdx
SlideAbc327f.mdx
assets/
abc327-d.png
abc327-e.png
abc327-f.png
制作每个页面的 MDX
- MDX
MDX 是对 Markdown 进行了扩展，使其能够嵌入 React 组件。
我们将使用MDX格式创建页面，可以在React组件中显示图像，并轻松添加附加信息，如链接等。
import { Meta } from "@storybook/blocks";
import { Slide } from "./Slide";
import Png from "./assets/abc327-d.png";
<Meta title="ABC327/ABC327-D" />
<Slide src={Png} layout="fullscreen" label="ABC327 D - Good Tuple Problem" />
- [D \- Good Tuple Problem](https://atcoder.jp/contests/abc327/tasks/abc327_d)
- [提出 \#47233850 \- HHKBプログラミングコンテスト2023\(AtCoder Beginner Contest 327\)](https://atcoder.jp/contests/abc327/submissions/47233850) (Rust)
元素与页面标题相对应。
<幻灯片>我们接下来将开始制作组件。
创建用于图像表示的组件
使用组件进行图片显示
显示下面的 。只能显示出来。
interface SlideProps {
src: string;
label?: string;
}
export const Slide = ({ src, label }: SlideProps) => {
return <img src={src} aria-label={label} />;
};
然而遗憾的是，Storybook 的 MDX 表格的最大宽度被限制在约1000像素。以1600 * 900的尺寸制作的图像将会缩小变形。我们希望能够进行100%宽度显示或等比例显示。
Horizontal 1000px seems to be determined by the style of Storybook itself. By specifying this style externally, the image should be displayed larger. However, it is possible that the method of specifying styles will change with the upgrade of Storybook. I don’t want to rely too much on it.
横向1000像素似乎是由Storybook本身的样式确定的。通过在外部指定此样式，图像应显示得更大。然而，随着Storybook升级，指定样式的方法可能会发生变化。我不想太过依赖它。
使用组件进行图像大小切换。
因此，我们在React组件中实现了可以切换大小的功能。
-
- 画像クリックで「初期サイズ (mode: 0)」「横幅100％ (1)」「等倍 (2)」を切り替えられる
画像のスタイルを position: fixed にすれば、Storybook 右の
