From fda43d81a22e17a188c0f26c90b4d18c71bbace7 Mon Sep 17 00:00:00 2001
From: Matt Fantinel <matt@fantinel.dev>
Date: Sat, 2 Apr 2022 19:54:01 -0300
Subject: [PATCH] Layouts-rework (#22)

* Reworked Layouts to be more declarative while named layouts aren't a thing in SvelteKit

* Fix meta image extension

* Added excerpt

* Added WIP disclaimer in digital tools page
---
 src/app.scss                                  |   4 +-
 src/lib/layouts/article-layout.svelte         |  55 ++++++
 src/lib/layouts/waves-layout.svelte           |  15 ++
 src/lib/scss/markdown.scss                    | 149 +++++++++++++++++
 src/routes/[slug]/__layout.reset.svelte       | 158 +-----------------
 src/routes/__layout.svelte                    |  15 +-
 .../{blog.json.js => blog/index.json.js}      |   0
 src/routes/{blog.svelte => blog/index.svelte} |  25 +--
 src/routes/digital-tools.md                   |  46 +++++
 src/routes/index.svelte                       |  21 +--
 src/routes/resume.svelte                      |  11 +-
 svelte.config.js                              |   3 +
 12 files changed, 308 insertions(+), 194 deletions(-)
 create mode 100644 src/lib/layouts/article-layout.svelte
 create mode 100644 src/lib/layouts/waves-layout.svelte
 create mode 100644 src/lib/scss/markdown.scss
 rename src/routes/{blog.json.js => blog/index.json.js} (100%)
 rename src/routes/{blog.svelte => blog/index.svelte} (63%)
 create mode 100644 src/routes/digital-tools.md

diff --git a/src/app.scss b/src/app.scss
index f93f5a63..da6d6766 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -38,4 +38,6 @@ html {
 #svelte-root {
   height: 100%;
   position: relative;
-}
\ No newline at end of file
+}
+
+@import './lib/scss/markdown.scss';
\ No newline at end of file
diff --git a/src/lib/layouts/article-layout.svelte b/src/lib/layouts/article-layout.svelte
new file mode 100644
index 00000000..d3ce7d0d
--- /dev/null
+++ b/src/lib/layouts/article-layout.svelte
@@ -0,0 +1,55 @@
+<script>
+	import Header from '$lib/components/layout/header.svelte';
+	import Footer from '$lib/components/layout/footer.svelte';
+	import Image from '$lib/components/base/image.svelte';
+	import { siteBaseUrl } from '$lib/meta';
+
+	export let title;
+	export let image;
+	export let excerpt;	
+</script>
+
+<svelte:head>
+	{#if title}
+		<title>{title}</title>
+		<meta property="og:title" content={title} />
+		<meta name="twitter:title" content={title} />
+	{/if}
+
+	{#if excerpt}
+		<meta name="description" content={excerpt} />
+		<meta property="og:description" content={excerpt} />
+		<meta name="twitter:description" content={excerpt} />
+	{/if}
+
+	{#if image}
+		<meta property="og:image" content="{siteBaseUrl}/images/{image.path}/{image.filename}.png" />
+		<meta name="twitter:image" content="{siteBaseUrl}/images/{image.path}/{image.filename}.png" />
+	{/if}
+</svelte:head>
+
+<div class="markdown-layout">
+	<Header animated={false} />
+
+	<main>
+		<article id="markdown-content">
+			{#if title}
+				<div class="header">
+					<h1>{title}</h1>
+				</div>
+			{/if}
+
+			{#if image}
+				<div class="cover-image">
+					<Image path={image.path} filename={image.filename} alt="Cover Image" />
+				</div>
+			{/if}
+
+			<div class="content">
+				<slot />
+			</div>
+		</article>
+	</main>
+
+	<Footer />
+</div>
diff --git a/src/lib/layouts/waves-layout.svelte b/src/lib/layouts/waves-layout.svelte
new file mode 100644
index 00000000..ff550441
--- /dev/null
+++ b/src/lib/layouts/waves-layout.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Waves from '$lib/components/layout/waves.svelte';
+	import Header from '$lib/components/layout/header.svelte';
+	import Footer from '$lib/components/layout/footer.svelte';
+</script>
+
+<Waves />
+
+<Header />
+
+<main>
+	<slot />
+</main>
+
+<Footer />
diff --git a/src/lib/scss/markdown.scss b/src/lib/scss/markdown.scss
new file mode 100644
index 00000000..7859d976
--- /dev/null
+++ b/src/lib/scss/markdown.scss
@@ -0,0 +1,149 @@
+.markdown-layout {
+	background-color: var(--post-page-background-color);
+	header {
+		background: var(--footer-background);
+	}
+	footer {
+		--body-background-color: var(--post-page-background-color);
+	}
+}
+
+@import '../../lib/scss/mixins.scss';
+
+// #region Layout styles
+#markdown-content {
+	position: relative;
+	padding-top: 40px;
+	padding-bottom: 80px;
+	padding-right: 15px;
+	padding-left: 15px;
+
+	@include for-iphone-se {
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+	@include for-tablet-portrait-up {
+		padding-right: 20px;
+		padding-left: 20px;
+	}
+
+	@include for-tablet-landscape-up {
+		padding-right: 30px;
+		padding-left: 30px;
+	}
+
+	display: grid;
+	grid-template-columns:
+		1fr
+		min(65ch, 100%)
+		1fr;
+	grid-row-gap: 30px;
+	> * {
+		grid-column: 2;
+	}
+	.full-bleed {
+		width: 100%;
+		grid-column: 1 / 4;
+
+		img {
+			object-fit: cover;
+		}
+	}
+
+	.header {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		gap: 10px;
+
+		.note {
+			font-size: 90%;
+			color: rgba(var(--text-color-rgb), 0.8);
+		}
+	}
+
+	.cover-image {
+		width: 100%;
+		max-height: 400px;
+		box-shadow: var(--image-shadow);
+
+		img {
+			object-fit: cover;
+		}
+	}
+
+	.tags {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 5px;
+		flex-wrap: wrap;
+	}
+}
+// #endregion
+
+// #region Element styles
+
+#markdown-content {
+	.content {
+		p {
+			margin: 0.75rem 0;
+			line-height: 1.55em;
+		}
+
+		h2 {
+			margin: 3rem 0 0.5rem;
+		}
+
+		h3 {
+			font-size: 1.2rem;
+			margin: 2rem 0 0.3rem;
+		}
+
+		h4 {
+			font-size: 1.3rem;
+			margin: 2rem 0 0.3rem;
+		}
+
+		img {
+			display: block;
+			margin-left: auto;
+			margin-right: auto;
+			margin-top: 2rem;
+			margin-bottom: 2rem;
+
+			max-width: 100%;
+			height: auto;
+			width: auto;
+
+			box-shadow: var(--image-shadow);
+		}
+
+		figcaption {
+			font-size: 0.85rem;
+			text-align: center;
+			margin-bottom: 2rem;
+			color: rgba(var(--text-color-rgb), 0.8);
+		}
+
+		blockquote {
+			padding: 25px 25px 15px;
+			border-radius: 20px;
+			font-size: 1.1rem;
+			border-left: 4px solid var(--primary-color);
+			background: var(--callout-background-color);
+		}
+
+		code:not([class^='language-']) {
+			background: var(--inline-code-background-color);
+			padding: 5px 10px;
+			border-radius: 5px;
+			font-family: var(--mono-font);
+		}
+	}
+}
+
+// #endregion
diff --git a/src/routes/[slug]/__layout.reset.svelte b/src/routes/[slug]/__layout.reset.svelte
index f1db13b9..ba10e242 100644
--- a/src/routes/[slug]/__layout.reset.svelte
+++ b/src/routes/[slug]/__layout.reset.svelte
@@ -49,11 +49,11 @@
 	<meta name="twitter:image" content="{siteBaseUrl}/images/posts/{post.slug}/cover.jpg" />
 </svelte:head>
 
-<div class="blog-layout">
+<div class="markdown-layout">
 	<Header animated={false} />
 
 	<main>
-		<article id="blog-post">
+		<article id="markdown-content">
 			<div class="header">
 				<h1>{post.title}</h1>
 				<div class="note">Published on {dateformat(post.date, 'UTC:dd mmmm yyyy')}</div>
@@ -90,156 +90,4 @@
 	</main>
 
 	<Footer />
-</div>
-
-<style lang="scss">
-	.blog-layout {
-		background-color: var(--post-page-background-color);
-		:global(header) {
-			background: var(--footer-background);
-		}
-		:global(footer) {
-			--body-background-color: var(--post-page-background-color);
-		}
-	}
-
-	@import '../../lib/scss/mixins.scss';
-
-	// #region Layout styles
-	#blog-post {
-		position: relative;
-		padding-top: 40px;
-		padding-bottom: 80px;
-		padding-right: 15px;
-		padding-left: 15px;
-
-		@include for-iphone-se {
-			padding-left: 0;
-			padding-right: 0;
-		}
-
-		@include for-tablet-portrait-up {
-			padding-right: 20px;
-			padding-left: 20px;
-		}
-
-		@include for-tablet-landscape-up {
-			padding-right: 30px;
-			padding-left: 30px;
-		}
-
-		display: grid;
-		grid-template-columns:
-			1fr
-			min(65ch, 100%)
-			1fr;
-		grid-row-gap: 30px;
-		> * {
-			grid-column: 2;
-		}
-		.full-bleed {
-			width: 100%;
-			grid-column: 1 / 4;
-
-			:global(img) {
-				object-fit: cover;
-			}
-		}
-
-		.header {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			text-align: center;
-			gap: 10px;
-
-			.note {
-				font-size: 90%;
-				color: rgba(var(--text-color-rgb), 0.8);
-			}
-		}
-
-		.cover-image {
-			width: 100%;
-			max-height: 400px;
-			box-shadow: var(--image-shadow);
-
-			:global(img) {
-				object-fit: cover;
-			}
-		}
-
-		.tags {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			gap: 5px;
-			flex-wrap: wrap;
-		}
-	}
-	// #endregion
-
-	// #region Element styles
-
-	#blog-post {
-		.content {
-			:global(p) {
-				margin: 0.75rem 0;
-				line-height: 1.55em;
-			}
-
-			:global(h2) {
-				margin: 3rem 0 0.5rem;
-			}
-
-			:global(h3) {
-				font-size: 1.2rem;
-				margin: 2rem 0 0.3rem;
-			}
-
-			:global(h4) {
-				font-size: 1.3rem;
-				margin: 2rem 0 0.3rem;
-			}
-
-			:global(img) {
-				display: block;
-				margin-left: auto;
-				margin-right: auto;
-				margin-top: 2rem;
-				margin-bottom: 2rem;
-
-				max-width: 100%;
-				height: auto;
-				width: auto;
-
-				box-shadow: var(--image-shadow);
-			}
-
-			:global(figcaption) {
-				font-size: 0.85rem;
-				text-align: center;
-				margin-bottom: 2rem;
-				color: rgba(var(--text-color-rgb), 0.8);
-			}
-
-			:global(blockquote) {
-				padding: 25px 25px 15px;
-				border-radius: 20px;
-				font-size: 1.1rem;
-				border-left: 4px solid var(--primary-color);
-				background: var(--callout-background-color);
-			}
-
-			:global(code:not([class^='language-'])) {
-				background: var(--inline-code-background-color);
-				padding: 5px 10px;
-				border-radius: 5px;
-				font-family: var(--mono-font);
-			}
-		}
-	}
-
-	// #endregion
-</style>
+</div>
\ No newline at end of file
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 772d6bdb..174f9e94 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,8 +1,5 @@
 <script>
 	import '../app.scss';
-	import Waves from '$lib/components/layout/waves.svelte';
-	import Header from '$lib/components/layout/header.svelte';
-	import Footer from '$lib/components/layout/footer.svelte';
 	import { description, image, keywords, title } from '$lib/meta';
 </script>
 
@@ -14,19 +11,11 @@
 	<meta name="twitter:description" content={description} />
 
 	<title>{title}</title>
-  <meta property="og:title" content={title} />
+	<meta property="og:title" content={title} />
 	<meta name="twitter:title" content={title} />
 
 	<meta property="og:image" content={image} />
 	<meta name="twitter:image" content={image} />
 </svelte:head>
 
-<Waves />
-
-<Header />
-
-<main>
-	<slot />
-</main>
-
-<Footer />
+<slot />
diff --git a/src/routes/blog.json.js b/src/routes/blog/index.json.js
similarity index 100%
rename from src/routes/blog.json.js
rename to src/routes/blog/index.json.js
diff --git a/src/routes/blog.svelte b/src/routes/blog/index.svelte
similarity index 63%
rename from src/routes/blog.svelte
rename to src/routes/blog/index.svelte
index 2a5a6396..82179a33 100644
--- a/src/routes/blog.svelte
+++ b/src/routes/blog/index.svelte
@@ -22,18 +22,21 @@
 	import BlogGrid from '$lib/components/layout/3-2-1-grid.svelte';
 	import Section from '$lib/components/layout/section.svelte';
 	import BlogPostCard from '$lib/components/base/blog-post-card.svelte';
+	import WavesLayout from '$lib/layouts/waves-layout.svelte';
 
 	export let posts;
 </script>
 
-<section id="blog">
-	<Section align="top" title="All posts">
-		<div class="container">
-			<BlogGrid>
-				{#each posts as post}
-					<BlogPostCard {post} />
-				{/each}
-			</BlogGrid>
-		</div>
-	</Section>
-</section>
+<WavesLayout>
+	<section id="blog">
+		<Section align="top" title="All posts">
+			<div class="container">
+				<BlogGrid>
+					{#each posts as post}
+						<BlogPostCard {post} />
+					{/each}
+				</BlogGrid>
+			</div>
+		</Section>
+	</section>
+</WavesLayout>
diff --git a/src/routes/digital-tools.md b/src/routes/digital-tools.md
new file mode 100644
index 00000000..b4f01390
--- /dev/null
+++ b/src/routes/digital-tools.md
@@ -0,0 +1,46 @@
+---
+layout: article
+title: Gear and Digital Tools
+image:
+  path: projects
+  filename: personal-website
+---
+
+# This page is still a work in progress. I oughta finish it sometime =)
+
+Here are the digital tools I use to get work or fun done. I try to keep this list updated, but nothing here is set in stone, as I'm prone to trying out new things if I feel they might make my life easier.
+
+
+## Hardware
+
+* A **Dell XPS 15 9570**, with 16GB of RAM, an i7-8750H and NVidia 1050TI
+  * A very competent laptop, even if I don't really use its GPU much. Quiet at most times, performance has never been a problem, and its screen, keyboard and trackpad are amazing for when I use it as a laptop. Most of the time though, I use it in clamshell mode connected to two external monitors. Battery life can go up to 6-7h of VS Code + Web browser, which is more than enough for me.
+
+* Currently runs <a href="https://pop.system76.com/" target="_blank" rel="noopener">**Pop!_OS 21.10**</a>. Previously I've used <a href="https://elementary.io/" target="_blank" rel="noopener">elementaryOS</a>
+  * I just prefer using Linux systems and these are my favorites. All of them have their pros and cons and honestly I'd be happy sticking to any one of them, but I like to hop every once in a while.
+
+* Two **Dell P2419H** monitors
+  * They're fantastic for the price. 1080p, but with great colors, viewing angles, and brightness levels. I use them side-by-side on a symmetrical setup, so the small borders make it look great. If I had the money I'd have bought the 4K equivalents, but to be honest they serve me really well.
+
+* **Logitech MX Vertical** mouse
+  * Vertical mice changed my life. I used to have constant wrist pains after working all day in the computer, and would often have to change hands to avoid a more serious injury. With this vertical mouse, after a single day of adaptation, I already felt the difference. Plus, it has two configurable buttons to use with the thumb that greatly improved my workflow by being able to run keyboard shortcuts on a single button press.
+
+* **Logitech MX Keys** keyboard
+  * I never got into the mechanical keyboard bandwagon. I kinda got interested in them a while ago, but they're too noisy and I share a (home) office with my wife. So when researching a good keyboard that wasn't noisy, I found this one. It feels like a (good) laptop keyboard, in the best possible way. It's silent, clicky, and comfortable.
+
+* **Sennheiser HD 450BT** headphones
+  * Clear sound, high quality, good battery life, works with or without a cable. Not the greatest bass, which is actually good for the music I usually listen to.
+
+* **Logitech C270** Webcam
+  * Since I use my laptop in clamshell mode, I got a webcam for the video calls for work. It's just a webcam, it does the job and it was cheap. Nothing to complain about.
+
+* **iPhone 12** and **Apple Watch SE**
+  * They're great and do the job for everything I need. I'm not bothered by the lack of integration between iOS and Linux; I achieve what I need via 3rd-party apps and I don't miss the rest. I do have a spare Samsung Galaxy S10e though for testing mobile apps if I have to.
+
+## Software
+
+* Development
+  * Visual Studio Code is my code editor of choice. It can be simple or complex depending on the needs, and I've spent my time customizing it to fit my workflow and A E S T H E T I C needs.
+  * ZSH is the shell I currently use, because it looks cool. But I don't really use it enough to find it better than bash.
+  * Svelte is my preferred web framework for personal projects (like this website).
+  * React is the web framework I use at work, usually. I don't like it.
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index afd630b9..0ef2fa81 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -3,12 +3,10 @@
 		const url = '/posts.json';
 		const res = await fetch(url);
 
-		const test = await res.json()
-
 		if (res.ok) {
 			return {
 				props: {
-					posts: test
+					posts: await res.json()
 				}
 			};
 		}
@@ -26,14 +24,17 @@
 	import RecentPosts from '$lib/components/home/recent-posts.svelte';
 	import Experience from '$lib/components/home/experience.svelte';
 	import Projects from '$lib/components/home/projects.svelte';
+	import WavesLayout from '$lib/layouts/waves-layout.svelte';
 
 	export let posts;
 </script>
 
-<div class="container">
-	<Hero />
-	<About />
-	<RecentPosts {posts} />
-	<Projects />
-	<Experience />
-</div>
+<WavesLayout>
+	<div class="container">
+		<Hero />
+		<About />
+		<RecentPosts {posts} />
+		<Projects />
+		<Experience />
+	</div>
+</WavesLayout>
diff --git a/src/routes/resume.svelte b/src/routes/resume.svelte
index 602d49b5..2e706f38 100644
--- a/src/routes/resume.svelte
+++ b/src/routes/resume.svelte
@@ -1,5 +1,6 @@
 <script>
-	import { title } from '$lib/meta';
+	import WavesLayout from '$lib/layouts/waves-layout.svelte';
+import { title } from '$lib/meta';
 </script>
 
 <svelte:head>
@@ -11,9 +12,11 @@
 	<meta name="twitter:title" content="Resume - {title}" />
 </svelte:head>
 
-<div class="resume-wrapper">
-	<mf-resume show-download-link="true" />
-</div>
+<WavesLayout>
+	<div class="resume-wrapper">
+		<mf-resume show-download-link="true" />
+	</div>
+</WavesLayout>
 
 <style lang="scss">
 	.resume-wrapper {
diff --git a/svelte.config.js b/svelte.config.js
index 4a1c9066..61af29b3 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -16,6 +16,9 @@ const config = {
       preserve: ['module']
     }),
 		mdsvex({
+			layout: {
+				article: './src/lib/layouts/article-layout.svelte'
+			},
 			extensions: extensions,
       rehypePlugins: [
 				rehypeExternalLinks, // Adds 'target' and 'rel' to external links