\n \n \n \n",[],[132,171],"d1a21578-568c-11f1-8ed4-ee650bb23af1","PostList.tsx","d1a21622-568c-11f1-8ed4-ee650bb23af1","ba1730dc-568c-11f1-9a43-ee650bb23af1",10,["D",1779529823751],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useCallback, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Post {\n id: string;\n title: string;\n author: string;\n subreddit: string;\n score: number;\n num_comments: number;\n created_utc: number;\n permalink: string;\n url: string;\n selftext: string;\n thumbnail: string;\n preview: string | null;\n is_self: boolean;\n domain: string;\n link_flair_text: string | null;\n over_18: boolean;\n}\n\nfunction timeAgo(utc: number): string {\n const diff = Math.floor(Date.now() / 1000 - utc);\n if (diff < 60) return `${diff}秒前`;\n if (diff < 3600) return `${Math.floor(diff / 60)}分前`;\n if (diff < 86400) return `${Math.floor(diff / 3600)}時間前`;\n return `${Math.floor(diff / 86400)}日前`;\n}\n\nfunction formatScore(n: number): string {\n if (n >= 10000) return `${(n / 1000).toFixed(1)}k`;\n if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;\n return String(n);\n}\n\nfunction isImageUrl(url: string): boolean {\n return /\\.(jpg|jpeg|png|gif|webp)(\\?.*)?$/i.test(url);\n}\n\nexport function PostList({ subreddit, sort, onSelectPost }: {\n subreddit: string;\n sort: string;\n onSelectPost: (permalink: string) => void;\n}) {\n const [posts, setPosts] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [after, setAfter] = useState(null);\n const [loadingMore, setLoadingMore] = useState(false);\n\n const fetchPosts = useCallback(async (afterToken?: string) => {\n try {\n const params = new URLSearchParams({ subreddit, sort, limit: \"25\" });\n if (afterToken) params.set(\"after\", afterToken);\n\n const res = await fetch(`/api/posts?${params}`);\n if (!res.ok) throw new Error(\"読み込みに失敗しました\");\n const data = await res.json();\n\n if (data.error) throw new Error(data.error);\n\n if (afterToken) {\n setPosts((prev) => [...prev, ...data.posts]);\n } else {\n setPosts(data.posts);\n }\n setAfter(data.after);\n } catch (err: any) {\n setError(err.message);\n }\n }, [subreddit, sort]);\n\n useEffect(() => {\n setLoading(true);\n setError(null);\n setPosts([]);\n setAfter(null);\n fetchPosts().finally(() => setLoading(false));\n }, [fetchPosts]);\n\n const loadMore = async () => {\n if (!after || loadingMore) return;\n setLoadingMore(true);\n await fetchPosts(after);\n setLoadingMore(false);\n };\n\n if (loading) {\n return (\n

🔄

読み込み中...

