\n setState(prev => ({ ...prev, currentView: 'feed' }))}\n className=\"text-2xl font-bold text-blue-600 hover:text-blue-700\"\n >\n 📝 Daily Blog\n \n

\n \n

\n setState(prev => ({ ...prev, currentView: 'feed' }))}\n className={`px-3 py-2 rounded-md text-sm font-medium ${\n state.currentView === 'feed' \n ? 'bg-blue-600 text-white' \n : 'text-gray-600 hover:text-gray-900'\n }`}\n >\n Feed\n \n \n {state.currentUser ? (\n <>\n setState(prev => ({ ...prev, currentView: 'create' }))}\n className={`px-3 py-2 rounded-md text-sm font-medium ${\n state.currentView === 'create' \n ? 'bg-blue-600 text-white' \n : 'text-gray-600 hover:text-gray-900'\n }`}\n >\n Write\n \n setState(prev => ({ \n ...prev, \n currentView: 'profile', \n selectedUserId: prev.currentUser?.id \n }))}\n className=\"flex items-center space-x-2 text-gray-600 hover:text-gray-900\"\n >\n

\n {state.currentUser.displayName.charAt(0).toUpperCase()}\n

\n {state.currentUser.displayName}\n \n \n Logout\n \n \n ) : (\n <>\n setState(prev => ({ ...prev, showAuthModal: true, authMode: 'login' }))}\n className=\"text-sm text-gray-600 hover:text-gray-900\"\n >\n Login\n \n setState(prev => ({ ...prev, showAuthModal: true, authMode: 'register' }))}\n className=\"btn-primary text-white px-4 py-2 rounded-md text-sm font-medium\"\n >\n Sign Up\n \n \n )}\n

\n );\n\n const renderAuthModal = () => {\n if (!state.showAuthModal) return null;\n\n return (\n

\n {state.authMode === 'login' ? 'Login' : 'Sign Up'}\n

\n setState(prev => ({ ...prev, showAuthModal: false }))}\n className=\"text-gray-500 hover:text-gray-700\"\n >\n ✕\n \n

\n \n setState(prev => ({ \n ...prev, \n authMode: prev.authMode === 'login' ? 'register' : 'login' \n }))}\n />\n

\n );\n };\n\n const renderContent = () => {\n switch (state.currentView) {\n case 'post':\n return (\n setState(prev => ({ ...prev, currentView: 'feed' }))}\n />\n );\n case 'profile':\n return (\n setState(prev => ({ ...prev, currentView: 'feed' }))}\n />\n );\n case 'create':\n return (\n setState(prev => ({ ...prev, currentView: 'feed' }))}\n />\n );\n default:\n return (\n

\n {state.posts.map(post => (\n setState(prev => ({ \n ...prev, \n currentView: 'post', \n selectedPostId: post.id \n }))}\n onAuthorClick={() => setState(prev => ({ \n ...prev, \n currentView: 'profile', \n selectedUserId: post.author.id \n }))}\n onRefresh={refreshPosts}\n />\n ))}\n \n {state.hasMore && (\n

\n \n {state.loading ? 'Loading...' : 'Load More Posts'}\n \n

\n )}\n \n {!state.hasMore && state.posts.length > 0 && (\n

\n You've reached the end! 🎉\n

\n )}\n

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

\n {renderHeader()}\n \n

\n {renderContent()}\n

\n \n {renderAuthModal()}\n

\n );\n}\n\n// Auth form component\nfunction AuthForm({ mode, onSubmit, onToggleMode }: {\n mode: 'login' | 'register';\n onSubmit: (data: any) => void;\n onToggleMode: () => void;\n}) {\n const [formData, setFormData] = useState({\n username: '',\n email: '',\n displayName: '',\n bio: ''\n });\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n onSubmit(formData);\n };\n\n return (\n

\n \n Username\n \n setFormData(prev => ({ ...prev, username: e.target.value }))}\n className=\"form-input w-full px-3 py-2 border border-gray-300 rounded-md\"\n />\n

\n \n {mode === 'register' && (\n <>\n

\n \n Email\n \n setFormData(prev => ({ ...prev, email: e.target.value }))}\n className=\"form-input w-full px-3 py-2 border border-gray-300 rounded-md\"\n />\n

\n \n

\n \n Display Name\n \n setFormData(prev => ({ ...prev, displayName: e.target.value }))}\n className=\"form-input w-full px-3 py-2 border border-gray-300 rounded-md\"\n />\n

\n \n

\n \n Bio (optional)\n \n setFormData(prev => ({ ...prev, bio: e.target.value }))}\n className=\"form-input w-full px-3 py-2 border border-gray-300 rounded-md\"\n rows={3}\n />\n

\n \n )}\n \n \n {mode === 'login' ? 'Login' : 'Sign Up'}\n \n \n

