me/offline-twitter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add PWA boilerplate and width/height attrs for all <img> tags

Browse Source
This commit is contained in:
Alessio 2024-03-22 21:37:34 -07:00
parent 2e1c851e04
commit e6471b65f0
11 changed files with 77 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
internal/webserver/static/pwa/icon-583x583.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

13
internal/webserver/static/pwa/manifest.json Normal file
View File

@ -0,0 +1,13 @@
{
"name": "Offline Twitter - A privacy-focused client for Twitter",
"short_name": "Offline Twitter",
"start_url": ".",
"display": "standalone",
"icons": [
{
"src": "/static/pwa/icon-583x583.png",
"sizes": "583x583",
"type": "image/png"
}
]
}

12
internal/webserver/static/pwa/service-worker.js Normal file
View File

@ -0,0 +1,12 @@
self.addEventListener('install', function(event) {
// Skip caching step during installation
});
self.addEventListener('activate', function(event) {
// Do nothing special during activation
});
self.addEventListener('fetch', function(event) {
// Bypass the service worker for network requests
event.respondWith(fetch(event.request));
});

2
internal/webserver/tpl/includes/author_info.tpl
View File

@ -15,7 +15,7 @@
{{.DisplayName}}
{{if .IsPrivate}}
<div class="circle-outline">
<img class="svg-icon" src="/static/icons/lock.svg" />
<img class="svg-icon" src="/static/icons/lock.svg" width="24" height="24" />
</div>
{{end}}
</div>

15
internal/webserver/tpl/includes/base.tpl
View File

@ -7,13 +7,26 @@
<link rel='stylesheet' href='/static/styles.css'>
<link rel='shortcut icon' href='/static/twitter.ico' type='image/x-icon'>
<link rel='stylesheet' href='/static/vendor/fonts.css'>
<link rel="manifest" href="/static/pwa/manifest.json">
<script src="/static/vendor/htmx.min.js" integrity="sha384-zUfuhFKKZCbHTY6aRR46gxiqszMk5tcHjsVFxnUo8VMus4kHGVdIYVbOYYNlKmHV" crossorigin="anonymous"></script>
<script src="/static/vendor/htmx-extension-json-enc.js"></script>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/static/pwa/service-worker.js')
.then(function(registration) {
console.log('Service Worker registered with scope:', registration.scope);
}).catch(function(error) {
console.log('Service Worker registration failed:', error);
});
}
</script>
</head>
<body>
<div class="top-bar">
<a onclick="window.history.back()" class="back-button quick-link">
<img class="svg-icon" src="/static/icons/back.svg" />
<img class="svg-icon" src="/static/icons/back.svg" width="24" height="24"/>
</a>
<form hx-get="/search" hx-push-url="true" hx-target="body" hx-swap="inner-html show:window:top">
<input id="search-bar"

14
internal/webserver/tpl/includes/likes_count.tpl
View File

@ -1,9 +1,19 @@
{{define "likes-count"}}
<div class="interaction-stat" hx-trigger="click consume">
{{if .IsLikedByCurrentUser}}
<img class="svg-icon like-icon liked" src="/static/icons/like_filled.svg" hx-get="/tweet/{{.ID}}/unlike" hx-target="closest .interaction-stat" hx-push-url="false" hx-swap="outerHTML focus-scroll:false" />
<img class="svg-icon like-icon liked" src="/static/icons/like_filled.svg" width="24" height="24"
hx-get="/tweet/{{.ID}}/unlike"
hx-target="closest .interaction-stat"
hx-push-url="false"
hx-swap="outerHTML focus-scroll:false"
/>
{{else}}
<img class="svg-icon like-icon" src="/static/icons/like.svg" hx-get="/tweet/{{.ID}}/like" hx-target="closest .interaction-stat" hx-push-url="false" hx-swap="outerHTML focus-scroll:false" />
<img class="svg-icon like-icon" src="/static/icons/like.svg" width="24" height="24"
hx-get="/tweet/{{.ID}}/like"
hx-target="closest .interaction-stat"
hx-push-url="false"
hx-swap="outerHTML focus-scroll:false"
/>
{{end}}
<span>{{.NumLikes}}</span>
</div>

22
internal/webserver/tpl/includes/nav_sidebar.tpl
View File

