From dc42b224b7fcbd99b763aa0862189584fb21a5ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafael=20Gonz=C3=A1lez?= Date: Wed, 17 Aug 2022 23:38:12 -0500 Subject: [PATCH] Added blog list --- astro.config.mjs | 10 +- package.json | 1 + pnpm-lock.yaml | 340 +++++++++++++++++++ src/data/profile.json | 2 +- src/layouts/main.astro | 82 +++++ src/pages/blog.astro | 10 + src/pages/blog/optimizeing-shopify-theme.mdx | 66 ++++ src/pages/index.astro | 113 ++---- src/styles/base.css | 42 +++ tailwind.config.js | 8 + 10 files changed, 582 insertions(+), 92 deletions(-) create mode 100644 src/layouts/main.astro create mode 100644 src/pages/blog.astro create mode 100644 src/pages/blog/optimizeing-shopify-theme.mdx create mode 100644 src/styles/base.css create mode 100644 tailwind.config.js diff --git a/astro.config.mjs b/astro.config.mjs index cbb8460..cef18f2 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -3,8 +3,14 @@ import svelte from "@astrojs/svelte"; import { defineConfig } from "astro/config"; import sitemap from "@astrojs/sitemap"; +import mdx from "@astrojs/mdx"; + // https://astro.build/config export default defineConfig({ - site: "https://rafa.page", - integrations: [tailwind(), svelte(), sitemap()] + site: "https://rafa.page", + integrations: [tailwind({ + config: { + applyBaseStyles: false, + } + }), svelte(), sitemap(), mdx()] }); \ No newline at end of file diff --git a/package.json b/package.json index acba642..d92156f 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "preview": "astro preview" }, "devDependencies": { + "@astrojs/mdx": "^0.9.0", "@astrojs/sitemap": "^1.0.0", "@astrojs/svelte": "^1.0.0", "@astrojs/tailwind": "^1.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 84f9a4f..bd57795 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,6 +1,7 @@ lockfileVersion: 5.3 specifiers: + '@astrojs/mdx': ^0.9.0 '@astrojs/sitemap': ^1.0.0 '@astrojs/svelte': ^1.0.0 '@astrojs/tailwind': ^1.0.0 @@ -8,6 +9,7 @@ specifiers: svelte: ^3.49.0 devDependencies: + '@astrojs/mdx': 0.9.0 '@astrojs/sitemap': 1.0.0 '@astrojs/svelte': 1.0.0_svelte@3.49.0 '@astrojs/tailwind': 1.0.0 @@ -72,6 +74,30 @@ packages: - supports-color dev: true + /@astrojs/mdx/0.9.0: + resolution: {integrity: sha512-Z6W7YvCc36BenJZGkcG0oFi01OswR6KhUDWXL06prhgu51YSlKrpcvpykruGXaDQb1YkqGi3yxmWAmQwzgx6pQ==} + engines: {node: ^14.18.0 || >=16.12.0} + dependencies: + '@astrojs/prism': 1.0.1 + '@mdx-js/mdx': 2.1.2 + '@mdx-js/rollup': 2.1.2 + acorn: 8.8.0 + es-module-lexer: 0.10.5 + github-slugger: 1.4.0 + gray-matter: 4.0.3 + rehype-raw: 6.1.1 + remark-frontmatter: 4.0.1 + remark-gfm: 3.0.1 + remark-shiki-twoslash: 3.1.0 + remark-smartypants: 2.0.0 + shiki: 0.10.1 + unist-util-visit: 4.1.0 + vfile: 5.3.4 + transitivePeerDependencies: + - rollup + - supports-color + dev: true + /@astrojs/micromark-extension-mdx-jsx/1.0.3: resolution: {integrity: sha512-O15+i2DGG0qb1R/1SYbFXgOKDGbYdV8iJMtuboVb1S9YFQfMOJxaCMco0bhXQI7PmZcQ4pZWIjT5oZ64dXUtRA==} dependencies: @@ -456,6 +482,43 @@ packages: resolution: {integrity: sha512-4/RWEeXDO6bocPONheFe6gX/oQdP/bEpv0oL4HqjPP5DCenBSt0mHgahppY49N0CpsaqffdwPq+TlX9CYOq2Dw==} dev: true + /@mdx-js/mdx/2.1.2: + resolution: {integrity: sha512-ASN1GUH0gXsgJ2UD/Td7FzJo1SwFkkQ5V1i9at5o/ROra7brkyMcBsotsOWJWRzmXZaLw2uXWn4aN8B3PMNFMA==} + dependencies: + '@types/estree-jsx': 0.0.1 + '@types/mdx': 2.0.2 + astring: 1.8.3 + estree-util-build-jsx: 2.2.0 + estree-util-is-identifier-name: 2.0.1 + estree-walker: 3.0.1 + hast-util-to-estree: 2.1.0 + markdown-extensions: 1.1.1 + periscopic: 3.0.4 + remark-mdx: 2.1.2 + remark-parse: 10.0.1 + remark-rehype: 10.1.0 + unified: 10.1.2 + unist-util-position-from-estree: 1.1.1 + unist-util-stringify-position: 3.0.2 + unist-util-visit: 4.1.0 + vfile: 5.3.4 + transitivePeerDependencies: + - supports-color + dev: true + + /@mdx-js/rollup/2.1.2: + resolution: {integrity: sha512-3ahqp3DCpIlGlCRuLX4z7dFEgN5kWBljrk8BpipiWkVrvB4FQpTQu1T7lmDffm8tOunjHAsZEHtb076HiW51NQ==} + peerDependencies: + rollup: '>=2' + dependencies: + '@mdx-js/mdx': 2.1.2 + '@rollup/pluginutils': 4.2.1 + source-map: 0.7.4 + vfile: 5.3.4 + transitivePeerDependencies: + - supports-color + dev: true + /@nodelib/fs.scandir/2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -576,6 +639,10 @@ packages: resolution: {integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==} dev: true + /@types/mdx/2.0.2: + resolution: {integrity: sha512-mJGfgj4aWpiKb8C0nnJJchs1sHBHn0HugkVfqqyQi7Wn6mBRksLeQsPOFvih/Pu8L1vlDzfe/LidhVHBeUk3aQ==} + dev: true + /@types/ms/0.7.31: resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==} dev: true @@ -622,6 +689,32 @@ packages: resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==} dev: true + /@typescript/twoslash/3.1.0: + resolution: {integrity: sha512-kTwMUQ8xtAZaC4wb2XuLkPqFVBj2dNBueMQ89NWEuw87k2nLBbuafeG5cob/QEr6YduxIdTVUjix0MtC7mPlmg==} + dependencies: + '@typescript/vfs': 1.3.5 + debug: 4.3.4 + lz-string: 1.4.4 + transitivePeerDependencies: + - supports-color + dev: true + + /@typescript/vfs/1.3.4: + resolution: {integrity: sha512-RbyJiaAGQPIcAGWFa3jAXSuAexU4BFiDRF1g3hy7LmRqfNpYlTQWGXjcrOaVZjJ8YkkpuwG0FcsYvtWQpd9igQ==} + dependencies: + debug: 4.3.4 + transitivePeerDependencies: + - supports-color + dev: true + + /@typescript/vfs/1.3.5: + resolution: {integrity: sha512-pI8Saqjupf9MfLw7w2+og+fmb0fZS0J6vsKXXrp4/PDXEFvntgzXmChCXC/KefZZS0YGS6AT8e0hGAJcTsdJlg==} + dependencies: + debug: 4.3.4 + transitivePeerDependencies: + - supports-color + dev: true + /@vscode/emmet-helper/2.8.4: resolution: {integrity: sha512-lUki5QLS47bz/U8IlG9VQ+1lfxMtxMZENmU5nu4Z71eOD5j9FK0SmYGL5NiVJg9WBWeAU0VxRADMY2Qpq7BfVg==} dependencies: @@ -730,6 +823,11 @@ packages: tslib: 2.4.0 dev: true + /astring/1.8.3: + resolution: {integrity: sha512-sRpyiNrx2dEYIMmUXprS8nlpRg2Drs8m9ElX9vVEXaCB4XEAJhKfs7IcX0IwShjuOAjLR6wzIrgoptz1n19i1A==} + hasBin: true + dev: true + /astro/1.0.3: resolution: {integrity: sha512-QaKFZIhraQaoWqg7s7wNCAuMI+r50UzmnlWhQAl7IMJ0RQ00IVwAi1sV7IMjf2h/iRT/b87xqN4aNlBDWf/qyg==} engines: {node: ^14.18.0 || >=16.12.0, npm: '>=6.14.0'} @@ -1386,6 +1484,20 @@ packages: hasBin: true dev: true + /estree-util-attach-comments/2.1.0: + resolution: {integrity: sha512-rJz6I4L0GaXYtHpoMScgDIwM0/Vwbu5shbMeER596rB2D1EWF6+Gj0e0UKzJPZrpoOc87+Q2kgVFHfjAymIqmw==} + dependencies: + '@types/estree': 1.0.0 + dev: true + + /estree-util-build-jsx/2.2.0: + resolution: {integrity: sha512-apsfRxF9uLrqosApvHVtYZjISPvTJ+lBiIydpC+9wE6cF6ssbhnjyQLqaIjgzGxvC2Hbmec1M7g91PoBayYoQQ==} + dependencies: + '@types/estree-jsx': 1.0.0 + estree-util-is-identifier-name: 2.0.1 + estree-walker: 3.0.1 + dev: true + /estree-util-is-identifier-name/2.0.1: resolution: {integrity: sha512-rxZj1GkQhY4x1j/CSnybK9cGuMFQYFPLq0iNyopqf14aOVLFtMv7Esika+ObJWPWiOHuMOAHz3YkWoLYYRnzWQ==} dev: true @@ -1401,6 +1513,10 @@ packages: resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} dev: true + /estree-walker/3.0.1: + resolution: {integrity: sha512-woY0RUD87WzMBUiZLx8NsYr23N5BKsOMZHhu2hoNRVh6NXGfoiT1KOL8G3UHlJAnEDGmfa5ubNA/AacfG+Kb0g==} + dev: true + /execa/6.1.0: resolution: {integrity: sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -1444,6 +1560,17 @@ packages: reusify: 1.0.4 dev: true + /fault/2.0.1: + resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==} + dependencies: + format: 0.2.2 + dev: true + + /fenceparser/1.1.1: + resolution: {integrity: sha512-VdkTsK7GWLT0VWMK5S5WTAPn61wJ98WPFwJiRHumhg4ESNUO/tnkU8bzzzc62o6Uk1SVhuZFLnakmDA4SGV7wA==} + engines: {node: '>=12'} + dev: true + /fetch-blob/3.2.0: resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==} engines: {node: ^12.20 || >= 14.13} @@ -1482,6 +1609,11 @@ packages: pkg-dir: 4.2.0 dev: true + /format/0.2.2: + resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==} + engines: {node: '>=0.4.x'} + dev: true + /formdata-polyfill/4.0.10: resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==} engines: {node: '>=12.20.0'} @@ -1644,6 +1776,28 @@ packages: zwitch: 2.0.2 dev: true + /hast-util-to-estree/2.1.0: + resolution: {integrity: sha512-Vwch1etMRmm89xGgz+voWXvVHba2iiMdGMKmaMfYt35rbVtFDq8JNwwAIvi8zHMkO6Gvqo9oTMwJTmzVRfXh4g==} + dependencies: + '@types/estree': 1.0.0 + '@types/estree-jsx': 1.0.0 + '@types/hast': 2.3.4 + '@types/unist': 2.0.6 + comma-separated-tokens: 2.0.2 + estree-util-attach-comments: 2.1.0 + estree-util-is-identifier-name: 2.0.1 + hast-util-whitespace: 2.0.0 + mdast-util-mdx-expression: 1.3.0 + mdast-util-mdxjs-esm: 1.3.0 + property-information: 6.1.1 + space-separated-tokens: 2.0.1 + style-to-object: 0.3.0 + unist-util-position: 4.0.3 + zwitch: 2.0.2 + transitivePeerDependencies: + - supports-color + dev: true + /hast-util-to-html/8.0.3: resolution: {integrity: sha512-/D/E5ymdPYhHpPkuTHOUkSatxr4w1ZKrZsG0Zv/3C2SRVT0JFJG53VS45AMrBtYk0wp5A7ksEhiC8QaOZM95+A==} dependencies: @@ -1806,6 +1960,12 @@ packages: engines: {node: '>=12'} dev: true + /is-reference/3.0.0: + resolution: {integrity: sha512-Eo1W3wUoHWoCoVM4GVl/a+K0IgiqE5aIo4kJABFyMum1ZORlPkC+UC357sSQUL5w5QCE5kCC9upl75b7+7CY/Q==} + dependencies: + '@types/estree': 1.0.0 + dev: true + /is-stream/3.0.0: resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -1928,6 +2088,11 @@ packages: yallist: 4.0.0 dev: true + /lz-string/1.4.4: + resolution: {integrity: sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==} + hasBin: true + dev: true + /magic-string/0.25.9: resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==} dependencies: @@ -1941,6 +2106,11 @@ packages: sourcemap-codec: 1.4.8 dev: true + /markdown-extensions/1.1.1: + resolution: {integrity: sha512-WWC0ZuMzCyDHYCasEGs4IPvLyTGftYwh6wIEOULOF0HXcqZlhwRzrK0w2VUlxWA98xnvb/jszw4ZSkJ6ADpM6Q==} + engines: {node: '>=0.10.0'} + dev: true + /markdown-table/3.0.2: resolution: {integrity: sha512-y8j3a5/DkJCmS5x4dMCQL+OR0+2EAq3DOtio1COSHsmW2BGXnNCK3v12hJt1LrUz5iZH5g0LmuYOjDdI+czghA==} dev: true @@ -1980,6 +2150,12 @@ packages: - supports-color dev: true + /mdast-util-frontmatter/1.0.0: + resolution: {integrity: sha512-7itKvp0arEVNpCktOET/eLFAYaZ+0cNjVtFtIPxgQ5tV+3i+D4SDDTjTzPWl44LT59PC+xdx+glNTawBdF98Mw==} + dependencies: + micromark-extension-frontmatter: 1.0.0 + dev: true + /mdast-util-gfm-autolink-literal/1.0.2: resolution: {integrity: sha512-FzopkOd4xTTBeGXhXSBU0OCDDh5lUj2rd+HQqG92Ld+jL4lpUfgX2AT2OHAVP9aEeDKp7G92fuooSZcYJA3cRg==} dependencies: @@ -2060,6 +2236,43 @@ packages: vfile-message: 3.1.2 dev: true + /mdast-util-mdx-jsx/2.1.0: + resolution: {integrity: sha512-KzgzfWMhdteDkrY4mQtyvTU5bc/W4ppxhe9SzelO6QUUiwLAM+Et2Dnjjprik74a336kHdo0zKm7Tp+n6FFeRg==} + dependencies: + '@types/estree-jsx': 1.0.0 + '@types/hast': 2.3.4 + '@types/mdast': 3.0.10 + ccount: 2.0.1 + mdast-util-to-markdown: 1.3.0 + parse-entities: 4.0.0 + stringify-entities: 4.0.3 + unist-util-remove-position: 4.0.1 + unist-util-stringify-position: 3.0.2 + vfile-message: 3.1.2 + dev: true + + /mdast-util-mdx/2.0.0: + resolution: {integrity: sha512-M09lW0CcBT1VrJUaF/PYxemxxHa7SLDHdSn94Q9FhxjCQfuW7nMAWKWimTmA3OyDMSTH981NN1csW1X+HPSluw==} + dependencies: + mdast-util-mdx-expression: 1.3.0 + mdast-util-mdx-jsx: 2.1.0 + mdast-util-mdxjs-esm: 1.3.0 + transitivePeerDependencies: + - supports-color + dev: true + + /mdast-util-mdxjs-esm/1.3.0: + resolution: {integrity: sha512-7N5ihsOkAEGjFotIX9p/YPdl4TqUoMxL4ajNz7PbT89BqsdWJuBC9rvgt6wpbwTZqWWR0jKWqQbwsOWDBUZv4g==} + dependencies: + '@types/estree-jsx': 1.0.0 + '@types/hast': 2.3.4 + '@types/mdast': 3.0.10 + mdast-util-from-markdown: 1.2.0 + mdast-util-to-markdown: 1.3.0 + transitivePeerDependencies: + - supports-color + dev: true + /mdast-util-to-hast/12.2.0: resolution: {integrity: sha512-YDwT5KhGzLgPpSnQhAlK1+WpCW4gsPmNNAxUNMkMTDhxQyPp2eX86WOelnKnLKEvSpfxqJbPbInHFkefXZBhEA==} dependencies: @@ -2126,6 +2339,14 @@ packages: uvu: 0.5.6 dev: true + /micromark-extension-frontmatter/1.0.0: + resolution: {integrity: sha512-EXjmRnupoX6yYuUJSQhrQ9ggK0iQtQlpi6xeJzVD5xscyAI+giqco5fdymayZhJMbIFecjnE2yz85S9NzIgQpg==} + dependencies: + fault: 2.0.1 + micromark-util-character: 1.1.0 + micromark-util-symbol: 1.0.1 + dev: true + /micromark-extension-gfm-autolink-literal/1.0.3: resolution: {integrity: sha512-i3dmvU0htawfWED8aHMMAzAVp/F0Z+0bPh3YrbTPPL1v4YAlCZpy5rBO5p0LPYiZo0zFVkoYh7vDU7yQSiCMjg==} dependencies: @@ -2211,12 +2432,52 @@ packages: uvu: 0.5.6 dev: true + /micromark-extension-mdx-jsx/1.0.3: + resolution: {integrity: sha512-VfA369RdqUISF0qGgv2FfV7gGjHDfn9+Qfiv5hEwpyr1xscRj/CiVRkU7rywGFCO7JwJ5L0e7CJz60lY52+qOA==} + dependencies: + '@types/acorn': 4.0.6 + estree-util-is-identifier-name: 2.0.1 + micromark-factory-mdx-expression: 1.0.6 + 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 + vfile-message: 3.1.2 + dev: true + /micromark-extension-mdx-md/1.0.0: resolution: {integrity: sha512-xaRAMoSkKdqZXDAoSgp20Azm0aRQKGOl0RrS81yGu8Hr/JhMsBmfs4wR7m9kgVUIO36cMUQjNyiyDKPrsv8gOw==} dependencies: micromark-util-types: 1.0.2 dev: true + /micromark-extension-mdxjs-esm/1.0.3: + resolution: {integrity: sha512-2N13ol4KMoxb85rdDwTAC6uzs8lMX0zeqpcyx7FhS7PxXomOnLactu8WI8iBNXW8AVyea3KIJd/1CKnUmwrK9A==} + dependencies: + micromark-core-commonmark: 1.0.6 + micromark-util-character: 1.1.0 + micromark-util-events-to-acorn: 1.2.0 + micromark-util-symbol: 1.0.1 + micromark-util-types: 1.0.2 + unist-util-position-from-estree: 1.1.1 + uvu: 0.5.6 + vfile-message: 3.1.2 + dev: true + + /micromark-extension-mdxjs/1.0.0: + resolution: {integrity: sha512-TZZRZgeHvtgm+IhtgC2+uDMR7h8eTKF0QUX9YsgoL9+bADBpBY6SiLvWqnBlLbCEevITmTqmEuY3FoxMKVs1rQ==} + dependencies: + acorn: 8.8.0 + acorn-jsx: 5.3.2_acorn@8.8.0 + micromark-extension-mdx-expression: 1.0.3 + micromark-extension-mdx-jsx: 1.0.3 + micromark-extension-mdx-md: 1.0.0 + micromark-extension-mdxjs-esm: 1.0.3 + micromark-util-combine-extensions: 1.0.0 + micromark-util-types: 1.0.2 + dev: true + /micromark-factory-destination/1.0.0: resolution: {integrity: sha512-eUBA7Rs1/xtTVun9TmV3gjfPz2wEwgK5R5xcbIM5ZYAtvGF6JkyaDsj0agx8urXnO31tEO6Ug83iVH3tdedLnw==} dependencies: @@ -2652,6 +2913,13 @@ packages: resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==} dev: true + /periscopic/3.0.4: + resolution: {integrity: sha512-SFx68DxCv0Iyo6APZuw/AKewkkThGwssmU0QWtTlvov3VAtPX+QJ4CadwSaz8nrT5jPIuxdvJWB4PnD2KNDxQg==} + dependencies: + estree-walker: 3.0.1 + is-reference: 3.0.0 + dev: true + /picocolors/1.0.0: resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} dev: true @@ -2832,6 +3100,10 @@ packages: tslib: 2.4.0 dev: true + /regenerator-runtime/0.13.9: + resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==} + dev: true + /rehype-parse/8.0.4: resolution: {integrity: sha512-MJJKONunHjoTh4kc3dsM1v3C9kGrrxvA3U8PxZlP2SjH8RNUSrb+lF7Y0KVaUDnGH2QZ5vAn7ulkiajM9ifuqg==} dependencies: @@ -2866,6 +3138,15 @@ packages: unified: 10.1.2 dev: true + /remark-frontmatter/4.0.1: + resolution: {integrity: sha512-38fJrB0KnmD3E33a5jZC/5+gGAC2WKNiPw1/fdXJvijBlhA7RCsvJklrYJakS0HedninvaCYW8lQGf9C918GfA==} + dependencies: + '@types/mdast': 3.0.10 + mdast-util-frontmatter: 1.0.0 + micromark-extension-frontmatter: 1.0.0 + unified: 10.1.2 + dev: true + /remark-gfm/3.0.1: resolution: {integrity: sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==} dependencies: @@ -2877,6 +3158,15 @@ packages: - supports-color dev: true + /remark-mdx/2.1.2: + resolution: {integrity: sha512-npQagPdczPAv0xN9F8GSi5hJfAe/z6nBjylyfOfjLOmz086ahWrIjlk4BulRfNhA+asutqWxyuT3DFVsxiTVHA==} + dependencies: + mdast-util-mdx: 2.0.0 + micromark-extension-mdxjs: 1.0.0 + transitivePeerDependencies: + - supports-color + dev: true + /remark-parse/10.0.1: resolution: {integrity: sha512-1fUyHr2jLsVOkhbvPRBJ5zTKZZyD6yZzYaWCS6BPBdQ8vEMBCH+9zNCDA6tET/zHCi/jLqjCWtlJZUPk+DbnFw==} dependencies: @@ -2896,6 +3186,22 @@ packages: unified: 10.1.2 dev: true + /remark-shiki-twoslash/3.1.0: + resolution: {integrity: sha512-6LqSqVtHQR4S0DKfdQ2/ePn9loTKUtpyopYvwk8johjDTeUW5MkaLQuZHlWNkkST/4aMbz6aTkstIcwfwcHpXg==} + dependencies: + '@typescript/twoslash': 3.1.0 + '@typescript/vfs': 1.3.4 + fenceparser: 1.1.1 + regenerator-runtime: 0.13.9 + shiki: 0.10.1 + shiki-twoslash: 3.1.0 + tslib: 2.1.0 + typescript: 4.6.4 + unist-util-visit: 2.0.3 + transitivePeerDependencies: + - supports-color + dev: true + /remark-smartypants/2.0.0: resolution: {integrity: sha512-Rc0VDmr/yhnMQIz8n2ACYXlfw/P/XZev884QU1I5u+5DgJls32o97Vc1RbK3pfumLsJomS2yy8eT4Fxj/2MDVA==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -3044,6 +3350,17 @@ packages: engines: {node: '>=8'} dev: true + /shiki-twoslash/3.1.0: + resolution: {integrity: sha512-uDqrTutOIZzyHbo103GsK7Vvc10saK1XCCivnOQ1NHJzgp3FBilEpftGeVzVSMOJs+JyhI7whkvhXV7kXQ5zCg==} + dependencies: + '@typescript/twoslash': 3.1.0 + '@typescript/vfs': 1.3.4 + shiki: 0.10.1 + typescript: 4.6.4 + transitivePeerDependencies: + - supports-color + dev: true + /shiki/0.10.1: resolution: {integrity: sha512-VsY7QJVzU51j5o1+DguUd+6vmCmZ5v/6gYu4vyYAhzjuNQU6P/vmSy4uQaOhvje031qQMiW0d2BwgMH52vqMng==} dependencies: @@ -3368,6 +3685,10 @@ packages: type-fest: 0.13.1 dev: true + /tslib/2.1.0: + resolution: {integrity: sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==} + dev: true + /tslib/2.4.0: resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==} dev: true @@ -3422,6 +3743,10 @@ packages: resolution: {integrity: sha512-TiWE6DVtVe7Ye2QxOVW9kqybs6cZexNwTwSMVgkfjEReqy/xwGpAXb99OxktoWwmL+Z+Epb0Dn8/GNDYP1wnUw==} dev: true + /unist-util-is/4.1.0: + resolution: {integrity: sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==} + dev: true + /unist-util-is/5.1.1: resolution: {integrity: sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==} dev: true @@ -3467,6 +3792,13 @@ packages: resolution: {integrity: sha512-sA/nXwYRCQVRwZU2/tQWUqJ9JSFM1X3x7JIOsIgSzrFHcfVt6NkzDtKzyxg2cZWkCwGF9CO8x4QNZRJRMK8FeQ==} dev: true + /unist-util-visit-parents/3.1.1: + resolution: {integrity: sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==} + dependencies: + '@types/unist': 2.0.6 + unist-util-is: 4.1.0 + dev: true + /unist-util-visit-parents/5.1.0: resolution: {integrity: sha512-y+QVLcY5eR/YVpqDsLf/xh9R3Q2Y4HxkZTp7ViLDU6WtJCEcPmRzW1gpdWDCDIqIlhuPDXOgttqPlykrHYDekg==} dependencies: @@ -3474,6 +3806,14 @@ packages: unist-util-is: 5.1.1 dev: true + /unist-util-visit/2.0.3: + resolution: {integrity: sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==} + dependencies: + '@types/unist': 2.0.6 + unist-util-is: 4.1.0 + unist-util-visit-parents: 3.1.1 + dev: true + /unist-util-visit/4.1.0: resolution: {integrity: sha512-n7lyhFKJfVZ9MnKtqbsqkQEk5P1KShj0+//V7mAcoI6bpbUjh3C/OG8HVD+pBihfh6Ovl01m8dkcv9HNqYajmQ==} dependencies: diff --git a/src/data/profile.json b/src/data/profile.json index 03e581e..05d2bdd 100644 --- a/src/data/profile.json +++ b/src/data/profile.json @@ -1,6 +1,6 @@ { "name": "Rafael González", - "description": "Mexican web developer, building stuff @ Acromático Developement during the day and working as husband and dad the rest of the time 🚀", + "description": "Mexican web developer, Shopify Expert and foundero of Acromático Developement. Husband and father, allways builiding stuff personally and professionally 🚀", "personalLinks": [ { "name": "GitHub", diff --git a/src/layouts/main.astro b/src/layouts/main.astro new file mode 100644 index 0000000..b2ffd38 --- /dev/null +++ b/src/layouts/main.astro @@ -0,0 +1,82 @@ +--- +import profileData from '../data/profile.json'; +import '../styles/base.css'; + +const profileName = profileData.name; + +const { frontmatter, title: titleProp, description: descriptionProp } = Astro.props; +--- + + + + + + + + + + + + + + + + + + + + + + {frontmatter?.title ? `${frontmatter?.title} | ${profileName} Blog` : titleProp ? `${titleProp} | ${profileName} Blog` : `${profileName} | Links`} + + + + + + + + + + + + + + + +
+ Rafael González +

