mirror your GitHub repos to tangled.org automatically
1<script setup lang="ts">
2withDefaults(defineProps<{
3 wordmark?: boolean
4 size?: number
5}>(), {
6 wordmark: true,
7 size: 22,
8})
9</script>
10
11<template>
12 <span class="mark" :class="{ 'mark--icon-only': !wordmark }">
13 <svg
14 class="mark__glyph"
15 :width="size"
16 :height="size"
17 viewBox="0 0 32 32"
18 fill="none"
19 role="img"
20 aria-label="synchub"
21 >
22 <!-- source node -->
23 <circle cx="7" cy="7" r="3.5" stroke="currentColor" stroke-width="2" />
24 <!-- mirror node -->
25 <circle cx="25" cy="25" r="3.5" stroke="currentColor" stroke-width="2" />
26 <!-- directional tie: a git-ref path from source to mirror -->
27 <path
28 d="M7 11.5 V20 a4 4 0 0 0 4 4 H20.5"
29 stroke="currentColor"
30 stroke-width="2"
31 stroke-linecap="round"
32 />
33 <!-- arrowhead into the mirror node -->
34 <path
35 d="M17 20.5 L21 24.5 L17 28.5"
36 stroke="var(--mark-accent, currentColor)"
37 stroke-width="2"
38 stroke-linecap="round"
39 stroke-linejoin="round"
40 />
41 </svg>
42 <span v-if="wordmark" class="mark__word">synchub<span class="mark__tld">.to</span></span>
43 </span>
44</template>
45
46<style scoped>
47.mark {
48 display: inline-flex;
49 align-items: center;
50 gap: 0.5ch;
51 color: var(--color-ink);
52}
53
54.mark__glyph {
55 flex: none;
56 --mark-accent: var(--color-accent);
57}
58
59.mark__word {
60 font-family: var(--font-display);
61 font-weight: 700;
62 font-size: 1.05rem;
63 letter-spacing: -0.03em;
64 white-space: nowrap;
65}
66
67.mark__tld {
68 color: var(--color-accent);
69}
70
71.mark--icon-only {
72 gap: 0;
73}
74</style>