add handling of app links on search #8

adds handling of links for some (the same that are in the templates.ts file) atproto apps

it lets you paste links like https://tangled.org/@pdsls.dev/pdsls and it will convert it to the at:// link

unfortunately doesn't work with links that don't provide all the necessary information to get the record (like the links for issues on tangled)

if it detects a link on the search it will try seeing if it has an app that matches it and then runs a function to handle it

it uses an enum for the apps thing because i thought it would look cool, but can easily be replaced with strings if that's preferred

really hope i didn't mess anything up

+127 -13

2 changed files

Diff round #1

expand all

unified split

src

components

search.tsx

utils

app-urls.ts

+15 -13

src/components/search.tsx

··· 2 2 import { A, useLocation, useNavigate } from "@solidjs/router"; 3 3 import { createResource, createSignal, For, onCleanup, onMount, Show } from "solid-js"; 4 4 import { isTouchDevice } from "../layout"; 5 + import { appHandleLink, appList } from "../utils/app-urls"; 5 6 import { createDebouncedValue } from "../utils/hooks/debounced"; 6 7 7 8 export const [showSearch, setShowSearch] = createSignal(false); ··· 68 69 setShowSearch(false); 69 70 if (input === "me" && localStorage.getItem("lastSignedIn") !== null) { 70 71 navigate(`/at://${localStorage.getItem("lastSignedIn")}`); 71 - } else if ( 72 - !input.startsWith("https://bsky.app/") && 73 - (input.startsWith("https://") || input.startsWith("http://")) 74 - ) { 75 - navigate(`/${input.replace("https://", "").replace("http://", "").replace("/", "")}`); 76 72 } else if (search()?.length) { 77 73 navigate(`/at://${search()![0].did}`); 74 + } else if (input.startsWith("https://") || input.startsWith("http://")) { 75 + const hostLength = input.indexOf("/", 8); 76 + const host = input.slice(0, hostLength).replace("https://", "").replace("http://", ""); 77 + 78 + if (!(host in appList)) { 79 + navigate(`/${input.replace("https://", "").replace("http://", "").replace("/", "")}`); 80 + } else { 81 + const app = appList[host as keyof typeof appList]; 82 + const path = input.slice(hostLength + 1).split("/"); 83 + 84 + const uri = appHandleLink[app](path); 85 + navigate(`/${uri}`); 86 + } 78 87 } else { 79 - const uri = input 80 - .replace("at://", "") 81 - .replace("https://bsky.app/profile/", "") 82 - .replace("/post/", "/app.bsky.feed.post/"); 83 - const uriParts = uri.split("/"); 84 - navigate( 85 - `/at://${uriParts[0]}${uriParts.length > 1 ? `/${uriParts.slice(1).join("/")}` : ""}`, 86 - ); 88 + navigate(`/at://${input.replace("at://", "")}`); 87 89 } 88 90 setShowSearch(false); 89 91 };

+112

src/utils/app-urls.ts

