Compare commits

..

5 Commits
main ... pr

13 changed files with 154 additions and 244 deletions

49
.github/scripts/update-readable-css.sh vendored Executable file
View File

@ -0,0 +1,49 @@
#!/bin/bash
set -o errexit
set -o pipefail
set -o nounset
# Query the codeberg.org API (see
# https://codeberg.org/api/swagger#/repository/repoListReleases
# ) and use jq to get the tag name of the
# latest release (i.e. the first element of the
# array in the JSON output, that is not a
# prerelease).
# The '-r' option will give us "raw" output,
# i.e. without surrounding double-quotes.
# We use 'map' and 'select' in combination,
# because jq won't return a list otherwise.
# Only using 'select' returns just the matching
# elements, which is not a valid json that we
# can process further.
TAG_VERSION=$(curl -s \
-H 'accept: application/json' \
https://codeberg.org/api/v1/repos/Freedom-to-Write/readable.css/releases \
| jq -r '.|map(select(.prerelease==false))[0].tag_name')
echo "Latest tag: ${TAG_VERSION}"
# Get the current version.
# The '-o' option will only output the match grep found.
# We look for readable.min.css and a set of three numbers seperated by dots,
# i.e. a semantic version. readable.min.css is used to make sure that we match
# the right numbers in the file.
# We use sed to get rid of the readable.min.css prefix.
CURRENT_VERSION=$(grep -o \
'readable.min.css?v=v[[:digit:]]\+\.[[:digit:]]\+\.[[:digit:]]\+' \
layouts/partials/head.html \
| sed 's/readable.min.css?v=//')
echo "Current version: ${CURRENT_VERSION}"
if [[ $TAG_VERSION == $CURRENT_VERSION ]]
then
echo "Nothing to do. The current version is already up to date."
else
curl -s "https://codeberg.org/Freedom-to-Write/readable.css/raw/tag/${TAG_VERSION}/readable.css" > static/css/readable.css
curl -s "https://codeberg.org/Freedom-to-Write/readable.css/raw/tag/${TAG_VERSION}/readable.min.css" > static/css/readable.min.css
sed -i "s/readable.min.css?v=${CURRENT_VERSION}/readable.min.css?v=${TAG_VERSION}/" layouts/partials/head.html
fi
# Add the latest tag version to the workflow environment, so we can access
# it in later steps.
echo "READABLE_CSS_TAG=${TAG_VERSION}" >> "$GITHUB_ENV"

View File

@ -0,0 +1,42 @@
name: update-readable-css
on:
schedule:
# Every day at 3:28.
- cron: '28 3 * * *'
jobs:
update-readable-css:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Download CSS files for latest tag
run: .github/scripts/update-readable-css.sh
- name: Create pull request if files have changed
# https://github.com/marketplace/actions/create-pull-request
uses: peter-evans/create-pull-request@v5
with:
# First line is the commit subject as always. The rest goes
# into the body.
commit-message: |
Update readable.css to ${{ env.READABLE_CSS_TAG }}
See the changelog here:
https://codeberg.org/Freedom-to-Write/readable.css/src/tag/${{ env.READABLE_CSS_TAG }}/CHANGELOG.md
branch: update-readable-css
delete-branch: true
# Use 'GitHub' both times.
# This is already the default for committer, but the author defaults
# to the user who triggered the workflow run, which is the owner of
# the repository.
# We use the same value for the author to indicate that the
# commit was created by a bot.
committer: GitHub <noreply@github.com>
author: GitHub <noreply@github.com>
title: Update readable.css to ${{ env.READABLE_CSS_TAG }}
body: |
See the changelog here:
https://codeberg.org/Freedom-to-Write/readable.css/src/tag/${{ env.READABLE_CSS_TAG }}/CHANGELOG.md
labels: update-readable-css

View File

