GitHub Edit 버튼 추가 및 설정 파일을 YAML로 전환

- site.json을 site.yaml로 전환하고 yaml 파서 도입
- gitHub.repository-url, gitHub.content-branch 설정 추가
- 상세 페이지 제목 옆에 GitHub 편집 링크 Edit 버튼 렌더링
- repository-url 미설정 시 Edit 버튼 미표시, content-branch 기본값 main

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: benelog

CLAUDE.md

@@ -7,7 +7,7 @@ Obsidian vault 기반 개발 노트 모음. `obsidian-site-action/`의 빌드 
 ## 핵심 구조
 
 - `content/*.md` — 270개 마크다운 노트 (플랫 구조)
-- `site.json` — 사이트 설정 (title, subtitle, lang, output)
+- `site.yaml` — 사이트 설정 (title, subtitle, lang, output-directory)
 - `obsidian-site-action/` — 빌드 도구 (추후 별도 repo로 분리 예정)
   - `build.ts` — 진입점. `import.meta.url` 기준으로 layouts/styles를 찾고, vault 경로는 `--source`로 받음
   - `layouts/page.html`, `layouts/index.html` — HTML 템플릿. `{title}`, `{body}` 등 플레이스홀더 사용

README.md

@@ -35,22 +35,20 @@ npm run build -- --output dist             # 출력 디렉토리 변경
 
 ### 설정
 
-`site.json`으로 사이트 메타데이터를 설정한다.
-
-```json
-{
-  "title": "devnote",
-  "subtitle": "정상혁의 개발수첩",
-  "lang": "ko",
-  "output": "public"
-}
+`site.yaml`로 사이트 메타데이터를 설정한다.
+
+```yaml
+title: devnote
+subtitle: 정상혁의 개발수첩
+lang: ko
+output-directory: public
 ```
 
 ## 구조
 
 ```
 content/*.md                        # Obsidian 노트 (플랫 구조)
-site.json                           # 사이트 설정
+site.yaml                           # 사이트 설정
 obsidian-site-action/                # 빌드 도구
   build.ts                          # 빌드 스크립트 (진입점)
   render.ts                         # HTML 렌더링

obsidian-site-action/build.ts

@@ -6,6 +6,7 @@
 import { readFileSync, writeFileSync, mkdirSync, readdirSync, copyFileSync, existsSync } from 'fs';
 import { resolve, join, basename, extname } from 'path';
 import { fileURLToPath } from 'url';
+import { parse as parseYaml } from 'yaml';
 
 import { buildGraph, buildBacklinks } from './graph.js';
 import { buildPage, buildIndex } from './render.js';
@@ -19,18 +20,24 @@ export interface PageInfo {
   content: string;
 }
 
+export interface GitHubConfig {
+  'repository-url': string;
+  'content-branch'?: string;
+}
+
 export interface SiteConfig {
   title: string;
   subtitle: string;
   lang: string;
-  output: string;
+  'output-directory': string;
+  gitHub?: GitHubConfig;
 }
 
 function loadConfig(source: string): SiteConfig {
-  const config: SiteConfig = { title: basename(source), subtitle: '', lang: 'en', output: 'public' };
-  const configPath = join(source, 'site.json');
+  const config: SiteConfig = { title: basename(source), subtitle: '', lang: 'en', 'output-directory': 'public' };
+  const configPath = join(source, 'site.yaml');
   if (existsSync(configPath)) {
-    const data = JSON.parse(readFileSync(configPath, 'utf-8'));
+    const data = parseYaml(readFileSync(configPath, 'utf-8'));
     Object.assign(config, data);
   }
   return config;
@@ -74,9 +81,9 @@ function main(): void {
   const source = args.source;
   const config = loadConfig(source);
   if (args.output) {
-    config.output = args.output;
+    config['output-directory'] = args.output;
   }
-  const output = resolve(source, config.output);
+  const output = resolve(source, config['output-directory']);
 
   console.log(`Source: ${source}`);
   console.log(`Output: ${output}`);

obsidian-site-action/layouts/page.html

@@ -15,7 +15,10 @@
 
   <div class="page-layout">
     <main class="content">
-      <h1>{title}</h1>
+      <div class="content-header">
+        <h1>{title}</h1>
+        {edit_link}
+      </div>
       {body}
     </main>
 

obsidian-site-action/package-lock.json

@@ -8,7 +8,8 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "marked": "^15.0.0"
+    "marked": "^15.0.0",
+    "yaml": "^2.8.2"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",

obsidian-site-action/package.json

@@ -3,7 +3,7 @@
  */
 
 import { marked } from 'marked';