··· 1 + export type AppUrl = `${string}.${string}` | `localhost:${number}`; 2 + type AppUrlObject = Record<AppUrl, App>; 3 + type AppHandleLinkObject = Record<App, (url: string[]) => string>; 4 + 5 + export enum App { 6 + Bluesky = 0, 7 + Tangled = 1, 8 + Whitewind = 2, 9 + Frontpage = 3, 10 + Pinksea = 4, 11 + Linkat = 5, 12 + } 13 + 14 + export const appList: AppUrlObject = { 15 + "localhost:19006": App.Bluesky, 16 + "blacksky.community": App.Bluesky, 17 + "bsky.app": App.Bluesky, 18 + "catsky.social": App.Bluesky, 19 + "deer.aylac.top": App.Bluesky, 20 + "deer-social-ayla.pages.dev": App.Bluesky, 21 + "deer.social": App.Bluesky, 22 + "main.bsky.dev": App.Bluesky, 23 + "social.daniela.lol": App.Bluesky, 24 + "tangled.org": App.Tangled, 25 + "whtwnd.com": App.Whitewind, 26 + "frontpage.fyi": App.Frontpage, 27 + "pinksea.art": App.Pinksea, 28 + "linkat.blue": App.Linkat, 29 + }; 30 + 31 + export const appHandleLink: AppHandleLinkObject = { 32 + [App.Bluesky]: (path) => { 33 + const baseType = path[0]; 34 + const user = path[1]; 35 + 36 + if (baseType === "profile") { 37 + if (path[2]) { 38 + const type = path[2]; 39 + const rkey = path[3]; 40 + 41 + if (type === "post") { 42 + return `at://${user}/app.bsky.feed.post/${rkey}`; 43 + } else if (type === "list") { 44 + return `at://${user}/app.bsky.graph.list/${rkey}`; 45 + } else if (type === "feed") { 46 + return `at://${user}/app.bsky.feed.generator/${rkey}`; 47 + } else if (type === "follows") { 48 + return `at://${user}/app.bsky.graph.follow/${rkey}`; 49 + } 50 + } else { 51 + return `at://${user}`; 52 + } 53 + } else if (baseType === "starter-pack") { 54 + return `at://${user}/app.bsky.graph.starterpack/${path[2]}`; 55 + } 56 + return `at://${user}`; 57 + }, 58 + [App.Tangled]: (path) => { 59 + if (path[0] === "strings") { 60 + return `at://${path[1]}/sh.tangled.string/${path[2]}`; 61 + } 62 + 63 + let query: string | undefined; 64 + if (path[path.length - 1].includes("?")) { 65 + const split = path[path.length - 1].split("?"); 66 + query = split[1]; 67 + path[path.length - 1] = split[0]; 68 + } 69 + 70 + const user = path[0].replace("@", ""); 71 + 72 + if (path.length === 1) { 73 + if (query === "tab=repos") { 74 + return `at://${user}/sh.tangled.repo`; 75 + } else if (query === "tab=starred") { 76 + return `at://${user}/sh.tangled.feed.star`; 77 + } else if (query === "tab=strings") { 78 + return `at://${user}/sh.tangled.string`; 79 + } 80 + } else if (path.length === 2) { 81 + // no way to convert the repo name to an rkey afaik 82 + // same reason why there's nothing related to issues in here 83 + return `at://${user}/sh.tangled.repo`; 84 + } 85 + 86 + return `at://${user}`; 87 + }, 88 + [App.Whitewind]: (path) => { 89 + if (path.length === 2) { 90 + return `at://${path[0]}/com.whtwnd.blog.entry/${path[1]}`; 91 + } 92 + 93 + return `at://${path[0]}/com.whtwnd.blog.entry`; 94 + }, 95 + [App.Frontpage]: (path) => { 96 + if (path.length === 3) { 97 + return `at://${path[1]}/fyi.unravel.frontpage.post/${path[2]}`; 98 + } else if (path.length === 5) { 99 + return `at://${path[3]}/fyi.unravel.frontpage.comment/${path[4]}`; 100 + } 101 + 102 + return `at://${path[0]}`; 103 + }, 104 + [App.Pinksea]: (path) => { 105 + if (path.length === 2) { 106 + return `at://${path[0]}/com.shinolabs.pinksea.oekaki/${path[1]}`; 107 + } 108 + 109 + return `at://${path[0]}`; 110 + }, 111 + [App.Linkat]: (path) => `at://${path[0]}/blue.linkat.board/self`, 112 + };

History

2 rounds 4 comments

aylac.top submitted #1 5mo

interdiff

2 commits

expand

42c5117b

add handling of app links

e1589c46

fix at:// links support oops

expand 2 comments

handle.invalid 5mo

looks fine so i'll merge

just some tips:

enums dont need to be initialized if it's just gonna be a sequence of integers
instead of const app = appList[host as keyof typeof appList] you can directly use the AppUrl type: const app = appList[host as AppUrl]
idk about declaring types for the Record objects, i kinda like not abstracting away too much

the logic inside the appHandleLink looks fine, maybe some of the if chains could be made more generic but it's not a problem at this scale

thanks

aylac.top 5mo

yw!! on const app = appList[host as keyof typeof appList] i was going to just do as appurl but the autocomplete told offered me that and i thought ok whatever

pull request successfully merged

aylac.top submitted #0 5mo

diff

1 commit