@ -4,35 +4,66 @@ Readable is a theme for the static-site generator [Hugo](https://gohugo.io/) usi
Shoutout to [Benjamin Hollon](https://benjaminhollon.com/) for his amazing work building this CSS framework and making it so simple to use. Shoutout to [Benjamin Hollon](https://benjaminhollon.com/) for his amazing work building this CSS framework and making it so simple to use.
**This is a fork of the project [hugo-theme-readable](https://codeberg.org/Freedom-to-Write/hugo-theme-readable)** Want to check out a demo? (coming soon)
https://codeberg.org/Freedom-to-Write/hugo-theme-readable
![demo image](/docs/demo_image.png) ![demo image](/docs/demo_image.png)
## Installation ## Installation
To add this theme to an existing Hugo site, start by adding this repo as a submodule in the site's themes folder. To add this theme to an existing Hugo site, start by adding this repo as a submodule in the site's themes folder.
`git submodule add https://git.fbievan.live/fbievan/hugo-theme-readable themes/readable` `git submodule add https://codeberg.org/Freedom-to-Write/hugo-theme-readable themes/readable`
Then, update your config file to be using the new theme. For example, if you are using config.toml, the line should become: Then, update your config file to be using the new theme. For example, if you are using config.toml, the line should become:
`theme = 'readable'` `theme = 'readable'`
If you don't have an existing site, feel free to use the provided [starter template](https://codeberg.org/Freedom-to-Write/hugo-starter-readable) to quickly get your website online.
For more information on starting a Hugo website and using custom themes, refer to the [Hugo documentation](https://gohugo.io/documentation/). For more information on starting a Hugo website and using custom themes, refer to the [Hugo documentation](https://gohugo.io/documentation/).
## Usage ## Usage
Freedom to Write has provided some awesome guides on writing HTML that works automatically with the formatting of Readable. For a complete HTML page guide on writing custom pages, see [Overall Structure](https://codeberg.org/Freedom-to-Write/readable.css/wiki/Overall-Structure). For some neat tips that may make life easier working with this style sheet, read [Quick Tips](https://codeberg.org/Freedom-to-Write/readable.css/wiki/Quick-Tips). Freedom to Write has provided some awesome guides on writing HTML that works automatically with the formatting of Readable. For a complete HTML page guide on writing custom pages, see [Overall Structure](https://codeberg.org/Freedom-to-Write/readable.css/wiki/Overall-Structure). For some neat tips that may make life easier working with this style sheet, read [Quick Tips](https://codeberg.org/Freedom-to-Write/readable.css/wiki/Quick-Tips).
## Shortcodes
## The rest ### aside
As mentioned, This is a fork of [hugo-theme-readable](https://codeberg.org/Freedom-to-Write/hugo-theme-readable), and will continue to cherry-pick commits from the upstream. I also commit to pushing certain things I think work with the upstream project, to the upstream.
This is very much a opinonized theme for my site, and you can use it for yours, I however ask that you credit me as I credit Benjamin, and CJ for the work done on this project. You can use the `aside` shortcode to signify content that is slightly off-topic in regard to the rest of the post.
Without Benjamin Hollon or C.J this theme wouldn't exist. Here's how it compares to a blockquote:
Projects used: ```text
- [hugo](https://gohugo.io/) created by [Bep](https://bep.is/en/) > This is a blockquote.
- [Readable.css](https://codeberg.org/Freedom-to-Write/readable.css) created by [Benjamin Hollon](https://benjaminhollon.com/) >
- [Hugo Readable Theme](https://codeberg.org/Freedom-to-Write/hugo-theme-readable) created by [C.J](https://github.com/cjtheham) > This is a default **markdown** element and supports formatting inside it.
{{< aside >}}
This is an aside element.
You can use **markdown** formatting inside it.
{{</ aside >}}
```
The above code generates the following output:
![Comparing a blockquote to an aside. The blockquote has a thin bar on it's left, while the aside element is inside a nice box with rounded corners.](/docs/blockquote_vs_aside.png)
### video
You can use the `video` shortcode to embed a video player in your post.
```text
{{< video source="https://test-videos.co.uk/vids/bigbuckbunny/mp4/av1/1080/Big_Buck_Bunny_1080_10s_5MB.mp4" type="video/mp4" caption="Of course it's Big Buck Bunny!" >}}
```
![A still from an embedded video with controls in a post.](/docs/video.png)
Sources can be remote or static content from your website. You can find the supported file types [here](https://www.w3schools.com/html/html5_video.asp#table1).
## Notes
- Benjamin loves when new sites and projects pop up using the readable.css framework!
- If you've built a complete site using this theme, submit an issue to the [original repo](https://codeberg.org/Freedom-to-Write/readable.css) with the URL of your site to be featured in the project's README.
- Projects like this and other non-website uses of the framework, such as adapting it to other static site generators, can be featured on the page [Unofficial Related Projects (that are awesome)](https://codeberg.org/Freedom-to-Write/readable.css/wiki/Unofficial-Related-Projects-%28that-are-awesome%29). Go mention [@freedomtowrite@fosstodon.org](https://fosstodon.org/@freedomtowrite) to be featured there!

View File

@ -1,5 +1,4 @@
{{ define "main" }} {{ define "main" }}
{{ partial "head.html" }}
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
{{ range .Pages.ByLastmod.Reverse }} {{ range .Pages.ByLastmod.Reverse }}
<p> <p>

View File

@ -1,72 +0,0 @@
{{- /* Deprecate site.Author.email in favor of site.Params.author.email */}}
{{- $authorEmail := "" }}
{{- with site.Params.author }}
{{- if reflect.IsMap . }}
{{- with .email }}
{{- $authorEmail = . }}
{{- end }}
{{- end }}
{{- else }}
{{- with site.Author.email }}
{{- $authorEmail = . }}
{{- warnf "The author key in site configuration is deprecated. Use params.author.email instead." }}
{{- end }}
{{- end }}
{{- /* Deprecate site.Author.name in favor of site.Params.author.name */}}
{{- $authorName := "" }}
{{- with site.Params.author }}
{{- if reflect.IsMap . }}
{{- with .name }}
{{- $authorName = . }}
{{- end }}
{{- else }}
{{- $authorName = . }}
{{- end }}
{{- else }}
{{- with site.Author.name }}
{{- $authorName = . }}
{{- warnf "The author key in site configuration is deprecated. Use params.author.name instead." }}
{{- end }}
{{- end }}
{{- $pctx := . }}
{{- if .IsHome }}{{ $pctx = .Site }}{{ end }}
{{- $pages := slice }}
{{- if or $.IsHome $.IsSection }}
{{- $pages = $pctx.RegularPages }}
{{- else }}
{{- $pages = $pctx.Pages }}
{{- end }}
{{- $limit := .Site.Config.Services.RSS.Limit }}
{{- if ge $limit 1 }}
{{- $pages = $pages | first $limit }}
{{- end }}
{{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
{{- printf "<?xml-stylesheet href=\"/rss.xsl\" type=\"text/xsl\"?>" | safeHTML -}}
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>{{ if eq .Title .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} on {{ end }}{{ .Site.Title }}{{ end }}</title>
<link>{{ .Permalink }}</link>
<description>Recent content {{ if ne .Title .Site.Title }}{{ with .Title }}in {{ . }} {{ end }}{{ end }}on {{ .Site.Title }}</description>
<generator>Hugo</generator>
<language>{{ site.Language.LanguageCode }}</language>{{ with $authorEmail }}
<managingEditor>{{.}}{{ with $authorName }} ({{ . }}){{ end }}</managingEditor>{{ end }}{{ with $authorEmail }}
<webMaster>{{ . }}{{ with $authorName }} ({{ . }}){{ end }}</webMaster>{{ end }}{{ with .Site.Copyright }}
<copyright>{{ . }}</copyright>{{ end }}{{ if not .Date.IsZero }}
<lastBuildDate>{{ (index $pages.ByLastmod.Reverse 0).Lastmod.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
{{- with .OutputFormats.Get "RSS" }}
{{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
{{- end }}
{{- range $pages }}
<item>
<title>{{ .Title }}</title>
<link>{{ .Permalink }}</link>
<pubDate>{{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
{{- with $authorEmail }}<author>{{ . }}{{ with $authorName }} ({{ . }}){{ end }}</author>{{ end }}
<guid>{{ .Permalink }}</guid>
<description>{{ printf "<![CDATA[" | safeHTML }}{{ .Content | safeHTML }}{{ printf "]]>" | safeHTML }}</description>
</item>
{{- end }}
</channel>
</rss>

View File

@ -1,17 +1,7 @@
{{ define "main" }} {{ define "main" }}
{{ partial "metadata.html" . }} {{ partial "metadata.html" . }}
<!-- <br><br> --> <!-- <br><br> -->
<article> <article>
{{ .Content }}
</article> </article>
<div>
{{ range where .Site.RegularPages "Section" "in" .Site.MainSections }}
<section class="articles">
<h3><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h3>
{{ partial "metadata.html" . }}
<p class="summary">{{ .Summary }}</p>
</section>
{{ end }}
</div>
{{ end }} {{ end }}

View File

@ -10,10 +10,4 @@
{{ if .IsHome }}{{ $title = .Site.Title }}{{ end }} {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
<title>{{ $title }}</title> <title>{{ $title }}</title>
{{ partial "hook_head_end.html" . }} {{ partial "hook_head_end.html" . }}
{{ if .IsHome }}
<link rel="stylesheet" type="text/css" href="{{relURL "css/homepage.css"}}">
{{ end }}
{{ if .IsPage }}
<link rel="stylesheet" type="text/css" href="{{relURL "css/page.css"}}">
{{ end }}
</head> </head>

View File

@ -1,27 +1,15 @@
<h1>{{ $.Site.Title }}</h1>
<p>{{ $.Site.Params.subtitle }}</p>
<!-- readable.css v1.1.0 introduced different navbar styles and defaults to a <!-- readable.css v1.1.0 introduced different navbar styles and defaults to a
navbar without animations. We default to "classy" to keep the animations and be navbar without animations. We default to "classy" to keep the animations and be
backwards compatible to earlier versions of this theme without requiring a backwards compatible to earlier versions of this theme without requiring a
config change. --> config change. -->
{{ $navbar_style := (default "classy" $.Site.Params.navbar_style) }} {{ $navbar_style := (default "classy" $.Site.Params.navbar_style) }}
<nav data-style={{ $navbar_style }}> <nav data-style={{ $navbar_style }}>
{{ if .IsHome }}
{{ range .Site.Menus.main -}} {{ range .Site.Menus.main -}}
{{ if eq $navbar_style "classy" }}<span>{{ end }} {{ if eq $navbar_style "classy" }}<span>{{ end }}
<a href="{{ .URL | absLangURL }}">{{ .Name }}</a> <a href="{{ .URL | absLangURL }}">{{ .Name }}</a>
{{ if eq $navbar_style "classy" }}</span>{{ end }} {{ if eq $navbar_style "classy" }}</span>{{ end }}
{{- end }} {{- end }}
</nav> </nav>
<h1>{{ $.Site.Title }}</h1>
<p>{{ $.Site.Params.subtitle }}</p>
{{ else }}
<a href="/">Go Home</a>
{{ $path := .Path }}
{{ $bpath := path.Dir $path }}
{{ if eq $bpath "/" }}
{{ else }}
<a href="{{ $bpath }}">Back to {{ $bpath }}</a>
{{ end }}
</nav>
{{ end }}

View File

@ -1 +0,0 @@
{{ partial "header.html" }}

View File

@ -1,25 +1,19 @@
{{ $dateTime := .PublishDate.Format "2006-01-02" }} {{ $dateTime := .PublishDate.Format "2006-01-02" }}
{{ $lastmodTime := .Lastmod.Format "2006-01-02" }} {{ $lastmodTime := .Lastmod.Format "2006-01-02" }}
{{ $dateFormat := .Site.Params.dateFormat | default "Jan 2, 2006" }} {{ $dateFormat := .Site.Params.dateFormat | default "Jan 2, 2006" }}
<section class="metadata">
<i data-feather="calendar"></i> <i data-feather="calendar"></i>
{{ if .PublishDate }} {{ if .PublishDate }}
{{ if and (ne $lastmodTime $dateTime) (gt .Lastmod .Date) }} {{ if and (ne $lastmodTime $dateTime) (gt .Lastmod .Date) }}
<time datetime="{{ $lastmodTime }}">{{ .Lastmod.Format $dateFormat }}</time> <time datetime="{{ $lastmodTime }}">{{ .Lastmod.Format $dateFormat }}</time>
(first posted <time datetime="{{ $dateTime }}">{{ .PublishDate.Format $dateFormat }}</time>) (first posted <time datetime="{{ $dateTime }}">{{ .PublishDate.Format $dateFormat }}</time>)
{{ else }} {{ else }}
Date Published: <time datetime="{{ $dateTime }}">{{ .PublishDate.Format $dateFormat }}</time> <time datetime="{{ $dateTime }}">{{ .PublishDate.Format $dateFormat }}</time>
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ with .Params.tags }} {{ with .Params.tags }}
<br> <i data-feather="tag"></i>
Tags: <i data-feather="tag"></i>
{{ range . }} {{ range . }}
{{ $href := print "/tags/" (urlize .) }} {{ $href := print "/tags/" (urlize .) }}
<a class="btn btn-sm btn-outline-dark tag-btn" href="{{ $href }}">{{ . }}</a> <a class="btn btn-sm btn-outline-dark tag-btn" href="{{ $href }}">{{ . }}</a>
{{ end }} {{ end }}
</section>
{{ else }}
</section>
{{ end }} {{ end }}

View File

@ -1,55 +0,0 @@
html, html[data-theme="light"] {
--background-color: snow;
--color: #000;
}
html[data-theme="dark"] {
--background-color: #1f272d;
--color: #fff;
--tcolor: pink;
}
@media (prefers-color-scheme: dark) {
html {
--background-color: #222830;
--color: #fff;
--hcolor: #e976d9;
--tcolor: pink;
}
}
.articles {
padding: 5px;
border: var(--line-width) solid;
border-top-style: dashed;
border-bottom-style: dashed;
border-right-style: none;
border-left-style: none;
}
section {
border: var(--line-width) solid;
border-left-style: none;
border-right-style: none;
border-top-style: none;
text-align: left;
padding-bottom: 20px;
padding-top: 0px;
}
h3 {
text-align: left;
margin-top: 10px;
padding-top: 0px;
color: var(--hcolor);
}
.summary {
padding-left: 1.5rem;
margin-top: 0.1rem;
}
.metadata {
padding-left: 0.5rem;
border-top-style: none;
border-bottom-style: none;
padding-bottom: 0.3rem;
}
.metadata a {
text-decoration: underline;
color: var(--tcolor);
}

View File

@ -1,3 +0,0 @@
.metadata {
text-align: center;
}

View File

@ -1,46 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd">
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><xsl:value-of select="/rss/channel/title"/> Feed</title>
<link href="/css/readable.min.css" rel="stylesheet" type="text/css"></link>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
</head>
<body>
<nav>
<span><a href="/">Back Home</a></span>
</nav>
<header>
<h1><xsl:value-of select="/rss/channel/title"/></h1>
<p>RSS Feed preview</p>
</header>
<main>
<xsl:for-each select="/rss/channel/item">
<article>
<h3 style="text-align: center">
<a target="_blank">
<xsl:attribute name="href">
<xsl:value-of select="link"/>
</xsl:attribute>
<xsl:value-of select="title"/>
</a>
</h3>
<p style="text-align: center">
Published:
<time>
<xsl:value-of select="pubDate" />
</time>
</p>
</article>
</xsl:for-each>
</main>
</body>
</html>
</xsl:template>
</xsl:stylesheet>