-import { WIKILINK_RE, type PageInfo, type SiteConfig } from './build.js';
+import { WIKILINK_RE, type PageInfo, type SiteConfig, type GitHubConfig } from './build.js';
 import { extractWikilinks } from './graph.js';
 import type { GraphData } from './graph.js';
 
@@ -62,6 +62,13 @@ export function renderBacklinks(stem: string, backlinks: Map<string, string[]>,
   return '<section class="backlinks"><h2>Backlinks</h2><ul>' + items.join('\n') + '</ul></section>';
 }
 
+export function renderEditLink(stem: string, gitHub?: GitHubConfig): string {
+  if (!gitHub?.['repository-url']) return '';
+  const branch = gitHub['content-branch'] || 'main';
+  const url = `${gitHub['repository-url']}/edit/${branch}/content/${stem}.md`;
+  return `<a href="${url}" class="edit-link" target="_blank" rel="noopener noreferrer">Edit</a>`;
+}
+
 export function buildPage(
   stem: string,
   pages: Map<string, PageInfo>,
@@ -82,13 +89,16 @@ export function buildPage(
   const relatedHtml = renderRelated(wikilinks, pages);
   const backlinksHtml = renderBacklinks(stem, backlinks, pages);
 
+  const editLinkHtml = renderEditLink(stem, config.gitHub);
+
   return template
     .replaceAll('{title}', title)
     .replaceAll('{site_title}', config.title)
     .replaceAll('{lang}', config.lang)
     .replaceAll('{body}', htmlBody)
     .replaceAll('{related}', relatedHtml)
-    .replaceAll('{backlinks}', backlinksHtml);
+    .replaceAll('{backlinks}', backlinksHtml)
+    .replaceAll('{edit_link}', editLinkHtml);
 }
 
 export function buildIndex(

obsidian-site-action/render.ts

@@ -100,17 +100,17 @@ body {
   box-shadow: var(--shadow-card);
 }
 
-.content h1 {
-  font-size: 26px;
-  font-weight: 800;
+.content-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
   margin-bottom: 20px;
   padding-bottom: 16px;
-  line-height: 1.3;
-  letter-spacing: -0.5px;
   position: relative;
 }
 
-.content h1::after {
+.content-header::after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -121,6 +121,38 @@ body {
   border-radius: 2px;
 }
 
+.content-header h1 {
+  font-size: 26px;
+  font-weight: 800;
+  line-height: 1.3;
+  letter-spacing: -0.5px;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.content-header h1::after {
+  display: none;
+}
+
+.edit-link {
+  flex-shrink: 0;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--color-text-tertiary);
+  text-decoration: none;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: 4px 12px;
+  transition: all 0.15s ease;
+  margin-top: 4px;
+}
+
+.edit-link:hover {
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+  text-decoration: none;
+}
+
 .content h2 {
   font-size: 20px;
   font-weight: 700;

obsidian-site-action/styles/style.css

@@ -0,0 +1,7 @@
+title: Devnote
+subtitle: Benelog의 개발수첩
+lang: ko
+output-directory: public
+gitHub:
+  repository-url: https://github.com/benelog/devnote
+  content-branch: main