\n \n {mode === 'login' \n ? \"Don't have an account? Sign up\" \n : \"Already have an account? Login\"\n }\n \n

\n \n );\n}",[],[249,256,263],{"_107":270,"_100":271,"_152":272,"_154":257,"_155":138,"_156":273,"_158":159,"_109":274,"_104":31,"_161":179,"_163":275,"_164":27,"_165":-5,"_166":276,"_103":277},"833b3512-3fbe-11f0-8b62-76b3cceeab13","CreatePost.tsx","833b35da-3fbe-11f0-8b62-76b3cceeab13",16,["D",1748874792644],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { User } from \"../../shared/types.ts\";\n\ninterface CreatePostProps {\n currentUser: User;\n onPostCreated: () => void;\n onCancel: () => void;\n}\n\nexport default function CreatePost({ currentUser, onPostCreated, onCancel }: CreatePostProps) {\n const [formData, setFormData] = useState({\n title: '',\n content: '',\n summary: ''\n });\n const [submitting, setSubmitting] = useState(false);\n const [error, setError] = useState('');\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!formData.title.trim() || !formData.content.trim()) {\n setError('Title and content are required');\n return;\n }\n\n setSubmitting(true);\n setError('');\n \n try {\n const response = await fetch('/api/posts', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n title: formData.title.trim(),\n content: formData.content.trim(),\n summary: formData.summary.trim() || undefined\n })\n });\n \n if (response.ok) {\n onPostCreated();\n } else {\n const errorData = await response.json();\n setError(errorData.error || 'Failed to create post');\n }\n } catch (error) {\n console.error('Failed to create post:', error);\n setError('Failed to create post');\n } finally {\n setSubmitting(false);\n }\n };\n\n const generateSummary = () => {\n if (!formData.content.trim()) return;\n \n const content = formData.content.trim();\n const maxLength = 150;\n \n if (content.length <= maxLength) {\n setFormData(prev => ({ ...prev, summary: content }));\n return;\n }\n \n // Find the last complete sentence within the limit\n const truncated = content.substring(0, maxLength);\n const lastSentenceEnd = Math.max(\n truncated.lastIndexOf('.'),\n truncated.lastIndexOf('!'),\n truncated.lastIndexOf('?')\n );\n \n let summary;\n if (lastSentenceEnd > maxLength * 0.6) {\n summary = truncated.substring(0, lastSentenceEnd + 1);\n } else {\n const lastSpace = truncated.lastIndexOf(' ');\n summary = lastSpace > 0 ? truncated.substring(0, lastSpace) + '...' : truncated + '...';\n }\n \n setFormData(prev => ({ ...prev, summary }));\n };\n\n return (\n

Write a New Post

\n \n ✕\n \n

\n\n {/* Author info */}\n

\n {currentUser.displayName.charAt(0).toUpperCase()}\n

{currentUser.displayName}

@{currentUser.username}

\n\n {error && (\n

\n {error}\n

\n )}\n\n

\n {/* Title */}\n

\n \n Title *\n \n setFormData(prev => ({ ...prev, title: e.target.value }))}\n placeholder=\"What's your story about today?\"\n className=\"form-input w-full px-4 py-3 border border-gray-300 rounded-md text-lg\"\n maxLength={200}\n />\n

\n {formData.title.length}/200 characters\n

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

\n \n Content *\n \n setFormData(prev => ({ ...prev, content: e.target.value }))}\n placeholder=\"Share your thoughts, experiences, and stories...\"\n className=\"form-input w-full px-4 py-3 border border-gray-300 rounded-md resize-none\"\n rows={12}\n />\n

\n {formData.content.length} characters\n

\n\n {/* Summary */}\n

\n \n Summary (optional)\n \n \n Auto-generate\n \n

\n setFormData(prev => ({ ...prev, summary: e.target.value }))}\n placeholder=\"A brief summary that will appear in the feed...\"\n className=\"form-input w-full px-4 py-3 border border-gray-300 rounded-md resize-none\"\n rows={3}\n maxLength={200}\n />\n

\n {formData.summary.length}/200 characters. If left empty, one will be generated automatically.\n

\n\n {/* Actions */}\n

\n 💡 Tip: Share your daily experiences, thoughts, and stories with the community\n

\n \n Cancel\n \n \n {submitting ? 'Publishing...' : 'Publish Post'}\n \n

\n\n {/* Writing tips */}\n

Writing Tips

• Share personal experiences and reflections
• Be authentic and genuine in your storytelling
• Use paragraphs to break up longer thoughts
• Engage with your readers by asking questions
• Remember to be respectful and kind to others

