rsyntaxtree 1.0.6 → 1.0.7

data/docs/documentation.md

@@ -0,0 +1,153 @@
+---
+title: RSyntaxTree
+layout: default
+---
+
+# Documentation
+{:.no_toc}
+
+[English](https://yohasebe.github.io/rsyntaxtree/documentation) | 
+[日本語](https://yohasebe.github.io/rsyntaxtree/documentation_ja)
+
+### Table of Contents
+{:.no_toc}
+
+1. toc
+{:toc}
+
+### Basic Usage
+
+Type your text in the editor area using labeled bracket notation and click the Draw PNG or Draw SVG button. 
+
+Every branch or leaf of the syntax tree must belong to a node. To create a node, place the label text right next to the start bracket. Any number of branches may follow, separated by a whitespace. (Node labels containing whitespaces can be created using the `<>` symbol. For example, `Modal<>Aux` will be rendered as `Modal Aux`).
+
+There are three different types of `connector` drawn between a terminal node and its leaves (`auto`, `bar` and `none`). `auto` draws a triangle for leaves containing one or more whitespaces (= phrases).  If the leaf does not contain any spaces (= single word), a straight bar is drawn instead (unless the leaf contains a `^` symbol at the beginning, which specifies the leaf to be a phrase).
+
+The newline character `\n` can be used within the text of both node lables and leaves.
+
+RSyntaxTree can generate `PNG` and `SVG`, SVG can be used with third party vector graphics software such as Adobe Illustrator, Microsoft Visio, [BOXY SVG](https://boxy-svg.com/), etc. It is very useful if you want to modify the output image.
+
+The `Radical symmetrization` option affects the way branch nodes are drawn. The options `Font style`, `Font size`, `Connector height`, and `Color` need no explanation. By changing the values of these options, you can change the appearance of the resulting image.
+
+### Fonts Used to Generate PNG
+
+Currently, you can choose between the font styles `Noto Sans`, `Noto Serif`, and `WQY Zen Hei`.
+
+- `Noto Sans` can display basic Unicode characters (including Japanese hiragana/katakana/kanji).
+- `Noto Serif` can display basic Unicode characters (including Japanese hiragana/katakana/kanji).
+- `WQY Zen Hei` can display a wide range of Chinese/Japanese/Korean (CJK) characters.
+
+
+### Install Fonts for SVG
+
+SVG images are dependent on the fonts installed locally on your computer. In order for the images to display as intended, the following fonts should be installed beforehand (click on the links). If these fonts are not installed, other available fonts will be used, resulting in a somewhat unbalanced display of the text.
+
+- [Noto Sans](https://fonts.google.com/noto/specimen/Noto+Sans): for latin and other basic Unicode characters in sans serif
+- [Noto Sans JP](https://fonts.google.com/noto/specimen/Noto+Sans+JP): for Japanese characters in sans serif
+- [Noto Serif](https://fonts.google.com/noto/specimen/Noto+Serif): for latin and other basic Unicode characters in serif
+- [Noto Serif JP](https://fonts.google.com/noto/specimen/Noto+Serif+JP): for Japanese characters in serif
+- [WQY Zen Hei](https://packages.ubuntu.com/bionic/fonts/fonts-wqy-zenhei): for CJK characters
+- [OpenMoji](https://openmoji.org/): for emoji characters.
+
+
+### Font Styles, Text Decoration, and Sub/Superscripts
+
+You can apply font styles (italic/bold/bold-italic), text decoration (overline/underline/line-through), subscript/superscript font rendering, and more. These markups can be nested within each other.
+
+#### Font Styles
+
+|Style      |Symbol      |Sample Input       |Output           |
+|-----------|------------|-------------------|-----------------|
+|Italic     |`*TEXT*`    |`*italic*`         |*italic*         |
+|Bold       |`**TEXT**`  |`**bold**`         |**bold**         |
+|Italic+bold|`***TEXT***`|`***italic bold***`|***italic bold***|
+
+#### Text Decoration
+
+|Decoration  |Symbol  |Sample Input   |Output                                                       |
+|------------|--------|---------------|-------------------------------------------------------------|
+|Overline    |`=TEXT=`|`=overline=`   |<span style='text-decoration:overline'>overline</span>       |
+|Underline   |`-TEXT-`|`-underline-`  |<span style='text-decoration:underline'>underline</span>     |
+|Line-through|`~TEXT~`|`~linethrough~`|<span style='text-decoration:line-through'>linethrough</span>|
+
+Note: Currently, overline is displayed in SVG, but not in PNG.
+
+#### Subscript and Superscript
+
+|Sample Input           |Output                      |
+|-----------------------|----------------------------|
+|`normal_subscript_`    |normal<sub>subscript</sub>  |
+|`normal__superscript__`|normal<sup>superscript</sup>|
+
+#### Box and Circle
+
+{% include box_and_circle_table.html %}
+
+#### Whitespace inside Label
+
+|Sample Input|Output  |
+|------------|--------|
+|`X<>Y`      |X&nbsp;Y|
+
+#### Newline
+
+|Sample Input                   |Output              |
+|-------------------------------|--------------------|
+|`str1\`<br />`str2`            |str1<br />str2      |
+|`str1\`<br />`   \`<br />`str2`|str1<br /><br />str2|
+|`str1\ str2`                   |str1<br />str2      |
+|`str1\ \ str2`                 |str1<br /><br />str2|
+|`str1\nstr2`                   |str1<br />str2      |
+|`str1\n\nstr2`                 |str1<br /><br />str2|
+
+#### Horizontal Line
+
+|Sample Input                   |Output                |
+|-------------------------------|----------------------|
+|`str1\`<br />`---\`<br />`str2`|str1<br />——<br />str2|
+|`str1\ ---\ str2`              |str1<br />——<br />str2|
+|`str1\n---\nstr2`              |str1<br />——<br />str2|
+
+Here, `---` represents `-` repeated three times or more consecutively.
+
+### Triangle, Square Brackets, Rectangle
+
+In `auto` mode, the triangle connector shape is applied when the terminal node contains words separated by whitespace. In `bar` and `none` modes, triangles are drawn for the nodes with `^` at the beginning of the leaf text, lie `[NP ^syntax-trees]`.
+
+If a `#` character is placed at the beginning of the leaf text (right after `^` if there is one), the leaf text is enclosed in a paire of square brackets (e.g. `[NP #text]` or `[NP ^#text]`). If `##` is placed at the beginning of the leaf text, a rectangle is drawn instead of brackets.
+
+### Escape Special Characters
+
+The backslash character `\` must be used to print certain characters used in the markup. If you do not have the `\` key on your keyboard, you can also use the yen/yuan character `¥` to escape.
+
+{% include escape_char_table.html %}
+
+**Note:** A newline character `↩️` is treated just as a whitespace. Thus 1) `\n`, 2) `\↩️`, and 3) `\` followed by a whitespace character are all rendered as a newline `↩️` in the resulting image. Note also that a `↩️` or a whitespace repeated more than once is reduced to a single whitespace.
+
+### Draw Paths between Nodes (experimental)
+
+You can draw any number of paths of three different types:
+
+- Non-directional (rendered `- - -`)
+- Directional (rendered `----->`)
+- Bidirectional (rendered `<----->`)
+
+Each path is distinguished by a path ID number. The path ID is specified by putting a plus sign and a number (e.g. `+7`) at the end of the node text. If a greater-than sign is placed between the plus sign and the number (e.g. `+>7`), an arrowhead will appear at the end of the path.
+A node can have any number of path IDs. The same path ID must appear in the text of the *two* nodes between which the path is rendered. The same ID number cannot appear in more than two places.
+
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/lightbox2@2.11.3/src/js/lightbox.js"></script>
+
+---
+
+<script>
+  function copyToClipBoard(id){
+    var copyText =  document.getElementById(id).innerText;
+    document.addEventListener('copy', function(e) {
+        e.clipboardData.setData('text/plain', copyText);
+        e.preventDefault();
+      }, true);
+    document.execCommand('copy');
+    alert('copied');
+  }
+</script>

data/docs/documentation_ja.md

@@ -0,0 +1,166 @@
+---
+title: RSyntaxTree
+layout: default
+---
+
+# ドキュメンテーション
+{:.no_toc}
+
+[English](https://yohasebe.github.io/rsyntaxtree/documentation) | 
+[日本語](https://yohasebe.github.io/rsyntaxtree/documentation_ja)
+
+### 目次
+{:.no_toc}
+
+1. toc
+{:toc}
+
+### 基本的な使い方
+
+エディターエリアにラベル付き括弧表記でテキストを入力し，`Draw PNG`または`Draw SVG`ボタンをクリックします．
+
+樹形図のすべてのブランチ（枝）やリーフ（葉）は，ノード（節点）に属します．ノードを作成するには，ラベルテキストを開始括弧の直後に配置します．ブランチは，空白で区切っていくつでも設定できます．リーフのテキストに1つ以上の空白が含まれているとき、空白はそのまま表示されます。ノードのラベルに空白を含めたいときには `<>` 記号を使って表します．例えば `Modal<>Aux` とすれば `Modal Aux` と表示されます．
+
+終端ノードとリーフの間に描かれるコネクターの描画方法は3種の中から選べます（`auto`，`bar`，`none`）．`auto` では，1つ以上の空白を含むリーフ（要するに「句」）に対しては終端ノードを頂点とした三角形を描画します．リーフが空白を含まない場合（つまり「単語」の場合)，垂直線が描かれます ．なお，リーフの先頭に `^` をつけると，そのリーフが句であると宣言することになります．したがって必ず三角形が描かれます． `bar` では，すべてのリーフに関して垂直線が描かれます． `none` では終端ノードとリーフの間にコネクターは描かれません．
+
+ノードを表すテキストやリーフを表すテキストの中で改行を行たい場合，改行文字 `\n` を用いることができます．
+
+RSyntaxTreeではPNG形式またはSVG形式で画像を生成します．どちらもMicrosoft Wordで作った書類などに貼り付けることができます．PNG形式の方が一般的ですが，SVG形式の画像は拡大しても描画品質が変わらないため，高品質なグラフィックが必要な場合に便利です．SVG形式の画像は，Adobe Illustrator，Microsoft Visio， [BOXY SVG](https://boxy-svg.com/) などのソフトウェアで読み込んで編集することができます．
+
+`Radical symmetrization` オプションは，ブランチ（枝）の描画方法に影響します．`Font style` ， `Font size` ，`Connector height` ，`Color`  の各オプションについては説明の必要はないでしょう．これらのオプションの値を変更することで，樹形図の外観を変えることができます．
+
+### PNG形式を用いる場合
+
+PNG形式の場合，`Noto Sans`，`Noto Serif`，`WQY Zen Hei` のいずれかを選ぶと，そのフォントを使って樹形図が描画されます．
+
+- `Noto Sans` は基本的なUnicode文字をゴシック体に近い書体で表示します（日本語のひらがな／カタカナ／漢字を含む）．
+- `Noto Serif` は基本的なUnicode文字を明朝体に近い書体で表示します（日本語のひらがな／カタカナ／漢字を含む）．
+- `WQY Zen Hei` は中国語／日本語／コリア語（CJK）の幅広い文字を表示可能です．
+
+### SVG形式を用いる場合
+
+SVG形式を用いる場合，期待通りの表示を得るためには，ご使用のコンピュータに適切なフォントがインストールされている必要があります．下記のフォントをあらかじめインストールしておいてください．必要なフォントがインストールされていない場合は，別のフォントで表示されるため，見た目のバランスをやや欠くことがあります．
+
+- [Noto Sans](https://fonts.google.com/noto/specimen/Noto+Sans): ラテン文字と基本的なUnicode文字（サンセリフ）の表示
+- [Noto Sans JP](https://fonts.google.com/noto/specimen/Noto+Sans+JP): 日本語のひらがな／カタカナ／漢字（サンセリフ）の表示
+- [Noto Serif](https://fonts.google.com/noto/specimen/Noto+Serif): ラテン文字と基本的なUnicode文字（セリフ） の表示
+- [Noto Serif JP](https://fonts.google.com/noto/specimen/Noto+Serif+JP):日本語のひらがな／カタカナ／漢字（セリフ）の表示
+- [WQY Zen Hei](https://packages.ubuntu.com/bionic/fonts/fonts-wqy-zenhei): 中国語／日本語／コリア語（CJK）の文字の表示
+- [OpenMoji](https://openmoji.org/): 様々な絵文字の表示
+
+### テキストの描画
+
+フォントのスタイルとしてイタリック／ボールド／ボールド+イタリックを指定できます．テキスト装飾としては，上線，下線，取り消し線を指定できます．また上付き文字と下付き文字を指定できます．これらは組み合わせて使用することもできます．
+
+#### フォント・スタイル
+
+|Style      |Symbol      |Sample Input       |Output           |
+|-----------|------------|-------------------|-----------------|
+|Italic     |`*TEXT*`    |`*italic*`         |*italic*         |
+|Bold       |`**TEXT**`  |`**bold**`         |**bold**         |
+|Italic+bold|`***TEXT***`|`***italic bold***`|***italic bold***|
+
+#### テキスト装飾
+
+|Decoration  |Symbol  |Sample Input   |Output                                                       |
+|------------|--------|---------------|-------------------------------------------------------------|
+|Overline    |`=TEXT=`|`=overline=`   |<span style='text-decoration:overline'>overline</span>       |
+|Underline   |`-TEXT-`|`-underline-`  |<span style='text-decoration:underline'>underline</span>     |
+|Line-through|`~TEXT~`|`~linethrough~`|<span style='text-decoration:line-through'>linethrough</span>|
+
+**注意：** 上線はSVGでは使用できますがPNG形式の画像では表示されません.
+
+#### 上付き文字と下付き文字
+
+|Sample Input           |Output                      |
+|-----------------------|----------------------------|
+|`normal_subscript_`    |normal<sub>subscript</sub>  |
+|`normal__superscript__`|normal<sup>superscript</sup>|
+
+
+### スペースと改行
+
+#### ラベル内のスペース
+
+|Sample Input|Output  |
+|------------|--------|
+|`X<>Y`      |X&nbsp;Y|
+
+リーフのテキスト中の半角スペースはそのままスペースとして表示されます。`<>`は基本的にはラベル内でスペースを表示したいときに使いますが、リーフ内のテキストでも有効です。
+
+#### 改行
+
+|Sample Input                   |Output              |
+|-------------------------------|--------------------|
+|`str1\`<br />`str2`            |str1<br />str2      |
+|`str1\`<br />`   \`<br />`str2`|str1<br /><br />str2|
+|`str1\ str2`                   |str1<br />str2      |
+|`str1\ \ str2`                 |str1<br /><br />str2|
+|`str1\nstr2`                   |str1<br />str2      |
+|`str1\n\nstr2`                 |str1<br /><br />str2|
+
+### テキスト以外の要素の描画
+
+テキストと組み合わせてサークル○，ボックス□，水平線などを描画することができます．
+
+#### ボックスとサークル
+
+{% include box_and_circle_table.html %}
+
+#### 水平線
+
+|Sample Input                   |Output                |
+|-------------------------------|----------------------|
+|`str1\`<br />`---\`<br />`str2`|str1<br />——<br />str2|
+|`str1\ ---\ str2`              |str1<br />——<br />str2|
+|`str1\n---\nstr2`              |str1<br />——<br />str2|
+
+ここで `---` は `-` の3つ以上の連続を意味します.
+
+### コネクター
+
+終端ノードとリーフの間に描かれるコネクターの描画方法は3種の中から選べます（`auto`，`bar`，`none`）．`auto` では，1つ以上の空白を含むリーフ（要するに「句」）に対しては終端ノードを頂点とした三角形を描画します．リーフが空白を含まない場合（つまり「単語」の場合)，垂直の直線が描かれます ．なお，リーフの先頭に `^` をつけると，そのリーフが句であると宣言することになります．したがって必ず三角形が描かれます． `bar` では，すべてのリーフに関して垂直の直線が描かれます． `none` では終端ノードとリーフの間にコネクターは描かれません．
+
+### リーフを囲む括弧と矩形の描画
+
+リーフとなるテキストの最初に（`^` が存在する場合はその直後に） `#` を付けると，そのテキスト全体を角括弧（［ ］）で囲みます（例：`[NP #text]` or `[NP ^#text]`）． テキストの最初に `##` を付けると，テキスト全体を矩形（ボックス）で囲みます．
+
+### 一部の文字を表示するためのエスケープ
+
+文字装飾などのマークアップに使用される一部の文字をテキストとして表示するためには `\` によってエスケープする必要があります。使用している環境で `\` が使えない場合は `¥` で代用することができます。
+
+{% include escape_char_table.html %}
+
+**注意：** 単なる改行 `↩️` はスペースとして扱われます．`↩️` を1つ以上連続させた場合も1つのスペースとして扱われます．
+
+テキスト中で改行したいときには，1） `\n`，2） `\↩️`，3） `\ + whitespace ` のいずれかを用いてください．そうすると出力される画像の中で改行 `↩️` が行われます．
+
+### ノードからノードへのパスの描画（試験的機能）
+
+下の3種類の形式でノードからノードへのパスを表示することができます．
+
+- 方向（矢印）のないパス（`- - -`）
+- 方向（矢印）のあるパス（`----->`）
+- 両方向の矢印のあるパス（`<----->`）
+
+樹形図の中でパスを表示したいとき，パスの両端をIDで指定します．パスIDをプラス（`+`）記号と共にノードのテキストの最後で指定してください（例：`+7`）．
+プラス記号とパスIDの間に `>` 記号を入れると（例：`+>7`），パスの終端に矢印が付きます．
+
+パスIDにはどのような数字を用いても構いませんが，必ず **2箇所** で同じIDを指定することが必要です．同じIDを2箇所以上で指定することはできません．
+
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/lightbox2@2.11.3/src/js/lightbox.js"></script>
+
+---
+
+<script>
+  function copyToClipBoard(id){
+    var copyText =  document.getElementById(id).innerText;
+    document.addEventListener('copy', function(e) {
+        e.clipboardData.setData('text/plain', copyText);
+        e.preventDefault();
+      }, true);
+    document.execCommand('copy');
+    alert('copied');
+  }
+</script>

data/docs/examples.html

@@ -0,0 +1,68 @@
+---
+title: RSyntaxTree
+layout: default
+---
+
+<h1 id="examples">Example Gallery</h1>
+{% assign all_examples = site.examples %}
+{% assign categories =  all_examples | map: 'category' | join: ','  | split: ','  | group_by: category %}
+<ul>
+  {%- for category in categories -%}
+  <li><a href="#category-{{ category.name | slugify }}">{{ category.name }}</a> [{{category.size}}]</li>
+  {%- endfor -%}
+</ul>
+
+{%- for category in categories -%}
+<hr />
+<h2 id="category-{{category.name | slugify }}"><b>{{ category.name }}</b></h2>
+{%- for example in all_examples -%}
+{% if example.category contains category.name %}
+<br />
+<div style='text-align:left;'>
+  <button onclick="copyToClipBoard('text-{{ example.name }}')" style='margin: 20px 0; font-size: 0.85em;'>
+    Copy to Clipboard
+  </button>
+</div>
+<div class='grid'>
+  <div style='margin-top: 0; margin-bottom: auto;'>
+    <div id="text-{{example.name}}" style='max-height: 600px; overflow-y: auto; margin-bottom: 20px;'>
+      {{ example.content | markdownify }}
+    </div>
+    <table style='line-height: 110%; font-size: 0.85em; margin-bottom: 20px;'>
+      <thead></thead>
+      <tbody>
+        <tr><td>Category</td><td>{{ example.category}}</td></tr>
+        <tr><td>Connector</td><td>{{ example.connector }}</td></tr>
+        <tr><td>Polyline</td><td>{{ example.polyline }}</td></tr>
+        <tr><td>Colorization</td><td>{{ example.colorization }}</td></tr>
+        <tr><td>Radical Symmetirization</td><td>{{ example.symmetrization }}</td></tr>
+        <tr><td>Font</td><td>{{ example.font }}</td></tr>
+        <tr><td>Reference</td><td>{{ example.reference }}</td></tr>
+      </tbody>
+    </table>
+  </div>
+  <div style='margin-top: 0; margin-bottom: auto;'>
+    <a href='assets/img/{{ example.name }}.png' data-lightbox='{{ example.name }}'>
+      <img src='assets/img/{{ example.name}}.png'/>
+    </a>
+  </div>
+</div>
+<div><a href="#examples">🔝</a></div>
+{% endif %}
+{%- endfor -%}
+{%- endfor -%}
+
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/lightbox2@2.11.3/src/js/lightbox.js"></script>
+
+<script>
+  function copyToClipBoard(id){
+      var copyText =  document.getElementById(id).innerText;
+      document.addEventListener('copy', function(e) {
+          e.clipboardData.setData('text/plain', copyText);
+          e.preventDefault();
+        }, true);
+      document.execCommand('copy');  
+      alert('copied'); 
+    }
+</script>

data/docs/index.html

@@ -0,0 +1,2 @@
+<meta http-equiv="Refresh" content="0; url=https://yohasebe.com/rsyntaxtree" />
+

data/lib/rsyntaxtree/version.rb

@@ -1,4 +1,4 @@
 module RSyntaxTree
-  VERSION = "1.0.6"
+  VERSION = "1.0.7"
 end
 

data/lib/rsyntaxtree.rb

@@ -53,6 +53,8 @@ module RSyntaxTree
             .gsub('-SCOLON-', ';')
             .gsub('-OABRACKET-', '<')
             .gsub('-CABRACKET-', '>')
+            .gsub('¥¥', '\¥')
+            .gsub(/(?<!\\)¥/, "\\")
           new_params[key] = data
 
         when :symmetrize, :color, :transparent, :polyline

data/rsyntaxtree.gemspec

@@ -10,7 +10,7 @@ Gem::Specification.new do |s|
   s.email       = ["yohasebe@gmail.com"]
   s.homepage    = "http://github.com/yohasebe/rsyntaxtree"
   s.summary     = %q{RSyntaxTree is a graphical syntax tree generator written in Ruby}
-  s.description = %q{Yet another syntax tree generator made with Ruby and RMagick}
+  s.description = %q{Syntax tree generator made with Ruby}
   s.licenses    = ["MIT"]
   s.files         = `git ls-files`.split("\n")
   s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rsyntaxtree
 version: !ruby/object:Gem::Version
-  version: 1.0.6
+  version: 1.0.7
 platform: ruby
 authors:
 - Yoichiro Hasebe
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-02-04 00:00:00.000000000 Z
+date: 2022-11-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rmagick
@@ -78,7 +78,7 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-description: Yet another syntax tree generator made with Ruby and RMagick
+description: Syntax tree generator made with Ruby
 email:
 - yohasebe@gmail.com
 executables:
@@ -92,6 +92,75 @@ files:
 - README.md
 - Rakefile
 - bin/rsyntaxtree
+- docs/.gitignore
+- docs/404.html
+- docs/Gemfile
+- docs/_config.yml
+- docs/_examples/001.md
+- docs/_examples/002.md
+- docs/_examples/003.md
+- docs/_examples/004.md
+- docs/_examples/005.md
+- docs/_examples/006.md
+- docs/_examples/007.md
+- docs/_examples/008.md
+- docs/_examples/009.md
+- docs/_examples/010.md
+- docs/_examples/011.md
+- docs/_examples/012.md
+- docs/_examples/013.md
+- docs/_examples/014.md
+- docs/_examples/015.md
+- docs/_examples/016.md
+- docs/_examples/017.md
+- docs/_examples/018.md
+- docs/_examples/019.md
+- docs/_examples/020.md
+- docs/_includes/box_and_circle_table.html
+- docs/_includes/escape_char_table.html
+- docs/_includes/social_media_links.html
+- docs/_layouts/default.html
+- docs/assets/css/style.scss
+- docs/assets/img/001.png
+- docs/assets/img/002.png
+- docs/assets/img/003.png
+- docs/assets/img/004.png
+- docs/assets/img/005.png
+- docs/assets/img/006.png
+- docs/assets/img/007.png
+- docs/assets/img/008.png
+- docs/assets/img/009.png
+- docs/assets/img/010.png
+- docs/assets/img/011.png
+- docs/assets/img/012.png
+- docs/assets/img/013.png
+- docs/assets/img/014.png
+- docs/assets/img/015.png
+- docs/assets/img/016.png
+- docs/assets/img/017.png
+- docs/assets/img/018.png
+- docs/assets/img/019.png
+- docs/assets/img/020.png
+- docs/assets/img/elements/circle.png
+- docs/assets/img/elements/circle_abc.png
+- docs/assets/img/elements/circle_bold.png
+- docs/assets/img/elements/circle_hatched.png
+- docs/assets/img/elements/circle_one.png
+- docs/assets/img/elements/connector.png
+- docs/assets/img/elements/connector_bold.png
+- docs/assets/img/elements/square.png
+- docs/assets/img/elements/square_abc.png
+- docs/assets/img/elements/square_bold.png
+- docs/assets/img/elements/square_hatched.png
+- docs/assets/img/elements/square_one.png
+- docs/assets/img/favicon/apple-touch-icon.png
+- docs/assets/img/favicon/favicon-16x16.png
+- docs/assets/img/favicon/favicon-32x32.png
+- docs/assets/img/favicon/favicon.ico
+- docs/documentation.md
+- docs/documentation_ja.md
+- docs/examples.html
+- docs/index.html
 - fonts/NotoSans-Bold.ttf
 - fonts/NotoSans-BoldItalic.ttf
 - fonts/NotoSans-Italic.ttf
@@ -108,18 +177,7 @@ files:
 - fonts/OpenMoji-Black.ttf
 - fonts/OpenMoji-Color.ttf
 - fonts/wqy-zenhei.ttf
-- img/elements/circle.png
-- img/elements/circle_abc.png
-- img/elements/circle_bold.png
-- img/elements/circle_hatched.png
-- img/elements/circle_one.png
-- img/elements/connector.png
-- img/elements/connector_bold.png
-- img/elements/square.png
-- img/elements/square_abc.png
-- img/elements/square_bold.png
-- img/elements/square_hatched.png
-- img/elements/square_one.png
+- img/rsyntaxtree-web-screenshot.png
 - img/rsyntaxtree.png
 - img/sample.png
 - img/sample.svg
@@ -153,7 +211,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.3
+rubygems_version: 3.3.7
 signing_key:
 specification_version: 4
 summary: RSyntaxTree is a graphical syntax tree generator written in Ruby