start
This commit is contained in:
1
browser/dist/assets/index-CvFXbZtL.css
vendored
Normal file
1
browser/dist/assets/index-CvFXbZtL.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.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}*{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}
|
||||
40
browser/dist/assets/index-DrFpc8Xj.js
vendored
Normal file
40
browser/dist/assets/index-DrFpc8Xj.js
vendored
Normal file
File diff suppressed because one or more lines are too long
13
browser/dist/index.html
vendored
Normal file
13
browser/dist/index.html
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
<!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-DrFpc8Xj.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/at/assets/index-CvFXbZtL.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
12
browser/index.html
Normal file
12
browser/index.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!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>
|
||||
25
browser/package.json
Normal file
25
browser/package.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
119
browser/src/App.css
Normal file
119
browser/src/App.css
Normal file
@@ -0,0 +1,119 @@
|
||||
.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;
|
||||
}
|
||||
56
browser/src/App.tsx
Normal file
56
browser/src/App.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import { useState } from 'react'
|
||||
import { AtUriBrowser, useAtUriBrowser } from './components/AtUriBrowser'
|
||||
import './App.css'
|
||||
|
||||
function BrowserContent() {
|
||||
const [atUri, setAtUri] = useState('')
|
||||
const { navigate, currentRecord } = useAtUriBrowser()
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (atUri) {
|
||||
await navigate(atUri)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<h1>AT Protocol Browser</h1>
|
||||
|
||||
<form onSubmit={handleSubmit} className="input-section">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="at://did:plc:xxx/ai.syui.log.post/rkey"
|
||||
value={atUri}
|
||||
onChange={(e) => setAtUri(e.target.value)}
|
||||
className="at-uri-input"
|
||||
/>
|
||||
<button type="submit">Browse</button>
|
||||
</form>
|
||||
|
||||
{!currentRecord && (
|
||||
<div className="info-section">
|
||||
<h2>About</h2>
|
||||
<p>Browse AT Protocol records directly from the PDS.</p>
|
||||
<ul>
|
||||
<li>Enter an AT URI to view its content</li>
|
||||
<li>Example: at://did:plc:xxx/ai.syui.log.post/xxx</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
|
||||
70
browser/src/components/AtUriBrowser.tsx
Normal file
70
browser/src/components/AtUriBrowser.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import { createContext, useContext, ReactNode, useState, useEffect } from 'react'
|
||||
import { AtProtoClient, RecordResponse } from '../lib/atproto'
|
||||
|
||||
interface AtUriBrowserContextType {
|
||||
client: AtProtoClient
|
||||
currentRecord: RecordResponse | null
|
||||
setCurrentRecord: (record: RecordResponse | null) => void
|
||||
navigate: (uri: 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 [currentRecord, setCurrentRecord] = useState<RecordResponse | null>(null)
|
||||
|
||||
const navigate = async (uri: string) => {
|
||||
try {
|
||||
const parsed = client.parseAtUri(uri)
|
||||
if (!parsed) {
|
||||
throw new Error('Invalid AT URI format')
|
||||
}
|
||||
|
||||
const record = await client.getRecord(parsed.repo, parsed.collection, parsed.rkey)
|
||||
setCurrentRecord(record)
|
||||
} catch (error) {
|
||||
console.error('Failed to navigate:', error)
|
||||
setCurrentRecord(null)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
const uri = params.get('uri')
|
||||
if (uri) {
|
||||
navigate(uri)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<AtUriBrowserContext.Provider value={{ client, currentRecord, setCurrentRecord, navigate }}>
|
||||
{children}
|
||||
{currentRecord && (
|
||||
<div className="record-view">
|
||||
<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>
|
||||
)}
|
||||
</AtUriBrowserContext.Provider>
|
||||
)
|
||||
}
|
||||
19
browser/src/index.css
Normal file
19
browser/src/index.css
Normal file
@@ -0,0 +1,19 @@
|
||||
* {
|
||||
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;
|
||||
}
|
||||
59
browser/src/lib/atproto.ts
Normal file
59
browser/src/lib/atproto.ts
Normal file
@@ -0,0 +1,59 @@
|
||||
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 || []
|
||||
}
|
||||
}
|
||||
10
browser/src/main.tsx
Normal file
10
browser/src/main.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
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>,
|
||||
)
|
||||
21
browser/tsconfig.json
Normal file
21
browser/tsconfig.json
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"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" }]
|
||||
}
|
||||
10
browser/tsconfig.node.json
Normal file
10
browser/tsconfig.node.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
11
browser/vite.config.ts
Normal file
11
browser/vite.config.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
base: '/at/',
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
emptyOutDir: true,
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user