This commit is contained in:
2026-01-08 18:07:33 +09:00
parent bda6b9700d
commit 68ac88045b
15 changed files with 16 additions and 599 deletions

File diff suppressed because one or more lines are too long

View File

@@ -1 +0,0 @@
.container{max-width:800px;margin:0 auto;padding:2rem}h1{font-size:2rem;margin-bottom:1.5rem;color:#333}.input-section{margin-bottom:2rem;display:flex;gap:.5rem}.at-uri-input{flex:1;padding:.75rem;font-size:1rem;border:2px solid #ddd;border-radius:4px;font-family:monospace}.at-uri-input:focus{outline:none;border-color:#06c}.input-section button{padding:.75rem 2rem;font-size:1rem;background:#06c;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500}.input-section button:hover{background:#0052a3}.info-section{background:#fff;padding:1.5rem;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a}.info-section h2{font-size:1.5rem;margin-bottom:1rem;color:#333}.info-section ul{list-style-position:inside;color:#666}.info-section li{margin-bottom:.5rem}.back-link{display:inline-block;color:#06c;text-decoration:none;font-weight:500}.back-link:hover{text-decoration:underline}.record-view{background:#fff;padding:2rem;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a}.record-view h2{font-size:2rem;margin-bottom:1rem;color:#333}.record-meta{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #eee}.record-meta p{margin:.5rem 0;color:#666;font-size:.9rem;font-family:monospace}.record-content{line-height:1.8;color:#333}.record-content pre{white-space:pre-wrap;word-wrap:break-word;font-family:inherit;margin:0}.error-section{background:#fee;padding:1rem;border-radius:4px;margin-bottom:1rem;color:#c33}.records-list{background:#fff;padding:2rem;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a}.records-list h2{font-size:1.5rem;margin-bottom:1rem;color:#333}.records-list ul{list-style:none;padding:0;margin:0}.records-list li{border-bottom:1px solid #eee}.records-list li:last-child{border-bottom:none}.record-link{display:flex;justify-content:space-between;align-items:center;width:100%;padding:1rem;background:none;border:none;cursor:pointer;text-align:left;transition:background .2s}.record-link:hover{background:#f5f5f5}.record-title{font-size:1.1rem;color:#06c;font-weight:500}.record-date{color:#666;font-size:.9rem}.back-button{padding:.5rem 1rem;margin-bottom:1rem;background:#f5f5f5;border:1px solid #ddd;border-radius:4px;cursor:pointer;font-size:.9rem;color:#666}.back-button:hover{background:#eee}.input-section button:disabled{background:#ccc;cursor:not-allowed}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f5f5}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}

View File

@@ -1,13 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AT Browser</title>
<script type="module" crossorigin src="/at/assets/index-CyrVFHrY.js"></script>
<link rel="stylesheet" crossorigin href="/at/assets/index-t2ajyYjt.css">
</head>
<body>
<div id="root"></div>
</body>
</html>

View File

@@ -1,12 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AT Browser</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

View File

@@ -1,25 +0,0 @@
{
"name": "ailog-browser",
"version": "0.1.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@atproto/api": "^0.13.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"@vitejs/plugin-react": "^4.0.0",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.24",
"tailwindcss": "^3.3.2",
"typescript": "^5.0.0",
"vite": "^5.0.0"
}
}

View File

