1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
---
import { Icon } from "astro-icon/components";
/**
Uses https://www.astroicon.dev/getting-started/
Find icons via guide: https://www.astroicon.dev/guides/customization/#open-source-icon-sets
Only installed pack is: @iconify-json/mdi
*/
const socialLinks: {
friendlyName: string;
isWebmention?: boolean;
link: string;
name: string;
}[] = [
{
friendlyName: "Mastodon",
link: "https://mastodon.social/@dawid@social.craftknight.com",
name: "mdi:mastodon",
},
{
friendlyName: "My git repos",
link: "https://git.craftknight.com/",
name: "mdi:git",
},
{
friendlyName: "RSS",
link: "https://www.rycerz.xyz/rss.xml",
name: "mdi:rss",
},
// {
// friendlyName: "GitHub",
// link: "https://github.com/knightdave",
// name: "mdi:github",
// },
// {
// friendlyName: "GitLab",
// link: "https://gitlab.com/knightdave",
// name: "mdi:gitlab",
// },
// {
// friendlyName: "LinkedIn",
// link: "https://www.linkedin.com/in/rycerzxyz",
// name: "mdi:linkedin",
// },
];
---
<div class="flex flex-wrap items-end gap-x-2">
<p>Find me on</p>
<ul class="flex flex-1 items-center gap-x-2 sm:flex-initial">
{
socialLinks.map(({ friendlyName, isWebmention, link, name }) => (
<li class="flex">
<a
class="hover:text-link inline-block"
href={link}
rel={`noreferrer ${isWebmention ? "me authn" : ""}`}
target="_blank"
>
<Icon aria-hidden="true" class="h-8 w-8" focusable="false" name={name} />
<span class="sr-only">{friendlyName}</span>
</a>
</li>
))
}
</ul>
</div>
|
