\n {currentUsername ? (\n // If a username is set, show the profile page\n

\n {\n e.preventDefault();\n setCurrentUsername(null);\n window.history.pushState({}, '', '/');\n }}\n >\n build.moi\n $\"logo\"$ \n \n

\n \n \n

\n ) : (\n // Otherwise, show the homepage\n \n )}\n

\n );\n}",[],[205,211,217],{"_106":225,"_96":226,"_160":227,"_162":212,"_163":144,"_164":165,"_166":120,"_108":228,"_102":32,"_168":220,"_170":229,"_171":22,"_172":-5,"_173":230,"_100":231},"96e6f932-2495-11f0-8325-569c3dd06744","HomePage.tsx","86831608-7d58-4266-8e9f-bc131079b8fb",["D",1745888534880],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface HomePageProps {\n onSubmit: (username: string) => void;\n isDarkMode: boolean;\n}\n\nexport function HomePage({ onSubmit, isDarkMode }: HomePageProps) {\n const [username, setUsername] = useState(\"\");\n const [error, setError] = useState(null);\n const [showHowItWorks, setShowHowItWorks] = useState(false);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n \n // Basic validation\n if (!username.trim()) {\n setError(\"Please enter a Val Town username\");\n return;\n }\n \n // Clear any previous errors\n setError(null);\n \n // Call the onSubmit callback with the entered username\n onSubmit(username.trim());\n };\n\n // Choose the right colors based on dark/light mode\n const bgClass = isDarkMode ? 'bg-gray-900' : 'bg-white';\n const textClass = isDarkMode ? 'text-white' : 'text-gray-900';\n const secondaryTextClass = isDarkMode ? 'text-gray-300' : 'text-gray-600';\n const infoBoxBgClass = isDarkMode ? 'bg-gray-800' : 'bg-orange-50';\n const infoBoxBorderClass = isDarkMode ? 'border-gray-700' : 'border-orange-200';\n const infoBoxTextClass = isDarkMode ? 'text-orange-300' : 'text-orange-800';\n const buttonBgClass = isDarkMode ? 'bg-emerald-600 hover:bg-emerald-700' : 'bg-emerald-600 hover:bg-emerald-700';\n const inputBgClass = isDarkMode ? 'bg-gray-800 border-gray-700' : 'border-gray-300 bg-white';\n const inputTextClass = isDarkMode ? 'text-white' : 'text-gray-900';\n const userButtonBgClass = isDarkMode ? 'bg-gray-800 hover:bg-gray-700 border-gray-700' : 'border-gray-300 hover:bg-gray-50';\n const howItWorksBtnClass = isDarkMode ? 'text-orange-400 hover:text-orange-300' : 'text-orange-600 hover:text-orange-500';\n const cardBgClass = isDarkMode ? 'bg-gray-800' : 'bg-orange-50';\n const cardBorderClass = isDarkMode ? 'border-gray-700' : 'border-orange-200';\n\n return (\n

\n build.moi\n $\"logo\"$ \n

\n A new creative home\n

\n \n

\n \n {showHowItWorks && (\n

How build.moi works:

Create a Val Town project (soon to be val) with your content
All public vals appear automatically in the \"Code\" tab
Create a \"Post\" by adding a moi.md file with YAML frontmatter
Include properties like title, description, imageUrl, and url
Your posts will then appear in the \"Posts\" tab on your build.moi profile

\n{`---\ntitle: \"My Project\"\ndescription: \"Project description\"\nimageUrl: \"https://example.com/image.jpg\"\nurl: \"https://myapp.web.val.run\"\n---`}\n

\n )}\n

\n \n

Showcase your work

Create beautiful profile pages that showcase your Val Town projects in a clean, modern grid layout.

\n \n

Simple integration

Just add a moi.md file to your projects and they'll automatically appear in your build.moi profile.

\n \n \n \n

See Charlie's Profile

\n onSubmit('dcm31')}\n className={`py-2 px-5 border ${userButtonBgClass} rounded-md transition-colors`}\n >\n @dcm31\n \n