\n );\n}",[],[249,256,271],{"_107":279,"_100":280,"_152":281,"_154":257,"_155":138,"_156":282,"_158":159,"_109":283,"_104":31,"_161":179,"_163":284,"_164":27,"_165":-5,"_166":285,"_103":286},"509e8d98-3fbe-11f0-b4e1-76b3cceeab13","PostCard.tsx","509e8e42-3fbe-11f0-b4e1-76b3cceeab13",14,["D",1748874707734],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { PostSummary, User } from \"../../shared/types.ts\";\n\ninterface PostCardProps {\n post: PostSummary;\n currentUser: User | null;\n onClick: () => void;\n onAuthorClick: () => void;\n onRefresh: () => void;\n}\n\nexport default function PostCard({ post, currentUser, onClick, onAuthorClick, onRefresh }: PostCardProps) {\n const [isLiking, setIsLiking] = useState(false);\n const [likesCount, setLikesCount] = useState(post.likesCount);\n const [isLiked, setIsLiked] = useState(false); // We'll need to get this from the API\n\n const handleLike = async (e: React.MouseEvent) => {\n e.stopPropagation();\n \n if (!currentUser) {\n alert('Please login to like posts');\n return;\n }\n\n if (isLiking) return;\n\n setIsLiking(true);\n \n try {\n const response = await fetch(`/api/posts/${post.id}/like`, {\n method: 'POST'\n });\n \n if (response.ok) {\n const data = await response.json();\n setLikesCount(data.likesCount);\n setIsLiked(data.liked);\n }\n } catch (error) {\n console.error('Failed to toggle like:', error);\n } finally {\n setIsLiking(false);\n }\n };\n\n const handleShare = async (e: React.MouseEvent) => {\n e.stopPropagation();\n \n if (!currentUser) {\n alert('Please login to share posts');\n return;\n }\n\n try {\n const response = await fetch(`/api/posts/${post.id}/share`, {\n method: 'POST'\n });\n \n if (response.ok) {\n // Copy link to clipboard\n const url = `${window.location.origin}/post/${post.id}`;\n await navigator.clipboard.writeText(url);\n alert('Post link copied to clipboard!');\n \n // Refresh to update share count\n onRefresh();\n }\n } catch (error) {\n console.error('Failed to share post:', error);\n // Fallback: just copy the link\n const url = `${window.location.origin}/post/${post.id}`;\n await navigator.clipboard.writeText(url);\n alert('Post link copied to clipboard!');\n }\n };\n\n const formatDate = (dateString: string) => {\n const date = new Date(dateString);\n const now = new Date();\n const diffInHours = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60));\n \n if (diffInHours < 1) {\n return 'Just now';\n } else if (diffInHours < 24) {\n return `${diffInHours}h ago`;\n } else if (diffInHours < 48) {\n return 'Yesterday';\n } else {\n return date.toLocaleDateString();\n }\n };\n\n return (\n

\n {/* Header */}\n

\n {\n e.stopPropagation();\n onAuthorClick();\n }}\n className=\"flex items-center space-x-3 hover:bg-gray-50 rounded-lg p-2 -m-2\"\n >\n

\n {post.author.displayName.charAt(0).toUpperCase()}\n

{post.author.displayName}

@{post.author.username}

\n \n

\n {formatDate(post.createdAt)}\n

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

\n {post.title}\n

\n {post.summary}\n

\n Read more →\n

\n\n {/* Actions */}\n

\n \n {isLiked ? '❤️' : '🤍'}\n {likesCount}\n \n \n \n 💬\n {post.commentsCount}\n \n \n \n 🔗\n {post.sharesCount}\n \n

\n \n

\n {post.likesCount} likes\n •\n {post.commentsCount} comments\n

