by Trekker Holdings, using o7-app
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.