├── .github ├── dependabot.yml ├── stale.yml └── workflows │ └── ci.yml ├── .gitignore ├── .prettierignore ├── .prettierrc.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── archetypes ├── default.md └── homepage.md ├── assets ├── css │ ├── _index.scss │ ├── content.scss │ ├── fontawesome │ │ ├── LICENSE.txt │ │ ├── brands.min.css │ │ ├── fontawesome.min.css │ │ └── solid.min.css │ ├── fonts.css │ ├── generic.css │ ├── normalize.css │ ├── responsiveness.scss │ ├── theme.scss │ └── variables.scss └── js │ ├── css-vars-ponyfill.min.js │ ├── index.js │ └── jquery-3.6.3.min.js ├── contributing.md ├── exampleSite ├── assets │ ├── cover │ │ └── pexels-pressmaster-3209239-960x540-25fps.mp4 │ ├── favicon.ico │ └── images │ │ ├── apple-touch-icon.png │ │ ├── asset-happy-ethnic-woman-sitting-at-table-with-laptop-3769021.de.jpg │ │ ├── asset-happy-ethnic-woman-sitting-at-table-with-laptop-3769021.jpg │ │ ├── chef-hat.png │ │ ├── cover-image.jpg │ │ └── favicon.png ├── content │ ├── de │ │ ├── _index.md │ │ ├── de-happy-ethnic-woman-sitting-at-table-with-laptop-3769021.jpg │ │ ├── homepage │ │ │ ├── about-me-local-img.md │ │ │ ├── contact.md │ │ │ ├── external.md │ │ │ ├── index.md │ │ │ ├── legal-brief.md │ │ │ ├── license.md │ │ │ ├── opener.md │ │ │ └── services.md │ │ ├── legal.md │ │ ├── license.md │ │ └── services.md │ └── en │ │ ├── _index.md │ │ ├── homepage │ │ ├── about-me.de.md │ │ ├── about-me.md │ │ ├── contact.md │ │ ├── credits.md │ │ ├── external.md │ │ ├── index.md │ │ ├── legal-brief.md │ │ ├── license.md │ │ ├── opener.md │ │ └── services.md │ │ ├── legal.md │ │ ├── license.md │ │ └── services.md ├── hugo.toml ├── layouts │ └── partials │ │ ├── custom_head.html │ │ └── custom_header_video.html └── static │ └── images │ ├── board-bunch-cooking-food-349609.jpg │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── selective-focus-photography-of-pasta-with-tomato-and-basil-1279330.jpg │ ├── static-happy-ethnic-woman-sitting-at-table-with-laptop-3769021.jpg │ └── woman-pouring-juice-on-glass-3184192.jpg ├── i18n ├── de.toml └── en.toml ├── images ├── screenshot.png └── tn.png ├── layouts ├── 404.html ├── _default │ ├── baseof.html │ ├── index.html │ ├── list.html │ └── single.html ├── partials │ ├── custom_body.html │ ├── custom_head.html │ ├── custom_header_video.html │ ├── footer.html │ ├── head.html │ └── header.html └── shortcodes │ ├── contact_list.html │ ├── email.html │ ├── extlink.html │ ├── icon.html │ ├── phone.html │ └── rawhtml.html ├── netlify.toml ├── package-lock.json ├── package.json ├── static └── webfonts │ ├── fa-brands-400.ttf │ ├── fa-brands-400.woff2 │ ├── fa-regular-400.ttf │ ├── fa-regular-400.woff2 │ ├── fa-solid-900.ttf │ ├── fa-solid-900.woff2 │ ├── fa-v4compatibility.ttf │ ├── fa-v4compatibility.woff2 │ ├── open-sans-condensed-v21-latin-300.eot │ ├── open-sans-condensed-v21-latin-300.svg │ ├── open-sans-condensed-v21-latin-300.ttf │ ├── open-sans-condensed-v21-latin-300.woff │ ├── open-sans-condensed-v21-latin-300.woff2 │ ├── open-sans-condensed-v21-latin-300italic.eot │ ├── open-sans-condensed-v21-latin-300italic.svg │ ├── open-sans-condensed-v21-latin-300italic.ttf │ ├── open-sans-condensed-v21-latin-300italic.woff │ ├── open-sans-condensed-v21-latin-300italic.woff2 │ ├── open-sans-condensed-v21-latin-700.eot │ ├── open-sans-condensed-v21-latin-700.svg │ ├── open-sans-condensed-v21-latin-700.ttf │ ├── open-sans-condensed-v21-latin-700.woff │ ├── open-sans-condensed-v21-latin-700.woff2 │ ├── open-sans-v27-latin-300.eot │ ├── open-sans-v27-latin-300.svg │ ├── open-sans-v27-latin-300.ttf │ ├── open-sans-v27-latin-300.woff │ ├── open-sans-v27-latin-300.woff2 │ ├── open-sans-v27-latin-300italic.eot │ ├── open-sans-v27-latin-300italic.svg │ ├── open-sans-v27-latin-300italic.ttf │ ├── open-sans-v27-latin-300italic.woff │ ├── open-sans-v27-latin-300italic.woff2 │ ├── open-sans-v27-latin-600.eot │ ├── open-sans-v27-latin-600.svg │ ├── open-sans-v27-latin-600.ttf │ ├── open-sans-v27-latin-600.woff │ ├── open-sans-v27-latin-600.woff2 │ ├── open-sans-v27-latin-600italic.eot │ ├── open-sans-v27-latin-600italic.svg │ ├── open-sans-v27-latin-600italic.ttf │ ├── open-sans-v27-latin-600italic.woff │ ├── open-sans-v27-latin-600italic.woff2 │ ├── open-sans-v27-latin-700.eot │ ├── open-sans-v27-latin-700.svg │ ├── open-sans-v27-latin-700.ttf │ ├── open-sans-v27-latin-700.woff │ ├── open-sans-v27-latin-700.woff2 │ ├── open-sans-v27-latin-700italic.eot │ ├── open-sans-v27-latin-700italic.svg │ ├── open-sans-v27-latin-700italic.ttf │ ├── open-sans-v27-latin-700italic.woff │ ├── open-sans-v27-latin-700italic.woff2 │ ├── open-sans-v27-latin-800.eot │ ├── open-sans-v27-latin-800.svg │ ├── open-sans-v27-latin-800.ttf │ ├── open-sans-v27-latin-800.woff │ ├── open-sans-v27-latin-800.woff2 │ ├── open-sans-v27-latin-800italic.eot │ ├── open-sans-v27-latin-800italic.svg │ ├── open-sans-v27-latin-800italic.ttf │ ├── open-sans-v27-latin-800italic.woff │ ├── open-sans-v27-latin-800italic.woff2 │ ├── open-sans-v27-latin-italic.eot │ ├── open-sans-v27-latin-italic.svg │ ├── open-sans-v27-latin-italic.ttf │ ├── open-sans-v27-latin-italic.woff │ ├── open-sans-v27-latin-italic.woff2 │ ├── open-sans-v27-latin-regular.eot │ ├── open-sans-v27-latin-regular.svg │ ├── open-sans-v27-latin-regular.ttf │ ├── open-sans-v27-latin-regular.woff │ ├── open-sans-v27-latin-regular.woff2 │ ├── oswald-v40-latin-300.eot │ ├── oswald-v40-latin-300.svg │ ├── oswald-v40-latin-300.ttf │ ├── oswald-v40-latin-300.woff │ ├── oswald-v40-latin-300.woff2 │ ├── oswald-v40-latin-700.eot │ ├── oswald-v40-latin-700.svg │ ├── oswald-v40-latin-700.ttf │ ├── oswald-v40-latin-700.woff │ ├── oswald-v40-latin-700.woff2 │ ├── oswald-v40-latin-regular.eot │ ├── oswald-v40-latin-regular.svg │ ├── oswald-v40-latin-regular.ttf │ ├── oswald-v40-latin-regular.woff │ ├── oswald-v40-latin-regular.woff2 │ ├── roboto-slab-v16-latin-100.eot │ ├── roboto-slab-v16-latin-100.svg │ ├── roboto-slab-v16-latin-100.ttf │ ├── roboto-slab-v16-latin-100.woff │ ├── roboto-slab-v16-latin-100.woff2 │ ├── roboto-slab-v16-latin-300.eot │ ├── roboto-slab-v16-latin-300.svg │ ├── roboto-slab-v16-latin-300.ttf │ ├── roboto-slab-v16-latin-300.woff │ ├── roboto-slab-v16-latin-300.woff2 │ ├── roboto-slab-v16-latin-700.eot │ ├── roboto-slab-v16-latin-700.svg │ ├── roboto-slab-v16-latin-700.ttf │ ├── roboto-slab-v16-latin-700.woff │ ├── roboto-slab-v16-latin-700.woff2 │ ├── roboto-slab-v16-latin-regular.eot │ ├── roboto-slab-v16-latin-regular.svg │ ├── roboto-slab-v16-latin-regular.ttf │ ├── roboto-slab-v16-latin-regular.woff │ └── roboto-slab-v16-latin-regular.woff2 └── theme.toml /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # see https://docs.github.com/en/github/administering-a-repository/configuration-options-for-dependency-updates 2 | version: 2 3 | updates: 4 | # Maintain dependencies for GitHub Actions 5 | - package-ecosystem: "github-actions" 6 | directory: "/" 7 | schedule: 8 | interval: "daily" 9 | 10 | # Maintain dependencies for npm 11 | - package-ecosystem: "npm" 12 | directory: "/" 13 | schedule: 14 | interval: "daily" 15 | -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Number of days of inactivity before an issue becomes stale 2 | daysUntilStale: 90 3 | # Number of days of inactivity before a stale issue is closed 4 | daysUntilClose: 30 5 | # Issues with these labels will never be considered stale 6 | exemptLabels: 7 | - pinned 8 | - security 9 | - bug 10 | - priority-high 11 | exemptProjects: true 12 | exemptMilestones: true 13 | # Label to use when marking an issue as stale 14 | staleLabel: no-activity 15 | # Comment to post when marking an issue as stale. Set to `false` to disable 16 | markComment: false 17 | # Comment to post when closing a stale issue. Set to `false` to disable 18 | closeComment: false -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | pull_request: 8 | branches: 9 | - master 10 | 11 | jobs: 12 | build: 13 | runs-on: ubuntu-22.04 14 | 15 | steps: 16 | - name: Checkout 17 | uses: actions/checkout@v4 18 | 19 | - name: Setup Hugo 20 | uses: peaceiris/actions-hugo@v3.0.0 21 | with: 22 | hugo-version: latest 23 | extended: true 24 | 25 | - name: Build local ./exampleSite 26 | run: hugo --minify --gc --destination ../public --source ./exampleSite --themesDir ../.. --baseURL https://zjedi.github.io/hugo-scroll/ 27 | 28 | - name: Deploy to GitHub Pages 29 | if: github.event_name == 'push' 30 | uses: peaceiris/actions-gh-pages@v4.0.0 31 | with: 32 | github_token: ${{ secrets.GITHUB_TOKEN }} 33 | publish_dir: ./public 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | public 2 | exampleSite/public 3 | exampleSite/resources 4 | node_modules 5 | *.lock 6 | hugo-scroll.code-workspace 7 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | assets/css/fontawesome 2 | assets/css/normalize.css 3 | layouts/_default/index.html 4 | public 5 | resources 6 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "overrides": [ 3 | { 4 | "files": ["*.html"], 5 | "options": { 6 | "parser": "go-template" 7 | } 8 | } 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | * Added for new features. 9 | * Changed for changes in existing functionality. 10 | * Deprecated for soon-to-be removed features. 11 | * Removed for now removed features. 12 | * Fixed for any bug fixes. 13 | * Security in case of vulnerabilities. 14 | 15 | ## [Unreleased](https://github.com/zjedi/hugo-scroll/compare/v.1.0.0...master) 16 | 17 | * **JS cleanup / CSS refactoring**, possibly causing some pain if you have extensive CSS customisations in screen.css #4, #61, #102. For backwards compatibility, a released tag `v1.0.0` was created just in case some projects needed to fix the legacy version. However, I won't actively support the legacy branch. 18 | * New features: #70 , #46 , #118 19 | * More features #116 , #119 20 | 21 | ## [1.0.0 Legacy Snapshot](https://github.com/zjedi/hugo-scroll/releases/tag/v.1.0.0) 22 | 23 | ## Template for new releases 24 | 25 | ## [x.y.z](https://github.com/zjedi/hugo-scroll/compare/v1.0.0...vx.y.z) 26 | 27 | ### Added 28 | 29 | ### Changed 30 | 31 | ### Deprecated 32 | 33 | ### Removed 34 | 35 | ### Fixed 36 | 37 | ### Security 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 Jan Raasch 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Hugo Scroll 📜 Demo

