From ef8d04633e87ac997722a70537dfeef1b4ae7e32 Mon Sep 17 00:00:00 2001
From: Dan Jutan <danjutan@gmail.com>
Date: Fri, 2 Sep 2022 13:30:02 -0400
Subject: [PATCH] run prettier

---
 examples/portfolio/astro.config.mjs           |   3 +-
 .../portfolio/src/components/Button.astro     |  16 +-
 .../portfolio/src/components/Footer.astro     |  32 +--
 .../portfolio/src/components/MainHead.astro   |   6 +-
 examples/portfolio/src/components/Nav.astro   | 182 +++++++-------
 .../src/components/PortfolioPreview.astro     | 231 +++++++++---------
 examples/portfolio/src/layouts/project.astro  |  10 +-
 examples/portfolio/src/pages/404.astro        |   6 +-
 examples/portfolio/src/pages/about.astro      |  57 ++---
 examples/portfolio/src/pages/index.astro      |  42 ++--
 examples/portfolio/src/pages/projects.astro   |  19 +-
 examples/portfolio/src/styles/global.css      |   1 -
 12 files changed, 281 insertions(+), 324 deletions(-)

diff --git a/examples/portfolio/astro.config.mjs b/examples/portfolio/astro.config.mjs
index 8659ce894..882e6515a 100644
--- a/examples/portfolio/astro.config.mjs
+++ b/examples/portfolio/astro.config.mjs
@@ -1,5 +1,4 @@
 import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
-export default defineConfig({
-});
+export default defineConfig({});
diff --git a/examples/portfolio/src/components/Button.astro b/examples/portfolio/src/components/Button.astro
index 8804af6db..7b70175fb 100644
--- a/examples/portfolio/src/components/Button.astro
+++ b/examples/portfolio/src/components/Button.astro
@@ -1,13 +1,13 @@
 <span>
-    <slot />
+	<slot />
 </span>
 
 <style>
-    span {
-        display: inline-block;
-        border: 3px solid currentColor;
-        padding: 0.5em 1em;
-        font-weight: 700;
-        text-transform: uppercase;
-    }
+	span {
+		display: inline-block;
+		border: 3px solid currentColor;
+		padding: 0.5em 1em;
+		font-weight: 700;
+		text-transform: uppercase;
+	}
 </style>
diff --git a/examples/portfolio/src/components/Footer.astro b/examples/portfolio/src/components/Footer.astro
index de55823ac..f238d6b6f 100644
--- a/examples/portfolio/src/components/Footer.astro
+++ b/examples/portfolio/src/components/Footer.astro
@@ -3,23 +3,23 @@ const currentYear = new Date().getFullYear();
 ---
 
 <footer>
-    &copy; {currentYear} Jeanine White
-    <small class="byline">🚀 Built by Astro</small>
+	&copy; {currentYear} Jeanine White
+	<small class="byline">🚀 Built by Astro</small>
 </footer>
 <style>
-    footer {
-        text-align: center;
-        padding-top: 8rem;
-        padding-right: 2rem;
-        padding-bottom: 4rem;
-        padding-left: 2rem;
-    }
+	footer {
+		text-align: center;
+		padding-top: 8rem;
+		padding-right: 2rem;
+		padding-bottom: 4rem;
+		padding-left: 2rem;
+	}
 
-    .byline {
-        display: block;
-        margin-top: 1rem;
-        color: var(--t-subdue);
-        font-size: var(--f-d2);
-        text-transform: uppercase;
-    }
+	.byline {
+		display: block;
+		margin-top: 1rem;
+		color: var(--t-subdue);
+		font-size: var(--f-d2);
+		text-transform: uppercase;
+	}
 </style>
diff --git a/examples/portfolio/src/components/MainHead.astro b/examples/portfolio/src/components/MainHead.astro
index da3fdd03c..d7757af2a 100644
--- a/examples/portfolio/src/components/MainHead.astro
+++ b/examples/portfolio/src/components/MainHead.astro
@@ -1,8 +1,8 @@
 ---
-import "../styles/global.css";
+import '../styles/global.css';
 const {
-	title = "Jeanine White: Personal Site",
-	description = "The personal site of Jeanine White",
+	title = 'Jeanine White: Personal Site',
+	description = 'The personal site of Jeanine White',
 } = Astro.props;
 ---
 
