diff --git a/.github/scripts/update-readable-css.sh b/.github/scripts/update-readable-css.sh new file mode 100755 index 0000000..4efb067 --- /dev/null +++ b/.github/scripts/update-readable-css.sh @@ -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" diff --git a/.github/workflows/update-readable-css.yml b/.github/workflows/update-readable-css.yml new file mode 100644 index 0000000..cab3bf0 --- /dev/null +++ b/.github/workflows/update-readable-css.yml @@ -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 + author: GitHub + 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 diff --git a/README.md b/README.md index 010fb78..e174471 100644 --- a/README.md +++ b/README.md @@ -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. -**This is a fork of the project [hugo-theme-readable](https://codeberg.org/Freedom-to-Write/hugo-theme-readable)** -https://codeberg.org/Freedom-to-Write/hugo-theme-readable +Want to check out a demo? (coming soon) + ![demo image](/docs/demo_image.png) ## Installation 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: `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/). ## 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). +## Shortcodes -## The rest -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. +### aside -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: -- [hugo](https://gohugo.io/) created by [Bep](https://bep.is/en/) -- [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) +```text +> This is a blockquote. +> +> This is a default **markdown** element and supports formatting inside it. + +{{< aside >}} +This is an aside element. + +You can use **markdown** formatting inside it. +{{}} +``` + +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! diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 71ee208..35c217f 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,5 +1,4 @@ {{ define "main" }} -{{ partial "head.html" }}

{{ .Title }}

{{ range .Pages.ByLastmod.Reverse }}

diff --git a/layouts/_default/rss.xml b/layouts/_default/rss.xml deleted file mode 100644 index 0e0e51c..0000000 --- a/layouts/_default/rss.xml +++ /dev/null @@ -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 "" | safeHTML }} -{{- printf "" | safeHTML -}} - - - {{ if eq .Title .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} on {{ end }}{{ .Site.Title }}{{ end }} - {{ .Permalink }} - Recent content {{ if ne .Title .Site.Title }}{{ with .Title }}in {{ . }} {{ end }}{{ end }}on {{ .Site.Title }} - Hugo - {{ site.Language.LanguageCode }}{{ with $authorEmail }} - {{.}}{{ with $authorName }} ({{ . }}){{ end }}{{ end }}{{ with $authorEmail }} - {{ . }}{{ with $authorName }} ({{ . }}){{ end }}{{ end }}{{ with .Site.Copyright }} - {{ . }}{{ end }}{{ if not .Date.IsZero }} - {{ (index $pages.ByLastmod.Reverse 0).Lastmod.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}{{ end }} - {{- with .OutputFormats.Get "RSS" }} - {{ printf "" .Permalink .MediaType | safeHTML }} - {{- end }} - {{- range $pages }} - - {{ .Title }} - {{ .Permalink }} - {{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }} - {{- with $authorEmail }}{{ . }}{{ with $authorName }} ({{ . }}){{ end }}{{ end }} - {{ .Permalink }} - {{ printf "" | safeHTML }} - - {{- end }} - - diff --git a/layouts/index.html b/layouts/index.html index aa901fc..c596063 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,17 +1,7 @@ {{ define "main" }} - +{{ partial "metadata.html" . }}

+{{ .Content }}
-
- {{ range where .Site.RegularPages "Section" "in" .Site.MainSections }} -
-

{{ .LinkTitle }}

- {{ partial "metadata.html" . }} -
- {{ .Summary }} -
-
- {{ end }} -
{{ end }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index dfc6f6b..b2eceb4 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -10,10 +10,4 @@ {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }} {{ $title }} {{ partial "hook_head_end.html" . }} - {{ if .IsHome }} - - {{ end }} - {{ if .IsPage }} - - {{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 32d66bd..7bcaaa8 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,27 +1,15 @@ +

{{ $.Site.Title }}

+

{{ $.Site.Params.subtitle }}

+ {{ $navbar_style := (default "classy" $.Site.Params.navbar_style) }} -

{{ $.Site.Title }}

-

{{ $.Site.Params.subtitle }}

-{{ else }} -Go Home -{{ $path := .Path }} -{{ $bpath := path.Dir $path }} -{{ if eq $bpath "/" }} -{{ else }} -Back to {{ $bpath }} -{{ end }} - -{{ end }} - diff --git a/layouts/partials/home-header.html b/layouts/partials/home-header.html deleted file mode 100644 index a37e40f..0000000 --- a/layouts/partials/home-header.html +++ /dev/null @@ -1 +0,0 @@ -{{ partial "header.html" }} diff --git a/layouts/partials/metadata.html b/layouts/partials/metadata.html index c7a229c..83f1b99 100644 --- a/layouts/partials/metadata.html +++ b/layouts/partials/metadata.html @@ -1,25 +1,19 @@ {{ $dateTime := .PublishDate.Format "2006-01-02" }} {{ $lastmodTime := .Lastmod.Format "2006-01-02" }} {{ $dateFormat := .Site.Params.dateFormat | default "Jan 2, 2006" }} -
{{ if .PublishDate }} - {{ if and (ne $lastmodTime $dateTime) (gt .Lastmod .Date) }} - - (first posted ) - {{ else }} - Date Published: - {{ end }} +{{ if and (ne $lastmodTime $dateTime) (gt .Lastmod .Date) }} + + (first posted ) +{{ else }} + +{{ end }} +{{ end }} +{{ with .Params.tags }} + +{{ range . }} +{{ $href := print "/tags/" (urlize .) }} +{{ . }} {{ end }} - {{ with .Params.tags }} -
- Tags: - {{ range . }} - {{ $href := print "/tags/" (urlize .) }} - {{ . }} - {{ end }} -
-{{ else }} - {{ end }} - diff --git a/static/css/homepage.css b/static/css/homepage.css deleted file mode 100644 index 50dbf7d..0000000 --- a/static/css/homepage.css +++ /dev/null @@ -1,58 +0,0 @@ -html, html[data-theme="light"] { - --background-color: snow; - --color: #000; - --scolor: #387f7e; -} - -html[data-theme="dark"] { - --background-color: #1f272d; - --color: #fff; - --tcolor: pink; - --scolor: #fff; -} -@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; - color: var(--scolor); -} -.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); -} diff --git a/static/css/page.css b/static/css/page.css deleted file mode 100644 index 38dde08..0000000 --- a/static/css/page.css +++ /dev/null @@ -1,3 +0,0 @@ -.metadata { - text-align: center; -} diff --git a/static/rss.xsl b/static/rss.xsl deleted file mode 100644 index 97ba4cf..0000000 --- a/static/rss.xsl +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - <xsl:value-of select="/rss/channel/title"/> Feed - - - - - - - -
-

-

RSS Feed preview

-
-
- - - -
- - - -