My website, rebuilt yet again
1---
2import { Icon } from 'astro-iconify';
3import { SITE_TITLE } from '../consts';
4import HeaderLink from './HeaderLink.astro';
5import { AT_HANDLE, getAvatarBlob } from '../lib/atproto';
6
7const avatarUrl = await getAvatarBlob(AT_HANDLE);
8
9const leafletBlog = `https://hayden.leaflet.pub`;
10const thisRelease = `https://tangled.org/hayden.moe/hweb/tree/${GIT_SHA}`;
11---
12
13<header class="flex lg:hidden items-center justify-center h-16 px-4 border-b border-base03 bg-muted-background">
14 <div class="max-w-full w-full flex-1 flex items-center justify-between gap-8">
15 <div class="flex items-center gap-4">
16 <img src={avatarUrl} alt="Avatar" class="size-12 rounded-md" />
17 <span class="font-bold text-xl text-primary">{SITE_TITLE}</span>
18 </div>
19
20 <div class="flex items-center gap-4">
21 <HeaderLink href="/"><Icon name="octicon:home-16" class="size-6" /></HeaderLink>
22 <HeaderLink href={leafletBlog}><Icon name="octicon:apps-16" class="size-6" /></HeaderLink>
23 <HeaderLink href="/about"><Icon name="octicon:info-16" class="size-6" /></HeaderLink>
24 </div>
25 </div>
26</header>
27
28<header class="hidden lg:flex justify-center items-center h-12 px-4 border-b border-base03 bg-muted-background">
29 <div class="max-w-hweb w-full flex-1 flex items-center gap-8">
30 <div class="flex items-center gap-4">
31 <a href="/">
32 <img src={avatarUrl} alt="Avatar" class="size-8 rounded-md" />
33 </a>
34 <span>
35 <a href="/" class="font-bold text-primary">{SITE_TITLE}</span>
36 <span>on</span>
37 <a href={thisRelease} class="font-bold text-secondary">
38 <Icon name="octicon:git-branch" class="size-4 text-secondary inline" />
39 {GIT_BRANCH} ({GIT_SHA.substring(0, 6)})
40 </a>
41 </span>
42 </div>
43
44 <div class="flex items-center gap-4">
45 <HeaderLink href="/">/home</HeaderLink>
46 <HeaderLink href={leafletBlog}>/var/mail</HeaderLink>
47 <HeaderLink href="/about">/about</HeaderLink>
48 </div>
49
50 <div class="flex items-center gap-4 ml-auto">
51 <a class="text-base0F" href="https://bsky.app/profile/hayden.moe">/opt/bsky</a>
52 <a class="text-base0E" href="https://github.com/hbjydev">/opt/github</a>
53 <a class="text-base0A" href="https://tangled.org/hayden.moe">/opt/tangled</a>
54 </div>
55 </div>
56</header>