diff --git a/examples/portfolio/src/components/Nav.astro b/examples/portfolio/src/components/Nav.astro
index 45be2ecad..c08fc741f 100644
--- a/examples/portfolio/src/components/Nav.astro
+++ b/examples/portfolio/src/components/Nav.astro
@@ -1,107 +1,99 @@
 <nav>
-    <a class="link" href="/">
-        <div class="monogram">JW</div>
-    </a>
-    <a class="link" href="/projects"> Portfolio</a>
-    <a class="link" href="/about"> About</a>
-    <a class="social" href="https://twitter.com/me">
-        <svg
-            class="socialIcon"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 16 16"
-        >
-            <path
-                d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
-            ></path>
-        </svg>
-    </a>
-    <a class="social" href="https://github.com/me">
-        <svg
-            class="socialIcon"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 16 16"
-        >
-            <path
-                d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
-            ></path>
-        </svg>
-    </a>
-    <a class="social" href="https://dev.to/me">
-        <svg
-            class="socialIcon"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 50 40"
-            style="enable-background:new 0 0 50 40"
-            xml:space="preserve"
-        >
-            <path
-                d="M15.7 15.5c-.4-.3-.7-.4-1.1-.4h-1.7v10.1h1.7c.4 0 .8-.1 1.1-.4.4-.3.6-.7.6-1.3v-6.7c0-.6-.2-1-.6-1.3z"
-            ></path>
-            <path
-                d="M47 0H3C1.3 0 0 1.3 0 3v34c0 1.7 1.3 3 3 3h44c1.7 0 3-1.3 3-3V3c0-1.7-1.3-3-3-3zM19.1 23.5c0 1.3-.4 2.4-1.3 3.2-.8.9-1.9 1.3-3.3 1.3h-4.4V12.3h4.5c1.3 0 2.4.4 3.2 1.3.8.8 1.3 1.9 1.3 3.2v6.7zm9.1-8.4h-5.1v3.6h3.1v2.8h-3.1v3.7h5.1V28h-5.9c-.6 0-1-.2-1.4-.6-.4-.4-.6-.8-.6-1.4V14.2c0-.6.2-1 .6-1.4.4-.4.8-.6 1.4-.6h5.9v2.9zM37.5 26c-.6 1.3-1.3 2-2.2 2-.9 0-1.7-.7-2.2-2l-3.7-13.8h3.1L35.3 23l2.8-10.8h3.1L37.5 26z"
-            ></path>
-        </svg>
-    </a>
+	<a class="link" href="/">
+		<div class="monogram">JW</div>
+	</a>
+	<a class="link" href="/projects"> Portfolio</a>
+	<a class="link" href="/about"> About</a>
+	<a class="social" href="https://twitter.com/me">
+		<svg class="socialIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+			<path
+				d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
+			></path>
+		</svg>
+	</a>
+	<a class="social" href="https://github.com/me">
+		<svg class="socialIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+			<path
+				d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+			></path>
+		</svg>
+	</a>
+	<a class="social" href="https://dev.to/me">
+		<svg
+			class="socialIcon"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 50 40"
+			style="enable-background:new 0 0 50 40"
+			xml:space="preserve"
+		>
+			<path
+				d="M15.7 15.5c-.4-.3-.7-.4-1.1-.4h-1.7v10.1h1.7c.4 0 .8-.1 1.1-.4.4-.3.6-.7.6-1.3v-6.7c0-.6-.2-1-.6-1.3z"
+			></path>
+			<path
+				d="M47 0H3C1.3 0 0 1.3 0 3v34c0 1.7 1.3 3 3 3h44c1.7 0 3-1.3 3-3V3c0-1.7-1.3-3-3-3zM19.1 23.5c0 1.3-.4 2.4-1.3 3.2-.8.9-1.9 1.3-3.3 1.3h-4.4V12.3h4.5c1.3 0 2.4.4 3.2 1.3.8.8 1.3 1.9 1.3 3.2v6.7zm9.1-8.4h-5.1v3.6h3.1v2.8h-3.1v3.7h5.1V28h-5.9c-.6 0-1-.2-1.4-.6-.4-.4-.6-.8-.6-1.4V14.2c0-.6.2-1 .6-1.4.4-.4.8-.6 1.4-.6h5.9v2.9zM37.5 26c-.6 1.3-1.3 2-2.2 2-.9 0-1.7-.7-2.2-2l-3.7-13.8h3.1L35.3 23l2.8-10.8h3.1L37.5 26z"
+			></path>
+		</svg>
+	</a>
 </nav>
 
 <style>
