sajidanwar.com / pdsls
forked from pds.ls/pdsls
atmosphere explorer
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

favicon easter egg

Juliet ac8bd1e6 fd8c32df

+42 -2
+42 -2
src/components/navbar.tsx
··· 32 32 33 33 export const NavBar = (props: { params: Params }) => { 34 34 const [handle, setHandle] = createSignal(props.params.repo); 35 + const [repoHovered, setRepoHovered] = createSignal(false); 36 + const [hasHoveredRepo, setHasHoveredRepo] = createSignal(false); 37 + const [faviconLoaded, setFaviconLoaded] = createSignal(false); 38 + const isCustomDomain = () => handle() && !handle()!.endsWith(".bsky.social"); 35 39 36 40 createEffect(() => { 37 41 if (pds() !== undefined && props.params.repo) { ··· 41 45 ?.split("at://")[1] ?? props.params.repo; 42 46 if (hdl !== handle()) setHandle(hdl); 43 47 } 48 + }); 49 + 50 + createEffect(() => { 51 + handle(); 52 + setHasHoveredRepo(false); 53 + setFaviconLoaded(false); 44 54 }); 45 55 46 56 const rkeyTimestamp = createMemo(() => { ··· 95 105 <div class="flex flex-col"> 96 106 <Show when={props.params.repo}> 97 107 {/* Repository Level */} 98 - <div class="group relative flex items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40"> 108 + <div 109 + class="group relative flex items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40" 110 + onMouseEnter={() => { 111 + setRepoHovered(true); 112 + setHasHoveredRepo(true); 113 + }} 114 + onMouseLeave={() => setRepoHovered(false)} 115 + > 99 116 <div class="flex min-w-0 basis-full items-center gap-2"> 100 117 <Tooltip text="Repository"> 101 - <span class="iconify lucide--book-user shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200"></span> 118 + <div class="relative flex h-5 w-4 shrink-0 items-center justify-center"> 119 + <span 120 + class="iconify lucide--book-user absolute text-neutral-500 transition-colors duration-200 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-200" 121 + classList={{ 122 + hidden: 123 + (repoHovered() && isCustomDomain() && faviconLoaded()) || 124 + (repoHovered() && handle() === "jcsalterego.bsky.social"), 125 + }} 126 + ></span> 127 + <Show when={repoHovered() && handle() === "jcsalterego.bsky.social"}> 128 + <div class="flex size-4 items-center justify-center rounded-full bg-blue-500"> 129 + <span class="iconify lucide--check size-2.5 text-white"></span> 130 + </div> 131 + </Show> 132 + <Show when={hasHoveredRepo() && isCustomDomain()}> 133 + <img 134 + src={`https://${handle()}/favicon.ico`} 135 + class="size-4 rounded-full" 136 + classList={{ hidden: !repoHovered() || !faviconLoaded() }} 137 + onLoad={() => setFaviconLoaded(true)} 138 + onError={() => setFaviconLoaded(false)} 139 + /> 140 + </Show> 141 + </div> 102 142 </Tooltip> 103 143 <Show 104 144 when={props.params.collection}