🔖 Release v1.3.0

Closes: #53

.github/dependabot.yml

@@ -0,0 +1,26 @@
+# GitHub Dependabot
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
+      time: "09:00"
+      timezone: "Australia/Melbourne"
+    commit-message:
+      prefix: "📌"
+    labels:
+      - "dependencies"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "sunday"
+      time: "09:00"
+      timezone: "Australia/Melbourne"
+    commit-message:
+      prefix: "👷"
+    labels:
+      - "dependencies"

.github/pull_request_template.md

@@ -0,0 +1,2 @@
+<!-- IMPORTANT! Before submitting, ensure you have followed the Contributing guidelines. -->
+<!-- https://github.com/jpanther/lynx/blob/dev/CONTRIBUTING.md -->

.github/workflows/build-theme.yml

@@ -0,0 +1,25 @@
+name: Build Theme
+
+on: [pull_request_target]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    if: ${{ github.actor == 'dependabot[bot]' }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: "${{ github.head_ref }}"
+      - name: Install dependencies and Build Theme
+        uses: actions/setup-node@v3
+      - run: npm install
+      - run: npm run build
+      - name: Commit CSS changes
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          branch: "${{ github.head_ref }}"
+          push_options: "--dry-run"
+          file_pattern: "assets/css/compiled/main.css"
+          commit_message: "💄 Rebuild CSS"
+      - run: git push

.github/workflows/gh-pages.yml

@@ -7,12 +7,13 @@ on:
 
 jobs:
   build-deploy:
+    name: Build and Deploy
     runs-on: ubuntu-20.04
     concurrency:
       group: ${{ github.workflow }}-${{ github.ref }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           submodules: true
           fetch-depth: 0

.github/workflows/label.yml

@@ -4,6 +4,7 @@ on: [pull_request_target]
 
 jobs:
   label:
+    name: Label
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -11,7 +12,7 @@ jobs:
 
     steps:
       - name: Label
-        uses: actions/labeler@v3
+        uses: actions/labeler@v4
         with:
           repo-token: "${{ secrets.GITHUB_TOKEN }}"
           configuration-path: .github/labeller.yml

.github/workflows/stale.yml

@@ -0,0 +1,30 @@
+name: "Close stale issues and PRs"
+on:
+  schedule:
+    - cron: "30 1 * * *"
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - uses: actions/stale@v8
+        with:
+          days-before-stale: 30
+          days-before-close: 14
+          stale-issue-label: "stale"
+          stale-pr-label: "stale"
+          stale-issue-message: >
+            This issue has been automatically marked as stale because it has not had any recent activity.
+
+            If you are still experiencing this issue, please review the issue history and add a reply with any requested and/or additional information in order to keep the issue open.
+
+            This issue will automactically close in 14 days if no further activity occurs.
+          stale-pr-message: >
+            This pull request has been automatically marked as stale because it has not had any recent activity.
+
+            Please review the PR history and add a reply with any requested information. If no information has been requested, it may be that this contribution does not fit with the project objectives, or does not adhere to the [contributing guidelines](https://github.com/jpanther/lynx/blob/dev/CONTRIBUTING.md). If this is in error, please add a reply with further details.
+
+            This PR will automactically close in 14 days if no further activity occurs.

.github/workflows/test-build.yml

@@ -1,15 +1,16 @@
 name: Test Build
 
-on: [push, pull_request]
+on: [push]
 
 jobs:
   build:
+    name: Build Example Site
     runs-on: ubuntu-20.04
     concurrency:
       group: ${{ github.workflow }}-${{ github.ref }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           submodules: true
           fetch-depth: 0

.gitignore

@@ -1,145 +1,23 @@
-
-# Created by https://www.toptal.com/developers/gitignore/api/node,
-# Edit at https://www.toptal.com/developers/gitignore?templates=node,
-
 ### Node ###
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
 # Dependency directories
 node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-.env.production
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
-
-### Node Patch ###
-# Serverless Webpack directories
-.webpack/
-
-# End of https://www.toptal.com/developers/gitignore/api/node,
-
-# Created by https://www.toptal.com/developers/gitignore/api/hugo
-# Edit at https://www.toptal.com/developers/gitignore?templates=hugo
 
 ### Hugo ###
 # Generated files by hugo
-/public/
-/resources/_gen/
-.hugo_build.lock
+**/public/
+**/resources/_gen/
 
 # Executable may be added to repository
 hugo.exe
 hugo.darwin
 hugo.linux
 
-# End of https://www.toptal.com/developers/gitignore/api/hugo
+# Temporary lock file while building
+.hugo_build.lock
+
+### Congo ###
+# Lighthouse generated output
+.lighthouseci
+
+# Project specific files
+TODO

.prettierrc

@@ -1,4 +1,5 @@
 {
+  "goTemplateBracketSpacing": true,
   "htmlWhitespaceSensitivity": "css",
   "printWidth": 100,
   "singleQuote": false,

CHANGELOG.md

@@ -7,6 +7,66 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.0] - 2023-06-04
+
+### Added
+
+- Support for Stack Exchange and Stack Overflow ([#52](https://github.com/jpanther/lynx/pull/52))
+
+### Changed
+
+- Updated GitLab icon
+- Upgrade to Tailwind v3.3.2 ([#74](https://github.com/jpanther/lynx/pull/74))
+
+### Fixed
+
+- Error building site when using Hugo v0.112.0 or later ([#73](https://github.com/jpanther/lynx/issues/73))
+
+## [1.2.4] - 2023-01-18
+
+### Changed
+
+- Upgrade to Typography v0.5.9 ([#41](https://github.com/jpanther/lynx/pull/41))
+
+## [1.2.3] - 2023-01-09
+
+### Changed
+
+- Updated Mastodon link colour in line with branding changes ([#36](https://github.com/jpanther/lynx/pull/36))
+
+## [1.2.2] - 2022-11-22
+
+### Changed
+
+- Upgrade to Tailwind v3.2.4 ([#30](https://github.com/jpanther/lynx/pull/30))
+- Upgrade to Typography v0.5.8 ([#23](https://github.com/jpanther/lynx/pull/23), [#27](https://github.com/jpanther/lynx/pull/27))
+
+## [1.2.1] - 2022-08-19
+
+### Changed
+
+- Upgrade to Tailwind v3.1.8 ([#12](https://github.com/jpanther/lynx/pull/12), [#18](https://github.com/jpanther/lynx/pull/18))
+- Upgrade to Typography v0.5.4 ([#16](https://github.com/jpanther/lynx/pull/16))
+
+### Fixed
+
+- Home link not pointing to correct URL when site deployed in a sub-directory
+
+## [1.2.0] - 2022-06-17
+
+### Added
+
+- Support for new author `headline` parameter
+- Automatic author image resizing when image is provided as a Hugo asset
+- Alt text to author image ([#8](https://github.com/jpanther/lynx/pull/8))
+- Expanded Emoji support in page titles
+
+### Changed
+
+- Upgrade to Tailwind v3.1.3 and Typography v0.5.2
+- Adjusted contrast of certain text to improve accessibility
+- All CSS is now bundled into a single file for better performance
+
 ## [1.1.0] - 2021-11-06
 
 ### Added
@@ -33,6 +93,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fathom Analytics and Google Analytics support
 - Favicons support
 
-[unreleased]: https://github.com/jpanther/lynx/compare/v1.1.0...HEAD
+[Unreleased]: https://github.com/jpanther/lynx/compare/v1.3.0...HEAD
+[1.3.0]: https://github.com/jpanther/lynx/compare/v1.2.4...v1.3.0
+[1.2.4]: https://github.com/jpanther/lynx/compare/v1.2.3...v1.2.4
+[1.2.3]: https://github.com/jpanther/lynx/compare/v1.2.2...v1.2.3
+[1.2.2]: https://github.com/jpanther/lynx/compare/v1.2.1...v1.2.2
+[1.2.1]: https://github.com/jpanther/lynx/compare/v1.2.0...v1.2.1
+[1.2.0]: https://github.com/jpanther/lynx/compare/v1.1.0...v1.2.0
 [1.1.0]: https://github.com/jpanther/lynx/compare/v1.0.0...v1.1.0
 [1.0.0]: https://github.com/jpanther/lynx/releases/tags/v1.0.0

README.md

@@ -10,8 +10,7 @@ Lynx is designed to be a simple links page powered by [Hugo](https://gohugo.io).
 
 ## Features
 
-- Built with Tailwind CSS JIT for minified stylesheets without any excess code
-- Fully responsive layout
+- Fully responsive layout built with Tailwind CSS 3.0
 - Dark mode (auto-switching based upon browser)
 - SVG icons from FontAwesome 5
 - HTML and Emoji support

assets/css/main.css

@@ -1,4 +1,4 @@
-/*! Lynx v1.1.0 | MIT License | https://github.com/jpanther/lynx */
+/*! Lynx v1.3.0 | MIT License | https://github.com/jpanther/lynx */
 
 @tailwind base;
 @tailwind components;
@@ -11,7 +11,7 @@
 
 /* Links */
 .link {
-  @apply text-white bg-primary-700 hover:brightness-90;
+  @apply bg-primary-700 text-white hover:brightness-90;
 }
 
 .link-amazon {
@@ -69,7 +69,7 @@
   background-color: #0077b5;
 }
 .link-mastodon {
-  background-color: #338cd4;
+  background-color: #6364ff;
 }
 .link-medium {
   background-color: #00ab6c;
@@ -119,7 +119,7 @@
   background-color: #9146ff;
 }
 .link-twitter {
-  background-color: #1da1f2;
+  background-color: rgb(63, 136, 222);
 }
 .link-whatsapp {
   background-color: #45d82c;
@@ -128,11 +128,17 @@
 .link-youtube {
   background-color: #ff0000;
 }
+.link-stack-exchange {
+  background-color: #0095ff;
+}
+.link-stack-overflow {
+  background-color: #f48024;
+}
 
 /* -- Chroma Highlight -- */
 /* Background */
 .prose .chroma {
-  @apply rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
+  @apply rounded-md bg-neutral-50 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200;
 }
 
 @tailwind utilities;

assets/icons/gitlab.svg

@@ -1 +1 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="gitlab" class="svg-inline--fa fa-gitlab fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M105.2 24.9c-3.1-8.9-15.7-8.9-18.9 0L29.8 199.7h132c-.1 0-56.6-174.8-56.6-174.8zM.9 287.7c-2.6 8 .3 16.9 7.1 22l247.9 184-226.2-294zm160.8-88l94.3 294 94.3-294zm349.4 88l-28.8-88-226.3 294 247.9-184c6.9-5.1 9.7-14 7.2-22zM425.7 24.9c-3.1-8.9-15.7-8.9-18.9 0l-56.6 174.8h132z"></path></svg>
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="gitlab" class="svg-inline--fa fa-gitlab fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M503.5 204.6L502.8 202.8L433.1 21.02C431.7 17.45 429.2 14.43 425.9 12.38C423.5 10.83 420.8 9.865 417.9 9.57C415 9.275 412.2 9.653 409.5 10.68C406.8 11.7 404.4 13.34 402.4 15.46C400.5 17.58 399.1 20.13 398.3 22.9L351.3 166.9H160.8L113.7 22.9C112.9 20.13 111.5 17.59 109.6 15.47C107.6 13.35 105.2 11.72 102.5 10.7C99.86 9.675 96.98 9.295 94.12 9.587C91.26 9.878 88.51 10.83 86.08 12.38C82.84 14.43 80.33 17.45 78.92 21.02L9.267 202.8L8.543 204.6C-1.484 230.8-2.72 259.6 5.023 286.6C12.77 313.5 29.07 337.3 51.47 354.2L51.74 354.4L52.33 354.8L158.3 434.3L210.9 474L242.9 498.2C246.6 500.1 251.2 502.5 255.9 502.5C260.6 502.5 265.2 500.1 268.9 498.2L300.9 474L353.5 434.3L460.2 354.4L460.5 354.1C482.9 337.2 499.2 313.5 506.1 286.6C514.7 259.6 513.5 230.8 503.5 204.6z"></path></svg>

assets/icons/stack-exchange.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="stack-exchange" class="svg-inline--fa fa-stack-exchange fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M17.7 332.3h412.7v22c0 37.7-29.3 68-65.3 68h-19L259.3 512v-89.7H83c-36 0-65.3-30.3-65.3-68v-22zm0-23.6h412.7v-85H17.7v85zm0-109.4h412.7v-85H17.7v85zM365 0H83C47 0 17.7 30.3 17.7 67.7V90h412.7V67.7C430.3 30.3 401 0 365 0z"/></svg>

assets/icons/stack-overflow.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="stack-overflow" class="svg-inline--fa fa-stack-overflow fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"/></svg>

config.toml

@@ -10,6 +10,7 @@ disableKinds = ["taxonomy", "term"]
 
 [author]
   # name = "Your name here"
+  # headline = "An awesome person"
   # image = "img/author.jpg"  # path relative to static directory
 
   links = [
@@ -41,6 +42,8 @@ disableKinds = ["taxonomy", "term"]
     # { slack = "https://workspace.url/team/userid" },
     # { snapchat = "https://snapchat.com/add/username" },
     # { soundcloud = "https://soundcloud.com/username" },
+    # { stack-exchange = "https://stackexchange.com/users/userid/username" },
+    # { stack-overflow = "https://stackoverflow.com/users/userid/username" },
     # { steam = "https://steamcommunity.com/profiles/userid" },
     # { telegram = "https://t.me/username" },
     # { tiktok = "https://tiktok.com/@username" },

exampleSite/config.toml

@@ -6,6 +6,7 @@ disableKinds = ["taxonomy", "term"]
 
 [author]
   name = "Lynx"
+  headline = "A simple links theme for Hugo built with Tailwind CSS"
   image = "author.jpg"
   links = [
     { link = { href = "https://github.com/jpanther/lynx/blob/stable/README.md", text = "View the readme", icon = "github" } },

exampleSite/content/_index.md

@@ -2,4 +2,4 @@
 description: "This is a demo of the Lynx theme for Hugo."
 ---
 
-A simple links theme for Hugo built with Tailwind CSS.
+View the readme or check out all the link styles available using the links below.

exampleSite/content/styles.md

@@ -35,6 +35,8 @@ These are all the built-in link styles available in Lynx. Don't forget that you
 {{< link slack >}}
 {{< link snapchat >}}
 {{< link soundcloud >}}
+{{< link stack-exchange >}}
+{{< link stack-overflow >}}
 {{< link steam >}}
 {{< link telegram >}}
 {{< link tiktok >}}

i18n/en.yaml

@@ -37,6 +37,8 @@ link:
   twitter: Twitter
   whatsapp: WhatsApp
   youtube: YouTube
+  stack-exchange: Stack Exchange
+  stack-overflow: Stack Overflow
 
 nav:
   home: Home

layouts/_default/baseof.html

@@ -2,7 +2,7 @@
 <html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en{{ end }}">
   {{- partial "head.html" . -}}
   <body
-    class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-neutral text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-white max-w-7xl"
+    class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-neutral max-w-7xl text-neutral-900 dark:bg-neutral-800 dark:text-white sm:px-14 md:px-24 lg:px-32"
   >
     <main class="flex-grow">{{- block "main" . }}{{- end }}</main>
     {{- partial "footer.html" . -}}

layouts/_default/single.html

@@ -1,14 +1,14 @@
 {{ define "main" }}
   <article class="flex flex-col items-center justify-center mt-10">
     <nav class="place-self-start">
-      <a href="{{ "/" | relURL }}" class="text-neutral-500">&larr; {{ i18n "nav.home" }}</a>
+      <a href="{{ "" | relURL }}" class="text-neutral-500">&larr; {{ i18n "nav.home" }}</a>
     </nav>
     <header>
       <h1 class="mt-2 mb-6 text-4xl font-extrabold text-center text-neutral-800 dark:text-white">
         {{ .Title | emojify }}
       </h1>
     </header>
-    <section class="prose dark:prose-light">
+    <section class="prose dark:prose-invert">
       {{ .Content | emojify }}
     </section>
   </article>

layouts/index.html

@@ -2,13 +2,34 @@
   <article class="flex flex-col items-center justify-center h-full mt-10 text-center">
     <header class="flex flex-col items-center mb-3">
       {{ with .Site.Author.image }}
-        <img class="mb-2 rounded-full w-36 h-36" src="{{ . | relURL }}" />
+        {{ $src := . }}
+        {{ $resource := "" }}
+        {{ if $.Page.Resources.GetMatch $src }}
+          {{ $resource = $.Page.Resources.GetMatch $src }}
+        {{ else if resources.GetMatch $src }}
+          {{ $resource = resources.Get $src }}
+        {{ end }}
+        {{ with $resource }}
+          {{ $src = (.Fill "288x288").RelPermalink }}
+        {{ end }}
+        <img
+          class="mb-2 rounded-full h-36 w-36"
+          width="144"
+          height="144"
+          alt="{{ $.Site.Author.name | default "Author" }}"
+          src="{{ $src }}"
+        />
       {{ end }}
       <h1 class="text-4xl font-extrabold dark:text-white">
         {{ .Params.title | default .Site.Author.name | default .Site.Title | emojify }}
       </h1>
+      {{ with .Site.Author.headline }}
+        <h2 class="text-xl text-neutral-500 dark:text-neutral-400">
+          {{ . | markdownify | emojify }}
+        </h2>
+      {{ end }}
       {{ with .Content }}
-        <section class="pt-5 prose dark:prose-light">{{ . | emojify }}</section>
+        <section class="pt-5 prose dark:prose-invert">{{ . | emojify }}</section>
       {{ end }}
     </header>
     {{ with .Site.Author.links }}
@@ -28,7 +49,7 @@
               {{ with $data.title }}{{ $title = . }}{{ end }}
             {{ end }}
             <a
-              class="link link-{{ $type }} sm:px-24 min-w-full py-2 mb-3 text-lg rounded"
+              class="link link-{{ $type }} mb-3 min-w-full rounded py-2 text-lg sm:px-24"
               href="{{ $href }}"
               target="{{ $target }}"
               {{ with $title }}title="{{ . }}"{{ end }}

layouts/partials/analytics.html

@@ -1,4 +1,4 @@
-{{ if not .Site.IsServer }}
+{{ if hugo.IsProduction }}
   {{ with .Site.Params.fathomAnalytics.site }}
     {{ if isset $.Site.Params.fathomanalytics "domain" }}
       <script defer src="https://{{ $.Site.Params.fathomanalytics.domain }}/script.js" data-site="{{ . }}"></script>

layouts/partials/footer.html

@@ -1,7 +1,7 @@
 <footer class="py-10">
   <div class="text-center">
     {{/* Copyright */}}
-    <p class="text-sm text-neutral-400 dark:text-neutral-500">
+    <p class="text-sm text-neutral-500 dark:text-neutral-400">
       {{- with .Site.Copyright }}
         {{ . | emojify | markdownify }}
       {{- else }}
@@ -12,11 +12,11 @@
     </p>
     {{/* Theme attribution */}}
     {{ if .Site.Params.attribution | default true }}
-      <p class="text-xs text-neutral-300 dark:text-neutral-600">
-        {{ $hugo := printf `<a class="hover:underline hover:underline-primary-300 hover:text-primary-400"
+      <p class="text-xs text-neutral-500 dark:text-neutral-400">
+        {{ $hugo := printf `<a class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
           href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a>`
         }}
-        {{ $lynx := printf `<a class="hover:underline hover:underline-primary-300 hover:text-primary-400" href="https://git.io/hugo-lynx" target="_blank" rel="noopener noreferrer">Lynx</a>` }}
+        {{ $lynx := printf `<a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href="https://git.io/hugo-lynx" target="_blank" rel="noopener noreferrer">Lynx</a>` }}
         {{ i18n "footer.powered_by" (dict "Hugo" $hugo "Lynx" $lynx) | safeHTML }}
       </p>
     {{ end }}

layouts/partials/head.html

@@ -10,8 +10,8 @@
     <title>{{ .Site.Title }}</title>
     <meta name="title" content="{{ .Site.Title }}" />
   {{- else -}}
-    <title>{{ .Title }} &middot; {{ .Site.Title }}</title>
-    <meta name="title" content="{{ .Title }} &middot; {{ .Site.Title }}" />
+    <title>{{ .Title | emojify }} &middot; {{ .Site.Title | emojify }}</title>
+    <meta name="title" content="{{ .Title | emojify }} &middot; {{ .Site.Title | emojify }}" />
   {{- end }}
   {{/* Metadata */}}
   {{ with .Params.Description -}}
@@ -32,25 +32,21 @@
   {{ range .AlternativeOutputFormats -}}
     {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
   {{ end -}}
-  {{/* Styles */}}
-  {{ $mainCSS := resources.Get "css/compiled/main.css" }}
-  {{ $mainStyles := $mainCSS | resources.Minify | resources.Fingerprint "sha512" }}
+  {{/* Asset bundles */}}
+  {{ $assets := newScratch }}
+  {{ $cssMain := resources.Get "css/compiled/main.css" }}
+  {{ $assets.Add "css" (slice $cssMain) }}
+  {{ $cssCustom := resources.Get "css/custom.css" }}
+  {{ if $cssCustom }}
+    {{ $assets.Add "css" (slice $cssCustom) }}
+  {{ end }}
+  {{ $bundleCSS := $assets.Get "css" | resources.Concat "css/main.bundle.css" | resources.Minify | resources.Fingerprint "sha512" }}
   <link
     type="text/css"
     rel="stylesheet"
-    href="{{ $mainStyles.RelPermalink }}"
-    integrity="{{ $mainStyles.Data.Integrity }}"
+    href="{{ $bundleCSS.RelPermalink }}"
+    integrity="{{ $bundleCSS.Data.Integrity }}"
   />
-  {{ $customCSS := resources.Get "css/custom.css" }}
-  {{ if $customCSS }}
-    {{ $customStyles := $customCSS | resources.Minify | resources.Fingerprint "sha512" }}
-    <link
-      type="text/css"
-      rel="stylesheet"
-      href="{{ $customStyles.RelPermalink }}"
-      integrity="{{ $customStyles.Data.Integrity }}"
-    />
-  {{ end }}
   {{/* Icons */}}
   {{ if templates.Exists "partials/favicons.html" }}
     {{ partialCached "favicons.html" .Site }}
@@ -88,7 +84,7 @@
     {{ end }}
   {{ end }}
   {{/* Analytics */}}
-  {{ partialCached "analytics.html" .Site }}
+  {{ partialCached "analytics.html" . }}
   {{/* Extend head - eg. for custom analytics scripts, etc. */}}
   {{ if templates.Exists "partials/extend-head.html" }}
     {{ partialCached "extend-head.html" .Site }}

lighthouserc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  ci: {
+    collect: {
+      startServerCommand: "npm run example -- --disableLiveReload --minify",
+      startServerReadyPattern: "Web Server is available",
+      url: ["http://localhost:8008/lynx/"],
+      settings: {
+        skipAudits: ["uses-text-compression", "uses-long-cache-ttl"],
+      },
+    },
+    upload: {
+      target: "temporary-public-storage",
+    },
+  },
+};

netlify.toml

@@ -0,0 +1,24 @@
+[build]
+  command = "cd exampleSite && hugo --gc --minify -D -b $URL"
+  publish = "exampleSite/public"
+
+[build.environment]
+HUGO_THEMESDIR = "../.."
+HUGO_THEME = "repo"
+TZ = "Australia/Melbourne"
+
+[context.production.environment]
+HUGO_VERSION = "0.112.7"
+HUGO_ENV = "production"
+
+[context.deploy-preview]
+command = "cd exampleSite && hugo --gc --minify -D -b $DEPLOY_PRIME_URL"
+
+[context.deploy-preview.environment]
+HUGO_VERSION = "0.112.7"
+
+[context.branch-deploy]
+command = "cd exampleSite && hugo --gc --minify -D -b $DEPLOY_PRIME_URL"
+
+[context.branch-deploy.environment]
+HUGO_VERSION = "0.112.7"

package.json

@@ -1,11 +1,12 @@
 {
   "name": "hugo-lynx-theme",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Lynx theme for Hugo",
   "scripts": {
     "dev": "NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
     "build": "NODE_ENV=production ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./assets/css/compiled/main.css --jit",
-    "example": "hugo server --source exampleSite --themesDir ../.. --buildDrafts -b http://localhost/lynx/ -p 8008"
+    "example": "hugo server --source exampleSite --themesDir ../.. --buildDrafts -b http://localhost/lynx/ -p 8008",
+    "lighthouse": "lhci autorun"
   },
   "repository": {
     "type": "git",
@@ -24,9 +25,10 @@
   },
   "homepage": "https://github.com/jpanther/lynx#readme",
   "devDependencies": {
-    "@tailwindcss/typography": "^0.4.1",
-    "prettier": "^2.4.1",
-    "prettier-plugin-go-template": "^0.0.11",
-    "tailwindcss": "^2.2.19"
+    "@tailwindcss/typography": "^0.5.9",
+    "prettier": "^2.8.8",
+    "prettier-plugin-go-template": "^0.0.13",
+    "prettier-plugin-tailwindcss": "^0.3.0",
+    "tailwindcss": "^3.3.2"
   }
 }

tailwind.config.js

@@ -1,15 +1,12 @@
 const colors = require("tailwindcss/colors");
 
 module.exports = {
-  mode: "jit",
-  purge: {
-    content: [
-      "./layouts/**/*.html",
-      "./content/**/*.{html,md}",
-      "./themes/lynx/layouts/**/*.html",
-      "./themes/lynx/content/**/*.{html,md}",
-    ],
-  },
+  content: [
+    "./layouts/**/*.html",
+    "./content/**/*.{html,md}",
+    "./themes/lynx/layouts/**/*.html",
+    "./themes/lynx/content/**/*.{html,md}",
+  ],
   darkMode: "media",
   theme: {
     colors: {
@@ -20,164 +17,84 @@ module.exports = {
     extend: {
       typography: (theme) => ({
         DEFAULT: {
-          css: [
-            {
-              color: theme("colors.neutral.700"),
-              a: {
-                color: theme("colors.primary.700"),
-                textDecoration: "underline",
-                textDecorationColor: theme("colors.primary.300"),
-                fontWeight: "500",
-                "&:hover": {
-                  backgroundColor: theme("colors.primary.600"),
-                  borderRadius: "0.09rem",
-                  color: theme("colors.white"),
-                  textDecoration: "none",
-                },
-              },
-              strong: {
-                color: theme("colors.neutral.900"),
-              },
-              "ol > li::before": {
-                color: theme("colors.neutral.800"),
-              },
-              "ul > li::before": {
-                backgroundColor: theme("colors.neutral.500"),
-              },
-              hr: {
-                borderColor: theme("colors.neutral.200"),
-              },
-              blockquote: {
-                color: theme("colors.neutral.800"),
-                borderLeftColor: theme("colors.primary.200"),
-              },
-              h1: {
-                color: theme("colors.neutral.800"),
-                position: "relative",
-              },
-              h2: {
-                color: theme("colors.neutral.800"),
-                position: "relative",
-              },
-              h3: {
-                color: theme("colors.neutral.800"),
-                position: "relative",
-              },
-              h4: {
-                color: theme("colors.neutral.800"),
-                position: "relative",
-              },
-              code: {
-                color: theme("colors.primary.800"),
-              },
-              "pre code": {
-                color: theme("colors.neutral.700"),
-              },
-              pre: {
-                color: theme("colors.neutral.700"),
-                backgroundColor: theme("colors.neutral.50"),
-              },
-              "pre code": {
-                color: theme("colors.neutral.700"),
-              },
-              thead: {
-                color: theme("colors.neutral.800"),
-                borderBottomColor: theme("colors.neutral.500"),
-              },
-              "tbody tr": {
-                borderBottomColor: theme("colors.neutral.300"),
-              },
-              kbd: {
-                backgroundColor: theme("colors.neutral.200"),
-                padding: "0.1rem 0.4rem",
-                borderRadius: "0.25rem",
-                fontSize: "0.9rem",
-                fontWeight: "600",
-              },
-              mark: {
-                backgroundColor: theme("colors.primary.200"),
-                padding: "0.1rem 0.2rem",
-                borderRadius: "0.12rem",
+          css: {
+            "--tw-prose-body": theme("colors.neutral.700"),
+            "--tw-prose-headings": theme("colors.neutral.800"),
+            "--tw-prose-lead": theme("colors.neutral.500"),
+            "--tw-prose-links": theme("colors.primary.700"),
+            "--tw-prose-bold": theme("colors.neutral.900"),
+            "--tw-prose-counters": theme("colors.neutral.800"),
+            "--tw-prose-bullets": theme("colors.neutral.500"),
+            "--tw-prose-hr": theme("colors.neutral.200"),
+            "--tw-prose-quotes": theme("colors.neutral.700"),
+            "--tw-prose-quote-borders": theme("colors.primary.200"),
+            "--tw-prose-captions": theme("colors.neutral.500"),
+            "--tw-prose-code": theme("colors.primary.700"),
+            "--tw-prose-pre-code": theme("colors.neutral.700"),
+            "--tw-prose-pre-bg": theme("colors.neutral.50"),
+            "--tw-prose-th-borders": theme("colors.neutral.500"),
+            "--tw-prose-td-borders": theme("colors.neutral.300"),
+            "--tw-prose-invert-body": theme("colors.neutral.300"),
+            "--tw-prose-invert-headings": theme("colors.neutral.50"),
+            "--tw-prose-invert-lead": theme("colors.neutral.500"),
+            "--tw-prose-invert-links": theme("colors.primary.400"),
+            "--tw-prose-invert-bold": theme("colors.neutral.DEFAULT"),
+            "--tw-prose-invert-counters": theme("colors.neutral.400"),
+            "--tw-prose-invert-bullets": theme("colors.neutral.600"),
+            "--tw-prose-invert-hr": theme("colors.neutral.500"),
+            "--tw-prose-invert-quotes": theme("colors.neutral.200"),
+            "--tw-prose-invert-quote-borders": theme("colors.primary.900"),
+            "--tw-prose-invert-captions": theme("colors.neutral.400"),
+            "--tw-prose-invert-code": theme("colors.primary.400"),
+            "--tw-prose-invert-pre-code": theme("colors.neutral.200"),
+            "--tw-prose-invert-pre-bg": theme("colors.neutral.700"),
+            "--tw-prose-invert-th-borders": theme("colors.neutral.500"),
+            "--tw-prose-invert-td-borders": theme("colors.neutral.700"),
+            a: {
+              textDecoration: "underline",
+              textDecorationColor: theme("colors.primary.300"),
+              fontWeight: "500",
+              "&:hover": {
+                color: theme("colors.neutral.DEFAULT"),
+                textDecoration: "none",
+                backgroundColor: theme("colors.primary.600"),
+                borderRadius: "0.09rem",
               },
             },
-          ],
+            "a code": {
+              color: "var(--tw-prose-code)",
+            },
+            kbd: {
+              backgroundColor: theme("colors.neutral.200"),
+              padding: "0.1rem 0.4rem",
+              borderRadius: "0.25rem",
+              fontSize: "0.9rem",
+              fontWeight: "600",
+            },
+            mark: {
+              color: theme("colors.neutral.800"),
+              backgroundColor: theme("colors.primary.200"),
+              padding: "0.1rem 0.2rem",
+              borderRadius: "0.12rem",
+            },
+          },
         },
-        light: {
-          css: [
-            {
-              color: theme("colors.neutral.400"),
-              a: {
-                color: theme("colors.primary.400"),
-                textDecorationColor: theme("colors.neutral.500"),
-              },
-              strong: {
-                color: theme("colors.white"),
-              },
-              "ol > li::before": {
-                color: theme("colors.neutral.400"),
-              },
-              "ul > li::before": {
-                backgroundColor: theme("colors.neutral.600"),
-              },
-              hr: {
-                borderColor: theme("colors.neutral.500"),
-              },
-              blockquote: {
-                color: theme("colors.neutral.200"),
-                borderLeftColor: theme("colors.primary.900"),
-              },
-              h1: {
-                color: theme("colors.white"),
-              },
-              h2: {
-                color: theme("colors.white"),
-              },
-              h3: {
-                color: theme("colors.white"),
-              },
-              h4: {
-                color: theme("colors.white"),
-              },
-              "figure figcaption": {
-                color: theme("colors.neutral.400"),
-              },
-              code: {
-                color: theme("colors.primary.500"),
-              },
-              "a code": {
-                color: theme("colors.white"),
-              },
-              pre: {
-                color: theme("colors.neutral.200"),
-                backgroundColor: theme("colors.neutral.700"),
-              },
-              "pre code": {
-                color: theme("colors.neutral.200"),
-              },
-              thead: {
-                color: theme("colors.white"),
-                borderBottomColor: theme("colors.neutral.500"),
-              },
-              "tbody tr": {
-                borderBottomColor: theme("colors.neutral.700"),
-              },
-              kbd: {
-                backgroundColor: theme("colors.neutral.700"),
-                color: theme("colors.neutral.300"),
-              },
-              mark: {
-                backgroundColor: theme("colors.primary.400"),
-              },
+        invert: {
+          css: {
+            a: {
+              textDecorationColor: theme("colors.neutral.600"),
             },
-          ],
+            kbd: {
+              color: theme("colors.neutral.200"),
+              backgroundColor: theme("colors.neutral.700"),
+            },
+            mark: {
+              backgroundColor: theme("colors.primary.400"),
+            },
+          },
         },
       }),
     },
   },
-  variants: {
-    extend: {
-      typography: ["dark"],
-    },
-  },
   plugins: [require("@tailwindcss/typography")],
 };