-    nav {
-        display: flex;
-        align-items: center;
-        padding-top: 1rem;
-        padding-right: 2rem;
-        padding-bottom: 1rem;
-        padding-left: 2rem;
-    }
+	nav {
+		display: flex;
+		align-items: center;
+		padding-top: 1rem;
+		padding-right: 2rem;
+		padding-bottom: 1rem;
+		padding-left: 2rem;
+	}
 
-    .link {
-        color: var(--t-subdue);
-        display: block;
-        margin-left: 1rem;
-        text-decoration: none;
-        font-size: var(--f-d1);
-        text-transform: uppercase;
-        padding-top: 0.75em;
-        padding-bottom: 0.75em;
-    }
+	.link {
+		color: var(--t-subdue);
+		display: block;
+		margin-left: 1rem;
+		text-decoration: none;
+		font-size: var(--f-d1);
+		text-transform: uppercase;
+		padding-top: 0.75em;
+		padding-bottom: 0.75em;
+	}
 
-    .link:hover,
-    .link:focus {
-        color: var(--t-active);
-    }
+	.link:hover,
+	.link:focus {
+		color: var(--t-active);
+	}
 
-    .monogram {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 2em;
-        height: 2em;
-        margin-right: 0.5rem;
-        color: var(--c-black);
-        font-weight: 900;
-        letter-spacing: -0.125rem;
-        border: 3px solid currentColor;
-        border-radius: 50%;
-    }
+	.monogram {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2em;
+		height: 2em;
+		margin-right: 0.5rem;
+		color: var(--c-black);
+		font-weight: 900;
+		letter-spacing: -0.125rem;
+		border: 3px solid currentColor;
+		border-radius: 50%;
+	}
 
-    .social {
-        display: block;
-        margin-left: auto;
-    }
+	.social {
+		display: block;
+		margin-left: auto;
+	}
 
-    .social + .social {
-        margin-left: 0.75rem;
-    }
+	.social + .social {
+		margin-left: 0.75rem;
+	}
 
-    .socialIcon {
-        display: block;
-        width: 1.25rem;
-        height: 1.25rem;
-        fill: var(--t-subdue);
-        transition: fill linear 150ms;
-    }
+	.socialIcon {
+		display: block;
+		width: 1.25rem;
+		height: 1.25rem;
+		fill: var(--t-subdue);
+		transition: fill linear 150ms;
+	}
 
-    .socialIcon:hover {
-        fill: var(--t-active);
-    }
+	.socialIcon:hover {
+		fill: var(--t-active);
+	}
 </style>
diff --git a/examples/portfolio/src/components/PortfolioPreview.astro b/examples/portfolio/src/components/PortfolioPreview.astro
index d21a0dfa9..3d0a91522 100644
--- a/examples/portfolio/src/components/PortfolioPreview.astro
+++ b/examples/portfolio/src/components/PortfolioPreview.astro
@@ -3,136 +3,133 @@ const { frontmatter, url } = Astro.props.project;
 ---
 
 <div class="card">
-    <div class="titleCard" style={`background-image:url(${frontmatter.img})`}>
-        <h1 class="title">{frontmatter.title}</h1>
-    </div>
-    <div class="descCard">
-        <p class="desc">{frontmatter.description}</p>
-        <div class="tags">
-            Tagged:
-            {
-                frontmatter.tags.map((t) => (
-                    <div class="tag" data-tag={t}>
-                        {t}
-                    </div>
-                ))
-            }
-        </div>
-        <a class="link" href={url}>
-            <span class="linkInner">View</span>
-        </a>
-    </div>
+	<div class="titleCard" style={`background-image:url(${frontmatter.img})`}>
+		<h1 class="title">{frontmatter.title}</h1>
+	</div>
+	<div class="descCard">
+		<p class="desc">{frontmatter.description}</p>
+		<div class="tags">
+			Tagged:
+			{frontmatter.tags.map((t) => (
+				<div class="tag" data-tag={t}>
+					{t}
+				</div>
+			))}
+		</div>
+		<a class="link" href={url}>
+			<span class="linkInner">View</span>
+		</a>
+	</div>
 </div>
 
 <style>
