Added blog list

This commit is contained in:
Rafael González 2022-08-17 23:38:12 -05:00
parent e3a23f9eee
commit dc42b224b7
10 changed files with 582 additions and 92 deletions

View File

@ -3,8 +3,14 @@ import svelte from "@astrojs/svelte";
import { defineConfig } from "astro/config"; import { defineConfig } from "astro/config";
import sitemap from "@astrojs/sitemap"; import sitemap from "@astrojs/sitemap";
import mdx from "@astrojs/mdx";
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
site: "https://rafa.page", site: "https://rafa.page",
integrations: [tailwind(), svelte(), sitemap()] integrations: [tailwind({
config: {
applyBaseStyles: false,
}
}), svelte(), sitemap(), mdx()]
}); });

View File

@ -9,6 +9,7 @@
"preview": "astro preview" "preview": "astro preview"
}, },
"devDependencies": { "devDependencies": {
"@astrojs/mdx": "^0.9.0",
"@astrojs/sitemap": "^1.0.0", "@astrojs/sitemap": "^1.0.0",
"@astrojs/svelte": "^1.0.0", "@astrojs/svelte": "^1.0.0",
"@astrojs/tailwind": "^1.0.0", "@astrojs/tailwind": "^1.0.0",

View File

@ -1,6 +1,7 @@
lockfileVersion: 5.3 lockfileVersion: 5.3
specifiers: specifiers:
'@astrojs/mdx': ^0.9.0
'@astrojs/sitemap': ^1.0.0 '@astrojs/sitemap': ^1.0.0
'@astrojs/svelte': ^1.0.0 '@astrojs/svelte': ^1.0.0
'@astrojs/tailwind': ^1.0.0 '@astrojs/tailwind': ^1.0.0
@ -8,6 +9,7 @@ specifiers:
svelte: ^3.49.0 svelte: ^3.49.0
devDependencies: devDependencies:
'@astrojs/mdx': 0.9.0
'@astrojs/sitemap': 1.0.0 '@astrojs/sitemap': 1.0.0
'@astrojs/svelte': 1.0.0_svelte@3.49.0 '@astrojs/svelte': 1.0.0_svelte@3.49.0
'@astrojs/tailwind': 1.0.0 '@astrojs/tailwind': 1.0.0
@ -72,6 +74,30 @@ packages:
- supports-color - supports-color
dev: true 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: /@astrojs/micromark-extension-mdx-jsx/1.0.3:
resolution: {integrity: sha512-O15+i2DGG0qb1R/1SYbFXgOKDGbYdV8iJMtuboVb1S9YFQfMOJxaCMco0bhXQI7PmZcQ4pZWIjT5oZ64dXUtRA==} resolution: {integrity: sha512-O15+i2DGG0qb1R/1SYbFXgOKDGbYdV8iJMtuboVb1S9YFQfMOJxaCMco0bhXQI7PmZcQ4pZWIjT5oZ64dXUtRA==}
dependencies: dependencies:
@ -456,6 +482,43 @@ packages:
resolution: {integrity: sha512-4/RWEeXDO6bocPONheFe6gX/oQdP/bEpv0oL4HqjPP5DCenBSt0mHgahppY49N0CpsaqffdwPq+TlX9CYOq2Dw==} resolution: {integrity: sha512-4/RWEeXDO6bocPONheFe6gX/oQdP/bEpv0oL4HqjPP5DCenBSt0mHgahppY49N0CpsaqffdwPq+TlX9CYOq2Dw==}
dev: true 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: /@nodelib/fs.scandir/2.1.5:
resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
engines: {node: '>= 8'} engines: {node: '>= 8'}
@ -576,6 +639,10 @@ packages:
resolution: {integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==} resolution: {integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==}
dev: true dev: true
/@types/mdx/2.0.2:
resolution: {integrity: sha512-mJGfgj4aWpiKb8C0nnJJchs1sHBHn0HugkVfqqyQi7Wn6mBRksLeQsPOFvih/Pu8L1vlDzfe/LidhVHBeUk3aQ==}
dev: true
/@types/ms/0.7.31: /@types/ms/0.7.31:
resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==} resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
dev: true dev: true
@ -622,6 +689,32 @@ packages:
resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==} resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
dev: true 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: /@vscode/emmet-helper/2.8.4:
resolution: {integrity: sha512-lUki5QLS47bz/U8IlG9VQ+1lfxMtxMZENmU5nu4Z71eOD5j9FK0SmYGL5NiVJg9WBWeAU0VxRADMY2Qpq7BfVg==} resolution: {integrity: sha512-lUki5QLS47bz/U8IlG9VQ+1lfxMtxMZENmU5nu4Z71eOD5j9FK0SmYGL5NiVJg9WBWeAU0VxRADMY2Qpq7BfVg==}
dependencies: dependencies:
@ -730,6 +823,11 @@ packages:
tslib: 2.4.0 tslib: 2.4.0
dev: true dev: true
/astring/1.8.3:
resolution: {integrity: sha512-sRpyiNrx2dEYIMmUXprS8nlpRg2Drs8m9ElX9vVEXaCB4XEAJhKfs7IcX0IwShjuOAjLR6wzIrgoptz1n19i1A==}
hasBin: true
dev: true
/astro/1.0.3: /astro/1.0.3:
resolution: {integrity: sha512-QaKFZIhraQaoWqg7s7wNCAuMI+r50UzmnlWhQAl7IMJ0RQ00IVwAi1sV7IMjf2h/iRT/b87xqN4aNlBDWf/qyg==} resolution: {integrity: sha512-QaKFZIhraQaoWqg7s7wNCAuMI+r50UzmnlWhQAl7IMJ0RQ00IVwAi1sV7IMjf2h/iRT/b87xqN4aNlBDWf/qyg==}
engines: {node: ^14.18.0 || >=16.12.0, npm: '>=6.14.0'} engines: {node: ^14.18.0 || >=16.12.0, npm: '>=6.14.0'}
@ -1386,6 +1484,20 @@ packages:
hasBin: true hasBin: true
dev: 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: /estree-util-is-identifier-name/2.0.1:
resolution: {integrity: sha512-rxZj1GkQhY4x1j/CSnybK9cGuMFQYFPLq0iNyopqf14aOVLFtMv7Esika+ObJWPWiOHuMOAHz3YkWoLYYRnzWQ==} resolution: {integrity: sha512-rxZj1GkQhY4x1j/CSnybK9cGuMFQYFPLq0iNyopqf14aOVLFtMv7Esika+ObJWPWiOHuMOAHz3YkWoLYYRnzWQ==}
dev: true dev: true
@ -1401,6 +1513,10 @@ packages:
resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
dev: true dev: true
/estree-walker/3.0.1:
resolution: {integrity: sha512-woY0RUD87WzMBUiZLx8NsYr23N5BKsOMZHhu2hoNRVh6NXGfoiT1KOL8G3UHlJAnEDGmfa5ubNA/AacfG+Kb0g==}
dev: true
/execa/6.1.0: /execa/6.1.0:
resolution: {integrity: sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==} resolution: {integrity: sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==}
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@ -1444,6 +1560,17 @@ packages:
reusify: 1.0.4 reusify: 1.0.4
dev: true 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: /fetch-blob/3.2.0:
resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==} resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
engines: {node: ^12.20 || >= 14.13} engines: {node: ^12.20 || >= 14.13}
@ -1482,6 +1609,11 @@ packages:
pkg-dir: 4.2.0 pkg-dir: 4.2.0
dev: true dev: true
/format/0.2.2:
resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
engines: {node: '>=0.4.x'}
dev: true
/formdata-polyfill/4.0.10: /formdata-polyfill/4.0.10:
resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==} resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
engines: {node: '>=12.20.0'} engines: {node: '>=12.20.0'}
@ -1644,6 +1776,28 @@ packages:
zwitch: 2.0.2 zwitch: 2.0.2
dev: true 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: /hast-util-to-html/8.0.3:
resolution: {integrity: sha512-/D/E5ymdPYhHpPkuTHOUkSatxr4w1ZKrZsG0Zv/3C2SRVT0JFJG53VS45AMrBtYk0wp5A7ksEhiC8QaOZM95+A==} resolution: {integrity: sha512-/D/E5ymdPYhHpPkuTHOUkSatxr4w1ZKrZsG0Zv/3C2SRVT0JFJG53VS45AMrBtYk0wp5A7ksEhiC8QaOZM95+A==}
dependencies: dependencies:
@ -1806,6 +1960,12 @@ packages:
engines: {node: '>=12'} engines: {node: '>=12'}
dev: true 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: /is-stream/3.0.0:
resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==} resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@ -1928,6 +2088,11 @@ packages:
yallist: 4.0.0 yallist: 4.0.0
dev: true dev: true
/lz-string/1.4.4:
resolution: {integrity: sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==}
hasBin: true
dev: true
/magic-string/0.25.9: /magic-string/0.25.9:
resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==} resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
dependencies: dependencies:
@ -1941,6 +2106,11 @@ packages:
sourcemap-codec: 1.4.8 sourcemap-codec: 1.4.8
dev: true dev: true
/markdown-extensions/1.1.1:
resolution: {integrity: sha512-WWC0ZuMzCyDHYCasEGs4IPvLyTGftYwh6wIEOULOF0HXcqZlhwRzrK0w2VUlxWA98xnvb/jszw4ZSkJ6ADpM6Q==}
engines: {node: '>=0.10.0'}
dev: true
/markdown-table/3.0.2: /markdown-table/3.0.2:
resolution: {integrity: sha512-y8j3a5/DkJCmS5x4dMCQL+OR0+2EAq3DOtio1COSHsmW2BGXnNCK3v12hJt1LrUz5iZH5g0LmuYOjDdI+czghA==} resolution: {integrity: sha512-y8j3a5/DkJCmS5x4dMCQL+OR0+2EAq3DOtio1COSHsmW2BGXnNCK3v12hJt1LrUz5iZH5g0LmuYOjDdI+czghA==}
dev: true dev: true
@ -1980,6 +2150,12 @@ packages:
- supports-color - supports-color
dev: true 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: /mdast-util-gfm-autolink-literal/1.0.2:
resolution: {integrity: sha512-FzopkOd4xTTBeGXhXSBU0OCDDh5lUj2rd+HQqG92Ld+jL4lpUfgX2AT2OHAVP9aEeDKp7G92fuooSZcYJA3cRg==} resolution: {integrity: sha512-FzopkOd4xTTBeGXhXSBU0OCDDh5lUj2rd+HQqG92Ld+jL4lpUfgX2AT2OHAVP9aEeDKp7G92fuooSZcYJA3cRg==}
dependencies: dependencies:
@ -2060,6 +2236,43 @@ packages:
vfile-message: 3.1.2 vfile-message: 3.1.2
dev: true 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: /mdast-util-to-hast/12.2.0:
resolution: {integrity: sha512-YDwT5KhGzLgPpSnQhAlK1+WpCW4gsPmNNAxUNMkMTDhxQyPp2eX86WOelnKnLKEvSpfxqJbPbInHFkefXZBhEA==} resolution: {integrity: sha512-YDwT5KhGzLgPpSnQhAlK1+WpCW4gsPmNNAxUNMkMTDhxQyPp2eX86WOelnKnLKEvSpfxqJbPbInHFkefXZBhEA==}
dependencies: dependencies:
@ -2126,6 +2339,14 @@ packages:
uvu: 0.5.6 uvu: 0.5.6
dev: true 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: /micromark-extension-gfm-autolink-literal/1.0.3:
resolution: {integrity: sha512-i3dmvU0htawfWED8aHMMAzAVp/F0Z+0bPh3YrbTPPL1v4YAlCZpy5rBO5p0LPYiZo0zFVkoYh7vDU7yQSiCMjg==} resolution: {integrity: sha512-i3dmvU0htawfWED8aHMMAzAVp/F0Z+0bPh3YrbTPPL1v4YAlCZpy5rBO5p0LPYiZo0zFVkoYh7vDU7yQSiCMjg==}
dependencies: dependencies:
@ -2211,12 +2432,52 @@ packages:
uvu: 0.5.6 uvu: 0.5.6
dev: true 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: /micromark-extension-mdx-md/1.0.0:
resolution: {integrity: sha512-xaRAMoSkKdqZXDAoSgp20Azm0aRQKGOl0RrS81yGu8Hr/JhMsBmfs4wR7m9kgVUIO36cMUQjNyiyDKPrsv8gOw==} resolution: {integrity: sha512-xaRAMoSkKdqZXDAoSgp20Azm0aRQKGOl0RrS81yGu8Hr/JhMsBmfs4wR7m9kgVUIO36cMUQjNyiyDKPrsv8gOw==}
dependencies: dependencies:
micromark-util-types: 1.0.2 micromark-util-types: 1.0.2
dev: true 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: /micromark-factory-destination/1.0.0:
resolution: {integrity: sha512-eUBA7Rs1/xtTVun9TmV3gjfPz2wEwgK5R5xcbIM5ZYAtvGF6JkyaDsj0agx8urXnO31tEO6Ug83iVH3tdedLnw==} resolution: {integrity: sha512-eUBA7Rs1/xtTVun9TmV3gjfPz2wEwgK5R5xcbIM5ZYAtvGF6JkyaDsj0agx8urXnO31tEO6Ug83iVH3tdedLnw==}
dependencies: dependencies:
@ -2652,6 +2913,13 @@ packages:
resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==} resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==}
dev: true 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: /picocolors/1.0.0:
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
dev: true dev: true
@ -2832,6 +3100,10 @@ packages:
tslib: 2.4.0 tslib: 2.4.0
dev: true dev: true
/regenerator-runtime/0.13.9:
resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==}
dev: true
/rehype-parse/8.0.4: /rehype-parse/8.0.4:
resolution: {integrity: sha512-MJJKONunHjoTh4kc3dsM1v3C9kGrrxvA3U8PxZlP2SjH8RNUSrb+lF7Y0KVaUDnGH2QZ5vAn7ulkiajM9ifuqg==} resolution: {integrity: sha512-MJJKONunHjoTh4kc3dsM1v3C9kGrrxvA3U8PxZlP2SjH8RNUSrb+lF7Y0KVaUDnGH2QZ5vAn7ulkiajM9ifuqg==}
dependencies: dependencies:
@ -2866,6 +3138,15 @@ packages:
unified: 10.1.2 unified: 10.1.2
dev: true 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: /remark-gfm/3.0.1:
resolution: {integrity: sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==} resolution: {integrity: sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==}
dependencies: dependencies:
@ -2877,6 +3158,15 @@ packages:
- supports-color - supports-color
dev: true 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: /remark-parse/10.0.1:
resolution: {integrity: sha512-1fUyHr2jLsVOkhbvPRBJ5zTKZZyD6yZzYaWCS6BPBdQ8vEMBCH+9zNCDA6tET/zHCi/jLqjCWtlJZUPk+DbnFw==} resolution: {integrity: sha512-1fUyHr2jLsVOkhbvPRBJ5zTKZZyD6yZzYaWCS6BPBdQ8vEMBCH+9zNCDA6tET/zHCi/jLqjCWtlJZUPk+DbnFw==}
dependencies: dependencies:
@ -2896,6 +3186,22 @@ packages:
unified: 10.1.2 unified: 10.1.2
dev: true 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: /remark-smartypants/2.0.0:
resolution: {integrity: sha512-Rc0VDmr/yhnMQIz8n2ACYXlfw/P/XZev884QU1I5u+5DgJls32o97Vc1RbK3pfumLsJomS2yy8eT4Fxj/2MDVA==} resolution: {integrity: sha512-Rc0VDmr/yhnMQIz8n2ACYXlfw/P/XZev884QU1I5u+5DgJls32o97Vc1RbK3pfumLsJomS2yy8eT4Fxj/2MDVA==}
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@ -3044,6 +3350,17 @@ packages:
engines: {node: '>=8'} engines: {node: '>=8'}
dev: true 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: /shiki/0.10.1:
resolution: {integrity: sha512-VsY7QJVzU51j5o1+DguUd+6vmCmZ5v/6gYu4vyYAhzjuNQU6P/vmSy4uQaOhvje031qQMiW0d2BwgMH52vqMng==} resolution: {integrity: sha512-VsY7QJVzU51j5o1+DguUd+6vmCmZ5v/6gYu4vyYAhzjuNQU6P/vmSy4uQaOhvje031qQMiW0d2BwgMH52vqMng==}
dependencies: dependencies:
@ -3368,6 +3685,10 @@ packages:
type-fest: 0.13.1 type-fest: 0.13.1
dev: true dev: true
/tslib/2.1.0:
resolution: {integrity: sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==}
dev: true
/tslib/2.4.0: /tslib/2.4.0:
resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==} resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
dev: true dev: true
@ -3422,6 +3743,10 @@ packages:
resolution: {integrity: sha512-TiWE6DVtVe7Ye2QxOVW9kqybs6cZexNwTwSMVgkfjEReqy/xwGpAXb99OxktoWwmL+Z+Epb0Dn8/GNDYP1wnUw==} resolution: {integrity: sha512-TiWE6DVtVe7Ye2QxOVW9kqybs6cZexNwTwSMVgkfjEReqy/xwGpAXb99OxktoWwmL+Z+Epb0Dn8/GNDYP1wnUw==}
dev: true dev: true
/unist-util-is/4.1.0:
resolution: {integrity: sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==}
dev: true
/unist-util-is/5.1.1: /unist-util-is/5.1.1:
resolution: {integrity: sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==} resolution: {integrity: sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==}
dev: true dev: true
@ -3467,6 +3792,13 @@ packages:
resolution: {integrity: sha512-sA/nXwYRCQVRwZU2/tQWUqJ9JSFM1X3x7JIOsIgSzrFHcfVt6NkzDtKzyxg2cZWkCwGF9CO8x4QNZRJRMK8FeQ==} resolution: {integrity: sha512-sA/nXwYRCQVRwZU2/tQWUqJ9JSFM1X3x7JIOsIgSzrFHcfVt6NkzDtKzyxg2cZWkCwGF9CO8x4QNZRJRMK8FeQ==}
dev: true 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: /unist-util-visit-parents/5.1.0:
resolution: {integrity: sha512-y+QVLcY5eR/YVpqDsLf/xh9R3Q2Y4HxkZTp7ViLDU6WtJCEcPmRzW1gpdWDCDIqIlhuPDXOgttqPlykrHYDekg==} resolution: {integrity: sha512-y+QVLcY5eR/YVpqDsLf/xh9R3Q2Y4HxkZTp7ViLDU6WtJCEcPmRzW1gpdWDCDIqIlhuPDXOgttqPlykrHYDekg==}
dependencies: dependencies:
@ -3474,6 +3806,14 @@ packages:
unist-util-is: 5.1.1 unist-util-is: 5.1.1
dev: true 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: /unist-util-visit/4.1.0:
resolution: {integrity: sha512-n7lyhFKJfVZ9MnKtqbsqkQEk5P1KShj0+//V7mAcoI6bpbUjh3C/OG8HVD+pBihfh6Ovl01m8dkcv9HNqYajmQ==} resolution: {integrity: sha512-n7lyhFKJfVZ9MnKtqbsqkQEk5P1KShj0+//V7mAcoI6bpbUjh3C/OG8HVD+pBihfh6Ovl01m8dkcv9HNqYajmQ==}
dependencies: dependencies:

View File

@ -1,6 +1,6 @@
{ {
"name": "Rafael González", "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": [ "personalLinks": [
{ {
"name": "GitHub", "name": "GitHub",

82
src/layouts/main.astro Normal file
View File

@ -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;
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width" />
<title>{frontmatter?.title ? `${frontmatter?.title} | ${profileName} Blog` : titleProp ? `${titleProp} | ${profileName} Blog` : `${profileName} | Links`}</title>
<meta name="description" content={frontmatter?.description ? frontmatter.description : descriptionProp ? descriptionProp : profileData.description}>
<meta name="robots" content="index, follow">
<meta property="og:type" content="website" />
<meta property="og:title" content={frontmatter?.title ? `${frontmatter?.title} | ${profileName} Blog` : titleProp ? `${titleProp} | ${profileName} Blog` : `${profileName} | Links`} />
<meta property="og:description" content={frontmatter?.description ? frontmatter.description : descriptionProp ? descriptionProp : profileData.description} />
<meta property="og:image" content={frontmatter?.image ? frontmatter?.image : "https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1200,w_1200/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf"} />
<meta property="og:url" content={Astro.site} />
<link rel="canonical" href={Astro.site}>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-45FLVCCPTZ"></script>
<script>
// @ts-ignore
window.dataLayer = window.dataLayer || [];
// @ts-ignore
function gtag(){dataLayer.push(arguments);}
// @ts-ignore
gtag('js', new Date());
// @ts-ignore
gtag('config', 'G-45FLVCCPTZ');
</script>
</head>
<body class="bg-white dark:bg-gray-900">
<header class="w-full flex flex-col justify-center items-center pt-10 ">
<img
class="w-1/3 md:w-52 rounded-full border-4 border-gray-900 dark:border-white aspect-square"
loading="lazy"
src="https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_50,w_50/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf"
sizes="(max-width: 640px) 50vw,
208px"
srcset="https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_50,w_50/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 50w,
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_100,w_100/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 100w,
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_200,w_200/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 200w,
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_600,w_600/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 600w,
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_900,w_900/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 900w,
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1200,w_1200/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 1200w,
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1500,w_1500/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 1500w"
alt="Rafael González"
>
<h1 class="font-mono text-center font-bold underline underline-offset-8 uppercase text-4xl my-4 tracking-wide dark:text-white">{profileName}</h1>
<p class="font-mono text-center text-l my-4 sm:mt-4 sm:mb-0 mx-auto w-11/12 max-w-5xl tracking-wide dark:text-white">{profileData.description}</p>
<a href="/main.vcf" target="_blank" rel="noopener" class="md:hidden"><button class="mt-4 p-4 bg-black text-white dark:text-black dark:bg-white border-2 border-black rounded-md font-bold uppercase tracking-wide">Agregar a Contactos</button></a>
</header>
<main class="font-mono text-l my-16 sm:mb-8 mx-auto w-11/12 max-w-5xl tracking-wide dark:text-white">
<slot/>
</main>
<footer class="px-3 py-8">
<p class="dark:text-white text-center">Powered by <a class="underline" href="https://acromatico.dev" target="_blank" rel="noopener">Acromático Development</a></p>
</footer>
</body>
</html>

10
src/pages/blog.astro Normal file
View File

@ -0,0 +1,10 @@
---
import MainLayout from "../layouts/main.astro";
---
<MainLayout title="Recent Blog Entries" description="List of my most resent blog entries.">
<h1 class="text-4xl">Recent Blog Entries</h1>
<div class="grid grid-cols-2 md:grid-cols-4">
</div>
</MainLayout>

View File

@ -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
<img
alt="Optimizing an old Shopify Theme"
src="https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=300&ar=5:2&fit=crop"
srcset="https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=300&ar=5:2&fit=crop 300w,
https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=500&ar=5:2&fit=crop 500w,
https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=800&ar=5:2&fit=crop 800w,
https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=1024&ar=5:2&fit=crop 1024w"
sizes="(max-width: 310px) 300px,
(max-width: 510px) 500px,
(max-width: 810px) 800px,
1024px"
/>
## Some tips and recommendations for optimizing and boosting performance of an old Shopify theme.
At <a href="https://acromatico.dev" target="_blank">Acromático Development</a>
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 <a href="https://lycklig.com.mx" target="_blank">Lycklig Party Shop</a> 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

View File

@ -1,4 +1,5 @@
--- ---
import MainLayout from "../layouts/main.astro";
import profileData from '../data/profile.json'; import profileData from '../data/profile.json';
import Icon from "../components/icon.svelte"; import Icon from "../components/icon.svelte";
@ -7,7 +8,7 @@ type IconData = {
url: string; url: string;
icon: string; icon: string;
iconUrl?: string; iconUrl?: string;
} }
const profileName = profileData.name; const profileName = profileData.name;
@ -15,7 +16,7 @@ const personalLinks = [];
const profesionalLinks = []; const profesionalLinks = [];
for (let link of profileData.personalLinks) { for (let link of profileData.personalLinks) {
const withUrl: IconData = {...link}; const withUrl: IconData = { ...link };
withUrl.iconUrl = `/icons/${link.icon}.svg`; withUrl.iconUrl = `/icons/${link.icon}.svg`;
@ -23,7 +24,7 @@ for (let link of profileData.personalLinks) {
} }
for (let link of profileData.profesionalLinks) { for (let link of profileData.profesionalLinks) {
const withUrl: IconData = {...link}; const withUrl: IconData = { ...link };
withUrl.iconUrl = `/icons/${link.icon}.svg`; withUrl.iconUrl = `/icons/${link.icon}.svg`;
@ -31,86 +32,20 @@ for (let link of profileData.profesionalLinks) {
} }
--- ---
<html lang="en"> <MainLayout>
<head> <h2 class="font-mono font-bold uppercase text-xl my-14 mx-auto tracking-wide w-11/12 max-w-5xl dark:text-white">
<meta charset="utf-8" /> Personal Links</h2>
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width" />
<title>{profileName} | Links</title>
<meta name="description" content={profileData.description}>
<meta name="robots" content="index, follow">
<meta property="og:type" content="website" />
<meta property="og:title" content={`${profileName} | Links`} />
<meta property="og:description" content={profileData.description} />
<meta property="og:image" content="https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1200,w_1200/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf" />
<meta property="og:url" content={Astro.site} />
<link rel="canonical" href={Astro.site}>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-45FLVCCPTZ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-45FLVCCPTZ');
</script>
</head>
<body class="bg-white dark:bg-gray-900">
<header class="w-full flex flex-col justify-center items-center pt-10 ">
<img
class="w-1/2 md:w-52 rounded-full border-4 border-gray-900 dark:border-white aspect-square"
loading="lazy"
src="https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_50,w_50/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf"
sizes="(max-width: 640px) 50vw,
208px"
srcset="https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_50,w_50/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 50w,
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_100,w_100/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 100w,
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_200,w_200/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 200w,
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_600,w_600/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 600w,
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_900,w_900/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 900w,
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1200,w_1200/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 1200w,
https://res.cloudinary.com/acromatico-development/image/upload/c_fill,f_auto,h_1500,w_1500/v1641392022/Rafa%20Page/6575E4EB-3F86-47E7-A315-9CD51E5279EB_mm7ctf 1500w"
alt="Rafael González"
>
<h1 class="font-mono font-bold underline underline-offset-8 uppercase text-4xl my-4 tracking-wide dark:text-white">{profileName}</h1>
<p class="font-mono text-l my-4 sm:mt-4 sm:mb-0 mx-auto w-11/12 max-w-5xl tracking-wide dark:text-white">{profileData.description}</p>
<a href="/main.vcf" target="_blank" rel="noopener" class="md:invisible"><button class="mt-4 p-4 bg-black text-white dark:text-black dark:bg-white border-2 border-black rounded-md font-bold uppercase tracking-wide">Agregar a Contactos</button></a>
</header>
<main>
<h2 class="font-mono font-bold uppercase text-xl my-14 mx-auto tracking-wide w-11/12 max-w-5xl dark:text-white">Personal Links</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-11/12 max-w-5xl my-2 mx-auto"> <div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-11/12 max-w-5xl my-2 mx-auto">
{personalLinks.map(perLink => ( {personalLinks.map(perLink => (
<Icon client:load perLink={perLink} profileName={profileName} /> <Icon client:load perLink={perLink} profileName={profileName} />
))} ))}
</div> </div>
<h2 class="font-mono font-bold uppercase text-xl my-14 mx-auto tracking-wide w-11/12 max-w-5xl dark:text-white">Profesional Links</h2> <h2 class="font-mono font-bold uppercase text-xl my-14 mx-auto tracking-wide w-11/12 max-w-5xl dark:text-white">
Profesional Links</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-11/12 max-w-5xl my-2 mx-auto"> <div class="grid grid-cols-2 md:grid-cols-4 gap-4 w-11/12 max-w-5xl my-2 mx-auto">
{profesionalLinks.map(perLink => ( {profesionalLinks.map(perLink => (
<Icon client:load perLink={perLink} profileName={profileName} /> <Icon client:load perLink={perLink} profileName={profileName} />
))} ))}
</div> </div>
</main> </MainLayout>
<footer class="px-3 py-8">
<p class="dark:text-white text-center">Powered by <a class="underline" href="https://acromatico.dev" target="_blank" rel="noopener">Acromático Development</a></p>
</footer>
</body>
</html>

42
src/styles/base.css Normal file
View File

@ -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;
}
}

8
tailwind.config.js Normal file
View File

@ -0,0 +1,8 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue,mdx}"],
theme: {
extend: {},
},
plugins: [],
}