add github

2025-06-13 22:48:00 +09:00
parent 33c166fa0c
commit 95cee69482
25 changed files with 2852 additions and 69 deletions
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -36,7 +36,8 @@
      "Bash(./target/release/ailog:*)",
      "Bash(rg:*)",
      "Bash(../target/release/ailog build)",
-      "Bash(zsh run.zsh:*)"
+      "Bash(zsh run.zsh:*)",
+      "Bash(hugo:*)"
    ],
    "deny": []
  }
--- a/.github/workflows/cloudflare-pages.yml
+++ b/.github/workflows/cloudflare-pages.yml
@@ -0,0 +1,66 @@
+name: Deploy to Cloudflare Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+    
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '21'
+
+      - name: Install dependencies
+        run: |
+          cd oauth
+          npm install
+
+      - name: Build OAuth app
+        run: |
+          cd oauth
+          npm run build
+          
+      - name: Copy OAuth build to static
+        run: |
+          mkdir -p my-blog/static/assets
+          cp -r oauth/dist/assets/* my-blog/static/assets/
+          cp oauth/dist/index.html my-blog/static/oauth/index.html || true
+          
+      - name: Setup Rust
+        uses: actions-rs/toolchain@v1
+        with:
+          toolchain: stable
+
+      - name: Build ailog
+        run: cargo build --release
+
+      - name: Build site with ailog
+        run: |
+          cd my-blog
+          ../target/release/ailog build
+
+      - name: List public directory
+        run: |
+          ls -la my-blog/public/
+          
+      - name: Deploy to Cloudflare Pages
+        uses: cloudflare/pages-action@v1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}
+          directory: my-blog/public
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+          wranglerVersion: '3'
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -1,62 +0,0 @@
-name: Deploy ailog
-
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  build-and-deploy:
-    runs-on: ubuntu-latest
-    
-    steps:
-    - uses: actions/checkout@v4
-    
-    - name: Install Rust
-      uses: actions-rs/toolchain@v1
-      with:
-        toolchain: stable
-        profile: minimal
-        override: true
-    
-    - name: Cache cargo registry
-      uses: actions/cache@v3
-      with:
-        path: ~/.cargo/registry
-        key: ${{ runner.os }}-cargo-registry-${{ hashFiles('**/Cargo.lock') }}
-    
-    - name: Cache cargo index
-      uses: actions/cache@v3
-      with:
-        path: ~/.cargo/git
-        key: ${{ runner.os }}-cargo-index-${{ hashFiles('**/Cargo.lock') }}
-    
-    - name: Cache cargo build
-      uses: actions/cache@v3
-      with:
-        path: target
-        key: ${{ runner.os }}-cargo-build-target-${{ hashFiles('**/Cargo.lock') }}
-    
-    - name: Build ailog
-      run: cargo build --release
-    
-    - name: Generate static site
-      run: |
-        ./target/release/ailog build my-blog
-        touch my-blog/public/.nojekyll
-        
-    - name: Setup Cloudflare Pages
-      run: |
-        # Cloudflare Pages用の設定
-        echo '/*    /index.html   200' > my-blog/public/_redirects
-        echo 'X-Frame-Options: DENY' > my-blog/public/_headers
-        echo 'X-Content-Type-Options: nosniff' >> my-blog/public/_headers
-    
-    - name: Deploy to GitHub Pages
-      uses: peaceiris/actions-gh-pages@v3
-      if: github.ref == 'refs/heads/main'
-      with:
-        github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ./my-blog/public
-        publish_branch: gh-pages
--- a/.gitignore
+++ b/.gitignore
@@ -5,8 +5,8 @@
 *.swo
 *~
 .DS_Store
-cloudflare*
-my-blog
+cloudflare-config.yml
+my-blog/public/
 dist
-package-lock.json
 node_modules