\n );\n}",[],[205,211,226],{"_106":233,"_96":234,"_160":235,"_162":212,"_163":144,"_164":165,"_166":120,"_108":236,"_102":32,"_168":220,"_170":237,"_171":22,"_172":-5,"_173":238,"_100":239},"96e70134-2495-11f0-8325-569c3dd06744","SwipeViewer.tsx","31702341-4f7e-4ec7-9590-6bbbbd0d0ffa",["D",1745888534880],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { setupViewportHeight } from \"../utils/viewport.ts\";\n\ninterface Val {\n id: string;\n url: string;\n name: string;\n username: string;\n description: string | null;\n image_url: string | null;\n forked_branch_id: string | null;\n updated_at: string;\n matchCount: number;\n moiConfig?: any;\n hasMoiMd?: boolean;\n httpEndpoint?: string | null;\n}\n\ninterface SwipeViewerProps {\n vals: Val[];\n initialIndex?: number;\n onClose: () => void;\n isDarkMode: boolean;\n}\n\nexport function SwipeViewer({ vals, initialIndex = 0, onClose, isDarkMode }: SwipeViewerProps) {\n const [currentIndex, setCurrentIndex] = useState(initialIndex);\n const [isTransitioning, setIsTransitioning] = useState(false);\n const [isInteractMode, setIsInteractMode] = useState(false); // Default: Swipe Mode\n const [loading, setLoading] = useState>({});\n const [debugInfo, setDebugInfo] = useState(\"\");\n const [horizontalSwipeActive, setHorizontalSwipeActive] = useState(false);\n const [showSwipeIndicator, setShowSwipeIndicator] = useState(true);\n \n const touchStartRef = useRef({ x: 0, y: 0, time: 0 });\n const touchMoveRef = useRef({ x: 0, y: 0 });\n const containerRef = useRef(null);\n const touchActiveRef = useRef(false);\n \n // Track loaded vals for lazy loading\n const loadedValsRef = useRef>(new Set());\n const [visibleRange, setVisibleRange] = useState([Math.max(0, currentIndex - 1), Math.min(vals.length - 1, currentIndex + 1)]);\n\n // Add console logs for debugging\n const debugLog = (message: string) => {\n console.log(`[SwipeViewer DEBUG] ${message}`);\n setDebugInfo(prev => `${message}\\n${prev}`.slice(0, 500)); // Keep last 500 chars\n };\n\n // Using a ref to track if component is mounted\n const isMountedRef = useRef(false);\n\n // Show swipe indicator for a few seconds\n useEffect(() => {\n if (showSwipeIndicator) {\n const timer = setTimeout(() => {\n setShowSwipeIndicator(false);\n }, 3000);\n \n return () => clearTimeout(timer);\n }\n }, [showSwipeIndicator]);\n\n // Hide swipe indicator when entering interact mode\n useEffect(() => {\n if (isInteractMode) {\n setShowSwipeIndicator(false);\n } else {\n // Show swipe indicator again when returning to swipe mode\n setShowSwipeIndicator(true);\n \n // Hide it after 3 seconds\n const timer = setTimeout(() => {\n setShowSwipeIndicator(false);\n }, 3000);\n \n return () => clearTimeout(timer);\n }\n }, [isInteractMode]);\n\n // Listen for ESC key to return to swipe mode on desktop\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' && isInteractMode) {\n debugLog(\"ESC key pressed, returning to swipe mode\");\n setIsInteractMode(false);\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n\n return () => {\n window.removeEventListener('keydown', handleKeyDown);\n };\n }, [isInteractMode]);\n\n // Function to force the iframe to display at the top\n const fixPositioning = useCallback(() => {\n if (typeof window !== \"undefined\") {\n debugLog(`Window: ${window.innerWidth}x${window.innerHeight}, Scroll: ${window.scrollX},${window.scrollY}`);\n \n // Prevent scrolling\n document.documentElement.style.overflow = 'hidden';\n document.body.style.overflow = 'hidden';\n \n // Position fixed approach\n document.body.style.position = 'fixed';\n document.body.style.width = '100%';\n document.body.style.height = '100%';\n document.body.style.top = '0';\n document.body.style.left = '0';\n \n // Force scroll to top (multiple methods for cross-browser support)\n window.scrollTo(0, 0);\n \n // Set viewport height\n const vh = window.innerHeight * 0.01;\n document.documentElement.style.setProperty(\"--vh\", `${vh}px`);\n \n debugLog(`Set viewport height: --vh = ${vh}px`);\n }\n }, []);\n\n // Effect to handle viewport height on mobile\n useEffect(() => {\n debugLog(\"Component mounted\");\n isMountedRef.current = true;\n \n // Initial setup for viewport\n const cleanup = setupViewportHeight();\n \n // Initial position fix\n fixPositioning();\n \n // Set up event listeners for orientation changes\n window.addEventListener('resize', fixPositioning);\n window.addEventListener('orientationchange', fixPositioning);\n \n // Also run on a delay to catch any potential post-render movement\n const timeout1 = setTimeout(fixPositioning, 50);\n const timeout2 = setTimeout(fixPositioning, 200);\n const timeout3 = setTimeout(fixPositioning, 500);\n const timeout4 = setTimeout(fixPositioning, 1000);\n \n // Mutation observer to detect DOM changes that might affect position\n const observer = new MutationObserver(() => {\n if (isMountedRef.current) {\n fixPositioning();\n }\n });\n \n observer.observe(document.body, { \n childList: true, \n subtree: true,\n attributes: true,\n attributeFilter: ['style', 'class']\n });\n \n // Cleanup function\n return () => {\n cleanup();\n isMountedRef.current = false;\n \n window.removeEventListener('resize', fixPositioning);\n window.removeEventListener('orientationchange', fixPositioning);\n \n clearTimeout(timeout1);\n clearTimeout(timeout2);\n clearTimeout(timeout3);\n clearTimeout(timeout4);\n \n observer.disconnect();\n \n // Restore body styling when component unmounts\n document.documentElement.style.overflow = '';\n document.body.style.overflow = '';\n document.body.style.position = '';\n document.body.style.width = '';\n document.body.style.height = '';\n document.body.style.top = '';\n document.body.style.left = '';\n \n debugLog(\"Component unmounted\");\n };\n }, [fixPositioning]);\n\n // Update visible range whenever currentIndex changes\n useEffect(() => {\n const newVisibleRange = [\n Math.max(0, currentIndex - 1),\n Math.min(vals.length - 1, currentIndex + 1)\n ];\n setVisibleRange(newVisibleRange);\n \n // Mark current and adjacent vals as loaded\n for (let i = newVisibleRange[0]; i <= newVisibleRange[1]; i++) {\n loadedValsRef.current.add(vals[i].id);\n }\n \n debugLog(`Current index changed to ${currentIndex}, visible range: [${newVisibleRange[0]}, ${newVisibleRange[1]}]`);\n \n // Re-fix positioning when changing pages\n fixPositioning();\n }, [currentIndex, vals, fixPositioning]);\n\n // Handle iframe loading state\n const handleIframeLoad = useCallback((valId: string) => {\n debugLog(`Iframe loaded: ${valId}`);\n setLoading(prev => ({ ...prev, [valId]: false }));\n \n // Fix positioning after iframe load\n fixPositioning();\n }, [fixPositioning]);\n\n const handleIframeError = useCallback((valId: string) => {\n debugLog(`Iframe error: ${valId}`);\n setLoading(prev => ({ ...prev, [valId]: false }));\n }, []);\n\n // Bounce effect for reaching the end of content\n const bounceEffect = useCallback((direction, axis = 'vertical') => {\n if (axis === 'vertical' && containerRef.current) {\n containerRef.current.style.transition = \"transform 0.3s cubic-bezier(.25,.75,.5,1.25)\";\n containerRef.current.style.transform = `translateY(${direction * -20}px)`;\n setTimeout(() => {\n if (containerRef.current) {\n containerRef.current.style.transition = \"transform 0.2s cubic-bezier(.25,.75,.5,1.25)\";\n containerRef.current.style.transform = \"translateY(0)\";\n }\n }, 250);\n } else if (axis === 'horizontal' && containerRef.current) {\n containerRef.current.style.transition = \"transform 0.3s cubic-bezier(.25,.75,.5,1.25)\";\n containerRef.current.style.transform = `translateX(${direction * -20}px)`;\n setTimeout(() => {\n if (containerRef.current) {\n containerRef.current.style.transition = \"transform 0.2s cubic-bezier(.25,.75,.5,1.25)\";\n containerRef.current.style.transform = \"translateX(0)\";\n }\n }, 250);\n }\n }, []);\n\n // Change index - Only works in swipe mode\n const changeIndex = useCallback((direction) => {\n if (isInteractMode || isTransitioning) return;\n const newIndex = Math.max(0, Math.min(currentIndex + direction, vals.length - 1));\n \n if (newIndex !== currentIndex) {\n debugLog(`Changing index from ${currentIndex} to ${newIndex}`);\n setIsTransitioning(true);\n setCurrentIndex(newIndex);\n // Keep interact mode state when navigating\n setTimeout(() => setIsTransitioning(false), 500);\n } else {\n if ((direction > 0 && currentIndex === vals.length - 1) || \n (direction < 0 && currentIndex === 0)) { \n debugLog(`Bouncing at ${currentIndex === 0 ? 'start' : 'end'} with direction ${direction}`);\n bounceEffect(direction > 0 ? 1 : -1, 'vertical'); \n }\n }\n }, [currentIndex, isTransitioning, vals.length, bounceEffect, isInteractMode]);\n\n // Wheel handler\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n \n const handleWheel = (e: WheelEvent) => {\n if (isInteractMode) {\n return; // Let the iframe handle the wheel event when in interact mode\n }\n e.preventDefault();\n if (Math.abs(e.deltaY) > 30) { \n debugLog(`Wheel event: deltaY=${e.deltaY}`);\n changeIndex(e.deltaY > 0 ? 1 : -1); \n }\n };\n \n container.addEventListener(\"wheel\", handleWheel, { passive: false });\n return () => container.removeEventListener(\"wheel\", handleWheel);\n }, [isInteractMode, changeIndex]);\n\n // Touch handlers\n const handleTouchStart = useCallback((e: React.TouchEvent) => {\n touchStartRef.current = { \n x: e.touches[0].clientX, \n y: e.touches[0].clientY, \n time: Date.now() \n };\n touchMoveRef.current = { ...touchStartRef.current };\n touchActiveRef.current = true;\n setHorizontalSwipeActive(false);\n \n debugLog(`Touch start: x=${touchStartRef.current.x}, y=${touchStartRef.current.y}, interact mode: ${isInteractMode}`);\n \n if (containerRef.current) { \n containerRef.current.style.transition = \"none\"; \n }\n }, [isInteractMode]);\n\n const handleTouchMove = useCallback((e: React.TouchEvent) => {\n if (!touchActiveRef.current) return;\n \n touchMoveRef.current = { \n x: e.touches[0].clientX, \n y: e.touches[0].clientY \n };\n \n const deltaX = touchMoveRef.current.x - touchStartRef.current.x;\n const deltaY = touchMoveRef.current.y - touchStartRef.current.y;\n \n // Determine if this is primarily a horizontal swipe\n const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY) * 1.5;\n \n // If in interact mode, only care about right swipes (positive deltaX)\n if (isInteractMode) {\n if (isHorizontalSwipe && deltaX > 30) {\n // This is a right swipe in interact mode, could be to return to feed\n setHorizontalSwipeActive(true);\n if (containerRef.current) {\n containerRef.current.style.transform = `translateX(${deltaX / 3}px)`;\n }\n e.preventDefault(); // Prevent default to avoid scrolling iframe content\n }\n return;\n }\n \n // In swipe mode, handle vertical swipes\n if (!isHorizontalSwipe) {\n if (containerRef.current) {\n let resistance = 1;\n if ((currentIndex === 0 && deltaY > 0) || \n (currentIndex === vals.length - 1 && deltaY < 0)) {\n resistance = 3;\n }\n containerRef.current.style.transform = `translateY(${deltaY / resistance}px)`;\n }\n }\n }, [currentIndex, vals.length, isInteractMode]);\n\n const handleTouchEnd = useCallback((e: React.TouchEvent) => {\n if (!touchActiveRef.current) {\n return;\n }\n \n touchActiveRef.current = false;\n const endX = e.changedTouches[0].clientX;\n const endY = e.changedTouches[0].clientY;\n const deltaX = endX - touchStartRef.current.x;\n const deltaY = endY - touchStartRef.current.y;\n const deltaTime = Date.now() - touchStartRef.current.time;\n const velocityX = deltaTime > 0 ? Math.abs(deltaX) / deltaTime : 0;\n const velocityY = deltaTime > 0 ? Math.abs(deltaY) / deltaTime : 0;\n \n // Is this a horizontal swipe?\n const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY) * 1.5;\n \n // In interact mode, check for right swipe to go back to feed\n if (isInteractMode) {\n if (containerRef.current) {\n containerRef.current.style.transition = \"transform 0.3s ease-out\";\n containerRef.current.style.transform = \"translateX(0)\";\n }\n \n if (isHorizontalSwipe && deltaX > 0) {\n const viewportWidth = typeof window !== \"undefined\" ? window.innerWidth : 375;\n if (deltaX > viewportWidth * 0.25 || (deltaX > 60 && velocityX > 0.3)) {\n // This is a right swipe with enough distance/velocity to go back to feed\n debugLog(\"Right swipe detected in interact mode - going back to feed\");\n onClose(); // Close the viewer to go back to feed\n }\n }\n return;\n }\n \n // In swipe mode\n \n // Check if this was more of a tap than a swipe\n const isSmallMovement = Math.abs(deltaX) < 10 && Math.abs(deltaY) < 10;\n const isQuickTap = deltaTime < 300;\n \n debugLog(`Touch end: deltaX=${deltaX}, deltaY=${deltaY}, velocityX=${velocityX.toFixed(2)}, velocityY=${velocityY.toFixed(2)}, isHorizontalSwipe=${isHorizontalSwipe}`);\n \n if (containerRef.current) {\n containerRef.current.style.transition = \"transform 0.3s ease-out\";\n containerRef.current.style.transform = \"translateY(0)\";\n }\n \n // Handle as tap if small movement and quick\n if (isSmallMovement && isQuickTap) {\n debugLog(\"Detected tap, entering interact mode\");\n setIsInteractMode(true);\n return;\n }\n \n // Otherwise handle as swipe (only process vertical swipes in swipe mode)\n if (!isHorizontalSwipe) {\n const viewportHeight = typeof window !== \"undefined\" ? window.innerHeight : 600;\n if (Math.abs(deltaY) > (viewportHeight * 0.15) || velocityY > 0.3) { \n changeIndex(deltaY > 0 ? -1 : 1); \n }\n }\n }, [changeIndex, isInteractMode, onClose]);\n\n // Toggle interact mode\n const toggleInteractMode = useCallback(() => {\n setIsInteractMode(prev => {\n debugLog(`Toggle interact mode: ${prev ? 'swipe' : 'interactive'}`);\n return !prev;\n });\n }, []);\n\n // Function to get appropriate URL for a val\n const getValUrl = useCallback((val: Val) => {\n // Priority order:\n // 1. Use explicit url from moiConfig if available\n if (val.moiConfig?.url) {\n return val.moiConfig.url;\n }\n // 2. Use httpEndpoint if available\n else if (val.httpEndpoint) {\n return val.httpEndpoint;\n }\n // 3. Fallback to code URL - not ideal for iframe, but better than nothing\n else {\n return val.url;\n }\n }, []);\n\n // Close the viewer - make sure this properly returns to profile\n const handleClose = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n debugLog(\"Closing viewer and returning to profile\");\n \n // Restore scroll before closing\n document.documentElement.style.overflow = '';\n document.body.style.overflow = '';\n document.body.style.position = '';\n document.body.style.width = '';\n document.body.style.height = '';\n document.body.style.top = '';\n document.body.style.left = '';\n \n // Call the onClose function to properly return to profile\n onClose();\n }, [onClose]);\n\n // Back to swipe mode\n const handleBackToSwipe = useCallback((e: React.MouseEvent) => {\n e.stopPropagation();\n debugLog(\"Back to swipe mode\");\n setIsInteractMode(false);\n }, []);\n\n // Safety check - don't render if no vals or empty array\n if (!vals || vals.length === 0) {\n return null;\n }\n\n // Get current val\n const currentVal = vals[currentIndex];\n\n return (\n

