From 4dadd988f4a476d153448f939bf0aba3ed6cada4 Mon Sep 17 00:00:00 2001 From: Juan Manzanero <59628111+juancmandev@users.noreply.github.com> Date: Sat, 12 Oct 2024 13:49:49 -0600 Subject: [PATCH] Add css optimization and improve images (#20) * fix video url * update deploy script for using rsync * remove delete from script * translate resources page * fix images dimensions and favicon * add css optimization plugin and improve images --- astro.config.mjs | 35 ++++--- package.json | 1 + pnpm-lock.yaml | 133 ++++++++++++++++++++++----- src/components/header.astro | 4 +- src/components/mdx/astro-image.astro | 5 +- 5 files changed, 136 insertions(+), 42 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index efa1df6..7016427 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -6,26 +6,23 @@ import rehypePrettyCode from "rehype-pretty-code"; import rehypeSlug from "rehype-slug"; import sitemap from "@astrojs/sitemap"; +import playformInline from "@playform/inline"; + // https://astro.build/config export default defineConfig({ site: "https://juancman.dev/", - integrations: [ - sitemap(), - react(), - tailwind({ - applyBaseStyles: false, - }), - mdx({ - syntaxHighlight: false, - rehypePlugins: [ - rehypeSlug, - [ - rehypePrettyCode, - { - theme: "catppuccin-mocha", - }, - ], + integrations: [sitemap(), react(), tailwind({ + applyBaseStyles: false, + }), mdx({ + syntaxHighlight: false, + rehypePlugins: [ + rehypeSlug, + [ + rehypePrettyCode, + { + theme: "catppuccin-mocha", + }, ], - }), - ], -}); + ], + }), playformInline()], +}); \ No newline at end of file diff --git a/package.json b/package.json index 7916a69..7ca88a2 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@astrojs/sitemap": "^3.1.6", "@astrojs/tailwind": "^5.1.0", "@astrojs/vercel": "^7.7.2", + "@playform/inline": "^0.1.0", "@radix-ui/react-slot": "^1.1.0", "@tailwindcss/typography": "^0.5.13", "@types/react": "^18.3.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f3682d1..55f3ec1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,10 +13,10 @@ importers: version: 0.7.0(typescript@5.5.2) '@astrojs/mdx': specifier: ^3.1.2 - version: 3.1.2(astro@4.11.3(typescript@5.5.2)) + version: 3.1.2(astro@4.11.3(@types/node@20.14.12)(typescript@5.5.2)) '@astrojs/react': specifier: ^3.6.0 - version: 3.6.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.3.1) + version: 3.6.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.3.1(@types/node@20.14.12)) '@astrojs/rss': specifier: ^4.0.7 version: 4.0.7 @@ -25,10 +25,13 @@ importers: version: 3.1.6 '@astrojs/tailwind': specifier: ^5.1.0 - version: 5.1.0(astro@4.11.3(typescript@5.5.2))(tailwindcss@3.4.4) + version: 5.1.0(astro@4.11.3(@types/node@20.14.12)(typescript@5.5.2))(tailwindcss@3.4.4) '@astrojs/vercel': specifier: ^7.7.2 - version: 7.7.2(astro@4.11.3(typescript@5.5.2))(react@18.3.1) + version: 7.7.2(astro@4.11.3(@types/node@20.14.12)(typescript@5.5.2))(react@18.3.1) + '@playform/inline': + specifier: ^0.1.0 + version: 0.1.0(@types/node@20.14.12)(typescript@5.5.2) '@radix-ui/react-slot': specifier: ^1.1.0 version: 1.1.0(@types/react@18.3.3)(react@18.3.1) @@ -43,7 +46,7 @@ importers: version: 18.3.0 astro: specifier: ^4.11.3 - version: 4.11.3(typescript@5.5.2) + version: 4.11.3(@types/node@20.14.12)(typescript@5.5.2) class-variance-authority: specifier: ^0.7.0 version: 0.7.0 @@ -629,6 +632,12 @@ packages: resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} + '@playform/inline@0.1.0': + resolution: {integrity: sha512-IDy8oH1UH9qFz2swmL6sgODWrvNltf0L3VrHCoDemW9GjDNbdEIoDafDMdC5gw3C92Fn/jUBA+tYvy+j7/mqFw==} + + '@playform/pipe@0.1.0': + resolution: {integrity: sha512-EiY5y81BKSIBduFDM9UAN9RISQptYd8TR1UWTx1H/5Tm86AHxjAm/fiGqUuWwZShBqc5K1TY4ynkT6dpp1r7UQ==} + '@radix-ui/react-compose-refs@1.1.0': resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==} peerDependencies: @@ -793,6 +802,9 @@ packages: '@types/node@17.0.45': resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==} + '@types/node@20.14.12': + resolution: {integrity: sha512-r7wNXakLeSsGT0H1AU863vS2wa5wBOK4bWMjZz2wj+8nBx+m5PeIn0k8AloSLpRuiwdRQZwarZqHE4FNArPuJQ==} + '@types/prop-types@15.7.12': resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==} @@ -1027,6 +1039,10 @@ packages: resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==} engines: {node: '>=4'} + chalk@4.1.2: + resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==} + engines: {node: '>=10'} + chalk@5.3.0: resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==} engines: {node: ^12.17.0 || ^14.13 || >=16.0.0} @@ -1132,6 +1148,9 @@ packages: resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==} engines: {node: '>= 0.6'} + critters@0.0.24: + resolution: {integrity: sha512-Oyqew0FGM0wYUSNqR0L6AteO5MpMoUU0rhKRieXeiKs+PmRTxiJMyaunYB2KF6fQ3dzChXKCpbFOEJx3OQ1v/Q==} + cross-spawn@7.0.3: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} @@ -1163,6 +1182,10 @@ packages: decode-named-character-reference@1.0.2: resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==} + deepmerge-ts@7.1.0: + resolution: {integrity: sha512-q6bNsfNBtgr8ZOQqmZbl94MmYWm+QcDNIkqCxVWiw1vKvf+y/N2dZQKdnDXn4c5Ygt/y63tDof6OCN+2YwWVEg==} + engines: {node: '>=16.0.0'} + deepmerge@4.3.1: resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==} engines: {node: '>=0.10.0'} @@ -1412,6 +1435,10 @@ packages: resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==} engines: {node: '>=4'} + has-flag@4.0.0: + resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==} + engines: {node: '>=8'} + has-unicode@2.0.1: resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==} @@ -2138,6 +2165,9 @@ packages: ts-node: optional: true + postcss-media-query-parser@0.2.3: + resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==} + postcss-nested@6.0.1: resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} engines: {node: '>=12.0'} @@ -2440,6 +2470,10 @@ packages: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} engines: {node: '>=4'} + supports-color@7.2.0: + resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} + engines: {node: '>=8'} + supports-preserve-symlinks-flag@1.0.0: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} @@ -2522,6 +2556,9 @@ packages: ultrahtml@1.5.3: resolution: {integrity: sha512-GykOvZwgDWZlTQMtp5jrD4BVL+gNn2NVlVafjcFUJ7taY20tqYdwdoWBFy6GBJsNTZe1GkGPkSl5knQAjtgceg==} + undici-types@5.26.5: + resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==} + unified@11.0.5: resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==} @@ -2850,12 +2887,12 @@ snapshots: transitivePeerDependencies: - supports-color - '@astrojs/mdx@3.1.2(astro@4.11.3(typescript@5.5.2))': + '@astrojs/mdx@3.1.2(astro@4.11.3(@types/node@20.14.12)(typescript@5.5.2))': dependencies: '@astrojs/markdown-remark': 5.1.1 '@mdx-js/mdx': 3.0.1 acorn: 8.12.0 - astro: 4.11.3(typescript@5.5.2) + astro: 4.11.3(@types/node@20.14.12)(typescript@5.5.2) es-module-lexer: 1.5.4 estree-util-visit: 2.0.0 github-slugger: 2.0.0 @@ -2875,11 +2912,11 @@ snapshots: dependencies: prismjs: 1.29.0 - '@astrojs/react@3.6.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.3.1)': + '@astrojs/react@3.6.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.3.1(@types/node@20.14.12))': dependencies: '@types/react': 18.3.3 '@types/react-dom': 18.3.0 - '@vitejs/plugin-react': 4.3.1(vite@5.3.1) + '@vitejs/plugin-react': 4.3.1(vite@5.3.1(@types/node@20.14.12)) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) ultrahtml: 1.5.3 @@ -2898,9 +2935,9 @@ snapshots: stream-replace-string: 2.0.0 zod: 3.23.8 - '@astrojs/tailwind@5.1.0(astro@4.11.3(typescript@5.5.2))(tailwindcss@3.4.4)': + '@astrojs/tailwind@5.1.0(astro@4.11.3(@types/node@20.14.12)(typescript@5.5.2))(tailwindcss@3.4.4)': dependencies: - astro: 4.11.3(typescript@5.5.2) + astro: 4.11.3(@types/node@20.14.12)(typescript@5.5.2) autoprefixer: 10.4.19(postcss@8.4.38) postcss: 8.4.38 postcss-load-config: 4.0.2(postcss@8.4.38) @@ -2920,13 +2957,13 @@ snapshots: transitivePeerDependencies: - supports-color - '@astrojs/vercel@7.7.2(astro@4.11.3(typescript@5.5.2))(react@18.3.1)': + '@astrojs/vercel@7.7.2(astro@4.11.3(@types/node@20.14.12)(typescript@5.5.2))(react@18.3.1)': dependencies: '@astrojs/internal-helpers': 0.4.1 '@vercel/analytics': 1.3.1(react@18.3.1) '@vercel/edge': 1.1.1 '@vercel/nft': 0.27.2 - astro: 4.11.3(typescript@5.5.2) + astro: 4.11.3(@types/node@20.14.12)(typescript@5.5.2) esbuild: 0.21.5 fast-glob: 3.3.2 set-cookie-parser: 2.6.0 @@ -3369,6 +3406,28 @@ snapshots: '@pkgjs/parseargs@0.11.0': optional: true + '@playform/inline@0.1.0(@types/node@20.14.12)(typescript@5.5.2)': + dependencies: + '@playform/pipe': 0.1.0 + astro: 4.11.3(@types/node@20.14.12)(typescript@5.5.2) + critters: 0.0.24 + transitivePeerDependencies: + - '@types/node' + - less + - lightningcss + - sass + - stylus + - sugarss + - supports-color + - terser + - typescript + + '@playform/pipe@0.1.0': + dependencies: + '@types/node': 20.14.12 + deepmerge-ts: 7.1.0 + fast-glob: 3.3.2 + '@radix-ui/react-compose-refs@1.1.0(@types/react@18.3.3)(react@18.3.1)': dependencies: react: 18.3.1 @@ -3509,6 +3568,10 @@ snapshots: '@types/node@17.0.45': {} + '@types/node@20.14.12': + dependencies: + undici-types: 5.26.5 + '@types/prop-types@15.7.12': {} '@types/react-dom@18.3.0': @@ -3560,14 +3623,14 @@ snapshots: - encoding - supports-color - '@vitejs/plugin-react@4.3.1(vite@5.3.1)': + '@vitejs/plugin-react@4.3.1(vite@5.3.1(@types/node@20.14.12))': dependencies: '@babel/core': 7.24.7 '@babel/plugin-transform-react-jsx-self': 7.24.7(@babel/core@7.24.7) '@babel/plugin-transform-react-jsx-source': 7.24.7(@babel/core@7.24.7) '@types/babel__core': 7.20.5 react-refresh: 0.14.2 - vite: 5.3.1 + vite: 5.3.1(@types/node@20.14.12) transitivePeerDependencies: - supports-color @@ -3697,7 +3760,7 @@ snapshots: astring@1.8.6: {} - astro@4.11.3(typescript@5.5.2): + astro@4.11.3(@types/node@20.14.12)(typescript@5.5.2): dependencies: '@astrojs/compiler': 2.8.1 '@astrojs/internal-helpers': 0.4.1 @@ -3755,8 +3818,8 @@ snapshots: tsconfck: 3.1.0(typescript@5.5.2) unist-util-visit: 5.0.0 vfile: 6.0.1 - vite: 5.3.1 - vitefu: 0.2.5(vite@5.3.1) + vite: 5.3.1(@types/node@20.14.12) + vitefu: 0.2.5(vite@5.3.1(@types/node@20.14.12)) which-pm: 2.2.0 yargs-parser: 21.1.1 zod: 3.23.8 @@ -3849,6 +3912,11 @@ snapshots: escape-string-regexp: 1.0.5 supports-color: 5.5.0 + chalk@4.1.2: + dependencies: + ansi-styles: 4.3.0 + supports-color: 7.2.0 + chalk@5.3.0: {} character-entities-html4@2.1.0: {} @@ -3937,6 +4005,16 @@ snapshots: cookie@0.6.0: {} + critters@0.0.24: + dependencies: + chalk: 4.1.2 + css-select: 5.1.0 + dom-serializer: 2.0.0 + domhandler: 5.0.3 + htmlparser2: 8.0.2 + postcss: 8.4.38 + postcss-media-query-parser: 0.2.3 + cross-spawn@7.0.3: dependencies: path-key: 3.1.1 @@ -3965,6 +4043,8 @@ snapshots: dependencies: character-entities: 2.0.2 + deepmerge-ts@7.1.0: {} + deepmerge@4.3.1: {} delegates@1.0.0: {} @@ -4232,6 +4312,8 @@ snapshots: has-flag@3.0.0: {} + has-flag@4.0.0: {} + has-unicode@2.0.1: {} hasown@2.0.2: @@ -5251,6 +5333,8 @@ snapshots: optionalDependencies: postcss: 8.4.38 + postcss-media-query-parser@0.2.3: {} + postcss-nested@6.0.1(postcss@8.4.38): dependencies: postcss: 8.4.38 @@ -5649,6 +5733,10 @@ snapshots: dependencies: has-flag: 3.0.0 + supports-color@7.2.0: + dependencies: + has-flag: 4.0.0 + supports-preserve-symlinks-flag@1.0.0: {} tailwind-merge@2.3.0: @@ -5738,6 +5826,8 @@ snapshots: ultrahtml@1.5.3: {} + undici-types@5.26.5: {} + unified@11.0.5: dependencies: '@types/unist': 3.0.2 @@ -5818,17 +5908,18 @@ snapshots: unist-util-stringify-position: 4.0.0 vfile-message: 4.0.2 - vite@5.3.1: + vite@5.3.1(@types/node@20.14.12): dependencies: esbuild: 0.21.5 postcss: 8.4.38 rollup: 4.18.0 optionalDependencies: + '@types/node': 20.14.12 fsevents: 2.3.3 - vitefu@0.2.5(vite@5.3.1): + vitefu@0.2.5(vite@5.3.1(@types/node@20.14.12)): optionalDependencies: - vite: 5.3.1 + vite: 5.3.1(@types/node@20.14.12) volar-service-css@0.0.45(@volar/language-service@2.2.5): dependencies: diff --git a/src/components/header.astro b/src/components/header.astro index e8447b9..7211c78 100644 --- a/src/components/header.astro +++ b/src/components/header.astro @@ -44,7 +44,9 @@ const { lang } = Astro.props; width={80} height={80} loading="eager" - class="w-auto h-auto" + decoding="sync" + fetchpriority="high" + class="w-auto h-auto aspect-square" alt="juancmandev logo" /> diff --git a/src/components/mdx/astro-image.astro b/src/components/mdx/astro-image.astro index c9da1a8..a7e6f12 100644 --- a/src/components/mdx/astro-image.astro +++ b/src/components/mdx/astro-image.astro @@ -6,15 +6,18 @@ const props = Astro.props; {props.alt}