\n );\n }\n\n if (error) {\n return (\n

⚠️ エラー

{error}

\n );\n }\n\n if (posts.length === 0) {\n return (\n

📭

投稿が見つかりませんでした

\n );\n }\n\n return (\n

\n {posts.map((post, i) => (\n onSelectPost(post.permalink)}\n >\n

\n {/* Header */}\n

\n {post.subreddit}\n ·\n u/{post.author}\n ·\n {timeAgo(post.created_utc)}\n {post.link_flair_text && (\n \n {post.link_flair_text}\n \n )}\n {post.over_18 && (\n \n NSFW\n \n )}\n

\n\n {/* Title */}\n

\n {post.title}\n

\n\n {/* Preview image */}\n {post.preview && isImageUrl(post.url) && (\n

\n \n

\n )}\n\n {/* Self text preview */}\n {post.is_self && post.selftext && (\n

\n {post.selftext.slice(0, 300)}\n {post.selftext.length > 300 ? \"...\" : \"\"}\n

\n )}\n\n {/* External link */}\n {!post.is_self && (\n

🔗 {post.domain}

\n )}\n\n {/* Footer */}\n

\n \n ▲ {formatScore(post.score)}\n \n \n 💬 {formatScore(post.num_comments)}件のコメント\n \n

\n ))}\n \n\n {/* Load more */}\n {after && (\n

\n {\n e.stopPropagation();\n loadMore();\n }}\n disabled={loadingMore}\n class=\"bg-orange-500 hover:bg-orange-600 text-white px-6 py-2.5 rounded-full text-sm font-medium transition disabled:opacity-50\"\n >\n {loadingMore ? \"読み込み中...\" : \"もっと読み込む\"}\n \n

\n )}\n \n );\n}",[],[132,187,179],"components","e1847b16-568c-11f1-86d1-ee650bb23af1","PostDetail.tsx","e1847bb6-568c-11f1-86d1-ee650bb23af1",11,["D",1779529850409],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Comment {\n id: string;\n author: string;\n body: string;\n score: number;\n created_utc: number;\n depth: number;\n replies: Comment[];\n}\n\ninterface PostData {\n id: string;\n title: string;\n author: string;\n subreddit: string;\n score: number;\n num_comments: number;\n created_utc: number;\n selftext: string;\n url: string;\n is_self: boolean;\n domain: string;\n preview: string | null;\n}\n\nfunction timeAgo(utc: number): string {\n const diff = Math.floor(Date.now() / 1000 - utc);\n if (diff < 60) return `${diff}秒前`;\n if (diff < 3600) return `${Math.floor(diff / 60)}分前`;\n if (diff < 86400) return `${Math.floor(diff / 3600)}時間前`;\n return `${Math.floor(diff / 86400)}日前`;\n}\n\nfunction formatScore(n: number): string {\n if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;\n return String(n);\n}\n\nfunction isImageUrl(url: string): boolean {\n return /\\.(jpg|jpeg|png|gif|webp)(\\?.*)?$/i.test(url);\n}\n\nfunction CommentItem({ comment, depth = 0 }: { comment: Comment; depth?: number }) {\n const [collapsed, setCollapsed] = useState(false);\n const maxDepth = 6;\n const borderColors = [\n \"border-orange-300\",\n \"border-blue-300\",\n \"border-green-300\",\n \"border-purple-300\",\n \"border-pink-300\",\n \"border-yellow-300\",\n \"border-teal-300\",\n ];\n\n return (\n

0 ? `ml-3 pl-3 border-l-2 ${borderColors[depth % borderColors.length]}` : \"\"}`}>\n

\n setCollapsed(!collapsed)}\n class=\"text-gray-400 hover:text-gray-600 font-mono\"\n >\n {collapsed ? \"[+]\" : \"[-]\"}\n \n u/{comment.author}\n ·\n {formatScore(comment.score)}pt\n ·\n {timeAgo(comment.created_utc)}\n

\n\n {!collapsed && (\n <>\n

\n {comment.body}\n

\n\n {comment.replies.length > 0 && depth < maxDepth && (\n

\n {comment.replies.map((reply) => (\n \n ))}\n

\n )}\n \n )}\n