\n \n {/* Pages container with page divider */}\n

\n {vals.map((val, index) => {\n // Only load iframes that are in visible range (current + adjacent)\n const isInRange = index >= visibleRange[0] && index <= visibleRange[1];\n const shouldRender = isInRange || loadedValsRef.current.has(val.id);\n const isActive = index === currentIndex;\n \n if (!shouldRender) return null;\n \n return (\n \n {/* Top divider line */}\n

\n \n

\n {/* Show loading state while iframe loads */}\n {loading[val.id] && (\n

\n )}\n \n handleIframeLoad(val.id)}\n onError={() => handleIframeError(val.id)}\n />\n

\n \n {/* Bottom divider line */}\n

\n );\n })}\n

\n \n {/* Tap overlay - only shows in swipe mode with no background */}\n {!isInteractMode && (\n

\n Tap Anywhere\n

\n )}\n \n {/* Navigation buttons - Animated to transform between states */}\n

\n {isInteractMode ? (\n \n ‹\n \n ) : (\n \n ✕\n \n )}\n

\n \n {/* Swipe indicator - tiktok/instagram style at bottom edge */}\n {!isInteractMode && showSwipeIndicator && vals.length > 1 && (\n

\n SWIPE\n

▼

\n )}\n \n {/* Pagination dots - only visible in swipe mode */}\n {!isInteractMode && (\n

\n {vals.map((val, index) => (\n {\n if (!isTransitioning && index !== currentIndex) {\n setCurrentIndex(index);\n setIsTransitioning(true);\n setTimeout(() => setIsTransitioning(false), 500);\n }\n }}\n />\n ))}\n

\n )}\n \n {/* Debug overlay - only visible during development */}\n {false && (\n

{debugInfo}

\n )}\n \n \n );\n}\n\nexport default SwipeViewer;",[],[205,211,234],{"_106":241,"_96":242,"_160":243,"_162":212,"_163":144,"_164":181,"_166":22,"_108":244,"_102":245,"_168":220,"_170":246,"_171":22,"_172":-5,"_173":247,"_100":248},"26aa0c0c-249c-11f0-b3b1-569c3dd06744","UserProfile.tsx","7805a693-3c65-45a4-aa60-417d25a66778",["D",1745891353055],2,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { ValGrid } from \"./ValGrid.tsx\";\n\ninterface UserProfileProps {\n username: string;\n}\n\ninterface Val {\n id: string;\n url: string;\n name: string;\n username: string;\n description: string | null;\n image_url: string | null;\n forked_branch_id: string | null;\n updated_at: string;\n matchCount: number;\n moiConfig?: any;\n hasMoiMd?: boolean;\n httpEndpoint?: string | null;\n buildMoiUrl?: string;\n}\n\ninterface TabInfo {\n name: string;\n vals: Val[];\n}\n\ninterface UserValsResponse {\n valResults: Val[];\n totalValResults: number;\n page: number;\n pageSize: number;\n totalPages: number;\n executionTimeMs: number;\n tabs?: TabInfo[];\n}\n\n// Expanded type for tabs\ntype TabType = 'posts' | 'code' | string;\n\nexport function UserProfile({ username }: UserProfileProps) {\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [profileData, setProfileData] = useState(null);\n const [allVals, setAllVals] = useState([]);\n const [customTabs, setCustomTabs] = useState([]);\n const [loadingMore, setLoadingMore] = useState(false);\n const [profileImageError, setProfileImageError] = useState(false);\n const [activeTab, setActiveTab] = useState('posts');\n \n // Extract valname from URL if present for direct val viewing\n const [directVal, setDirectVal] = useState(null);\n \n // Check for system dark mode preference\n const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;\n const [isDarkMode, setIsDarkMode] = useState(prefersDarkMode);\n \n // Listen for changes in color scheme preference\n useEffect(() => {\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n const handleChange = (e: MediaQueryListEvent) => {\n setIsDarkMode(e.matches);\n };\n \n mediaQuery.addEventListener('change', handleChange);\n return () => mediaQuery.removeEventListener('change', handleChange);\n }, []);\n\n // Check if the URL contains a direct val reference\n useEffect(() => {\n const { pathname } = window.location;\n const match = pathname.match(/^\\/@([^\\/]+)\\/([^\\/]+)/);\n if (match && match[2]) {\n setDirectVal(match[2]);\n }\n }, []);\n\n // Generate a deterministic background color based on username\n const getProfileColor = () => {\n // Simple hash function for generating a color\n let hash = 0;\n for (let i = 0; i < username.length; i++) {\n hash = username.charCodeAt(i) + ((hash << 5) - hash);\n }\n \n // Convert hash to RGB color, ensuring it's not too dark\n let r = ((hash & 0xFF0000) >> 16);\n let g = ((hash & 0x00FF00) >> 8);\n let b = (hash & 0x0000FF);\n \n // For dark mode, make colors more muted\n if (isDarkMode) {\n // Ensure colors are visible on dark background\n r = Math.min(((r + 120) % 256), 200);\n g = Math.min(((g + 120) % 256), 200);\n b = Math.min(((b + 120) % 256), 200);\n \n // Add transparency for a more muted look\n return `rgba(${r}, ${g}, ${b}, 0.65)`;\n } else {\n // For light mode, ensure colors are more muted\n r = Math.min(((r + 180) % 256), 200);\n g = Math.min(((g + 180) % 256), 200);\n b = Math.min(((b + 180) % 256), 200);\n \n // Add transparency for a more muted look\n return `rgba(${r}, ${g}, ${b}, 0.55)`;\n }\n };\n\n // Modified to fetch all vals for a user\n useEffect(() => {\n const fetchAllVals = async () => {\n setLoading(true);\n setError(null);\n setAllVals([]);\n \n try {\n // Fetch the first page to get total pages info\n const initialResponse = await fetch(`/api/profile/${username}?page=1`);\n \n if (!initialResponse.ok) {\n throw new Error(`Failed to fetch profile data: ${initialResponse.statusText}`);\n }\n \n const initialData = await initialResponse.json();\n setProfileData(initialData);\n \n // Add the first page results to our allVals array\n const results = [...initialData.valResults];\n \n // If there are more pages, fetch them all in parallel\n if (initialData.totalPages > 1) {\n setLoadingMore(true);\n \n const remainingPagePromises = [];\n for (let page = 2; page <= initialData.totalPages; page++) {\n remainingPagePromises.push(\n fetch(`/api/profile/${username}?page=${page}`)\n .then(res => res.json())\n .then(data => data.valResults)\n );\n }\n \n // Wait for all remaining page requests to complete\n const remainingPagesResults = await Promise.all(remainingPagePromises);\n \n // Flatten the results and add to our array\n for (const pageResults of remainingPagesResults) {\n results.push(...pageResults);\n }\n \n setLoadingMore(false);\n }\n \n setAllVals(results);\n \n // Process custom tabs if available\n if (initialData.tabs && initialData.tabs.length > 0) {\n setCustomTabs(initialData.tabs);\n }\n \n console.log(`[DEBUG] Fetched a total of ${results.length} vals for user ${username}`);\n \n } catch (err) {\n console.error(\"Error fetching profile:\", err);\n setError(err instanceof Error ? err.message : \"Unknown error occurred\");\n } finally {\n setLoading(false);\n setLoadingMore(false);\n }\n };\n \n fetchAllVals();\n }, [username]);\n\n // Filter vals based on active tab\n const getFilteredVals = () => {\n if (!allVals || allVals.length === 0) return [];\n \n if (activeTab === 'posts') {\n // For posts tab, show vals with moi.md that aren't excluded from posts\n return allVals.filter(val => \n val.hasMoiMd && \n (!val.moiConfig?.excludeFromPosts || val.moiConfig?.excludeFromPosts === false)\n );\n } else if (activeTab === 'code') {\n // For code tab, show all vals\n return allVals;\n } else {\n // For custom tabs, find the tab and return its vals\n const customTab = customTabs.find(tab => tab.name === activeTab);\n return customTab ? customTab.vals : [];\n }\n };\n\n // If viewing a direct val, find and display only that val\n const getDirectValContent = () => {\n if (!directVal || !allVals || allVals.length === 0) return null;\n \n const val = allVals.find(v => v.name === directVal);\n if (!val) return null;\n \n return (\n

