A vibe coded tangled fork which supports pijul.
1{{ define "title" }}the tangled blog{{ end }}
2
3{{ define "extrameta" }}
4<meta name="description" content="The Tangled blog." />
5<link rel="alternate" type="application/atom+xml" title="Atom" href="/feed.xml" />
6{{ end }}
7
8<!-- overrides the default slate bg -->
9{{ define "bodyClasses" }}!bg-white dark:!bg-gray-900{{ end }}
10
11{{ define "topbarLayout" }}
12<header class="max-w-screen-xl mx-auto w-full" style="z-index: 20;">
13 <nav class="mx-auto space-x-4 px-6 py-2">
14 <div class="flex justify-between p-0 items-center">
15 <div id="left-items">
16 <a href="/" hx-boost="true" class="text-2xl no-underline hover:no-underline flex items-center gap-2">
17 {{ template "fragments/logotypeSmall" }}
18 </a>
19 </div>
20
21 <div id="right-items" class="flex items-center gap-4">
22 <a href="https://tangled.org/login">login</a>
23 <span class="text-gray-500 dark:text-gray-400">or</span>
24 <a href="https://tangled.org/signup" class="btn-create py-0 hover:no-underline hover:text-white flex items-center gap-2">
25 join now {{ i "arrow-right" "size-4" }}
26 </a>
27 </div>
28 </div>
29 </nav>
30</header>
31{{ end }}
32
33{{ define "content" }}
34<div class="max-w-screen-lg mx-auto w-full px-4 py-10">
35
36 <header class="mb-10 text-center">
37 <h1 class="text-3xl font-bold dark:text-white mb-2">the tangled blog</h1>
38 <p class="text-gray-500 dark:text-gray-400">all the ropes and scaffolding</p>
39 </header>
40
41 {{ if .Featured }}
42 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-14">
43 {{ range .Featured }}
44 <a href="/{{ .Meta.Slug }}" class="no-underline hover:no-underline group flex flex-col bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 overflow-hidden hover:bg-gray-100/25 hover:dark:bg-gray-700/25 transition-colors">
45 <div class="overflow-hidden bg-gray-100 dark:bg-gray-700 md:h-48">
46 <img src="{{ .Meta.Image }}" alt="{{ .Meta.Title }}" class="w-full h-full object-cover group-hover:scale-[1.02] transition-transform duration-300" />
47 </div>
48 <div class="flex flex-col flex-1 px-5 py-4">
49 <div class="text-xs text-gray-400 dark:text-gray-500 mb-2">
50 {{ $date := .ParsedDate }}{{ $date | shortTimeFmt}}
51 {{ if .Meta.Draft }}<span class="text-red-500">[draft]</span>{{ end }}
52 </div>
53 <h2 class="font-bold text-gray-900 dark:text-white text-base leading-snug mb-1">{{ .Meta.Title }}</h2>
54 <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2 flex-1">{{ .Meta.Subtitle }}</p>
55 <div class="flex items-center mt-4 gap-2">
56 {{ $hasAvatar := false }}{{ range .Meta.Authors }}{{ if tinyAvatar .Handle }}{{ $hasAvatar = true }}{{ end }}{{ end }}
57 {{ if $hasAvatar }}
58 <div class="inline-flex items-center -space-x-2">
59 {{ range .Meta.Authors }}
60 {{ $av := tinyAvatar .Handle }}{{ if $av }}<img src="{{ $av }}" class="size-6 rounded-full border border-gray-300 dark:border-gray-700" alt="{{ .Name }}" title="{{ .Name }}" />{{ end }}
61 {{ end }}
62 </div>
63 {{ end }}
64 <div class="text-xs">
65 {{ $last := sub (len .Meta.Authors) 1 }}
66 {{ range $i, $n := .Meta.Authors }}
67 {{ $n.Handle }}{{ if ne $i $last }}, {{ end }}
68 {{ end }}
69 </div>
70 </div>
71 </div>
72 </a>
73 {{ end }}
74 </div>
75 {{ end }}
76
77 <div class="grid grid-cols-1 rounded border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700">
78 {{ range .Posts }}
79 <a href="/{{ .Meta.Slug }}" class="no-underline hover:no-underline group flex items-center justify-between gap-4 px-6 py-3 hover:bg-gray-100/25 hover:dark:bg-gray-700/25 transition-colors">
80 <div class="flex items-center gap-3 min-w-0">
81 <span class="font-medium text-gray-900 dark:text-white truncate">
82 {{ .Meta.Title }}
83 {{ if .Meta.Draft }}<span class="text-red-500 text-xs font-normal ml-1">[draft]</span>{{ end }}
84 </span>
85 </div>
86 <div class="flex items-center gap-2">
87 <div class="inline-flex items-center -space-x-2 shrink-0">
88 {{ range .Meta.Authors }}
89 <img src="{{ tinyAvatar .Handle }}" class="size-5 rounded-full border border-gray-300 dark:border-gray-700" alt="{{ .Name }}" title="{{ .Name }}" />
90 {{ end }}
91 </div>
92 <div class="text-sm text-gray-400 dark:text-gray-500 shrink-0">
93 {{ $date := .ParsedDate }}{{ $date | shortTimeFmt }}
94 </div>
95 </div>
96 </a>
97 {{ end }}
98 </div>
99
100</div>
101{{ end }}
102
103{{ define "footerLayout" }}{{ template "blog/fragments/footer" . }}{{ end }}