diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index ed0353c..c45dae6 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -54,6 +54,7 @@ + diff --git a/css/prism-theme.css b/css/prism-theme.css new file mode 100644 index 0000000..e0d988c --- /dev/null +++ b/css/prism-theme.css @@ -0,0 +1,201 @@ +/* Syntax Highlighting — PrismJS theme for indiekit-eleventy-theme + Light mode: clean, high-contrast colors + Dark mode: scoped under .dark (Tailwind darkMode: "class") */ + +/* ── Base code block styling ── */ +code[class*="language-"], +pre[class*="language-"] { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 0.875em; + line-height: 1.7; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + tab-size: 2; + hyphens: none; +} + +pre[class*="language-"] { + padding: 1.25em; + margin: 1.5em 0; + overflow: auto; + border-radius: 0.5rem; +} + +:not(pre) > code[class*="language-"] { + padding: 0.2em 0.4em; + border-radius: 0.25rem; + white-space: normal; +} + +/* ── Light Mode ── */ +code[class*="language-"], +pre[class*="language-"] { + color: #24292e; +} + +pre[class*="language-"] { + background: #f6f8fa; + border: 1px solid #e1e4e8; +} + +:not(pre) > code[class*="language-"] { + background: #f6f8fa; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #6a737d; +} + +.token.punctuation { + color: #24292e; +} + +.token.namespace { + opacity: 0.7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #005cc5; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #032f62; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #d73a49; +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #d73a49; +} + +.token.function, +.token.class-name { + color: #6f42c1; +} + +.token.regex, +.token.important, +.token.variable { + color: #e36209; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + +/* Line highlighting */ +.highlight-line-active { + background-color: #fffbdd; + display: inline-block; + width: calc(100% + 2.5em); + margin-left: -1.25em; + padding-left: 1.25em; +} + +/* ── Dark Mode ── */ +.dark code[class*="language-"], +.dark pre[class*="language-"] { + color: #e1e4e8; +} + +.dark pre[class*="language-"] { + background: #161b22; + border-color: #30363d; +} + +.dark :not(pre) > code[class*="language-"] { + background: #161b22; +} + +.dark .token.comment, +.dark .token.prolog, +.dark .token.doctype, +.dark .token.cdata { + color: #8b949e; +} + +.dark .token.punctuation { + color: #e1e4e8; +} + +.dark .token.property, +.dark .token.tag, +.dark .token.boolean, +.dark .token.number, +.dark .token.constant, +.dark .token.symbol, +.dark .token.deleted { + color: #79c0ff; +} + +.dark .token.selector, +.dark .token.attr-name, +.dark .token.string, +.dark .token.char, +.dark .token.builtin, +.dark .token.inserted { + color: #a5d6ff; +} + +.dark .token.operator, +.dark .token.entity, +.dark .token.url, +.dark .language-css .token.string, +.dark .style .token.string { + color: #ff7b72; +} + +.dark .token.atrule, +.dark .token.attr-value, +.dark .token.keyword { + color: #ff7b72; +} + +.dark .token.function, +.dark .token.class-name { + color: #d2a8ff; +} + +.dark .token.regex, +.dark .token.important, +.dark .token.variable { + color: #ffa657; +} + +.dark .highlight-line-active { + background-color: rgba(56, 139, 253, 0.15); +} diff --git a/css/tailwind.css b/css/tailwind.css index 7d0ccb6..e3cd346 100644 --- a/css/tailwind.css +++ b/css/tailwind.css @@ -441,6 +441,11 @@ @apply break-words; } + pre code { + word-break: normal; + overflow-wrap: normal; + } + /* Links in content - break long URLs */ .e-content a, .prose a { @@ -448,10 +453,10 @@ word-break: break-word; } - /* Content containers - prevent horizontal overflow */ + /* Content containers - clip horizontal overflow but allow pre blocks to scroll */ .e-content, .prose { - @apply overflow-x-hidden; + overflow-x: clip; max-width: 100%; } diff --git a/eleventy.config.js b/eleventy.config.js index 0b674db..df4ee89 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -4,6 +4,7 @@ import embedEverything from "eleventy-plugin-embed-everything"; import { eleventyImageTransformPlugin } from "@11ty/eleventy-img"; import sitemap from "@quasibit/eleventy-plugin-sitemap"; import markdownIt from "markdown-it"; +import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight"; import { minify } from "html-minifier-terser"; import { createHash } from "crypto"; import { execFileSync } from "child_process"; @@ -49,6 +50,9 @@ export default function (eleventyConfig) { }); eleventyConfig.setLibrary("md", md); + // Syntax highlighting for fenced code blocks (```lang) + eleventyConfig.addPlugin(syntaxHighlight); + // RSS plugin for feed filters (dateToRfc822, absoluteUrl, etc.) // Custom feed templates in feed.njk and feed-json.njk use these filters eleventyConfig.addPlugin(pluginRss); diff --git a/package-lock.json b/package-lock.json index 7aca266..a786c65 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,23 +1,25 @@ { - "name": "rmendes-eleventy-site", + "name": "indiekit-eleventy-theme", "version": "1.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "rmendes-eleventy-site", + "name": "indiekit-eleventy-theme", "version": "1.0.0", "dependencies": { "@11ty/eleventy": "^3.0.0", "@11ty/eleventy-fetch": "^4.0.1", "@11ty/eleventy-img": "^6.0.0", "@11ty/eleventy-plugin-rss": "^2.0.2", + "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2", "@atproto/api": "^0.12.0", "@chrisburnell/eleventy-cache-webmentions": "^2.2.7", "@quasibit/eleventy-plugin-sitemap": "^2.2.0", "eleventy-plugin-embed-everything": "^1.21.0", "html-minifier-terser": "^7.0.0", "markdown-it": "^14.0.0", + "pagefind": "^1.3.0", "rss-parser": "^3.13.0" }, "devDependencies": { @@ -226,6 +228,19 @@ "url": "https://opencollective.com/11ty" } }, + "node_modules/@11ty/eleventy-plugin-syntaxhighlight": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-5.0.2.tgz", + "integrity": "sha512-T6xVVRDJuHlrFMHbUiZkHjj5o1IlLzZW+1IL9eUsyXFU7rY2ztcYhZew/64vmceFFpQwzuSfxQOXxTJYmKkQ+A==", + "license": "MIT", + "dependencies": { + "prismjs": "^1.30.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/11ty" + } + }, "node_modules/@11ty/eleventy-utils": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-2.0.7.tgz", @@ -894,6 +909,84 @@ "node": ">= 8" } }, + "node_modules/@pagefind/darwin-arm64": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@pagefind/darwin-arm64/-/darwin-arm64-1.4.0.tgz", + "integrity": "sha512-2vMqkbv3lbx1Awea90gTaBsvpzgRs7MuSgKDxW0m9oV1GPZCZbZBJg/qL83GIUEN2BFlY46dtUZi54pwH+/pTQ==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@pagefind/darwin-x64": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@pagefind/darwin-x64/-/darwin-x64-1.4.0.tgz", + "integrity": "sha512-e7JPIS6L9/cJfow+/IAqknsGqEPjJnVXGjpGm25bnq+NPdoD3c/7fAwr1OXkG4Ocjx6ZGSCijXEV4ryMcH2E3A==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@pagefind/freebsd-x64": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@pagefind/freebsd-x64/-/freebsd-x64-1.4.0.tgz", + "integrity": "sha512-WcJVypXSZ+9HpiqZjFXMUobfFfZZ6NzIYtkhQ9eOhZrQpeY5uQFqNWLCk7w9RkMUwBv1HAMDW3YJQl/8OqsV0Q==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ] + }, + "node_modules/@pagefind/linux-arm64": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@pagefind/linux-arm64/-/linux-arm64-1.4.0.tgz", + "integrity": "sha512-PIt8dkqt4W06KGmQjONw7EZbhDF+uXI7i0XtRLN1vjCUxM9vGPdtJc2mUyVPevjomrGz5M86M8bqTr6cgDp1Uw==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@pagefind/linux-x64": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@pagefind/linux-x64/-/linux-x64-1.4.0.tgz", + "integrity": "sha512-z4oddcWwQ0UHrTHR8psLnVlz6USGJ/eOlDPTDYZ4cI8TK8PgwRUPQZp9D2iJPNIPcS6Qx/E4TebjuGJOyK8Mmg==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@pagefind/windows-x64": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@pagefind/windows-x64/-/windows-x64-1.4.0.tgz", + "integrity": "sha512-NkT+YAdgS2FPCn8mIA9bQhiBs+xmniMGq1LFPDhcFn0+2yIUEiIG06t7bsZlhdjknEQRTSdT7YitP6fC5qwP0g==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, "node_modules/@quasibit/eleventy-plugin-sitemap": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@quasibit/eleventy-plugin-sitemap/-/eleventy-plugin-sitemap-2.2.0.tgz", @@ -3079,6 +3172,23 @@ "node": ">=8" } }, + "node_modules/pagefind": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/pagefind/-/pagefind-1.4.0.tgz", + "integrity": "sha512-z2kY1mQlL4J8q5EIsQkLzQjilovKzfNVhX8De6oyE6uHpfFtyBaqUpcl/XzJC/4fjD8vBDyh1zolimIcVrCn9g==", + "license": "MIT", + "bin": { + "pagefind": "lib/runner/bin.cjs" + }, + "optionalDependencies": { + "@pagefind/darwin-arm64": "1.4.0", + "@pagefind/darwin-x64": "1.4.0", + "@pagefind/freebsd-x64": "1.4.0", + "@pagefind/linux-arm64": "1.4.0", + "@pagefind/linux-x64": "1.4.0", + "@pagefind/windows-x64": "1.4.0" + } + }, "node_modules/param-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", @@ -3478,6 +3588,15 @@ "node": ">= 0.8" } }, + "node_modules/prismjs": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz", + "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/prr": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", diff --git a/package.json b/package.json index 39ea7f8..7fe874a 100644 --- a/package.json +++ b/package.json @@ -10,23 +10,24 @@ }, "dependencies": { "@11ty/eleventy": "^3.0.0", - "html-minifier-terser": "^7.0.0", - "markdown-it": "^14.0.0", "@11ty/eleventy-fetch": "^4.0.1", "@11ty/eleventy-img": "^6.0.0", "@11ty/eleventy-plugin-rss": "^2.0.2", + "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2", + "@atproto/api": "^0.12.0", "@chrisburnell/eleventy-cache-webmentions": "^2.2.7", "@quasibit/eleventy-plugin-sitemap": "^2.2.0", - "@atproto/api": "^0.12.0", "eleventy-plugin-embed-everything": "^1.21.0", - "rss-parser": "^3.13.0", - "pagefind": "^1.3.0" + "html-minifier-terser": "^7.0.0", + "markdown-it": "^14.0.0", + "pagefind": "^1.3.0", + "rss-parser": "^3.13.0" }, "devDependencies": { - "tailwindcss": "^3.4.0", + "@tailwindcss/typography": "^0.5.0", + "autoprefixer": "^10.4.0", "postcss": "^8.4.0", "postcss-cli": "^11.0.0", - "autoprefixer": "^10.4.0", - "@tailwindcss/typography": "^0.5.0" + "tailwindcss": "^3.4.0" } }