\n \n

{val.name}

\n \n \n View on Val Town\n \n

\n \n {val.httpEndpoint ? (\n \n ) : (\n

No endpoint available for this val

\n \n View code on Val Town\n \n

\n )}\n

\n );\n };\n\n if (directVal) {\n return getDirectValContent() || (\n

Loading val...

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

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

Error

{error}

\n \n

\n );\n }\n\n if (!profileData || !allVals || allVals.length === 0) {\n return (\n

No vals found

We couldn't find any vals for user @{username}.

\n \n

\n );\n }\n \n // Get filtered vals based on active tab\n const filteredVals = getFilteredVals();\n \n // Display a message if no content is found for the active tab\n const showNoContentMessage = filteredVals.length === 0 && allVals.length > 0;\n\n // User profile image logic\n const profileImageUrl = !profileImageError \n ? `https://pic.val.run/${username}`\n : null;\n \n const profileColor = getProfileColor();\n\n // Choose the right background color based on dark/light mode\n const bgClass = isDarkMode ? 'bg-gray-900 text-white' : 'bg-white text-gray-900';\n const tabActiveBgClass = isDarkMode ? 'bg-gray-800' : 'bg-white';\n const tabInactiveBgClass = isDarkMode ? 'bg-gray-700' : 'bg-gray-100';\n const tabActiveTextClass = isDarkMode ? 'text-white' : 'text-gray-900';\n const tabInactiveTextClass = isDarkMode ? 'text-gray-300' : 'text-gray-500';\n const borderClass = isDarkMode ? 'border-gray-700' : 'border-gray-200';\n\n return (\n

{/* Increased max width for more columns */}\n {/* Profile Header - Mobile layout puts username and link next to profile image */}\n