\n );\n}",[],[249,256,280],{"_107":288,"_100":289,"_152":290,"_154":257,"_155":138,"_156":291,"_158":159,"_109":292,"_104":31,"_161":179,"_163":293,"_164":27,"_165":-5,"_166":294,"_103":295},"6911f324-3fbe-11f0-a32c-76b3cceeab13","PostDetail.tsx","6911f3f6-3fbe-11f0-a32c-76b3cceeab13",15,["D",1748874748753],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { Post, Comment, User } from \"../../shared/types.ts\";\n\ninterface PostDetailProps {\n postId: number;\n currentUser: User | null;\n onBack: () => void;\n}\n\nexport default function PostDetail({ postId, currentUser, onBack }: PostDetailProps) {\n const [post, setPost] = useState(null);\n const [comments, setComments] = useState([]);\n const [loading, setLoading] = useState(true);\n const [commentText, setCommentText] = useState('');\n const [submittingComment, setSubmittingComment] = useState(false);\n\n useEffect(() => {\n loadPost();\n }, [postId]);\n\n const loadPost = async () => {\n try {\n const response = await fetch(`/api/posts/${postId}`);\n if (response.ok) {\n const data = await response.json();\n setPost(data.post);\n setComments(data.comments);\n } else {\n console.error('Failed to load post');\n }\n } catch (error) {\n console.error('Error loading post:', error);\n } finally {\n setLoading(false);\n }\n };\n\n const handleLike = async () => {\n if (!currentUser || !post) {\n alert('Please login to like posts');\n return;\n }\n\n try {\n const response = await fetch(`/api/posts/${post.id}/like`, {\n method: 'POST'\n });\n \n if (response.ok) {\n const data = await response.json();\n setPost(prev => prev ? {\n ...prev,\n likesCount: data.likesCount,\n isLiked: data.liked\n } : null);\n }\n } catch (error) {\n console.error('Failed to toggle like:', error);\n }\n };\n\n const handleSubmitComment = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!currentUser || !post || !commentText.trim()) {\n return;\n }\n\n setSubmittingComment(true);\n \n try {\n const response = await fetch(`/api/posts/${post.id}/comments`, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ content: commentText.trim() })\n });\n \n if (response.ok) {\n const data = await response.json();\n setComments(prev => [...prev, data.comment]);\n setCommentText('');\n \n // Update comment count\n setPost(prev => prev ? {\n ...prev,\n commentsCount: prev.commentsCount + 1\n } : null);\n }\n } catch (error) {\n console.error('Failed to add comment:', error);\n } finally {\n setSubmittingComment(false);\n }\n };\n\n const handleShare = async () => {\n if (!post) return;\n \n try {\n if (currentUser) {\n await fetch(`/api/posts/${post.id}/share`, { method: 'POST' });\n }\n \n const url = `${window.location.origin}/post/${post.id}`;\n await navigator.clipboard.writeText(url);\n alert('Post link copied to clipboard!');\n \n if (currentUser) {\n setPost(prev => prev ? {\n ...prev,\n sharesCount: prev.sharesCount + 1\n } : null);\n }\n } catch (error) {\n console.error('Failed to share post:', error);\n }\n };\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n hour: '2-digit',\n minute: '2-digit'\n });\n };\n\n if (loading) {\n return (\n

Loading post...

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

Post not found

\n \n Go Back\n \n

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

\n {/* Back button */}\n \n ←\n Back to feed\n \n\n {/* Post */}\n

\n {/* Header */}\n

\n {post.author?.displayName.charAt(0).toUpperCase()}\n

{post.author?.displayName}

@{post.author?.username}

\n {formatDate(post.createdAt)}\n

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

{post.title}

\n {post.content}\n

\n\n {/* Actions */}\n

\n \n {post.isLiked ? '❤️' : '🤍'}\n {post.likesCount}\n \n \n

\n 💬\n {post.commentsCount}\n

\n \n \n 🔗\n {post.sharesCount}\n \n

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

\n Comments ({comments.length})\n

\n\n {/* Add comment form */}\n {currentUser ? (\n \n ) : (\n

Please login to comment on this post

\n )}\n\n {/* Comments list */}\n

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

\n {comment.author?.displayName.charAt(0).toUpperCase()}\n

\n \n {comment.author?.displayName}\n \n \n @{comment.author?.username}\n \n •\n \n {formatDate(comment.createdAt)}\n \n

{comment.content}

\n ))}\n \n {comments.length === 0 && (\n

\n No comments yet. Be the first to comment!\n

\n )}\n

\n );\n}",[],[249,256,289],{"_107":297,"_100":298,"_152":299,"_154":257,"_155":138,"_156":300,"_158":159,"_109":301,"_104":31,"_161":179,"_163":302,"_164":27,"_165":-5,"_166":303,"_103":304},"9283e848-3fbe-11f0-bb95-76b3cceeab13","UserProfile.tsx","9283e910-3fbe-11f0-bb95-76b3cceeab13",17,["D",1748874818288],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { User } from \"../../shared/types.ts\";\n\ninterface UserProfileProps {\n userId: number;\n currentUser: User | null;\n onBack: () => void;\n}\n\nexport default function UserProfile({ userId, currentUser, onBack }: UserProfileProps) {\n const [user, setUser] = useState(null);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n loadUser();\n }, [userId]);\n\n const loadUser = async () => {\n try {\n const response = await fetch(`/api/users/${userId}`);\n if (response.ok) {\n const data = await response.json();\n setUser(data.user);\n } else {\n console.error('Failed to load user');\n }\n } catch (error) {\n console.error('Error loading user:', error);\n } finally {\n setLoading(false);\n }\n };\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'long'\n });\n };\n\n if (loading) {\n return (\n

Loading profile...

