build.moi is a modern showcase platform for Val Town users, displaying their vals and projects in a clean, elegant grid layout.

• View any Val Town user profile in a beautiful grid gallery
• Posts / Code tabs: Filter between vals with moi.md (Posts) and all vals (Code)
• Custom Tabs: Group vals into collections with custom tab categories
• Priority Tier System: Control display order with numeric tier values
• Exclude from Posts: Keep content in custom tabs but hide from the main Posts tab
• Direct Val Viewing: View vals directly in full-screen mode with /@username/valname URLs
• Live app links: Posts tab links directly to HTTP endpoints or custom URLs
• 2:3 aspect ratio cards (portrait mode)
• Minimal spacing grid: Edge-to-edge on mobile with tighter spacing
• Responsive design (mobile and desktop friendly)
• Dark mode support: Automatically follows system preferences
• Circle-cropped profile pictures
• Muted colorful placeholders with wrapped val names
• Hover effects to display val details
• Responsive grid: More columns on larger screens (3-5 columns)
• Client-side routing (/@username paths)
• Custom profile configuration via moi.md files
• Infinite content loading: No pagination, content loads as needed

Visit the main page and enter a Val Town username to view their profile. You can also directly navigate to:

/@username

Where username is the Val Town username you want to view.

To view a specific val directly in full-screen mode:

/@username/valname

Where valname is the name of the val you want to display.

build.moi has three types of tabs:

1. Posts: Shows only vals with a moi.md file that aren't excluded from Posts, and links to their endpoints
2. Custom Tabs: Created from tab collections specified in moi.md files
3. Code: Shows all vals and links to their code on Val Town

The 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.

The priority tier system allows you to control the display order of your vals:

• Lower values appear first (e.g., tier 1 vals appear before tier 2)
• Decimal values are supported (e.g., 1.5, 2.3)
• Vals without a tier value appear after all vals with tier values
• Vals with the same tier maintain their original order

build.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.

---
title: "My Awesome Val Town Project"
description: "A detailed description of my project"
imageUrl: "https://example.com/my-custom-image.jpg"
url: "https://my-live-app-endpoint.web.val.run"
author: "username"
tags: ["javascript", "react", "val-town"]
tier: 1.5
tabs: ["Projects", "Tutorials"]
excludeFromPosts: false
---

# My Project

Additional markdown content here will be ignored by build.moi but can be used for documentation.

• title: Custom display title
• description: Extended description
• imageUrl: Custom image URL to override the default profile/val image (2:3 aspect ratio recommended, e.g., 800x1200px)
• url: Direct URL to your app's live endpoint (used by the Posts tab)
• author: Custom author display name
• tags: Array of tags for categorization
• tier: Priority level for display order (lower numbers appear first, can use decimal values like 1.5)
• tabs: Array of tab names where this content should appear
• excludeFromPosts: Boolean to exclude content from the main Posts tab while keeping it in custom tabs

• Profile Images: Square images work best, as they will be displayed in a circle
• Val/Project Images: 2:3 aspect ratio (portrait orientation) works best, like 800x1200 pixels
• Placeholders: If no image is available, colorful placeholders with the val name (auto-wrapped at hyphens, underscores, and camelCase) will be shown

• Built with React (client-side)
• Hono (server-side)
• Tailwind CSS (styling)
• Uses Charlie's User Search API for val discovery
• Val Town SDK for fetching moi.md configurations and HTTP endpoints
• Uses Val Town's profile picture proxy for user avatars
• Dark mode support based on system preferences

The app uses a hybrid approach:

1. Charlie's User Search API (https://charliesusersearch.val.run/?user=${username}) for discovering user vals
2. Val Town SDK (npm:@valtown/sdk) for fetching and parsing moi.md files and determining HTTP endpoints
3. Val Town Profile Pic Proxy (https://pic.val.run/${username}) for user avatars

When determining which URL to use for a val in the Posts tab, build.moi follows this priority:

1. Custom url field from the val's moi.md file
2. HTTP endpoint automatically detected via the Val Town SDK
3. Fallback to the code URL if no app URL is found

Built by dcm31 on Val Town.