feat(client): add fragments description to assistant

Author: hiroppy

packages/client/src/components/Assistant.js

@@ -8,6 +8,8 @@ import {
 } from 'react-accessible-accordion';
 import 'react-accessible-accordion/dist/fancy-example.css';
 
+// TODO: add image's width/height description
+
 const outerCss = {
   background: '#f5f5f5',
   fontSize: '16px',
@@ -147,6 +149,10 @@ export const Assistant = () => (
                   title: 'Closing div Tag',
                   content: <code>block-end</code>,
                 },
+                {
+                  title: 'displaying items as steps(fragments)',
+                  content: <code>fragments-start / fragments-end</code>,
+                },
                 {
                   title: 'Adding Title to Sidebar',
                   content: <code>{`section-title: hey!`}</code>,

samples/intro/slides/04-slide.md

@@ -97,6 +97,32 @@ The class name of `<!-- block-start -->` isn't mandatory.
 
 ---
 
+## Fragments
+
+```md
+<!-- fragments-start -->
+
+✍
+
+🤟
+
+👍
+
+<!-- fragments-end -->
+```
+
+<!-- fragments-start -->
+
+✍️
+
+🤟
+
+👍
+
+<!-- fragments-end -->
+
+---
+
 ## Setting Background
 
 <!-- background: '../assets/background.jpeg' -->

samples/intro/slides/07-presenter-mode.mdx

@@ -57,12 +57,12 @@ Timeline and the recording voice are optional but these features will help you t
 
 The timeline can be time travel.
 
-<img src="../../../site/docs/assets/presenter-mode-timeline.png" width="70%" alt="timeline" />
+![timeline](../../../site/docs/assets/presenter-mode-timeline.png?w=60%)
 
 ---
 
 ## Drawing (experimental)
 
 When you write characters on the host side, it will be reflected on the client side in real time.
 
-<img src="../../../site/docs/assets/drawing.png" width="70%" alt="drawing" />
+![drawing](../../../site/docs/assets/drawing.png?w=70%)