2 | 3 | Clean, responsive, single-page [Hugo](https://gohugo.io/) website theme. 4 | 5 | [![hugo-scroll](https://img.shields.io/badge/Hugo--Themes-HugoScroll-blue)](https://themes.gohugo.io/themes/hugo-scroll/) 6 | ![Test](https://github.com/zjedi/hugo-scroll/workflows/CI/badge.svg?branch=master&event=push) 7 | [![Netlify Status](https://api.netlify.com/api/v1/badges/a56faf45-76fa-4bdf-b9d4-35cfc7d620cf/deploy-status)](https://app.netlify.com/sites/hugo-scroll/deploys) 8 | [![GitHub](https://img.shields.io/github/license/zjedi/hugo-scroll)](https://github.com/zjedi/hugo-scroll/blob/master/LICENSE) 9 | ![code-size](https://img.shields.io/github/languages/code-size/zjedi/hugo-scroll) 10 | 11 | Promo image which may be a bit outdated:
12 | ![Screenshot Hugo Scroll Theme](https://raw.githubusercontent.com/zjedi/hugo-scroll/master/images/tn.png) 13 | 14 | ## ⭐ Feature highlights 15 | 16 | - Responsive to screen size/shape 17 | - SEO friendly 18 | - Customizable 19 | - Video cover 20 | - [Font Awesome v6.6.0 Icons][font-awesome-icons] out of the box 21 | - Header logo 22 | - Visual guards to guarantee readability 23 | - External links 24 | - JS/CSS Assets optimized (Minification, Fingerprinting, pipeline-processed 25 | into single file) 26 | - git info in footer (opt-in) 27 | 28 | ## 🔑 Installation 29 | 30 | You need to install Hugo extended version. 31 | If you already have a Hugo site on your machine, you can simply add this theme via 32 | 33 | ```cli 34 | git submodule add https://github.com/zjedi/hugo-scroll.git themes/hugo-scroll 35 | ``` 36 | 37 | Then, adjust the `hugo.toml` as detailed below & in the file comments. 38 | 39 | ### Playing around with our example site 40 | 41 | If you simply want to check out the `exampleSite`, you can run 42 | 43 | ```cli 44 | git clone https://github.com/zjedi/hugo-scroll.git hugo-scroll 45 | cd hugo-scroll 46 | hugo server --source=exampleSite --themesDir=../.. 47 | ``` 48 | 49 | For more information, read the official [Hugo setup guide][hugo-setup-guide]. 50 | 51 | If you are starting fresh, simply copy over the contents of the `exampleSite`-directory included in this theme to your source directory. That should give you a good idea about how things work, and then you can go on from there to make the site your own. 52 | 53 | Please check out the [hugo.toml](https://github.com/zjedi/hugo-scroll/blob/master/exampleSite/hugo.toml) included in the [exampleSite](https://github.com/zjedi/hugo-scroll/tree/master/exampleSite) of this theme. 54 | 55 | You can add **a new section to the homepage** by running `hugo new homepage/my-new-content.md` (or craft the file manually) 56 | 57 | To create **a page separate from the homepage**, run `hugo new my-new-page.md` 58 | 59 | ## 🔧 Feature details 🔨 60 | 61 | ### Customizing CSS 62 | 63 | Add a [`custom_head.html`](https://github.com/zjedi/hugo-scroll/blob/master/exampleSite/layouts/partials/custom_head.html) file to your `layouts/partials` directory. 64 | 65 | - You can use ` 24 | --> 25 | 26 | 31 | 32 | 33 | 34 | 37 | 38 | 40 | 41 | {{ with resources.Get "images/apple-touch-icon.png" }}{{ end }} 42 | {{ with resources.Get "images/favicon.svg" }}{{ end }} 43 | {{ range seq 9 4 }}{{ $size := pow 2 . }}{{ $file := replace "images/favicon-##x##.png" "##" $size }}{{ with resources.Get $file }} 44 | {{ end }}{{ end }} 45 | 46 | -------------------------------------------------------------------------------- /exampleSite/layouts/partials/custom_header_video.html: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /exampleSite/static/images/board-bunch-cooking-food-349609.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zjedi/hugo-scroll/811e1f2b542a3bb371c18dea8b26e0dc52c95f1c/exampleSite/static/images/board-bunch-cooking-food-349609.jpg -------------------------------------------------------------------------------- /exampleSite/static/images/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zjedi/hugo-scroll/811e1f2b542a3bb371c18dea8b26e0dc52c95f1c/exampleSite/static/images/favicon-16x16.png -------------------------------------------------------------------------------- /exampleSite/static/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zjedi/hugo-scroll/811e1f2b542a3bb371c18dea8b26e0dc52c95f1c/exampleSite/static/images/favicon-32x32.png -------------------------------------------------------------------------------- /exampleSite/static/images/selective-focus-photography-of-pasta-with-tomato-and-basil-1279330.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zjedi/hugo-scroll/811e1f2b542a3bb371c18dea8b26e0dc52c95f1c/exampleSite/static/images/selective-focus-photography-of-pasta-with-tomato-and-basil-1279330.jpg -------------------------------------------------------------------------------- /exampleSite/static/images/static-happy-ethnic-woman-sitting-at-table-with-laptop-3769021.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zjedi/hugo-scroll/811e1f2b542a3bb371c18dea8b26e0dc52c95f1c/exampleSite/static/images/static-happy-ethnic-woman-sitting-at-table-with-laptop-3769021.jpg -------------------------------------------------------------------------------- /exampleSite/static/images/woman-pouring-juice-on-glass-3184192.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zjedi/hugo-scroll/811e1f2b542a3bb371c18dea8b26e0dc52c95f1c/exampleSite/static/images/woman-pouring-juice-on-glass-3184192.jpg -------------------------------------------------------------------------------- /i18n/de.toml: -------------------------------------------------------------------------------- 1 | [email] 2 | other = "Email" 3 | 4 | [phone] 5 | other = "Telefon" 6 | -------------------------------------------------------------------------------- /i18n/en.toml: -------------------------------------------------------------------------------- 1 | [email] 2 | other = "Email" 3 | 4 | [phone] 5 | other = "Phone" 6 | -------------------------------------------------------------------------------- /images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zjedi/hugo-scroll/811e1f2b542a3bb371c18dea8b26e0dc52c95f1c/images/screenshot.png -------------------------------------------------------------------------------- /images/tn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zjedi/hugo-scroll/811e1f2b542a3bb371c18dea8b26e0dc52c95f1c/images/tn.png -------------------------------------------------------------------------------- /layouts/404.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |
4 |
5 | 8 |
9 |

404 - Page Not Found

10 |
11 | Give it another try: 12 | Back to the homepage. 13 |
14 |
15 |
16 | {{ end }} 17 | -------------------------------------------------------------------------------- /layouts/_default/baseof.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{- partial "head.html" . -}} 5 | 6 | 7 | {{- partial "header.html" . -}} 8 | {{- block "main" . }}{{- end }} 9 | {{- partial "footer.html" . -}} 10 | 11 | 12 | 13 | {{ $scriptJquery := resources.Get "js/jquery-3.6.3.min.js" }} 14 | 15 | 16 | {{ $scriptIndex := resources.Get "js/index.js" }} 17 | {{ $scriptPolyfill := resources.Get "js/css-vars-ponyfill.min.js" }} 18 | {{ $js := slice $scriptJquery $scriptIndex $scriptPolyfill | resources.Concat "js/script.js" | resources.Minify | resources.Fingerprint }} 19 | 20 | 21 | 22 | 23 | 24 | 25 | 28 | {{- partial "custom_body.html" . -}} 29 | 30 | 31 | -------------------------------------------------------------------------------- /layouts/_default/index.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 | {{ $headless := .GetPage "./homepage" }} 3 | {{ if hugo.IsMultihost }} 4 | {{ $headless := .Site.GetPage "/homepage" }} 5 | {{ end }} 6 | {{ $sections := $headless.Resources.ByType "page" }} 7 | {{ $sections := cond .Site.BuildDrafts $sections (where $sections "Draft" "==" false) }} 8 | {{ $content := where (where $sections "Params.external" "==" nil) "Params.detailed_page_homepage_content" "ne" false }} 9 | {{ $langs := .Page.AllTranslations }} 10 | {{ if hugo.IsMultihost }} 11 | {{ $langs = .Site.Languages }} 12 | {{ end }} 13 | 14 | 15 | {{ if not .Params.header_use_video }} 16 | {{ with $img := resources.Get .Params.header_image }} 17 | {{ $image_options := $.Site.Params.image_options | default "webp q90 lanczos photo" -}} 18 | 54 | {{ end }} 55 |