jordanreger.com
An HTML-only Bluesky frontend
remove css, move to html tables and such
+23
-19
public/actor.html
+23
-19
public/actor.html
···
1
1
{{define "actor"}}
2
2
<!DOCTYPE html>
3
-
<html lang="en">
3
+
<html>
4
4
{{template "actor_head" .}}
5
5
6
6
<body>
7
7
{{template "actor_header" .}}
8
8
9
9
<!-- user profile -->
10
-
<article style="max-width:800px;">
11
-
<div style="position:relative;margin-bottom:50px;">
12
-
<img src="{{.Banner}}" alt="{{.DisplayName}}'s banner" style="position:relative;aspect-ratio:3/1;max-width:100%;">
13
-
<img src="{{.Avatar}}" alt="{{.DisplayName}}'s avatar"
14
-
style="width:100px;height:100px;border-radius:50%;position:absolute;left:10px;bottom:-45px;">
15
-
</div>
16
-
<h1 style="margin-bottom:0;">{{.DisplayName}}</h1>
17
-
<p style="margin:auto 0;" class="handle">@{{.Handle}}</p>
18
-
<p style="margin:10px 0;" class="counts"><b>{{.FollowersCount}}</b> followers <b>{{.FollowsCount}}</b> following
19
-
<b>{{.PostsCount}}</b> posts
20
-
</p>
21
-
<p style="white-space:pre-line">{{.DescriptionHTML}}</p>
22
-
</article>
10
+
<table>
11
+
<tr>
12
+
<td>
13
+
<img src="{{.Avatar}}" alt="{{.DisplayName}}'s avatar" width="65" height="65">
14
+
</td>
15
+
<td>
16
+
<h1 style="margin:0;">{{.DisplayName}}</h1>
17
+
<span>@{{.Handle}}</span>
18
+
</td>
19
+
</tr>
20
+
</table>
21
+
22
+
<p>
23
+
<b>{{.FollowersCount}}</b> followers
24
+
<b>{{.FollowsCount}}</b> following
25
+
<b>{{.PostsCount}}</b> posts
26
+
</p>
27
+
<p>{{.DescriptionHTML}}</p>
23
28
24
29
<hr>
25
30
26
31
<div id="feed">
27
32
{{range .Feed}}
28
33
{{if ne .Post.Author.DID $.DID}}
29
-
<p style="margin:0;margin-left:60px;margin-bottom:5px;" class="repost"><b>Reposted by <a
30
-
href="/profile/{{$.Handle}}">{{$.DisplayName}}</a></b></p>
31
-
{{end}}
32
-
{{template "feed_post" .}}
33
-
{{end}}
34
+
<span><b>Reposted by <a href="/profile/{{$.Handle}}">{{$.DisplayName}}</a></b></p>
35
+
{{end}}
36
+
{{template "feed_post" .}}
37
+
{{end}}
34
38
</div>
35
39
</body>
36
40
+12
-11
public/external_embed.html
+12
-11
public/external_embed.html
···
1
1
{{define "external_embed"}}
2
2
{{if .Post.Embed}}
3
3
{{if eq .Post.Embed.Type "app.bsky.embed.external#view"}}
4
-
<a href="{{.Post.Embed.External.URI}}" style="color:inherit;text-decoration:none;">
5
-
<article style="max-width:600px;padding:10px;border:1px solid;text-overflow:ellipsis;">
6
-
{{if .Post.Embed.External.Thumb}}<img src="{{.Post.Embed.External.Thumb}}" alt="External Embed image">{{end}}
7
-
{{if .Post.Embed.External.Title}}
8
-
<h3 style="text-overflow: ellipsis;">{{.Post.Embed.External.Title}}</h3>
9
-
<p style="word-wrap:break-word;text-overflow:ellipsis;">{{.Post.Embed.External.Description}}</p>
10
-
{{else}}
11
-
<h3>{{.Post.Embed.External.URI}}</h3>
12
-
{{end}}
13
-
</article>
14
-
</a>
4
+
<article>
5
+
{{if .Post.Embed.External.Title}}
6
+
<h3>
7
+
<a href="{{.Post.Embed.External.URI}}">{{.Post.Embed.External.Title}}</a>
8
+
</h3>
9
+
<p style="word-wrap:break-word;text-overflow:ellipsis;">{{.Post.Embed.External.Description}}</p>
10
+
{{else}}
11
+
<h3>
12
+
<a href="{{.Post.Embed.External.URI}}">{{.Post.Embed.External.URI}}</a>
13
+
</h3>
14
+
{{end}}
15
+
</article>
15
16
{{end}}
16
17
{{end}}
17
18
{{end}}
+3
-4
public/head.html
+3
-4
public/head.html
···
3
3
<head>
4
4
<meta charset="utf-8">
5
5
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, shrink-to-fit=no" />
6
-
<meta name='color-scheme' content='dark light'>
6
+
<meta name="color-scheme" content="light dark">
7
7
<title>{{.DisplayName}} (@{{.Handle}})</title>
8
8
<meta property="og:title" content="{{.DisplayName}} (@{{.Handle}})" />
9
9
<meta property="og:type" content="website" />
10
10
<meta property="og:url" content="/profile/{{.Handle}}" />
11
11
<meta property="og:image" content="{{.Avatar}}" />
12
12
<meta property="og:description" content="{{.Description}}" />
13
-
<link rel="stylesheet" href="/style.css">
14
13
</head>
15
14
{{end}}
16
15
···
19
18
<head>
20
19
<meta charset="utf-8">
21
20
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, shrink-to-fit=no" />
21
+
<meta name="color-scheme" content="light dark">
22
22
<title>{{.Post.Author.DisplayName}}{{if .Post.Record.Text}}: "{{.Post.Record.Text}}"{{end}}</title>
23
23
<meta property="og:type" content="website" />
24
24
<meta property="og:url" content="/profile/{{.Post.Author.Handle}}/post/{{.Post.RKey}}" />
25
25
<meta property="og:description" content="{{.Post.Record.Text}}" />
26
-
<link rel="stylesheet" href="/style.css">
27
26
</head>
28
27
{{end}}
29
28
···
32
31
<head>
33
32
<meta charset="utf-8">
34
33
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, shrink-to-fit=no" />
34
+
<meta name="color-scheme" content="light dark">
35
35
<title>{{.Name}}</title>
36
36
<meta property="og:type" content="website" />
37
37
<meta property="og:url" content="/profile/{{.Creator.Handle}}/lists/{{.RKey}}" />
38
38
<meta property="og:description" content="{{.Description}}" />
39
-
<link rel="stylesheet" href="/style.css">
40
39
</head>
41
40
{{end}}
42
41
+21
-11
public/header.html
+21
-11
public/header.html
···
1
1
{{define "actor_header"}}
2
2
<header>
3
-
<a href="https://bsky.app/profile/{{.DID}}"><span style="float:right;">View on Bluesky</span></a>
4
-
<a href="/"><span style="float:left;">HTMLsky</span></a>
5
-
<hr style="clear:both;">
3
+
<nav>
4
+
<b><i>HTMLsky</i></b>
5
+
[ <a href="/">Home</a> ]
6
+
[ <a href="https://sr.ht/~jordanreger/htmlsky">Source</a> ]
7
+
[ <a href="https://bsky.app/profile/{{.DID}}">View on Bluesky</a> ]
8
+
</nav>
9
+
<hr>
6
10
</header>
7
11
{{end}}
8
12
9
13
{{define "thread_header"}}
10
14
<header>
11
-
<a href="https://bsky.app/profile/{{.Post.Author.DID}}/post/{{.Post.RKey}}/"><span style="float:right;">View on
12
-
Bluesky</span></a>
13
-
<a href="/"><span style="float:left;">HTMLsky</span></a>
14
-
<hr style="clear:both;">
15
+
<nav>
16
+
<b><i>HTMLsky</i></b>
17
+
[ <a href="/">Home</a> ]
18
+
[ <a href="https://sr.ht/~jordanreger/htmlsky">Source</a> ]
19
+
[ <a href="https://bsky.app/profile/{{.Post.Author.DID}}/post/{{.Post.RKey}}/">View on Bluesky</a> ]
20
+
</nav>
21
+
<hr>
15
22
</header>
16
23
{{end}}
17
24
18
25
{{define "list_header"}}
19
26
<header>
20
-
<a href="https://bsky.app/profile/{{.Creator.DID}}/lists/{{.RKey}}/"><span style="float:right;">View on
21
-
Bluesky</span></a>
22
-
<a href="/"><span style="float:left;">HTMLsky</span></a>
23
-
<hr style="clear:both;">
27
+
<nav>
28
+
<b><i>HTMLsky</i></b>
29
+
[ <a href="/">Home</a> ]
30
+
[ <a href="https://sr.ht/~jordanreger/htmlsky">Source</a> ]
31
+
[ <a href="https://bsky.app/profile/{{.Creator.DID}}/lists/{{.RKey}}/">View on Bluesky</a> ]
32
+
</nav>
33
+
<hr>
24
34
</header>
25
35
{{end}}
+5
-7
public/list.html
+5
-7
public/list.html
···
1
1
{{define "list"}}
2
2
<!DOCTYPE html>
3
-
<html lang="en">
3
+
<html>
4
4
{{template "list_head" .}}
5
5
6
6
<body>
7
7
{{template "list_header" .}}
8
8
9
9
<!-- list description -->
10
-
<article>
11
-
<h1 style="margin-bottom:0;">{{.Name}}</h1>
12
-
<p style="margin:auto 0;" class="handle">by <a href="/profile/{{.Creator.DID}}">@{{.Creator.Handle}}</a></p>
13
-
<p style="white-space:pre-line">{{.DescriptionHTML}}</p>
14
-
<hr>
15
-
</article>
10
+
<h1 style="margin-bottom:0;">{{.Name}}</h1>
11
+
<span>by <a href="/profile/{{.Creator.Handle}}">@{{.Creator.Handle}}</a></span>
12
+
<p>{{.DescriptionHTML}}</p>
13
+
<hr>
16
14
17
15
<span id="feed"></span>
18
16
{{range .Feed}}
+56
-71
public/post.html
+56
-71
public/post.html
···
1
1
{{define "post"}}
2
2
<article>
3
-
<div>
4
-
<img src="{{.Post.Author.Avatar}}" alt="{{.Post.Author.DisplayName}}'s avatar"
5
-
style="width:50px;border-radius:50%;float:left;margin-right:10px;padding:0;">
6
-
<a href="/profile/{{.Post.Author.Handle}}" style="color:inherit;text-decoration:none;">
7
-
<h1 style="margin-bottom:0;margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
8
-
{{.Post.Author.DisplayName}}</h1>
9
-
<p style="margin-top:0;" class="handle">@{{.Post.Author.Handle}}</p>
10
-
</a>
11
-
</div>
12
-
<p style="clear:both;">
13
-
{{.Post.Record.HTML}}
14
-
</p>
15
-
<section>
3
+
<table>
4
+
<tr>
5
+
<td>
6
+
<img src="{{.Post.Author.Avatar}}" alt="{{.Post.Author.DisplayName}}'s avatar" width="50" height="50">
7
+
</td>
8
+
<td>
9
+
<h1 style="margin:0;">{{.Post.Author.DisplayName}}</h1>
10
+
<span><a href="/profile/{{.Post.Author.Handle}}">@{{.Post.Author.Handle}}</a></span>
11
+
</td>
12
+
</tr>
13
+
</table>
14
+
15
+
<p>{{.Post.Record.HTML}}</p>
16
+
17
+
<!--<section>
16
18
{{template "image_embed" .}}
17
19
{{template "post_embed" .}}
18
20
{{template "external_embed" .}}
19
-
</section>
20
-
<time datetime="{{.Post.Record.CreatedAt}}" class="date">{{.Post.Record.CreatedAt.Format "Jan 02, 2006 at 15:04 UTC"
21
-
}}</time>
21
+
</section>-->
22
+
23
+
<time datetime="{{.Post.Record.CreatedAt}}" class="date">
24
+
<i>{{.Post.Record.CreatedAt.Format "Jan 02, 2006 at 15:04 UTC"}}</i>
25
+
</time>
22
26
23
27
<p class="counts">
24
-
<b>{{.Post.ReplyCount}}</b> replies · <b>{{.Post.RepostCount}}</b> reposts ·
28
+
<b>{{.Post.ReplyCount}}</b> replies
29
+
<b>{{.Post.RepostCount}}</b> reposts
25
30
<b>{{.Post.LikeCount}}</b> likes
26
31
</p>
27
32
···
31
36
32
37
{{define "post_reply"}}
33
38
<article>
34
-
<div>
35
-
<a href="/profile/{{.Post.Author.Handle}}/post/{{.Post.RKey}}" style="color:inherit;text-decoration:none;">
36
-
<img src="{{.Post.Author.Avatar}}" alt="{{.Post.Author.DisplayName}}'s avatar"
37
-
style="width:50px;border-radius:50%;float:left;margin-right:10px;padding:0;">
38
-
<p style="margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
39
-
<b>{{.Post.Author.DisplayName}}</b>
40
-
<span class="handle">@{{.Post.Author.Handle}}</span>
41
-
·
42
-
<time datetime="{{.Post.Record.CreatedAt}}" style="margin-top: 10px;"
43
-
class="date">{{.Post.Record.CreatedAt.Format "1/2/2006 15:04 UTC" }}</time>
44
-
</p>
45
-
</div>
46
-
<div style="margin-left:60px;">
47
-
<p style="margin-top:5px;">{{.Post.Record.HTML}}</p>
48
-
<section>
49
-
{{template "image_embed" .}}
50
-
{{template "post_embed" .}}
51
-
{{template "external_embed" .}}
52
-
</section>
53
-
<p style="margin-bottom:5px;" class="counts">
54
-
<a href="#replies" style="color:inherit;text-decoration:none;"><b>{{.Post.ReplyCount}}</b> replies</a> ·
55
-
<b>{{.Post.RepostCount}}</b> reposts · <b>{{.Post.LikeCount}}</b> likes
56
-
</p>
57
-
</div>
58
-
</a>
39
+
<table>
40
+
<tr>
41
+
<td>
42
+
<img src="{{.Post.Author.Avatar}}" alt="{{.Post.Author.DisplayName}}'s avatar" width="40" height="40">
43
+
</td>
44
+
<td>
45
+
<span>
46
+
<b>{{.Post.Author.DisplayName}}</b>
47
+
<a href="/profile/{{.Post.Author.Handle}}">@{{.Post.Author.Handle}}</a>
48
+
</span>
49
+
<br>
50
+
[ <a href="/profile/{{.Post.Author.Handle}}/post/{{.Post.RKey}}">View</a> ]
51
+
<time datetime="{{.Post.Record.CreatedAt}}" class="date">
52
+
<i>{{.Post.Record.CreatedAt.Format "Jan 02, 2006 at 15:04 UTC"}}</i>
53
+
</time>
54
+
</td>
55
+
</tr>
56
+
</table>
57
+
58
+
<p>{{.Post.Record.HTML}}</p>
59
+
<!--<section>
60
+
{{template "image_embed" .}}
61
+
{{template "post_embed" .}}
62
+
{{template "external_embed" .}}
63
+
</section>-->
64
+
65
+
<p class="counts">
66
+
<b>{{.Post.ReplyCount}}</b> replies
67
+
<b>{{.Post.RepostCount}}</b> reposts
68
+
<b>{{.Post.LikeCount}}</b> likes
69
+
</p>
70
+
59
71
<hr>
60
72
</article>
61
73
{{end}}
62
74
63
75
{{define "feed_post"}}
64
-
<article>
65
-
<a href="/profile/{{.Post.Author.Handle}}/post/{{.Post.RKey}}" style="color:inherit;text-decoration:none;">
66
-
<div>
67
-
<img src="{{.Post.Author.Avatar}}" alt="{{.Post.Author.DisplayName}}'s avatar"
68
-
style="width:50px;border-radius:50%;float:left;margin-right:10px;padding:0;">
69
-
<p style="margin:0;">
70
-
<b>{{.Post.Author.DisplayName}}</b>
71
-
<span class="handle">@{{.Post.Author.Handle}}</span>
72
-
·
73
-
<time datetime="{{.Post.Record.CreatedAt}}" style="margin-top: 10px;"
74
-
class="date">{{.Post.Record.CreatedAt.Format "1/2/2006 15:04 UTC" }}</time>
75
-
</p>
76
-
</div>
77
-
<div style="margin-left:60px;">
78
-
<p style="margin-top:5px;">{{.Post.Record.HTML}}</p>
79
-
<section>
80
-
{{template "image_embed" .}}
81
-
{{template "post_embed" .}}
82
-
{{template "external_embed" .}}
83
-
</section>
84
-
<p class="counts">
85
-
<b>{{.Post.ReplyCount}}</b> replies · <b>{{.Post.RepostCount}}</b> reposts ·
86
-
<b>{{.Post.LikeCount}}</b> likes
87
-
</p>
88
-
</div>
89
-
</a>
90
-
<hr>
91
-
</article>
92
-
{{end}}
76
+
{{template "post_reply" .}}
77
+
{{end}}
+10
-8
public/thread.html
+10
-8
public/thread.html
···
1
1
{{define "thread"}}
2
2
<!DOCTYPE html>
3
-
<html lang="en">
3
+
<html>
4
4
{{template "thread_head" .}}
5
+
5
6
<body>
6
-
{{template "thread_header" .}}
7
+
{{template "thread_header" .}}
7
8
8
-
<!-- main post -->
9
-
{{template "post" .}}
9
+
<!-- main post -->
10
+
{{template "post" .}}
10
11
11
-
<span id="replies"></span>
12
-
{{range .Replies}}
13
-
{{template "post_reply" .}}
14
-
{{end}}
12
+
<span id="replies"></span>
13
+
{{range .Replies}}
14
+
{{template "post_reply" .}}
15
+
{{end}}
15
16
</body>
17
+
16
18
</html>
17
19
{{end}}
18
20