\n );\n}\n\nexport function PostDetail({ permalink, onBack }: {\n permalink: string;\n onBack: () => void;\n}) {\n const [post, setPost] = useState(null);\n const [comments, setComments] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n setLoading(true);\n setError(null);\n window.scrollTo(0, 0);\n\n fetch(`/api/comments?permalink=${encodeURIComponent(permalink)}`)\n .then((res) => {\n if (!res.ok) throw new Error(\"読み込みに失敗しました\");\n return res.json();\n })\n .then((data) => {\n if (data.error) throw new Error(data.error);\n setPost(data.post);\n setComments(data.comments);\n })\n .catch((err) => setError(err.message))\n .finally(() => setLoading(false));\n }, [permalink]);\n\n if (loading) {\n return (\n

🔄

読み込み中...

\n );\n }\n\n if (error) {\n return (\n

\n \n

⚠️ {error}

\n );\n }\n\n if (!post) return null;\n\n return (\n

\n {/* Back button */}\n \n ← 一覧に戻る\n \n\n {/* Post content */}\n

\n {post.subreddit}\n ·\n u/{post.author}\n ·\n {timeAgo(post.created_utc)}\n

\n\n

\n {post.title}\n

\n\n {/* Image */}\n {post.preview && isImageUrl(post.url) && (\n

\n \n

\n )}\n\n {/* Self text */}\n {post.is_self && post.selftext && (\n

\n {post.selftext}\n

\n )}\n\n {/* External link */}\n {!post.is_self && (\n \n 🔗 {post.domain}\n ↗\n \n )}\n\n {/* Stats */}\n

\n \n ▲ {formatScore(post.score)}\n \n \n 💬 {formatScore(post.num_comments)}件のコメント\n \n \n Redditで開く ↗\n \n

\n\n {/* Comments */}\n

\n 💬 コメント ({comments.length})\n

\n\n {comments.length === 0\n ? (\n

\n コメントはありません\n

\n )\n : (\n

\n {comments.map((comment) => )}\n

\n )}\n

\n );\n}",[],[132,187,189],"9bc654cc-568d-11f1-bed9-ee650bb23af1","App.tsx","c2bf2960-568c-11f1-a8bb-ee650bb23af1",["D",1779530162893],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { PostList } from \"./PostList.tsx\";\nimport { PostDetail } from \"./PostDetail.tsx\";\n\nexport function App() {\n const [subreddit, setSubreddit] = useState(\"popular\");\n const [inputValue, setInputValue] = useState(\"\");\n const [sort, setSort] = useState(\"hot\");\n const [selectedPermalink, setSelectedPermalink] = useState(\n null,\n );\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (inputValue.trim()) {\n setSubreddit(inputValue.trim());\n setSelectedPermalink(null);\n }\n };\n\n const sortOptions = [\"hot\", \"new\", \"top\", \"rising\"];\n\n return (\n

\n {/* Header */}\n

\n {\n setSelectedPermalink(null);\n setSubreddit(\"popular\");\n setInputValue(\"\");\n }}\n >\n 📰 Reddit Viewer\n \n

\n\n

\n \n r/\n \n setInputValue(e.target.value)}\n placeholder=\"subreddit名を入力...\"\n class=\"w-full pl-8 pr-3 py-2 rounded-lg text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300\"\n />\n

\n \n 表示\n \n \n\n {/* Sort tabs */}\n {!selectedPermalink && (\n

\n {sortOptions.map((s) => (\n setSort(s)}\n class={`px-3 py-1 rounded-full text-xs font-medium transition ${\n sort === s\n ? \"bg-white text-orange-600\"\n : \"bg-white/20 hover:bg-white/30 text-white\"\n }`}\n >\n {s === \"hot\"\n ? \"🔥 Hot\"\n : s === \"new\"\n ? \"🆕 New\"\n : s === \"top\"\n ? \"⬆️ Top\"\n : \"📈 Rising\"}\n \n ))}\n

\n )}\n

\n\n {/* Content */}\n

\n {!selectedPermalink && (\n

\n r/{subreddit} · {sort}\n

\n )}\n\n {selectedPermalink\n ? (\n setSelectedPermalink(null)}\n />\n )\n : (\n \n setSelectedPermalink(permalink)}\n />\n )}\n

\n );\n}",[],[132,187,197],"ba17303c-568c-11f1-9a43-ee650bb23af1",8,["D",1779529784262],[151,152,153],[132,187],["D",1779529775070],[150,154,155],[132],["D",1779529615281],["D",1789555877593],{"_16":17,"_86":82},{"_16":17,"_79":80,"_81":82,"_33":34,"_83":84,"_85":26},{"_67":68,"_20":69,"_18":70,"_71":19,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":21,"_78":17},"ctx",{"_60":-5,"_108":249,"_250":251,"_252":253,"_254":26,"_255":26,"_256":26,"_257":106,"_258":-5,"_259":-7,"_260":-7,"_261":41,"_262":26,"_263":26,"_264":-5,"_265":26,"_266":26,"_267":26,"_268":-5},"ENV",{"_220":221,"_222":223,"_224":69,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]