Demo

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.

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.

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 Vercel (or similar) and Upstash and get this code working fairly quickly.

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.

Clone the repo and install:

pnpm install

Once you make an Upstash database, copy the REST URL and token and put them in your environment:

UPSTASH_REDIS_REST_URL = "https://urlfromupsta.sh"
UPSTASH_REDIS_REST_TOKEN = "T0K3N_FR0M_UPST@SH"

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
}

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