{profileName}

+

{profileData.description}

+ +
+
+ +
+ + + \ No newline at end of file diff --git a/src/pages/blog.astro b/src/pages/blog.astro new file mode 100644 index 0000000..e2de80c --- /dev/null +++ b/src/pages/blog.astro @@ -0,0 +1,10 @@ +--- +import MainLayout from "../layouts/main.astro"; +--- + + +

Recent Blog Entries

+
+ +
+ \ No newline at end of file diff --git a/src/pages/blog/optimizeing-shopify-theme.mdx b/src/pages/blog/optimizeing-shopify-theme.mdx new file mode 100644 index 0000000..ecaa3d6 --- /dev/null +++ b/src/pages/blog/optimizeing-shopify-theme.mdx @@ -0,0 +1,66 @@ +--- +layout: ../../layouts/main.astro +title: Optimizing performance of an old Shopify Theme +description: + Some tips and recommendations for optimizing and boosting performance of an + old Shopify theme. +exerpt: + In this first blog post I want to share some of the things I've learned during + this process, that way maybe I can help other jump through some of the hard + parts of successfully optimizing a Shopify theme. +image: https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=1600&ar=16:9&fit=crop +--- + +# Optimizing an old Shopify Theme + +Optimizing an old Shopify Theme + +## Some tips and recommendations for optimizing and boosting performance of an old Shopify theme. + +At Acromático Development +we are allways helping our clients optimize their Shopify stores, not only the +UX and UI, but also the performance and speed of the site. Optimizing a Shopify +theme is not a simple task, it has been a long learning path that continues +evolving and improving as we test and try new methodologies. + +In this first blog post I want to share some of the things I've learned during +this process, that way maybe I can help other jump through some of the hard +parts of successfully optimizing a Shopify theme. + +### Initial Analysis + +Let's start by (in a really broad sense) diferenciating the optimizations that +can be done on a Site. We started by separating them in two main areas: + +1. **Optimizing the Server:** Changes that have to do with where you are hosting + the page, things like having a fast and reliable CDN, having all the correct + catching policies, how fast the server responds, how near to the end user the + server is located, etc. This part is nearly imposible to optimize for a + Shopify theme since all this part is controlled by Shopify itself. +2. **Optimizing the Code:** Changes that have to be done on the code of the + theme, here's where most of our efforts will be focused. Things like + preconnecting to 3rd party servers, preloading assets, removing unused code, + optimizing images and orchestating CSS and JavaScript loading times are the + things we are going to focus on this section. + +### Optimizing the Code + +I know there are many ways to aproach the optimization the differents parts of +the code, but this is the process I follow, hope that it makes sense for the +mayority of the cases. For this example I will use one of our client's themes +(we have previus authorisation to use this theme as an example), the store is +calles Lycklig Party Shop and they sell party supplies. They have been in +Shopify since 2016 and the theme has been the same sinse the start of the store. + +#### Preconnecting to 3rd party servers and preloading known assets diff --git a/src/pages/index.astro b/src/pages/index.astro index 811f56f..2853faf 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,13 +1,14 @@ --- +import MainLayout from "../layouts/main.astro"; import profileData from '../data/profile.json'; import Icon from "../components/icon.svelte"; type IconData = { - name: string; - url: string; - icon: string; - iconUrl?: string; - } + name: string; + url: string; + icon: string; + iconUrl?: string; +} const profileName = profileData.name; @@ -15,7 +16,7 @@ const personalLinks = []; const profesionalLinks = []; for (let link of profileData.personalLinks) { - const withUrl: IconData = {...link}; + const withUrl: IconData = { ...link }; withUrl.iconUrl = `/icons/${link.icon}.svg`; @@ -23,7 +24,7 @@ for (let link of profileData.personalLinks) { } for (let link of profileData.profesionalLinks) { - const withUrl: IconData = {...link}; + const withUrl: IconData = { ...link }; withUrl.iconUrl = `/icons/${link.icon}.svg`; @@ -31,86 +32,20 @@ for (let link of profileData.profesionalLinks) { } --- - - - - - - - - - - - - - - - - - - - - - - {profileName} | Links - - - - - - - - - - - - - - - -
- Rafael González -

