Rebuild the site in Astro

Add licence

Update site name in header to match README.md

Add missing metadescription, opengraph and link to RSS

Update Astro configuration to include sitemap integration with priority and changefreq settings

New post

3 files changed, 368 insertions, 0 deletions

diff --git a/src/partials/Footer.astro b/src/partials/Footer.astro
new file mode 100644
index 0000000..0dc9483
--- /dev/null
+++ b/src/partials/Footer.astro
@@ -0,0 +1,34 @@
+<footer>
+	<p>
+		Copyright &copy; 2023-{new Date().getFullYear()} Ariel Costas Guerrero. Todos
+		los derechos reservados.
+	</p>
+	<p>
+		Contenido cedido bajo licencia <a
+			href="https://creativecommons.org/licenses/by-sa/4.0/deed.es"
+			>CC BY-SA 4.0</a
+		> salvo que se indique lo contrario. El código fuente de este sitio está
+		disponible en <a href="https://github.com/arielcostas/costasdev"
+			>GitHub</a
+		>, bajo los términos de la <a
+			href="https://joinup.ec.europa.eu/collection/eupl/eupl-text-11-12"
+			>Licencia Pública de la Unión Europea</a
+		>.
+	</p>
+</footer>
+
+<style lang="scss">
+	@import "../../styles/shared.scss";
+
+	footer {
+		background-color: $dark;
+		color: $light;
+		text-align: center;
+
+		padding: 0.5rem 1rem;
+
+		a {
+			color: $accentLight;
+		}
+	}
+</style>
diff --git a/src/partials/Header.astro b/src/partials/Header.astro
new file mode 100644
index 0000000..e4e55d7
--- /dev/null
+++ b/src/partials/Header.astro
@@ -0,0 +1,271 @@
+---
+import Favicon from "../assets/Favicon.astro";
+---
+
+<header class="collapsed">
+	<div id="brand">
+		<button
+			id="mobile-menu"
+			type="button"
+			aria-controls="nav-pages nav-socials"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				stroke-width="2"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				>
+				<title>Hambuger menu</title>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
+					d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path
+					d="M4 18l16 0"></path></svg
+			>
+		</button>
+
+		<a href="/" style="line-height: 1;">
+			<Favicon />
+		</a>
+	</div>
+
+	<nav id="nav-pages">
+		<a href="/">Inicio</a>
+		<a href="/portfolio">Portfolio</a>
+		<a href="/blog">Blog</a>
+	</nav>
+
+	<nav id="nav-socials">
+		<a rel="me" href="https://masto.es/@arielcg" title="Mastodon">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="icon icon-tabler icon-tabler-brand-mastodon"
+				width="32"
+				height="32"
+				viewBox="0 0 24 24"
+				stroke-width="2"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<title>Mastodon logo</title>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+				<path
+					d="M18.648 15.254c-1.816 1.763 -6.648 1.626 -6.648 1.626a18.262 18.262 0 0 1 -3.288 -.256c1.127 1.985 4.12 2.81 8.982 2.475c-1.945 2.013 -13.598 5.257 -13.668 -7.636l-.026 -1.154c0 -3.036 .023 -4.115 1.352 -5.633c1.671 -1.91 6.648 -1.666 6.648 -1.666s4.977 -.243 6.648 1.667c1.329 1.518 1.352 2.597 1.352 5.633s-.456 4.074 -1.352 4.944z"
+				></path>
+				<path
+					d="M12 11.204v-2.926c0 -1.258 -.895 -2.278 -2 -2.278s-2 1.02 -2 2.278v4.722m4 -4.722c0 -1.258 .895 -2.278 2 -2.278s2 1.02 2 2.278v4.722"
+				></path>
+			</svg>
+		</a>
+		<a href="https://github.com/arielcostas" title="GitHub">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="icon icon-tabler icon-tabler-brand-github"
+				width="32"
+				height="32"
+				viewBox="0 0 24 24"
+				stroke-width="2"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<title>GitHub logo</title>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+				<path
+					d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
+				></path>
+			</svg>
+		</a>
+		<a href="https://linkedin.com/in/ariel-costas" title="LinkedIn">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="icon icon-tabler icon-tabler-brand-linkedin"
+				width="32"
+				height="32"
+				viewBox="0 0 24 24"
+				stroke-width="2"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<title>LinkedIn logo</title>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+				<path
+					d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"
+				></path>
+				<path d="M8 11l0 5"></path>
+				<path d="M8 8l0 .01"></path>
+				<path d="M12 16l0 -5"></path>
+				<path d="M16 16v-3a2 2 0 0 0 -4 0"></path>
+			</svg>
+		</a>
+	</nav>
+</header>
+
+<style lang="scss">
+	@import "../../styles/shared.scss";
+
+	header {
+		background-color: $lightAlt;
+		color: $accent;
+		box-shadow: $shadow;
+
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		gap: 0.5rem 0;
+
+		padding: calc(1rem - 2px) 1rem 1rem 1rem;
+
+		position: relative;
+		overflow: hidden;
+
+		border-top: 4px solid $accent;
+
+		a {
+			display: inline-block;
+		}
+
+		#brand {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 1rem;
+
+			h1 {
+				font-size: 2rem;
+				margin: 0;
+				font-weight: 500;
+				line-height: 1;
+
+				a {
+					font-family: $mainFontStack;
+					color: $accent;
+					text-decoration: none;
+				}
+			}
+		}
+
+		#nav-pages {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 0.25rem;
+
+			padding-inline-start: 2.5rem;
+
+			transition: max-height 0.2s linear;
+			max-height: 100vh;
+
+			a {
+				@extend %tracking-tight;
+			}
+		}
+
+		#nav-socials {
+			align-self: center;
+
+			display: flex;
+			gap: 1.5rem;
+
+			transition: max-height 0.2s linear;
+			max-height: 100vh;
+
+			a {
+				font-size: 1.5rem;
+				transition: color 0.2s ease-in-out;
+				line-height: 1;
+			}
+		}
+
+		nav > a {
+			text-decoration: none;
+			font-weight: 700;
+			font-size: 1.2rem;
+			text-transform: uppercase;
+			letter-spacing: 0.1rem;
+			transition: color 0.2s ease-in-out;
+			color: $accent;
+			line-height: 1;
+
+			&:hover {
+				color: $accentDark;
+			}
+
+			&.active {
+				color: $accentDark;
+			}
+		}
+
+		button#mobile-menu {
+			display: block;
+			background-color: transparent;
+			border: none;
+			font-size: 2rem;
+			cursor: pointer;
+		}
+	}
+
+	@media (max-width: $breakpointTablet) {
+		header.collapsed {
+			gap: 0;
+
+			#nav-pages,
+			#nav-socials {
+				max-height: 0;
+				overflow: hidden;
+			}
+		}
+	}
+
+	@media (min-width: $breakpointTablet) {
+		header {
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+
+			#nav-pages {
+				justify-self: start;
+				flex-direction: row;
+				gap: 1.5rem;
+				padding-inline-start: 0;
+			}
+
+			button#mobile-menu {
+				display: none;
+			}
+
+			&.collapsed {
+				#nav-pages,
+				#nav-socials {
+					display: flex;
+					max-height: unset;
+				}
+			}
+		}
+	}
+
+	@media (min-width: $breakpointDesktop) {
+		header {
+			padding: calc(1rem - 2px) 5.5rem 1rem 5.5rem;
+			gap: 1.5rem;
+			justify-content: center;
+
+			h1 {
+				margin-bottom: 0.5rem;
+			}
+
+			#nav-socials {
+				align-self: flex-end;
+				margin-left: auto;
+			}
+		}
+	}
+</style>
diff --git a/src/partials/MainWrapper.astro b/src/partials/MainWrapper.astro
new file mode 100644
index 0000000..ada3cf2
--- /dev/null
+++ b/src/partials/MainWrapper.astro
@@ -0,0 +1,63 @@
+<main>
+	<slot/>
+</main>
+
+<style is:global lang="scss">
+	@import "../../styles/shared.scss";
+
+	li > time {
+		font-family: $monoFontStack;
+	}
+
+	main {
+		box-sizing: border-box;
+		margin: 0.75rem 1rem 3rem;
+		padding: 1.5rem 3rem;
+		border-radius: $floatingRadius;
+		box-shadow: $shadow;
+
+		align-self: center;
+
+		max-width: 82ch;
+		font-size: 1.2rem;
+
+		background-color: $lightAlt;
+
+		a {
+			color: $accentDark;
+			transition: color 0.2s ease-in-out;
+
+			&:hover {
+				color: $accent;
+			}
+		}
+
+		> * {
+			margin-block: 0.75em;
+		}
+
+		> p > code {
+			word-break: break-word;
+			font-family: $monoFontStack;
+
+			color: $accentDark;
+			background-color: #f6f6f6;
+		}
+
+		h1 {
+			font-size: 2.75rem;
+			line-height: 1;
+			margin-bottom: 1rem;
+		}
+
+		p.meta {
+			display: block;
+			font-size: 0.85rem;
+			margin-bottom: 1rem;
+		}
+
+		pre {
+			overflow: scroll;
+		}
+	}
+</style>