blob: 3deaa63ac69f6802df75e0e34054227bb35187de (
plain)
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
68
69
|
---
export interface Props {
name: {
data: {
name: string;
domain: string;
url?: string;
candidate?: boolean;
};
};
size?: "large" | "small";
showAsLink?: boolean;
}
const { name, size = "large", showAsLink = true } = Astro.props;
const nameParts = name.data.name
.toLowerCase()
.split(" ")
.filter((part) => part.trim() !== "");
const domain = name.data.domain.replace(".", "");
const url = name.data.url || `https://${name.data.domain}`;
const domainExtension = name.data.domain.split(".")[1];
const domainBase = name.data.domain.split(".")[0];
const sizeClasses = {
large: "text-2xl",
small: "text-xl",
};
---
<span class={`${sizeClasses[size]} break-words`}>
{
nameParts.map((part, index) => (
<>
{index > 0 && " "}
{part === domain ? (
showAsLink ? ( // comments here to prevent whitespace introduced by formatter
<a
href={url}
class="text-blue-600 hover:text-blue-800 hover:underline domain-link"
rel={name.data.candidate ? "nofollow" : undefined}
data-extension={domainExtension}
>
<span class="domain-base">{domainBase}</span><!--
--><span class="domain-extension">{domainExtension}</span><!--
--></a>
) : (
<span
class="text-blue-600 domain-link group-hover:underline"
data-extension={domainExtension}
>
<span class="domain-base">{domainBase}</span><!--
--><span class="domain-extension">{domainExtension}</span><!--
--></span>
)
) : (
<span>{part}</span>
)}
</>
))
}
</span>
<style>
.domain-base::after {
content: ".";
opacity: 0.7;
}
</style>
|
