From 318795ef5d8104a7eb4d5cc05d91dd2186422fce Mon Sep 17 00:00:00 2001 From: Sebin Nyshkim Date: Tue, 15 Oct 2024 17:08:44 +0200 Subject: [PATCH 001/155] feat: :sparkles: add table of contents to posts --- eleventy.config.js | 6 +- package-lock.json | 160 ++++++++++++++++++++++++++++++++++++++- package.json | 2 + src/css/style.css | 6 +- src/layouts/blogpost.njk | 78 ++++++++++--------- tailwind.config.js | 8 +- 6 files changed, 218 insertions(+), 42 deletions(-) diff --git a/eleventy.config.js b/eleventy.config.js index f074d0b..deecc37 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -2,7 +2,6 @@ import fs from 'node:fs'; import { env } from 'node:process'; import { eleventyImageTransformPlugin } from '@11ty/eleventy-img'; import { feedPlugin } from '@11ty/eleventy-plugin-rss'; -import { IdAttributePlugin } from '@11ty/eleventy'; import eleventyPluginCiu from '@alexcarpenter/eleventy-plugin-caniuse'; import eleventyPluginEmbedEverything from 'eleventy-plugin-embed-everything'; import eleventyPluginLucideIcons from '@grimlink/eleventy-plugin-lucide-icons'; @@ -12,7 +11,9 @@ import eleventyPluginOgImage from 'eleventy-plugin-og-image'; import eleventyPluginReadingTime from '@myxotod/eleventy-plugin-readingtime'; import eleventyPluginRobotsTxt from 'eleventy-plugin-robotstxt'; import eleventyPluginSyntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight'; +import eleventyPluginTOC from '@thedigitalman/eleventy-plugin-toc-a11y'; import markdownItAbbr from 'markdown-it-abbr'; +import markdownItAnchor from 'markdown-it-anchor' import markdownItCallouts from 'markdown-it-obsidian-callouts'; import markdownItCollapsible from 'markdown-it-collapsible'; import markdownItFootnote from 'markdown-it-footnote'; @@ -31,13 +32,13 @@ export default async function (eleventyConfig) { return collection.getFilteredByGlob('./src/posts/*.md'); }); - eleventyConfig.addPlugin(IdAttributePlugin); eleventyConfig.addPlugin(eleventyPluginCiu); eleventyConfig.addPlugin(eleventyPluginEmbedEverything); eleventyConfig.addPlugin(eleventyPluginLucideIcons); eleventyConfig.addPlugin(eleventyPluginMetagen); eleventyConfig.addPlugin(eleventyPluginNavigation); eleventyConfig.addPlugin(eleventyPluginReadingTime); + eleventyConfig.addPlugin(eleventyPluginTOC); eleventyConfig.addPlugin(eleventyPluginRobotsTxt, { sitemapURL: 'https://blog.sebin-nyshkim.net/sitemap.xml', shouldBlockAIRobots: true, @@ -94,6 +95,7 @@ export default async function (eleventyConfig) { eleventyConfig.amendLibrary('md', (mdLib) => mdLib.use(markdownItCollapsible)); eleventyConfig.amendLibrary('md', (mdLib) => mdLib.use(markdownItCallouts)); eleventyConfig.amendLibrary('md', (mdLib) => mdLib.use(markdownItFootnote)); + eleventyConfig.amendLibrary('md', (mdLib) => mdLib.use(markdownItAnchor)); eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`); diff --git a/package-lock.json b/package-lock.json index 34a6921..ccb6afd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,12 +19,14 @@ "@myxotod/eleventy-plugin-readingtime": "^2.0.0", "@quasibit/eleventy-plugin-sitemap": "^2.2.0", "@tailwindcss/typography": "^0.5.15", + "@thedigitalman/eleventy-plugin-toc-a11y": "^2.1.0", "eleventy-google-fonts": "^0.1.0", "eleventy-plugin-embed-everything": "^1.19.0", "eleventy-plugin-metagen": "^1.8.3", "eleventy-plugin-og-image": "^4.0.0", "eleventy-plugin-robotstxt": "^1.0.0", "markdown-it-abbr": "^2.0.0", + "markdown-it-anchor": "^9.2.0", "markdown-it-collapsible": "^2.0.2", "markdown-it-footnote": "^4.0.0", "markdown-it-obsidian-callouts": "^0.3.0", @@ -1303,6 +1305,14 @@ "node": ">=4" } }, + "node_modules/@thedigitalman/eleventy-plugin-toc-a11y": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@thedigitalman/eleventy-plugin-toc-a11y/-/eleventy-plugin-toc-a11y-2.1.0.tgz", + "integrity": "sha512-vbLulpUjH+AIPFxmmLxtiTnQqfaSyCBWSLXzrrPL9Nq7//OhLBX+r28XKMi1ZX3eEnPfG7ZU0Nrny7FFoQlZDQ==", + "dependencies": { + "cheerio": "1.0.0-rc.10" + } + }, "node_modules/@types/babel-types": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-7.0.15.tgz", @@ -1333,6 +1343,28 @@ "@types/node": "*" } }, + "node_modules/@types/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==", + "peer": true + }, + "node_modules/@types/markdown-it": { + "version": "14.1.2", + "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz", + "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==", + "peer": true, + "dependencies": { + "@types/linkify-it": "^5", + "@types/mdurl": "^2" + } + }, + "node_modules/@types/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==", + "peer": true + }, "node_modules/@types/minimatch": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz", @@ -1703,6 +1735,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/boolbase": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -2122,6 +2159,67 @@ "resolved": "https://registry.npmjs.org/chardet/-/chardet-2.0.0.tgz", "integrity": "sha512-xVgPpulCooDjY6zH4m9YW3jbkaBe3FKIAvF5sj5t7aBNsVl2ljIE+xwJ4iNgiDZHFQvNIpjdKdVOQvvk5ZfxbQ==" }, + "node_modules/cheerio": { + "version": "1.0.0-rc.10", + "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.10.tgz", + "integrity": "sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==", + "dependencies": { + "cheerio-select": "^1.5.0", + "dom-serializer": "^1.3.2", + "domhandler": "^4.2.0", + "htmlparser2": "^6.1.0", + "parse5": "^6.0.1", + "parse5-htmlparser2-tree-adapter": "^6.0.1", + "tslib": "^2.2.0" + }, + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/cheeriojs/cheerio?sponsor=1" + } + }, + "node_modules/cheerio-select": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-1.6.0.tgz", + "integrity": "sha512-eq0GdBvxVFbqWgmCm7M3XGs1I8oLy/nExUnh6oLqmBditPO9AqQJrkslDpMun/hZ0yyTs8L0m85OHp4ho6Qm9g==", + "dependencies": { + "css-select": "^4.3.0", + "css-what": "^6.0.1", + "domelementtype": "^2.2.0", + "domhandler": "^4.3.1", + "domutils": "^2.8.0" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/cheerio/node_modules/entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/cheerio/node_modules/htmlparser2": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz", + "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==", + "funding": [ + "https://github.com/fb55/htmlparser2?sponsor=1", + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "dependencies": { + "domelementtype": "^2.0.1", + "domhandler": "^4.0.0", + "domutils": "^2.5.2", + "entities": "^2.0.0" + } + }, "node_modules/chokidar": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", @@ -2502,6 +2600,21 @@ "node": ">=16" } }, + "node_modules/css-select": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz", + "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==", + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^6.0.1", + "domhandler": "^4.3.1", + "domutils": "^2.8.0", + "nth-check": "^2.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/css-to-react-native": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", @@ -2513,6 +2626,17 @@ "postcss-value-parser": "^4.0.2" } }, + "node_modules/css-what": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", + "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -5145,6 +5269,15 @@ "integrity": "sha512-of7C8pXSjXjDojW4neNP+jD7inUYH/DO0Ca+K/4FUEccg0oHAEX/nfscw0jfz66PJbYWOAT9U8mjO21X5p6aAw==", "license": "MIT" }, + "node_modules/markdown-it-anchor": { + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-9.2.0.tgz", + "integrity": "sha512-sa2ErMQ6kKOA4l31gLGYliFQrMKkqSO0ZJgGhDHKijPf0pNFM9vghjAh3gn26pS4JDRs7Iwa9S36gxm3vgZTzg==", + "peerDependencies": { + "@types/markdown-it": "*", + "markdown-it": "*" + } + }, "node_modules/markdown-it-collapsible": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/markdown-it-collapsible/-/markdown-it-collapsible-2.0.2.tgz", @@ -5474,6 +5607,17 @@ "node": ">=0.10.0" } }, + "node_modules/nth-check": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", + "dependencies": { + "boolbase": "^1.0.0" + }, + "funding": { + "url": "https://github.com/fb55/nth-check?sponsor=1" + } + }, "node_modules/nunjucks": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.4.tgz", @@ -5663,6 +5807,19 @@ "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz", "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==" }, + "node_modules/parse5": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", + "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==" + }, + "node_modules/parse5-htmlparser2-tree-adapter": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz", + "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==", + "dependencies": { + "parse5": "^6.0.1" + } + }, "node_modules/parseurl": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", @@ -7518,8 +7675,7 @@ "node_modules/tslib": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz", - "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==", - "optional": true + "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==" }, "node_modules/ua-parser-js": { "version": "1.0.39", diff --git a/package.json b/package.json index 15bbfb6..5709997 100644 --- a/package.json +++ b/package.json @@ -26,12 +26,14 @@ "@myxotod/eleventy-plugin-readingtime": "^2.0.0", "@quasibit/eleventy-plugin-sitemap": "^2.2.0", "@tailwindcss/typography": "^0.5.15", + "@thedigitalman/eleventy-plugin-toc-a11y": "^2.1.0", "eleventy-google-fonts": "^0.1.0", "eleventy-plugin-embed-everything": "^1.19.0", "eleventy-plugin-metagen": "^1.8.3", "eleventy-plugin-og-image": "^4.0.0", "eleventy-plugin-robotstxt": "^1.0.0", "markdown-it-abbr": "^2.0.0", + "markdown-it-anchor": "^9.2.0", "markdown-it-collapsible": "^2.0.2", "markdown-it-footnote": "^4.0.0", "markdown-it-obsidian-callouts": "^0.3.0", diff --git a/src/css/style.css b/src/css/style.css index 3db77db..b61e81a 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -35,7 +35,11 @@ a:not(.nav-link, .read-more-button) { } .blogpost { - @apply prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl; + @apply prose prose-slate md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl; +} + +.nav-toc { + @apply sticky top-0 right-0 prose prose-sm; } .footnote-item:target p { diff --git a/src/layouts/blogpost.njk b/src/layouts/blogpost.njk index 4f96749..74a75e1 100644 --- a/src/layouts/blogpost.njk +++ b/src/layouts/blogpost.njk @@ -2,40 +2,48 @@ layout: base.njk --- -
-

{{ title }}

- - - {% if image and image.src != '' %} - {{ image.alt }} +
+ {% if toc %} + {% endif %} - {{ content | safe }} -
+
+

{{ title }}

+ + + {% if image and image.src != '' %} + {{ image.alt }} + {% endif %} + + {{ content | safe }} +
+ diff --git a/tailwind.config.js b/tailwind.config.js index 0d2c97f..d590926 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,7 +2,11 @@ export default { content: ['./src/**/*.{html,md,njk,ejs,pug}'], theme: { - extend: {} + extend: { + gridTemplateColumns: { + content: '20rem minmax(0, 1fr)' + } + } }, - plugins: [require('@tailwindcss/typography'),require("tailwindcss-safe-area")] + plugins: [require('@tailwindcss/typography'), require('tailwindcss-safe-area')] }; From 9f7387c54b4789cb1b31468c975a1742019ec2f9 Mon Sep 17 00:00:00 2001 From: Sebin Nyshkim Date: Tue, 15 Oct 2024 21:43:55 +0200 Subject: [PATCH 002/155] refactor: :recycle: make less use of @apply to reduce resulting css bundle size --- src/css/modules/buttons.css | 3 --- src/css/modules/details.css | 11 ----------- src/css/modules/navigation.css | 11 ----------- src/css/modules/pagination.css | 20 -------------------- src/css/modules/postmeta.css | 15 --------------- src/css/modules/tags.css | 7 ------- src/css/style.css | 12 +++--------- src/layouts/base.njk | 6 +++--- src/layouts/blogpost.njk | 8 ++++---- src/layouts/page.njk | 2 +- src/layouts/postlist.njk | 22 +++++++++++----------- src/posts.njk | 6 +++--- 12 files changed, 25 insertions(+), 98 deletions(-) delete mode 100644 src/css/modules/buttons.css delete mode 100644 src/css/modules/details.css delete mode 100644 src/css/modules/navigation.css delete mode 100644 src/css/modules/pagination.css delete mode 100644 src/css/modules/postmeta.css delete mode 100644 src/css/modules/tags.css diff --git a/src/css/modules/buttons.css b/src/css/modules/buttons.css deleted file mode 100644 index ad6d615..0000000 --- a/src/css/modules/buttons.css +++ /dev/null @@ -1,3 +0,0 @@ -.read-more-button { - @apply inline-flex items-center gap-2 rounded-xl bg-sky-600 px-5 py-2 text-lg font-bold text-white no-underline transition-colors duration-300 hover:bg-sky-700; -} diff --git a/src/css/modules/details.css b/src/css/modules/details.css deleted file mode 100644 index 075a7ff..0000000 --- a/src/css/modules/details.css +++ /dev/null @@ -1,11 +0,0 @@ -details { - @apply rounded-lg border border-solid border-sky-500 text-sky-500; -} - -details[open] summary { - @apply rounded-none rounded-t-lg; -} - -summary { - @apply rounded-lg bg-sky-200 p-4; -} diff --git a/src/css/modules/navigation.css b/src/css/modules/navigation.css deleted file mode 100644 index db9d084..0000000 --- a/src/css/modules/navigation.css +++ /dev/null @@ -1,11 +0,0 @@ -.eleventy-navigation .nav-list { - @apply mx-3 flex gap-2 md:mx-6 md:gap-3; -} - -.eleventy-navigation .nav-link { - @apply rounded-xl px-4 py-2 text-base sm:text-lg md:text-xl capitalize text-white transition-all duration-300 hover:bg-sky-900 hover:shadow-lg md:m-0 md:max-h-12 hover:dark:bg-sky-800; -} - -.eleventy-navigation a.active { - @apply bg-sky-900 shadow-lg dark:bg-sky-800; -} diff --git a/src/css/modules/pagination.css b/src/css/modules/pagination.css deleted file mode 100644 index 55b6c74..0000000 --- a/src/css/modules/pagination.css +++ /dev/null @@ -1,20 +0,0 @@ -.pagination { - @apply flex justify-center gap-2; -} - -.pagination a, -.pagination span { - @apply flex size-10 items-center justify-center rounded-full; -} - -.pagination [aria-current] { - @apply text-slate-300 bg-sky-600 dark:bg-slate-700; -} - -.pagination a { - @apply bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700; -} - -.pagination span { - @apply cursor-not-allowed bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700; -} diff --git a/src/css/modules/postmeta.css b/src/css/modules/postmeta.css deleted file mode 100644 index 524cafc..0000000 --- a/src/css/modules/postmeta.css +++ /dev/null @@ -1,15 +0,0 @@ -.postmeta { - @apply flex flex-wrap items-center gap-4; -} - -.postmeta > * { - @apply inline-flex items-center gap-1; -} - -.postmeta a { - @apply hover:text-sky-400; -} - -.postmeta svg { - @apply stroke-sky-600 dark:stroke-sky-600; -} diff --git a/src/css/modules/tags.css b/src/css/modules/tags.css deleted file mode 100644 index 643250b..0000000 --- a/src/css/modules/tags.css +++ /dev/null @@ -1,7 +0,0 @@ -.tags { - @apply flex gap-1; -} - -.tags .tag { - @apply inline-flex items-center gap-1 rounded-md border border-solid border-sky-500 bg-sky-200 px-1.5 py-0.5 text-sky-500 dark:border-sky-500 dark:bg-sky-950 dark:text-sky-500; -} diff --git a/src/css/style.css b/src/css/style.css index 3db77db..2fabffe 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,10 +1,4 @@ -@import url(modules/buttons.css); @import url(modules/callouts.css); -@import url(modules/details.css); -@import url(modules/navigation.css); -@import url(modules/pagination.css); -@import url(modules/postmeta.css); -@import url(modules/tags.css); @tailwind base; @tailwind components; @@ -30,13 +24,13 @@ h6 { font-variation-settings: 'XROT' 0, 'YROT' 0; } -a:not(.nav-link, .read-more-button) { +a:not(nav a, .button) { @apply font-normal text-inherit underline decoration-sky-600 decoration-2 underline-offset-4 transition-colors duration-300 hover:text-sky-600; } -.blogpost { +/* .blogpost { @apply prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl; -} +} */ .footnote-item:target p { @apply bg-slate-200 dark:bg-sky-950; diff --git a/src/layouts/base.njk b/src/layouts/base.njk index 58ef43a..9828c08 100644 --- a/src/layouts/base.njk +++ b/src/layouts/base.njk @@ -34,9 +34,9 @@ collections.all | eleventyNavigation | eleventyNavigationToHtml({ - listClass: "nav-list", - anchorClass: "nav-link", - activeAnchorClass: "active", + listClass: "mx-3 flex gap-2 md:mx-6 md:gap-3", + anchorClass: "rounded-xl px-4 py-2 text-base sm:text-lg md:text-xl capitalize text-white transition-all duration-300 hover:bg-sky-900 hover:shadow-lg md:m-0 md:max-h-12 hover:dark:bg-sky-800", + activeAnchorClass: "bg-sky-900 shadow-lg dark:bg-sky-800", activeKey: eleventyNavigation.key or page.url.split('/')[1] }) | safe diff --git a/src/layouts/blogpost.njk b/src/layouts/blogpost.njk index 4f96749..3bbd543 100644 --- a/src/layouts/blogpost.njk +++ b/src/layouts/blogpost.njk @@ -2,10 +2,10 @@ layout: base.njk --- -
+

{{ title }}