@ -3,71 +3,71 @@
<div id="logged-in-user-info">
<div class="quick-link" hx-get="/login" hx-trigger="click" hx-target="body" hx-push-url="true">
{{template "author-info" active_user}}
<img class="svg-icon" src="/static/icons/dotdotdot.svg" />
<img class="svg-icon" src="/static/icons/dotdotdot.svg" width="24" height="24" />
</div>
</div>
<ul class="quick-links">
<a class="unstyled-link" href="/timeline">
<li class="quick-link">
<img class="svg-icon" src="/static/icons/home.svg" />
<img class="svg-icon" src="/static/icons/home.svg" width="24" height="24" />
<span>Home</span>
</li>
</a>
<a class="unstyled-link" onclick="document.querySelector('#search-bar').focus()">
<li class="quick-link">
<img class="svg-icon" src="/static/icons/explore.svg" />
<img class="svg-icon" src="/static/icons/explore.svg" width="24" height="24" />
<span>Explore</span>
</li>
</a>
<a class="unstyled-link" href="#">
<li class="quick-link">
<img class="svg-icon" src="/static/icons/notifications.svg" />
<img class="svg-icon" src="/static/icons/notifications.svg" width="24" height="24" />
<span>Notifications</span>
</li>
</a>
{{if (not (eq (active_user).Handle "[nobody]"))}}
<a class="unstyled-link" href="/messages">
<li class="quick-link">
<img class="svg-icon" src="/static/icons/messages.svg" />
<img class="svg-icon" src="/static/icons/messages.svg" width="24" height="24" />
<span>Messages</span>
</li>
</a>
{{end}}
<a class="unstyled-link" href="/lists">
<li class="quick-link">
<img class="svg-icon" src="/static/icons/lists.svg" />
<img class="svg-icon" src="/static/icons/lists.svg" width="24" height="24" />
<span>Lists</span>
</li>
</a>
<a class="unstyled-link" href="#">
<li class="quick-link">
<img class="svg-icon" src="/static/icons/bookmarks.svg" />
<img class="svg-icon" src="/static/icons/bookmarks.svg" width="24" height="24" />
<span>Bookmarks</span>
</li>
</a>
<a class="unstyled-link" href="#">
<li class="quick-link">
<img class="svg-icon" src="/static/icons/communities.svg" />
<img class="svg-icon" src="/static/icons/communities.svg" width="24" height="24" />
<span>Communities</span>
</li>
</a>
<a class="unstyled-link" href="#">
<li class="quick-link">
<img class="svg-icon" src="/static/icons/verified.svg" />
<img class="svg-icon" src="/static/icons/verified.svg" width="24" height="24" />
<span>Verified</span>
</li>
</a>
{{if (not (eq (active_user).Handle "[nobody]"))}}
<a class="unstyled-link" href="/{{(active_user).Handle}}">
<li class="quick-link">
<img class="svg-icon" src="/static/icons/profile.svg" />
<img class="svg-icon" src="/static/icons/profile.svg" width="24" height="24" />
<span>Profile</span>
</li>
</a>
{{end}}
<a class="unstyled-link" href="#">
<li class="quick-link">
<img class="svg-icon" src="/static/icons/more.svg" />
<img class="svg-icon" src="/static/icons/more.svg" width="24" height="24"/>
<span>More</span>
</li>
</a>

10
internal/webserver/tpl/includes/user_header.tpl
View File

@ -18,18 +18,18 @@
</div>
{{if .Location}}
<div class="user-location bio-info-with-icon">
<img class="svg-icon" src="/static/icons/location.svg" />
<img class="svg-icon" src="/static/icons/location.svg" width="24" height="24" />
<span>{{.Location}}</span>
</div>
{{end}}
{{if .Website}}
<div class="user-website bio-info-with-icon">
<img class="svg-icon" src="/static/icons/website.svg" />
<img class="svg-icon" src="/static/icons/website.svg" width="24" height="24" />
<a class="unstyled-link" target="_blank" href="{{.Website}}">{{.Website}}</a>
</div>
{{end}}
<div class="user-join-date bio-info-with-icon">
<img class="svg-icon" src="/static/icons/calendar.svg" />
<img class="svg-icon" src="/static/icons/calendar.svg" width="24" height="24" />
<span>{{.JoinDate.Time.Format "Jan 2, 2006"}}</span>
</div>
@ -47,10 +47,10 @@
<div class="user-feed-buttons-container">
<a class="unstyled-link quick-link" target="_blank" href="https://twitter.com/{{.Handle}}" title="Open on twitter.com">
<img class="svg-icon" src="/static/icons/external-link.svg" />
<img class="svg-icon" src="/static/icons/external-link.svg" width="24" height="24" />
</a>
<a class="unstyled-link quick-link" hx-get="?scrape" hx-target="body" hx-indicator=".user-header" title="Refresh">
<img class="svg-icon" src="/static/icons/refresh.svg" />
<img class="svg-icon" src="/static/icons/refresh.svg" width="24" height="24" />
</a>
</div>
</div>

