🔖 Release v1.3.1

📌 Bump @tailwindcss/typography from 0.5.9 to 0.5.10

.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@v4
+        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@v4
         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@v4
         with:
           submodules: true
           fetch-depth: 0

.gitignore

@@ -1,144 +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/
+**/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,89 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.1] - 2023-09-10
+
+### Changed
+
+- Upgrade to Tailwind v3.3.3 ([#77](https://github.com/jpanther/lynx/pull/77))
+- Upgrade to Typography v0.5.10 ([#90](https://github.com/jpanther/lynx/pull/90))
+
+## [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
+
+- Support for Amazon, Apple, Flickr, Google, Kickstarter, Microsoft, Patreon, Telegram, Tumblr and WhatsApp
+- Ability to override individual link parameters
+- Support for basic content pages
+- French translation ([#2](https://github.com/jpanther/lynx/pull/2))
+
+### Fixed
+
+- Typo in GitLab link text
+- Minor styling issues
+
+## [1.0.0] - 2021-11-01
+
 ### Added
 
 - Built with Tailwind CSS JIT for minified stylesheets without any excess code
@@ -16,3 +99,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - HTML and Emoji support
 - Fathom Analytics and Google Analytics support
 - Favicons support
+
+[Unreleased]: https://github.com/jpanther/lynx/compare/v1.3.1...HEAD
+[1.3.1]: https://github.com/jpanther/lynx/compare/v1.3.0...v1.3.1
+[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
@@ -47,7 +46,7 @@ Below is a quick start guide using Hugo modules.
 
 4. In the root folder of your website, replace the `config.toml` file that was generated by Hugo with the one from Lynx. You will find the theme config file in the Hugo cache directory, or [download a copy](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/jpanther/lynx/tree/stable/config.toml) from GitHub.
 
-5. Edit the settings in the `config.toml` file to suit your needs. You can also create a `content/_index.md` file to add additional text to your site.
+5. Follow the [configuration instructions](#configuration) below.
 
 ### Installing theme updates
 
@@ -55,6 +54,78 @@ As new releases are posted, you can update the theme using Hugo. Simply run `hug
 
 ---
 
+## Configuration
+
+The main theme configuration is managed in the `config.toml` file. Most parameters are self explanatory and the default config contains some basic examples.
+
+The author name and image are displayed at the top of the page. Both are optional and will default to the site title with no image when not provided.
+
+Links can either be a simple string containing the URL for the link, or an object that defines the link parameters. Links are displayed in the order provided in the config file.
+
+Acceptable link parameters are:
+
+- `href` = the URL the link should point to (required)
+- `icon` = the name of the icon to use for this link
+- `text` = the link text
+- `target` = the target of the link (default: `_blank`)
+- `title` = the HTML title of the link
+
+```toml
+[author]
+links = {
+   # Simple link
+   { github = "https://github.com/jpanther/lynx" }
+
+   # Custom link
+   { github = { href = "https://github.com/jpanther/lynx", text = "GitHub Project" } }
+}
+```
+
+Additional page content can be provided by creating a Markdown file at `content/_index.md`. The contents of this file will be displayed between the title and links. Check out the exampleSite to see this in practice.
+
+Basic content pages can also be created by placing Markdown files in the `content` directory. These can then be linked to using links in the config file or through the homepage content.
+
+### Adding custom icons and link styles
+
+Lynx supports adding your own SVG icons and link styles to fully customise your links page. In the **root of your Hugo project**, simply create an `assets` folder and add your assets. Icons should be placed in an `icons` folder and any CSS should be in a file named `css/custom.css`.
+
+The custom CSS file will automatically be included and minified when the site is built. The styles can be as creative as you wish and anything in your custom CSS will override the default theme.
+
+If you need icons, you can find free SVG icons for many services at [FontAwesome](https://fontawesome.com/icons?d=gallery&p=2&s=brands).
+
+#### Example
+
+Let's make a custom link for FontAwesome using the FA flag as the link icon and a gradient background as the link style.
+
+> If you prefer to inspect the code, the exampleSite contains a custom link to FontAwesome that demonstrates this process.
+
+1. Place the SVG icon in the icons folder `/assets/icons/font-awesome.svg`.
+2. Create the CSS file at `/assets/css/custom.css` and add in a rule to style the link:
+
+   ```css
+   .link-font-awesome {
+     background: rgb(131, 58, 180);
+     background: linear-gradient(
+       90deg,
+       rgba(131, 58, 180, 1) 0%,
+       rgba(253, 29, 29, 1) 50%,
+       rgba(252, 176, 69, 1) 100%
+     );
+   }
+   ```
+
+   _Note: The CSS class name should be the icon name prefixed with `link-`._
+
+3. Finally, in the `config.toml` file, create the link by referencing the new icon:
+
+   ```toml
+   font-awesome = { href = "https://fontawesome.com", text = "FontAwesome" }
+   ```
+
+When the site is rebuilt, the new custom link will appear.
+
+---
+
 ## Contributing
 
 Lynx is expected to evolve over time. I intend to keep adding features and making changes as required.

assets/css/main.css

@@ -1,13 +1,8 @@
-/*! Lynx v1.0.0 | MIT License | https://github.com/jpanther/lynx */
+/*! Lynx v1.3.1 | MIT License | https://github.com/jpanther/lynx */
 
 @tailwind base;
 @tailwind components;
 
-body a,
-body button {
-  /* @apply transition; */
-}
-
 /* Scale SVG icons to text size */
 .icon svg {
   height: 1em;
@@ -16,9 +11,16 @@ body button {
 
 /* Links */
 .link {
-  @apply text-white bg-primary-700 hover:brightness-90;
+  @apply bg-primary-700 text-white hover:brightness-90;
 }
 
+.link-amazon {
+  @apply text-neutral-900;
+  background-color: #ff9900;
+}
+.link-apple {
+  background-color: #333;
+}
 .link-codepen {
   background-color: #1e1f26;
 }
@@ -34,6 +36,9 @@ body button {
 .link-facebook {
   background-color: #1877f2;
 }
+.link-flickr {
+  background-color: #ff0184;
+}
 .link-foursquare {
   background-color: #0732a2;
 }
@@ -43,6 +48,9 @@ body button {
 .link-gitlab {
   background-color: #554488;
 }
+.link-google {
+  background-color: #4285f4;
+}
 .link-instagram {
   background-color: #c13584;
   background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
@@ -50,6 +58,10 @@ body button {
 .link-keybase {
   background-color: #33a0ff;
 }
+.link-kickstarter {
+  @apply text-neutral-900;
+  background-color: #06ce78;
+}
 .link-lastfm {
   background-color: #d51007;
 }
@@ -57,14 +69,20 @@ body button {
   background-color: #0077b5;
 }
 .link-mastodon {
-  background-color: #338cd4;
+  background-color: #6364ff;
 }
 .link-medium {
   background-color: #00ab6c;
 }
+.link-microsoft {
+  background-color: #08a6f0;
+}
 .link-orcid {
   background-color: #a6ce39;
 }
+.link-patreon {
+  background-color: #ff434d;
+}
 .link-pinterest {
   background-color: #e60023;
 }
@@ -88,17 +106,39 @@ body button {
 .link-steam {
   background-color: #000;
 }
+.link-telegram {
+  background-color: #25a3e1;
+}
 .link-tiktok {
   background-color: #fe2d55;
 }
+.link-tumblr {
+  background-color: #001935;
+}
 .link-twitch {
   background-color: #9146ff;
 }
 .link-twitter {
-  background-color: #1da1f2;
+  background-color: rgb(63, 136, 222);
+}
+.link-whatsapp {
+  background-color: #45d82c;
+  background: linear-gradient(120deg, #12990b, #45d82c);
 }
 .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 bg-neutral-50 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200;
+}
 
 @tailwind utilities;

assets/icons/amazon.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="amazon" class="svg-inline--fa fa-amazon fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56S341 288.9 341 261.4V114.3C341 89 316.5 32 228.7 32 140.7 32 94 87 94 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 35.5 29.8 35.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8v40.6zm136 163.5c-7.7 10-70 67-174.5 67S34.2 408.5 9.7 379c-6.8-7.7 1-11.3 5.5-8.3C88.5 415.2 203 488.5 387.7 401c7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1 0 27.1-6.5 43.1z"></path></svg>

assets/icons/apple.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="apple" class="svg-inline--fa fa-apple fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"></path></svg>

assets/icons/flickr.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="flickr" class="svg-inline--fa fa-flickr fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM144.5 319c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5zm159 0c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5z"></path></svg>

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/google.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google" class="svg-inline--fa fa-google fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><path fill="currentColor" d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"></path></svg>

assets/icons/kickstarter.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="kickstarter-k" class="svg-inline--fa fa-kickstarter-k fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M147.3 114.4c0-56.2-32.5-82.4-73.4-82.4C26.2 32 0 68.2 0 113.4v283c0 47.3 25.3 83.4 74.9 83.4 39.8 0 72.4-25.6 72.4-83.4v-76.5l112.1 138.3c22.7 27.2 72.1 30.7 103.2 0 27-27.6 27.3-67.4 7.4-92.2l-90.8-114.8 74.9-107.4c17.4-24.7 17.5-63.1-10.4-89.8-30.3-29-82.4-31.6-113.6 12.8L147.3 185v-70.6z"></path></svg>

assets/icons/microsoft.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="microsoft" class="svg-inline--fa fa-microsoft fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 32h214.6v214.6H0V32zm233.4 0H448v214.6H233.4V32zM0 265.4h214.6V480H0V265.4zm233.4 0H448V480H233.4V265.4z"></path></svg>

assets/icons/patreon.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="patreon" class="svg-inline--fa fa-patreon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M512 194.8c0 101.3-82.4 183.8-183.8 183.8-101.7 0-184.4-82.4-184.4-183.8 0-101.6 82.7-184.3 184.4-184.3C429.6 10.5 512 93.2 512 194.8zM0 501.5h90v-491H0v491z"></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>

assets/icons/telegram.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="telegram-plane" class="svg-inline--fa fa-telegram-plane fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z"></path></svg>

assets/icons/tumblr.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="tumblr" class="svg-inline--fa fa-tumblr fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"></path></svg>

assets/icons/whatsapp.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="whatsapp" class="svg-inline--fa fa-whatsapp fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path></svg>

config.toml

@@ -10,33 +10,47 @@ disableKinds = ["taxonomy", "term"]
 
 [author]
   # name = "Your name here"
-  # image = "img/author.jpg"
+  # headline = "An awesome person"
+  # image = "img/author.jpg"  # path relative to static directory
+
   links = [
     # { email = "mailto:hello@your_domain.com" },
     # { link = "https://link-to-some-website.com/" },
+    # { amazon = "https://www.amazon.com/hz/wishlist/ls/wishlist-id" },
+    # { apple = "https://www.apple.com" },
     # { codepen = "https://codepen.io/username" },
     # { dev = "https://dev.to/username" },
     # { discord = "https://discord.gg/invitecode" },
     # { dribbble = "https://dribbble.com/username" },
     # { facebook = "https://facebook.com/username" },
+    # { flickr = "https://www.flickr.com/photos/username/" },
     # { foursquare = "https://foursquare.com/username" },
     # { github = "https://github.com/username" },
     # { gitlab = "https://gitlab.com/username" },
+    # { google = "https://www.google.com/" },
     # { instagram = "https://instagram.com/username" },
     # { keybase = "https://keybase.io/username" },
+    # { kickstarter = "https://www.kickstarter.com/profile/username" },
     # { lastfm = "https://lastfm.com/user/username" },
     # { linkedin = "https://linkedin.com/in/username" },
     # { mastodon = "https://mastodon.instance/@username" },
     # { medium = "https://medium.com/username" },
+    # { microsoft = "https://www.microsoft.com/" },
+    # { patreon = "https://www.patreon.com/username" },
     # { pinterest = "https://pinterest.com/username" },
     # { reddit = "https://reddit.com/user/username" },
     # { 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" },
+    # { tumblr = "https://username.tumblr.com" },
     # { twitch = "https://twitch.tv/username" },
     # { twitter = "https://twitter.com/username" },
+    # { whatsapp = "https://wa.me/phone-number" },
     # { youtube = "https://youtube.com/username" },
   ]
 

exampleSite/assets/css/custom.css

@@ -0,0 +1,9 @@
+.link-font-awesome {
+  background: rgb(131, 58, 180);
+  background: linear-gradient(
+    90deg,
+    rgba(131, 58, 180, 1) 0%,
+    rgba(253, 29, 29, 1) 50%,
+    rgba(252, 176, 69, 1) 100%
+  );
+}

exampleSite/assets/icons/font-awesome.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="font-awesome-flag" class="svg-inline--fa fa-font-awesome-flag fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M448 48V384c-63 23-82 32-119 32-63 0-87-32-150-32-20 0-36 4-51 8V328c15-4 31-8 51-8 63 0 87 32 150 32 20 0 35-3 55-9V135c-20 6-35 9-55 9-63 0-87-32-150-32-51 0-75 21-115 29V448a31.6 31.6 0 0 1-32 32A31.6 31.6 0 0 1 0 448V64A31.6 31.6 0 0 1 32 32 31.6 31.6 0 0 1 64 64V77c40-8 64-29 115-29 63 0 87 32 150 32C366 80 385 71 448 48Z"></path></svg>

exampleSite/config.toml

@@ -1,20 +1,24 @@
 theme = "lynx"
-languageCode = "en-au"
-defaultContentLanguage = "en"
-
 title = "Lynx"
-# copyright = "Copy, _right?_ :thinking_face:"
 
 enableEmoji = true
 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" } },
+    { link = { href = "styles/", text = "All the link styles", target = "_self" } },
     { github = "https://github.com/jpanther/lynx" },
-    { discord = "https://discord.gg/invitecode" },
-    { instagram = "https://instagram.com/username" },
-    { soundcloud = "https://soundcloud.com/username" },
-    { twitter = "https://twitter.com/username" },
+    { twitter = "https://twitter.com/jpanther" },
+    { font-awesome = { href = "https://fontawesome.com/", text = "FontAwesome" } },
   ]
+
+[markup.highlight]
+  noClasses = false
+
+[markup.goldmark]
+[markup.goldmark.renderer]
+  unsafe = true

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

@@ -0,0 +1,47 @@
+---
+title: Link styles
+---
+
+These are all the built-in link styles available in Lynx. Don't forget that you can also create your own styles --- check the [readme](https://github.com/jpanther/lynx/blob/stable/README.md) for more details.
+<br><br>
+
+</section>
+<section class="flex flex-col flex-wrap min-w-full mt-4 sm:min-w-0">
+{{< link email >}}
+{{< link link >}}
+{{< link amazon >}}
+{{< link apple >}}
+{{< link codepen >}}
+{{< link dev >}}
+{{< link discord >}}
+{{< link dribbble >}}
+{{< link facebook >}}
+{{< link flickr >}}
+{{< link foursquare >}}
+{{< link github >}}
+{{< link gitlab >}}
+{{< link google >}}
+{{< link instagram >}}
+{{< link keybase >}}
+{{< link kickstarter >}}
+{{< link lastfm >}}
+{{< link linkedin >}}
+{{< link mastodon >}}
+{{< link medium >}}
+{{< link microsoft >}}
+{{< link patreon >}}
+{{< link pinterest >}}
+{{< link reddit >}}
+{{< link slack >}}
+{{< link snapchat >}}
+{{< link soundcloud >}}
+{{< link stack-exchange >}}
+{{< link stack-overflow >}}
+{{< link steam >}}
+{{< link telegram >}}
+{{< link tiktok >}}
+{{< link tumblr >}}
+{{< link twitch >}}
+{{< link twitter >}}
+{{< link whatsapp >}}
+{{< link youtube >}}

exampleSite/layouts/shortcodes/link.html

@@ -0,0 +1,8 @@
+<a
+  class="link link-{{ .Get 0 }} sm:px-24 min-w-full py-2 mb-3 text-lg rounded text-center"
+  href="#"
+  onclick="navigator.clipboard.writeText({{ .Get 0 }})"
+>
+  <span class="mr-1">{{ partial "icon.html" (.Get 0) }}</span>
+  {{ .Get 0 }}
+</a>

i18n/en.yaml

@@ -1,21 +1,28 @@
 link:
+  amazon: Amazon
+  apple: Apple
   codepen: CodePen
   dev: DEV
   discord: Discord
   dribbble: Dribbble
   email: Email
   facebook: Facebook
+  flickr: Flickr
   foursquare: Foursquare
   github: GitHub
-  gitlab: Gitlab
+  gitlab: GitLab
+  google: Google
   instagram: Instagram
   keybase: Keybase
+  kickstarter: Kickstarter
   lastfm: Last.fm
   link: Website
   linkedin: LinkedIn
   mastodon: Mastodon
   medium: Medium
+  microsoft: Microsoft
   orcid: ORCiD
+  patreon: Patreon
   pinterest: Pinterest
   reddit: Reddit
   researchgate: ResearchGate
@@ -23,10 +30,18 @@ link:
   snapchat: Snapchat
   soundcloud: Soundcloud
   steam: Steam
+  telegram: Telegram
   tiktok: TikTok
+  tumblr: Tumblr
   twitch: Twitch
   twitter: Twitter
+  whatsapp: WhatsApp
   youtube: YouTube
+  stack-exchange: Stack Exchange
+  stack-overflow: Stack Overflow
+
+nav:
+  home: Home
 
 footer:
   powered_by: "Powered by {{ .Hugo }} & {{ .Lynx }}"

i18n/fr.yaml

@@ -0,0 +1,45 @@
+link:
+  amazon: Amazon
+  apple: Apple
+  codepen: CodePen
+  dev: DEV
+  discord: Discord
+  dribbble: Dribbble
+  email: Email
+  facebook: Facebook
+  flickr: Flickr
+  foursquare: Foursquare
+  github: GitHub
+  gitlab: GitLab
+  google: Google
+  instagram: Instagram
+  keybase: Keybase
+  kickstarter: Kickstarter
+  lastfm: Last.fm
+  link: "Site internet"
+  linkedin: LinkedIn
+  mastodon: Mastodon
+  medium: Medium
+  microsoft: Microsoft
+  orcid: ORCiD
+  patreon: Patreon
+  pinterest: Pinterest
+  reddit: Reddit
+  researchgate: ResearchGate
+  slack: Slack
+  snapchat: Snapchat
+  soundcloud: Soundcloud
+  steam: Steam
+  telegram: Telegram
+  tiktok: TikTok
+  tumblr: Tumblr
+  twitch: Twitch
+  twitter: Twitter
+  whatsapp: WhatsApp
+  youtube: YouTube
+
+# nav:
+#   home: Home
+
+footer:
+  powered_by: "Propulsé par {{ .Hugo }} & {{ .Lynx }}"

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-neutral 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

@@ -0,0 +1,15 @@
+{{ 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>
+    </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-invert">
+      {{ .Content | emojify }}
+    </section>
+  </article>
+{{ end }}

layouts/index.html

@@ -2,34 +2,67 @@
   <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 }}
       <div class="flex flex-col flex-wrap min-w-full mt-4 sm:min-w-0">
         {{ range $links := . }}
-          {{ range $name, $url := $links }}
+          {{ range $type, $data := $links }}
+            {{ $href := $data }}
+            {{ $icon := $type }}
+            {{ $text := i18n (printf "link.%s" $type) }}
+            {{ $target := "_blank" }}
+            {{ $title := "" }}
+            {{ if reflect.IsMap $data }}
+              {{ with $data.href }}{{ $href = . }}{{ end }}
+              {{ with $data.icon }}{{ $icon = . }}{{ end }}
+              {{ with $data.text }}{{ $text = . }}{{ end }}
+              {{ with $data.target }}{{ $target = . }}{{ end }}
+              {{ with $data.title }}{{ $title = . }}{{ end }}
+            {{ end }}
             <a
-              class="link link-{{ $name }} sm:px-24 min-w-full py-2 mb-3 text-lg rounded"
-              href="{{ $url }}"
-              target="_blank"
-              alt="{{ $name | title }}"
+              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 }}
               rel="me noopener noreferrer"
-              ><div class="">
-                <span class="mr-1">{{ partial "icon.html" $name }}</span
-                >{{ i18n (printf "link.%s" $name) }}
-              </div></a
             >
+              {{- with $icon -}}
+                <span class="mr-1">{{ partial "icon.html" . }}</span>
+              {{- end -}}
+              {{ $text | emojify }}
+            </a>
           {{ end }}
         {{ end }}
       </div>
     {{ end }}
-
   </article>
 {{ 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 }}

layouts/partials/icon.html

@@ -1,6 +1,6 @@
-<span class="relative inline-block align-text-bottom icon">
-  {{ $icon := resources.Get (print "icons/" . ".svg") }}
-  {{ if $icon }}
+{{ $icon := resources.Get (print "icons/" . ".svg") }}
+{{ if $icon }}
+  <span class="relative inline-block align-text-bottom icon">
     {{ $icon.Content | safeHTML }}
-  {{ end }}
-</span>
+  </span>
+{{ end }}

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,18 @@
+[build]
+  command = "cd exampleSite && hugo --gc --minify -D -b $URL"
+  publish = "exampleSite/public"
+
+[build.environment]
+HUGO_VERSION = "0.118.2"
+HUGO_THEMESDIR = "../.."
+HUGO_THEME = "repo"
+TZ = "Australia/Melbourne"
+
+[context.production.environment]
+HUGO_ENV = "production"
+
+[context.deploy-preview]
+command = "cd exampleSite && hugo --gc --minify -D -b $DEPLOY_PRIME_URL"
+
+[context.branch-deploy]
+command = "cd exampleSite && hugo --gc --minify -D -b $DEPLOY_PRIME_URL"

package.json

@@ -1,11 +1,12 @@
 {
   "name": "hugo-lynx-theme",
-  "version": "0.0.1",
+  "version": "1.3.1",
   "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.10",
+    "prettier": "^3.0.3",
+    "prettier-plugin-go-template": "^0.0.15",
+    "prettier-plugin-tailwindcss": "^0.5.4",
+    "tailwindcss": "^3.3.3"
   }
 }

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.secondary.700"),
-              },
-              "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.secondary.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.secondary.400"),
-              },
-              "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.secondary.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")],
 };