becca.monster
forked from
tangled.org/core
Monorepo for Tangled
4.7 kB
83 lines
1{{ define "timeline/fragments/announcements" }}
2 <div class="border border-gray-200 dark:border-gray-700 rounded-sm divide-y divide-gray-200 dark:divide-gray-700">
3 <h3 class="text-base dark:text-white hidden md:flex items-center gap-2 px-4 py-2 bg-white/50 dark:bg-gray-800/50">
4 {{ i "megaphone" "size-4 flex-shrink-0" }}
5 Announcements
6 </h3>
7 <div class="flex flex-col p-0 bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
8 {{ template "microvmAnnouncement" . }}
9 {{ if .RecentBlogPosts }}
10 {{ template "recentBlogPosts" . }}
11 {{ end }}
12 </div>
13 </div>
14{{ end }}
15
16{{ define "recentBlogPosts" }}
17 <div class="flex flex-col hidden md:block">
18 {{ range .RecentBlogPosts }}
19 <a href="https://blog.tangled.org/{{ .Slug }}" class="text-sm no-underline hover:no-underline hover:bg-gray-100/50 dark:hover:bg-gray-700/50 overflow-hidden p-4 flex flex-col gap-0.5">
20 <span class="truncate text-sm text-gray-500 dark:text-gray-400">{{ .Date.Format "January 2, 2006" }}</span>
21 <span class="truncate dark:text-white">{{ .Title }}</span>
22 {{ if .Subtitle }}<span class="line-clamp-1 text-sm text-gray-500 dark:text-gray-400">{{ .Subtitle }}</span>{{ end }}
23 </a>
24 {{ end }}
25 </div>
26{{ end }}
27
28{{ define "microvmAnnouncement" }}
29<div class="relative overflow-hidden bg-gradient-to-b from-orange-50 to-orange-100 dark:from-orange-800/30 dark:to-orange-900/45 p-4">
30 <div class="relative z-10 flex flex-col gap-4">
31 <div class="flex flex-col gap-2">
32 <p class="font-semibold text-orange-600 dark:text-orange-100 mb-1">MicroVM-powered CI</p>
33 <p class="text-orange-600/75 dark:text-orange-100/75 text-sm">
34 Spindles now support a new engine: <span class="font-mono">microvm</span>!
35 <br/>
36 You can now build containers, run services like Postgres, or use non-NixOS images on CI.
37 </p>
38 </div>
39 <div class="mt-3">
40 <a class="no-underline inline-flex items-center gap-1 text-sm font-medium text-orange-600 dark:text-orange-100 hover:text-orange-800 dark:hover:text-orange-100 hover:underline" href="https://blog.tangled.org/spindle-microvm/">
41 Read more {{ i "arrow-right" "size-4" }}
42 </a>
43 </div>
44 </div>
45 <div class="pointer-events-none absolute -bottom-8 -right-16 size-48
46 [--ci-gradient-from:theme(colors.orange.100)] dark:[--ci-gradient-from:color-mix(in_oklab,theme(colors.orange.600)_5%,transparent)]
47 [--ci-gradient-to:theme(colors.orange.200)] dark:[--ci-gradient-to:color-mix(in_oklab,theme(colors.orange.800)_15%,transparent)]"
48 style="background: linear-gradient(to bottom, var(--ci-gradient-from), var(--ci-gradient-to));
49 -webkit-mask: url('/static/icons/cpu.svg') center/contain no-repeat;
50 mask: url('/static/icons/cpu.svg') center/contain no-repeat;"></div>
51</div>
52{{ end }}
53
54{{ define "vouchAnnouncement" }}
55<div class="relative overflow-hidden bg-gradient-to-b from-indigo-50 to-indigo-100 dark:from-indigo-900 dark:to-indigo-950 rounded-sm p-4">
56 <div class="relative z-10">
57 <p class="font-semibold text-indigo-800 dark:text-indigo-100 mb-1">Build a web of trust</p>
58 <p class="text-indigo-700 dark:text-indigo-300">
59 Vouch for trustworthy users that make open-source a better place. Visit a user's
60 profile to vouch for them.
61 </p>
62
63 <div class="mt-3 flex items-center justify-between">
64 <a class="mt-3 no-underline inline-flex items-center gap-1 text-sm font-medium text-indigo-700 dark:text-indigo-200 hover:text-indigo-900 dark:hover:text-indigo-100 hover:underline" href="https://blog.tangled.org/vouching">
65 Read more
66 </a>
67 {{ if and .LoggedInUser .VouchSuggestions }}
68 <a class="md:hidden mt-3 no-underline inline-flex items-center gap-1 text-sm font-medium text-indigo-700 dark:text-indigo-200 hover:text-indigo-900 dark:hover:text-indigo-100 hover:underline" href="/{{ .LoggedInUser.Did }}?tab=vouches">
69 View suggestions {{ i "arrow-right" "size-3.5" }}
70 </a>
71 {{ end }}
72 </div>
73
74 </div>
75
76 <div class="pointer-events-none absolute -bottom-8 -right-16 size-48
77 [--shield-gradient-from:theme(colors.indigo.100)] dark:[--shield-gradient-from:theme(colors.indigo.800)]
78 [--shield-gradient-to:theme(colors.indigo.200)] dark:[--shield-gradient-to:theme(colors.indigo.900)]"
79 style="background: linear-gradient(to bottom, var(--shield-gradient-from), var(--shield-gradient-to));
80 -webkit-mask: url('/static/icons/shield-plus.svg') center/contain no-repeat;
81 mask: url('/static/icons/shield-plus.svg') center/contain no-repeat;"></div>
82</div>
83{{ end }}