Fix column overflow and render math with KaTeX
All checks were successful
Deploy to S3 / deploy (push) Successful in 1m41s
All checks were successful
Deploy to S3 / deploy (push) Successful in 1m41s
- minmax(0,1fr)+min-width:0 and pre-wrap so a long fenced line no longer blows out the grid - build-time KaTeX via @vscode/markdown-it-katex; ship katex CSS+fonts and link in layouts
This commit is contained in:
12
.eleventy.js
12
.eleventy.js
@@ -1,5 +1,6 @@
|
||||
const Image = require("@11ty/eleventy-img");
|
||||
const path = require("path");
|
||||
const markdownItKatex = require("@vscode/markdown-it-katex").default;
|
||||
|
||||
function imageShortcode(src, alt, sizes = "100vw") {
|
||||
const inputPath = path.join("img", src);
|
||||
@@ -54,6 +55,17 @@ module.exports = function (eleventyConfig) {
|
||||
eleventyConfig.addPassthroughCopy("img");
|
||||
eleventyConfig.addPassthroughCopy("favicon.svg");
|
||||
|
||||
// KaTeX: render $$...$$ at build time into static markup. Ship katex.min.css
|
||||
// plus its fonts/ as a sibling so the stylesheet's url(fonts/...) resolves.
|
||||
eleventyConfig.addPassthroughCopy({
|
||||
"node_modules/katex/dist/katex.min.css": "css/katex.min.css",
|
||||
"node_modules/katex/dist/fonts": "css/fonts",
|
||||
});
|
||||
|
||||
eleventyConfig.amendLibrary("md", (md) => {
|
||||
md.use(markdownItKatex, { throwOnError: false, errorColor: "#cc0000" });
|
||||
});
|
||||
|
||||
eleventyConfig.addShortcode("image", imageShortcode);
|
||||
eleventyConfig.addShortcode("heroImage", heroImageShortcode);
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
<title>{% if title %}{{ title }} — un:prompted{% else %}un:prompted{% endif %}</title>
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<link rel="stylesheet" href="/css/katex.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
<title>{{ title | stripMarkdown }} — un:prompted</title>
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<link rel="stylesheet" href="/css/katex.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
|
||||
@@ -64,10 +64,17 @@ a:hover {
|
||||
|
||||
.site-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr var(--sidebar-width);
|
||||
grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
/* Let the main column shrink below its content's intrinsic width so a long
|
||||
line inside a <pre> scrolls within the box instead of blowing out the grid. */
|
||||
.content {
|
||||
min-width: 0;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
/* main content */
|
||||
|
||||
.content h1 {
|
||||
@@ -151,6 +158,8 @@ a:hover {
|
||||
background: var(--color-pre-bg);
|
||||
padding: 1rem;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap; /* soft-wrap long lines (these fences hold prose) */
|
||||
overflow-wrap: anywhere; /* break a hypothetical unbroken token too */
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
|
||||
@@ -8,6 +8,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@11ty/eleventy": "^3.0.0",
|
||||
"@11ty/eleventy-img": "^5.0.0"
|
||||
"@11ty/eleventy-img": "^5.0.0",
|
||||
"@vscode/markdown-it-katex": "^1.1.2",
|
||||
"katex": "^0.17.0"
|
||||
}
|
||||
}
|
||||
|
||||
26
yarn.lock
26
yarn.lock
@@ -281,6 +281,13 @@
|
||||
dependencies:
|
||||
escape-string-regexp "^5.0.0"
|
||||
|
||||
"@vscode/markdown-it-katex@^1.1.2":
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@vscode/markdown-it-katex/-/markdown-it-katex-1.1.2.tgz#6ec355c5ec82d019f13a511e2363525384c91155"
|
||||
integrity sha512-+4IIv5PgrmhKvW/3LpkpkGg257OViEhXkOOgCyj5KMsjsOfnRXkni8XAuuF9Ui5p3B8WnUovlDXAQNb8RJ/RaQ==
|
||||
dependencies:
|
||||
katex "^0.16.4"
|
||||
|
||||
a-sync-waterfall@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz#75b6b6aa72598b497a125e7a2770f14f4c8a1fa7"
|
||||
@@ -430,6 +437,11 @@ commander@^5.1.0:
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
|
||||
integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
|
||||
|
||||
commander@^8.3.0:
|
||||
version "8.3.0"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
|
||||
integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
|
||||
|
||||
concat-map@0.0.1:
|
||||
version "0.0.1"
|
||||
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
|
||||
@@ -806,6 +818,20 @@ junk@^3.1.0:
|
||||
resolved "https://registry.yarnpkg.com/junk/-/junk-3.1.0.tgz#31499098d902b7e98c5d9b9c80f43457a88abfa1"
|
||||
integrity sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==
|
||||
|
||||
katex@^0.16.4:
|
||||
version "0.16.47"
|
||||
resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.47.tgz#0a13a42c2deb4f74e61f162d440b9165a548030f"
|
||||
integrity sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg==
|
||||
dependencies:
|
||||
commander "^8.3.0"
|
||||
|
||||
katex@^0.17.0:
|
||||
version "0.17.0"
|
||||
resolved "https://registry.yarnpkg.com/katex/-/katex-0.17.0.tgz#536e25874ec9ac8728e3b4b7bf7fec6557b7dbf4"
|
||||
integrity sha512-Vdw0ATsQ9V+LuegM/BTwQqV/6cTl5lbGcIrU+BCgLxyf6bo38ybOr372tuSIxir3CN720flu1meYR6XzNMwQnw==
|
||||
dependencies:
|
||||
commander "^8.3.0"
|
||||
|
||||
keyv@^4.5.3:
|
||||
version "4.5.4"
|
||||
resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
|
||||
|
||||
Reference in New Issue
Block a user