brozek/website-theme
1
0
Fork 0
mirror of https://github.com/Brandon-Rozek/website-theme.git synced 2024-09-19 06:25:11 -04:00
Code Issues Projects Releases Packages Wiki Activity

Added more microformats to toots layout

Browse source
This commit is contained in:
Brandon Rozek 2022-05-14 23:27:59 -04:00
parent adf2a4c4d2
commit 801e526a4a
3 changed files with 52 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/css/style.css
View file

@ -329,9 +329,9 @@ footer {
margin-bottom: 0;
}
.toot-avatar { display: inline-block; }
.toot .e-content img { border: 2px solid black; }
.toot img { border: 2px solid black; }
.toot .e-content p:first-of-type {
.toot .date {
display: inline-block;
}
.toot-photos {

49
layouts/toots/list.html
View file

@ -1,41 +1,48 @@
{{ define "main"}}
{{ partial "header.html" . }}
<main>
<style>main { text-align: left; }</style>
<style>main { text-align: left; }</style>
{{ partial "search.html" . }}
<p>
This is an experimental page showing my toots from Mastodon.
Currently, this does not support boosts and it does not automatically refresh.
Feel free to check out
This is an experimental page showing my toots from Mastodon.
Currently, this does not support boosts and it does not automatically refresh.
Feel free to check out
<a href="https://fosstodon.org/@brozek">my profile at Fosstodon</a>
</p>
{{ $listPageDateFormat := .Site.Params.listPageDateFormat | default "January, 2006"}}
{{ range $index, $value := .Pages.GroupByDate $listPageDateFormat }}
{{ range .Pages }}
<article class="toot h-entry">
<div class="e-content">
<img class="toot-avatar" width=50 src="{{ .Params.account.avatar }}"/>
<p class="date">Tooted on <time class="dt-published" datetime='{{ .Date }}'>{{ dateFormat "January 2, 2006 15:04" (time .Date) }}</time></p>
{{ .Content | safeHTML }}
{{ if gt (len .Params.media_attachments) 0 }}
<div class="toot-photos">
{{ range .Params.media_attachments}}
{{ if eq .type "image" }}
<img src="{{ .preview_url }}" alt="{{ .description }}"/>
{{ end }}
{{ end }}
</div>
{{ end }}
<div rel="author" class="h-card p-author toot-avatar">
<img class="u-photo" width=50 src="{{ .Params.account.avatar }}"/>
<span style="display: none;">{{ .Params.account.display_name }}</span>
</div>
<p class="date">Tooted on <time class="dt-published" datetime='{{ .Date }}'>{{ dateFormat "January 2, 2006 15:04" (time .Date) }}</time></p>
<div class="e-content p-name">
{{ .Content | safeHTML }}
{{ if gt (len .Params.media_attachments) 0 }}
<div class="toot-photos">
{{ range .Params.media_attachments}}
{{ if eq .type "image" }}
<img src="{{ .preview_url }}" alt="{{ .description }}"/>
{{ end }}
{{ end }}
</div>
{{ end }}
</div>
<a class="u-url" style="display: none">{{ .Permalink }}</a>
{{ range .Params.tags }}
<a class="p-category" href="{{ .url }}" style="display: none;">{{ .name }}</a>
{{ end }}
<div class="toot-social">
<span><i class='fas fa-share'></i> {{ .Params.replies_count }} </span>
<span><i class='fas fa-retweet'></i> {{ .Params.reblogs_count }} </span>
<span><i class='fas fa-star'></i> {{ .Params.favourites_count }} </span>
<span>| Source: <a href="{{ .Params.syndication }}">{{ .Params.syndication }}</a></span>
<span>| Source: <a class="u-syndication" href="{{ .Params.syndication }}">{{ .Params.syndication }}</a></span>
</div>
</article>
{{ end }}
{{ end }}
</article>
{{ end }}
{{ end }}
</main>
{{ partial "footer.html" . }}
{{ end }}

37
layouts/toots/single.html
View file

@ -4,28 +4,35 @@
{{ .Scratch.Set "customTitleHeaderLink" "/toots" }}
{{ partial "header.html" . }}
<main>
<article class="toot h-entry">
<div class="e-content">
<img class="toot-avatar" width=50 src="{{ .Params.account.avatar }}"/>
<p class="date">Tooted on <time class="dt-published" datetime='{{ .Date }}'>{{ dateFormat "January 2, 2006 15:04" (time .Date) }}</time></p>
<article class="toot h-entry">
<div rel="author" class="h-card p-author toot-avatar">
<img class="u-photo" width=50 src="{{ .Params.account.avatar }}"/>
<span style="display: none;">{{ .Params.account.display_name }}</span>
</div>
<p class="date">Tooted on <time class="dt-published" datetime='{{ .Date }}'>{{ dateFormat "January 2, 2006 15:04" (time .Date) }}</time></p>
<div class="e-content p-name">
{{ .Content | safeHTML }}
{{ if gt (len .Params.media_attachments) 0 }}
<div class="toot-photos">
{{ range .Params.media_attachments}}
{{ if eq .type "image" }}
<img src="{{ .preview_url }}" alt="{{ .description }}"/>
{{ end }}
{{ if eq .type "image" }}
<img src="{{ .preview_url }}" alt="{{ .description }}"/>
{{ end }}
{{ end }}
</div>
{{ end }}
</div>
<div class="toot-social">
<span><i class='fas fa-share'></i> {{ .Params.replies_count }} </span>
<span><i class='fas fa-retweet'></i> {{ .Params.reblogs_count }} </span>
<span><i class='fas fa-star'></i> {{ .Params.favourites_count }} </span>
<span>| Source: <a href="{{ .Params.syndication }}">{{ .Params.syndication }}</a></span>
</div>
</article>
</div>
<a class="u-url" style="display: none">{{ .Permalink }}</a>
{{ range .Params.tags }}
<a class="p-category" href="{{ .url }}" style="display: none;">{{ .name }}</a>
{{ end }}
<div class="toot-social">
<span><i class='fas fa-share'></i> {{ .Params.replies_count }} </span>
<span><i class='fas fa-retweet'></i> {{ .Params.reblogs_count }} </span>
<span><i class='fas fa-star'></i> {{ .Params.favourites_count }} </span>
<span>| Source: <a class="u-syndication" href="{{ .Params.syndication }}">{{ .Params.syndication }}</a></span>
</div>
</article>
</main>
{{ partial "footer.html" . }}
{{ end }}