-    .card {
-        position: relative;
-        color: var(--t-bg);
-        background: var(--t-fg);
-        border: 1px solid #f0f0f0;
-    }
+	.card {
+		position: relative;
+		color: var(--t-bg);
+		background: var(--t-fg);
+		border: 1px solid #f0f0f0;
+	}
 
-    .title {
-        position: absolute;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 0;
-        color: white;
-        flex-direction: column;
-        font-size: var(--f-u4);
-        font-weight: 900;
-        text-transform: uppercase;
-        letter-spacing: 0.0625em;
-    }
+	.title {
+		position: absolute;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin: 0;
+		color: white;
+		flex-direction: column;
+		font-size: var(--f-u4);
+		font-weight: 900;
+		text-transform: uppercase;
+		letter-spacing: 0.0625em;
+	}
 
-    .titleCard {
-        position: relative;
-        background-size: cover;
-        background-position: 50% 100%;
-        padding-top: 37.5%;
-    }
+	.titleCard {
+		position: relative;
+		background-size: cover;
+		background-position: 50% 100%;
+		padding-top: 37.5%;
+	}
 
-    .descCard {
-        padding: 1.5em;
-    }
+	.descCard {
+		padding: 1.5em;
+	}
 
-    .desc {
-        font-size: var(--f-u1);
-        line-height: 1.4;
-        margin-top: 0em;
-        margin-bottom: 1em;
-    }
+	.desc {
+		font-size: var(--f-u1);
+		line-height: 1.4;
+		margin-top: 0em;
+		margin-bottom: 1em;
+	}
 
-    .link {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        color: var(--t-bg);
-        font-size: var(--f-u2);
-        font-weight: 700;
-        background: rgba(0, 0, 0, 0.25);
-        opacity: 0;
-        text-decoration: none;
-        text-transform: uppercase;
-        transition: opacity 150ms linear;
-    }
+	.link {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		color: var(--t-bg);
+		font-size: var(--f-u2);
+		font-weight: 700;
+		background: rgba(0, 0, 0, 0.25);
+		opacity: 0;
+		text-decoration: none;
+		text-transform: uppercase;
+		transition: opacity 150ms linear;
+	}
 
-    .link:focus,
-    .link:hover {
-        opacity: 1;
-    }
+	.link:focus,
+	.link:hover {
+		opacity: 1;
+	}
 
-    .link:focus,
-    .link:hover .linkInner {
-        transform: translateY(0);
-        border-color: rgba(255, 255, 255, 0.625);
-    }
+	.link:focus,
+	.link:hover .linkInner {
+		transform: translateY(0);
+		border-color: rgba(255, 255, 255, 0.625);
+	}
 
-    .linkInner {
-        padding: 0.375em 1em;
-        border: 2px solid rgba(255, 255, 255, 0);
-        transition: transform 300ms cubic-bezier(0, 0.4, 0.6, 1),
-            border-color 1s linear;
-        transform: translateY(25%);
-    }
+	.linkInner {
+		padding: 0.375em 1em;
+		border: 2px solid rgba(255, 255, 255, 0);
+		transition: transform 300ms cubic-bezier(0, 0.4, 0.6, 1), border-color 1s linear;
+		transform: translateY(25%);
+	}
 
-    .nav {
-        display: flex;
-        justify-content: flex-end;
-    }
+	.nav {
+		display: flex;
+		justify-content: flex-end;
+	}
 
-    .tags {
-        font-size: var(--f-d2);
-        text-transform: uppercase;
-    }
+	.tags {
+		font-size: var(--f-d2);
+		text-transform: uppercase;
+	}
 