2
internal/webserver/tpl/tweet_page_includes/chat_list_entry.tpl
View File

@ -13,7 +13,7 @@
{{end}}
{{else}}
<div class="groupchat-profile-image-container">
<img class="profile-image" src="{{$room.AvatarImageRemoteURL}}" />
<img class="profile-image" src="{{$room.AvatarImageRemoteURL}}" width="48" height="48" />
<div class="display-name row">{{$room.Name}}</div>
</div>
{{end}}

2
internal/webserver/tpl/tweet_page_includes/chat_view.tpl
View File

@ -18,7 +18,7 @@
{{if (ne $message.InReplyToID 0)}}
<div class="replying-to-container">
<div class="replying-to-label row">
<img class="svg-icon" src="/static/icons/replying_to.svg" />
<img class="svg-icon" src="/static/icons/replying_to.svg" width="24" height="24" />
<span>Replying to</span>
</div>
<div class="replying-to-message">

14
internal/webserver/tpl/tweet_page_includes/single_tweet.tpl
View File

@ -14,7 +14,7 @@
{{$retweet := (retweet .RetweetID)}}
{{$retweet_user := (user $retweet.RetweetedByID)}}
<div class="retweet-info-container" hx-trigger="click consume">
<img class="svg-icon" src="/static/icons/retweet.svg" />
<img class="svg-icon" src="/static/icons/retweet.svg" width="24" height="24" />
<span class="retweeted-by-label">Retweeted by</span>
<a class="retweeted-by-user" hx-get="/{{$retweet_user.Handle}}" hx-target="body" hx-swap="outerHTML" hx-push-url="true">
{{$retweet_user.DisplayName}}
@ -106,7 +106,7 @@
<h3 class="embedded-link-title">{{.Title}}</h3>
<p class="embedded-link-description">{{.Description}}</p>
<span class="row embedded-link-domain-container">
<img class="svg-icon" src="/static/icons/link3.svg" />
<img class="svg-icon" src="/static/icons/link3.svg" width="24" height="24" />
<span class="embedded-link-domain">{{(.GetDomain)}}</span>
</span>
</a>
@ -128,25 +128,25 @@
<div class="interactions-bar row">
<div class="interaction-stat">
<img class="svg-icon" src="/static/icons/quote.svg" />
<img class="svg-icon" src="/static/icons/quote.svg" width="24" height="24" />
<span>{{$main_tweet.NumQuoteTweets}}</span>
</div>
<div class="interaction-stat">
<img class="svg-icon" src="/static/icons/reply.svg" />
<img class="svg-icon" src="/static/icons/reply.svg" width="24" height="24" />
<span>{{$main_tweet.NumReplies}}</span>
</div>
<div class="interaction-stat">
<img class="svg-icon" src="/static/icons/retweet.svg" />
<img class="svg-icon" src="/static/icons/retweet.svg" width="24" height="24" />
<span>{{$main_tweet.NumRetweets}}</span>
</div>
{{template "likes-count" $main_tweet}}
<div class="dummy"></div>
<div class="tweet-buttons-container" hx-trigger="click consume">
<a class="unstyled-link quick-link" target="_blank" href="https://twitter.com/{{$author.Handle}}/status/{{$main_tweet.ID}}" title="Open on twitter.com">
<img class="svg-icon" src="/static/icons/external-link.svg" />
<img class="svg-icon" src="/static/icons/external-link.svg" width="24" height="24" />
</a>
<a class="unstyled-link quick-link" hx-get="/tweet/{{$main_tweet.ID}}?scrape" hx-target="body" title="Refresh">
<img class="svg-icon" src="/static/icons/refresh.svg" />
<img class="svg-icon" src="/static/icons/refresh.svg" width="24" height="24" />
</a>
</div>
</div>