\n {profileImageUrl ? (\n {`@${username}'s

setProfileImageError(true)}\n />\n ) : (\n \n {username.charAt(0).toUpperCase()}\n \n )}\n

\n \n

@{username}

\n \n

\n {profileData.totalValResults} {profileData.totalValResults === 1 ? 'val' : 'vals'}\n

\n \n \n View on Val Town\n \n

\n \n {/* Tabs */}\n

\n setActiveTab('posts')}\n >\n Posts\n \n \n {/* Custom Tabs - Rendered dynamically */}\n {customTabs.map((tab) => (\n setActiveTab(tab.name)}\n >\n {tab.name} ({tab.vals.length})\n \n ))}\n \n setActiveTab('code')}\n >\n Code ({allVals.length})\n \n

\n \n {/* No Content Message */}\n {showNoContentMessage && (\n

\n {activeTab === 'posts' \n ? \"No posts found. Add a moi.md file to your vals to display them here.\"\n : activeTab === 'code'\n ? \"No code found.\"\n : `No content found for the ${activeTab} tab.`\n }\n

\n setActiveTab('code')}\n className=\"mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-200\"\n >\n View All Code\n \n

\n )}\n \n {/* Image Grid */}\n {!showNoContentMessage && (\n

{/* Remove padding for edge-to-edge grid */}\n \n

\n )}\n \n {/* Loading indicator if fetching more pages */}\n {loadingMore && (\n

\n Loading more...\n

\n )}\n

\n );\n}",[],[205,211,242],{"_106":250,"_96":251,"_160":252,"_162":212,"_163":144,"_164":103,"_166":22,"_108":253,"_102":165,"_168":220,"_170":254,"_171":22,"_172":-5,"_173":255,"_100":256},"98e03d38-25e0-11f0-b0f7-569c3dd06744","ValGrid.tsx","5e954da1-af70-4bc2-ae4d-e6275a8993e7",["D",1746030701606],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { ValGridItem } from \"./ValGridItem.tsx\";\nimport SwipeViewer from \"./SwipeViewer.tsx\";\n\ninterface Val {\n id: string;\n url: string;\n name: string;\n username: string;\n description: string | null;\n image_url: string | null;\n forked_branch_id: string | null;\n updated_at: string;\n matchCount: number;\n moiConfig?: any;\n hasMoiMd?: boolean;\n httpEndpoint?: string | null;\n}\n\ninterface ValGridProps {\n vals: Val[];\n activeTab: string;\n isDarkMode: boolean;\n}\n\nexport function ValGrid({ vals, activeTab, isDarkMode }: ValGridProps) {\n // State for the swipe viewer\n const [swipeViewerOpen, setSwipeViewerOpen] = useState(false);\n const [selectedValIndex, setSelectedValIndex] = useState(-1);\n \n // Enable swipe viewer on all tabs except the code tab\n const enableSwipeViewer = activeTab !== 'code';\n \n // Handle grid item click to open the swipe viewer\n const handleGridItemClick = (index: number, val: Val) => {\n // Only open swipe viewer if not in code tab and val has proper URL\n if (enableSwipeViewer && (val.moiConfig?.url || val.httpEndpoint)) {\n setSelectedValIndex(index);\n setSwipeViewerOpen(true);\n }\n };\n \n // Close swipe viewer\n const handleCloseSwipeViewer = () => {\n setSwipeViewerOpen(false);\n setSelectedValIndex(-1);\n };\n\n if (!vals || vals.length === 0) {\n return (\n

\n No vals found.\n

\n );\n }\n\n // Filter out vals that don't have a proper URL for the swipe viewer (all tabs except code)\n const swipeableVals = enableSwipeViewer\n ? vals.filter(val => val.moiConfig?.url || val.httpEndpoint)\n : [];\n\n return (\n <>\n {/* Grid layout */}\n

\n {vals.map((val, index) => (\n

handleGridItemClick(index, val)}\n className={enableSwipeViewer && (val.moiConfig?.url || val.httpEndpoint) ? \"cursor-pointer\" : \"\"}\n >\n \n

\n ))}\n

\n \n {/* SwipeViewer component */}\n {swipeViewerOpen && selectedValIndex >= 0 && swipeableVals.length > 0 && (\n v.id === vals[selectedValIndex].id)}\n onClose={handleCloseSwipeViewer}\n isDarkMode={isDarkMode}\n />\n )}\n \n );\n}",[],[205,211,251],{"_106":258,"_96":259,"_160":260,"_162":212,"_163":144,"_164":165,"_166":22,"_108":261,"_102":32,"_168":220,"_170":262,"_171":22,"_172":-5,"_173":263,"_100":264},"96e71db8-2495-11f0-8325-569c3dd06744","ValGridItem.tsx","9342caea-b602-4f42-b4b7-86e65bb96ccf",["D",1745888534880],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Val {\n id: string;\n url: string;\n name: string;\n username: string;\n description: string | null;\n image_url: string | null;\n forked_branch_id: string | null;\n updated_at: string;\n matchCount: number;\n moiConfig?: any;\n hasMoiMd?: boolean;\n httpEndpoint?: string | null;\n}\n\ninterface ValGridItemProps {\n val: Val;\n activeTab: 'posts' | 'code';\n isDarkMode: boolean;\n}\n\nexport function ValGridItem({ val, activeTab, isDarkMode }: ValGridItemProps) {\n const [imgError, setImgError] = useState(false);\n \n // Create a deterministic background color based on val name\n const getBackgroundColor = () => {\n // Simple hash function for generating a color\n let hash = 0;\n const str = val.name + val.username;\n for (let i = 0; i < str.length; i++) {\n hash = str.charCodeAt(i) + ((hash << 5) - hash);\n }\n \n // Convert hash to RGB color\n let r = (hash & 0xFF0000) >> 16;\n let g = (hash & 0x00FF00) >> 8;\n let b = hash & 0x0000FF;\n \n // For dark mode, make colors more muted but visible\n if (isDarkMode) {\n // Ensure colors are visible on dark background but very muted\n r = Math.min(((r + 100) % 256), 180);\n g = Math.min(((g + 100) % 256), 180);\n b = Math.min(((b + 100) % 256), 180);\n \n // Add transparency for a more muted look\n return `rgba(${r}, ${g}, ${b}, 0.5)`;\n } else {\n // Ensure relatively pastel, more muted colors for light mode\n r = Math.min(((r + 155) % 256), 180);\n g = Math.min(((g + 155) % 256), 180);\n b = Math.min(((b + 155) % 256), 180);\n \n // Add transparency for a more muted look\n return `rgba(${r}, ${g}, ${b}, 0.4)`;\n }\n };\n\n // Format the date\n const formatDate = (dateString: string) => {\n const date = new Date(dateString);\n return date.toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'short',\n day: 'numeric'\n });\n };\n\n // Determine the image URL to use\n const getImageUrl = () => {\n // Priority order:\n // 1. Val's image_url from API if available\n // 2. moiConfig imageUrl if available\n // 3. Return null to use color placeholder\n if (val.image_url && !imgError) {\n return val.image_url;\n } else if (val.moiConfig?.imageUrl && !imgError) {\n return val.moiConfig.imageUrl;\n } else {\n return null;\n }\n };\n \n // Determine the URL to link to based on active tab\n const getLinkUrl = () => {\n if (activeTab === 'posts') {\n // For posts tab, priority order:\n // 1. Use explicit url from moiConfig if available\n if (val.moiConfig?.url) {\n return val.moiConfig.url;\n }\n // 2. Use httpEndpoint if available\n else if (val.httpEndpoint) {\n return val.httpEndpoint;\n }\n // 3. Fallback to code URL\n else {\n return val.url;\n }\n } else {\n // For code tab, always link to project code\n return val.url;\n }\n };\n \n // Format name for display in placeholder with line breaks\n const getFormattedName = () => {\n // Replace dashes, underscores, and camelCase with line breaks\n let formatted = val.name;\n \n // Replace dashes and underscores with line breaks\n formatted = formatted.replace(/[-_]/g, '\\n');\n \n // Add line breaks at camelCase transitions\n formatted = formatted.replace(/([a-z])([A-Z])/g, '$1\\n$2');\n \n // Limit to a reasonable number of lines\n const lines = formatted.split('\\n');\n if (lines.length > 3) {\n return lines.slice(0, 3).join('\\n') + '...';\n }\n \n return formatted;\n };\n \n // Determine if this val has a proper link for the Posts tab\n const hasProperPostsLink = () => {\n return val.moiConfig?.url || val.httpEndpoint;\n };\n \n const imageUrl = getImageUrl();\n const backgroundColor = getBackgroundColor();\n const linkUrl = getLinkUrl();\n const formattedName = getFormattedName();\n const hasPostsLink = hasProperPostsLink();\n \n // Get the description to display (either from val or from moiConfig)\n const displayDescription = val.description || val.moiConfig?.description || null;\n \n return (\n

\n {imageUrl ? (\n ${val.name}\n$ setImgError(true)}\n />\n ) : (\n

\n \n {formattedName}\n \n

\n )}\n \n {/* Overlay with val info on hover */}\n

{val.name}

\n {displayDescription && (\n

\n {displayDescription}\n

\n )}\n

\n Updated: {formatDate(val.updated_at)}\n

\n \n {/* Show appropriate link type */}\n

\n {activeTab === 'posts' && hasPostsLink ? (\n \n Live App\n \n ) : (\n View Code\n )}\n

\n );\n}",[],[205,211,259],[205,211],{"_106":267,"_96":268,"_160":269,"_162":206,"_163":144,"_164":165,"_166":120,"_108":270,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":271,"_100":288},"96e728d0-2495-11f0-8325-569c3dd06744","utils","53e13812-ac06-477e-aea8-5382846e3645",["D",1745888534880],[272,280],{"_106":273,"_96":274,"_160":275,"_162":269,"_163":144,"_164":165,"_166":120,"_108":276,"_102":32,"_168":220,"_170":277,"_171":22,"_172":-5,"_173":278,"_100":279},"96e72470-2495-11f0-8325-569c3dd06744","moiConfig.tsx","b50c7088-0754-4620-981c-635bd47eea1a",["D",1745888534880],"/** \n * Utility for parsing and handling moi.md configuration files\n */\n\ninterface MoiConfig {\n title?: string;\n description?: string;\n imageUrl?: string;\n author?: string;\n tags?: string[];\n [key: string]: any; // Allow for any additional properties\n}\n\n/**\n * Parse YAML frontmatter from a string\n */\nfunction parseFrontmatter(content: string): MoiConfig | null {\n try {\n // Check if content has frontmatter (starts with ---)\n if (!content.startsWith('---')) {\n return null;\n }\n\n // Find the end of the frontmatter block\n const endIndex = content.indexOf('---', 3);\n if (endIndex === -1) {\n return null;\n }\n\n // Extract the frontmatter section\n const frontmatterText = content.substring(3, endIndex).trim();\n \n // Parse YAML manually (simple version)\n const config: MoiConfig = {};\n const lines = frontmatterText.split('\\n');\n \n for (const line of lines) {\n // Skip empty lines\n if (!line.trim()) continue;\n \n // Find the first colon, which separates key and value\n const colonIndex = line.indexOf(':');\n if (colonIndex === -1) continue;\n \n const key = line.substring(0, colonIndex).trim();\n let value = line.substring(colonIndex + 1).trim();\n \n // If value is wrapped in quotes, remove them\n if ((value.startsWith('\"') && value.endsWith('\"')) || \n (value.startsWith(\"'\") && value.endsWith(\"'\"))) {\n value = value.substring(1, value.length - 1);\n }\n \n // Handle arrays (very simple implementation)\n if (value.startsWith('[') && value.endsWith(']')) {\n const arrayStr = value.substring(1, value.length - 1);\n const arrayItems = arrayStr.split(',').map(item => {\n item = item.trim();\n // Remove quotes if present\n if ((item.startsWith('\"') && item.endsWith('\"')) || \n (item.startsWith(\"'\") && item.endsWith(\"'\"))) {\n return item.substring(1, item.length - 1);\n }\n return item;\n });\n config[key] = arrayItems;\n } else {\n config[key] = value;\n }\n }\n \n return config;\n } catch (error) {\n console.error(\"Error parsing frontmatter:\", error);\n return null;\n }\n}\n\n/**\n * Fetch and parse moi.md for a project\n * Returns the parsed configuration or null if not found or invalid\n */\nexport async function fetchMoiConfig(baseUrl: string): Promise {\n try {\n // Try to fetch the moi.md file from the project root\n const response = await fetch(`${baseUrl}/moi.md`);\n \n // If file doesn't exist, return null\n if (!response.ok) {\n return null;\n }\n \n const content = await response.text();\n return parseFrontmatter(content);\n } catch (error) {\n console.error(\"Error fetching moi.md:\", error);\n return null;\n }\n}\n\n/**\n * Get image URL from moi config or use default\n */\nexport function getProfileImageUrl(\n username: string, \n moiConfig: MoiConfig | null,\n defaultImageUrl: string | null\n): string {\n // First priority: Use imageUrl from moi.md if available\n if (moiConfig?.imageUrl) {\n return moiConfig.imageUrl;\n }\n \n // Second priority: Use default image URL if provided\n if (defaultImageUrl) {\n return defaultImageUrl;\n }\n \n // Fallback: Use Val Town profile pic API\n return `https://pic.val.run/${username}`;\n}\n",[],[205,268,274],{"_106":281,"_96":282,"_160":283,"_162":269,"_163":144,"_164":165,"_166":120,"_108":284,"_102":32,"_168":220,"_170":285,"_171":22,"_172":-5,"_173":286,"_100":287},"96e72772-2495-11f0-8325-569c3dd06744","viewport.ts","306d36ed-3291-4e13-a56b-1a77248b07f9",["D",1745888534880],"// Viewport utility functions for mobile compatibility\n\n/**\n * Sets a CSS variable for viewport height to handle mobile browser address bars\n * This is used to ensure proper sizing on mobile devices where 100vh can be problematic\n */\nexport const setupViewportHeight = (): (() => void) => {\n const setVh = () => {\n if (typeof window !== \"undefined\") {\n const vh = window.innerHeight * 0.01;\n document.documentElement.style.setProperty(\"--vh\", `${vh}px`);\n }\n };\n\n // Initial setup\n setVh();\n \n // Setup resize/orientation handlers with debounce\n let timeoutId: number | undefined;\n \n const handleResize = () => {\n if (typeof window !== \"undefined\") {\n clearTimeout(timeoutId);\n timeoutId = setTimeout(setVh, 150) as unknown as number;\n }\n };\n \n // Add event listeners\n if (typeof window !== \"undefined\") {\n window.addEventListener(\"resize\", handleResize);\n window.addEventListener(\"orientationchange\", handleResize);\n }\n \n // Return cleanup function\n return () => {\n if (typeof window !== \"undefined\") {\n if (timeoutId) clearTimeout(timeoutId);\n window.removeEventListener(\"resize\", handleResize);\n window.removeEventListener(\"orientationchange\", handleResize);\n }\n };\n};\n\nexport default setupViewportHeight;",[],[205,268,282],[205,268],{"_106":290,"_96":291,"_160":292,"_162":206,"_163":144,"_164":165,"_166":120,"_108":293,"_102":32,"_168":198,"_170":294,"_171":22,"_172":-5,"_173":295,"_100":296},"96e729fc-2495-11f0-8325-569c3dd06744","index.html","86e58117-6066-4abd-acc2-a97c40013735",["D",1745888534880],"\n\n\n \n \n \n \n build.moi - Share your Val Town projects\n \n \n \n\n\n

\n \n \n\n",[],[205,291],{"_106":298,"_96":299,"_160":300,"_162":206,"_163":144,"_164":165,"_166":120,"_108":301,"_102":32,"_168":220,"_170":302,"_171":22,"_172":-5,"_173":303,"_100":304},"96e731ea-2495-11f0-8325-569c3dd06744","index.tsx","600ec504-650e-4c52-bd12-3be27116810f",["D",1745888534880],"/** @jsxImportSource 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// Wait for DOM to load\nif (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", initApp);\n} else {\n initApp();\n}\n\nfunction initApp() {\n const root = document.getElementById(\"root\");\n if (!root) {\n throw new Error(\"No root element found\");\n }\n\n createRoot(root).render();\n}",[],[205,299],[205],{"_106":307,"_96":308,"_160":309,"_162":-5,"_163":144,"_164":310,"_166":120,"_108":311,"_102":245,"_168":198,"_170":312,"_171":22,"_172":-5,"_173":313,"_100":314},"48817ef0-249c-11f0-9d4e-569c3dd06744","README.md","632bab28-5688-471f-85aa-0e1e89127f20",9,["D",1745891409828],"# build.moi - A New Creative Home\n\nbuild.moi is a modern showcase platform for Val Town users, displaying their vals and projects in a clean, elegant grid layout.\n\n## Features\n\n- View any Val Town user profile in a beautiful grid gallery\n- **Posts / Code tabs**: Filter between vals with moi.md (Posts) and all vals (Code)\n- **Custom Tabs**: Group vals into collections with custom tab categories\n- **Priority Tier System**: Control display order with numeric tier values\n- **Exclude from Posts**: Keep content in custom tabs but hide from the main Posts tab\n- **Direct Val Viewing**: View vals directly in full-screen mode with /@username/valname URLs\n- **Live app links**: Posts tab links directly to HTTP endpoints or custom URLs\n- 2:3 aspect ratio cards (portrait mode)\n- **Minimal spacing grid**: Edge-to-edge on mobile with tighter spacing\n- Responsive design (mobile and desktop friendly)\n- **Dark mode support**: Automatically follows system preferences\n- Circle-cropped profile pictures\n- **Muted colorful placeholders** with wrapped val names\n- Hover effects to display val details\n- **Responsive grid**: More columns on larger screens (3-5 columns)\n- Client-side routing (/@username paths)\n- Custom profile configuration via moi.md files\n- **Infinite content loading**: No pagination, content loads as needed\n\n## Usage\n\nVisit the main page and enter a Val Town username to view their profile. You can also directly navigate to:\n\n```\n/@username\n```\n\nWhere `username` is the Val Town username you want to view.\n\nTo view a specific val directly in full-screen mode:\n\n```\n/@username/valname\n```\n\nWhere `valname` is the name of the val you want to display.\n\n## Tabs Functionality\n\nbuild.moi has three types of tabs:\n\n1. **Posts**: Shows only vals with a `moi.md` file that aren't excluded from Posts, and links to their endpoints\n2. **Custom Tabs**: Created from tab collections specified in moi.md files\n3. **Code**: Shows all vals and links to their code on Val Town\n\nThe Posts tab is perfect for highlighting your working applications, custom tabs allow you to create focused collections, while the Code tab gives visitors access to all your Val Town code.\n\n## Priority System\n\nThe priority tier system allows you to control the display order of your vals:\n\n- Lower values appear first (e.g., tier 1 vals appear before tier 2)\n- Decimal values are supported (e.g., 1.5, 2.3)\n- Vals without a tier value appear after all vals with tier values\n- Vals with the same tier maintain their original order\n\n## Custom Profile Configuration with moi.md\n\nbuild.moi supports custom profile configuration using a `moi.md` file at the root of your Val Town project. This file uses YAML frontmatter to specify custom metadata for your profile or individual vals.\n\n### Example moi.md\n\n```markdown\n---\ntitle: \"My Awesome Val Town Project\"\ndescription: \"A detailed description of my project\"\nimageUrl: \"https://example.com/my-custom-image.jpg\"\nurl: \"https://my-live-app-endpoint.web.val.run\"\nauthor: \"username\"\ntags: [\"javascript\", \"react\", \"val-town\"]\ntier: 1.5\ntabs: [\"Projects\", \"Tutorials\"]\nexcludeFromPosts: false\n---\n\n# My Project\n\nAdditional markdown content here will be ignored by build.moi but can be used for documentation.\n```\n\n### Supported Configuration Options\n\n- `title`: Custom display title\n- `description`: Extended description\n- `imageUrl`: Custom image URL to override the default profile/val image (2:3 aspect ratio recommended, e.g., 800x1200px)\n- `url`: **Direct URL to your app's live endpoint** (used by the Posts tab)\n- `author`: Custom author display name\n- `tags`: Array of tags for categorization\n- `tier`: Priority level for display order (lower numbers appear first, can use decimal values like 1.5)\n- `tabs`: Array of tab names where this content should appear\n- `excludeFromPosts`: Boolean to exclude content from the main Posts tab while keeping it in custom tabs\n\n## Image Guidelines\n\n- **Profile Images**: Square images work best, as they will be displayed in a circle\n- **Val/Project Images**: 2:3 aspect ratio (portrait orientation) works best, like 800x1200 pixels\n- **Placeholders**: If no image is available, colorful placeholders with the val name (auto-wrapped at hyphens, underscores, and camelCase) will be shown\n\n## Technical Details\n\n- Built with React (client-side)\n- Hono (server-side)\n- Tailwind CSS (styling)\n- Uses Charlie's User Search API for val discovery\n- Val Town SDK for fetching moi.md configurations and HTTP endpoints\n- Uses Val Town's profile picture proxy for user avatars\n- Dark mode support based on system preferences\n\n## API & SDK Integration\n\nThe app uses a hybrid approach:\n\n1. **Charlie's User Search API** (`https://charliesusersearch.val.run/?user=${username}`) for discovering user vals\n2. **Val Town SDK** (`npm:@valtown/sdk`) for fetching and parsing moi.md files and determining HTTP endpoints\n3. Val Town Profile Pic Proxy (`https://pic.val.run/${username}`) for user avatars\n\n## URL Priority Order for Posts Tab\n\nWhen determining which URL to use for a val in the Posts tab, build.moi follows this priority:\n\n1. Custom `url` field from the val's moi.md file\n2. HTTP endpoint automatically detected via the Val Town SDK\n3. Fallback to the code URL if no app URL is found\n\n## Credits\n\nBuilt by dcm31 on Val Town.",[],[308],{"_106":316,"_96":317,"_160":318,"_162":-5,"_163":144,"_164":319,"_166":120,"_108":320,"_102":245,"_168":198,"_170":321,"_171":22,"_172":-5,"_173":322,"_100":323},"381fdfe8-249c-11f0-a126-569c3dd06744","moi.md","54df577d-092c-4c9a-83dd-f058db23c47c",8,["D",1745891382350],"---\ntitle: \"build.moi\"\ndescription: \"A new creative home for your Val Town projects\"\nimageUrl: \"https://chatgpt.com/backend-api/public_content/enc/eyJpZCI6Im1fNjgwZDBmMmI2OWQ0ODE5MWJjNjI4NDdkZDNhOTJiOTA6ZmlsZV8wMDAwMDAwMGFjYzQ2MjMwOGE3NTIxMTE1MmVlYTNlMyIsInRzIjoiNDg0OTEyIiwicCI6InB5aSIsInNpZyI6ImI5YjNkOWNlMmVmZDE2NTlhYzgwMjYzYzE2ZThjYjA1N2RjOTM5MDFkNjhkNTA1OTE5YjBhYzI4OTM2ZDgyMTMiLCJ2IjoiMCIsImdpem1vX2lkIjpudWxsfQ==\"\nurl: \"https://dcm31--199443aefb4c4d6a9062b10c53996a6b.web.val.run\"\nauthor: \"dcm31\"\ntags: [\"showcase\", \"gallery\", \"profile\", \"val-town\", \"typescript\"]\ntier: 1\ntabs: [\"Showcase\"]\n---\n\n# build.moi\n\nbuild.moi provides a modern showcase for Val Town profiles, making it easy to browse and discover vals and projects in a clean, minimalist layout.\n\n## Features\n\n- Clean grid layout for vals and projects\n- Posts tab shows vals with moi.md and links to live apps\n- Code tab shows all vals and links to their source code\n- Custom Tabs for organizing content into collections\n- Priority ranking system for organizing content display order\n- Content exclusion from the main Posts tab\n- Direct val viewing with full-screen display\n- 2:3 aspect ratio for all val cards\n- Profile view with user details\n- Hover effects to display val information\n- Responsive design for all devices\n- Custom profile configuration via moi.md \n- Infinite content loading without pagination\n\n## Usage\n\nVisit the main page and enter a Val Town username, or go directly to:\n\n```\n/@username\n```\n\nYou can also view a specific val directly using:\n\n```\n/@username/valname\n```\n\n## Custom Configuration\n\nbuild.moi supports custom profile and val configuration through moi.md files. Add a moi.md file to your Val Town project root with YAML frontmatter to customize your profile display in build.moi.\n\n### Supported Configuration Options\n\n- `title`: Custom display title\n- `description`: Extended description\n- `imageUrl`: Custom image URL to override the default (2:3 aspect ratio recommended)\n- `url`: Direct URL to your app's live endpoint (used in Posts tab)\n- `author`: Custom author display name\n- `tags`: Array of tags for categorization\n- `tier`: Priority level for display order (lower numbers appear first, can use decimal values like 1.5)\n- `tabs`: Array of tab names where this content should appear\n- `excludeFromPosts`: Boolean to exclude content from the main Posts tab (true/false)\n\n### Priority System\n\nThe `tier` field determines the display order of your content:\n\n- Lower tier values (e.g., 1) appear before higher values (e.g., 3)\n- Decimal values are supported (e.g., 0.5, 1.3, 2.7)\n- Items with the same tier value maintain their original order\n- Items without a tier value appear after all items with tier values\n\nExample:\n```yaml\ntier: 1.5\n```\n\n### Custom Tabs\n\nThe `tabs` field allows you to categorize your content into custom collections:\n\n- Content can belong to multiple tabs by listing multiple tab names\n- Tabs appear between the \"Posts\" and \"Code\" navigation items\n- Each tab contains only content explicitly assigned to it\n\nExample:\n```yaml\ntabs: [\"Projects\", \"Tutorials\", \"Experiments\"]\n```\n\n### Exclude From Posts\n\nThe `excludeFromPosts` field lets you exclude content from the main Posts tab while keeping it in custom tabs:\n\n- When set to `true`, the val won't appear in the main Posts tab\n- The val will still appear in any custom tabs specified in the `tabs` field\n- The val will always appear in the Code tab regardless of this setting\n\nExample:\n```yaml\nexcludeFromPosts: true\ntabs: [\"Tutorials\"]\n```\n\nThis configuration would show the val in the \"Tutorials\" tab and the Code tab, but not in the main Posts tab.",[],[317],"files",[158,175,187,193,203,209,215,224,232,240,249,257,266,272,280,289,297,306,315],"counts",{"_328":329,"_330":143,"_331":32,"_332":333,"_336":337},"pulls",4,"branches","forks","envVars",{"_334":32,"_335":32},"count","emptyCount","connections",{"_334":32,"_338":32},"unfilledCount","contents",[341],{"_106":176,"_96":177,"_160":178,"_162":161,"_163":144,"_164":179,"_166":120,"_108":342,"_102":181,"_168":182,"_170":183,"_171":22,"_172":-5,"_100":343},["D",1746029705642],[101,177],{"_106":159,"_96":101,"_160":161,"_162":-5,"_163":144,"_164":165,"_166":120,"_108":345,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_100":346},["D",1745888534880],[101],"upstreamProject","upstreamBranch",{"_106":147,"_108":350,"_351":352,"_96":44,"_145":107,"_102":353,"_146":354,"_148":355,"_356":357,"_110":-5,"_155":22,"_112":113,"_154":95,"_16":125,"_153":97},["D",1745630485630],"updatedAt",["D",1749490295274],20,"961078ea-f528-11ef-aa68-569c3dd06744",39,"lockfileKey","1749490325161-esm.town_v_dcm31_buildDotMoi@20-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":99,"_102":103,"_100":101,"_104":364,"_156":369,"_324":427,"_198":428,"_339":430,"_433":434,"_437":438,"_443":444,"_445":446,"_447":448,"_332":-5},{"_106":107,"_96":97,"_108":365,"_110":-5,"_111":22,"_112":113,"_114":-5,"_115":-5,"_14":116,"_117":118,"_119":120,"_121":-5,"_122":123,"_124":32,"_16":125,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_23":366,"_138":367,"_141":368,"_155":22},["D",1745630485630],{"_94":95,"_136":137},{"_94":95,"_140":137,"_14":116},{"_102":143,"_96":99,"_106":144,"_145":107,"_146":147,"_148":149,"_150":113,"_151":107,"_152":125,"_153":97,"_154":95},[370,376,382,421,424],{"_106":159,"_96":101,"_160":161,"_162":-5,"_163":144,"_164":165,"_166":120,"_108":167,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":371,"_100":375},[372],{"_106":176,"_96":177,"_160":178,"_162":161,"_163":144,"_164":179,"_166":120,"_108":180,"_102":181,"_168":182,"_170":183,"_171":22,"_172":-5,"_173":373,"_100":374},[],[101,177],[101],{"_106":188,"_96":189,"_160":190,"_162":-5,"_163":144,"_164":165,"_166":120,"_108":191,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":377,"_100":381},[378],{"_106":194,"_96":195,"_160":196,"_162":190,"_163":144,"_164":165,"_166":120,"_108":197,"_102":32,"_168":198,"_170":199,"_171":22,"_172":-5,"_173":379,"_100":380},[],[189,195],[189],{"_106":204,"_96":205,"_160":206,"_162":-5,"_163":144,"_164":165,"_166":120,"_108":207,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":383,"_100":420},[384,405,414,417],{"_106":210,"_96":211,"_160":212,"_162":206,"_163":144,"_164":165,"_166":120,"_108":213,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":385,"_100":404},[386,389,392,395,398,401],{"_106":216,"_96":217,"_160":218,"_162":212,"_163":144,"_164":165,"_166":120,"_108":219,"_102":32,"_168":220,"_170":221,"_171":22,"_172":-5,"_173":387,"_100":388},[],[205,211,217],{"_106":225,"_96":226,"_160":227,"_162":212,"_163":144,"_164":165,"_166":120,"_108":228,"_102":32,"_168":220,"_170":229,"_171":22,"_172":-5,"_173":390,"_100":391},[],[205,211,226],{"_106":233,"_96":234,"_160":235,"_162":212,"_163":144,"_164":165,"_166":120,"_108":236,"_102":32,"_168":220,"_170":237,"_171":22,"_172":-5,"_173":393,"_100":394},[],[205,211,234],{"_106":241,"_96":242,"_160":243,"_162":212,"_163":144,"_164":181,"_166":22,"_108":244,"_102":245,"_168":220,"_170":246,"_171":22,"_172":-5,"_173":396,"_100":397},[],[205,211,242],{"_106":250,"_96":251,"_160":252,"_162":212,"_163":144,"_164":103,"_166":22,"_108":253,"_102":165,"_168":220,"_170":254,"_171":22,"_172":-5,"_173":399,"_100":400},[],[205,211,251],{"_106":258,"_96":259,"_160":260,"_162":212,"_163":144,"_164":165,"_166":22,"_108":261,"_102":32,"_168":220,"_170":262,"_171":22,"_172":-5,"_173":402,"_100":403},[],[205,211,259],[205,211],{"_106":267,"_96":268,"_160":269,"_162":206,"_163":144,"_164":165,"_166":120,"_108":270,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":406,"_100":413},[407,410],{"_106":273,"_96":274,"_160":275,"_162":269,"_163":144,"_164":165,"_166":120,"_108":276,"_102":32,"_168":220,"_170":277,"_171":22,"_172":-5,"_173":408,"_100":409},[],[205,268,274],{"_106":281,"_96":282,"_160":283,"_162":269,"_163":144,"_164":165,"_166":120,"_108":284,"_102":32,"_168":220,"_170":285,"_171":22,"_172":-5,"_173":411,"_100":412},[],[205,268,282],[205,268],{"_106":290,"_96":291,"_160":292,"_162":206,"_163":144,"_164":165,"_166":120,"_108":293,"_102":32,"_168":198,"_170":294,"_171":22,"_172":-5,"_173":415,"_100":416},[],[205,291],{"_106":298,"_96":299,"_160":300,"_162":206,"_163":144,"_164":165,"_166":120,"_108":301,"_102":32,"_168":220,"_170":302,"_171":22,"_172":-5,"_173":418,"_100":419},[],[205,299],[205],{"_106":307,"_96":308,"_160":309,"_162":-5,"_163":144,"_164":310,"_166":120,"_108":311,"_102":245,"_168":198,"_170":312,"_171":22,"_172":-5,"_173":422,"_100":423},[],[308],{"_106":316,"_96":317,"_160":318,"_162":-5,"_163":144,"_164":319,"_166":120,"_108":320,"_102":245,"_168":198,"_170":321,"_171":22,"_172":-5,"_173":425,"_100":426},[],[317],[370,372,376,378,382,384,386,389,392,395,398,401,405,407,410,414,417,421,424],{"_106":159,"_96":101,"_160":161,"_162":-5,"_163":144,"_164":165,"_166":120,"_108":345,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_100":429},[101],[431],{"_106":176,"_96":177,"_160":178,"_162":161,"_163":144,"_164":179,"_166":120,"_108":342,"_102":181,"_168":182,"_170":183,"_171":22,"_172":-5,"_100":432},[101,177],"upstream",{"_106":147,"_108":435,"_351":436,"_96":44,"_145":107,"_102":353,"_146":354,"_148":355,"_356":357,"_110":-5,"_155":22,"_112":113,"_154":95,"_16":125,"_153":97},["D",1745630485630],["D",1749490295274],"pull",{"_106":439,"_114":440,"_441":442},"9b2d3bfc-249d-11f0-b259-569c3dd06744","x","state","pending","ahead",10,"behind",6,"templates",[],"actionData","errors"]

\n build.moi\n \n

How build.moi works:

Showcase your work

Simple integration

See Charlie's Profile

{val.name}

Loading val...

Error

No vals found

@{username}

{val.name}

\n build.moi\n $\"logo\"$ \n