Skip to content

Enhance SEO content and update sitemap with lastmod #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kentakom1213 merged 3 commits into from
Jun 6, 2026
Merged

Enhance SEO content and update sitemap with lastmod #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e5f499a
Improve static SEO content
kentakom1213 Jun 6, 2026
852b909
Add lastmod to sitemap
kentakom1213 Jun 6, 2026
705b608
Refine SEO fallback content
kentakom1213 Jun 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 127 additions & 28 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<html lang="ja">
<head>
<meta charset="utf-8" />
<!-- Disable zooming: -->
<!-- <meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no"
/> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Graph Editor - Competitive Programming Graph Tool</title>
<title>Graph Editor - AtCoder・競プロ向けグラフ作成ツール</title>
<meta
name="description"
content="Graph Editor is a graph creation and visualization tool for competitive programming. Create, edit, and export graphs for AtCoder and programming contests."
/>
<meta
name="keywords"
content="graph editor, competitive programming, algorithm, visualization, test case generator, directed graph, undirected graph, グラフエディタ, 競技プログラミング, 競プロ, アルゴリズム, 可視化, テストケース, 有向グラフ, 無向グラフ"
content="Graph Editor は，AtCoder などの競技プログラミング用に，無向グラフ・有向グラフをブラウザ上で作成し，辺リスト・JSON・PNG・SVG に出力できる無料の Web アプリです．"
/>
<meta name="robots" content="index,follow" />
<link rel="canonical" href="https://kentakom1213.github.io/graph-editor/" />
<link rel="icon" href="assets/favicon.ico" type="image/x-icon" />

<!-- OGP設定 -->
<meta property="og:type" content="website" />
<meta
property="og:title"
content="Graph Editor - Competitive Programming Graph Tool"
content="Graph Editor - AtCoder・競プロ向けグラフ作成ツール"
/>
<meta
property="og:description"
content="Create, edit, and visualize graphs for competitive programming and AtCoder."
content="競技プログラミング用のグラフをブラウザ上で作成・編集し，辺リスト・JSON・PNG・SVG に出力できる Web アプリです．"
/>
<meta
property="og:url"
Expand All @@ -38,22 +31,43 @@
property="og:image"
content="https://kentakom1213.github.io/graph-editor/assets/card.png"
/>
<meta property="og:site_name" content="Graph Editor" />
<meta property="og:locale" content="ja_JP" />

<!-- Twitter用のmetaタグ (X) -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content="Graph Editor - Competitive Programming Graph Tool"
content="Graph Editor - AtCoder・競プロ向けグラフ作成ツール"
/>
<meta
name="twitter:description"
content="Create, edit, and visualize graphs for competitive programming and AtCoder."
content="AtCoder などの競技プログラミング用に，グラフを作成・編集して辺リスト形式で出力できます．"
/>
<meta
name="twitter:image"
content="https://kentakom1213.github.io/graph-editor/assets/card.png"
/>

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Graph Editor",
"url": "https://kentakom1213.github.io/graph-editor/",
"description": "AtCoder などの競技プログラミング向けに，無向グラフ・有向グラフをブラウザ上で作成・編集し，辺リスト・JSON・PNG・SVG に出力できる無料の Web アプリです．",
"applicationCategory": "DeveloperApplication",
"operatingSystem": "Web",
"isAccessibleForFree": true,
"inLanguage": ["ja", "en"],
"author": {
"@type": "Person",
"name": "KOMOTO Kenta",
"url": "https://github.com/kentakom1213"
}
}
</script>

<!-- config for our rust wasm binary. go to https://trunkrs.dev/assets/#rust for more customization -->
<link data-trunk rel="rust" data-wasm-opt="2" />
<!-- this is the base url relative to which other urls will be constructed. trunk will insert this from the public-url option -->
Expand Down Expand Up @@ -119,13 +133,15 @@
/* 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) {
body {
/* Dark mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #404040;
color: #f0f0f0;
}
}

Expand All @@ -139,16 +155,40 @@
width: 100%;
}

/* Make canvas fill entire document: */
/* Static fallback content shown before the WASM canvas renders. */
#seo-content {
box-sizing: border-box;
max-width: 960px;
padding: 24px;
color: inherit;
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;
}

#seo-content a {
color: inherit;
}

/* Make canvas fill entire viewport: */
canvas {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 0;
left: 0;
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
}

.centered {
Expand All @@ -163,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;
}

/* ---------------------------------------------- */
Expand Down Expand Up @@ -207,15 +256,53 @@
<section class="seo-description">
<h1>Graph Editor</h1>
<p>
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 出力に対応しています．
</p>
<p>
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.
</p>
</section>

<section>
<h2>競技プログラミング向けのグラフ作成</h2>
<p>
競技プログラミング向けのグラフ作成・可視化ツールです．頂点や辺を直感的に編集し，AtCoder
などで使いやすい入力形式に変換できます．
頂点をクリックで追加し，辺をドラッグで接続できます．作成したグラフは，
AtCoder などの問題で使いやすい辺リスト形式に変換できます．
0-indexed / 1-indexed の切り替えにも対応しているため，問題の入力形式に合わせて出力できます．
</p>
</section>

<section>
<h2>主な機能</h2>
<ul>
<li>無向グラフ・有向グラフの切り替え</li>
<li>頂点・辺の追加，削除，移動，色変更</li>
<li>0-indexed / 1-indexed の切り替え</li>
<li>辺リスト形式でのコピー・読み込み</li>
<li>JSON 形式での保存・復元</li>
<li>PNG / SVG 形式での画像出力</li>
<li>ブラウザ上で動作する WASM アプリ</li>
</ul>
</section>

<section>
<h2>使い方</h2>
<ol>
<li>頂点追加モードでキャンバスをクリックして頂点を追加します．</li>
<li>辺追加モードで頂点同士を接続します．</li>
<li>I/O パネルから Edge List をコピーします．</li>
<li>必要に応じて JSON，PNG，SVG 形式で保存します．</li>
</ol>
</section>

<section>
<h2>Links</h2>
<p>
Source code is available on
<a href="https://github.com/kentakom1213/graph-editor">GitHub</a>.
Expand All @@ -224,6 +311,18 @@ <h1>Graph Editor</h1>
</main>

<noscript>
<style>
html,
body {
overflow: auto;
height: auto;
}

canvas,
#loading_text {
display: none;
}
</style>
<p>
Please enable JavaScript to use Graph Editor. JavaScript を有効にすると
Graph Editor を利用できます．
Expand All @@ -232,7 +331,7 @@ <h1>Graph Editor</h1>

<!-- The WASM code will resize the canvas dynamically -->
<!-- the id is hardcoded in main.rs . so, make sure both match. -->
<canvas id="the_canvas_id"></canvas>
<canvas id="the_canvas_id" aria-label="Graph Editor interactive canvas"></canvas>

<!-- the loading spinner will be removed in main.rs -->
<div class="centered" id="loading_text">
Expand Down
1 change: 1 addition & 0 deletions public/sitemap.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://kentakom1213.github.io/graph-editor/</loc>
<lastmod>2026-06-06</lastmod>
</url>
</urlset>
Loading