\n );\n }\n\n if (!user) {\n return (\n

User not found

\n \n Go Back\n \n

\n );\n }\n\n const isOwnProfile = currentUser?.id === user.id;\n\n return (\n

\n {/* Back button */}\n \n ←\n Back\n \n\n {/* Profile */}\n

\n {/* Header */}\n

\n {user.displayName.charAt(0).toUpperCase()}\n

\n {user.displayName}\n

@{user.username}

\n \n {user.bio && (\n

{user.bio}

\n )}\n \n

\n 📅 Joined {formatDate(user.createdAt)}\n

\n\n {/* Stats placeholder - you could extend this to show post counts, etc. */}\n

Posts

Likes

Comments

\n\n {/* Actions */}\n {isOwnProfile && (\n

Your Profile

\n This is how others see your profile. Keep sharing great content!\n

\n 💡 Profile editing features coming soon\n

\n )}\n\n {/* Recent posts placeholder */}\n

Recent Posts

Post history feature coming soon!

\n For now, you can see all posts in the main feed.\n

\n );\n}",[],[249,256,298],[249,256],{"_107":307,"_100":308,"_152":309,"_154":250,"_155":138,"_156":251,"_158":159,"_109":310,"_104":31,"_161":311,"_163":312,"_164":27,"_165":-5,"_166":313,"_103":314},"0ec97b58-3fbe-11f0-9e55-76b3cceeab13","index.html","0ec97c0c-3fbe-11f0-9e55-76b3cceeab13",["D",1748874597281],"file","\n\n\n \n \n Daily Blog - Share Your Story\n \n \n \n 📝\">\n \n \n \n \n \n \n \n \n \n \n \n \n\n\n

\n \n

Loading Daily Blog...