@@ -1,203 +0,0 @@
.container {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
h1 {
font-size: 2rem;
margin-bottom: 1.5rem;
color: #333;
}
.input-section {
margin-bottom: 2rem;
display: flex;
gap: 0.5rem;
}
.at-uri-input {
flex: 1;
padding: 0.75rem;
font-size: 1rem;
border: 2px solid #ddd;
border-radius: 4px;
font-family: monospace;
}
.at-uri-input:focus {
outline: none;
border-color: #0066cc;
}
.input-section button {
padding: 0.75rem 2rem;
font-size: 1rem;
background: #0066cc;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 500;
}
.input-section button:hover {
background: #0052a3;
}
.info-section {
background: white;
padding: 1.5rem;
border-radius: 8px;
margin-bottom: 2rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.info-section h2 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #333;
}
.info-section ul {
list-style-position: inside;
color: #666;
}
.info-section li {
margin-bottom: 0.5rem;
}
.back-link {
display: inline-block;
color: #0066cc;
text-decoration: none;
font-weight: 500;
}
.back-link:hover {
text-decoration: underline;
}
.record-view {
background: white;
padding: 2rem;
border-radius: 8px;
margin-bottom: 2rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.record-view h2 {
font-size: 2rem;
margin-bottom: 1rem;
color: #333;
}
.record-meta {
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #eee;
}
.record-meta p {
margin: 0.5rem 0;
color: #666;
font-size: 0.9rem;
font-family: monospace;
}
.record-content {
line-height: 1.8;
color: #333;
}
.record-content pre {
white-space: pre-wrap;
word-wrap: break-word;
font-family: inherit;
margin: 0;
}
.error-section {
background: #fee;
padding: 1rem;
border-radius: 4px;
margin-bottom: 1rem;
color: #c33;
}
.records-list {
background: white;
padding: 2rem;
border-radius: 8px;
margin-bottom: 2rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.records-list h2 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #333;
}
.records-list ul {
list-style: none;
padding: 0;
margin: 0;
}
.records-list li {
border-bottom: 1px solid #eee;
}
.records-list li:last-child {
border-bottom: none;
}
.record-link {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 1rem;
background: none;
border: none;
cursor: pointer;
text-align: left;
transition: background 0.2s;
}
.record-link:hover {
background: #f5f5f5;
}
.record-title {
font-size: 1.1rem;
color: #0066cc;
font-weight: 500;
}
.record-date {
color: #666;
font-size: 0.9rem;
}
.back-button {
padding: 0.5rem 1rem;
margin-bottom: 1rem;
background: #f5f5f5;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
color: #666;
}
.back-button:hover {
background: #eee;
}
.input-section button:disabled {
background: #ccc;
cursor: not-allowed;
}

View File

@@ -1,94 +0,0 @@
import { useState } from 'react'
import { AtUriBrowser, useAtUriBrowser } from './components/AtUriBrowser'
import './App.css'
function BrowserContent() {
const [handle, setHandle] = useState('')
const { records, currentRecord, setCurrentRecord, loading, error, loadHandle } = useAtUriBrowser()
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
if (handle) {
await loadHandle(handle)
}
}
return (
<div className="container">
<h1>AT Protocol Browser</h1>
<form onSubmit={handleSubmit} className="input-section">
<input
type="text"
placeholder="handle (e.g., ai.syui.ai)"
value={handle}
onChange={(e) => setHandle(e.target.value)}
className="at-uri-input"
/>
<button type="submit" disabled={loading}>
{loading ? 'Loading...' : 'Browse'}
</button>
</form>
{error && (
<div className="error-section">
<p>Error: {error}</p>
</div>
)}
{currentRecord ? (
<div className="record-view">
<button onClick={() => setCurrentRecord(null)} className="back-button">
Back to list
</button>
<h2>{currentRecord.value.title}</h2>
<div className="record-meta">
<p>URI: {currentRecord.uri}</p>
<p>Created: {new Date(currentRecord.value.createdAt).toLocaleString()}</p>
</div>
<div className="record-content">
<pre>{currentRecord.value.content}</pre>
</div>
</div>
) : records.length > 0 ? (
<div className="records-list">
<h2>Posts ({records.length})</h2>
<ul>
{records.map((record) => (
<li key={record.uri}>
<button onClick={() => setCurrentRecord(record)} className="record-link">
<span className="record-title">{record.value.title}</span>
<span className="record-date">
{new Date(record.value.createdAt).toLocaleDateString()}
</span>
</button>
</li>
))}
</ul>
</div>
) : !loading && !error && (
<div className="info-section">
<h2>About</h2>
<p>Browse AT Protocol records directly from the PDS.</p>
<ul>
<li>Enter a handle to view posts</li>
<li>Example: ai.syui.ai</li>
<li>Supports syu.is PDS environment</li>
</ul>
</div>
)}
<a href="/" className="back-link"> Back to Blog</a>
</div>
)
}
function App() {
return (
<AtUriBrowser>
<BrowserContent />
</AtUriBrowser>
)
}
export default App

View File

@@ -1,74 +0,0 @@
import { createContext, useContext, ReactNode, useState } from 'react'
import { AtProtoClient, RecordResponse } from '../lib/atproto'
interface AtUriBrowserContextType {
client: AtProtoClient
records: RecordResponse[]
setRecords: (records: RecordResponse[]) => void
currentRecord: RecordResponse | null
setCurrentRecord: (record: RecordResponse | null) => void
loading: boolean
setLoading: (loading: boolean) => void
error: string | null
setError: (error: string | null) => void
loadHandle: (handle: string) => Promise<void>
}
const AtUriBrowserContext = createContext<AtUriBrowserContextType | null>(null)
export function useAtUriBrowser() {
const context = useContext(AtUriBrowserContext)
if (!context) {
throw new Error('useAtUriBrowser must be used within AtUriBrowser')
}
return context
}
interface AtUriBrowserProps {
children: ReactNode
pdsUrl?: string
}
export function AtUriBrowser({ children, pdsUrl = 'https://syu.is' }: AtUriBrowserProps) {
const [client] = useState(() => new AtProtoClient(pdsUrl))
const [records, setRecords] = useState<RecordResponse[]>([])
const [currentRecord, setCurrentRecord] = useState<RecordResponse | null>(null)
const [loading, setLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
const loadHandle = async (handle: string) => {
try {
setLoading(true)
setError(null)
setCurrentRecord(null)
const did = await client.resolveHandle(handle)
const records = await client.listRecords(did, 'ai.syui.log.post')
setRecords(records)
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to load records')
setRecords([])
} finally {
setLoading(false)
}
}
return (
<AtUriBrowserContext.Provider
value={{
client,
records,
setRecords,
currentRecord,
setCurrentRecord,
loading,
setLoading,
error,
setError,
loadHandle
}}
>
{children}
</AtUriBrowserContext.Provider>
)
}

View File

@@ -1,19 +0,0 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #f5f5f5;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

View File

@@ -1,59 +0,0 @@
export interface AtUri {
repo: string
collection: string
rkey: string
}
export interface PostRecord {
title: string
content: string
createdAt: string
}
export interface RecordResponse {
uri: string
cid: string
value: PostRecord
}
export class AtProtoClient {
private pdsUrl: string
constructor(pdsUrl: string = 'https://syu.is') {
this.pdsUrl = pdsUrl
}
parseAtUri(uri: string): AtUri | null {
const match = uri.match(/^at:\/\/([^/]+)\/([^/]+)\/([^/]+)$/)
if (!match) return null
return {
repo: match[1],
collection: match[2],
rkey: match[3]
}
}
async resolveHandle(handle: string): Promise<string> {
const response = await fetch(
`${this.pdsUrl}/xrpc/com.atproto.identity.resolveHandle?handle=${handle}`
)
const data = await response.json()
return data.did
}
async getRecord(repo: string, collection: string, rkey: string): Promise<RecordResponse> {
const response = await fetch(
`${this.pdsUrl}/xrpc/com.atproto.repo.getRecord?repo=${repo}&collection=${collection}&rkey=${rkey}`
)
return await response.json()
}
async listRecords(repo: string, collection: string): Promise<RecordResponse[]> {
const response = await fetch(
`${this.pdsUrl}/xrpc/com.atproto.repo.listRecords?repo=${repo}&collection=${collection}`
)
const data = await response.json()
return data.records || []
}
}

View File

@@ -1,10 +0,0 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

View File

@@ -1,21 +0,0 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

View File

@@ -1,10 +0,0 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

View File

@@ -1,11 +0,0 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
base: '/at/',
build: {
outDir: 'dist',
emptyOutDir: true,
},
})

