198 lines
5.6 KiB
HTML
198 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<title>{{if .Query}}{{.Query}} - {{end}}@{{.TwitterUsername}} - Twitterchiver</title>
|
|
<style>
|
|
html, body {
|
|
background-color: rgb(21, 32, 43);
|
|
color: white;
|
|
font-family: sans-serif;
|
|
}
|
|
.tweet-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.tweet-list-item {
|
|
display: block;
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid rgb(56, 68, 77);
|
|
width: clamp(calc(45ch+64px), 100%, calc(75ch+64px));
|
|
}
|
|
.tweet-list-item:first-of-type {
|
|
margin-top: 8px;
|
|
border-top: 1px solid rgb(56, 68, 77);
|
|
}
|
|
.tweet {
|
|
margin-left: 64px;
|
|
}
|
|
.tweet::after {
|
|
clear: both;
|
|
content: "";
|
|
display: block;
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
text-decoration-skip-ink: auto;
|
|
}
|
|
.retweeted-byline {
|
|
display: block;
|
|
}
|
|
.tweet-author-img {
|
|
float: left;
|
|
margin-left: -58px;
|
|
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.byline-link:hover {
|
|
text-decoration: none;
|
|
}
|
|
.byline-link:hover .byline-name {
|
|
text-decoration: underline;
|
|
}
|
|
.byline-name, .quoted-byline-name {
|
|
color: white;
|
|
}
|
|
.byline, .retweeted-byline, .retweeted-icon, .quoted-byline {
|
|
color: rgb(136, 153, 166);
|
|
}
|
|
.retweeted-byline {
|
|
font-weight: bold;
|
|
margin-bottom: 6px;
|
|
}
|
|
.retweeted-icon {
|
|
width: 19px;
|
|
fill: currentcolor;
|
|
float: left;
|
|
margin-left: -24px;
|
|
}
|
|
|
|
.content {
|
|
white-space: pre-wrap;
|
|
overflow-wrap: break-word;
|
|
}
|
|
.content a {
|
|
color: rgb(27, 149, 224);
|
|
}
|
|
|
|
.media {
|
|
margin-top: 8px;
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
grid-template-rows: max-content;
|
|
grid-auto-flow: dense;
|
|
}
|
|
.media-item:only-child,
|
|
.media-item:nth-child(3):last-child {
|
|
grid-column-end: span 2;
|
|
}
|
|
.media-img {
|
|
width: 100%;
|
|
}
|
|
.media-video {
|
|
width: 100%;
|
|
}
|
|
|
|
.quoted-tweet {
|
|
border-radius: 15px;
|
|
border-color: rgb(56, 68, 77);
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
margin-top: 10px;
|
|
padding: 8px;
|
|
}
|
|
.quoted-byline {
|
|
margin-bottom: 6px;
|
|
}
|
|
.quoted-tweet-author-img {
|
|
border-radius: 100%;
|
|
height: 20px;
|
|
vertical-align: bottom;
|
|
margin-right: 2px;
|
|
}
|
|
</style>
|
|
<h1>Twitterchiver: {{.TwitterUsername}}</h1>
|
|
{{if .Query}}
|
|
<h2>Searching for: {{.Query}}</h2>
|
|
{{end}}
|
|
<form action="" method="GET">
|
|
<input type="search" value="{{.Query}}" name="q">
|
|
</form>
|
|
<ol class="tweet-list">
|
|
{{range .Tweets}}
|
|
<li class="tweet-list-item">
|
|
<div class="tweet">
|
|
{{$status := .Object}}
|
|
{{if .Object.retweeted_status}}
|
|
{{$status = .Object.retweeted_status}}
|
|
<svg viewBox="0 0 24 24" class="retweeted-icon"><g><path d="M23.615 15.477c-.47-.47-1.23-.47-1.697 0l-1.326 1.326V7.4c0-2.178-1.772-3.95-3.95-3.95h-5.2c-.663 0-1.2.538-1.2 1.2s.537 1.2 1.2 1.2h5.2c.854 0 1.55.695 1.55 1.55v9.403l-1.326-1.326c-.47-.47-1.23-.47-1.697 0s-.47 1.23 0 1.697l3.374 3.375c.234.233.542.35.85.35s.613-.116.848-.35l3.375-3.376c.467-.47.467-1.23-.002-1.697zM12.562 18.5h-5.2c-.854 0-1.55-.695-1.55-1.55V7.547l1.326 1.326c.234.235.542.352.848.352s.614-.117.85-.352c.468-.47.468-1.23 0-1.697L5.46 3.8c-.47-.468-1.23-.468-1.697 0L.388 7.177c-.47.47-.47 1.23 0 1.697s1.23.47 1.697 0L3.41 7.547v9.403c0 2.178 1.773 3.95 3.95 3.95h5.2c.664 0 1.2-.538 1.2-1.2s-.535-1.2-1.198-1.2z"></path></g></svg>
|
|
<a class="retweeted-byline" href="https://twitter.com/{{.Object.user.screen_name}}"><!--
|
|
-->{{.Object.user.name}} (@{{.Object.user.screen_name}}) retweeted<!--
|
|
--></a>
|
|
{{end}}
|
|
<a href="https://twitter.com/{{$status.user.screen_name}}"><img class="tweet-author-img" src="{{$status.user.profile_image_url_https}}"></a>
|
|
<div class="byline">
|
|
<a href="https://twitter.com/{{$status.user.screen_name}}" class="byline-link"><!--
|
|
--><strong class="byline-name">{{$status.user.name}}</strong>
|
|
<span class="byline-username">@{{$status.user.screen_name}}</span><!--
|
|
--></a>
|
|
·
|
|
<a href="https://twitter.com/{{$status.user.screen_name}}/status/{{$status.id_str}}" class="timestamp"><time datetime="{{.CreatedAt.Format "2006-01-02T15:04:05-0700"}}">{{.CreatedAtFriendly}}</time></a>
|
|
</div>
|
|
<div class="content"><!--
|
|
-->{{call $.FormatTweetText $status.full_text $status}}<!--
|
|
--></div>
|
|
{{if .QuotedObject}}
|
|
<div class="quoted-tweet">
|
|
<div class="quoted-byline">
|
|
<img class="quoted-tweet-author-img" src="{{.QuotedObject.user.profile_image_url_https}}">
|
|
<strong class="quoted-byline-name">{{.QuotedObject.user.name}}</strong>
|
|
<span class="quoted-byline-username">@{{.QuotedObject.user.screen_name}}
|
|
·
|
|
<time datetime="{{.QuotedCreatedAt.Format "2006-01-02T15:04:05-0700"}}">{{.QuotedCreatedAtFriendly}}</time>
|
|
</div>
|
|
<div class="quoted-content"><!--
|
|
-->{{if .QuotedObject.full_text}}{{.QuotedObject.full_text}}{{else}}{{.QuotedObject.text}}{{end}}<!--
|
|
--></div>
|
|
</div>
|
|
{{end}}
|
|
{{if $status.extended_entities}}
|
|
<div class="media">
|
|
{{range $entity := $status.extended_entities.media}}
|
|
<div class="media-item">
|
|
{{if eq $entity.type "video"}}
|
|
<video controls poster="{{rewriteURL $entity.media_url_https}}" class="media-video">
|
|
{{with bestVariant $entity.video_info.variants}}
|
|
{{if .}}
|
|
<source src="{{rewriteURL .url}}" type="video/mp4">
|
|
{{end}}
|
|
{{end}}
|
|
</video>
|
|
{{else if eq $entity.type "gif"}}
|
|
<video autoplay muted poster="{{rewriteURL $entity.media_url_https}}" class="media-video">
|
|
{{with bestVariant $entity.video_info.variants}}
|
|
{{if .}}
|
|
<source src="{{rewriteURL .url}}" type="video/mp4">
|
|
{{end}}
|
|
{{end}}
|
|
</video>
|
|
{{else}}
|
|
<a href="{{$entity.expanded_url}}" class="media-link">
|
|
<img src="{{rewriteURL $entity.media_url_https}}" class="media-img">
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</li>
|
|
{{end}}
|
|
</ol>
|
|
|
|
{{if .NextTweetID}}
|
|
<a href="?start_from={{.NextTweetID}}&q={{.Query}}">...next</a>
|
|
{{end}}
|