🔖 Release v1.2.0

.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/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@v5
+        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/
+**/public/
-/resources/_gen/
+**/resources/_gen/
-.hugo_build.lock
 
 # 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,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [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 +48,7 @@ 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.2.0...HEAD
+[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 built with Tailwind CSS 3.0
-- Fully responsive layout
 - 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.2.0 | MIT License | https://github.com/jpanther/lynx */
 
 @tailwind base;
 @tailwind components;
@@ -119,7 +119,7 @@
   background-color: #9146ff;
 }
 .link-twitter {
-  background-color: #1da1f2;
+  background-color: rgb(63, 136, 222);
 }
 .link-whatsapp {
   background-color: #45d82c;

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 = [

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.

layouts/_default/single.html

@@ -8,7 +8,7 @@
         {{ .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 w-36 h-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 }}

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">
+      <p class="text-xs text-neutral-500 dark:text-neutral-400">
-        {{ $hugo := printf `<a class="hover:underline hover:underline-primary-300 hover:text-primary-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>
+    <title>{{ .Title | emojify }} &middot; {{ .Site.Title | emojify }}</title>
-    <meta name="title" content="{{ .Title }} &middot; {{ .Site.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 */}}
+  {{/* Asset bundles */}}
-  {{ $mainCSS := resources.Get "css/compiled/main.css" }}
+  {{ $assets := newScratch }}
-  {{ $mainStyles := $mainCSS | resources.Minify | resources.Fingerprint "sha512" }}
+  {{ $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 }}"
+    href="{{ $bundleCSS.RelPermalink }}"
-    integrity="{{ $mainStyles.Data.Integrity }}"
+    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 }}

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.100.2"
+HUGO_ENV = "production"
+
+[context.deploy-preview]
+command = "cd exampleSite && hugo --gc --minify -D -b $DEPLOY_PRIME_URL"
+
+[context.deploy-preview.environment]
+HUGO_VERSION = "0.100.2"
+
+[context.branch-deploy]
+command = "cd exampleSite && hugo --gc --minify -D -b $DEPLOY_PRIME_URL"
+
+[context.branch-deploy.environment]
+HUGO_VERSION = "0.100.2"

package.json

@@ -1,11 +1,12 @@
 {
   "name": "hugo-lynx-theme",
-  "version": "1.1.0",
+  "version": "1.2.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,9 @@
   },
   "homepage": "https://github.com/jpanther/lynx#readme",
   "devDependencies": {
-    "@tailwindcss/typography": "^0.4.1",
+    "@tailwindcss/typography": "^0.5.2",
-    "prettier": "^2.4.1",
+    "prettier": "^2.7.1",
-    "prettier-plugin-go-template": "^0.0.11",
+    "prettier-plugin-go-template": "^0.0.13",
-    "tailwindcss": "^2.2.19"
+    "tailwindcss": "^3.1.3"
   }
 }

tailwind.config.js

@@ -1,15 +1,12 @@
 const colors = require("tailwindcss/colors");
 
 module.exports = {
-  mode: "jit",
+  content: [
-  purge: {
+    "./layouts/**/*.html",
-    content: [
+    "./content/**/*.{html,md}",
-      "./layouts/**/*.html",
+    "./themes/lynx/layouts/**/*.html",
-      "./content/**/*.{html,md}",
+    "./themes/lynx/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: [
+          css: {
-            {
+            "--tw-prose-body": theme("colors.neutral.700"),
-              color: theme("colors.neutral.700"),
+            "--tw-prose-headings": theme("colors.neutral.800"),
-              a: {
+            "--tw-prose-lead": theme("colors.neutral.500"),
-                color: theme("colors.primary.700"),
+            "--tw-prose-links": theme("colors.primary.700"),
-                textDecoration: "underline",
+            "--tw-prose-bold": theme("colors.neutral.900"),
-                textDecorationColor: theme("colors.primary.300"),
+            "--tw-prose-counters": theme("colors.neutral.800"),
-                fontWeight: "500",
+            "--tw-prose-bullets": theme("colors.neutral.500"),
-                "&:hover": {
+            "--tw-prose-hr": theme("colors.neutral.200"),
-                  backgroundColor: theme("colors.primary.600"),
+            "--tw-prose-quotes": theme("colors.neutral.700"),
-                  borderRadius: "0.09rem",
+            "--tw-prose-quote-borders": theme("colors.primary.200"),
-                  color: theme("colors.white"),
+            "--tw-prose-captions": theme("colors.neutral.500"),
-                  textDecoration: "none",
+            "--tw-prose-code": theme("colors.primary.700"),
-                },
+            "--tw-prose-pre-code": theme("colors.neutral.700"),
-              },
+            "--tw-prose-pre-bg": theme("colors.neutral.50"),
-              strong: {
+            "--tw-prose-th-borders": theme("colors.neutral.500"),
-                color: theme("colors.neutral.900"),
+            "--tw-prose-td-borders": theme("colors.neutral.300"),
-              },
+            "--tw-prose-invert-body": theme("colors.neutral.300"),
-              "ol > li::before": {
+            "--tw-prose-invert-headings": theme("colors.neutral.50"),
-                color: theme("colors.neutral.800"),
+            "--tw-prose-invert-lead": theme("colors.neutral.500"),
-              },
+            "--tw-prose-invert-links": theme("colors.primary.400"),
-              "ul > li::before": {
+            "--tw-prose-invert-bold": theme("colors.neutral.DEFAULT"),
-                backgroundColor: theme("colors.neutral.500"),
+            "--tw-prose-invert-counters": theme("colors.neutral.400"),
-              },
+            "--tw-prose-invert-bullets": theme("colors.neutral.600"),
-              hr: {
+            "--tw-prose-invert-hr": theme("colors.neutral.500"),
-                borderColor: theme("colors.neutral.200"),
+            "--tw-prose-invert-quotes": theme("colors.neutral.200"),
-              },
+            "--tw-prose-invert-quote-borders": theme("colors.primary.900"),
-              blockquote: {
+            "--tw-prose-invert-captions": theme("colors.neutral.400"),
-                color: theme("colors.neutral.800"),
+            "--tw-prose-invert-code": theme("colors.primary.400"),
-                borderLeftColor: theme("colors.primary.200"),
+            "--tw-prose-invert-pre-code": theme("colors.neutral.200"),
-              },
+            "--tw-prose-invert-pre-bg": theme("colors.neutral.700"),
-              h1: {
+            "--tw-prose-invert-th-borders": theme("colors.neutral.500"),
-                color: theme("colors.neutral.800"),
+            "--tw-prose-invert-td-borders": theme("colors.neutral.700"),
-                position: "relative",
+            a: {
-              },
+              textDecoration: "underline",
-              h2: {
+              textDecorationColor: theme("colors.primary.300"),
-                color: theme("colors.neutral.800"),
+              fontWeight: "500",
-                position: "relative",
+              "&:hover": {
-              },
+                color: theme("colors.neutral.DEFAULT"),
-              h3: {
+                textDecoration: "none",
-                color: theme("colors.neutral.800"),
+                backgroundColor: theme("colors.primary.600"),
-                position: "relative",
+                borderRadius: "0.09rem",
-              },
-              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",
               },
             },
-          ],
+            "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: {
+        invert: {
-          css: [
+          css: {
-            {
+            a: {
-              color: theme("colors.neutral.400"),
+              textDecorationColor: theme("colors.neutral.600"),
-              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"),
-              },
             },
-          ],
+            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")],
 };