From 2066c3b59c4c6ba087aea74f4acaac7652f3b28f Mon Sep 17 00:00:00 2001 From: Bhekani Khumalo Date: Sun, 3 Mar 2024 20:56:50 +0000 Subject: [PATCH] Add expressive code extension --- astro.config.mjs | 27 +++-- package.json | 1 + pnpm-lock.yaml | 193 ++++++++++++++++++++++++++++++++++++ src/components/Micro.astro | 16 +-- src/pages/micro/index.astro | 16 +-- 5 files changed, 227 insertions(+), 26 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index 690f742..a7d7fd0 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,12 +1,12 @@ -import mdx from "@astrojs/mdx"; -import sitemap from "@astrojs/sitemap"; -import tailwind from "@astrojs/tailwind"; -import vercel from "@astrojs/vercel/serverless"; -import sentry from "@sentry/astro"; -import robotsTxt from "astro-robots-txt"; -import { defineConfig } from "astro/config"; - -const isProduction = process.env.NODE_ENV === "production"; +import mdx from "@astrojs/mdx" +import sitemap from "@astrojs/sitemap" +import tailwind from "@astrojs/tailwind" +import vercel from "@astrojs/vercel/serverless" +import sentry from "@sentry/astro" +import expressiveCode from "astro-expressive-code" +import robotsTxt from "astro-robots-txt" +import { defineConfig } from "astro/config" +const isProduction = process.env.NODE_ENV === "production" // https://astro.build/config export default defineConfig({ @@ -16,6 +16,13 @@ export default defineConfig({ integrations: [ sitemap(), robotsTxt(), + expressiveCode({ + themes: ["one-dark-pro"], + defaultProps: { + // Enable word wrap by default + wrap: true, + }, + }), mdx(), sentry({ dsn: "https://c8fc23d45a17004cddf52ecfee998bf2@o1115887.ingest.sentry.io/4506532148936704", @@ -29,4 +36,4 @@ export default defineConfig({ }), tailwind(), ], -}); +}) diff --git a/package.json b/package.json index b31b34d..ffa7536 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@sentry/astro": "^7.102.1", "astro": "^4.4.5", "astro-embed": "^0.6.1", + "astro-expressive-code": "^0.33.4", "astro-og-canvas": "^0.4.2", "astro-robots-txt": "^1.0.0", "canvaskit-wasm": "^0.39.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 24cd30d..57761be 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -50,6 +50,9 @@ dependencies: astro-embed: specifier: ^0.6.1 version: 0.6.1(astro@4.4.5) + astro-expressive-code: + specifier: ^0.33.4 + version: 0.33.4(astro@4.4.5) astro-og-canvas: specifier: ^0.4.2 version: 0.4.2(astro@4.4.5) @@ -568,6 +571,11 @@ packages: to-fast-properties: 2.0.0 dev: false + /@ctrl/tinycolor@3.6.1: + resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==} + engines: {node: '>=10'} + dev: false + /@emmetio/abbreviation@2.3.3: resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==} dependencies: @@ -799,6 +807,38 @@ packages: dev: false optional: true + /@expressive-code/core@0.33.4: + resolution: {integrity: sha512-IywACrwcR/7cIPBQ1qG/RsgvNp85/CAX6okxR0Niztrd7rh4IcEhAsz51jX/NPNnhU9yPynTT+mLdM1URqrnvw==} + dependencies: + '@ctrl/tinycolor': 3.6.1 + hast-util-to-html: 8.0.4 + hastscript: 7.2.0 + postcss: 8.4.35 + postcss-nested: 6.0.1(postcss@8.4.35) + dev: false + + /@expressive-code/plugin-frames@0.33.4: + resolution: {integrity: sha512-6HE5f8dAPjzmhs7yZJHVyH+w/UwVpktjlTvrUumrytHo6hidGlkB5lptWJlSAd9JXzev5BQEb4xrqQ0xQqO5+A==} + dependencies: + '@expressive-code/core': 0.33.4 + hastscript: 7.2.0 + dev: false + + /@expressive-code/plugin-shiki@0.33.4: + resolution: {integrity: sha512-XnDchHqCGk046hgQnu83t9+SDrRjsvpvUEBiI0wl4RljVDr1E0yllx0y6C1yEuKfFfasib6BxX/PkItgQdi/0Q==} + dependencies: + '@expressive-code/core': 0.33.4 + shiki: 1.1.7 + dev: false + + /@expressive-code/plugin-text-markers@0.33.4: + resolution: {integrity: sha512-hl3E+8iZJMYGDaKsN4bOPOEBb9QeFjg+zQkOJRtjJgsmIYmaZpoQTzTg/JMduE8PLNsD30nAMwG/AbjN/klwZQ==} + dependencies: + '@expressive-code/core': 0.33.4 + hastscript: 7.2.0 + unist-util-visit-parents: 5.1.3 + dev: false + /@fontsource-variable/jetbrains-mono@5.0.19: resolution: {integrity: sha512-7PTG1Kp3B/FgoNVPT8da4humj5JxQYxTtO08ZPS2IfanS37Yb/WShbgScnG/iupuFwiRnHVkIuC/2czxItxmyg==} dev: false @@ -1480,6 +1520,10 @@ packages: - supports-color dev: false + /@shikijs/core@1.1.7: + resolution: {integrity: sha512-gTYLUIuD1UbZp/11qozD3fWpUTuMqPSf3svDMMrL0UmlGU7D9dPw/V1FonwAorCUJBltaaESxq90jrSjQyGixg==} + dev: false + /@tailwindcss/typography@0.5.10(tailwindcss@3.4.1): resolution: {integrity: sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==} peerDependencies: @@ -1543,6 +1587,12 @@ packages: resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} dev: false + /@types/hast@2.3.10: + resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==} + dependencies: + '@types/unist': 2.0.10 + dev: false + /@types/hast@3.0.3: resolution: {integrity: sha512-2fYGlaDy/qyLlhidX42wAH0KBi2TCjKMH8CHmBXgRlJ3Y+OXTiqsPQ6IWarZKwF1JoUcAJdPogv1d4b0COTpmQ==} dependencies: @@ -1579,6 +1629,10 @@ packages: undici-types: 5.26.5 dev: false + /@types/parse5@6.0.3: + resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==} + dev: false + /@types/sax@1.2.7: resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==} dependencies: @@ -1848,6 +1902,16 @@ packages: astro: 4.4.5(typescript@5.3.3) dev: false + /astro-expressive-code@0.33.4(astro@4.4.5): + resolution: {integrity: sha512-PtXLjd89WBA1WsDYlt3V1LZs9Pa8FFoXilaGDSyfxtbYJ2OPHjWh2JJvCiXmfXmY3HkPJ2oW9Jjo6om5vUlVcg==} + peerDependencies: + astro: ^3.3.0 || ^4.0.0-beta + dependencies: + astro: 4.4.5(typescript@5.3.3) + hast-util-to-html: 8.0.4 + remark-expressive-code: 0.33.4 + dev: false + /astro-og-canvas@0.4.2(astro@4.4.5): resolution: {integrity: sha512-OQsH6Gr2HX9ZRHdVy2OcXVBIPI65WvEtLG/60krnphh8d3ldhuAFunymYaNGcrdSZcYgXkHWejbPt//3qaRidA==} engines: {node: '>=18.14.1'} @@ -2571,6 +2635,15 @@ packages: dev: false optional: true + /expressive-code@0.33.4: + resolution: {integrity: sha512-vb6DLHjG+jbLJGTvOUhxagsru7oUiBrQEsL9+hcWJvlxIqQ5mRFqjamQS9kCIhXXbfYWiYI7/wfTGxQxuHxsZQ==} + dependencies: + '@expressive-code/core': 0.33.4 + '@expressive-code/plugin-frames': 0.33.4 + '@expressive-code/plugin-shiki': 0.33.4 + '@expressive-code/plugin-text-markers': 0.33.4 + dev: false + /extend-shallow@2.0.1: resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==} engines: {node: '>=0.10.0'} @@ -2823,6 +2896,18 @@ packages: vfile-message: 4.0.2 dev: false + /hast-util-from-parse5@7.1.2: + resolution: {integrity: sha512-Nz7FfPBuljzsN3tCQ4kCBKqdNhQE2l0Tn+X1ubgKBPRoiDIu1mL08Cfw4k7q71+Duyaw7DXDN+VTAp4Vh3oCOw==} + dependencies: + '@types/hast': 2.3.10 + '@types/unist': 2.0.10 + hastscript: 7.2.0 + property-information: 6.4.0 + vfile: 5.3.7 + vfile-location: 4.1.0 + web-namespaces: 2.0.1 + dev: false + /hast-util-from-parse5@8.0.1: resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==} dependencies: @@ -2836,12 +2921,34 @@ packages: web-namespaces: 2.0.1 dev: false + /hast-util-parse-selector@3.1.1: + resolution: {integrity: sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==} + dependencies: + '@types/hast': 2.3.10 + dev: false + /hast-util-parse-selector@4.0.0: resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==} dependencies: '@types/hast': 3.0.3 dev: false + /hast-util-raw@7.2.3: + resolution: {integrity: sha512-RujVQfVsOrxzPOPSzZFiwofMArbQke6DJjnFfceiEbFh7S05CbPt0cYN+A5YeD3pso0JQk6O1aHBnx9+Pm2uqg==} + dependencies: + '@types/hast': 2.3.10 + '@types/parse5': 6.0.3 + hast-util-from-parse5: 7.1.2 + hast-util-to-parse5: 7.1.0 + html-void-elements: 2.0.1 + parse5: 6.0.1 + unist-util-position: 4.0.4 + unist-util-visit: 4.1.2 + vfile: 5.3.7 + web-namespaces: 2.0.1 + zwitch: 2.0.4 + dev: false + /hast-util-raw@9.0.1: resolution: {integrity: sha512-5m1gmba658Q+lO5uqL5YNGQWeh1MYWZbZmWrM5lncdcuiXuo5E2HT/CIOp0rLF8ksfSwiCVJ3twlgVRyTGThGA==} dependencies: @@ -2883,6 +2990,22 @@ packages: - supports-color dev: false + /hast-util-to-html@8.0.4: + resolution: {integrity: sha512-4tpQTUOr9BMjtYyNlt0P50mH7xj0Ks2xpo8M943Vykljf99HW6EzulIoJP1N3eKOSScEHzyzi9dm7/cn0RfGwA==} + dependencies: + '@types/hast': 2.3.10 + '@types/unist': 2.0.10 + ccount: 2.0.1 + comma-separated-tokens: 2.0.3 + hast-util-raw: 7.2.3 + hast-util-whitespace: 2.0.1 + html-void-elements: 2.0.1 + property-information: 6.4.0 + space-separated-tokens: 2.0.2 + stringify-entities: 4.0.3 + zwitch: 2.0.4 + dev: false + /hast-util-to-html@9.0.0: resolution: {integrity: sha512-IVGhNgg7vANuUA2XKrT6sOIIPgaYZnmLx3l/CCOAK0PtgfoHrZwX7jCSYyFxHTrGmC6S9q8aQQekjp4JPZF+cw==} dependencies: @@ -2922,6 +3045,17 @@ packages: - supports-color dev: false + /hast-util-to-parse5@7.1.0: + resolution: {integrity: sha512-YNRgAJkH2Jky5ySkIqFXTQiaqcAtJyVE+D5lkN6CdtOqrnkLfGYYrEcKuHOJZlp+MwjSwuD3fZuawI+sic/RBw==} + dependencies: + '@types/hast': 2.3.10 + comma-separated-tokens: 2.0.3 + property-information: 6.4.0 + space-separated-tokens: 2.0.2 + web-namespaces: 2.0.1 + zwitch: 2.0.4 + dev: false + /hast-util-to-parse5@8.0.0: resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==} dependencies: @@ -2934,12 +3068,26 @@ packages: zwitch: 2.0.4 dev: false + /hast-util-whitespace@2.0.1: + resolution: {integrity: sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==} + dev: false + /hast-util-whitespace@3.0.0: resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==} dependencies: '@types/hast': 3.0.3 dev: false + /hastscript@7.2.0: + resolution: {integrity: sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==} + dependencies: + '@types/hast': 2.3.10 + comma-separated-tokens: 2.0.3 + hast-util-parse-selector: 3.1.1 + property-information: 6.4.0 + space-separated-tokens: 2.0.2 + dev: false + /hastscript@8.0.0: resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==} dependencies: @@ -2954,6 +3102,10 @@ packages: resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==} dev: false + /html-void-elements@2.0.1: + resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==} + dev: false + /html-void-elements@3.0.0: resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==} dev: false @@ -4210,6 +4362,10 @@ packages: unist-util-visit-children: 2.0.2 dev: false + /parse5@6.0.1: + resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==} + dev: false + /parse5@7.1.2: resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==} dependencies: @@ -4338,6 +4494,16 @@ packages: postcss: 8.4.33 postcss-selector-parser: 6.0.15 + /postcss-nested@6.0.1(postcss@8.4.35): + resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} + engines: {node: '>=12.0'} + peerDependencies: + postcss: ^8.2.14 + dependencies: + postcss: 8.4.35 + postcss-selector-parser: 6.0.15 + dev: false + /postcss-selector-parser@6.0.10: resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==} engines: {node: '>=4'} @@ -4525,6 +4691,14 @@ packages: unified: 11.0.4 dev: false + /remark-expressive-code@0.33.4: + resolution: {integrity: sha512-ucGzDknAY6LJKkcNSaYh9N0SEr1LDA0shageM1xa+4fu/o+7g6R1/ApF7d2c+cj1ERLvaF4OaUa87n5baY+MDA==} + dependencies: + expressive-code: 0.33.4 + hast-util-to-html: 8.0.4 + unist-util-visit: 4.1.2 + dev: false + /remark-gfm@4.0.0: resolution: {integrity: sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==} dependencies: @@ -4789,6 +4963,12 @@ packages: resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==} engines: {node: '>=8'} + /shiki@1.1.7: + resolution: {integrity: sha512-9kUTMjZtcPH3i7vHunA6EraTPpPOITYTdA5uMrvsJRexktqP0s7P3s9HVK80b4pP42FRVe03D7fT3NmJv2yYhw==} + dependencies: + '@shikijs/core': 1.1.7 + dev: false + /shikiji-core@0.9.19: resolution: {integrity: sha512-AFJu/vcNT21t0e6YrfadZ+9q86gvPum6iywRyt1OtIPjPFe25RQnYJyxHQPMLKCCWA992TPxmEmbNcOZCAJclw==} dev: false @@ -5256,6 +5436,12 @@ packages: '@types/unist': 3.0.2 dev: false + /unist-util-position@4.0.4: + resolution: {integrity: sha512-kUBE91efOWfIVBo8xzh/uZQ7p9ffYRtUbMRZBNFYwf0RK8koUMx6dGUfwylLOKmaT2cs4wSW96QoYUSXAyEtpg==} + dependencies: + '@types/unist': 2.0.10 + dev: false + /unist-util-position@5.0.0: resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==} dependencies: @@ -5356,6 +5542,13 @@ packages: filename-reserved-regex: 3.0.0 dev: false + /vfile-location@4.1.0: + resolution: {integrity: sha512-YF23YMyASIIJXpktBa4vIGLJ5Gs88UB/XePgqPmTa7cDA+JeO3yclbpheQYCHjVHBn/yePzrXuygIL+xbvRYHw==} + dependencies: + '@types/unist': 2.0.10 + vfile: 5.3.7 + dev: false + /vfile-location@5.0.2: resolution: {integrity: sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==} dependencies: diff --git a/src/components/Micro.astro b/src/components/Micro.astro index b55576f..bbf99a1 100644 --- a/src/components/Micro.astro +++ b/src/components/Micro.astro @@ -1,11 +1,11 @@ --- -import type { CollectionEntry } from "astro:content"; -import { format } from "date-fns"; -import Prose from "./Prose.astro"; +import type { CollectionEntry } from "astro:content" +import { format } from "date-fns" +import Prose from "./Prose.astro" type Props = { - micro: CollectionEntry<"micro">; -}; + micro: CollectionEntry<"micro"> +} const { micro: { @@ -13,13 +13,13 @@ const { data: { title, date }, }, micro, -} = Astro.props; +} = Astro.props -const { Content } = await micro.render(); +const { Content } = await micro.render() ---

{title}

diff --git a/src/pages/micro/index.astro b/src/pages/micro/index.astro index 3e14fea..1a830f7 100644 --- a/src/pages/micro/index.astro +++ b/src/pages/micro/index.astro @@ -1,14 +1,14 @@ --- -import { getCollection } from "astro:content"; -import MainContainer from "../../components/MainContainer.astro"; -import Micro from "../../components/Micro.astro"; -import BaseLayout from "../../layouts/BaseLayout.astro"; +import { getCollection } from "astro:content" +import MainContainer from "../../components/MainContainer.astro" +import Micro from "../../components/Micro.astro" +import BaseLayout from "../../layouts/BaseLayout.astro" -const allMicro = await getCollection("micro"); +const allMicro = await getCollection("micro") const sortedMicro = allMicro.sort( - (a, b) => b.data.date.valueOf() - a.data.date.valueOf() -); -const pageTitle = "Micro Notes"; + (a, b) => b.data.date.valueOf() - a.data.date.valueOf(), +) +const pageTitle = "Micro Notes" ---