ai/log
1
0
Fork 0
Code Issues Pull Requests Activity

add @user

Browse Source
This commit is contained in:
syui
2026-01-16 16:48:55 +09:00
parent 40815a3b60
commit 0da23547a6
6 changed files with 146 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/_redirects
View File

@@ -1 +0,0 @@
/* /index.html 200

12
scripts/generate.ts
View File

@@ -801,12 +801,20 @@ async function generate() {
console.log('Generated: /app.html')
// Generate _redirects for Cloudflare Pages (SPA routes)
const redirects = `/app / 301
/oauth/* /app.html 200
// Static files (index.html, post/*/index.html) are served automatically
// Dynamic routes are rewritten to app.html
const redirects = `/oauth/* /app.html 200
/at/* /app.html 200
/new /app.html 200
/app /app.html 200
`
fs.writeFileSync(path.join(distDir, '_redirects'), redirects)
console.log('Generated: /_redirects')
// Generate 404.html as SPA fallback for unmatched routes (like /@handle)
fs.writeFileSync(path.join(distDir, '404.html'), spaHtml)
console.log('Generated: /404.html')
// Copy static files
const filesToCopy = ['favicon.png', 'favicon.svg', 'config.json', 'networks.json', 'client-metadata.json', 'links.json']
for (const file of filesToCopy) {

5
src/components/browser.ts
View File

@@ -13,6 +13,9 @@ export function renderHeader(currentHandle: string, isLoggedIn: boolean, userHan
</svg>
</button>`
// Use logged-in user's handle for input if available
const inputHandle = isLoggedIn && userHandle ? userHandle : currentHandle
return `
<div class="header">
<form class="header-form" id="header-form">
@@ -21,7 +24,7 @@ export function renderHeader(currentHandle: string, isLoggedIn: boolean, userHan
class="header-input"
id="header-input"
placeholder="handle (e.g., syui.ai)"
value="${currentHandle}"
value="${inputHandle}"
>
<button type="submit" class="header-btn at-btn" title="Browse">@</button>
${loginBtn}

6
src/components/posts.ts
View File

@@ -4,7 +4,7 @@ import { renderMarkdown } from '../lib/markdown.js'
import { escapeHtml, formatDate } from '../lib/utils.js'
import { renderDiscussionLink, loadDiscussionPosts, getAppUrl } from './discussion.js'
export function mountPostList(container: HTMLElement, posts: BlogPost[]): void {
export function mountPostList(container: HTMLElement, posts: BlogPost[], userHandle?: string): void {
if (posts.length === 0) {
container.innerHTML = '<p class="no-posts">No posts yet</p>'
return
@@ -12,9 +12,11 @@ export function mountPostList(container: HTMLElement, posts: BlogPost[]): void {
const html = posts.map(post => {
const rkey = post.uri.split('/').pop()
// Use /@handle/post/rkey for user pages, /post/rkey for own blog
const postUrl = userHandle ? `/@${userHandle}/post/${rkey}` : `/post/${rkey}`
return `
<li class="post-item">
<a href="/post/${rkey}" class="post-link">
<a href="${postUrl}" class="post-link">
<span class="post-title">${escapeHtml(post.title)}</span>
<span class="post-date">${formatDate(post.createdAt)}</span>
</a>

16
src/lib/router.ts
View File

@@ -1,5 +1,5 @@
export interface Route {
type: 'blog' | 'post' | 'browser-services' | 'browser-collections' | 'browser-record' | 'new'
type: 'blog' | 'post' | 'browser-services' | 'browser-collections' | 'browser-record' | 'new' | 'user-blog' | 'user-post'
handle?: string
collection?: string
rkey?: string
@@ -33,6 +33,16 @@ export function parseRoute(pathname: string): Route {
return { type: 'new' }
}
// /@${handle} - User blog (any user's posts)
// /@${handle}/post/${rkey} - User post detail
if (parts[0].startsWith('@')) {
const handle = parts[0].slice(1) // Remove @ prefix
if (parts[1] === 'post' && parts[2]) {
return { type: 'user-post', handle, rkey: parts[2] }
}
return { type: 'user-blog', handle }
}
// /at/${handle} - Browser services
// /at/${handle}/${service-or-collection} - Browser collections or records
// /at/${handle}/${collection}/${rkey} - Browser record detail
@@ -75,6 +85,10 @@ export function buildPath(route: Route): string {
return '/new'
case 'post':
return `/post/${route.rkey}`
case 'user-blog':
return `/@${route.handle}`
case 'user-post':
return `/@${route.handle}/post/${route.rkey}`
case 'browser-services':
return `/at/${route.handle}`
case 'browser-collections':

123
src/main.ts
View File

@@ -94,6 +94,40 @@ function renderFooter(handle: string): string {
`
}
// Detect network from handle domain
// e.g., syui.ai → bsky.social, syui.syui.ai → syu.is
function detectNetworkFromHandle(handle: string): string {
const parts = handle.split('.')
if (parts.length >= 2) {
// Get domain part (last 2 parts for most cases)
const domain = parts.slice(-2).join('.')
// Check if domain matches any network key
if (networks[domain]) {
return domain
}
// Check if it's a subdomain of a known network
for (const networkKey of Object.keys(networks)) {
if (handle.endsWith(`.${networkKey}`) || handle.endsWith(networkKey)) {
return networkKey
}
}
}
// Default to bsky.social
return 'bsky.social'
}
function switchNetwork(newNetwork: string): void {
if (newNetwork === browserNetwork) return
browserNetwork = newNetwork
localStorage.setItem('browserNetwork', newNetwork)
const networkConfig = networks[newNetwork]
if (networkConfig) {
setNetworkConfig(networkConfig)
setAuthNetworkConfig(networkConfig)
}
updatePdsSelector()
}
function renderPdsSelector(): string {
const networkKeys = Object.keys(networks)
const options = networkKeys.map(key => {
@@ -220,10 +254,11 @@ function applyTitleTranslations(): void {
}
}
function renderTabs(activeTab: 'blog' | 'browser' | 'new', isLoggedIn: boolean): string {
function renderTabs(activeTab: 'blog' | 'browser' | 'new', isLoggedIn: boolean, handle?: string): string {
const browserHandle = handle || config.handle
let tabs = `
<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>
<button type="button" class="tab ${activeTab === 'browser' ? 'active' : ''}" id="browser-tab" data-handle="${browserHandle}">Browser</button>
`
if (isLoggedIn) {
@@ -242,6 +277,10 @@ function openBrowser(handle: string, service: string | null = null, collection:
if (!contentEl || !tabsEl) return
// Auto-detect and switch network based on handle
const detectedNetwork = detectNetworkFromHandle(handle)
switchNetwork(detectedNetwork)
// Save current content if not already in browser mode
if (!browserMode) {
savedContent = {
@@ -678,8 +717,10 @@ async function render(): Promise<void> {
const handle = route.handle || config.handle
// Skip re-rendering for static blog/post pages (but still mount header for login)
// Exception: if logged in on blog page, re-render to show user's blog
const isStaticRoute = route.type === 'blog' || route.type === 'post'
if (isStatic && isStaticRoute) {
const shouldUseStatic = isStatic && isStaticRoute && !(isLoggedIn && route.type === 'blog')
if (shouldUseStatic) {
// Only mount header for login functionality (pass isStatic=true to skip unnecessary re-render)
mountHeader(headerEl, handle, isLoggedIn, authSession?.handle, {
onBrowse: (newHandle) => {
@@ -826,21 +867,83 @@ async function render(): Promise<void> {
}
break
case 'blog':
default:
case 'user-blog':
// /@{handle} - Any user's blog
try {
const profile = await getProfile(config.handle)
const webUrl = networks[config.network]?.web
profileEl.innerHTML = renderTabs('blog', isLoggedIn)
const userHandle = route.handle!
// Auto-detect and switch network based on handle
const detectedNetwork = detectNetworkFromHandle(userHandle)
switchNetwork(detectedNetwork)
const profile = await getProfile(userHandle)
const webUrl = networks[browserNetwork]?.web
profileEl.innerHTML = renderTabs('blog', isLoggedIn, userHandle)
const profileContentEl = document.createElement('div')
profileEl.appendChild(profileContentEl)
mountProfile(profileContentEl, profile, webUrl)
const servicesHtml = await renderServices(config.handle)
const servicesHtml = await renderServices(userHandle)
profileContentEl.insertAdjacentHTML('beforeend', servicesHtml)
const posts = await listRecords(profile.did, config.collection)
mountPostList(contentEl, posts)
mountPostList(contentEl, posts, userHandle)
} catch (err) {
console.error(err)
contentEl.innerHTML = `<p class="error">Failed to load: ${err}</p>`
}
break
case 'user-post':
// /@{handle}/post/{rkey} - Any user's post detail
try {
const userHandle = route.handle!
// Auto-detect and switch network based on handle
const detectedNetwork = detectNetworkFromHandle(userHandle)
switchNetwork(detectedNetwork)
const profile = await getProfile(userHandle)
const webUrl = networks[browserNetwork]?.web
profileEl.innerHTML = renderTabs('blog', isLoggedIn, userHandle)
const profileContentEl = document.createElement('div')
profileEl.appendChild(profileContentEl)
mountProfile(profileContentEl, profile, webUrl)
const servicesHtml = await renderServices(userHandle)
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, userHandle, config.collection, canEdit, undefined, browserNetwork)
} 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 {
// If logged in, show logged-in user's blog instead of site owner's
const blogHandle = isLoggedIn ? authSession!.handle : config.handle
const detectedNetwork = isLoggedIn ? detectNetworkFromHandle(blogHandle) : config.network
if (isLoggedIn) {
switchNetwork(detectedNetwork)
}
const profile = await getProfile(blogHandle)
const webUrl = networks[detectedNetwork]?.web
profileEl.innerHTML = renderTabs('blog', isLoggedIn, blogHandle)
const profileContentEl = document.createElement('div')
profileEl.appendChild(profileContentEl)
mountProfile(profileContentEl, profile, webUrl)
const servicesHtml = await renderServices(blogHandle)
profileContentEl.insertAdjacentHTML('beforeend', servicesHtml)
const posts = await listRecords(profile.did, config.collection)
// Use handle for post links if logged in user
mountPostList(contentEl, posts, isLoggedIn ? blogHandle : undefined)
} catch (err) {
console.error(err)
contentEl.innerHTML = `<p class="error">Failed to load: ${err}</p>`