diff --git a/astro.config.mjs b/astro.config.mjs index 8e96e04..4c7aa1c 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -6,7 +6,6 @@ import sitemap from "@astrojs/sitemap"; import theme from "./horizon-italic.json"; import partytown from "@astrojs/partytown"; import vue from "@astrojs/vue"; -import react from "@astrojs/react"; // https://astro.build/config export default defineConfig({ @@ -25,8 +24,7 @@ export default defineConfig({ }), sitemap(), partytown(), - react(), - vue(), + vue({ exclude: ["**/*.tsx"] }), ], markdown: { remarkPlugins: [ diff --git a/package.json b/package.json index 2d3ebd2..a54ab33 100644 --- a/package.json +++ b/package.json @@ -16,18 +16,14 @@ }, "dependencies": { "@astrojs/partytown": "^2.0.3", - "@astrojs/prefetch": "^0.4.1", - "@astrojs/react": "^3.0.9", "@astrojs/rss": "4.0.1", "@astrojs/vercel": "^6.1.1", "@astrojs/vue": "^4.0.6", - "@builder.io/qwik": "^1.3.1", "@fullcalendar/core": "6.1.10", "@fullcalendar/daygrid": "6.1.10", "@fullcalendar/interaction": "6.1.10", "@fullcalendar/vue3": "^6.1.10", "@giscus/vue": "^2.4.0", - "@qwikdev/astro": "^0.3.4", "@vercel/analytics": "1.1.1", "@vitejs/plugin-legacy": "5.2.0", "astro": "4.0.8", @@ -35,8 +31,6 @@ "fuse.js": "7.0.0", "github-slugger": "2.0.0", "prettier-plugin-astro": "0.12.3", - "react": "^18.2.0", - "react-dom": "^18.2.0", "remark-collapse": "0.1.2", "remark-toc": "9.0.0", "satori": "0.10.11", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d9268b3..16a0f21 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,9 +8,6 @@ dependencies: '@astrojs/partytown': specifier: ^2.0.3 version: 2.0.3 - '@astrojs/prefetch': - specifier: ^0.4.1 - version: 0.4.1 '@astrojs/react': specifier: ^3.0.9 version: 3.0.9(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0)(vite@5.0.10) @@ -23,9 +20,6 @@ dependencies: '@astrojs/vue': specifier: ^4.0.6 version: 4.0.6(@babel/core@7.23.7)(astro@4.0.8)(vite@5.0.10)(vue@3.4.3) - '@builder.io/qwik': - specifier: ^1.3.1 - version: 1.3.1(@types/node@18.18.8)(terser@5.26.0)(undici@5.28.2) '@fullcalendar/core': specifier: 6.1.10 version: 6.1.10 @@ -41,9 +35,6 @@ dependencies: '@giscus/vue': specifier: ^2.4.0 version: 2.4.0(vue@3.4.3) - '@qwikdev/astro': - specifier: ^0.3.4 - version: 0.3.4(@builder.io/qwik@1.3.1)(typescript@5.3.3)(vite@5.0.10) '@vercel/analytics': specifier: 1.1.1 version: 1.1.1 @@ -180,13 +171,6 @@ packages: mrmime: 1.0.1 dev: false - /@astrojs/prefetch@0.4.1: - resolution: {integrity: sha512-bpC875BqeIuWVgqhi4X814ftzzbKocaLkiZczaj8k5J2SRpueIGkww3XmD+yY/Ekkm9j30aS3neVO6wSm4IJNA==} - deprecated: '@astrojs/prefetch is deprecated in favor of the builtin prefetch option. Please see the migration guide for more information: https://docs.astro.build/en/guides/prefetch/#migrating-from-astrojsprefetch' - dependencies: - throttles: 1.0.1 - dev: false - /@astrojs/prism@3.0.0: resolution: {integrity: sha512-g61lZupWq1bYbcBnYZqdjndShr/J3l/oFobBKPA3+qMat146zce3nz2kdO4giGbhYDt4gYdhmoBz0vZJ4sIurQ==} engines: {node: '>=18.14.1'} @@ -1630,26 +1614,6 @@ packages: hasBin: true dev: false - /@builder.io/qwik@1.3.1(@types/node@18.18.8)(terser@5.26.0)(undici@5.28.2): - resolution: {integrity: sha512-XbA/pzLVZJ7HXLApyk1jRVYTwZdHEq3vGcnOi/ZS7GKGvkEWKCRMWIV+5dVJKjBS0jxtYcj07w52HmkPbQiVMw==} - engines: {node: '>=16.8.0 <18.0.0 || >=18.11'} - hasBin: true - peerDependencies: - undici: ^5.14.0 - dependencies: - csstype: 3.1.3 - undici: 5.28.2 - vite: 5.0.10(@types/node@18.18.8)(terser@5.26.0) - transitivePeerDependencies: - - '@types/node' - - less - - lightningcss - - sass - - stylus - - sugarss - - terser - dev: false - /@commitlint/config-validator@18.4.3: resolution: {integrity: sha512-FPZZmTJBARPCyef9ohRC9EANiQEKSWIdatx5OlgeHKu878dWwpyeFauVkhzuBRJFcCA4Uvz/FDtlDKs008IHcA==} engines: {node: '>=v18'} @@ -2079,11 +2043,6 @@ packages: requiresBuild: true optional: true - /@fastify/busboy@2.1.0: - resolution: {integrity: sha512-+KpH+QxZU7O4675t3mnkQKcZZg56u+K/Ct2K+N2AZYNVK8kyeo/bI18tI8aPm3tvNNRyTWfj6s5tnGNlcbQRsA==} - engines: {node: '>=14'} - dev: false - /@fullcalendar/core@6.1.10: resolution: {integrity: sha512-oTXGJSAGpCf1oY+CKp5qYjMHkJCPBkJ3SHitl63n8Q6xKeiwQ4EF6Au451euUovREwJpLmD1AyZrCnWmtB9AVg==} dependencies: @@ -2388,20 +2347,6 @@ packages: requiresBuild: true optional: true - /@qwikdev/astro@0.3.4(@builder.io/qwik@1.3.1)(typescript@5.3.3)(vite@5.0.10): - resolution: {integrity: sha512-1aMv6+HRjhDcYr7d1+mwsKQ6SiTFylW/fE67cMuJqnxZcg/XJY5Q3pF5yBCXCuUVCrk0BWa3/HdkMVLNcm/kHw==} - peerDependencies: - '@builder.io/qwik': ^1.3 - dependencies: - '@builder.io/qwik': 1.3.1(@types/node@18.18.8)(terser@5.26.0)(undici@5.28.2) - fs-extra: 11.2.0 - vite-tsconfig-paths: 4.2.3(typescript@5.3.3)(vite@5.0.10) - transitivePeerDependencies: - - supports-color - - typescript - - vite - dev: false - /@rollup/pluginutils@4.2.1: resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==} engines: {node: '>= 8.0.0'} @@ -3899,15 +3844,6 @@ packages: resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} dev: true - /fs-extra@11.2.0: - resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==} - engines: {node: '>=14.14'} - dependencies: - graceful-fs: 4.2.11 - jsonfile: 6.1.0 - universalify: 2.0.1 - dev: false - /fs-extra@9.1.0: resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==} engines: {node: '>=10'} @@ -4045,10 +3981,6 @@ packages: resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==} engines: {node: '>=4'} - /globrex@0.1.2: - resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==} - dev: false - /graceful-fs@4.2.11: resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} @@ -4444,6 +4376,7 @@ packages: universalify: 2.0.0 optionalDependencies: graceful-fs: 4.2.11 + dev: true /kind-of@6.0.3: resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==} @@ -6309,11 +6242,6 @@ packages: dependencies: any-promise: 1.3.0 - /throttles@1.0.1: - resolution: {integrity: sha512-fab7Xg+zELr9KOv4fkaBoe/b3L0GMGLd0IBSCn16GoE/Qx6/OfCr1eGNyEcDU2pUA79qQfZ8kPQWlRuok4YwTw==} - engines: {node: '>=6'} - dev: false - /through@2.3.8: resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==} dev: true @@ -6352,19 +6280,6 @@ packages: /ts-interface-checker@0.1.13: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} - /tsconfck@2.1.2(typescript@5.3.3): - resolution: {integrity: sha512-ghqN1b0puy3MhhviwO2kGF8SeMDNhEbnKxjK7h6+fvY9JAxqvXi8y5NAHSQv687OVboS2uZIByzGd45/YxrRHg==} - engines: {node: ^14.13.1 || ^16 || >=18} - hasBin: true - peerDependencies: - typescript: ^4.3.5 || ^5.0.0 - peerDependenciesMeta: - typescript: - optional: true - dependencies: - typescript: 5.3.3 - dev: false - /tsconfck@3.0.0(typescript@5.3.3): resolution: {integrity: sha512-w3wnsIrJNi7avf4Zb0VjOoodoO0woEqGgZGQm+LHH9przdUI+XDKsWAXwxHA1DaRTjeuZNcregSzr7RaA8zG9A==} engines: {node: ^18 || >=20} @@ -6412,13 +6327,6 @@ packages: resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==} requiresBuild: true - /undici@5.28.2: - resolution: {integrity: sha512-wh1pHJHnUeQV5Xa8/kyQhO7WFa8M34l026L5P/+2TYiakvGy5Rdc8jWZVyG7ieht/0WgJLEd3kcU5gKx+6GC8w==} - engines: {node: '>=14.0'} - dependencies: - '@fastify/busboy': 2.1.0 - dev: false - /unherit@3.0.1: resolution: {integrity: sha512-akOOQ/Yln8a2sgcLj4U0Jmx0R5jpIg2IUyRrWOzmEbjBtGzBdHtSeFKgoEcoH4KYIG/Pb8GQ/BwtYm0GCq1Sqg==} @@ -6539,11 +6447,7 @@ packages: /universalify@2.0.0: resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==} engines: {node: '>= 10.0.0'} - - /universalify@2.0.1: - resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==} - engines: {node: '>= 10.0.0'} - dev: false + dev: true /update-browserslist-db@1.0.13(browserslist@4.22.1): resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==} @@ -6610,23 +6514,6 @@ packages: unist-util-stringify-position: 4.0.0 vfile-message: 4.0.2 - /vite-tsconfig-paths@4.2.3(typescript@5.3.3)(vite@5.0.10): - resolution: {integrity: sha512-xVsA2xe6QSlzBujtWF8q2NYexh7PAUYfzJ4C8Axpe/7d2pcERYxuxGgph9F4f0iQO36g5tyGq6eBUYIssdUrVw==} - peerDependencies: - vite: '*' - peerDependenciesMeta: - vite: - optional: true - dependencies: - debug: 4.3.4 - globrex: 0.1.2 - tsconfck: 2.1.2(typescript@5.3.3) - vite: 5.0.10(@types/node@18.18.8)(terser@5.26.0) - transitivePeerDependencies: - - supports-color - - typescript - dev: false - /vite@5.0.10(@types/node@18.18.8)(terser@5.26.0): resolution: {integrity: sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==} engines: {node: ^18.0.0 || >=20.0.0} diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index af87cf3..cdd31a0 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -94,7 +94,7 @@ const isBlogPost = activeNav.startsWith("posty/"); - {isBlogPost && } + {isBlogPost && }
diff --git a/src/utils/generateOgImage.ts b/src/utils/generateOgImage.ts new file mode 100644 index 0000000..1d57fec --- /dev/null +++ b/src/utils/generateOgImage.ts @@ -0,0 +1,183 @@ +import satori, { type SatoriOptions } from "satori"; +import { stringToUint8Array, toUint8Array } from "uint8array-extras"; +import sharp from "sharp"; +import { SITE } from "@config"; + +const fetchFonts = async () => { + // Regular Font + const fontFileRegular = await fetch( + "https://www.1001fonts.com/download/font/ibm-plex-mono.regular.ttf" + ); + const fontRegular = await fontFileRegular.arrayBuffer(); + + // Bold Font + const fontFileBold = await fetch( + "https://www.1001fonts.com/download/font/ibm-plex-mono.bold.ttf" + ); + const fontBold = await fontFileBold.arrayBuffer(); + + return { + fontRegular: toUint8Array(fontRegular), + fontBold: toUint8Array(fontBold), + }; +}; + +const { fontRegular, fontBold } = await fetchFonts(); + +const ogImage = (text: string) => { + return { + type: "div", + props: { + style: { + background: "#fefbfb", + width: "100%", + height: "100%", + display: "flex", + alignItems: "center", + justifyContent: "center", + }, + childen: [ + { + type: "div", + props: { + style: { + position: "absolute", + top: "-1px", + right: "-1px", + border: "4px solid #000", + background: "#ecebeb", + opacity: "0.9", + borderRadius: "4px", + display: "flex", + justifyContent: "center", + margin: "2.5rem", + width: "88%", + height: "80%", + }, + }, + }, + { + type: "div", + props: { + style: { + border: "4px solid #000", + background: "#fefbfb", + borderRadius: "4px", + display: "flex", + justifyContent: "center", + margin: "2rem", + width: "88%", + height: "80%", + }, + children: [ + { + type: "div", + props: { + style: { + display: "flex", + flexDirection: "column", + justifyContent: "space-between", + margin: "20px", + width: "90%", + height: "90%", + }, + children: [ + { + type: "p", + props: { + style: { + fontSize: 72, + fontWeight: "bold", + maxHeight: "84%", + overflow: "hidden", + }, + children: text, + }, + }, + { + type: "div", + props: { + style: { + display: "flex", + justifyContent: "space-between", + width: "100%", + marginBottom: "8px", + fontSize: 28, + }, + children: [ + { + type: "span", + props: { + style: { + overflow: "hidden", + fontWeight: "bold", + }, + children: "by", + }, + }, + { + type: "span", + props: { + style: { + overflow: "hidden", + fontWeight: "bold", + }, + children: SITE.author, + }, + }, + text !== SITE.title + ? { + type: "span", + props: { + style: { + overflow: "hidden", + fontWeight: "bold", + }, + children: SITE.title, + }, + } + : undefined, + ], + }, + }, + ], + }, + }, + ], + }, + }, + ], + }, + }; +}; + +const options = { + width: 1200, + height: 630, + embedFont: true, + fonts: [ + { + name: "IBM Plex Mono", + data: fontRegular, + weight: 400, + style: "normal", + }, + { + name: "IBM Plex Mono", + data: fontBold, + weight: 600, + style: "normal", + }, + ], +} satisfies SatoriOptions; + +const generateOgImage = async (myText = SITE.title) => { + const svg = await satori(ogImage(myText) as any, options); + const uint8Array = stringToUint8Array(svg); + const png = sharp(uint8Array).png(); + const buffer = await png.toBuffer(); + + return toUint8Array(buffer); +}; + +export default generateOgImage; diff --git a/src/utils/generateOgImage.tsx b/src/utils/generateOgImage.tsx deleted file mode 100644 index 2e9c872..0000000 --- a/src/utils/generateOgImage.tsx +++ /dev/null @@ -1,162 +0,0 @@ -import satori, { type SatoriOptions } from "satori"; -import { stringToUint8Array, toUint8Array } from "uint8array-extras"; -import sharp from "sharp"; -import { SITE } from "@config"; - -const fetchFonts = async () => { - // Regular Font - const fontFileRegular = await fetch( - "https://www.1001fonts.com/download/font/ibm-plex-mono.regular.ttf" - ); - const fontRegular = await fontFileRegular.arrayBuffer(); - - // Bold Font - const fontFileBold = await fetch( - "https://www.1001fonts.com/download/font/ibm-plex-mono.bold.ttf" - ); - const fontBold = await fontFileBold.arrayBuffer(); - - return { - fontRegular: toUint8Array(fontRegular), - fontBold: toUint8Array(fontBold), - }; -}; - -const { fontRegular, fontBold } = await fetchFonts(); - -const ogImage = (text: string) => { - return ( -
-
- -
-
-

- {text} -

-
- - by{" "} - - " - - - {SITE.author} - - - - {text !== SITE.title && ( - - {SITE.title} - - )} -
-
-
-
- ); -}; - -const options = { - width: 1200, - height: 630, - embedFont: true, - fonts: [ - { - name: "IBM Plex Mono", - data: fontRegular, - weight: 400, - style: "normal", - }, - { - name: "IBM Plex Mono", - data: fontBold, - weight: 600, - style: "normal", - }, - ], -} satisfies SatoriOptions; - -const generateOgImage = async (myText = SITE.title) => { - const svg = await satori(ogImage(myText), options); - const uint8Array = stringToUint8Array(svg); - const png = sharp(uint8Array).png(); - const buffer = await png.toBuffer(); - - return toUint8Array(buffer); -}; - -export default generateOgImage;