View File

@@ -67,8 +67,17 @@ pub async fn execute() -> Result<()> {
<head>
<meta charset="UTF-8">
<title>Blog Posts</title>
<style>
body { font-family: sans-serif; max-width: 800px; margin: 0 auto; padding: 2rem; }
.nav { margin-bottom: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; }
.nav a { margin-right: 1rem; color: #0066cc; text-decoration: none; }
.nav a:hover { text-decoration: underline; }
</style>
</head>
<body>
<div class="nav">
<a href="/pds/">🔍 PDS Browser</a>
</div>
<h1>Posts</h1>
<ul>
"#,
@@ -122,18 +131,18 @@ pub async fn execute() -> Result<()> {
println!("\nDone! Site generated in ./public/");
println!(" - Blog: ./public/index.html");
println!(" - AT Browser: ./public/at/index.html");
println!(" - PDS Browser: ./public/pds/index.html");
Ok(())
}
async fn build_browser() -> Result<()> {
use std::process::Command;
let browser_dir = "./browser";
let browser_dir = "./repos/log/pds";
// Check if browser directory exists
// Check if pds directory exists
if !std::path::Path::new(browser_dir).exists() {
println!("Browser directory not found, skipping");
println!("PDS directory not found, skipping");
return Ok(());
}
@@ -164,14 +173,14 @@ async fn build_browser() -> Result<()> {
anyhow::bail!("npm run build failed");
}
// Copy dist to public/at
// Copy dist to public/pds
let dist_dir = format!("{}/dist", browser_dir);
let target_dir = "./public/at";
let target_dir = "./public/pds";
if std::path::Path::new(&dist_dir).exists() {
fs::create_dir_all(target_dir)?;
copy_dir_all(&dist_dir, target_dir)?;
println!("Browser app deployed to ./public/at/");
println!("PDS browser deployed to ./public/pds/");
} else {
println!(" ⚠ dist directory not found");
}