From 9bdfb6985cea0d8e9b9c4254b9e7c125e4203035 Mon Sep 17 00:00:00 2001 From: Alessandro Cosentino Date: Thu, 21 Mar 2024 14:34:01 +0100 Subject: [PATCH] Render math in blog posts --- astro.config.mjs | 4 ++ package.json | 2 + pnpm-lock.yaml | 121 +++++++++++++++++++++++++++++++++++++++ src/layouts/Layout.astro | 4 ++ 4 files changed, 131 insertions(+) diff --git a/astro.config.mjs b/astro.config.mjs index a7e9ca87..4a98eaa2 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -6,6 +6,8 @@ import { defineConfig } from 'astro/config'; import remarkDirective from 'remark-directive'; import remarkGfm from 'remark-gfm'; import remarkOembed from 'remark-oembed'; +import remarkMath from 'remark-math'; +import rehypeKatex from 'rehype-katex'; import { imageDirective, gistDirective, @@ -49,10 +51,12 @@ export default defineConfig({ }, ], remarkDirective, + remarkMath, imageDirective, gistDirective, socialDirective, ], + rehypePlugins: [rehypeKatex], }, vite: { plugins: [svgr()], diff --git a/package.json b/package.json index a4eeda30..8436cade 100644 --- a/package.json +++ b/package.json @@ -44,8 +44,10 @@ "react-dom": "^18.0.0", "react-responsive": "^9.0.2", "react-use": "^17.4.0", + "rehype-katex": "^6.0.3", "remark-directive": "^2.0.1", "remark-gfm": "^3.0.1", + "remark-math": "^5.1.1", "remark-oembed": "^1.2.2", "swiper": "^9.3.2", "tailwind-merge": "^1.12.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c170aefa..d7c706b3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -107,12 +107,18 @@ dependencies: react-use: specifier: ^17.4.0 version: 17.4.0(react-dom@18.2.0)(react@18.2.0) + rehype-katex: + specifier: ^6.0.3 + version: 6.0.3 remark-directive: specifier: ^2.0.1 version: 2.0.1 remark-gfm: specifier: ^3.0.1 version: 3.0.1 + remark-math: + specifier: ^5.1.1 + version: 5.1.1 remark-oembed: specifier: ^1.2.2 version: 1.2.2 @@ -2246,6 +2252,14 @@ packages: resolution: {integrity: sha512-sqm9g7mHlPY/43fcSNrCYfOeX9zkTTK+euO5E6+CVijSMm5tTjkVdwdqRkY3ljjIAf8679vps5jKUoJBCLsMDA==} dev: false + /@types/katex@0.14.0: + resolution: {integrity: sha512-+2FW2CcT0K3P+JMR8YG846bmDwplKUTsWgT2ENwdQ1UdVfRk3GQrh6Mi4sTopy30gI8Uau5CEqHTDZ6YvWIUPA==} + dev: false + + /@types/katex@0.16.7: + resolution: {integrity: sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==} + dev: false + /@types/keyv@3.1.4: resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==} dependencies: @@ -2828,6 +2842,11 @@ packages: resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==} engines: {node: '>= 6'} + /commander@8.3.0: + resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==} + engines: {node: '>= 12'} + dev: false + /common-ancestor-path@1.0.1: resolution: {integrity: sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==} dev: false @@ -3472,6 +3491,32 @@ packages: dependencies: function-bind: 1.1.1 + /hast-util-from-dom@4.2.0: + resolution: {integrity: sha512-t1RJW/OpJbCAJQeKi3Qrj1cAOLA0+av/iPFori112+0X7R3wng+jxLA+kXec8K4szqPRGI8vPxbbpEYvvpwaeQ==} + dependencies: + hastscript: 7.2.0 + web-namespaces: 2.0.1 + dev: false + + /hast-util-from-html-isomorphic@1.0.0: + resolution: {integrity: sha512-Yu480AKeOEN/+l5LA674a+7BmIvtDj24GvOt7MtQWuhzUwlaaRWdEPXAh3Qm5vhuthpAipFb2vTetKXWOjmTvw==} + dependencies: + '@types/hast': 2.3.4 + hast-util-from-dom: 4.2.0 + hast-util-from-html: 1.0.2 + unist-util-remove-position: 4.0.2 + dev: false + + /hast-util-from-html@1.0.2: + resolution: {integrity: sha512-LhrTA2gfCbLOGJq2u/asp4kwuG0y6NhWTXiPKP+n0qNukKy7hc10whqqCFfyvIA1Q5U5d0sp9HhNim9gglEH4A==} + dependencies: + '@types/hast': 2.3.4 + hast-util-from-parse5: 7.1.2 + parse5: 7.1.2 + vfile: 5.3.7 + vfile-message: 3.1.4 + dev: false + /hast-util-from-parse5@7.1.2: resolution: {integrity: sha512-Nz7FfPBuljzsN3tCQ4kCBKqdNhQE2l0Tn+X1ubgKBPRoiDIu1mL08Cfw4k7q71+Duyaw7DXDN+VTAp4Vh3oCOw==} dependencies: @@ -3492,6 +3537,13 @@ packages: resolution: {integrity: sha512-oUmNua0bFbdrD/ELDSSEadRVtWZOf3iF6Lbv81naqsIV99RnSCieTbWuWCY8BAeEfKJTKl0gRdokv+dELutHGQ==} dev: false + /hast-util-is-element@2.1.3: + resolution: {integrity: sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA==} + dependencies: + '@types/hast': 2.3.4 + '@types/unist': 2.0.6 + dev: false + /hast-util-parse-selector@2.2.5: resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==} dev: false @@ -3605,6 +3657,15 @@ packages: resolution: {integrity: sha512-eK0MxRX47AV2eZ+Lyr18DCpQgodvaS3fAQO2+b9Two9F5HEoRPhiUMNzoXArMJfZi2yieFzUBMRl3HNJ3Jus3w==} dev: false + /hast-util-to-text@3.1.2: + resolution: {integrity: sha512-tcllLfp23dJJ+ju5wCCZHVpzsQQ43+moJbqVX3jNWPB7z/KFC4FyZD6R7y94cHL6MQ33YtMZL8Z0aIXXI4XFTw==} + dependencies: + '@types/hast': 2.3.4 + '@types/unist': 2.0.6 + hast-util-is-element: 2.1.3 + unist-util-find-after: 4.0.1 + dev: false + /hast-util-whitespace@1.0.4: resolution: {integrity: sha512-I5GTdSfhYfAPNztx2xJRQpG8cuDSNt599/7YUn7Gx/WxNMsG+a835k97TDkFgk123cwjfwINaZknkKkphx/f2A==} dev: false @@ -3911,6 +3972,13 @@ packages: resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==} dev: false + /katex@0.16.9: + resolution: {integrity: sha512-fsSYjWS0EEOwvy81j3vRA8TEAhQhKiqO+FQaKWp0m39qwOzHVBgAUBIXWj1pB+O2W3fIpNa6Y9KSKCVbfPhyAQ==} + hasBin: true + dependencies: + commander: 8.3.0 + dev: false + /keyv@4.5.2: resolution: {integrity: sha512-5MHbFaKn8cNSmVW7BYnijeAVlE4cYA/SVkifVgrh7yotnfhKmjuXpDKjrABLnT0SfHWV21P8ow07OGfRrNDg8g==} dependencies: @@ -4174,6 +4242,14 @@ packages: - supports-color dev: false + /mdast-util-math@2.0.2: + resolution: {integrity: sha512-8gmkKVp9v6+Tgjtq6SYx9kGPpTf6FVYRa53/DLh479aldR9AyP48qeVOgNZ5X7QUK7nOy4yw7vg6mbiGcs9jWQ==} + dependencies: + '@types/mdast': 3.0.10 + longest-streak: 3.1.0 + mdast-util-to-markdown: 1.5.0 + dev: false + /mdast-util-mdx-expression@1.3.2: resolution: {integrity: sha512-xIPmR5ReJDu/DHH1OoIT1HkuybIfRGYRywC+gJtI7qHjCJp/M9jrmBEJW22O8lskDWm562BX2W8TiAwRTb0rKA==} dependencies: @@ -4401,6 +4477,18 @@ packages: micromark-util-types: 1.0.2 dev: false + /micromark-extension-math@2.1.2: + resolution: {integrity: sha512-es0CcOV89VNS9wFmyn+wyFTKweXGW4CEvdaAca6SWRWPyYCbBisnjaHLjWO4Nszuiud84jCpkHsqAJoa768Pvg==} + dependencies: + '@types/katex': 0.16.7 + katex: 0.16.9 + micromark-factory-space: 1.0.0 + micromark-util-character: 1.1.0 + micromark-util-symbol: 1.0.1 + micromark-util-types: 1.0.2 + uvu: 0.5.6 + dev: false + /micromark-extension-mdx-expression@1.0.5: resolution: {integrity: sha512-/ruJEj+Qpgar/P+b6z0firNIbY5VMHFdL3MJDvsnVVY+RnecmGNpN7YUZhb51NfBtk7iQnNCl5xeb4E5cWxXvw==} dependencies: @@ -4931,6 +5019,12 @@ packages: resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==} dev: false + /parse5@7.1.2: + resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==} + dependencies: + entities: 4.5.0 + dev: false + /path-exists@4.0.0: resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} engines: {node: '>=8'} @@ -5306,6 +5400,17 @@ packages: resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==} dev: false + /rehype-katex@6.0.3: + resolution: {integrity: sha512-ByZlRwRUcWegNbF70CVRm2h/7xy7jQ3R9LaY4VVSvjnoVWwWVhNL60DiZsBpC5tSzYQOCvDbzncIpIjPZWodZA==} + dependencies: + '@types/hast': 2.3.4 + '@types/katex': 0.14.0 + hast-util-from-html-isomorphic: 1.0.0 + hast-util-to-text: 3.1.2 + katex: 0.16.9 + unist-util-visit: 4.1.2 + dev: false + /rehype-parse@8.0.4: resolution: {integrity: sha512-MJJKONunHjoTh4kc3dsM1v3C9kGrrxvA3U8PxZlP2SjH8RNUSrb+lF7Y0KVaUDnGH2QZ5vAn7ulkiajM9ifuqg==} dependencies: @@ -5371,6 +5476,15 @@ packages: - supports-color dev: false + /remark-math@5.1.1: + resolution: {integrity: sha512-cE5T2R/xLVtfFI4cCePtiRn+e6jKMtFDR3P8V3qpv8wpKjwvHoBA4eJzvX+nVrnlNy0911bdGmuspCSwetfYHw==} + dependencies: + '@types/mdast': 3.0.10 + mdast-util-math: 2.0.2 + micromark-extension-math: 2.1.2 + unified: 10.1.2 + dev: false + /remark-mdx@2.3.0: resolution: {integrity: sha512-g53hMkpM0I98MU266IzDFMrTD980gNF3BJnkyFcmN+dD873mQeD5rdMO3Y2X+x8umQfbSE0PcoEDl7ledSA+2g==} dependencies: @@ -5993,6 +6107,13 @@ packages: vfile: 5.3.7 dev: false + /unist-util-find-after@4.0.1: + resolution: {integrity: sha512-QO/PuPMm2ERxC6vFXEPtmAutOopy5PknD+Oq64gGwxKtk4xwo9Z97t9Av1obPmGU0IyTa6EKYUfTrK2QJS3Ozw==} + dependencies: + '@types/unist': 2.0.6 + unist-util-is: 5.2.1 + dev: false + /unist-util-generated@2.0.1: resolution: {integrity: sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A==} dev: false diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 1965cafc..62da855d 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -46,6 +46,10 @@ if (title) { as="style" onload="this.onload=null;this.rel='stylesheet'" /> + + + {metaTitle} {metaDescription && }