diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml index 5b310d3..6e5d609 100644 --- a/.github/workflows/gh-pages.yml +++ b/.github/workflows/gh-pages.yml @@ -4,27 +4,49 @@ on: push: branches: - main + pull_request: + +concurrency: + group: pages-${{ github.ref }} + cancel-in-progress: true jobs: - build-deploy: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Install Dart Sass + run: sudo snap install dart-sass + + - name: Setup Hugo + uses: peaceiris/actions-hugo@v3 + with: + hugo-version: 'latest' + extended: true + + - name: Build + working-directory: ./exampleSite + run: hugo --minify --themesDir ../.. --baseURL https://normanderwan.github.io/Blogpaper/ + + - name: Upload artifact + if: github.ref == 'refs/heads/main' + uses: actions/upload-pages-artifact@v3 + with: + path: ./exampleSite/public + + deploy: + if: github.ref == 'refs/heads/main' + needs: build runs-on: ubuntu-latest + permissions: + pages: write + id-token: write + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} steps: - - name: Checkout - uses: actions/checkout@v1 - - - name: Setup Hugo - uses: peaceiris/actions-hugo@v2 - with: - hugo-version: 'latest' - extended: true - - - name: Build - working-directory: ./exampleSite - run: hugo --minify --themesDir ../.. --baseURL https://normanderwan.github.io/Blogpaper/ - - - name: Deploy - uses: peaceiris/actions-gh-pages@v2 - env: - PERSONAL_TOKEN: ${{ secrets.PersonalAccessToken }} - PUBLISH_BRANCH: gh-pages - PUBLISH_DIR: ./exampleSite/public + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.gitignore b/.gitignore index 454f814..5b47d21 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,10 @@ # Hugo default output directory **/public +# Hugo build artifacts +**/.hugo_build.lock +**/resources/_gen/ + # Hugo binaries for local testing bin diff --git a/LICENSE.md b/LICENSE.md index 76f75df..c7086ea 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2019-2020 Erwan Normand +Copyright (c) 2019-2026 Erwan Normand Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in diff --git a/README.md b/README.md index 6dc8b4c..5d6fa7a 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ See the [style guide](https://normanderwan.github.io/Blogpaper/posts/style-guide git submodule add https://github.com/NormandErwan/Blogpaper themes/Blogpaper ``` -4. Edit your `config.yml`: +4. Edit your `hugo.yaml`: ```yml theme: Blogpaper @@ -43,27 +43,27 @@ the next section to configure your site and add banner images on your pages. ## Configure -1. Edit your `config.yml`: +1. Edit your `hugo.yaml`: ```yml theme: Blogpaper title: # Your site title - author: - name: # Your name baseURL: # Hostname (and path) to the root, e.g. https://bep.is/ copyright: # Optional, will be displayed on site's footer, if this line is removed an default copyright will be generated languageCode: en # The language code of your site, by default "en" - menu: + menus: main: # Optional, the menu to display on top-right of your site, see https://gohugo.io/templates/menu-templates/#site-config-menus - name: About url: /about params: description: # The description of your site (used on a tag) subtitleLength: 25 # The number of words on the subtitle of a page + author: + name: # Your name ``` See for more configuration settings (such as `datetimeFormat`, - `mainSections` or `paginate`). + `mainSections` or `pagination.pagerSize`). See also how to configure [post summaries](https://gohugo.io/content-management/summaries/) on the homepage. Every page can have a subtitle, displayed bellow the title on the header of the page. @@ -122,8 +122,8 @@ the next section to configure your site and add banner images on your pages. ## Troubleshooting / FAQ - I can't generate the site. - - Problem: I have the error: `Problem: Building sites … ERROR Transformation failed: TOCSS: failed to transform "blogpaper.scss" (text/x-scss)`. - - Solution: [Reinstall Hugo](https://gohugo.io/getting-started/installing/), the *extended* version not the standard one. + - Problem: I have the error: `Error: error building site: SASS: failed to transform "blogpaper.scss"`. + - Solution: Install [Dart Sass](https://sass-lang.com/install/) and make sure it's on your `PATH`. This theme requires Dart Sass, not the deprecated LibSass. Also ensure you're using the [Hugo extended](https://gohugo.io/getting-started/installing/) version. - I want to customize the CSS. - Use your own CSS or SCSS files. Simply add the files in your `/assets/` folder. diff --git a/archetypes/posts.md b/archetypes/posts.md index 9945b66..ed9142a 100644 --- a/archetypes/posts.md +++ b/archetypes/posts.md @@ -8,7 +8,7 @@ categories: # Optional, will be displayed above the title of the page tags: # Optional, will be displayed at the bottom end of the post - First tag - Second tag -summary: # Optional, will be diplayed on the homepage; remove this line to generate an automatic summary (see https://gohugo.io/content-management/summaries/) +summary: # Optional, will be displayed on the homepage; remove this line to generate an automatic summary (see https://gohugo.io/content-management/summaries/) draft: true banner: #src: {{ .TranslationBaseName }}.jpg # Optional, the filename of the banner, by default {{ .TranslationBaseName }}.jpg diff --git a/assets/css/blogpaper.scss b/assets/css/blogpaper.scss index 1a850c0..41fc2be 100644 --- a/assets/css/blogpaper.scss +++ b/assets/css/blogpaper.scss @@ -1,5 +1,7 @@ +@use "sass:color"; + @function to-rgb($hex) { - @return red($hex), green($hex), blue($hex); + @return color.channel($hex, "red", $space: rgb), color.channel($hex, "green", $space: rgb), color.channel($hex, "blue", $space: rgb); } @mixin set-links-color($color-rgb, $link-underline-opacity, $color-opacity: 1) { @@ -17,18 +19,24 @@ --color-background: #fff; --color-text: #333; --color-text-rgb: #{to-rgb(#333)}; - --color-metadata: #666; - --color-metadata-rgb: #{to-rgb(#666)}; + --color-metadata: #595959; + --color-metadata-rgb: #{to-rgb(#595959)}; --color-link-underline-opacity: 0.5; --font-family: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", Times, serif; --font-family-metadata: system-font; --font-size: 2rem; - --font-line-height: 2; + --font-line-height: 1.75; --inline-list__item-margin-left: 2rem; --container-padding: 1rem; + --transition-duration: 200ms; + --transition-easing: ease; + --border-radius: 0.25rem; + --focus-outline-width: 2px; + --focus-outline-offset: 3px; + --nav-max-width: 100rem; --nav-height: 8rem; @@ -76,6 +84,7 @@ font-family: system-font; font-style: normal; font-weight: 400; + font-display: swap; src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma"); } @@ -101,6 +110,34 @@ body { color: var(--color-text); } +/* Skip to content */ + +.skip-to-content { + position: absolute; + left: -9999px; + width: 1px; + height: 1px; + overflow: hidden; + + &:focus-visible { + position: fixed; + top: 0.5rem; + left: 0.5rem; + width: auto; + height: auto; + overflow: visible; + padding: 0.5rem 1rem; + background: var(--color-background); + color: var(--color-text); + border: var(--focus-outline-width) solid var(--color-text); + border-radius: var(--border-radius); + font-family: var(--font-family-metadata); + font-size: calc(0.8 * var(--font-size)); + text-decoration: none; + z-index: 9999; + } +} + /* General items */ a { @@ -113,6 +150,12 @@ a { } } +:focus-visible { + outline: var(--focus-outline-width) solid var(--color-text); + outline-offset: var(--focus-outline-offset); + border-radius: var(--border-radius); +} + .banner { position: relative; margin: 0; @@ -354,3 +397,54 @@ a { font-size: var(--footer-font-size); margin-top: var(--footer-margin-top); } + +/* Dark mode */ + +@media (prefers-color-scheme: dark) { + :root { + --color-background: #1a1a1a; + --color-text: #e8e8e8; + --color-text-rgb: #{to-rgb(#e8e8e8)}; + --color-metadata: #a8a8a8; + --color-metadata-rgb: #{to-rgb(#a8a8a8)}; + --header--main-color-background: #111; + --table__tr-border-bottom: 1px solid #444; + } +} + +/* Print */ + +@media print { + .nav, + .footer--main { + display: none; + } + + .header--main { + background: none; + color: inherit; + padding-top: 0; + } + + .header--main .banner { + display: none; + } + + a { + color: inherit; + border-bottom: none; + text-decoration: underline; + } +} + +/* Reduced motion */ + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + transition-duration: 0.01ms !important; + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + } +} diff --git a/exampleSite/content/posts/rich-content/index.md b/exampleSite/content/posts/rich-content/index.md index 585454e..1e14065 100644 --- a/exampleSite/content/posts/rich-content/index.md +++ b/exampleSite/content/posts/rich-content/index.md @@ -25,14 +25,6 @@ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-manageme --- -## Twitter Simple Shortcode +## Vimeo Shortcode -{{< twitter_simple 1085870671291310081 >}} - -
- ---- - -## Vimeo Simple Shortcode - -{{< vimeo_simple 48912912 >}} +{{< vimeo 48912912 >}} diff --git a/exampleSite/content/posts/style-guide/index.md b/exampleSite/content/posts/style-guide/index.md index 8338bd8..1012c9a 100644 --- a/exampleSite/content/posts/style-guide/index.md +++ b/exampleSite/content/posts/style-guide/index.md @@ -154,7 +154,7 @@ Table examples are from here: }} +{{< vimeo 137643135 >}} [This Mountain](https://vimeo.com/137643135) from [Evan Mann / OWP Denver](https://vimeo.com/evanmann) on [Vimeo](https://vimeo.com). diff --git a/exampleSite/config.yml b/exampleSite/hugo.yaml similarity index 66% rename from exampleSite/config.yml rename to exampleSite/hugo.yaml index 5437238..e02d8cb 100644 --- a/exampleSite/config.yml +++ b/exampleSite/hugo.yaml @@ -1,12 +1,19 @@ -author: - name: Erwan Normand baseURL: https://example.com languageCode: en -menu: +title: Blogpaper +theme: Blogpaper + +markup: + goldmark: + renderer: + unsafe: true + +params: + description: Example site for the Hugo's Blogpaper theme + author: + name: Erwan Normand + +menus: main: - name: About url: /about -params: - description: Example site for the Hugo's Blogpaper theme -title: Blogpaper -theme: Blogpaper diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 38a5ccf..1142065 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -2,10 +2,11 @@ {{ partial "head" . }} + {{ partial "nav" . }} -
+
{{- block "main" . -}}{{- end -}}
{{ partial "footer" . }} - \ No newline at end of file + diff --git a/layouts/partials/banner-figure.html b/layouts/partials/banner-figure.html index ef7714a..bc49486 100644 --- a/layouts/partials/banner-figure.html +++ b/layouts/partials/banner-figure.html @@ -3,7 +3,7 @@ {{- end -}} - {{ .alt }} + {{ .alt }} {{- with .page_href -}} @@ -13,7 +13,7 @@
{{- with .href -}} - + {{- end -}} {{- with .caption -}} {{ . }} {{- end -}} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 12f8577..2dc068f 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -3,7 +3,7 @@ {{- with .Site.Copyright -}} {{ . }} {{- else -}} - © {{ now.Year }} {{- with .Site.Author }} {{ .name }}. {{- end }} {{ .Site.Title }} + © {{ now.Year }} {{- with .Site.Params.author }} {{ .name }}. {{- end }} {{ .Site.Title }} {{- end -}} {{- end }} \ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 60a292d..6cdbf62 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -1,7 +1,6 @@ - {{- block "title" . -}} @@ -10,12 +9,48 @@ {{- end -}} - {{- with .Description }} + {{- $description := .Description | default .Site.Params.description -}} + {{- with $description }} - {{- else -}} - {{- with .Site.Params.description }} - - {{- end -}} + {{- end }} + + + + {{/* Open Graph */}} + + + + {{- if .IsPage }} + + + + {{- else }} + + {{- end }} + {{- with $description }} + + {{- end }} + + {{/* Twitter / X Card */}} + + + {{- with $description }} + + {{- end }} + {{- with .Site.Params.twitterHandle }} + + {{- end }} + + {{/* JSON-LD structured data */}} + {{- if .IsHome -}} + {{- $schema := dict "@context" "https://schema.org" "@type" "WebSite" "name" .Site.Title "url" (.Site.BaseURL | absURL) -}} + {{- with .Site.Params.description }}{{- $schema = merge $schema (dict "description" .) -}}{{- end }} + + {{- else if .IsPage -}} + {{- $schema := dict "@context" "https://schema.org" "@type" "BlogPosting" "headline" .Title "url" .Permalink "datePublished" (.PublishDate.Format `2006-01-02T15:04:05Z07:00`) "dateModified" (.Lastmod.Format `2006-01-02T15:04:05Z07:00`) -}} + {{- with .Site.Params.author }}{{- $schema = merge $schema (dict "author" (dict "@type" "Person" "name" .name)) -}}{{- end }} + {{- with $description }}{{- $schema = merge $schema (dict "description" .) -}}{{- end }} + {{- end }} {{- range .AlternativeOutputFormats }} @@ -32,7 +67,7 @@ {{- $scss_files := $scss_files | append (where (resources.Match "**.scss") ".Name" "!=" $blogpaper_scss_filepath) -}} {{- range $scss_files -}} - {{- $css := . | resources.ExecuteAsTemplate .Name . | toCSS (dict "outputStyle" "compressed") -}} + {{- $css := . | resources.ExecuteAsTemplate .Name . | css.Sass (dict "outputStyle" "compressed" "transpiler" "dartsass") -}} {{- $css_files = $css_files | append $css -}} {{- end -}} diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index 293fe8c..f2e67b2 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -1,7 +1,7 @@ - diff --git a/theme.toml b/theme.toml index abf29bb..387e48b 100644 --- a/theme.toml +++ b/theme.toml @@ -14,7 +14,7 @@ features = [ "minimalist", "graphical" ] -min_version = 0.48 +min_version = 0.128 [author] name = "Erwan Normand"