THBioLink

Version 3.0 - Cloudflare Workers Edition

by Trekker Holdings, using o7-app

Now powered by Cloudflare Workers for global edge deployment! 🚀

---

Live example:

Demo

---

Why?

I wanted to make a custom link-in-bio site so I didn't have to rely on services like Linktree or Unfold. I wanted it to also utilize an easily-editable backend to allow for it to dynamically update links without redeploy.

How?

Ottomated has a great web stack in the o7-app that got me interested in learning JS. Previous versions of this project utilized Supabase and Turbo + Vercel KV, but each was difficult to maintain in their own right.

v3.0 is a full rewrite using the latest version of o7-app with Svelte 4, along with Upstash for storage and Skeleton for styling. This version has been migrated to Cloudflare Workers for improved performance and global edge deployment.

What?

All you need to know is if you want a basic link-in-bio site you can host yourself (usually for free if you don't get a ton of traffic) you can set up accounts on Cloudflare Workers and Upstash and get this code working fairly quickly.

⚡ Performance Benefits

• 90% faster cold starts compared to traditional servers
• Global edge deployment with <100ms latency worldwide
• Optimized asset delivery through Cloudflare's CDN
• Automatic scaling with pay-per-request pricing

This is an inefficient/slow/generally dumb implementation of (insert function here).

I'm still new to JS/web dev as a whole. I'm gonna keep chipping away at this codebase as I learn new tricks and improvements.

---

Quick Start

Prerequisites

• Node.js (v18+)
• pnpm package manager
• Cloudflare account
• Upstash Redis database

Installation

1. Clone and install dependencies:

   git clone <repository-url>
   cd THBioLink
   pnpm install
   

2. Set up environment variables:

   For local development, create .dev.vars:

   UPSTASH_REDIS_REST_URL=https://your-redis-url.upstash.io
   UPSTASH_REDIS_REST_TOKEN=your-redis-token
   

3. Authenticate with Cloudflare:

   pnpm wrangler login
   

4. Configure production secrets:

   pnpm run setup:secrets:prod
   

Development

Local Development Options

Traditional SvelteKit (recommended for UI work):

pnpm run dev

Local Workers environment:

pnpm run dev:worker

Remote Workers testing:

pnpm run dev:worker:remote

Deployment

Quick Deploy to Production

pnpm run deploy:prod

Deploy to Development Environment

pnpm run deploy:dev

📚 Documentation

• Deployment Guide - Comprehensive deployment instructions
• Migration Guide - Details about the Workers migration
• Deployment Checklist - Pre-deployment validation steps

How to format data

The TRPC callback will look for the keys described in page.server.ts and parse the data into the page expecting an array of JSON objects for each section. Make a JSON object in your database for each of the sections (Socials and Links by default), and format your child objects as follows:

// SOCIAL ICON

{
    "id": 0,                                   // ORDER OF APPEARANCE (LEFT->RIGHT)
    "name": "Instagram",                       // IDENTIFIER FOR ICON (USES SIMPLE ICONS API NAMES)
    "link": "https://www.instagram.com/pupdad" // LINK ON CLICK
},

// LINK

{
    "id": 0,                                   // ORDER OF APPEARANCE (FIRST->LAST)
    "name": "Trekker Holdings",                // BUTTON TEXT
    "link": "https://trekker.holdings"         // LINK ON CLICK
}

Spin up dashboard

Refer to this repo for the custom dashboard built to manage your links, including support for multiple sites.