\n \n \n \n\n",[],[249,308],{"_107":316,"_100":317,"_152":318,"_154":250,"_155":138,"_156":319,"_158":159,"_109":320,"_104":31,"_161":179,"_163":321,"_164":27,"_165":-5,"_166":322,"_103":323},"21948f52-3fbe-11f0-98bb-76b3cceeab13","index.tsx","2194901a-3fbe-11f0-98bb-76b3cceeab13",12,["D",1748874628813],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\n// Get initial data injected by the server\nconst initialData = (window as any).__INITIAL_DATA__ || {};\nconst initialRoute = (window as any).__INITIAL_ROUTE__ || '/';\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render(\n \n \n \n);",[],[249,317],{"_107":325,"_100":326,"_152":327,"_154":250,"_155":138,"_156":328,"_158":159,"_109":329,"_104":31,"_161":311,"_163":330,"_164":27,"_165":-5,"_166":331,"_103":332},"1bdd3ece-3fbe-11f0-a32c-76b3cceeab13","style.css","1bdd3f96-3fbe-11f0-a32c-76b3cceeab13",11,["D",1748874619223],"/* Custom styles for Daily Blog */\n\n/* Smooth transitions */\n* {\n transition: all 0.2s ease-in-out;\n}\n\n/* Custom scrollbar */\n::-webkit-scrollbar {\n width: 8px;\n}\n\n::-webkit-scrollbar-track {\n background: #f1f5f9;\n}\n\n::-webkit-scrollbar-thumb {\n background: #cbd5e1;\n border-radius: 4px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: #94a3b8;\n}\n\n/* Typography improvements */\n.prose {\n line-height: 1.7;\n}\n\n.prose p {\n margin-bottom: 1rem;\n}\n\n.prose h1, .prose h2, .prose h3 {\n margin-top: 1.5rem;\n margin-bottom: 0.5rem;\n font-weight: 600;\n}\n\n/* Card hover effects */\n.post-card {\n transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n}\n\n.post-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n}\n\n/* Button animations */\n.btn-primary {\n background: linear-gradient(135deg, #3b82f6, #1d4ed8);\n transition: all 0.2s ease-in-out;\n}\n\n.btn-primary:hover {\n background: linear-gradient(135deg, #1d4ed8, #1e40af);\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);\n}\n\n/* Like button animation */\n.like-btn {\n transition: all 0.2s ease-in-out;\n}\n\n.like-btn:hover {\n transform: scale(1.1);\n}\n\n.like-btn.liked {\n color: #ef4444;\n animation: heartbeat 0.6s ease-in-out;\n}\n\n@keyframes heartbeat {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n 100% { transform: scale(1); }\n}\n\n/* Loading animations */\n.loading-dots {\n display: inline-block;\n}\n\n.loading-dots::after {\n content: '';\n animation: dots 1.5s infinite;\n}\n\n@keyframes dots {\n 0%, 20% { content: ''; }\n 40% { content: '.'; }\n 60% { content: '..'; }\n 80%, 100% { content: '...'; }\n}\n\n/* Form focus states */\n.form-input:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n/* Avatar styles */\n.avatar {\n background: linear-gradient(135deg, #3b82f6, #8b5cf6);\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n}\n\n/* Post content styling */\n.post-content {\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n/* Responsive text sizing */\n@media (max-width: 640px) {\n .text-responsive-lg {\n font-size: 1.25rem;\n }\n \n .text-responsive-xl {\n font-size: 1.5rem;\n }\n}\n\n@media (min-width: 641px) {\n .text-responsive-lg {\n font-size: 1.5rem;\n }\n \n .text-responsive-xl {\n font-size: 2rem;\n }\n}\n\n/* Navigation active state */\n.nav-link.active {\n background-color: #3b82f6;\n color: white;\n}\n\n/* Comment thread styling */\n.comment-thread {\n border-left: 2px solid #e5e7eb;\n padding-left: 1rem;\n margin-left: 1rem;\n}\n\n/* Fade in animation */\n.fade-in {\n animation: fadeIn 0.5s ease-in-out;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n/* Success/Error message styling */\n.alert {\n border-radius: 8px;\n padding: 12px 16px;\n margin-bottom: 16px;\n border: 1px solid;\n}\n\n.alert-success {\n background-color: #f0fdf4;\n border-color: #bbf7d0;\n color: #166534;\n}\n\n.alert-error {\n background-color: #fef2f2;\n border-color: #fecaca;\n color: #dc2626;\n}",[],[249,326],[249],{"_107":335,"_100":336,"_152":337,"_154":-5,"_155":138,"_156":338,"_158":159,"_109":339,"_104":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":340,"_103":349},"b0027bf6-3fbd-11f0-87d5-76b3cceeab13","shared","875b4a2c-6d89-46bc-b5f9-653f995130f3",2,["D",1748874438271],[341],{"_107":342,"_100":343,"_152":344,"_154":337,"_155":138,"_156":338,"_158":159,"_109":345,"_104":31,"_161":179,"_163":346,"_164":27,"_165":-5,"_166":347,"_103":348},"b0027552-3fbd-11f0-87d5-76b3cceeab13","types.ts","b0027624-3fbd-11f0-87d5-76b3cceeab13",["D",1748874438271],"// Shared TypeScript types for the Daily Blog platform\n\nexport interface User {\n id: number;\n username: string;\n email: string;\n displayName: string;\n bio?: string;\n avatarUrl?: string;\n createdAt: string;\n}\n\nexport interface Post {\n id: number;\n userId: number;\n title: string;\n content: string;\n summary: string;\n createdAt: string;\n updatedAt: string;\n likesCount: number;\n commentsCount: number;\n sharesCount: number;\n // Populated from joins\n author?: User;\n isLiked?: boolean;\n}\n\nexport interface Comment {\n id: number;\n postId: number;\n userId: number;\n content: string;\n createdAt: string;\n // Populated from joins\n author?: User;\n}\n\nexport interface Like {\n id: number;\n postId: number;\n userId: number;\n createdAt: string;\n}\n\nexport interface Share {\n id: number;\n postId: number;\n userId: number;\n createdAt: string;\n}\n\n// API Request/Response types\nexport interface CreatePostRequest {\n title: string;\n content: string;\n summary?: string;\n}\n\nexport interface CreateCommentRequest {\n content: string;\n}\n\nexport interface CreateUserRequest {\n username: string;\n email: string;\n displayName: string;\n bio?: string;\n}\n\nexport interface PostsResponse {\n posts: Post[];\n hasMore: boolean;\n total: number;\n}\n\nexport interface PostDetailResponse {\n post: Post;\n comments: Comment[];\n}\n\n// Utility types\nexport type PostSummary = Pick & {\n author: Pick;\n};",[],[336,343],[336],{"_107":351,"_100":352,"_152":353,"_154":-5,"_155":138,"_156":241,"_158":159,"_109":354,"_104":31,"_161":311,"_163":355,"_164":27,"_165":-5,"_166":356,"_103":357},"a9ce7d52-3fbd-11f0-b870-76b3cceeab13","README.md","a9ce7ec4-3fbd-11f0-b870-76b3cceeab13",["D",1748874427866],"# Daily Blog - Social Blogging Platform\n\nA social blogging platform where users can share their daily experiences, thoughts, and stories with the community.\n\n## Features\n\n- **User Profiles**: Create and customize personal profiles\n- **Blog Posts**: Write and publish daily blog posts with rich text\n- **Social Interactions**: Like, comment, and share posts\n- **Feed**: Browse post summaries on the main page\n- **Full Post View**: Click to read complete posts\n- **Responsive Design**: Works on desktop and mobile\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema setup\n│ │ └── queries.ts # Database query functions\n│ ├── routes/\n│ │ ├── auth.ts # Authentication routes\n│ │ ├── posts.ts # Post CRUD operations\n│ │ ├── users.ts # User profile operations\n│ │ └── static.ts # Static file serving\n│ └── index.ts # Main Hono app entry point\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main React app\n│ │ ├── PostCard.tsx # Post summary component\n│ │ ├── PostDetail.tsx # Full post view\n│ │ ├── UserProfile.tsx # User profile component\n│ │ └── CreatePost.tsx # Post creation form\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ └── style.css # Custom styles\n├── shared/\n│ └── types.ts # Shared TypeScript types\n└── README.md\n```\n\n## Tech Stack\n\n- **Backend**: Hono (TypeScript API framework)\n- **Frontend**: React 18.2.0 with TypeScript\n- **Database**: SQLite\n- **Styling**: TailwindCSS\n- **Storage**: Val Town Blob for user avatars\n\n## Getting Started\n\n1. The backend automatically sets up the database on first run\n2. Visit the main page to start browsing posts\n3. Create an account to start posting and interacting\n4. Customize your profile and start sharing your daily experiences\n\n## API Endpoints\n\n- `GET /` - Main feed page\n- `GET /api/posts` - Get all posts (with pagination)\n- `GET /api/posts/:id` - Get specific post with comments\n- `POST /api/posts` - Create new post\n- `POST /api/posts/:id/like` - Like/unlike a post\n- `POST /api/posts/:id/comments` - Add comment to post\n- `GET /api/users/:id` - Get user profile\n- `POST /api/users` - Create/update user profile",[],[352],"files",[149,168,174,183,193,200,208,217,226,236,247,254,261,269,278,287,296,306,315,324,334,341,350],"counts",{"_362":31,"_363":241,"_364":31,"_365":31},"pulls","branches","forks","envVars","contents",[368,371,374,377],{"_107":150,"_100":151,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":159,"_109":369,"_104":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_103":370},["D",1748874471362],[151],{"_107":248,"_100":249,"_152":250,"_154":-5,"_155":138,"_156":251,"_158":159,"_109":372,"_104":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_103":373},["D",1748874597281],[249],{"_107":335,"_100":336,"_152":337,"_154":-5,"_155":138,"_156":338,"_158":159,"_109":375,"_104":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_103":376},["D",1748874438271],[336],{"_107":351,"_100":352,"_152":353,"_154":-5,"_155":138,"_156":241,"_158":159,"_109":378,"_104":31,"_161":311,"_163":355,"_164":27,"_165":-5,"_103":379},["D",1748874427866],[352],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_98":99,"_100":101,"_102":42,"_105":386,"_390":391,"_502":31,"_503":27},{"_107":108,"_100":101,"_109":387,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":-5,"_119":27,"_120":-5,"_121":31,"_14":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_21":388,"_135":389,"_146":27},["D",1748874231749],{"_98":99,"_133":134},{"_104":137,"_100":42,"_107":138,"_139":108,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":101,"_145":99},"history",[392,397,402,407,412,417,425,430,435,443,450,455,460,465,473,478,489,497],{"_152":239,"_104":137,"_109":393,"_155":138,"_358":394},["D",1748874824392],[395],{"_107":237,"_155":138,"_152":239,"_100":238,"_163":243,"_161":242,"_104":241,"_154":153,"_109":393,"_156":137,"_165":-5,"_158":159,"_164":27,"_103":396},[151,238],{"_152":299,"_104":300,"_109":398,"_155":138,"_358":399},["D",1748874818288],[400],{"_107":297,"_155":138,"_152":299,"_100":298,"_163":302,"_161":179,"_104":31,"_154":257,"_109":398,"_156":300,"_165":-5,"_158":159,"_164":27,"_103":401},[249,256,298],{"_152":272,"_104":273,"_109":403,"_155":138,"_358":404},["D",1748874792644],[405],{"_107":270,"_155":138,"_152":272,"_100":271,"_163":275,"_161":179,"_104":31,"_154":257,"_109":403,"_156":273,"_165":-5,"_158":159,"_164":27,"_103":406},[249,256,271],{"_152":290,"_104":291,"_109":408,"_155":138,"_358":409},["D",1748874748753],[410],{"_107":288,"_155":138,"_152":290,"_100":289,"_163":293,"_161":179,"_104":31,"_154":257,"_109":408,"_156":291,"_165":-5,"_158":159,"_164":27,"_103":411},[249,256,289],{"_152":281,"_104":282,"_109":413,"_155":138,"_358":414},["D",1748874707734],[415],{"_107":279,"_155":138,"_152":281,"_100":280,"_163":284,"_161":179,"_104":31,"_154":257,"_109":413,"_156":282,"_165":-5,"_158":159,"_164":27,"_103":416},[249,256,280],{"_152":264,"_104":258,"_109":418,"_155":138,"_358":419},["D",1748874680103],[420,422],{"_107":262,"_155":138,"_152":264,"_100":263,"_163":266,"_161":179,"_104":31,"_154":257,"_109":418,"_156":258,"_165":-5,"_158":159,"_164":27,"_103":421},[249,256,263],{"_107":255,"_155":138,"_152":257,"_100":256,"_163":-5,"_161":162,"_104":31,"_154":250,"_109":423,"_156":258,"_165":-5,"_158":159,"_164":27,"_103":424},["D",1748874680103],[249,256],{"_152":318,"_104":319,"_109":426,"_155":138,"_358":427},["D",1748874628813],[428],{"_107":316,"_155":138,"_152":318,"_100":317,"_163":321,"_161":179,"_104":31,"_154":250,"_109":426,"_156":319,"_165":-5,"_158":159,"_164":27,"_103":429},[249,317],{"_152":327,"_104":328,"_109":431,"_155":138,"_358":432},["D",1748874619223],[433],{"_107":325,"_155":138,"_152":327,"_100":326,"_163":330,"_161":311,"_104":31,"_154":250,"_109":431,"_156":328,"_165":-5,"_158":159,"_164":27,"_103":434},[249,326],{"_152":250,"_104":251,"_109":436,"_155":138,"_358":437},["D",1748874597281],[438,440],{"_107":248,"_155":138,"_152":250,"_100":249,"_163":-5,"_161":162,"_104":31,"_154":-5,"_109":436,"_156":251,"_165":-5,"_158":159,"_164":27,"_103":439},[249],{"_107":307,"_155":138,"_152":309,"_100":308,"_163":312,"_161":311,"_104":31,"_154":250,"_109":441,"_156":251,"_165":-5,"_158":159,"_164":27,"_103":442},["D",1748874597281],[249,308],{"_152":239,"_104":444,"_109":445,"_155":138,"_358":446},9,["D",1748874582860],[447],{"_107":448,"_155":138,"_152":239,"_100":238,"_163":243,"_161":179,"_104":31,"_154":153,"_109":445,"_156":444,"_165":-5,"_158":27,"_164":27,"_103":449},"0630a70a-3fbe-11f0-b6c3-76b3cceeab13",[151,238],{"_152":220,"_104":221,"_109":451,"_155":138,"_358":452},["D",1748874575224],[453],{"_107":218,"_155":138,"_152":220,"_100":219,"_163":223,"_161":179,"_104":31,"_154":196,"_109":451,"_156":221,"_165":-5,"_158":159,"_164":27,"_103":454},[151,195,219],{"_152":229,"_104":230,"_109":456,"_155":138,"_358":457},["D",1748874562267],[458],{"_107":227,"_155":138,"_152":229,"_100":228,"_163":232,"_161":179,"_104":31,"_154":196,"_109":456,"_156":230,"_165":-5,"_158":159,"_164":27,"_103":459},[151,195,228],{"_152":211,"_104":212,"_109":461,"_155":138,"_358":462},["D",1748874552347],[463],{"_107":209,"_155":138,"_152":211,"_100":210,"_163":214,"_161":179,"_104":31,"_154":196,"_109":461,"_156":212,"_165":-5,"_158":159,"_164":27,"_103":464},[151,195,210],{"_152":203,"_104":197,"_109":466,"_155":138,"_358":467},["D",1748874523470],[468,470],{"_107":201,"_155":138,"_152":203,"_100":202,"_163":205,"_161":179,"_104":31,"_154":196,"_109":466,"_156":197,"_165":-5,"_158":159,"_164":27,"_103":469},[151,195,202],{"_107":194,"_155":138,"_152":196,"_100":195,"_163":-5,"_161":162,"_104":31,"_154":153,"_109":471,"_156":197,"_165":-5,"_158":159,"_164":27,"_103":472},["D",1748874523470],[151,195],{"_152":186,"_104":187,"_109":474,"_155":138,"_358":475},["D",1748874506381],[476],{"_107":184,"_155":138,"_152":186,"_100":185,"_163":189,"_161":179,"_104":31,"_154":171,"_109":474,"_156":187,"_165":-5,"_158":159,"_164":27,"_103":477},[151,170,185],{"_152":177,"_104":157,"_109":479,"_155":138,"_358":480},["D",1748874471362],[481,483,486],{"_107":175,"_155":138,"_152":177,"_100":176,"_163":180,"_161":179,"_104":31,"_154":171,"_109":479,"_156":157,"_165":-5,"_158":159,"_164":27,"_103":482},[151,170,176],{"_107":150,"_155":138,"_152":153,"_100":151,"_163":-5,"_161":162,"_104":31,"_154":-5,"_109":484,"_156":157,"_165":-5,"_158":159,"_164":27,"_103":485},["D",1748874471362],[151],{"_107":169,"_155":138,"_152":171,"_100":170,"_163":-5,"_161":162,"_104":31,"_154":153,"_109":487,"_156":157,"_165":-5,"_158":159,"_164":27,"_103":488},["D",1748874471362],[151,170],{"_152":344,"_104":338,"_109":490,"_155":138,"_358":491},["D",1748874438271],[492,494],{"_107":342,"_155":138,"_152":344,"_100":343,"_163":346,"_161":179,"_104":31,"_154":337,"_109":490,"_156":338,"_165":-5,"_158":159,"_164":27,"_103":493},[336,343],{"_107":335,"_155":138,"_152":337,"_100":336,"_163":-5,"_161":162,"_104":31,"_154":-5,"_109":495,"_156":338,"_165":-5,"_158":159,"_164":27,"_103":496},["D",1748874438271],[336],{"_152":353,"_104":241,"_109":498,"_155":138,"_358":499},["D",1748874427866],[500],{"_107":351,"_155":138,"_152":353,"_100":352,"_163":355,"_161":311,"_104":31,"_154":-5,"_109":498,"_156":241,"_165":-5,"_158":159,"_164":27,"_103":501},[352],"page","hasNext","routes/_app","actionData","errors"]

History