From e5f499a6f86180d10b52f25cc4abd828b0cbc9a0 Mon Sep 17 00:00:00 2001 From: KOMOTO Kenta <64479799+kentakom1213@users.noreply.github.com> Date: Sat, 6 Jun 2026 20:22:10 +0900 Subject: [PATCH 1/3] Improve static SEO content --- index.html | 110 +++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 94 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 67bf2dd..546fcd2 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -8,15 +8,16 @@ content="width=device-width, initial-scale=1.0, user-scalable=no" /> --> - Graph Editor - Competitive Programming Graph Tool + Graph Editor - AtCoder・競プロ向けグラフ作成ツール + @@ -24,11 +25,11 @@ + + - + + + @@ -151,6 +173,24 @@ height: 100%; } + #seo-content { + max-width: 960px; + padding: 24px; + color: #222; + font-family: Ubuntu-Light, Helvetica, sans-serif; + line-height: 1.7; + } + + #seo-content h1, + #seo-content h2 { + margin: 0.8em 0 0.4em; + } + + #seo-content ul, + #seo-content ol { + padding-left: 1.5em; + } + .centered { margin-right: auto; margin-left: auto; @@ -207,15 +247,53 @@

Graph Editor

- Graph Editor is a graph creation and visualization tool for - competitive programming. It helps users create directed and - undirected graphs, edit vertices and edges, and export graphs in - programming-contest input formats. + Graph Editor は，AtCoder などの競技プログラミングで使うグラフを， + ブラウザ上で直感的に作成・編集できる無料の Web アプリです． + 無向グラフ・有向グラフの作成，頂点・辺の編集，辺リスト形式でのコピー， + JSON 保存，PNG / SVG 出力に対応しています．

- 競技プログラミング向けのグラフ作成・可視化ツールです．頂点や辺を直感的に編集し，AtCoder - などで使いやすい入力形式に変換できます． + Graph Editor is a browser-based graph editor for competitive + programming. You can create directed and undirected graphs, edit + vertices and edges, and export graphs as edge lists, JSON, PNG, or + SVG.

+
+ +
+

競技プログラミング向けのグラフ作成

+

+ 頂点をクリックで追加し，辺をドラッグで接続できます．作成したグラフは， + AtCoder などの問題で使いやすい辺リスト形式に変換できます． + 0-indexed / 1-indexed の切り替えにも対応しているため，問題の入力形式に合わせて出力できます． +

+
+ +
+

主な機能

+ +
+ +
+

使い方

+
    +
  1. 頂点追加モードでキャンバスをクリックして頂点を追加します．
    2. +
  2. 辺追加モードで頂点同士を接続します．
    3. +
  3. I/O パネルから Edge List をコピーします．
    4. +
  4. 必要に応じて JSON，PNG，SVG 形式で保存します．
    5. +
+
+ +
+

Links

Source code is available on GitHub. @@ -267,4 +345,4 @@

Graph Editor

- + \ No newline at end of file From 852b9094f446d087f86c6b950ed55eaa6756ad1a Mon Sep 17 00:00:00 2001 From: KOMOTO Kenta <64479799+kentakom1213@users.noreply.github.com> Date: Sat, 6 Jun 2026 20:22:45 +0900 Subject: [PATCH 2/3] Add lastmod to sitemap --- public/sitemap.xml | 1 + 1 file changed, 1 insertion(+) diff --git a/public/sitemap.xml b/public/sitemap.xml index 69b399b..e8707af 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -2,5 +2,6 @@ https://kentakom1213.github.io/graph-editor/ + 2026-06-06 From 705b6087b25b26ba413447289d0bf73800fbd946 Mon Sep 17 00:00:00 2001 From: KOMOTO Kenta <64479799+kentakom1213@users.noreply.github.com> Date: Sat, 6 Jun 2026 20:53:16 +0900 Subject: [PATCH 3/3] Refine SEO fallback content --- index.html | 69 +++++++++++++++++++++++++++++++++++------------------- 1 file changed, 45 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 546fcd2..e01286e 100644 --- a/index.html +++ b/index.html @@ -2,21 +2,13 @@ - - + Graph Editor - AtCoder・競プロ向けグラフ作成ツール - @@ -141,6 +133,7 @@ /* Light mode background color for what is not covered by the egui canvas, or where the egui canvas is translucent. */ background: #909090; + color: #222; } @media (prefers-color-scheme: dark) { @@ -148,6 +141,7 @@ /* Dark mode background color for what is not covered by the egui canvas, or where the egui canvas is translucent. */ background: #404040; + color: #f0f0f0; } } @@ -161,22 +155,12 @@ width: 100%; } - /* Make canvas fill entire document: */ - canvas { - margin-right: auto; - margin-left: auto; - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - + /* Static fallback content shown before the WASM canvas renders. */ #seo-content { + box-sizing: border-box; max-width: 960px; padding: 24px; - color: #222; + color: inherit; font-family: Ubuntu-Light, Helvetica, sans-serif; line-height: 1.7; } @@ -191,6 +175,22 @@ padding-left: 1.5em; } + #seo-content a { + color: inherit; + } + + /* Make canvas fill entire viewport: */ + canvas { + margin-right: auto; + margin-left: auto; + display: block; + position: fixed; + inset: 0; + width: 100%; + height: 100%; + z-index: 1; + } + .centered { margin-right: auto; margin-left: auto; @@ -203,6 +203,15 @@ font-size: 24px; font-family: Ubuntu-Light, Helvetica, sans-serif; text-align: center; + z-index: 2; + } + + noscript p { + max-width: 960px; + margin: 0 auto; + padding: 0 24px 24px; + font-family: Ubuntu-Light, Helvetica, sans-serif; + line-height: 1.7; } /* ---------------------------------------------- */ @@ -302,6 +311,18 @@

Links