{profileName}

-

{profileData.description}

- -
-
-

Personal Links

-
- - {personalLinks.map(perLink => ( - - ))} -
-

Profesional Links

-
- {profesionalLinks.map(perLink => ( - - ))} -
-
- - - + {personalLinks.map(perLink => ( + + ))} + +

+ Profesional Links

+
+ {profesionalLinks.map(perLink => ( + + ))} +
+ \ No newline at end of file diff --git a/src/styles/base.css b/src/styles/base.css new file mode 100644 index 0000000..94b81eb --- /dev/null +++ b/src/styles/base.css @@ -0,0 +1,42 @@ +/* The integration's default injected base.css fileeee */ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer components { + main h1 { + @apply text-4xl font-bold mb-8 text-center uppercase; + } + + main h2 { + @apply text-2xl font-bold mb-8 uppercase; + } + + main h3 { + @apply text-xl font-bold mb-8; + } + + main h4 { + @apply text-sm font-bold mb-8 uppercase; + } + + main ol { + @apply list-decimal mb-8 ml-8; + } + + main li:not(:last-child) { + @apply mb-4; + } + + main a { + @apply text-green-500; + } + + main p { + @apply mb-8; + } + + main img { + @apply w-full mb-8 aspect-[5/2] object-cover; + } +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..04ba90e --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue,mdx}"], + theme: { + extend: {}, + }, + plugins: [], +}