ValGram is an Instagram-style profile viewer for Val Town users, showing their vals in a grid layout similar to Instagram.

• View any Val Town user profile in an Instagram-style grid
• Posts / Code tabs: Filter between vals with moi.md (Posts) and all vals (Code)
• 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

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.

ValGram has two main tabs:

1. Posts: Shows only vals with a moi.md file and links to their live HTTP endpoints or custom URLs
2. Code: Shows all vals and links to their code on Val Town

The Posts tab is perfect for highlighting your working applications, while the Code tab gives visitors access to all your Val Town code.

ValGram 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"]
---

# My Project

Additional markdown content here will be ignored by ValGram 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

• 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, ValGram 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.