forked from
tangled.org/core
Monorepo for Tangled
blog: minor style updates
no bg around footer, move author avatars to the right on index etc.
Signed-off-by: oppiliappan <me@oppi.li>
+41
-19
+5
-7
blog/blog.go
+5
-7
blog/blog.go
···
76
76
77
77
rctx := &markup.RenderContext{
78
78
RendererType: markup.RendererTypeDefault,
79
-
Sanitizer: markup.NewSanitizer(),
80
79
}
81
80
var posts []Post
82
81
for _, entry := range entries {
···
100
99
}
101
100
102
101
htmlStr := rctx.RenderMarkdownWith(string(rest), markup.NewMarkdownWith("", textension.Dashes))
103
-
sanitized := rctx.SanitizeDefault(htmlStr)
104
102
105
103
posts = append(posts, Post{
106
104
Meta: meta,
107
-
Body: template.HTML(sanitized),
105
+
Body: template.HTML(htmlStr),
108
106
})
109
107
}
110
108
···
126
124
for _, p := range posts {
127
125
postURL := strings.TrimRight(baseURL, "/") + "/" + p.Meta.Slug
128
126
129
-
var authorName string
127
+
var authorName strings.Builder
130
128
for i, a := range p.Meta.Authors {
131
129
if i > 0 {
132
-
authorName += " & "
130
+
authorName.WriteString(" & ")
133
131
}
134
-
authorName += a.Name
132
+
authorName.WriteString(a.Name)
135
133
}
136
134
137
135
feed.Items = append(feed.Items, &feeds.Item{
138
136
Title: p.Meta.Title,
139
137
Link: &feeds.Link{Href: postURL},
140
138
Description: p.Meta.Subtitle,
141
-
Author: &feeds.Author{Name: authorName},
139
+
Author: &feeds.Author{Name: authorName.String()},
142
140
Created: p.ParsedDate(),
143
141
})
144
142
}
+35
-11
blog/templates/index.html
+35
-11
blog/templates/index.html
···
10
10
11
11
{{ define "topbarLayout" }}
12
12
<header class="max-w-screen-xl mx-auto w-full" style="z-index: 20;">
13
-
{{ template "layouts/fragments/topbar" . }}
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>
14
30
</header>
15
31
{{ end }}
16
32
···
26
42
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-14">
27
43
{{ range .Featured }}
28
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">
29
-
<div class="aspect-[16/9] overflow-hidden bg-gray-100 dark:bg-gray-700">
45
+
<div class="overflow-hidden bg-gray-100 dark:bg-gray-700 md:h-48">
30
46
<img src="{{ .Meta.Image }}" alt="{{ .Meta.Title }}" class="w-full h-full object-cover group-hover:scale-[1.02] transition-transform duration-300" />
31
47
</div>
32
48
<div class="flex flex-col flex-1 px-5 py-4">
···
34
50
{{ $date := .ParsedDate }}{{ $date | shortTimeFmt}}
35
51
{{ if .Meta.Draft }}<span class="text-red-500">[draft]</span>{{ end }}
36
52
</div>
37
-
<h2 class="font-bold text-gray-900 dark:text-white text-base leading-snug mb-1 group-hover:underline">{{ .Meta.Title }}</h2>
53
+
<h2 class="font-bold text-gray-900 dark:text-white text-base leading-snug mb-1">{{ .Meta.Title }}</h2>
38
54
<p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2 flex-1">{{ .Meta.Subtitle }}</p>
39
-
<div class="flex items-center mt-4">
55
+
<div class="flex items-center mt-4 gap-2">
40
56
{{ $hasAvatar := false }}{{ range .Meta.Authors }}{{ if tinyAvatar .Handle }}{{ $hasAvatar = true }}{{ end }}{{ end }}
41
57
{{ if $hasAvatar }}
42
58
<div class="inline-flex items-center -space-x-2">
43
59
{{ range .Meta.Authors }}
44
-
{{ $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 }}
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 }}
45
61
{{ end }}
46
62
</div>
47
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>
48
70
</div>
49
71
</div>
50
72
</a>
···
56
78
{{ range .Posts }}
57
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">
58
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">
59
87
<div class="inline-flex items-center -space-x-2 shrink-0">
60
88
{{ range .Meta.Authors }}
61
89
<img src="{{ tinyAvatar .Handle }}" class="size-5 rounded-full border border-gray-300 dark:border-gray-700" alt="{{ .Name }}" title="{{ .Name }}" />
62
90
{{ end }}
63
91
</div>
64
-
<span class="font-medium text-gray-900 dark:text-white group-hover:underline truncate">
65
-
{{ .Meta.Title }}
66
-
{{ if .Meta.Draft }}<span class="text-red-500 text-xs font-normal ml-1">[draft]</span>{{ end }}
67
-
</span>
68
-
</div>
69
-
<div class="text-sm text-gray-400 dark:text-gray-500 shrink-0">
92
+
<div class="text-sm text-gray-400 dark:text-gray-500 shrink-0">
70
93
{{ $date := .ParsedDate }}{{ $date | shortTimeFmt }}
94
+
</div>
71
95
</div>
72
96
</a>
73
97
{{ end }}