-    .tag {
-        display: inline-block;
-        color: var(--c-yellow);
-        text-transform: uppercase;
-        margin-left: 0.5em;
-    }
+	.tag {
+		display: inline-block;
+		color: var(--c-yellow);
+		text-transform: uppercase;
+		margin-left: 0.5em;
+	}
 
-    .tag:nth-of-type(1n) {
-        color: var(--c-green);
-    }
-    .tag:nth-of-type(2n) {
-        color: var(--c-orange);
-    }
-    .tag:nth-of-type(3n) {
-        color: var(--c-blue);
-    }
-    .tag:nth-of-type(4n) {
-        color: var(--c-pink);
-    }
+	.tag:nth-of-type(1n) {
+		color: var(--c-green);
+	}
+	.tag:nth-of-type(2n) {
+		color: var(--c-orange);
+	}
+	.tag:nth-of-type(3n) {
+		color: var(--c-blue);
+	}
+	.tag:nth-of-type(4n) {
+		color: var(--c-pink);
+	}
 </style>
diff --git a/examples/portfolio/src/layouts/project.astro b/examples/portfolio/src/layouts/project.astro
index 30bb78a4c..08b91a603 100644
--- a/examples/portfolio/src/layouts/project.astro
+++ b/examples/portfolio/src/layouts/project.astro
@@ -1,13 +1,13 @@
 ---
-import MainHead from "../components/MainHead.astro";
-import Button from "../components/Button.astro";
-import Footer from "../components/Footer.astro";
-import Nav from "../components/Nav.astro";
+import MainHead from '../components/MainHead.astro';
+import Button from '../components/Button.astro';
+import Footer from '../components/Footer.astro';
+import Nav from '../components/Nav.astro';
 
 const { content } = Astro.props;
 ---
 
-<html lang={content.lang || "en"}>
+<html lang={content.lang || 'en'}>
 	<head>
 		<MainHead title={content.title} description={content.description} />
 		<style>
diff --git a/examples/portfolio/src/pages/404.astro b/examples/portfolio/src/pages/404.astro
index 2818768a2..f776936af 100644
--- a/examples/portfolio/src/pages/404.astro
+++ b/examples/portfolio/src/pages/404.astro
@@ -1,7 +1,7 @@
 ---
-import MainHead from "../components/MainHead.astro";
-import Footer from "../components/Footer.astro";
-import Nav from "../components/Nav.astro";
+import MainHead from '../components/MainHead.astro';
+import Footer from '../components/Footer.astro';
+import Nav from '../components/Nav.astro';
 ---
 
 <html lang="en">
diff --git a/examples/portfolio/src/pages/about.astro b/examples/portfolio/src/pages/about.astro
index d2008723d..21c9be3d1 100644
--- a/examples/portfolio/src/pages/about.astro
+++ b/examples/portfolio/src/pages/about.astro
@@ -1,15 +1,12 @@
 ---
-import MainHead from "../components/MainHead.astro";
-import Footer from "../components/Footer.astro";
-import Nav from "../components/Nav.astro";
+import MainHead from '../components/MainHead.astro';
+import Footer from '../components/Footer.astro';
+import Nav from '../components/Nav.astro';
 ---
 
 <html lang="en">
 	<head>
