fix post generate

2026-01-15 19:46:01 +09:00
parent 162072d980
commit 9980e596ca
13 changed files with 1834 additions and 120 deletions
--- a/src/components/atbrowser.ts
+++ b/src/components/atbrowser.ts
@@ -47,7 +47,7 @@ async function renderServices(did: string, handle: string): Promise<string> {
  const items = Array.from(serviceMap.entries()).map(([domain, info]) => {
    return `
      <li class="service-list-item">
-        <a href="?mode=browser&handle=${handle}&service=${encodeURIComponent(domain)}" class="service-list-link">
+        <a href="/at/${handle}/${domain}" class="service-list-link">
          <img src="${info.favicon}" class="service-list-favicon" alt="" onerror="this.style.display='none'">
          <span class="service-list-name">${info.name}</span>
          <span class="service-list-count">${info.count}</span>
@@ -84,7 +84,7 @@ async function renderCollections(did: string, handle: string, serviceDomain: str
  const items = filtered.map(col => {
    return `
      <li class="collection-item">
-        <a href="?mode=browser&handle=${handle}&collection=${encodeURIComponent(col)}" class="collection-link">
+        <a href="/at/${handle}/${col}" class="collection-link">
          <span class="collection-nsid">${col}</span>
        </a>
      </li>
@@ -111,7 +111,7 @@ async function renderRecordList(did: string, handle: string, collection: string)
    const preview = rec.value.title || rec.value.text?.slice(0, 50) || rkey
    return `
      <li class="record-item">
-        <a href="?mode=browser&handle=${handle}&collection=${encodeURIComponent(collection)}&rkey=${rkey}" class="record-link">
+        <a href="/at/${handle}/${collection}/${rkey}" class="record-link">
          <span class="record-rkey">${rkey}</span>
          <span class="record-preview">${preview}</span>
        </a>
@@ -168,7 +168,7 @@ export async function mountAtBrowser(
  service: string | null = null,
  loginDid: string | null = null
 ): Promise<void> {
-  container.innerHTML = '<p class="loading">Loading...</p>'
+  container.innerHTML = '<div class="loading"><div class="loading-spinner"></div></div>'

  try {
    const did = handle.startsWith('did:') ? handle : await resolveHandle(handle)
@@ -178,16 +178,16 @@ export async function mountAtBrowser(
    let nav = ''

    if (collection && rkey) {
-      nav = `<a href="?mode=browser&handle=${handle}&collection=${encodeURIComponent(collection)}" class="back-link">← Back</a>`
+      nav = `<a href="/at/${handle}/${collection}" class="back-link">← Back</a>`
      content = await renderRecordDetail(did, handle, collection, rkey, canDelete)
    } else if (collection) {
      // Get service from collection for back link
      const info = getServiceInfo(collection)
      const backService = info ? info.domain : ''
-      nav = `<a href="?mode=browser&handle=${handle}&service=${encodeURIComponent(backService)}" class="back-link">← ${info?.name || 'Back'}</a>`
+      nav = `<a href="/at/${handle}/${backService}" class="back-link">← ${info?.name || 'Back'}</a>`
      content = await renderRecordList(did, handle, collection)
    } else if (service) {
-      nav = `<a href="?mode=browser&handle=${handle}" class="back-link">← Services</a>`
+      nav = `<a href="/at/${handle}" class="back-link">← Services</a>`
      content = await renderCollections(did, handle, service)
    } else {
      content = await renderServices(did, handle)
@@ -213,7 +213,7 @@ export async function mountAtBrowser(
          btn.textContent = 'Deleting...'
          await deleteRecord(col, rk)
          // Go back to collection
-          window.location.href = `?mode=browser&handle=${handle}&collection=${encodeURIComponent(col)}`
+          window.location.href = `/at/${handle}/${col}`
        } catch (err) {
          alert('Delete failed: ' + err)
          btn.disabled = false
--- a/src/components/browser.ts
+++ b/src/components/browser.ts
@@ -41,13 +41,25 @@ export function mountHeader(
  currentHandle: string,
  isLoggedIn: boolean,
  userHandle: string | undefined,
-  callbacks: HeaderCallbacks
+  callbacks: HeaderCallbacks,
+  isStatic: boolean = false
 ): void {
-  container.innerHTML = renderHeader(currentHandle, isLoggedIn, userHandle)
+  // For static pages, only update if login state requires it
+  const existingLoginBtn = container.querySelector('#login-btn')
+  const existingUserBtn = container.querySelector('#user-btn')
+  const needsUpdate = !isStatic ||
+    (isLoggedIn && existingLoginBtn) ||  // Need to show user button
+    (!isLoggedIn && existingUserBtn)      // Need to show login button
+
+  if (needsUpdate) {
+    container.innerHTML = renderHeader(currentHandle, isLoggedIn, userHandle)
+  }

  const form = document.getElementById('header-form') as HTMLFormElement
  const input = document.getElementById('header-input') as HTMLInputElement

+  if (!form) return
+
  form.addEventListener('submit', (e) => {
    e.preventDefault()
    const handle = input.value.trim()
--- a/src/components/posts.ts
+++ b/src/components/posts.ts
@@ -1,5 +1,6 @@
 import type { BlogPost } from '../types.js'
 import { putRecord } from '../lib/auth.js'
+import { renderMarkdown } from '../lib/markdown.js'

 function formatDate(dateStr: string): string {
  const date = new Date(dateStr)
@@ -28,7 +29,7 @@ export function mountPostList(container: HTMLElement, posts: BlogPost[]): void {
    const rkey = post.uri.split('/').pop()
    return `
      <li class="post-item">
-        <a href="?rkey=${rkey}" class="post-link">
+        <a href="/post/${rkey}" class="post-link">
          <span class="post-title">${escapeHtml(post.title)}</span>
          <span class="post-date">${formatDate(post.createdAt)}</span>
        </a>
@@ -41,7 +42,7 @@ export function mountPostList(container: HTMLElement, posts: BlogPost[]): void {

 export function mountPostDetail(container: HTMLElement, post: BlogPost, handle: string, collection: string, canEdit: boolean = false): void {
  const rkey = post.uri.split('/').pop() || ''
-  const jsonUrl = `?mode=browser&handle=${handle}&collection=${encodeURIComponent(collection)}&rkey=${rkey}`
+  const jsonUrl = `/at/${handle}/${collection}/${rkey}`

  const editBtn = canEdit ? `<button class="edit-btn" id="edit-btn">edit</button>` : ''

@@ -55,7 +56,7 @@ export function mountPostDetail(container: HTMLElement, post: BlogPost, handle:
          ${editBtn}
        </div>
      </header>
-      <div class="post-content" id="post-content">${escapeHtml(post.content)}</div>
+      <div class="post-content" id="post-content">${renderMarkdown(post.content)}</div>
    </article>

    <div class="edit-form-container" id="edit-form-container" style="display: none;">
--- a/src/components/services.ts
+++ b/src/components/services.ts
@@ -23,7 +23,7 @@ export async function renderServices(handle: string): Promise<string> {
  }

  const items = Array.from(serviceMap.entries()).map(([domain, info]) => {
-    const url = `?mode=browser&handle=${handle}&service=${encodeURIComponent(domain)}`
+    const url = `/at/${handle}/${domain}`

    return `
      <a href="${url}" class="service-item" title="${info.collections.join(', ')}">
--- a/src/lib/markdown.ts
+++ b/src/lib/markdown.ts
@@ -0,0 +1,71 @@
+import { marked, Renderer } from 'marked'
+import hljs from 'highlight.js/lib/core'
+
+// Import only common languages
+import javascript from 'highlight.js/lib/languages/javascript'
+import typescript from 'highlight.js/lib/languages/typescript'
+import bash from 'highlight.js/lib/languages/bash'
+import json from 'highlight.js/lib/languages/json'
+import yaml from 'highlight.js/lib/languages/yaml'
+import markdown from 'highlight.js/lib/languages/markdown'
+import css from 'highlight.js/lib/languages/css'
+import xml from 'highlight.js/lib/languages/xml'
+import python from 'highlight.js/lib/languages/python'
+import rust from 'highlight.js/lib/languages/rust'
+import go from 'highlight.js/lib/languages/go'
+
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('js', javascript)
+hljs.registerLanguage('typescript', typescript)
+hljs.registerLanguage('ts', typescript)
+hljs.registerLanguage('bash', bash)
+hljs.registerLanguage('sh', bash)
+hljs.registerLanguage('shell', bash)
+hljs.registerLanguage('json', json)
+hljs.registerLanguage('yaml', yaml)
+hljs.registerLanguage('yml', yaml)
+hljs.registerLanguage('markdown', markdown)
+hljs.registerLanguage('md', markdown)
+hljs.registerLanguage('css', css)
+hljs.registerLanguage('html', xml)
+hljs.registerLanguage('xml', xml)
+hljs.registerLanguage('python', python)
+hljs.registerLanguage('py', python)
+hljs.registerLanguage('rust', rust)
+hljs.registerLanguage('rs', rust)
+hljs.registerLanguage('go', go)
+
+// Custom renderer with syntax highlighting
+const renderer = new Renderer()
+
+renderer.code = function({ text, lang }: { text: string; lang?: string }) {
+  let highlighted: string
+  if (lang && hljs.getLanguage(lang)) {
+    try {
+      highlighted = hljs.highlight(text, { language: lang }).value
+    } catch {
+      highlighted = escapeHtml(text)
+    }
+  } else {
+    // No auto-detect, just escape
+    highlighted = escapeHtml(text)
+  }
+  return `<pre><code class="hljs">${highlighted}</code></pre>`
+}
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+}
+
+marked.setOptions({
+  breaks: true,
+  gfm: true,
+  renderer,
+})
+
+export function renderMarkdown(content: string): string {
+  return marked.parse(content) as string
+}
--- a/src/lib/router.ts
+++ b/src/lib/router.ts
@@ -0,0 +1,95 @@
+export interface Route {
+  type: 'blog' | 'post' | 'browser-services' | 'browser-collections' | 'browser-record' | 'new'
+  handle?: string
+  collection?: string
+  rkey?: string
+  service?: string
+}
+
+export function parseRoute(pathname: string): Route {
+  const parts = pathname.split('/').filter(Boolean)
+
+  // / - Blog top
+  if (parts.length === 0) {
+    return { type: 'blog' }
+  }
+
+  // /new - New post form
+  if (parts[0] === 'new') {
+    return { type: 'new' }
+  }
+
+  // /app - SPA entry point (same as blog)
+  if (parts[0] === 'app') {
+    return { type: 'blog' }
+  }
+
+  // /post - New post form (no rkey)
+  // /post/${rkey} - Post detail
+  if (parts[0] === 'post') {
+    if (parts[1]) {
+      return { type: 'post', rkey: parts[1] }
+    }
+    return { type: 'new' }
+  }
+
+  // /at/${handle} - Browser services
+  // /at/${handle}/${service-or-collection} - Browser collections or records
+  // /at/${handle}/${collection}/${rkey} - Browser record detail
+  if (parts[0] === 'at' && parts[1]) {
+    const handle = parts[1]
+
+    if (!parts[2]) {
+      // /at/${handle}
+      return { type: 'browser-services', handle }
+    }
+
+    if (!parts[3]) {
+      // /at/${handle}/${service-or-collection}
+      // If it looks like a domain (2 parts), treat as service
+      // Otherwise treat as collection NSID (3+ parts)
+      const segment = parts[2]
+      if (segment.split('.').length <= 2) {
+        // Likely a service domain like "bsky.app"
+        return { type: 'browser-collections', handle, service: segment }
+      } else {
+        // Likely a collection NSID like "app.bsky.feed.post"
+        // Show record list for this collection
+        return { type: 'browser-record', handle, collection: segment }
+      }
+    }
+
+    // /at/${handle}/${collection}/${rkey}
+    return { type: 'browser-record', handle, collection: parts[2], rkey: parts[3] }
+  }
+
+  // Fallback to blog
+  return { type: 'blog' }
+}
+
+export function buildPath(route: Route): string {
+  switch (route.type) {
+    case 'blog':
+      return '/'
+    case 'new':
+      return '/new'
+    case 'post':
+      return `/post/${route.rkey}`
+    case 'browser-services':
+      return `/at/${route.handle}`
+    case 'browser-collections':
+      return `/at/${route.handle}/${route.service}`
+    case 'browser-record':
+      if (route.rkey) {
+        return `/at/${route.handle}/${route.collection}/${route.rkey}`
+      }
+      return `/at/${route.handle}/${route.collection}`
+    default:
+      return '/'
+  }
+}
+
+export function navigate(path: string): void {
+  window.history.pushState({}, '', path)
+  window.dispatchEvent(new PopStateEvent('popstate'))
+}
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,9 +6,21 @@ import { mountPostList, mountPostDetail } from './components/posts.js'
 import { mountHeader } from './components/browser.js'
 import { mountAtBrowser } from './components/atbrowser.js'
 import { mountPostForm } from './components/postform.js'
+import { parseRoute, type Route } from './lib/router.js'
 import type { AppConfig, Networks } from './types.js'

 let authSession: AuthSession | null = null
+let config: AppConfig
+
+// Browser state
+let browserMode = false
+let browserState = {
+  handle: '',
+  collection: null as string | null,
+  rkey: null as string | null,
+  service: null as string | null
+}
+let savedContent: { profile: string; content: string } | null = null

 async function loadConfig(): Promise<AppConfig> {
  const res = await fetch('/config.json')
@@ -30,25 +42,504 @@ function renderFooter(handle: string): string {
  `
 }

-function renderTabs(handle: string, mode: string | null, isLoggedIn: boolean): string {
-  const blogActive = !mode || mode === 'blog' ? 'active' : ''
-  const browserActive = mode === 'browser' ? 'active' : ''
-  const postActive = mode === 'post' ? 'active' : ''
-
+function renderTabs(activeTab: 'blog' | 'browser' | 'new', isLoggedIn: boolean): string {
  let tabs = `
-    <a href="?handle=${handle}" class="tab ${blogActive}">Blog</a>
-    <a href="?mode=browser&handle=${handle}" class="tab ${browserActive}">Browser</a>
+    <a href="/" class="tab ${activeTab === 'blog' ? 'active' : ''}" id="blog-tab">Blog</a>
+    <button type="button" class="tab ${activeTab === 'browser' ? 'active' : ''}" id="browser-tab" data-handle="${config.handle}">Browser</button>
  `

  if (isLoggedIn) {
-    tabs += `<a href="?mode=post&handle=${handle}" class="tab ${postActive}">Post</a>`
+    tabs += `<a href="/post" class="tab ${activeTab === 'new' ? 'active' : ''}">Post</a>`
  }

  return `<div class="mode-tabs">${tabs}</div>`
 }

+// Browser functions (page-based, not modal)
+function openBrowser(handle: string, service: string | null = null, collection: string | null = null, rkey: string | null = null): void {
+  const contentEl = document.getElementById('content')
+  const tabsEl = document.querySelector('.mode-tabs')
+
+  if (!contentEl || !tabsEl) return
+
+  // Save current content if not already in browser mode
+  if (!browserMode) {
+    savedContent = {
+      profile: '', // Not used anymore
+      content: contentEl.innerHTML
+    }
+  }
+
+  browserMode = true
+  browserState = { handle, service, collection, rkey }
+
+  // Update tabs to show browser as active
+  const blogTab = tabsEl.querySelector('#blog-tab, a[href="/"]')
+  const browserTab = tabsEl.querySelector('#browser-tab')
+  if (blogTab) blogTab.classList.remove('active')
+  if (browserTab) browserTab.classList.add('active')
+
+  // Show skeleton UI immediately
+  contentEl.innerHTML = `
+    <div class="browser-skeleton">
+      <div class="skeleton-header">
+        <div class="skeleton-title"></div>
+      </div>
+      <ul class="skeleton-list">
+        <li class="skeleton-item"><div class="skeleton-icon"></div><div class="skeleton-text"></div></li>
+        <li class="skeleton-item"><div class="skeleton-icon"></div><div class="skeleton-text"></div></li>
+        <li class="skeleton-item"><div class="skeleton-icon"></div><div class="skeleton-text"></div></li>
+      </ul>
+    </div>
+  `
+
+  // Load browser content
+  loadBrowserContent()
+}
+
+function closeBrowser(): void {
+  if (!browserMode || !savedContent) return
+
+  const contentEl = document.getElementById('content')
+  const tabsEl = document.querySelector('.mode-tabs')
+
+  if (!contentEl || !tabsEl) return
+
+  // Restore saved content
+  contentEl.innerHTML = savedContent.content
+
+  // Update tabs to show blog as active
+  const blogTab = tabsEl.querySelector('#blog-tab, a[href="/"]')
+  const browserTab = tabsEl.querySelector('#browser-tab')
+  if (blogTab) blogTab.classList.add('active')
+  if (browserTab) browserTab.classList.remove('active')
+
+  browserMode = false
+  browserState = { handle: '', service: null, collection: null, rkey: null }
+  savedContent = null
+}
+
+async function loadBrowserContent(): Promise<void> {
+  const contentEl = document.getElementById('content')
+  if (!contentEl) return
+
+  const loginDid = authSession?.did || null
+  await mountAtBrowser(
+    contentEl,
+    browserState.handle,
+    browserState.collection,
+    browserState.rkey,
+    browserState.service,
+    loginDid
+  )
+}
+
+// Add edit button to static post page
+async function addEditButtonToStaticPost(collection: string, rkey: string, session: AuthSession): Promise<void> {
+  const postMeta = document.querySelector('.post-meta')
+  if (!postMeta) return
+
+  // Check if user owns this post
+  const profile = await getProfile(config.handle)
+  if (session.did !== profile.did) return
+
+  // Add edit button
+  const editBtn = document.createElement('button')
+  editBtn.className = 'edit-btn'
+  editBtn.id = 'edit-btn'
+  editBtn.textContent = 'edit'
+  postMeta.appendChild(editBtn)
+
+  // Get current post content
+  const titleEl = document.querySelector('.post-title') as HTMLElement
+  const contentEl = document.querySelector('.post-content') as HTMLElement
+  const postArticle = document.querySelector('.post-detail') as HTMLElement
+
+  if (!titleEl || !contentEl || !postArticle) return
+
+  const originalTitle = titleEl.textContent || ''
+  // Get original markdown from the record
+  const record = await getRecord(profile.did, collection, rkey)
+  if (!record) return
+
+  // Create edit form
+  const editFormContainer = document.createElement('div')
+  editFormContainer.className = 'edit-form-container'
+  editFormContainer.id = 'edit-form-container'
+  editFormContainer.style.display = 'none'
+  editFormContainer.innerHTML = `
+    <h3>Edit Post</h3>
+    <form class="edit-form" id="edit-form">
+      <input type="text" id="edit-title" class="edit-form-title" value="${escapeHtml(originalTitle)}" placeholder="Title" required>
+      <textarea id="edit-content" class="edit-form-body" placeholder="Content" required>${escapeHtml(record.content)}</textarea>
+      <div class="edit-form-footer">
+        <button type="button" id="edit-cancel" class="edit-cancel-btn">Cancel</button>
+        <button type="submit" id="edit-submit" class="edit-submit-btn">Save</button>
+      </div>
+    </form>
+  `
+  postArticle.parentNode?.insertBefore(editFormContainer, postArticle.nextSibling)
+
+  // Event listeners
+  editBtn.addEventListener('click', () => {
+    postArticle.style.display = 'none'
+    editFormContainer.style.display = 'block'
+  })
+
+  document.getElementById('edit-cancel')?.addEventListener('click', () => {
+    postArticle.style.display = 'block'
+    editFormContainer.style.display = 'none'
+  })
+
+  document.getElementById('edit-form')?.addEventListener('submit', async (e) => {
+    e.preventDefault()
+    const title = (document.getElementById('edit-title') as HTMLInputElement).value
+    const content = (document.getElementById('edit-content') as HTMLTextAreaElement).value
+    const submitBtn = document.getElementById('edit-submit') as HTMLButtonElement
+
+    try {
+      submitBtn.disabled = true
+      submitBtn.textContent = 'Saving...'
+
+      const { putRecord } = await import('./lib/auth.js')
+      await putRecord(collection, rkey, {
+        title,
+        content,
+        createdAt: record.createdAt,
+      })
+
+      window.location.reload()
+    } catch (err) {
+      alert('Save failed: ' + err)
+      submitBtn.disabled = false
+      submitBtn.textContent = 'Save'
+    }
+  })
+}
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+// Refresh post list from API (for static pages)
+async function refreshPostListFromAPI(): Promise<void> {
+  const contentEl = document.getElementById('content')
+  if (!contentEl) return
+
+  try {
+    const profile = await getProfile(config.handle)
+    const apiPosts = await listRecords(profile.did, config.collection)
+
+    // Get current static post rkeys
+    const staticPostLinks = contentEl.querySelectorAll('.post-item a.post-link')
+    const staticRkeys = new Set<string>()
+    staticPostLinks.forEach(link => {
+      const href = link.getAttribute('href')
+      if (href) {
+        // Handle both /post/rkey and /post/rkey/ (trailing slash)
+        const parts = href.split('/').filter(Boolean)
+        const rkey = parts[parts.length - 1]
+        if (rkey) staticRkeys.add(rkey)
+      }
+    })
+
+    // Find new posts not in static content
+    const newPosts = apiPosts.filter(post => {
+      const rkey = post.uri.split('/').pop()
+      return rkey && !staticRkeys.has(rkey)
+    })
+
+    // Find deleted posts (in static but not in API)
+    const apiRkeys = new Set(apiPosts.map(p => p.uri.split('/').pop()))
+    const deletedRkeys = new Set<string>()
+    staticRkeys.forEach(rkey => {
+      if (!apiRkeys.has(rkey)) {
+        deletedRkeys.add(rkey)
+      }
+    })
+
+    // Remove deleted posts from DOM
+    if (deletedRkeys.size > 0) {
+      staticPostLinks.forEach(link => {
+        const href = link.getAttribute('href')
+        if (href) {
+          const parts = href.split('/').filter(Boolean)
+          const rkey = parts[parts.length - 1]
+          if (rkey && deletedRkeys.has(rkey)) {
+            const listItem = link.closest('.post-item')
+            listItem?.remove()
+          }
+        }
+      })
+    }
+
+    // Add new posts at the top
+    if (newPosts.length > 0) {
+      const postList = contentEl.querySelector('.post-list')
+      if (postList) {
+        const newPostsHtml = newPosts.map(post => {
+          const rkey = post.uri.split('/').pop()
+          const date = new Date(post.createdAt).toLocaleDateString('ja-JP', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+          })
+          return `
+            <li class="post-item post-item-new">
+              <a href="/post/${rkey}" class="post-link">
+                <span class="post-title">${escapeHtml(post.title)}</span>
+                <span class="post-date">${date}</span>
+              </a>
+            </li>
+          `
+        }).join('')
+        postList.insertAdjacentHTML('afterbegin', newPostsHtml)
+      }
+    }
+  } catch (err) {
+    console.error('Failed to refresh posts from API:', err)
+  }
+}
+
+function setupEventHandlers(): void {
+  document.addEventListener('click', (e) => {
+    const target = e.target as HTMLElement
+
+    // Blog tab click - close browser and go back
+    if (target.id === 'blog-tab' || target.closest('#blog-tab')) {
+      if (browserMode) {
+        e.preventDefault()
+        closeBrowser()
+        return
+      }
+    }
+
+    // Browser tab button
+    if (target.id === 'browser-tab' || target.closest('#browser-tab')) {
+      e.preventDefault()
+      const btn = (target.closest('#browser-tab') || target) as HTMLElement
+      const handle = btn.dataset.handle || config.handle
+      openBrowser(handle)
+      return
+    }
+
+    // JSON button click (on post detail page)
+    const jsonBtn = target.closest('.json-btn') as HTMLAnchorElement
+    if (jsonBtn) {
+      const href = jsonBtn.getAttribute('href')
+      if (href?.startsWith('/at/')) {
+        e.preventDefault()
+        const parts = href.split('/').filter(Boolean)
+        // /at/handle/collection/rkey
+        if (parts.length >= 4) {
+          openBrowser(parts[1], null, parts[2], parts[3])
+        }
+        return
+      }
+    }
+
+    // Service item click (on static page or in browser view)
+    if (target.closest('.service-item')) {
+      e.preventDefault()
+      const link = target.closest('.service-item') as HTMLAnchorElement
+      const href = link.getAttribute('href')
+      if (href) {
+        // Parse /at/handle/service from href
+        const parts = href.split('/').filter(Boolean)
+        if (parts[0] === 'at' && parts[1] && parts[2]) {
+          openBrowser(parts[1], parts[2])
+        }
+      }
+      return
+    }
+
+    // Links inside browser content
+    const contentEl = document.getElementById('content')
+    if (browserMode && contentEl?.contains(target)) {
+      const link = target.closest('a')
+      if (link) {
+        const href = link.getAttribute('href')
+        if (href?.startsWith('/at/')) {
+          e.preventDefault()
+          const parts = href.split('/').filter(Boolean)
+          // /at/handle, /at/handle/service, /at/handle/collection, /at/handle/collection/rkey
+          if (parts.length >= 2) {
+            const handle = parts[1]
+            let service = null
+            let collection = null
+            let rkey = null
+
+            if (parts.length === 3) {
+              // Could be service or collection
+              const segment = parts[2]
+              if (segment.split('.').length <= 2) {
+                service = segment
+              } else {
+                collection = segment
+              }
+            } else if (parts.length >= 4) {
+              collection = parts[2]
+              rkey = parts[3]
+            }
+
+            openBrowser(handle, service, collection, rkey)
+          }
+        }
+      }
+    }
+  })
+}
+
+async function render(): Promise<void> {
+  const route = parseRoute(window.location.pathname)
+  const appEl = document.getElementById('app')
+  const isStatic = appEl?.dataset.static === 'true'
+
+  const profileEl = document.getElementById('profile')
+  const contentEl = document.getElementById('content')
+  const headerEl = document.getElementById('header')
+  const footerEl = document.getElementById('footer')
+
+  if (!profileEl || !contentEl || !headerEl) return
+
+  const isLoggedIn = !!authSession
+  const handle = route.handle || config.handle
+
+  // Skip re-rendering for static blog/post pages (but still mount header for login)
+  const isStaticRoute = route.type === 'blog' || route.type === 'post'
+  if (isStatic && isStaticRoute) {
+    // Only mount header for login functionality (pass isStatic=true to skip unnecessary re-render)
+    mountHeader(headerEl, handle, isLoggedIn, authSession?.handle, {
+      onBrowse: (newHandle) => {
+        openBrowser(newHandle)
+      },
+      onLogin: async () => {
+        const inputHandle = (document.getElementById('header-input') as HTMLInputElement)?.value || handle
+        try {
+          await login(inputHandle)
+        } catch (err) {
+          console.error('Login error:', err)
+          alert('Login failed: ' + err)
+        }
+      },
+      onLogout: async () => {
+        await logout()
+        window.location.reload()
+      }
+    }, true)
+
+    // Update tabs to show Post tab if logged in
+    if (isLoggedIn) {
+      const tabsEl = document.querySelector('.mode-tabs')
+      if (tabsEl && !tabsEl.querySelector('a[href="/post"]')) {
+        tabsEl.insertAdjacentHTML('beforeend', '<a href="/post" class="tab">Post</a>')
+      }
+    }
+
+    // For post pages, add edit button if logged in and can edit
+    if (route.type === 'post' && isLoggedIn && route.rkey) {
+      addEditButtonToStaticPost(config.collection, route.rkey, authSession!)
+    }
+
+    // For blog top page, check for new posts from API and merge
+    if (route.type === 'blog') {
+      refreshPostListFromAPI()
+    }
+
+    return // Skip content re-rendering
+  }
+
+  // Footer
+  if (footerEl) {
+    footerEl.innerHTML = renderFooter(config.handle)
+  }
+
+  // Header with login
+  mountHeader(headerEl, handle, isLoggedIn, authSession?.handle, {
+    onBrowse: (newHandle) => {
+      openBrowser(newHandle)
+    },
+    onLogin: async () => {
+      const inputHandle = (document.getElementById('header-input') as HTMLInputElement)?.value || handle
+      try {
+        await login(inputHandle)
+      } catch (err) {
+        console.error('Login error:', err)
+        alert('Login failed: ' + err)
+      }
+    },
+    onLogout: async () => {
+      await logout()
+      window.location.reload()
+    }
+  })
+
+  // Route handling
+  switch (route.type) {
+    case 'new':
+      if (isLoggedIn) {
+        profileEl.innerHTML = renderTabs('new', isLoggedIn)
+        mountPostForm(contentEl, config.collection, () => {
+          window.location.href = '/'
+        })
+      } else {
+        window.location.href = '/'
+      }
+      break
+
+    case 'post':
+      try {
+        const profile = await getProfile(config.handle)
+        profileEl.innerHTML = renderTabs('blog', isLoggedIn)
+        const profileContentEl = document.createElement('div')
+        profileEl.appendChild(profileContentEl)
+        mountProfile(profileContentEl, profile)
+
+        const servicesHtml = await renderServices(config.handle)
+        profileContentEl.insertAdjacentHTML('beforeend', servicesHtml)
+
+        const post = await getRecord(profile.did, config.collection, route.rkey!)
+        if (post) {
+          const canEdit = isLoggedIn && authSession?.did === profile.did
+          mountPostDetail(contentEl, post, config.handle, config.collection, canEdit)
+        } else {
+          contentEl.innerHTML = '<p>Post not found</p>'
+        }
+      } catch (err) {
+        console.error(err)
+        contentEl.innerHTML = `<p class="error">Failed to load: ${err}</p>`
+      }
+      break
+
+    case 'blog':
+    default:
+      try {
+        const profile = await getProfile(config.handle)
+        profileEl.innerHTML = renderTabs('blog', isLoggedIn)
+        const profileContentEl = document.createElement('div')
+        profileEl.appendChild(profileContentEl)
+        mountProfile(profileContentEl, profile)
+
+        const servicesHtml = await renderServices(config.handle)
+        profileContentEl.insertAdjacentHTML('beforeend', servicesHtml)
+
+        const posts = await listRecords(profile.did, config.collection)
+        mountPostList(contentEl, posts)
+      } catch (err) {
+        console.error(err)
+        contentEl.innerHTML = `<p class="error">Failed to load: ${err}</p>`
+      }
+      break
+  }
+}
+
 async function init(): Promise<void> {
-  const [config, networks] = await Promise.all([loadConfig(), loadNetworks()])
+  const [configData, networks] = await Promise.all([loadConfig(), loadNetworks()])
+  config = configData

  // Set page title
  document.title = config.title || 'ailog'
@@ -70,102 +561,17 @@ async function init(): Promise<void> {
  if (callbackSession) {
    authSession = callbackSession
  } else {
-    // Try to restore existing session
    authSession = await restoreSession()
  }

-  const params = new URLSearchParams(window.location.search)
-  const mode = params.get('mode')
-  const rkey = params.get('rkey')
-  const collection = params.get('collection')
-  const service = params.get('service')
-  const handle = params.get('handle') || config.handle
+  // Setup event handlers
+  setupEventHandlers()

-  const profileEl = document.getElementById('profile')
-  const contentEl = document.getElementById('content')
-  const headerEl = document.getElementById('header')
-  const footerEl = document.getElementById('footer')
+  // Initial render
+  await render()

-  if (!profileEl || !contentEl || !headerEl) return
-
-  // Footer
-  if (footerEl) {
-    footerEl.innerHTML = renderFooter(config.handle)
-  }
-
-  const isLoggedIn = !!authSession
-
-  // Header with login
-  mountHeader(headerEl, handle, isLoggedIn, authSession?.handle, {
-    onBrowse: (newHandle) => {
-      const currentMode = params.get('mode')
-      if (currentMode === 'browser') {
-        window.location.href = `?mode=browser&handle=${newHandle}`
-      } else {
-        window.location.href = `?handle=${newHandle}`
-      }
-    },
-    onLogin: async () => {
-      const inputHandle = (document.getElementById('header-input') as HTMLInputElement)?.value || handle
-      try {
-        await login(inputHandle)
-      } catch (err) {
-        console.error('Login error:', err)
-        alert('Login failed: ' + err)
-      }
-    },
-    onLogout: async () => {
-      await logout()
-      window.location.reload()
-    }
-  })
-
-  // Post mode (requires login)
-  if (mode === 'post' && isLoggedIn) {
-    profileEl.innerHTML = renderTabs(handle, mode, isLoggedIn)
-    mountPostForm(contentEl, config.collection, () => {
-      window.location.href = `?handle=${handle}`
-    })
-    return
-  }
-
-  // AT Browser mode
-  if (mode === 'browser') {
-    profileEl.innerHTML = renderTabs(handle, mode, isLoggedIn)
-    const loginDid = authSession?.did || null
-    await mountAtBrowser(contentEl, handle, collection, rkey, service, loginDid)
-    return
-  }
-
-  // Blog mode (default)
-  try {
-    const profile = await getProfile(handle)
-
-    profileEl.innerHTML = renderTabs(handle, mode, isLoggedIn)
-    const profileContentEl = document.createElement('div')
-    profileEl.appendChild(profileContentEl)
-    mountProfile(profileContentEl, profile)
-
-    // Add services
-    const servicesHtml = await renderServices(handle)
-    profileContentEl.insertAdjacentHTML('beforeend', servicesHtml)
-
-    if (rkey) {
-      const post = await getRecord(profile.did, config.collection, rkey)
-      if (post) {
-        const canEdit = isLoggedIn && authSession?.did === profile.did
-        mountPostDetail(contentEl, post, handle, config.collection, canEdit)
-      } else {
-        contentEl.innerHTML = '<p>Post not found</p>'
-      }
-    } else {
-      const posts = await listRecords(profile.did, config.collection)
-      mountPostList(contentEl, posts)
-    }
-  } catch (err) {
-    console.error(err)
-    contentEl.innerHTML = `<p class="error">Failed to load: ${err}</p>`
-  }
+  // Handle browser navigation
+  window.addEventListener('popstate', () => render())
 }

 init()
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -289,6 +289,16 @@ body {
  color: #888;
 }

+/* New post from API (not in static) */
+.post-item-new {
+  animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 /* Post Detail */
 .post-detail {
  padding: 20px 0;
@@ -429,9 +439,139 @@ body {
 .post-content {
  font-size: 16px;
  line-height: 1.8;
-  white-space: pre-wrap;
 }

+/* Markdown Styles */
+.post-content h1,
+.post-content h2,
+.post-content h3,
+.post-content h4,
+.post-content h5,
+.post-content h6 {
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.post-content h1 { font-size: 1.75em; }
+.post-content h2 { font-size: 1.5em; }
+.post-content h3 { font-size: 1.25em; }
+.post-content h4 { font-size: 1.1em; }
+
+.post-content p {
+  margin-bottom: 1em;
+}
+
+.post-content ul,
+.post-content ol {
+  margin-bottom: 1em;
+  padding-left: 1.5em;
+}
+
+.post-content li {
+  margin-bottom: 0.25em;
+}
+
+.post-content a {
+  color: var(--btn-color);
+  text-decoration: none;
+}
+
+.post-content a:hover {
+  text-decoration: underline;
+}
+
+.post-content blockquote {
+  margin: 1em 0;
+  padding: 0.5em 1em;
+  border-left: 4px solid #ddd;
+  background: #f9f9f9;
+  color: #666;
+}
+
+.post-content code {
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  font-size: 0.9em;
+  padding: 0.15em 0.4em;
+  background: #f0f0f0;
+  border-radius: 4px;
+}
+
+.post-content pre {
+  margin: 1em 0;
+  padding: 1em;
+  background: #1e1e1e;
+  border-radius: 8px;
+  overflow-x: auto;
+}
+
+.post-content pre code {
+  display: block;
+  padding: 0;
+  background: transparent;
+  color: #d4d4d4;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.post-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+.post-content hr {
+  margin: 2em 0;
+  border: none;
+  border-top: 1px solid #eee;
+}
+
+.post-content table {
+  width: 100%;
+  margin: 1em 0;
+  border-collapse: collapse;
+}
+
+.post-content th,
+.post-content td {
+  padding: 0.5em;
+  border: 1px solid #ddd;
+  text-align: left;
+}
+
+.post-content th {
+  background: #f5f5f5;
+  font-weight: 600;
+}
+
+/* Highlight.js Theme Overrides */
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-built_in,
+.hljs-name,
+.hljs-tag { color: #569cd6; }
+.hljs-string,
+.hljs-title,
+.hljs-section,
+.hljs-attribute,
+.hljs-literal,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-addition { color: #ce9178; }
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion,
+.hljs-meta { color: #6a9955; }
+.hljs-number,
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-link { color: #b5cea8; }
+.hljs-function { color: #dcdcaa; }
+.hljs-attr { color: #9cdcfe; }
+
 .post-footer {
  margin-top: 32px;
  padding-top: 16px;
@@ -460,6 +600,96 @@ body {
  padding: 40px;
  text-align: center;
  color: #666;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.loading-spinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid #e0e0e0;
+  border-top-color: var(--btn-color);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Skeleton UI */
+.browser-skeleton {
+  padding: 16px 0;
+}
+
+.skeleton-header {
+  margin-bottom: 16px;
+}
+
+.skeleton-title {
+  width: 120px;
+  height: 20px;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 4px;
+}
+
+.skeleton-list {
+  list-style: none;
+}
+
+.skeleton-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 8px;
+  border-bottom: 1px solid #eee;
+}
+
+.skeleton-icon {
+  width: 24px;
+  height: 24px;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 4px;
+}
+
+.skeleton-text {
+  flex: 1;
+  height: 16px;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 4px;
+  max-width: 200px;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .skeleton-title,
+  .skeleton-icon,
+  .skeleton-text {
+    background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+  }
+  .skeleton-item {
+    border-color: #333;
+  }
 }

 /* Footer */
@@ -776,4 +1006,122 @@ body {
  .delete-btn:hover {
    background: #c82333;
  }
+  /* Dark mode markdown */
+  .post-content blockquote {
+    border-color: #444;
+    background: #1a1a1a;
+    color: #aaa;
+  }
+  .post-content code {
+    background: #2a2a2a;
+  }
+  .post-content th {
+    background: #2a2a2a;
+  }
+  .post-content th,
+  .post-content td {
+    border-color: #444;
+  }
+  .post-content hr {
+    border-color: #333;
+  }
+}
+
+/* Modal */
+.modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal[hidden] {
+  display: none;
+}
+
+.modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.modal-container {
+  position: relative;
+  width: 90%;
+  max-width: 800px;
+  max-height: 85vh;
+  background: #fff;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.modal-header h2 {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.modal-close {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: #666;
+  cursor: pointer;
+  border-radius: 6px;
+}
+
+.modal-close:hover {
+  background: #f0f0f0;
+  color: #333;
+}
+
+.modal-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+/* Browser tab button styling */
+button.tab {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+/* Dark mode modal */
+@media (prefers-color-scheme: dark) {
+  .modal-container {
+    background: #1a1a1a;
+  }
+  .modal-header {
+    border-color: #333;
+  }
+  .modal-header h2 {
+    color: #e0e0e0;
+  }
+  .modal-close {
+    color: #888;
+  }
+  .modal-close:hover {
+    background: #333;
+    color: #e0e0e0;
+  }
 }