build.moi - A New Creative Home

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

• Edit Your Profile: Add API key to enter editing mode
• Create/Edit moi.md: Click any val in edit mode to create or modify its moi.md file
• Visual Editor: Form-based editor with metadata fields:
  • Title
  • Description
  • Image URL
  • Tags
  • Priority Tier
  • Custom Tabs
  • Exclude from Posts option
  • Raw markdown content
• Advanced Mode: Toggle to show/hide advanced options
• Real-time Saving: Saves changes directly to your Val Town account
• Visual Feedback: Indicators show which vals have moi.md files and which need them

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.

1. Enter Edit Mode: Click "Edit Your Profile" in the header and enter your Val Town API key
2. Edit Content: Once API key is set, the interface will show your username and an "Edit Profile" button
3. Click Vals: In edit mode, clicking any val will open the moi.md editor
4. Create/Edit: Add or modify the moi.md content for your vals
5. Save Changes: Use the Save button to persist changes
6. Exit Edit Mode: Click "Exit Edit Mode" to return to view-only mode

Your Val Town API key is:

• Stored securely in your browser's localStorage
• Never sent to any third-party servers
• Only used to authenticate with Val Town's API directly
• Can be removed by clearing your browser data

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 used as documentation for your project.

• 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
4. Val Town API (via SDK) for creating/updating moi.md files when in edit mode

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.