-		<MainHead
-			title="About | Jeanine White"
-			description="About Jeanine White Lorem Ipsum"
-		/>
+		<MainHead title="About | Jeanine White" description="About Jeanine White Lorem Ipsum" />
 		<style>
 			.heroImg {
 				max-height: 24rem;
@@ -41,41 +38,33 @@ import Nav from "../components/Nav.astro";
 			</div>
 			<div class="bio wrapper wrapper__readable">
 				<p>
-					Cream cheese say cheese stinking bishop. Brie fondue hard
-					cheese bocconcini feta camembert de normandie babybel
-					airedale. Red leicester swiss manchego mascarpone pepper
-					jack airedale fromage frais ricotta. Cheese and biscuits
-					cauliflower cheese boursin.
+					Cream cheese say cheese stinking bishop. Brie fondue hard cheese bocconcini feta camembert
+					de normandie babybel airedale. Red leicester swiss manchego mascarpone pepper jack
+					airedale fromage frais ricotta. Cheese and biscuits cauliflower cheese boursin.
 				</p>
 				<p>
-					Pepper jack cheesy feet cheese slices. Halloumi port-salut
-					queso caerphilly roquefort cheese slices cheesy feet rubber
-					cheese. Cheese slices smelly cheese pecorino macaroni cheese
-					feta blue castello roquefort edam. Babybel pepper jack
-					airedale cheddar fromage frais manchego.
+					Pepper jack cheesy feet cheese slices. Halloumi port-salut queso caerphilly roquefort
+					cheese slices cheesy feet rubber cheese. Cheese slices smelly cheese pecorino macaroni
+					cheese feta blue castello roquefort edam. Babybel pepper jack airedale cheddar fromage
+					frais manchego.
 				</p>
 				<p>
-					Cauliflower cheese lancashire macaroni cheese. Cheeseburger
-					babybel cheese on toast airedale cauliflower cheese who
-					moved my cheese roquefort paneer. Stinking bishop cheddar
-					taleggio port-salut port-salut stinking bishop cheesy grin
-					babybel. Blue castello feta everyone loves brie.
+					Cauliflower cheese lancashire macaroni cheese. Cheeseburger babybel cheese on toast
+					airedale cauliflower cheese who moved my cheese roquefort paneer. Stinking bishop cheddar
+					taleggio port-salut port-salut stinking bishop cheesy grin babybel. Blue castello feta
+					everyone loves brie.
 				</p>
 				<p>
-					Goat squirty cheese cut the cheese. Cheese and wine cheddar
-					fondue airedale cottage cheese camembert de normandie feta
-					babybel. Rubber cheese melted cheese pecorino port-salut
-					fondue gouda cheese on toast cheesy feet. Feta edam everyone
-					loves cheese strings camembert de normandie.
+					Goat squirty cheese cut the cheese. Cheese and wine cheddar fondue airedale cottage cheese
+					camembert de normandie feta babybel. Rubber cheese melted cheese pecorino port-salut
+					fondue gouda cheese on toast cheesy feet. Feta edam everyone loves cheese strings
+					camembert de normandie.
 				</p>
 				<p>
-					Caerphilly monterey jack goat. Squirty cheese cheesy grin
-					hard cheese cheese strings cheese and biscuits croque
-					monsieur smelly cheese danish fontina. Swiss cheese
-					triangles everyone loves mascarpone cheese on toast who
-					moved my cheese lancashire cheeseburger. Fromage frais
-					fromage frais cheese and biscuits stinking bishop
-					cauliflower cheese.
+					Caerphilly monterey jack goat. Squirty cheese cheesy grin hard cheese cheese strings
+					cheese and biscuits croque monsieur smelly cheese danish fontina. Swiss cheese triangles
+					everyone loves mascarpone cheese on toast who moved my cheese lancashire cheeseburger.
+					Fromage frais fromage frais cheese and biscuits stinking bishop cauliflower cheese.
 				</p>
 			</div>
 		</div>
diff --git a/examples/portfolio/src/pages/index.astro b/examples/portfolio/src/pages/index.astro
index 386725d13..9af44f398 100644
--- a/examples/portfolio/src/pages/index.astro
+++ b/examples/portfolio/src/pages/index.astro
@@ -1,13 +1,13 @@
 ---
 // Component Imports
-import MainHead from "../components/MainHead.astro";
-import Button from "../components/Button.astro";
-import Nav from "../components/Nav.astro";
-import Footer from "../components/Footer.astro";
-import PortfolioPreview from "../components/PortfolioPreview.astro";
+import MainHead from '../components/MainHead.astro';
+import Button from '../components/Button.astro';
+import Nav from '../components/Nav.astro';
+import Footer from '../components/Footer.astro';
+import PortfolioPreview from '../components/PortfolioPreview.astro';
 
 // Data Fetching: List all Markdown posts in the repo.
-const projects = await Astro.glob("./project/**/*.md");
+const projects = await Astro.glob('./project/**/*.md');
 const featuredProject = projects[0];
 
 // Full Astro Component Syntax:
@@ -45,7 +45,7 @@ const featuredProject = projects[0];
 
 			.gradient,
 			.gradient2 {
-				background-image: url("/assets/mesh-gradient.jpg");
+				background-image: url('/assets/mesh-gradient.jpg');
 				background-size: cover;
 				pointer-events: none;
 				mix-blend-mode: screen;
@@ -211,19 +211,12 @@ const featuredProject = projects[0];
 			<div class="gradient2"></div>
 			<div class="overlay">
 				<h1 class="title">
-					<small class="subtitle">The personal site of</small>Jeanine
-					White
+					<small class="subtitle">The personal site of</small>Jeanine White
 				</h1>
 				<div>
-					<span class="role"
-						>👩‍💻 Developer <span class="invert">👩‍💻 Developer</span>
-					</span>&nbsp;
-					<span class="role"
-						>🎤 Speaker <span class="invert">🎤 Speaker</span>
-					</span>&nbsp;
-					<span class="role"
-						>✏️ Writer <span class="invert">✏️ Writer</span>
-					</span>
+					<span class="role">👩‍💻 Developer <span class="invert">👩‍💻 Developer</span></span>&nbsp;
+					<span class="role">🎤 Speaker <span class="invert">🎤 Speaker</span></span>&nbsp;
+					<span class="role">✏️ Writer <span class="invert">✏️ Writer</span></span>
 				</div>
 				<p class="desc">Lover of dogs, roadtrips, and poetry.</p>
 			</div>
@@ -242,16 +235,9 @@ const featuredProject = projects[0];
 				<div class="section">
 					<h3 class="sectionTitle">About me</h3>
 					<p class="bio">
-						<span>Hello!</span> I’m Jeanine, and this is my website.
-						It was made using{" "}
-						<a
-							href="https://github.com/withastro/astro"
-							target="_blank"
-							rel="nofollow"
-						>
-							Astro</a
-						>, a new way to build static sites. This is just an
-						example template for you to modify.
+						<span>Hello!</span> I’m Jeanine, and this is my website. It was made using{' '}
+						<a href="https://github.com/withastro/astro" target="_blank" rel="nofollow"> Astro</a>,
+						a new way to build static sites. This is just an example template for you to modify.
 					</p>
 					<p>
 						<a href="/about">Read more</a>
diff --git a/examples/portfolio/src/pages/projects.astro b/examples/portfolio/src/pages/projects.astro
index f32de040c..1f52ea707 100644
--- a/examples/portfolio/src/pages/projects.astro
+++ b/examples/portfolio/src/pages/projects.astro
@@ -1,15 +1,14 @@
 ---
-import MainHead from "../components/MainHead.astro";
-import Footer from "../components/Footer.astro";
-import Nav from "../components/Nav.astro";
-import PortfolioPreview from "../components/PortfolioPreview.astro";
+import MainHead from '../components/MainHead.astro';
+import Footer from '../components/Footer.astro';
+import Nav from '../components/Nav.astro';
+import PortfolioPreview from '../components/PortfolioPreview.astro';
 
-const projects = (await Astro.glob("./project/**/*.md"))
+const projects = (await Astro.glob('./project/**/*.md'))
 	.filter(({ frontmatter }) => !!frontmatter.publishDate)
 	.sort(
 		(a, b) =>
-			new Date(b.frontmatter.publishDate).valueOf() -
-			new Date(a.frontmatter.publishDate).valueOf()
+			new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf()
 	);
 ---
 
@@ -35,11 +34,7 @@ const projects = (await Astro.glob("./project/**/*.md"))
 		<div class="wrapper">
 			<h1 class="title">All Projects</h1>
 			<div class="grid">
-				{
-					projects.map((project) => (
-						<PortfolioPreview project={project} />
-					))
-				}
+				{projects.map((project) => <PortfolioPreview project={project} />)}
 			</div>
 		</div>
 		<Footer />
diff --git a/examples/portfolio/src/styles/global.css b/examples/portfolio/src/styles/global.css
index 25ac81063..5e10d190c 100644
--- a/examples/portfolio/src/styles/global.css
+++ b/examples/portfolio/src/styles/global.css
@@ -77,7 +77,6 @@ h1 {
 	font-size: var(--f-u8);
 }
 
-
 .wrapper {
 	max-width: 80em;
 	margin-left: auto;