Tree
A SaaS from me to list all your publicly-available link and stuff.
How to use?
Currently I don't have an easy way to make it, but you can
Manual
This thing is kind of tricky to use at the time, so to work with me without headache, please take a look below.
Features
Currently there aren't much features, to put it easy I only offer custom background image, custom profile image and custom open graph cover image (this can leave blank but will results in no cover image for social media embeds or cards) for now.
Slug
This is obvious and simplest thing in the system, it is named after what you'd like, think of a username you would like to use. For example I want techit as your slug.
JSON structure
This is very messed up because I'm very lazy to make a proper API and database than to make a simple JSON static file.
Oh! Note that "ico" in the links children needs to be an icon name that are from https://fonts.google.com/icons because it's easy to do so, but it does not have branded icon.
Also I don't think "id" is necessary so not putting one will not make it broken, it's just there because I designed it to do it.
{
"id": "techit",
"enabled": "true",
"name": "Techit Thawiang",
"desc": "A 10th grader who passionate in computer engineering.",
"background": "https://files.techit.win/files/jason-leung-OrKLsfQYkRA-unsplash.jpg",
"profile": "https://files.techit.win/files/assets/profile/techit/1758801557516.jpeg",
"links": [
{
"id": "web",
"ico": "web",
"enabled": true,
"separator": false,
"name": "เว็บไซต์ส่วนตัว",
"url": "https://techit.win/"
},
{
"id": "print",
"ico": "print",
"enabled": true,
"separator": false,
"name": "พิมพ์งานกับเตชิต",
"url": "https://techit.win/print"
},
{
"id": "sep1",
"enabled": true,
"separate": true
},
{
"id": "fb",
"enabled": true,
"separate": false,
"name": "Facebook: Techit Thawiang",
"url": "https://facebook.com/techitwinner/"
},
{
"id": "web",
"enabled": true,
"separate": false,
"name": "Instagram: techitwinner",
"url": "https://instagram.com/techitwinner/"
}
]
}
TypeScript Interface
interface TreeUserData {
id: string
enabled: boolean
name: string
desc: string
cover: string
background: string
profile: string
links: Record<string, TreeUserDataLink>
};
interface TreeUserDataLink {
id: string
ico: string
enabled: boolean
separate: boolean
name: string
desc: string
url: string
}