+package-lock.json 
--- a/cloudflared-config.yml
+++ b/cloudflared-config.yml
@@ -0,0 +1,18 @@
+tunnel: ec5a422d-7678-4e73-bf38-6105ffd4766a
+credentials-file: /Users/syui/.cloudflared/ec5a422d-7678-4e73-bf38-6105ffd4766a.json
+
+ingress:
+  - hostname: log.syui.ai
+    service: http://localhost:4173
+    originRequest:
+      noHappyEyeballs: true
+ 
+  - hostname: ollama.syui.ai
+    service: http://localhost:11434
+    originRequest:
+      noHappyEyeballs: true
+      httpHostHeader: "localhost:11434"
+      # Cloudflare Accessを無効化する場合は以下をコメントアウト
+      # accessPolicy: bypass
+      
+  - service: http_status:404
--- a/my-blog/config.toml
+++ b/my-blog/config.toml
@@ -0,0 +1,29 @@
+[site]
+title = "syui.ai"
+description = "a blog powered by ailog"
+base_url = "https://syui.ai"
+language = "ja"
+author = "syui"
+
+[build]
+highlight_code = true
+minify = false
+
+[ai]
+enabled = true
+auto_translate = false
+comment_moderation = false
+ask_ai = true
+provider = "ollama"
+model = "gemma3:2b"
+host = "https://ollama.syui.ai"
+system_prompt = "you are a helpful ai assistant trained on this blog's content. you can answer questions about the articles, provide insights, and help users understand the topics discussed."
+ai_did = "did:plc:4hqjfn7m6n5hno3doamuhgef"
+
+[oauth]
+json = "client-metadata.json"
+redirect = "oauth/callback"
+admin = "did:plc:uqzpqmrjnptsxezjx4xuh2mn"
+collection_comment = "ai.syui.log"
+collection_user = "ai.syui.log.user"
+collection_chat = "ai.syui.log.chat"
--- a/my-blog/content/posts/2025-06-06-ailog.md
+++ b/my-blog/content/posts/2025-06-06-ailog.md
@@ -0,0 +1,137 @@
+---
+title: "静的サイトジェネレータを作った"
+slug: "ailog-system-introduction"
+date: "2025-06-12"
+tags: ["blog", "rust", "mcp", "atp"]
+language: ["ja", "en"]
+---
+
+rustで静的サイトジェネレータを作ることにしました。[ailog](https://git.syui.ai/ai/log)といいます。`hugo`からの移行になります。
+
+ブログを書く環境もこれから変わってくると思っていて、例えば、`docs`, `readme`, `blog`などはAIが生成、または支援することになるだろうと予測しています。langの自動生成もAIが担当することになるでしょう。
+
+これは、音声に限らず、プログラミング言語から、osなど、様々なtranslateがAIの自動生成になるかもしれません。
+
+`ailog`は、最初にatproto-comment-system(oauth)とask-AIというAI機能をつけました。
+
+## quick start
+
+```sh
+$ git clone https://git.syui.ai/ai/log
+$ cd log
+$ cargo build
+$ ./target/debug/ailog init my-blog
+$ ./target/debug/ailog server my-blog
+```
+
+## install
+
+```sh
+$ cargo install --path .
+---
+$ export CARGO_HOME="$HOME/.cargo"
+$ export RUSTUP_HOME="$HOME/.rustup"
+$ export PATH="$HOME/.cargo/bin:$PATH"
+---
+$ which ailog
+$ ailog
+```
+
+## build deploy
+
+```sh
+$ cd my-blog
+$ vim config.toml
+$ ailog new test
+$ vim content/posts/`date +"%Y-%m-%d"`.md
+$ ailog build
+
+# publicの中身をweb-serverにdeploy
+$ cp -rf ./public/* ./web-server/root/
+```
+
+## atproto-comment-system
+
+### example
+
+```sh
+$ cd ./oauth
+$ npm i
+$ npm run build
+$ npm run preview
+```
+
+```sh
+# Production environment variables
+VITE_APP_HOST=https://example.com
+VITE_OAUTH_CLIENT_ID=https://example.com/client-metadata.json
+VITE_OAUTH_REDIRECT_URI=https://example.com/oauth/callback
+VITE_ADMIN_DID=did:plc:uqzpqmrjnptsxezjx4xuh2mn
+
+# Collection names for OAuth app
+VITE_COLLECTION_COMMENT=ai.syui.log
+VITE_COLLECTION_USER=ai.syui.log.user
+VITE_COLLECTION_CHAT=ai.syui.log.chat
+
+# Collection names for ailog (backward compatibility)
+AILOG_COLLECTION_COMMENT=ai.syui.log
+AILOG_COLLECTION_USER=ai.syui.log.user
+
+# API Configuration
+VITE_BSKY_PUBLIC_API=https://public.api.bsky.app
+```
+
+### 解説
+
+簡単に説明すると、`./oauth`で生成するのが`atproto-comment-system`です。
+
+```html
+<script type="module" crossorigin src="/assets/comment-atproto-${hash}}.js"></script>
+<link rel="stylesheet" crossorigin href="/assets/comment-atproto-${hash}.css">
+<section class="comment-section"> <div id="comment-atproto"></div> </section>
+```
+
+ただし、oauthであるため、色々と大変です。本番環境(もしくは近い形)でテストを行いましょう。cf, tailscale, ngrokなど。
+
+```yml:cloudflared-config.yml
+tunnel: ${hash}
+credentials-file: ${path}.json
+
+ingress:
+  - hostname: example.com
+    service: http://localhost:4173
+    originRequest:
+      noHappyEyeballs: true
+      
+  - service: http_status:404
+```
+
+```sh
+# tunnel list, dnsに登録が必要です
+$ cloudflared tunnel list
+$ cloudflared tunnel --config cloudflared-config.yml run
+$ cloudflared tunnel route dns ${uuid} example.com
+```
+
+以下の2つのcollection recordを生成します。ユーザーには`ai.syui.log`が生成され、ここにコメントが記録されます。それを取得して表示しています。`ai.syui.log.user`は管理者である`VITE_ADMIN_DID`用です。
+
+```sh
+VITE_COLLECTION_COMMENT=ai.syui.log
+VITE_COLLECTION_USER=ai.syui.log.user
+```
+
+```sh
+$ ailog auth login
+$ ailog stream server
+```
+
+このコマンドで`ai.syui.log`を`jetstream`から監視して、書き込みがあれば、管理者の`ai.syui.log.user`に記録され、そのuser-listに基づいて、コメント一覧を取得します。
+
+つまり、コメント表示のアカウントを手動で設定するか、自動化するか。自動化するならserverで`ailog stream server`を動かさなければいけません。
+
+## ask-AI
+
+`ask-AI`の仕組みは割愛します。後に変更される可能性が高いと思います。
+
+local llm, mcp, atprotoと組み合わせです。
+
--- a/my-blog/static/.well-known/jwks.json
+++ b/my-blog/static/.well-known/jwks.json
@@ -0,0 +1,14 @@
+{
+  "keys": [
+    {
+      "kty": "EC",
+      "crv": "P-256",
+      "x": "mock_x_coordinate_base64url",
+      "y": "mock_y_coordinate_base64url",
+      "d": "mock_private_key_base64url",
+      "use": "sig",
+      "kid": "ai-card-oauth-key-1",
+      "alg": "ES256"
+    }
+  ]
+}
--- a/my-blog/static/_headers
+++ b/my-blog/static/_headers
@@ -0,0 +1,30 @@
+/*
+  X-Frame-Options: DENY
+  X-Content-Type-Options: nosniff
+  Referrer-Policy: strict-origin-when-cross-origin
+  X-XSS-Protection: 1; mode=block
+  Permissions-Policy: camera=(), microphone=(), geolocation=()
+
+# OAuth specific headers
+/oauth/*
+  Access-Control-Allow-Origin: https://bsky.social
+  Access-Control-Allow-Methods: GET, POST, OPTIONS
+  Access-Control-Allow-Headers: Content-Type, Authorization
+
+# Static assets caching
+/assets/*
+  Cache-Control: public, max-age=31536000, immutable
+
+/css/*
+  Cache-Control: public, max-age=31536000, immutable
+
+/*.js
+  Cache-Control: public, max-age=31536000, immutable
+
+/posts/*
+  Cache-Control: public, max-age=3600
+
+# Client metadata for OAuth
+/client-metadata.json
+  Content-Type: application/json
+  Cache-Control: public, max-age=3600
--- a/my-blog/static/_redirects
+++ b/my-blog/static/_redirects
@@ -0,0 +1,11 @@
+# AI機能をai.gpt MCP serverにリダイレクト
+/api/ask https://ai-gpt-mcp.syui.ai/ask 200
+
+# Ollama API proxy (Cloudflare Workers)
+/api/ollama-proxy https://ollama-proxy.YOUR-SUBDOMAIN.workers.dev/:splat 200
+
+# OAuth routes
+/oauth/* /oauth/index.html 200
+
+# SPA routing support
+/*    /index.html   200
--- a/my-blog/static/assets/comment-atproto-B330B6QX.css
+++ b/my-blog/static/assets/comment-atproto-B330B6QX.css
--- a/my-blog/static/assets/comment-atproto-CDastf61.js
+++ b/my-blog/static/assets/comment-atproto-CDastf61.js
--- a/my-blog/static/client-metadata.json
+++ b/my-blog/static/client-metadata.json
@@ -0,0 +1,24 @@
+{
+  "client_id": "https://syui.ai/client-metadata.json",
+  "client_name": "ai.card",
+  "client_uri": "https://syui.ai",
+  "logo_uri": "https://syui.ai/favicon.ico",
+  "tos_uri": "https://syui.ai/terms",
+  "policy_uri": "https://syui.ai/privacy",
+  "redirect_uris": [
+    "https://syui.ai/oauth/callback",
+    "https://syui.ai/"
+  ],
+  "response_types": [
+    "code"
+  ],
+  "grant_types": [
+    "authorization_code",
+    "refresh_token"
+  ],
+  "token_endpoint_auth_method": "none",
+  "scope": "atproto transition:generic",
+  "subject_type": "public",
+  "application_type": "web",
+  "dpop_bound_access_tokens": true
+}
--- a/my-blog/static/css/style.css
+++ b/my-blog/static/css/style.css
--- a/my-blog/static/index.html
+++ b/my-blog/static/index.html
@@ -0,0 +1,3 @@
+<!-- OAuth Comment System - Load globally for session management -->
+<script type="module" crossorigin src="/assets/comment-atproto-CDastf61.js"></script>
+<link rel="stylesheet" crossorigin href="/assets/comment-atproto-B330B6QX.css">
--- a/my-blog/templates/base.html
+++ b/my-blog/templates/base.html
@@ -0,0 +1,360 @@
+<!DOCTYPE html>
+<html lang="{{ config.language }}">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}{{ config.title }}{% endblock %}</title>
+    <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    {% include "oauth-assets.html" %}
+    {% block head %}{% endblock %}
+</head>
+<body>
+    <div class="container">
+        <header class="main-header">
+            <div class="header-content">
+                <h1><a href="/" class="site-title">{{ config.title }}</a></h1>
+                <div class="header-actions">
+                    <!-- Ask AI button on all pages -->
+                    <button class="ask-ai-btn" onclick="toggleAskAI()" id="askAiButton">
+                        <span class="ai-icon">🤖</span>
+                        Ask AI
+                    </button>
+                </div>
+            </div>
+        </header>
+
+        <!-- Ask AI panel on all pages -->
+        <div class="ask-ai-panel" id="askAiPanel" style="display: none;">
+            <div class="ask-ai-content">
+                <!-- Authentication check -->
+                <div id="authCheck" class="auth-check">
+                    <p>🔒 Please login with ATProto to use Ask AI feature</p>
+                </div>
+                
+                <!-- Chat form (hidden until authenticated) -->
+                <div id="chatForm" class="ask-ai-form" style="display: none;">
+                    <input type="text" id="aiQuestion" placeholder="What would you like to know?" />
+                    <button onclick="askQuestion()" id="askButton">Ask</button>
+                </div>
+                
+                <!-- Chat history -->
+                <div id="chatHistory" class="chat-history" style="display: none;"></div>
+            </div>
+        </div>
+        
+        <main class="main-content">
+            {% block content %}{% endblock %}
+        </main>
+
+        {% block sidebar %}{% endblock %}
+    </div>
+    
+    <footer class="main-footer">
+        <p>&copy; {{ config.author }}</p>
+    </footer>
+
+    <script>
+        function toggleAskAI() {
+            const panel = document.getElementById('askAiPanel');
+            const isVisible = panel.style.display !== 'none';
+            panel.style.display = isVisible ? 'none' : 'block';
+            
+            if (!isVisible) {
+                checkAuthenticationStatus();
+            }
+        }
+
+        function checkAuthenticationStatus() {
+            const userSections = document.querySelectorAll('.user-section');
+            const isAuthenticated = userSections.length > 0;
+            
+            if (isAuthenticated) {
+                // User is authenticated - show Ask AI UI
+                document.getElementById('authCheck').style.display = 'none';
+                document.getElementById('chatForm').style.display = 'block';
+                document.getElementById('chatHistory').style.display = 'block';
+                
+                // Show initial greeting if chat history is empty
+                const chatHistory = document.getElementById('chatHistory');
+                if (chatHistory.children.length === 0) {
+                    showInitialGreeting();
+                }
+                
+                // Focus after a small delay to ensure element is visible
+                setTimeout(() => {
+                    document.getElementById('aiQuestion').focus();
+                }, 50);
+            } else {
+                // User is not authenticated - show login message only
+                document.getElementById('authCheck').style.display = 'block';
+                document.getElementById('chatForm').style.display = 'none';
+                document.getElementById('chatHistory').style.display = 'none';
+            }
+        }
+
+        let isAIChatReady = false;
+        let aiProfileData = null;
+        
+        // Listen for AI ready signal
+        window.addEventListener('aiChatReady', function() {
+            isAIChatReady = true;
+            console.log('AI Chat is ready');
+        });
+        
+        
+        // Listen for AI profile updates from OAuth app
+        window.addEventListener('aiProfileLoaded', function(event) {
+            aiProfileData = event.detail;
+            console.log('AI profile loaded:', aiProfileData);
+            updateAskAIButton();
+        });
+        
+        function updateAskAIButton() {
+            const button = document.getElementById('askAiButton');
+            const iconSpan = button.querySelector('.ai-icon');
+            
+            if (aiProfileData && aiProfileData.avatar) {
+                iconSpan.innerHTML = `<img src="${aiProfileData.avatar}" alt="${aiProfileData.displayName || 'AI'}" class="ai-avatar-small">`;
+            }
+            
+            if (aiProfileData && aiProfileData.displayName) {
+                button.childNodes[2].textContent = `Ask ${aiProfileData.displayName}`;
+            }
+        }
+        
+        function showInitialGreeting() {
+            const chatHistory = document.getElementById('chatHistory');
+            const greetingDiv = document.createElement('div');
+            greetingDiv.className = 'chat-message ai-message comment-style initial-greeting';
+            
+            if (!aiProfileData) {
+                return; // Don't show greeting if no AI profile data
+            }
+            
+            let avatarElement = '🤖';
+            if (aiProfileData.avatar) {
+                avatarElement = `<img src="${aiProfileData.avatar}" alt="${aiProfileData.displayName}" class="profile-avatar">`;
+            }
+            
+            const displayName = aiProfileData.displayName;
+            const handle = aiProfileData.handle;
+            
+            greetingDiv.innerHTML = `
+                <div class="message-header">
+                    <div class="avatar">${avatarElement}</div>
+                    <div class="user-info">
+                        <div class="display-name">${displayName}</div>
+                        <div class="handle">@${handle}</div>
+                        <div class="timestamp">${new Date().toLocaleString()}</div>
+                    </div>
+                </div>
+                <div class="message-content">
+                    Hello! I'm an AI assistant trained on this blog's content. I can answer questions about the articles, provide insights, and help you understand the topics discussed here. What would you like to know?
+                </div>
+            `;
+            chatHistory.appendChild(greetingDiv);
+        }
+        
+        async function askQuestion() {
+            const question = document.getElementById('aiQuestion').value;
+            const chatHistory = document.getElementById('chatHistory');
+            const askButton = document.getElementById('askButton');
+            
+            if (!question.trim()) return;
+            
+            // Wait for AI to be ready
+            if (!isAIChatReady) {
+                console.log('Waiting for AI Chat to be ready...');
+                await new Promise(resolve => {
+                    const checkReady = setInterval(() => {
+                        if (isAIChatReady) {
+                            clearInterval(checkReady);
+                            resolve();
+                        }
+                    }, 100);
+                });
+            }
+            
+            // Disable button and show loading
+            askButton.disabled = true;
+            askButton.textContent = 'Posting...';
+            
+            // Get user info from OAuth component
+            const userSection = document.querySelector('.user-section');
+            let userAvatar = '👤';
+            let userDisplay = 'You';
+            let userHandle = 'user';
+            
+            if (userSection) {
+                const avatarImg = userSection.querySelector('.user-avatar');
+                const displayName = userSection.querySelector('.user-display-name');
+                const handle = userSection.querySelector('.user-handle');
+                
+                if (avatarImg && avatarImg.src) {
+                    userAvatar = `<img src="${avatarImg.src}" alt="${displayName?.textContent || 'User'}" class="profile-avatar">`;
+                }
+                if (displayName?.textContent) {
+                    userDisplay = displayName.textContent;
+                }
+                if (handle?.textContent) {
+                    userHandle = handle.textContent.replace('@', '');
+                }
+            }
+            
+            // Add question to chat history in comment style
+            const questionDiv = document.createElement('div');
+            questionDiv.className = 'chat-message user-message comment-style';
+            questionDiv.innerHTML = `
+                <div class="message-header">
+                    <div class="avatar">${userAvatar}</div>
+                    <div class="user-info">
+                        <div class="display-name">${userDisplay}</div>
+                        <div class="handle">@${userHandle}</div>
+                        <div class="timestamp">${new Date().toLocaleString()}</div>
+                    </div>
+                </div>
+                <div class="message-content">${question}</div>
+            `;
+            chatHistory.appendChild(questionDiv);
+            
+            // Clear input
+            document.getElementById('aiQuestion').value = '';
+            
+            try {
+                // Show loading immediately
+                const loadingDiv = document.createElement('div');
+                loadingDiv.className = 'ai-loading-simple';
+                loadingDiv.innerHTML = `
+                    <i class="fas fa-robot"></i>
+                    <span>考えています</span>
+                    <i class="fas fa-spinner fa-spin"></i>
+                `;
+                chatHistory.appendChild(loadingDiv);
+                
+                // Post question to ATProto via OAuth app
+                const event = new CustomEvent('postAIQuestion', {
+                    detail: { question: question }
+                });
+                window.dispatchEvent(event);
+                
+            } catch (error) {
+                // Remove loading indicator and show error
+                const loadingMsg = chatHistory.querySelector('.ai-loading-simple');
+                if (loadingMsg) {
+                    loadingMsg.remove();
+                }
+                
+                const errorDiv = document.createElement('div');
+                errorDiv.className = 'chat-message error-message comment-style';
+                errorDiv.innerHTML = `
+                    <div class="message-header">
+                        <div class="avatar">⚠️</div>
+                        <div class="user-info">
+                            <div class="display-name">System</div>
+                            <div class="handle">@system</div>
+                            <div class="timestamp">${new Date().toLocaleString()}</div>
+                        </div>
+                    </div>
+                    <div class="message-content">Sorry, I encountered an error. Please try again.</div>
+                `;
+                chatHistory.appendChild(errorDiv);
+            } finally {
+                askButton.disabled = false;
+                askButton.textContent = 'Ask';
+            }
+        }
+
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
+                document.getElementById('askAiPanel').style.display = 'none';
+            }
+            
+            // Enter key to send message
+            if (e.key === 'Enter' && e.target.id === 'aiQuestion' && !e.shiftKey) {
+                e.preventDefault();
+                askQuestion();
+            }
+        });
+        
+        // Monitor authentication state changes
+        const authObserver = new MutationObserver(function(mutations) {
+            const userSections = document.querySelectorAll('.user-section');
+            if (userSections.length > 0) {
+                checkAuthenticationStatus();
+                // Stop observing once authenticated
+                authObserver.disconnect();
+            }
+        });
+        
+        // Start observing for authentication changes
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initial authentication check with slight delay for OAuth component
+            setTimeout(() => {
+                checkAuthenticationStatus();
+            }, 500);
+            
+            authObserver.observe(document.body, { 
+                childList: true, 
+                subtree: true 
+            });
+        });
+        
+        // Listen for AI responses from OAuth app
+        window.addEventListener('aiResponseReceived', function(event) {
+            const chatHistory = document.getElementById('chatHistory');
+            const loadingMsg = chatHistory.querySelector('.ai-loading-simple');
+            
+            if (loadingMsg) {
+                loadingMsg.remove();
+            }
+            
+            const aiProfile = event.detail.aiProfile;
+            if (!aiProfile || !aiProfile.handle || !aiProfile.displayName) {
+                console.error('AI profile data is missing, cannot display response');
+                return;
+            }
+            
+            const timestamp = new Date(event.detail.timestamp || Date.now());
+            
+            // Create comment-style AI response
+            const answerDiv = document.createElement('div');
+            answerDiv.className = 'chat-message ai-message comment-style';
+            
+            // Prepare avatar
+            let avatarElement = '🤖';
+            if (aiProfile.avatar) {
+                avatarElement = `<img src="${aiProfile.avatar}" alt="${aiProfile.displayName}" class="profile-avatar">`;
+            }
+            
+            answerDiv.innerHTML = `
+                <div class="message-header">
+                    <div class="avatar">${avatarElement}</div>
+                    <div class="user-info">
+                        <div class="display-name">${aiProfile.displayName}</div>
+                        <div class="handle">@${aiProfile.handle}</div>
+                        <div class="timestamp">${timestamp.toLocaleString()}</div>
+                    </div>
+                </div>
+                <div class="message-content">${event.detail.answer}</div>
+            `;
+            chatHistory.appendChild(answerDiv);
+            
+            // Auto-expand content instead of scrolling
+            if (chatHistory.children.length > 5) {
+                const oldestMessage = chatHistory.children[0];
+                if (oldestMessage && oldestMessage.classList.contains('user-message')) {
+                    // Keep the latest 5 exchanges (10 messages)
+                    if (chatHistory.children.length > 10) {
+                        chatHistory.removeChild(oldestMessage);
+                        if (chatHistory.children.length > 0) {
+                            chatHistory.removeChild(chatHistory.children[0]);
+                        }
+                    }
+                }
+            }
+        });
+    </script>
+</body>
+</html>
--- a/my-blog/templates/index.html
+++ b/my-blog/templates/index.html
@@ -0,0 +1,52 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="timeline-container">
+    
+    <div class="timeline-feed">
+        {% for post in posts %}
+        <article class="timeline-post">
+            <div class="post-header">
+                <div class="post-meta">
+                    <time class="post-date">{{ post.date }}</time>
+                    {% if post.language %}
+                    <span class="post-lang">{{ post.language }}</span>
+                    {% endif %}
+                </div>
+            </div>
+            
+            <div class="post-content">
+                <h3 class="post-title">
+                    <a href="{{ post.url }}">{{ post.title }}</a>
+                </h3>
+                
+                {% if post.excerpt %}
+                <p class="post-excerpt">{{ post.excerpt }}</p>
+                {% endif %}
+                
+                <div class="post-actions">
+                    <a href="{{ post.url }}" class="read-more">Read more</a>
+                    {% if post.markdown_url %}
+                    <a href="{{ post.markdown_url }}" class="view-markdown" title="View Markdown">Markdown</a>
+                    {% endif %}
+                    {% if post.translation_url %}
+                    <a href="{{ post.translation_url }}" class="view-translation" title="View Translation">🌐</a>
+                    {% endif %}
+                </div>
+            </div>
+        </article>
+        {% endfor %}
+    </div>
+
+    <!-- OAuth Comment System -->
+    <section class="comment-section">
+        <div id="comment-atproto"></div>
+    </section>
+    
+    {% if posts|length == 0 %}
+    <div class="empty-state">
+        <p>No posts yet. Start writing!</p>
+    </div>
+    {% endif %}
+</div>
+{% endblock %}
--- a/my-blog/templates/oauth-assets.html
+++ b/my-blog/templates/oauth-assets.html
@@ -0,0 +1,3 @@
+<!-- OAuth Comment System - Load globally for session management -->
+<script type="module" crossorigin src="/assets/comment-atproto-CDastf61.js"></script>
+<link rel="stylesheet" crossorigin href="/assets/comment-atproto-B330B6QX.css">
--- a/my-blog/templates/partials/oauth-widget.html
+++ b/my-blog/templates/partials/oauth-widget.html
@@ -0,0 +1,71 @@
+<!-- OAuth authentication widget for ailog -->
+<div id="oauth-widget">
+  <div id="status" class="status">
+    Login with your Bluesky account
+  </div>
+  
+  <!-- Login form -->
+  <div id="login-form">
+    <input type="text" id="handle-input" placeholder="Enter your handle (e.g., user.bsky.social)" style="width: 300px; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;">
+    <br>
+    <button id="login-btn">🦋 Login with Bluesky</button>
+  </div>
+  
+  <!-- Authenticated state -->
+  <div id="authenticated-state" style="display: none;">
+    <div id="user-info"></div>
+    <button id="logout-btn">Logout</button>
+    <button id="test-profile-btn">Get Profile</button>
+  </div>
+  
+  <div id="console-log" class="log"></div>
+</div>
+
+<script src="/oauth-widget-simple.js"></script>
+
+<style>
+.status {
+  margin: 20px 0;
+  padding: 15px;
+  border-radius: 8px;
+  background: #f5f5f5;
+}
+.user-info {
+  background: #e8f5e8;
+  border: 1px solid #4caf50;
+}
+.error {
+  background: #ffeaea;
+  border: 1px solid #f44336;
+  color: #d32f2f;
+}
+#oauth-widget button {
+  background: #1185fe;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-size: 16px;
+  cursor: pointer;
+  margin: 10px;
+}
+#oauth-widget button:hover {
+  background: #0d6efd;
+}
+#oauth-widget button:disabled {
+  background: #6c757d;
+  cursor: not-allowed;
+}
+.log {
+  text-align: left;
+  background: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  padding: 15px;
+  margin: 20px 0;
+  max-height: 300px;
+  overflow-y: auto;
+  font-family: monospace;
+  font-size: 14px;
+}
+</style>
--- a/my-blog/templates/post-complex.html
+++ b/my-blog/templates/post-complex.html
@@ -0,0 +1,373 @@
+{% extends "base.html" %}
+
+{% block title %}{{ post.title }} - {{ config.title }}{% endblock %}
+
+{% block content %}
+<div class="article-container">
+    <article class="article-content">
+        <header class="article-header">
+            <h1 class="article-title">{{ post.title }}</h1>
+            <div class="article-meta">
+                <time class="article-date">{{ post.date }}</time>
+                {% if post.language %}
+                <span class="article-lang">{{ post.language }}</span>
+                {% endif %}
+            </div>
+            <div class="article-actions">
+                {% if post.markdown_url %}
+                <a href="{{ post.markdown_url }}" class="action-btn markdown-btn" title="View Markdown">
+                    📝 Markdown
+                </a>
+                {% endif %}
+                {% if post.translation_url %}
+                <a href="{{ post.translation_url }}" class="action-btn translation-btn" title="View Translation">
+                    🌐 {% if post.language == 'ja' %}English{% else %}日本語{% endif %}
+                </a>
+                {% endif %}
+            </div>
+        </header>
+        
+        <div class="article-body">
+            {{ post.content | safe }}
+        </div>
+        
+        <!-- Comment Section -->
+        <section class="comment-section">
+            <div class="comment-container">
+                <h3>Comments</h3>
+                
+                <!-- ATProto Auth Widget Container -->
+                <div id="atproto-auth-widget" class="comment-auth"></div>
+                
+                <div id="commentForm" class="comment-form" style="display: none;">
+                    <textarea id="commentText" placeholder="Share your thoughts..." rows="4"></textarea>
+                    <button onclick="submitComment()" class="submit-btn">Post Comment</button>
+                </div>
+                
+                <div id="commentsList" class="comments-list">
+                    <!-- Comments will be loaded here -->
+                </div>
+            </div>
+        </section>
+    </article>
+    
+    <aside class="article-sidebar">
+        <nav class="toc">
+            <h3>Contents</h3>
+            <div id="toc-content">
+                <!-- TOC will be generated by JavaScript -->
+            </div>
+        </nav>
+    </aside>
+</div>
+{% endblock %}
+
+{% block sidebar %}
+<!-- Include ATProto Libraries via script tags (more reliable than dynamic imports) -->
+<script src="https://cdn.jsdelivr.net/npm/@atproto/oauth-client-browser@latest/dist/index.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@atproto/api@latest/dist/index.js"></script>
+
+<!-- Fallback: Try multiple CDNs -->
+<script>
+console.log('Checking ATProto library availability...');
+
+// Check if libraries loaded successfully
+if (typeof ATProto === 'undefined' && typeof window.ATProto === 'undefined') {
+    console.log('Primary CDN failed, trying fallback...');
+    
+    // Create fallback script elements
+    const fallbackScripts = [
+        'https://unpkg.com/@atproto/oauth-client-browser@latest/dist/index.js',
+        'https://esm.sh/@atproto/oauth-client-browser',
+        'https://cdn.skypack.dev/@atproto/oauth-client-browser'
+    ];
+    
+    // Load fallback scripts sequentially
+    let scriptIndex = 0;
+    function loadNextScript() {
+        if (scriptIndex < fallbackScripts.length) {
+            const script = document.createElement('script');
+            script.src = fallbackScripts[scriptIndex];
+            script.onload = () => {
+                console.log(`Loaded from fallback CDN: ${fallbackScripts[scriptIndex]}`);
+                window.atprotoLibrariesReady = true;
+            };
+            script.onerror = () => {
+                console.log(`Failed to load from: ${fallbackScripts[scriptIndex]}`);
+                scriptIndex++;
+                loadNextScript();
+            };
+            document.head.appendChild(script);
+        } else {
+            console.error('All CDN fallbacks failed');
+            window.atprotoLibrariesReady = false;
+        }
+    }
+    
+    loadNextScript();
+} else {
+    console.log('✅ ATProto libraries loaded from primary CDN');
+    window.atprotoLibrariesReady = true;
+}
+</script>
+
+<!-- Simple ATProto Widget (no external dependency) -->
+<link rel="stylesheet" href="/atproto-auth-widget/dist/atproto-auth.min.css">
+
+<script>
+// Initialize auth widget
+let authWidget = null;
+
+document.addEventListener('DOMContentLoaded', function() {
+    generateTableOfContents();
+    initializeAuthWidget();
+    loadComments();
+});
+
+function generateTableOfContents() {
+    const tocContainer = document.getElementById('toc-content');
+    const headings = document.querySelectorAll('.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6');
+    
+    if (headings.length === 0) {
+        tocContainer.innerHTML = '<p class="no-toc">No headings found</p>';
+        return;
+    }
+    
+    const tocList = document.createElement('ul');
+    tocList.className = 'toc-list';
+    
+    headings.forEach((heading, index) => {
+        const id = `heading-${index}`;
+        heading.id = id;
+        
+        const listItem = document.createElement('li');
+        listItem.className = `toc-item toc-${heading.tagName.toLowerCase()}`;
+        
+        const link = document.createElement('a');
+        link.href = `#${id}`;
+        link.textContent = heading.textContent;
+        link.className = 'toc-link';
+        
+        // Smooth scroll behavior
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            heading.scrollIntoView({ behavior: 'smooth' });
+        });
+        
+        listItem.appendChild(link);
+        tocList.appendChild(listItem);
+    });
+    
+    tocContainer.appendChild(tocList);
+}
+
+// Initialize ATProto Auth Widget
+async function initializeAuthWidget() {
+    try {
+        // Check WebCrypto API availability
+        console.log('WebCrypto check:', {
+            available: !!window.crypto && !!window.crypto.subtle,
+            secureContext: window.isSecureContext,
+            protocol: window.location.protocol,
+            hostname: window.location.hostname
+        });
+        
+        if (!window.crypto || !window.crypto.subtle) {
+            throw new Error('WebCrypto API is not available. This requires HTTPS or localhost.');
+        }
+        
+        if (!window.isSecureContext) {
+            console.warn('Not in secure context - WebCrypto may not work properly');
+        }
+        
+        // Simplified approach: Show manual OAuth form
+        console.log('Using simplified OAuth approach...');
+        showSimpleOAuthForm();
+            // Fallback to widget initialization
+            authWidget = await window.initATProtoWidget('#atproto-auth-widget', {
+                clientId: clientId,
+            onLogin: (session) => {
+                console.log('User logged in:', session.handle);
+                document.getElementById('commentForm').style.display = 'block';
+            },
+            onLogout: () => {
+                console.log('User logged out');
+                document.getElementById('commentForm').style.display = 'none';
+            },
+            onError: (error) => {
+                console.error('ATProto Auth Error:', error);
+                // Show user-friendly error message
+                const authContainer = document.getElementById('atproto-auth-widget');
+                if (authContainer) {
+                    let errorMessage = 'Authentication service is temporarily unavailable.';
+                    let suggestion = 'Please try refreshing the page.';
+                    
+                    if (error.message && error.message.includes('WebCrypto')) {
+                        errorMessage = 'This feature requires a secure HTTPS connection.';
+                        suggestion = 'Please ensure you are accessing via https://log.syui.ai';
+                    }
+                    
+                    authContainer.innerHTML = `
+                        <div class="atproto-auth__fallback">
+                            <p>${errorMessage}</p>
+                            <p>${suggestion}</p>
+                            <details style="margin-top: 10px; font-size: 0.8em; color: #666;">
+                                <summary>Technical details</summary>
+                                <pre>${error.message || 'Unknown error'}</pre>
+                            </details>
+                        </div>
+                    `;
+                }
+            },
+            theme: 'default'
+            });
+        } else if (typeof window.ATProtoAuthWidget === 'function') {
+            // Fallback to direct widget initialization
+            authWidget = new window.ATProtoAuthWidget({
+                containerSelector: '#atproto-auth-widget',
+                clientId: clientId,
+                onLogin: (session) => {
+                    console.log('User logged in:', session.handle);
+                    document.getElementById('commentForm').style.display = 'block';
+                },
+                onLogout: () => {
+                    console.log('User logged out');
+                    document.getElementById('commentForm').style.display = 'none';
+                },
+                onError: (error) => {
+                    console.error('ATProto Auth Error:', error);
+                    const authContainer = document.getElementById('atproto-auth-widget');
+                    if (authContainer) {
+                        authContainer.innerHTML = `
+                            <div class="atproto-auth__fallback">
+                                <p>Authentication service is temporarily unavailable.</p>
+                                <p>Please try refreshing the page.</p>
+                            </div>
+                        `;
+                    }
+                },
+                theme: 'default'
+            });
+            await authWidget.init();
+        } else {
+            throw new Error('ATProto widget not available');
+        }
+    } catch (error) {
+        console.error('Failed to initialize auth widget:', error);
+        // Show fallback UI
+        const authContainer = document.getElementById('atproto-auth-widget');
+        if (authContainer) {
+            authContainer.innerHTML = `
+                <div class="atproto-auth__fallback">
+                    <p>Authentication widget failed to load.</p>
+                    <p>Please check your internet connection and refresh the page.</p>
+                </div>
+            `;
+        }
+    }
+}
+
+async function submitComment() {
+    const commentText = document.getElementById('commentText').value.trim();
+    if (!commentText || !authWidget.isLoggedIn()) {
+        alert('Please login and enter a comment');
+        return;
+    }
+    
+    try {
+        const postSlug = '{{ post.slug }}';
+        const postUrl = window.location.href;
+        const createdAt = new Date().toISOString();
+        
+        // Create comment record using the auth widget
+        const response = await authWidget.createRecord('ai.log.comment', {
+            $type: 'ai.log.comment',
+            text: commentText,
+            post_slug: postSlug,
+            post_url: postUrl,
+            createdAt: createdAt
+        });
+        
+        console.log('Comment posted:', response);
+        document.getElementById('commentText').value = '';
+        loadComments();
+    } catch (error) {
+        console.error('Comment submission failed:', error);
+        alert('Failed to post comment: ' + error.message);
+    }
+}
+
+function showAuthenticatedState(session) {
+    const authContainer = document.getElementById('atproto-auth-widget');
+    const agent = new window.ATProtoAgent(session);
+    
+    authContainer.innerHTML = `
+        <div class="atproto-auth__authenticated">
+            <p>✅ Authenticated as: <strong>${session.did}</strong></p>
+            <button id="logout-btn" class="atproto-auth__button">Logout</button>
+        </div>
+    `;
+    
+    document.getElementById('logout-btn').onclick = async () => {
+        await session.signOut();
+        window.location.reload();
+    };
+    
+    // Show comment form
+    document.getElementById('commentForm').style.display = 'block';
+    window.currentSession = session;
+    window.currentAgent = agent;
+}
+
+function showLoginForm(oauthClient) {
+    const authContainer = document.getElementById('atproto-auth-widget');
+    
+    authContainer.innerHTML = `
+        <div class="atproto-auth__login">
+            <h4>Login with ATProto</h4>
+            <input type="text" id="handle-input" placeholder="user.bsky.social" />
+            <button id="login-btn" class="atproto-auth__button">Connect</button>
+        </div>
+    `;
+    
+    document.getElementById('login-btn').onclick = async () => {
+        const handle = document.getElementById('handle-input').value.trim();
+        if (!handle) {
+            alert('Please enter your handle');
+            return;
+        }
+        
+        try {
+            const url = await oauthClient.authorize(handle);
+            window.open(url, '_self', 'noopener');
+        } catch (error) {
+            console.error('OAuth authorization failed:', error);
+            alert('Authentication failed: ' + error.message);
+        }
+    };
+    
+    // Enter key support
+    document.getElementById('handle-input').onkeypress = (e) => {
+        if (e.key === 'Enter') {
+            document.getElementById('login-btn').click();
+        }
+    };
+}
+
+async function loadComments() {
+    try {
+        const commentsList = document.getElementById('commentsList');
+        commentsList.innerHTML = '<p class="loading">Loading comments from ATProto network...</p>';
+        
+        // In a real implementation, you would query an aggregation service
+        // For demo, show empty state
+        setTimeout(() => {
+            commentsList.innerHTML = '<p class="no-comments">Comments will appear here when posted via ATProto.</p>';
+        }, 1000);
+    } catch (error) {
+        console.error('Failed to load comments:', error);
+        document.getElementById('commentsList').innerHTML = '<p class="error">Failed to load comments</p>';
+    }
+}
+</script>
+{% endblock %}
--- a/my-blog/templates/post-simple.html
+++ b/my-blog/templates/post-simple.html
@@ -0,0 +1,196 @@
+{% extends "base.html" %}
+
+{% block title %}{{ post.title }} - {{ config.title }}{% endblock %}
+
+{% block content %}
+<div class="article-container">
+    <article class="article-content">
+        <header class="article-header">
+            <h1 class="article-title">{{ post.title }}</h1>
+            <div class="article-meta">
+                <time class="article-date">{{ post.date }}</time>
+                {% if post.language %}
+                <span class="article-lang">{{ post.language }}</span>
+                {% endif %}
+            </div>
+            <div class="article-actions">
+                {% if post.markdown_url %}
+                <a href="{{ post.markdown_url }}" class="action-btn markdown-btn" title="View Markdown">
+                    📝 Markdown
+                </a>
+                {% endif %}
+                {% if post.translation_url %}
+                <a href="{{ post.translation_url }}" class="action-btn translation-btn" title="View Translation">
+                    🌐 {% if post.language == 'ja' %}English{% else %}日本語{% endif %}
+                </a>
+                {% endif %}
+            </div>
+        </header>
+        
+        <div class="article-body">
+            {{ post.content | safe }}
+        </div>
+        
+        <!-- Simple Comment Section -->
+        <section class="comment-section">
+            <div class="comment-container">
+                <h3>Comments</h3>
+                
+                <!-- Simple OAuth Button -->
+                <div class="simple-oauth">
+                    <p>📝 To comment, authenticate with Bluesky:</p>
+                    <button id="bluesky-auth" class="oauth-button">
+                        🦋 Login with Bluesky
+                    </button>
+                    <p class="oauth-note">
+                        <small>After authentication, you can post comments that will be stored in your ATProto PDS.</small>
+                    </p>
+                </div>
+                
+                <div id="comments-list" class="comments-list">
+                    <p class="no-comments">Comments will appear here when posted via ATProto.</p>
+                </div>
+            </div>
+        </section>
+    </article>
+    
+    <aside class="article-sidebar">
+        <nav class="toc">
+            <h3>Contents</h3>
+            <div id="toc-content">
+                <!-- TOC will be generated by JavaScript -->
+            </div>
+        </nav>
+    </aside>
+</div>
+{% endblock %}
+
+{% block sidebar %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    generateTableOfContents();
+    initializeSimpleAuth();
+});
+
+function generateTableOfContents() {
+    const tocContainer = document.getElementById('toc-content');
+    const headings = document.querySelectorAll('.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6');
+    
+    if (headings.length === 0) {
+        tocContainer.innerHTML = '<p class="no-toc">No headings found</p>';
+        return;
+    }
+    
+    const tocList = document.createElement('ul');
+    tocList.className = 'toc-list';
+    
+    headings.forEach((heading, index) => {
+        const id = `heading-${index}`;
+        heading.id = id;
+        
+        const listItem = document.createElement('li');
+        listItem.className = `toc-item toc-${heading.tagName.toLowerCase()}`;
+        
+        const link = document.createElement('a');
+        link.href = `#${id}`;
+        link.textContent = heading.textContent;
+        link.className = 'toc-link';
+        
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            heading.scrollIntoView({ behavior: 'smooth' });
+        });
+        
+        listItem.appendChild(link);
+        tocList.appendChild(listItem);
+    });
+    
+    tocContainer.appendChild(tocList);
+}
+
+function initializeSimpleAuth() {
+    const authButton = document.getElementById('bluesky-auth');
+    
+    authButton.addEventListener('click', function() {
+        // Simple approach: Direct redirect to Bluesky OAuth
+        const isProduction = window.location.hostname === 'log.syui.ai';
+        const clientId = isProduction 
+            ? 'https://log.syui.ai/client-metadata.json'
+            : window.location.origin + '/client-metadata.json';
+        
+        const authUrl = `https://bsky.social/oauth/authorize?` +
+            `client_id=${encodeURIComponent(clientId)}&` +
+            `redirect_uri=${encodeURIComponent(window.location.href)}&` +
+            `response_type=code&` +
+            `scope=atproto%20transition:generic&` +
+            `state=demo-state`;
+        
+        console.log('Redirecting to:', authUrl);
+        
+        // Open in new tab for now (safer for testing)
+        window.open(authUrl, '_blank');
+        
+        // Show status message
+        authButton.innerHTML = '✅ Check the new tab for authentication';
+        authButton.disabled = true;
+    });
+    
+    // Check if we're returning from OAuth
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.has('code')) {
+        console.log('OAuth callback detected:', urlParams.get('code'));
+        document.querySelector('.simple-oauth').innerHTML = `
+            <div class="oauth-success">
+                ✅ OAuth callback received!<br>
+                <small>Code: ${urlParams.get('code')}</small><br>
+                <small>In a full implementation, this would exchange the code for tokens.</small>
+            </div>
+        `;
+    }
+}
+</script>
+
+<style>
+.simple-oauth {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 20px;
+    margin: 20px 0;
+    text-align: center;
+}
+
+.oauth-button {
+    background: #1185fe;
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 6px;
+    font-size: 16px;
+    cursor: pointer;
+    margin: 10px 0;
+}
+
+.oauth-button:hover {
+    background: #0d6efd;
+}
+
+.oauth-button:disabled {
+    background: #6c757d;
+    cursor: not-allowed;
+}
+
+.oauth-note {
+    color: #6c757d;
+    font-style: italic;
+}
+
+.oauth-success {
+    background: #d1edff;
+    border: 1px solid #b6d7ff;
+    border-radius: 4px;
+    padding: 15px;
+    color: #0c5460;
+}
+</style>
+{% endblock %}
--- a/my-blog/templates/post.html
+++ b/my-blog/templates/post.html
@@ -0,0 +1,93 @@
+{% extends "base.html" %}
+
+{% block title %}{{ post.title }} - {{ config.title }}{% endblock %}
+
+{% block content %}
+<div class="article-container">
+    <article class="article-content">
+        <header class="article-header">
+            <h1 class="article-title">{{ post.title }}</h1>
+            <div class="article-meta">
+                <time class="article-date">{{ post.date }}</time>
+                {% if post.language %}
+                <span class="article-lang">{{ post.language }}</span>
+                {% endif %}
+            </div>
+            <div class="article-actions">
+                {% if post.markdown_url %}
+                <a href="{{ post.markdown_url }}" class="action-btn markdown-btn" title="View Markdown">
+                    Markdown
+                </a>
+                {% endif %}
+                {% if post.translation_url %}
+                <a href="{{ post.translation_url }}" class="action-btn translation-btn" title="View Translation">
+                    🌐 {% if post.language == 'ja' %}English{% else %}日本語{% endif %}
+                </a>
+                {% endif %}
+            </div>
+        </header>
+        
+        <div class="article-body">
+            {{ post.content | safe }}
+        </div>
+        
+        <div id="comment-atproto"></div>
+    </article>
+    
+    <aside class="article-sidebar">
+        <nav class="toc">
+            <h3>Contents</h3>
+            <div id="toc-content">
+                <!-- TOC will be generated by JavaScript -->
+            </div>
+        </nav>
+    </aside>
+</div>
+
+<script>
+// Generate table of contents
+function generateTableOfContents() {
+    const tocContainer = document.getElementById('toc-content');
+    const headings = document.querySelectorAll('.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6');
+    
+    if (headings.length === 0) {
+        tocContainer.innerHTML = '<p class="no-toc">No headings found</p>';
+        return;
+    }
+    
+    const tocList = document.createElement('ul');
+    tocList.className = 'toc-list';
+    
+    headings.forEach((heading, index) => {
+        const id = `heading-${index}`;
+        heading.id = id;
+        
+        const listItem = document.createElement('li');
+        listItem.className = `toc-item toc-${heading.tagName.toLowerCase()}`;
+        
+        const link = document.createElement('a');
+        link.href = `#${id}`;
+        link.textContent = heading.textContent;
+        link.className = 'toc-link';
+        
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            heading.scrollIntoView({ behavior: 'smooth' });
+        });
+        
+        listItem.appendChild(link);
+        tocList.appendChild(listItem);
+    });
+    
+    tocContainer.appendChild(tocList);
+}
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', () => {
+    generateTableOfContents();
+});
+</script>
+{% endblock %}
+
+{% block sidebar %}
+{% endblock %}
--- a/oauth/.env.production
+++ b/oauth/.env.production
@@ -1,7 +1,7 @@
 # Production environment variables
-VITE_APP_HOST=https://log.syui.ai
-VITE_OAUTH_CLIENT_ID=https://log.syui.ai/client-metadata.json
-VITE_OAUTH_REDIRECT_URI=https://log.syui.ai/oauth/callback
+VITE_APP_HOST=https://syui.ai
+VITE_OAUTH_CLIENT_ID=https://syui.ai/client-metadata.json
+VITE_OAUTH_REDIRECT_URI=https://syui.ai/oauth/callback
 VITE_ADMIN_DID=did:plc:uqzpqmrjnptsxezjx4xuh2mn

 # Collection names for OAuth app
--- a/workers/ollama-proxy.js
+++ b/workers/ollama-proxy.js
@@ -0,0 +1,93 @@
+// Cloudflare Worker for secure Ollama proxy
+export default {
+  async fetch(request, env, ctx) {
+    // CORS preflight
+    if (request.method === 'OPTIONS') {
+      return new Response(null, {
+        headers: {
+          'Access-Control-Allow-Origin': 'https://log.syui.ai',
+          'Access-Control-Allow-Methods': 'POST, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, X-User-Token',
+          'Access-Control-Max-Age': '86400',
+        }
+      });
+    }
+
+    // Verify origin
+    const origin = request.headers.get('Origin');
+    const referer = request.headers.get('Referer');
+    
+    // 許可されたオリジンのみ
+    const allowedOrigins = [
+      'https://log.syui.ai',
+      'https://log.pages.dev' // Cloudflare Pages preview
+    ];
+    
+    if (!origin || !allowedOrigins.some(allowed => origin.startsWith(allowed))) {
+      return new Response('Forbidden', { status: 403 });
+    }
+
+    // ユーザー認証トークン検証（オプション）
+    const userToken = request.headers.get('X-User-Token');
+    if (env.REQUIRE_AUTH && !userToken) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+
+    // リクエストボディを取得
+    const body = await request.json();
+    
+    // プロンプトサイズ制限
+    if (body.prompt && body.prompt.length > 1000) {
+      return new Response(JSON.stringify({
+        error: 'Prompt too long. Maximum 1000 characters.'
+      }), { 
+        status: 400,
+        headers: { 'Content-Type': 'application/json' }
+      });
+    }
+
+    // レート制限（CF Workers KV使用）
+    if (env.RATE_LIMITER) {
+      const clientIP = request.headers.get('CF-Connecting-IP');
+      const rateLimitKey = `rate:${clientIP}`;
+      const currentCount = await env.RATE_LIMITER.get(rateLimitKey) || 0;
+      
+      if (currentCount >= 20) {
+        return new Response(JSON.stringify({
+          error: 'Rate limit exceeded. Try again later.'
+        }), { 
+          status: 429,
+          headers: { 'Content-Type': 'application/json' }
+        });
+      }
+      
+      // カウント増加（1時間TTL）
+      await env.RATE_LIMITER.put(rateLimitKey, currentCount + 1, {
+        expirationTtl: 3600
+      });
+    }
+
+    // Ollamaへプロキシ
+    const ollamaResponse = await fetch(env.OLLAMA_API_URL || 'https://ollama.syui.ai/api/generate', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        // 内部認証ヘッダー（必要に応じて）
+        'X-Internal-Token': env.OLLAMA_INTERNAL_TOKEN || ''
+      },
+      body: JSON.stringify(body)
+    });
+
+    // レスポンスを返す
+    const responseData = await ollamaResponse.text();
+    
+    return new Response(responseData, {
+      status: ollamaResponse.status,
+      headers: {
+        'Content-Type': 'application/json',
+        'Access-Control-Allow-Origin': origin,
+        'Cache-Control': 'no-store'
+      }
+    });
+  }
+};
--- a/workers/wrangler.toml
+++ b/workers/wrangler.toml
@@ -0,0 +1,20 @@
+name = "ollama-proxy"
+main = "ollama-proxy.js"
+compatibility_date = "2024-01-01"
+
+# 環境変数
+[vars]
+REQUIRE_AUTH = false
+
+# 本番環境
+[env.production.vars]
+OLLAMA_API_URL = "https://ollama.syui.ai/api/generate"
+REQUIRE_AUTH = true
+
+# KVネームスペース（レート制限用）
+[[kv_namespaces]]
+binding = "RATE_LIMITER"
+id = "your-kv-namespace-id"
+
+# シークレット（wrangler secret putで設定）
+# OLLAMA_INTERNAL_TOKEN = "your-internal-token"