\n \n \n \n",[18,67],"ba17303c-568c-11f1-9a43-ee650bb23af1",["D",1779529784262],[18,91],"pulls","branches",1,"forks","envVars",{"_199":26,"_201":26},"connections",{"_199":26,"_200":26},"count","unfilledCount","emptyCount",{"_35":169,"_13":18,"_65":93,"_45":-5,"_37":38,"_172":173,"_180":24,"_39":253,"_41":26,"_68":92,"_170":-5,"_69":30,"_174":-5,"_218":254,"_17":255},{"_35":188,"_13":91,"_65":90,"_45":93,"_37":38,"_172":85,"_180":24,"_39":250,"_41":26,"_68":92,"_170":-5,"_69":30,"_174":-5,"_218":251,"_17":252},{"_35":243,"_13":244,"_65":245,"_45":90,"_37":38,"_172":133,"_180":24,"_39":246,"_41":193,"_68":82,"_170":247,"_69":30,"_174":-5,"_218":248,"_17":249},{"_35":235,"_13":236,"_65":237,"_45":90,"_37":38,"_172":238,"_180":24,"_39":239,"_41":26,"_68":82,"_170":240,"_69":30,"_174":-5,"_218":241,"_17":242},{"_35":227,"_13":228,"_65":229,"_45":90,"_37":38,"_172":230,"_180":24,"_39":231,"_41":26,"_68":82,"_170":232,"_69":30,"_174":-5,"_218":233,"_17":234},{"_35":184,"_13":67,"_65":66,"_45":93,"_37":38,"_172":42,"_180":24,"_39":224,"_41":26,"_68":21,"_170":186,"_69":30,"_174":-5,"_218":225,"_17":226},{"_35":179,"_13":81,"_65":80,"_45":93,"_37":38,"_172":75,"_180":24,"_39":221,"_41":26,"_68":82,"_170":182,"_69":30,"_174":-5,"_218":222,"_17":223},{"_35":210,"_13":211,"_65":106,"_45":-5,"_37":38,"_172":212,"_180":24,"_39":213,"_41":214,"_68":215,"_170":216,"_69":30,"_174":217,"_218":219,"_17":220},"b44c6992-568c-11f1-9a43-ee650bb23af1","main.ts",4,["D",1779529774540],3,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Reddit API: Fetch posts from a subreddit\napp.get(\"/api/posts\", async (c) => {\n const subreddit = c.req.query(\"subreddit\") || \"popular\";\n const sort = c.req.query(\"sort\") || \"hot\";\n const after = c.req.query(\"after\") || \"\";\n const limit = c.req.query(\"limit\") || \"25\";\n\n try {\n const url = `https://www.reddit.com/r/${subreddit}/${sort}.json?limit=${limit}&after=${after}&raw_json=1`;\n const res = await fetch(url, {\n headers: { \"User-Agent\": \"ValTown:RedditViewer:v1.0\" },\n });\n\n if (!res.ok) {\n return c.json({ error: `Failed to fetch: ${res.status}` }, 500);\n }\n\n const data = await res.json();\n const posts = data.data.children.map((child: any) => ({\n id: child.data.id,\n title: child.data.title,\n author: child.data.author,\n subreddit: child.data.subreddit_name_prefixed,\n score: child.data.score,\n num_comments: child.data.num_comments,\n created_utc: child.data.created_utc,\n permalink: child.data.permalink,\n url: child.data.url,\n selftext: child.data.selftext,\n thumbnail: child.data.thumbnail,\n preview: child.data.preview?.images?.[0]?.source?.url || null,\n is_self: child.data.is_self,\n domain: child.data.domain,\n link_flair_text: child.data.link_flair_text,\n over_18: child.data.over_18,\n }));\n\n return c.json({\n posts,\n after: data.data.after,\n });\n } catch (err: any) {\n return c.json({ error: err.message }, 500);\n }\n});\n\n// Reddit API: Fetch comments for a post\napp.get(\"/api/comments\", async (c) => {\n const permalink = c.req.query(\"permalink\");\n if (!permalink) {\n return c.json({ error: \"permalink is required\" }, 400);\n }\n\n try {\n const url = `https://www.reddit.com${permalink}.json?raw_json=1&limit=50`;\n const res = await fetch(url, {\n headers: { \"User-Agent\": \"ValTown:RedditViewer:v1.0\" },\n });\n\n if (!res.ok) {\n return c.json({ error: `Failed to fetch: ${res.status}` }, 500);\n }\n\n const data = await res.json();\n\n // Post details\n const postData = data[0]?.data?.children?.[0]?.data;\n const post = postData\n ? {\n id: postData.id,\n title: postData.title,\n author: postData.author,\n subreddit: postData.subreddit_name_prefixed,\n score: postData.score,\n num_comments: postData.num_comments,\n created_utc: postData.created_utc,\n selftext: postData.selftext,\n selftext_html: postData.selftext_html,\n url: postData.url,\n is_self: postData.is_self,\n domain: postData.domain,\n preview: postData.preview?.images?.[0]?.source?.url || null,\n }\n : null;\n\n // Comments\n const parseComments = (children: any[]): any[] => {\n return (children || [])\n .filter((c: any) => c.kind === \"t1\")\n .map((c: any) => ({\n id: c.data.id,\n author: c.data.author,\n body: c.data.body,\n body_html: c.data.body_html,\n score: c.data.score,\n created_utc: c.data.created_utc,\n depth: c.data.depth,\n replies: c.data.replies\n ? parseComments(c.data.replies.data?.children || [])\n : [],\n }));\n };\n\n const comments = parseComments(data[1]?.data?.children || []);\n\n return c.json({ post, comments });\n } catch (err: any) {\n return c.json({ error: err.message }, 500);\n }\n});\n\n// Reddit API: Search subreddits\napp.get(\"/api/search-subreddits\", async (c) => {\n const query = c.req.query(\"q\");\n if (!query) {\n return c.json({ subreddits: [] });\n }\n\n try {\n const url = `https://www.reddit.com/subreddits/search.json?q=${encodeURIComponent(query)}&limit=10&raw_json=1`;\n const res = await fetch(url, {\n headers: { \"User-Agent\": \"ValTown:RedditViewer:v1.0\" },\n });\n\n if (!res.ok) {\n return c.json({ error: `Failed to fetch: ${res.status}` }, 500);\n }\n\n const data = await res.json();\n const subreddits = data.data.children.map((child: any) => ({\n name: child.data.display_name,\n title: child.data.title,\n subscribers: child.data.subscribers,\n icon: child.data.icon_img || child.data.community_icon || null,\n description: child.data.public_description,\n }));\n\n return c.json({ subreddits });\n } catch (err: any) {\n return c.json({ error: err.message }, 500);\n }\n});\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","adhdreddit","children",[],[211],["D",1779529782721],[],[18,81],["D",1779529780931],[],[18,67],"d1a21578-568c-11f1-8ed4-ee650bb23af1","PostList.tsx","d1a21622-568c-11f1-8ed4-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}",[],[18,91,228],"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}",[],[18,91,236],"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}",[],[18,91,244],["D",1779529784262],[204,205,206],[18,91],["D",1779529775070],[203,207,208],[18],["D",1779529615281],["D",1789555877593],{"_11":12,"_147":72},{"_11":12,"_142":143,"_71":72,"_31":70,"_144":145,"_146":30},{"_41":133,"_13":16,"_35":38,"_134":95,"_135":-5,"_136":-5,"_137":-5,"_138":-5,"_139":-5,"_140":14,"_141":12},"ctx",{"_55":-5,"_166":294,"_295":296,"_297":298,"_299":30,"_300":30,"_301":30,"_302":24,"_303":-5,"_304":-7,"_305":-7,"_306":26,"_307":30,"_308":30,"_309":-5,"_310":30,"_311":30,"_312":30,"_313":-5},"ENV",{"_265":266,"_267":268,"_269":16,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293},"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"]

History · frontend