rafaremo
/
rafa-links
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added SEO data

This commit is contained in:
Rafael González 2022-08-19 23:06:13 -05:00
parent ef99356330
commit 864814c9ee
6 changed files with 271 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
public/manifest.json
View File

@ -1,42 +1,46 @@
{ {
"name": "Rafael González | Links", "name": "Rafael González Page, Links and Blog",
"display": "standalone", "display": "standalone",
"start_url": "/", "start_url": "/",
"short_name": "Rafael González",
"theme_color": "#111827",
"background_color": "#111827",
"description": "Mexican web developer, Shopify Expert and founder of Acromático Developement. Husband and father, allways builiding stuff personally and professionally 🚀",
"icons": [ "icons": [
{ {
"src": "\/android-icon-36x36.png", "src": "/android-icon-36x36.png",
"sizes": "36x36", "sizes": "36x36",
"type": "image\/png", "type": "image/png",
"density": "0.75" "density": "0.75"
}, },
{ {
"src": "\/android-icon-48x48.png", "src": "/android-icon-48x48.png",
"sizes": "48x48", "sizes": "48x48",
"type": "image\/png", "type": "image/png",
"density": "1.0" "density": "1.0"
}, },
{ {
"src": "\/android-icon-72x72.png", "src": "/android-icon-72x72.png",
"sizes": "72x72", "sizes": "72x72",
"type": "image\/png", "type": "image/png",
"density": "1.5" "density": "1.5"
}, },
{ {
"src": "\/android-icon-96x96.png", "src": "/android-icon-96x96.png",
"sizes": "96x96", "sizes": "96x96",
"type": "image\/png", "type": "image/png",
"density": "2.0" "density": "2.0"
}, },
{ {
"src": "\/android-icon-144x144.png", "src": "/android-icon-144x144.png",
"sizes": "144x144", "sizes": "144x144",
"type": "image\/png", "type": "image/png",
"density": "3.0" "density": "3.0"
}, },
{ {
"src": "\/android-icon-192x192.png", "src": "/android-icon-192x192.png",
"sizes": "192x192", "sizes": "192x192",
"type": "image\/png", "type": "image/png",
"density": "4.0" "density": "4.0"
} }
] ]

2
src/data/profile.json
View File

@ -1,6 +1,6 @@
{ {
"name": "Rafael González", "name": "Rafael González",
"description": "Mexican web developer, Shopify Expert and foundero of Acromático Developement. Husband and father, allways builiding stuff personally and professionally 🚀", "description": "Mexican web developer, Shopify Expert and founder of Acromático Developement. Husband and father, allways builiding stuff personally and professionally 🚀",
"personalLinks": [ "personalLinks": [
{ {
"name": "GitHub", "name": "GitHub",

209
src/layouts/main.astro
View File

@ -1,53 +1,163 @@
--- ---
import profileData from '../data/profile.json'; import profileData from "../data/profile.json";
import '../styles/base.css'; import "../styles/base.css";
const profileName = profileData.name; const profileName = profileData.name;
const { frontmatter, title: titleProp, description: descriptionProp, blog } = Astro.props; const {
frontmatter,
title: titleProp,
description: descriptionProp,
blog,
} = Astro.props;
--- ---
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"> <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="60x60" href="/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.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="76x76" href="/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.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="120x120" href="/apple-icon-120x120.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="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.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="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.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="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"
<link rel="manifest" href="/manifest.json"> />
<meta name="msapplication-TileColor" content="#ffffff"> <link
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png"> rel="icon"
<meta name="theme-color" content="#ffffff"> 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" /> <meta name="viewport" content="width=device-width" />
<title>{frontmatter?.title ? `${frontmatter?.title} | ${profileName} Blog` : titleProp ? `${titleProp} | ${profileName} Blog` : `${profileName} | Links`}</title> <title>
<meta name="description" content={frontmatter?.description ? frontmatter.description : descriptionProp ? descriptionProp : profileData.description}> {
<meta name="robots" content="index, follow"> 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:type" content="website" />
<meta property="og:title" content={frontmatter?.title ? `${frontmatter?.title} | ${profileName} Blog` : titleProp ? `${titleProp} | ${profileName} Blog` : `${profileName} | Links`} /> <meta
<meta property="og:description" content={frontmatter?.description ? frontmatter.description : descriptionProp ? descriptionProp : profileData.description} /> property="og:title"
<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"} /> content={frontmatter?.title
<meta property="og:url" content={Astro.site} /> ? `${frontmatter?.title} | ${profileName} Blog`
<link rel="canonical" href={Astro.site}> : 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.url} />
<link rel="canonical" href={Astro.url} />
<script
type="application/ld+json"
set:html={`
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Rafa Page",
"url": "https://rafa.page"
}
`}
></script>
<script
type="application/ld+json"
set:html={`{
"@context": "https://schema.org",
"@type": "Person",
"name": "Rafael González Vázquez",
"url": "https://rafa.page",
"sameAs": [
"https://www.linkedin.com/in/rafagonvaz/",
"https://www.instagram.com/rafaremo/",
"https://twitter.com/RafaRemo"
],
"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"
}`}
></script>
{
frontmatter && (
<script
type="application/ld+json"
set:html={`
{
"@context": "https://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "${Astro.url}"
},
"headline": "${frontmatter.title}",
"image": [
"${frontmatter.image}"
],
"datePublished": "2015-02-05T08:00:00+08:00",
"dateModified": "2015-02-05T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "Rafael González Vázquez",
"url": "${Astro.site}"
}
}
`}
/>
)
}
<!-- Global site tag (gtag.js) - Google Analytics --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-45FLVCCPTZ"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-45FLVCCPTZ"
></script>
<script> <script>
// @ts-ignore // @ts-ignore
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag() {
// @ts-ignore // @ts-ignore
function gtag(){dataLayer.push(arguments);} dataLayer.push(arguments);
}
// @ts-ignore // @ts-ignore
gtag('js', new Date()); gtag("js", new Date());
// @ts-ignore // @ts-ignore
gtag('config', 'G-45FLVCCPTZ'); gtag("config", "G-45FLVCCPTZ");
</script> </script>
</head> </head>
@ -67,16 +177,41 @@ const { frontmatter, title: titleProp, description: descriptionProp, blog } = As
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_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" 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" 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"
> >
<h1 class="font-mono text-center font-bold underline underline-offset-8 uppercase text-4xl my-4 tracking-wide dark:text-white">{profileName}</h1> {profileName}
<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> </h1>
<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> <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> </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 ${blog || frontmatter ? "blog": ""}`}> <main
class={`font-mono text-l my-16 sm:mb-8 mx-auto w-11/12 max-w-5xl tracking-wide dark:text-white ${
blog || frontmatter ? "blog" : ""
}`}
>
<slot /> <slot />
</main> </main>
<footer class="px-3 py-8"> <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> <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> </footer>
</body> </body>
</html> </html>

41
src/pages/blog.astro
View File

@ -1,10 +1,43 @@
--- ---
import MainLayout from "../layouts/main.astro"; import MainLayout from "../layouts/main.astro";
const posts = await Astro.glob("../pages/blog/*.mdx");
const postByDate = posts
.sort((a, b) => {
return (
new Date(b.frontmatter.date).getTime() -
new Date(a.frontmatter.date).getTime()
);
})
.reverse();
--- ---
<MainLayout title="Recent Blog Entries" description="List of my most resent blog entries." blog={true}> <MainLayout
<h1 class="text-4xl">Recent Blog Entries</h1> title="Recent Blog Entries"
<div class="grid grid-cols-2 md:grid-cols-4"> description="List of my most resent blog entries."
blog={false}
>
<h1 class="text-4xl text-center uppercase font-bold mb-8">Recent Blog Entries</h1>
<section class="grid grid-cols-2 md:grid-cols-4 gap-4">
{
postByDate.map((post) => (
<a href={`${post.url}`} class="">
<article class="border-2 border-gray-800 dark:border-gray-200 dark:text-gray-200 dark:hover:text-white text-gray-800 hover:text-black">
<img src={post.frontmatter.image} />
<div class="p-4">
<h3 class="mb-4 uppercase">
{post.frontmatter.title}
</h3>
<p class="text-s mb-2">
{post.frontmatter.exerpt}
</p>
<p class="text-s text-gray-600 dark:text-gray-400 text-sm">
{new Date(post.frontmatter.date).toLocaleDateString("es-US")}
</p>
</div> </div>
</article>
</a>
))
}
</section>
</MainLayout> </MainLayout>

8
src/pages/blog/optimizeing-shopify-theme.mdx
View File

@ -1,14 +1,14 @@
--- ---
layout: ../../layouts/main.astro layout: ../../layouts/main.astro
date: 2022-08-18
title: Optimizing performance of an old Shopify Theme title: Optimizing performance of an old Shopify Theme
description: description:
Some tips and recommendations for optimizing and boosting performance of an Some tips and recommendations for optimizing and boosting performance of an
old Shopify theme. old Shopify theme.
exerpt: exerpt:
In this first blog post I want to share some of the things I've learned during Some tips and recommendations for optimizing and boosting performance of an
this process, that way maybe I can help other jump through some of the hard old Shopify theme.
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=350&ar=16:9&fit=crop
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

2
src/styles/base.css
View File

@ -3,7 +3,7 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer components { @layer utilities {
main.blog h1 { main.blog h1 {
@apply text-4xl font-bold mb-8 text-center uppercase; @apply text-4xl font-bold mb-8 text-center uppercase;
} }