blob: 976baa4f438cfd63ec619b724b42f325172f45db (
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
|
---
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(" ");
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 ? (
<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" 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>
|
