Update portfolio, removing Sass and Preact (#4556)

* remove sass and preact from portfolio example

* add back public folder

* remove lockfile

* Update examples/portfolio/src/layouts/project.astro

Co-authored-by: Ben Holmes <hey@bholmes.dev>

* run prettier

* Update examples/portfolio/src/pages/index.astro

Co-authored-by: Ben Holmes <hey@bholmes.dev>

* remove wrapper class

* remove button component; fix padding

* improve mobile layout

* lockfile

* Revert "lockfile"

This reverts commit e32518f4443d0b16cf0ec2301bac8690d57c2360.

* Update examples/portfolio/src/pages/index.astro

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update examples/portfolio/src/components/Nav.astro

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* update astro

* lockfile (again)

Co-authored-by: Ben Holmes <hey@bholmes.dev>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

21 files changed, 483 insertions, 563 deletions

diff --git a/examples/portfolio/astro.config.mjs b/examples/portfolio/astro.config.mjs
index 08916b1fe..882e6515a 100644
--- a/examples/portfolio/astro.config.mjs
+++ b/examples/portfolio/astro.config.mjs
@@ -1,7 +1,4 @@
 import { defineConfig } from 'astro/config';
-import preact from '@astrojs/preact';
 
 // https://astro.build/config
-export default defineConfig({
-	integrations: [preact()],
-});
+export default defineConfig({});
diff --git a/examples/portfolio/package.json b/examples/portfolio/package.json
index 80548ef9d..a1c002dc7 100644
--- a/examples/portfolio/package.json
+++ b/examples/portfolio/package.json
@@ -10,9 +10,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "preact": "^10.7.3",
-    "@astrojs/preact": "^1.0.2",
-    "astro": "^1.1.5",
-    "sass": "^1.52.2"
+    "astro": "^1.1.5"
   }
 }
diff --git a/examples/portfolio/src/components/Button/index.jsx b/examples/portfolio/src/components/Button/index.jsx
deleted file mode 100644
index d8e04aa71..000000000
--- a/examples/portfolio/src/components/Button/index.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { h } from 'preact';
-import Styles from './styles.module.scss';
-
-function Button({ children }) {
-	return <span className={Styles.button}>{children}</span>;
-}
-
-export default Button;
diff --git a/examples/portfolio/src/components/Button/styles.module.scss b/examples/portfolio/src/components/Button/styles.module.scss
deleted file mode 100644
index f0e39df3f..000000000
--- a/examples/portfolio/src/components/Button/styles.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.button {
-	display: inline-block;
-	border: 3px solid currentColor;
-	padding: 0.5em 1em;
-	font-weight: 700;
-	text-transform: uppercase;
-}
diff --git a/examples/portfolio/src/components/Footer.astro b/examples/portfolio/src/components/Footer.astro
new file mode 100644
index 000000000..f238d6b6f
--- /dev/null
+++ b/examples/portfolio/src/components/Footer.astro
@@ -0,0 +1,25 @@
+---
+const currentYear = new Date().getFullYear();
+---
+
+<footer>
+	&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;
+	}
+
+	.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/Footer/index.jsx b/examples/portfolio/src/components/Footer/index.jsx
deleted file mode 100644
index 42953c367..000000000
--- a/examples/portfolio/src/components/Footer/index.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { h } from 'preact';
-import Styles from './styles.module.scss';
-
-function Footer() {
-	return (
-		<footer className={Styles.footer}>
-			&copy; {new Date().getFullYear()} Jeanine White
-			<small className={Styles.byline}>🚀 Built by Astro</small>
-		</footer>
-	);
-}
-export default Footer;
diff --git a/examples/portfolio/src/components/Footer/styles.module.scss b/examples/portfolio/src/components/Footer/styles.module.scss
deleted file mode 100644
index 9e76a6a2f..000000000
--- a/examples/portfolio/src/components/Footer/styles.module.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.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;
-}
diff --git a/examples/portfolio/src/components/MainHead.astro b/examples/portfolio/src/components/MainHead.astro
index 5e4e49b97..d7757af2a 100644
--- a/examples/portfolio/src/components/MainHead.astro
+++ b/examples/portfolio/src/components/MainHead.astro
@@ -1,5 +1,5 @@
 ---
-import '../styles/global.scss';
+import '../styles/global.css';
 const {
 	title = 'Jeanine White: Personal Site',
 	description = 'The personal site of Jeanine White',
diff --git a/examples/portfolio/src/components/Nav.astro b/examples/portfolio/src/components/Nav.astro
new file mode 100644
index 000000000..ea7562571
--- /dev/null
+++ b/examples/portfolio/src/components/Nav.astro
@@ -0,0 +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>
+	<div class="socials">
+		<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>
+	</div>
+</nav>
+
+<style>
+	nav {
+		display: flex;
+		gap: 1rem;
+		align-items: center;
+		padding: 1rem;
+	}
+
+	.link {
+		color: var(--t-subdue);
+		display: block;
+		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);
+	}
+
+	.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%;
+	}
+
+	.socials {
+		display: flex;
+		gap: 0.75em;
+		margin-left: auto;
+	}
+
+	.social {
+		display: block;
+	}
+
+	.socialIcon {
+		display: block;
+		width: 1.25rem;
+		height: 1.25rem;
+		fill: var(--t-subdue);
+		transition: fill linear 150ms;
+	}
+
+	.socialIcon:hover {
+		fill: var(--t-active);
+	}
+</style>
diff --git a/examples/portfolio/src/components/Nav/index.jsx b/examples/portfolio/src/components/Nav/index.jsx
deleted file mode 100644
index b7cd28f36..000000000
--- a/examples/portfolio/src/components/Nav/index.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { h } from 'preact';
-import Styles from './styles.module.scss';
-
-function Nav() {
-	return (
-		<nav className={Styles.nav}>
-			<a className={Styles.logolink} href="/">
-				<div className={Styles.monogram}>JW</div>
-			</a>
-			<a className={Styles.link} href="/projects">
-				Portfolio
-			</a>
-			<a className={Styles.link} href="/about">
-				About
-			</a>
-			<a className={Styles.social} href="https://twitter.com/me">
-				<svg className={Styles.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" />
-				</svg>
-			</a>
-			<a className={Styles.social} href="https://github.com/me">
-				<svg className={Styles.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" />
-				</svg>
-			</a>
-			<a className={Styles.social} href="https://dev.to/me">
-				<svg
-					className={Styles.socialicon}
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 50 40"
-					style="enable-background:new 0 0 50 40"
-					xmlSpace="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 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" />
-				</svg>
-			</a>
-		</nav>
-	);
-}
-export default Nav;
diff --git a/examples/portfolio/src/components/Nav/styles.module.scss b/examples/portfolio/src/components/Nav/styles.module.scss
deleted file mode 100644
index ecbe5585e..000000000
--- a/examples/portfolio/src/components/Nav/styles.module.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-.nav {
-	display: flex;
-	align-items: center;
-	padding-top: 1rem;
-	padding-right: 2rem;
-	padding-bottom: 1rem;
-	padding-left: 2rem;
-}
-
-.logolink {
-	display: block;
-	color: var(--t-fg);
-	text-decoration: none;
-}
-
-.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;
-
-	&:focus,
-	&:hover {
-		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%;
-}
-
-.social {
-	display: block;
-	margin-left: auto;
-
-	+ .social {
-		margin-left: 0.75rem;
-	}
-}
-
-.socialicon {
-	display: block;
-	width: 1.25rem;
-	height: 1.25rem;
-	fill: var(--t-subdue);
-	transition: fill linear 150ms;
-
-	&:hover {
-		fill: var(--t-active);
-	}
-}
diff --git a/examples/portfolio/src/components/PortfolioPreview.astro b/examples/portfolio/src/components/PortfolioPreview.astro
new file mode 100644
index 000000000..3d0a91522
--- /dev/null
+++ b/examples/portfolio/src/components/PortfolioPreview.astro
@@ -0,0 +1,135 @@
+---
+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>
+
+<style>
+	.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;
+	}
+
+	.titleCard {
+		position: relative;
+		background-size: cover;
+		background-position: 50% 100%;
+		padding-top: 37.5%;
+	}
+
+	.descCard {
+		padding: 1.5em;
+	}
+
+	.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:focus,
+	.link:hover {
+		opacity: 1;
+	}
+
+	.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%);
+	}
+
+	.nav {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.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: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/components/PortfolioPreview/index.jsx b/examples/portfolio/src/components/PortfolioPreview/index.jsx
deleted file mode 100644
index 4f1627604..000000000
--- a/examples/portfolio/src/components/PortfolioPreview/index.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { h } from 'preact';
-import Styles from './styles.module.scss';
-
-function PortfolioPreview({ project }) {
-	const { frontmatter } = project;
-	return (
-		<div className={Styles.card}>
-			<div className={Styles.titleCard} style={`background-image:url(${frontmatter.img})`}>
-				<h1 className={Styles.title}>{frontmatter.title}</h1>
-			</div>
-			<div className="pa3">
-				<p className={`${Styles.desc} mt0 mb2`}>{frontmatter.description}</p>
-				<div className={Styles.tags}>
-					Tagged:
-					{frontmatter.tags.map((t) => (
-						<div className={Styles.tag} data-tag={t}>
-							{t}
-						</div>
-					))}
-				</div>
-				<a className={Styles.link} href={project.url}>
-					<span className={Styles.linkInner}>View</span>
-				</a>
-			</div>
-		</div>
-	);
-}
-
-export default PortfolioPreview;
diff --git a/examples/portfolio/src/components/PortfolioPreview/styles.module.scss b/examples/portfolio/src/components/PortfolioPreview/styles.module.scss
deleted file mode 100644
index bded61547..000000000
--- a/examples/portfolio/src/components/PortfolioPreview/styles.module.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-.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;
-}
-
-.titleCard {
-	position: relative;
-	background-size: cover;
-	background-position: 50% 100%;
-	padding-top: 37.5%;
-}
-
-.desc {
-	font-size: var(--f-u1);
-	line-height: 1.4;
-}
-
-.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;
-
-	&:focus,
-	&:hover {
-		opacity: 1;
-
-		.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%);
-}
-
-.nav {
-	display: flex;
-	justify-content: flex-end;
-}
-
-.tags {
-	font-size: var(--f-d2);
-	text-transform: uppercase;
-}
-
-.tag {
-	display: inline-block;
-	color: var(--c-yellow);
-	text-transform: uppercase;
-	margin-left: 0.5em;
-
-	&:nth-of-type(1n) {
-		color: var(--c-green);
-	}
-	&:nth-of-type(2n) {
-		color: var(--c-orange);
-	}
-	&:nth-of-type(3n) {
-		color: var(--c-blue);
-	}
-	&:nth-of-type(4n) {
-		color: var(--c-pink);
-	}
-}
diff --git a/examples/portfolio/src/layouts/project.astro b/examples/portfolio/src/layouts/project.astro
index aba14a5ac..f02f89c74 100644
--- a/examples/portfolio/src/layouts/project.astro
+++ b/examples/portfolio/src/layouts/project.astro
@@ -1,8 +1,7 @@
 ---
 import MainHead from '../components/MainHead.astro';
-import Button from '../components/Button/index.jsx';
-import Footer from '../components/Footer/index.jsx';
-import Nav from '../components/Nav/index.jsx';
+import Footer from '../components/Footer.astro';
+import Nav from '../components/Nav.astro';
 
 const { content } = Astro.props;
 ---
@@ -10,7 +9,7 @@ const { content } = Astro.props;
 <html lang={content.lang || 'en'}>
 	<head>
 		<MainHead title={content.title} description={content.description} />
-		<style lang="scss">
+		<style>
 			.hero {
 				padding: 8rem;
 				display: flex;
@@ -28,19 +27,19 @@ const { content } = Astro.props;
 				margin-left: 0.5em;
 				margin-right: 0.5em;
 				text-transform: uppercase;
+			}
 
-				&:nth-of-type(1n) {
-					color: var(--c-green);
-				}
-				&:nth-of-type(2n) {
-					color: var(--c-orange);
-				}
-				&:nth-of-type(3n) {
-					color: var(--c-blue);
-				}
-				&: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);
 			}
 
 			.title {
@@ -51,8 +50,10 @@ const { content } = Astro.props;
 			}
 
 			.leadIn {
+				padding-top: 4em;
 				color: var(--t-bg);
 				background-color: var(--t-fg);
+				text-align: center;
 			}
 
 			.tagline {
@@ -64,6 +65,18 @@ const { content } = Astro.props;
 			.content {
 				font-size: var(--f-u1);
 				line-height: 2.2;
+				max-width: 50em;
+				margin: auto;
+			}
+
+			.wrapper {
+				padding-bottom: 4em;
+				margin-bottom: 4em;
+			}
+
+			footer {
+				text-align: center;
+				margin-top: 3rem;
 			}
 		</style>
 	</head>
@@ -73,18 +86,16 @@ const { content } = Astro.props;
 			<h1 class="title">{content.title}</h1>
 		</header>
 		<div class="leadIn">
-			<div class="wrapper pt8 pb8 mb8 tac">
+			<div class="wrapper">
 				{content.tags.map((t) => <span class="tag">{t}</span>)}
 				<h3 class="tagline">{content.description}</h3>
 			</div>
 		</div>
-		<div class="wrapper wrapper__readable">
+		<div class="wrapper">
 			<div class="content"><slot /></div>
 		</div>
-		<footer class="tac mt6">
-			<a href="/projects">
-				<Button>View More</Button>
-			</a>
+		<footer>
+			<a href="/projects" class="button">View More</a>
 		</footer>
 		<Footer />
 	</body>
diff --git a/examples/portfolio/src/pages/404.astro b/examples/portfolio/src/pages/404.astro
index a2feb4158..f776936af 100644
--- a/examples/portfolio/src/pages/404.astro
+++ b/examples/portfolio/src/pages/404.astro
@@ -1,19 +1,25 @@
 ---
 import MainHead from '../components/MainHead.astro';
-import Footer from '../components/Footer/index.jsx';
-import Nav from '../components/Nav/index.jsx';
+import Footer from '../components/Footer.astro';
+import Nav from '../components/Nav.astro';
 ---
 
 <html lang="en">
 	<head>
 		<MainHead title="Not Found" />
+		<style>
+			.wrapper {
+				margin-top: 2em;
+				margin-bottom: 2em;
+			}
+		</style>
 	</head>
 	<body>
-		<nav></nav>
-		<div class="wrapper mt4 mb4">
+		<Nav />
+		<div class="wrapper">
 			<h1>Page Not Found</h1>
 			<p>Not found</p>
 		</div>
-		<footer></footer>
+		<Footer />
 	</body>
 </html>
diff --git a/examples/portfolio/src/pages/about.astro b/examples/portfolio/src/pages/about.astro
index a4205bb00..8772b3a1c 100644
--- a/examples/portfolio/src/pages/about.astro
+++ b/examples/portfolio/src/pages/about.astro
@@ -1,26 +1,31 @@
 ---
 import MainHead from '../components/MainHead.astro';
-import Footer from '../components/Footer/index.jsx';
-import Nav from '../components/Nav/index.jsx';
+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" />
-		<style lang="scss">
+		<style>
 			.heroImg {
 				max-height: 24rem;
 				object-fit: cover;
 				overflow: hidden;
+			}
 
-				img {
-					width: 100%;
-				}
+			.heroImg img {
+				width: 100%;
 			}
 
 			.bio {
 				font-size: var(--f-u1);
 				line-height: 2;
+				margin-top: 4em;
+			}
+
+			.wrapper.bio {
+				max-width: 50em;
 			}
 		</style>
 	</head>
@@ -35,7 +40,7 @@ import Nav from '../components/Nav/index.jsx';
 					src="https://images.unsplash.com/photo-1581977012607-4091712d36f9?auto=format&fit=crop&w=1400&h=350&q=75"
 				/>
 			</div>
-			<div class="bio wrapper wrapper__readable mt8">
+			<div class="bio wrapper">
 				<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
diff --git a/examples/portfolio/src/pages/index.astro b/examples/portfolio/src/pages/index.astro
index 174bd1896..2d636de51 100644
--- a/examples/portfolio/src/pages/index.astro
+++ b/examples/portfolio/src/pages/index.astro
@@ -1,10 +1,9 @@
 ---
 // Component Imports
 import MainHead from '../components/MainHead.astro';
-import Button from '../components/Button/index.jsx';
-import Nav from '../components/Nav/index.jsx';
-import Footer from '../components/Footer/index.jsx';
-import PortfolioPreview from '../components/PortfolioPreview/index.jsx';
+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');
@@ -20,14 +19,19 @@ const featuredProject = projects[0];
 			title="Jeanine White: Personal Site"
 			description="Jeanine White: Developer, Speaker, and Writer..."
 		/>
-		<style lang="scss">
-			$w-s: 750px;
+		<style>
+			.wrapper {
+				margin-top: 2em;
+				margin-bottom: 2em;
+			}
 
 			.hero {
 				position: relative;
 				overflow: hidden;
+			}
 
-				@media (min-width: $w-s) {
+			@media (min-width: 750px) {
+				.hero {
 					height: 45vw;
 				}
 			}
@@ -69,19 +73,23 @@ const featuredProject = projects[0];
 				align-items: flex-start;
 				justify-content: center;
 				padding-left: 2rem;
+			}
 
-				@media (min-width: $w-s) {
+			@media (min-width: 750px) {
+				.overlay {
 					padding-left: 4rem;
 				}
 			}
 
 			.title {
 				font-weight: 900;
-				font-size: var(--f-u8);
+				font-size: var(--f-u6);
 				margin-bottom: 0.5rem;
 				margin-top: 0;
+			}
 
-				@media (min-width: $w-s) {
+			@media (min-width: 750px) {
+				.title {
 					font-size: var(--f-u12);
 				}
 			}
@@ -89,8 +97,10 @@ const featuredProject = projects[0];
 			.grid {
 				display: grid;
 				grid-gap: 2rem;
+			}
 
-				@media (min-width: 1200px) {
+			@media (min-width: 1200px) {
+				.grid {
 					grid-template-columns: 2fr 1fr;
 				}
 			}
@@ -102,46 +112,44 @@ const featuredProject = projects[0];
 				margin-bottom: 2rem;
 			}
 
+			.roles {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 0.5em;
+				font-size: var(--f-d1);
+			}
+
 			.role {
 				position: relative;
 				display: inline-block;
+				white-space: nowrap;
 				font-weight: 900;
 				color: var(--t-bg);
 				background-color: var(--t-fg);
 				padding: 0.25em 0.5em;
 				z-index: 2;
+			}
 
-				@media (min-width: $w-s) {
+			@media (min-width: 750px) {
+				.role {
 					font-size: var(--f-u3);
 				}
+			}
 
-				+ .role {
-					margin-left: 1em;
-				}
-
-				&:nth-of-type(1) {
-					.invert {
-						background-color: var(--c-pink);
-					}
-				}
+			.role:nth-of-type(1) .invert {
+				background-color: var(--c-pink);
+			}
 
-				&:nth-of-type(2) {
-					.invert {
-						background-color: var(--c-blue);
-					}
-				}
+			.role:nth-of-type(2) .invert {
+				background-color: var(--c-blue);
+			}
 
-				&:nth-of-type(3) {
-					.invert {
-						background-color: var(--c-green);
-					}
-				}
+			.role:nth-of-type(3) .invert {
+				background-color: var(--c-green);
+			}
 
-				&:hover {
-					.invert {
-						clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
-					}
-				}
+			.role:hover .invert {
+				clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
 			}
 
 			.invert {
@@ -160,7 +168,7 @@ const featuredProject = projects[0];
 			}
 
 			.desc {
-				font-size: var(--f-u2);
+				font-size: var(--f-u1);
 				margin-top: 1.5rem;
 				margin-bottom: 0;
 			}
@@ -175,14 +183,19 @@ const featuredProject = projects[0];
 			.bio {
 				line-height: 2;
 				margin-bottom: 2rem;
+			}
 
-				> span:first-of-type {
-					line-height: 1;
-					margin-bottom: 0.5em;
-					display: block;
-					font-weight: 700;
-					font-size: var(--f-u4);
-				}
+			.bio > span:first-of-type {
+				line-height: 1;
+				margin-bottom: 0.5em;
+				display: block;
+				font-weight: 700;
+				font-size: var(--f-u4);
+			}
+
+			.buttonContainer {
+				text-align: center;
+				margin-top: 2em;
 			}
 		</style>
 	</head>
@@ -203,23 +216,21 @@ const featuredProject = projects[0];
 				<h1 class="title">
 					<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;
+				<div class="roles">
+					<span class="role">👩‍💻 Developer <span class="invert">👩‍💻 Developer</span></span>
+					<span class="role">🎤 Speaker <span class="invert">🎤 Speaker</span></span>
 					<span class="role">✏️ Writer <span class="invert">✏️ Writer</span></span>
 				</div>
 				<p class="desc">Lover of dogs, roadtrips, and poetry.</p>
 			</div>
 		</header>
-		<main class="wrapper mt4 mb4">
+		<main class="wrapper">
 			<div class="grid">
 				<div class="section">
 					<h3 class="sectionTitle">Selected Work</h3>
 					<PortfolioPreview project={featuredProject} />
-					<div class="tac mt4">
-						<a href="/projects">
-							<Button>View All</Button>
-						</a>
+					<div class="buttonContainer">
+						<a href="/products/" class="button">View All</a>
 					</div>
 				</div>
 				<div class="section">
diff --git a/examples/portfolio/src/pages/projects.astro b/examples/portfolio/src/pages/projects.astro
index a52f7e203..415e7aeeb 100644
--- a/examples/portfolio/src/pages/projects.astro
+++ b/examples/portfolio/src/pages/projects.astro
@@ -1,8 +1,8 @@
 ---
 import MainHead from '../components/MainHead.astro';
-import Footer from '../components/Footer/index.jsx';
-import Nav from '../components/Nav/index.jsx';
-import PortfolioPreview from '../components/PortfolioPreview/index.jsx';
+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'))
 	.filter(({ frontmatter }) => !!frontmatter.publishDate)
@@ -18,17 +18,21 @@ const projects = (await Astro.glob('./project/**/*.md'))
 			title="All Projects | Jeanine White"
 			description="Learn about Jeanine White's most recent projects"
 		/>
-		<style lang="scss">
+		<style>
 			.grid {
 				display: grid;
 				grid-gap: 3rem;
 			}
+			.title {
+				margin-top: 2rem;
+				margin-bottom: 2rem;
+			}
 		</style>
 	</head>
 	<body>
 		<Nav />
 		<div class="wrapper">
-			<h1 class="title mt4 mb4">All Projects</h1>
+			<h1 class="title">All Projects</h1>
 			<div class="grid">
 				{projects.map((project) => <PortfolioPreview project={project} />)}
 			</div>
diff --git a/examples/portfolio/src/styles/global.scss b/examples/portfolio/src/styles/global.css
index 453adadbe..f1eceb91b 100644
--- a/examples/portfolio/src/styles/global.scss
+++ b/examples/portfolio/src/styles/global.css
@@ -1,6 +1,6 @@
-// Tokens
+/* Global variables */
 :root {
-	// (c)olor
+	/* Colors */
 	--c-black: #05091e;
 	--c-blue: #46b4ff;
 	--c-gray: #90aab7;
@@ -10,7 +10,7 @@
 	--c-yellow: #ffdace;
 	--c-white: #fff;
 
-	// (f)ont
+	/* Fonts */
 	--f-u18: 11.390625em;
 	--f-u17: 9.950627481136905em;
 	--f-u16: 8.692673779389363em;
@@ -48,15 +48,12 @@
 	--f-d17: 0.10049617492923625em;
 	--f-d18: 0.0877914951989026em;
 
-	// (t)heme
 	--t-fg: var(--c-black);
 	--t-bg: var(--c-white);
 	--t-subdue: var(--c-gray);
 	--t-active: var(--c-blue);
 }
 
-// Base
-
 body {
 	margin: 0;
 	color: var(--t-fg);
@@ -80,77 +77,14 @@ h1 {
 	font-size: var(--f-u8);
 }
 
-// Utils
-
-// color
-$colors: 'black', 'blue', 'white';
-@each $color in $colors {
-	// text color
-	.tc-#{$color} {
-		color: var(--c-#{color});
-	}
-	// background color
-	.bg-#{$color} {
-		background-color: var(--c-#{color});
-	}
-}
-
-// font size
-@for $i from 0 through 18 {
-	.f-u#{$i} {
-		font-size: var(--f-u#{$i});
-	}
-	.f-d#{$i} {
-		font-size: var(--f-d#{$i});
-	}
-}
-
-// margin & padding
-@for $i from 0 through 36 {
-	.ma#{$i} {
-		margin: #{0.5 * $i}rem;
-	}
-	.mt#{$i} {
-		margin-top: #{0.5 * $i}rem;
-	}
-	.mr#{$i} {
-		margin-right: #{0.5 * $i}rem;
-	}
-	.mb#{$i} {
-		margin-bottom: #{0.5 * $i}rem;
-	}
-	.ml#{$i} {
-		margin-left: #{0.5 * $i}rem;
-	}
-	.pa#{$i} {
-		padding: #{0.5 * $i}rem;
-	}
-	.pt#{$i} {
-		padding-top: #{0.5 * $i}rem;
-	}
-	.pr#{$i} {
-		padding-right: #{0.5 * $i}rem;
-	}
-	.pb#{$i} {
-		padding-bottom: #{0.5 * $i}rem;
-	}
-	.pl#{$i} {
-		padding-left: #{0.5 * $i}rem;
-	}
+.button {
+	display: inline-block;
+	border: 3px solid currentColor;
+	padding: 0.5em 1em;
+	font-weight: 700;
+	text-transform: uppercase;
 }
 
-// text align
-.tac {
-	text-align: center;
-}
-.tal {
-	text-align: left;
-}
-.tar {
-	text-align: right;
-}
-
-// wrapper
 .wrapper {
 	max-width: 80em;
 	margin-left: auto;
@@ -158,6 +92,4 @@ $colors: 'black', 'blue', 'white';
 	padding-left: 2rem;
 	padding-right: 2rem;
 }
-.wrapper__readable {
-	max-width: 50em;
-}
+
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 35cea9fc7..df76eaa37 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -108,21 +108,15 @@ importers:
       '@astrojs/preact': link:../../packages/integrations/preact
       '@astrojs/react': link:../../packages/integrations/react
       '@docsearch/css': 3.2.1
-      '@docsearch/react': 3.2.1_kdydlnxq43jbqimy6lw2whzu34
+      '@docsearch/react': 3.2.1_h2q7ltx4sqgye5xvrbnj7n2sfm
       '@types/node': 18.7.15
-      '@types/react': 17.0.49
+      '@types/react': 17.0.48
       '@types/react-dom': 18.0.6
       astro: link:../../packages/astro
       preact: 10.10.6
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
 
-  examples/env-vars:
-    specifiers:
-      astro: ^1.1.5
-    dependencies:
-      astro: link:../../packages/astro
-
   examples/framework-alpine:
     specifiers:
       '@astrojs/alpinejs': ^0.1.1
@@ -195,7 +189,7 @@ importers:
       react-dom: ^18.1.0
     dependencies:
       '@astrojs/react': link:../../packages/integrations/react
-      '@types/react': 18.0.18
+      '@types/react': 18.0.17
       '@types/react-dom': 18.0.6
       astro: link:../../packages/astro
       react: 18.2.0
@@ -245,15 +239,9 @@ importers:
 
   examples/portfolio:
     specifiers:
-      '@astrojs/preact': ^1.0.2
       astro: ^1.1.5
-      preact: ^10.7.3
-      sass: ^1.52.2
     dependencies:
-      '@astrojs/preact': link:../../packages/integrations/preact
       astro: link:../../packages/astro
-      preact: 10.10.6
-      sass: 1.54.8
 
   examples/ssr:
     specifiers:
@@ -275,18 +263,6 @@ importers:
       unocss: 0.15.6
       vite-imagetools: 4.0.9
 
-  examples/subpath:
-    specifiers:
-      '@astrojs/react': ^1.1.0
-      astro: ^1.1.5
-      react: ^18.1.0
-      react-dom: ^18.1.0
-    dependencies:
-      '@astrojs/react': link:../../packages/integrations/react
-      astro: link:../../packages/astro
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-
   examples/with-markdown-plugins:
     specifiers:
       '@astrojs/markdown-remark': ^1.1.0
@@ -507,7 +483,7 @@ importers:
       tsconfig-resolver: 3.0.1
       unist-util-visit: 4.1.1
       vfile: 5.3.4
-      vite: 3.0.9_sass@1.54.8
+      vite: 3.0.9_sass@1.54.6
       yargs-parser: 21.1.1
       zod: 3.19.0
     devDependencies:
@@ -537,7 +513,7 @@ importers:
       chai: 4.3.6
       cheerio: 1.0.0-rc.12
       mocha: 9.2.2
-      sass: 1.54.8
+      sass: 1.54.6
       srcset-parse: 1.1.0
 
   packages/astro-prism:
@@ -629,7 +605,7 @@ importers:
       sass: ^1.52.2
     dependencies:
       astro: link:../../..
-      sass: 1.54.8
+      sass: 1.54.6
 
   packages/astro/e2e/fixtures/errors:
     specifiers:
@@ -2310,7 +2286,7 @@ importers:
       astro: link:../../astro
       astro-scripts: link:../../../scripts
       cheerio: 1.0.0-rc.12
-      sass: 1.54.8
+      sass: 1.54.6
 
   packages/integrations/mdx:
     specifiers:
@@ -2556,7 +2532,7 @@ importers:
       '@babel/core': 7.19.0
       '@babel/plugin-transform-react-jsx': 7.19.0_@babel+core@7.19.0
     devDependencies:
-      '@types/react': 17.0.49
+      '@types/react': 17.0.48
       '@types/react-dom': 17.0.17
       astro: link:../../astro
       astro-scripts: link:../../../scripts
@@ -2911,10 +2887,10 @@ importers:
     dependencies:
       node-fetch: 3.2.10
     devDependencies:
-      '@rollup/plugin-alias': 3.1.9_rollup@2.79.0
-      '@rollup/plugin-inject': 4.0.4_rollup@2.79.0
-      '@rollup/plugin-node-resolve': 13.3.0_rollup@2.79.0
-      '@rollup/plugin-typescript': 8.5.0_ppxule2mhlgb6ds3e4gxjflaqy
+      '@rollup/plugin-alias': 3.1.9_rollup@2.78.1
+      '@rollup/plugin-inject': 4.0.4_rollup@2.78.1
+      '@rollup/plugin-node-resolve': 13.3.0_rollup@2.78.1
+      '@rollup/plugin-typescript': 8.5.0_5zsqiitiqqdgwm4iemtywlnhku
       '@types/chai': 4.3.3
       '@types/mocha': 9.1.1
       '@types/node': 14.18.27
@@ -2926,8 +2902,8 @@ importers:
       formdata-polyfill: 4.0.10
       magic-string: 0.25.9
       mocha: 9.2.2
-      rollup: 2.79.0
-      rollup-plugin-terser: 7.0.2_rollup@2.79.0
+      rollup: 2.78.1
+      rollup-plugin-terser: 7.0.2_rollup@2.78.1
       tslib: 2.4.0
       typescript: 4.7.4
       urlpattern-polyfill: 1.0.0-rc5
@@ -3212,14 +3188,14 @@ packages:
     dependencies:
       '@vscode/emmet-helper': 2.8.4
       prettier: 2.7.1
-      prettier-plugin-astro: 0.5.4
+      prettier-plugin-astro: 0.5.3
       source-map: 0.7.4
       typescript: 4.6.4
       vscode-css-languageservice: 6.1.0
       vscode-html-languageservice: 5.0.1
       vscode-languageserver: 8.0.2
       vscode-languageserver-protocol: 3.17.2
-      vscode-languageserver-textdocument: 1.0.7
+      vscode-languageserver-textdocument: 1.0.5
       vscode-languageserver-types: 3.17.2
       vscode-uri: 3.0.3
     dev: false
@@ -5006,7 +4982,7 @@ packages:
     resolution: {integrity: sha512-gaP6TxxwQC+K8D6TRx5WULUWKrcbzECOPA2KCVMuI+6C7dNiGUk5yXXzVhc5sld79XKYLnO9DRTI4mjXDYkh+g==}
     dev: false
 
-  /@docsearch/react/3.2.1_kdydlnxq43jbqimy6lw2whzu34:
+  /@docsearch/react/3.2.1_h2q7ltx4sqgye5xvrbnj7n2sfm:
     resolution: {integrity: sha512-EzTQ/y82s14IQC5XVestiK/kFFMe2aagoYFuTAIfIb/e+4FU7kSMKonRtLwsCiLQHmjvNQq+HO+33giJ5YVtaQ==}
     peerDependencies:
       '@types/react': '>= 16.8.0 < 19.0.0'
@@ -5023,7 +4999,7 @@ packages:
       '@algolia/autocomplete-core': 1.7.1
       '@algolia/autocomplete-preset-algolia': 1.7.1_qs6lk5nhygj2o3hj4sf6xnr724
       '@docsearch/css': 3.2.1
-      '@types/react': 17.0.49
+      '@types/react': 17.0.48
       algoliasearch: 4.14.2
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
@@ -5590,7 +5566,7 @@ packages:
     resolution: {integrity: sha512-/USkK4cioY209wXRpund6HZzHo9GmjakpV9ycOkpMcMxMk7QVcVFVyCMtzvXYiHsB2crgDgrtNYSELYFBXhhaA==}
     engines: {node: '>= 14'}
     dependencies:
-      '@octokit/types': 7.2.0
+      '@octokit/types': 7.1.1
     dev: true
 
   /@octokit/core/3.6.0:
@@ -5679,8 +5655,8 @@ packages:
       '@octokit/openapi-types': 12.11.0
     dev: true
 
-  /@octokit/types/7.2.0:
-    resolution: {integrity: sha512-pYQ/a1U6mHptwhGyp6SvsiM4bWP2s3V95olUeTxas85D/2kN78yN5C8cGN+P4LwJSWUqIEyvq0Qn2WUn6NQRjw==}
+  /@octokit/types/7.1.1:
+    resolution: {integrity: sha512-Dx6cNTORyVaKY0Yeb9MbHksk79L8GXsihbG6PtWqTpkyA2TY1qBWE26EQXVG3dHwY9Femdd/WEeRUEiD0+H3TQ==}
     dependencies:
       '@octokit/openapi-types': 13.8.0
     dev: true
@@ -8541,7 +8517,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@rollup/plugin-alias/3.1.9_rollup@2.79.0:
+  /@rollup/plugin-alias/3.1.9_rollup@2.78.1:
     resolution: {integrity: sha512-QI5fsEvm9bDzt32k39wpOwZhVzRcL5ydcffUHMyLVaVaLeC70I8TJZ17F1z1eMoLu4E/UOcH9BWVkKpIKdrfiw==}
     engines: {node: '>=8.0.0'}
     peerDependencies:
@@ -8550,11 +8526,11 @@ packages:
       rollup:
         optional: true
     dependencies:
-      rollup: 2.79.0
+      rollup: 2.78.1
       slash: 3.0.0
     dev: true
 
-  /@rollup/plugin-babel/5.3.1_b6woseefyuugm6lsnk4tw7iz2e:
+  /@rollup/plugin-babel/5.3.1_o3fvycpalvsydbhpdgqv4wrrry:
     resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
     engines: {node: '>= 10.0.0'}
     peerDependencies:
@@ -8571,11 +8547,11 @@ packages:
     dependencies:
       '@babel/core': 7.19.0
       '@babel/helper-module-imports': 7.18.6
-      '@rollup/pluginutils': 3.1.0_rollup@2.79.0
-      rollup: 2.79.0
+      '@rollup/pluginutils': 3.1.0_rollup@2.78.1
+      rollup: 2.78.1
     dev: false
 
-  /@rollup/plugin-inject/4.0.4_rollup@2.79.0:
+  /@rollup/plugin-inject/4.0.4_rollup@2.78.1:
     resolution: {integrity: sha512-4pbcU4J/nS+zuHk+c+OL3WtmEQhqxlZ9uqfjQMQDOHOPld7PsCd8k5LWs8h5wjwJN7MgnAn768F2sDxEP4eNFQ==}
     peerDependencies:
       rollup: ^1.20.0 || ^2.0.0
@@ -8583,13 +8559,13 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.79.0
+      '@rollup/pluginutils': 3.1.0_rollup@2.78.1
       estree-walker: 2.0.2
       magic-string: 0.25.9
-      rollup: 2.79.0
+      rollup: 2.78.1
     dev: true
 
-  /@rollup/plugin-node-resolve/11.2.1_rollup@2.79.0:
+  /@rollup/plugin-node-resolve/11.2.1_rollup@2.78.1:
     resolution: {integrity: sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==}
     engines: {node: '>= 10.0.0'}
     peerDependencies:
@@ -8598,16 +8574,16 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.79.0
+      '@rollup/pluginutils': 3.1.0_rollup@2.78.1
       '@types/resolve': 1.17.1
       builtin-modules: 3.3.0
       deepmerge: 4.2.2
       is-module: 1.0.0
       resolve: 1.22.1
-      rollup: 2.79.0
+      rollup: 2.78.1
     dev: false
 
-  /@rollup/plugin-node-resolve/13.3.0_rollup@2.79.0:
+  /@rollup/plugin-node-resolve/13.3.0_rollup@2.78.1:
     resolution: {integrity: sha512-Lus8rbUo1eEcnS4yTFKLZrVumLPY+YayBdWXgFSHYhTT2iJbMhoaaBL3xl5NCdeRytErGr8tZ0L71BMRmnlwSw==}
     engines: {node: '>= 10.0.0'}
     peerDependencies:
@@ -8616,16 +8592,16 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.79.0
+      '@rollup/pluginutils': 3.1.0_rollup@2.78.1
       '@types/resolve': 1.17.1
       deepmerge: 4.2.2
       is-builtin-module: 3.2.0
       is-module: 1.0.0
       resolve: 1.22.1
-      rollup: 2.79.0
+      rollup: 2.78.1
     dev: true
 
-  /@rollup/plugin-replace/2.4.2_rollup@2.79.0:
+  /@rollup/plugin-replace/2.4.2_rollup@2.78.1:
     resolution: {integrity: sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==}
     peerDependencies:
       rollup: ^1.20.0 || ^2.0.0
@@ -8633,12 +8609,12 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.79.0
+      '@rollup/pluginutils': 3.1.0_rollup@2.78.1
       magic-string: 0.25.9
-      rollup: 2.79.0
+      rollup: 2.78.1
     dev: false
 
-  /@rollup/plugin-typescript/8.5.0_ppxule2mhlgb6ds3e4gxjflaqy:
+  /@rollup/plugin-typescript/8.5.0_5zsqiitiqqdgwm4iemtywlnhku:
     resolution: {integrity: sha512-wMv1/scv0m/rXx21wD2IsBbJFba8wGF3ErJIr6IKRfRj49S85Lszbxb4DCo8iILpluTjk2GAAu9CoZt4G3ppgQ==}
     engines: {node: '>=8.0.0'}
     peerDependencies:
@@ -8651,14 +8627,14 @@ packages:
       tslib:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 3.1.0_rollup@2.79.0
+      '@rollup/pluginutils': 3.1.0_rollup@2.78.1
       resolve: 1.22.1
-      rollup: 2.79.0
+      rollup: 2.78.1
       tslib: 2.4.0
       typescript: 4.7.4
     dev: true
 
-  /@rollup/pluginutils/3.1.0_rollup@2.79.0:
+  /@rollup/pluginutils/3.1.0_rollup@2.78.1:
     resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
     engines: {node: '>= 8.0.0'}
     peerDependencies:
@@ -8670,7 +8646,7 @@ packages:
       '@types/estree': 0.0.39
       estree-walker: 1.0.1
       picomatch: 2.3.1
-      rollup: 2.79.0
+      rollup: 2.78.1
 
   /@rollup/pluginutils/4.2.1:
     resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
@@ -8878,10 +8854,10 @@ packages:
     resolution: {integrity: sha512-J/rMZa7RqiH/rT29TEVZO4nBoDP9XJOjnbbIofg7GQKs4JIduEO3WLpte+6WeUz/TcrXKlY+bM7FYrp8yFB+3g==}
     dev: true
 
-  /@types/glob/8.0.0:
-    resolution: {integrity: sha512-l6NQsDDyQUVeoTynNpC9uRvCUint/gSUXQA2euwmTuWGvPY5LSDUu6tkCtJB2SvGQlJQzLaKqcGZP4//7EDveA==}
+  /@types/glob/7.2.0:
+    resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
     dependencies:
-      '@types/minimatch': 5.1.2
+      '@types/minimatch': 5.1.1
       '@types/node': 18.7.15
     dev: true
 
@@ -8929,8 +8905,8 @@ packages:
     resolution: {integrity: sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==}
     dev: true
 
-  /@types/minimatch/5.1.2:
-    resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==}
+  /@types/minimatch/5.1.1:
+    resolution: {integrity: sha512-v55NF6Dz0wrj14Rn8iEABTWrhYRmgkJYuokduunSiq++t3hZ9VZ6dvcDt+850Pm5sGJZk8RaHzkFCXPxVINZ+g==}
     dev: true
 
   /@types/minimist/1.2.2:
@@ -9003,24 +8979,24 @@ packages:
   /@types/react-dom/17.0.17:
     resolution: {integrity: sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==}
     dependencies:
-      '@types/react': 17.0.49
+      '@types/react': 17.0.48
     dev: true
 
   /@types/react-dom/18.0.6:
     resolution: {integrity: sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==}
     dependencies:
-      '@types/react': 17.0.49
+      '@types/react': 18.0.17
     dev: false
 
-  /@types/react/17.0.49:
-    resolution: {integrity: sha512-CCBPMZaPhcKkYUTqFs/hOWqKjPxhTEmnZWjlHHgIMop67DsXywf9B5Os9Hz8KSacjNOgIdnZVJamwl232uxoPg==}
+  /@types/react/17.0.48:
+    resolution: {integrity: sha512-zJ6IYlJ8cYYxiJfUaZOQee4lh99mFihBoqkOSEGV+dFi9leROW6+PgstzQ+w3gWTnUfskALtQPGHK6dYmPj+2A==}
     dependencies:
       '@types/prop-types': 15.7.5
       '@types/scheduler': 0.16.2
       csstype: 3.1.0
 
-  /@types/react/18.0.18:
-    resolution: {integrity: sha512-6hI08umYs6NaiHFEEGioXnxJ+oEhY3eRz8VCUaudZmGdtvPviCJB8mgaMxaDWAdPSYd4eFavrPk2QIolwbLYrg==}
+  /@types/react/18.0.17:
+    resolution: {integrity: sha512-38ETy4tL+rn4uQQi7mB81G7V1g0u2ryquNmsVIOKUAEIDK+3CUjZ6rSRpdvS99dNBnkLFL83qfmtLacGOTIhwQ==}
     dependencies:
       '@types/prop-types': 15.7.5
       '@types/scheduler': 0.16.2
@@ -9030,7 +9006,7 @@ packages:
   /@types/resolve/1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
     dependencies:
-      '@types/node': 14.18.27
+      '@types/node': 18.7.15
 
   /@types/resolve/1.20.2:
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
@@ -9038,7 +9014,7 @@ packages:
   /@types/rimraf/3.0.2:
     resolution: {integrity: sha512-F3OznnSLAUxFrCEu/L5PY8+ny8DtcFRjx7fZZ9bycvXRi3KPTRS9HOitGZwvPg0juRhXFWIeKX58cnX5YqLohQ==}
     dependencies:
-      '@types/glob': 8.0.0
+      '@types/glob': 7.2.0
       '@types/node': 18.7.15
     dev: true
 
@@ -9395,7 +9371,7 @@ packages:
     dependencies:
       emmet: 2.3.6
       jsonc-parser: 2.3.1
-      vscode-languageserver-textdocument: 1.0.7
+      vscode-languageserver-textdocument: 1.0.5
       vscode-languageserver-types: 3.17.2
       vscode-nls: 5.2.0
       vscode-uri: 2.1.2
@@ -10722,7 +10698,7 @@ packages:
     dependencies:
       domelementtype: 2.3.0
       domhandler: 5.0.3
-      entities: 4.4.0
+      entities: 4.3.1
     dev: true
 
   /domelementtype/2.3.0:
@@ -10815,6 +10791,11 @@ packages:
       ansi-colors: 4.1.3
     dev: true
 
+  /entities/4.3.1:
+    resolution: {integrity: sha512-o4q/dYJlmyjP2zfnaWDUC6A3BQFmVTX+tZPezK7k0GLSU9QYCauscf5Y+qcEPzKL+EixVouYDgLQK5H9GrLpkg==}
+    engines: {node: '>=0.12'}
+    dev: true
+
   /entities/4.4.0:
     resolution: {integrity: sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==}
     engines: {node: '>=0.12'}
@@ -12468,7 +12449,7 @@ packages:
       domelementtype: 2.3.0
       domhandler: 5.0.3
       domutils: 3.0.1
-      entities: 4.4.0
+      entities: 4.3.1
     dev: true
 
   /http-cache-semantics/4.1.0:
@@ -15111,8 +15092,8 @@ packages:
       synckit: 0.7.3
     dev: true
 
-  /prettier-plugin-astro/0.5.4:
-    resolution: {integrity: sha512-ILs/WgUYtKBOn3Zh217/PwjCFtUWEKQjcCFJDevri0hGEBwEnnda9aqSLL0/nhCOmQn/UE7M9zLQvThu970ZHw==}
+  /prettier-plugin-astro/0.5.3:
+    resolution: {integrity: sha512-g4uJ/7k1rJeIWBifeBgTqzgV5gmMTG+lOmOvUZvtIh1R91aqa+yYMzbysIlsJKRaRyWefejrOpvpIuEePBDAyw==}
     engines: {node: ^14.15.0 || >=16.0.0, npm: '>=6.14.0'}
     dependencies:
       '@astrojs/compiler': 0.23.4
@@ -15718,7 +15699,7 @@ packages:
       rollup-plugin-inject: 3.0.2
     dev: true
 
-  /rollup-plugin-terser/7.0.2_rollup@2.79.0:
+  /rollup-plugin-terser/7.0.2_rollup@2.78.1:
     resolution: {integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==}
     peerDependencies:
       rollup: ^2.0.0
@@ -15728,7 +15709,7 @@ packages:
     dependencies:
       '@babel/code-frame': 7.18.6
       jest-worker: 26.6.2
-      rollup: 2.79.0
+      rollup: 2.78.1
       serialize-javascript: 4.0.0
       terser: 5.15.0
 
@@ -15751,14 +15732,6 @@ packages:
     hasBin: true
     optionalDependencies:
       fsevents: 2.3.2
-    dev: false
-
-  /rollup/2.79.0:
-    resolution: {integrity: sha512-x4KsrCgwQ7ZJPcFA/SUu6QVcYlO7uRLfLAy0DSA4NS2eG8japdbpM50ToH7z4iObodRYOJ0soneF0iaQRJ6zhA==}
-    engines: {node: '>=10.0.0'}
-    hasBin: true
-    optionalDependencies:
-      fsevents: 2.3.2
 
   /run-parallel/1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
@@ -15804,8 +15777,8 @@ packages:
     dependencies:
       suf-log: 2.5.3
 
-  /sass/1.54.8:
-    resolution: {integrity: sha512-ib4JhLRRgbg6QVy6bsv5uJxnJMTS2soVcCp9Y88Extyy13A8vV0G1fAwujOzmNkFQbR3LvedudAMbtuNRPbQww==}
+  /sass/1.54.6:
+    resolution: {integrity: sha512-DUqJjR2WxXBcZjRSZX5gCVyU+9fuC2qDfFzoKX9rV4rCOcec5mPtEafTcfsyL3YJuLONjWylBne+uXVh5rrmFw==}
     engines: {node: '>=12.0.0'}
     hasBin: true
     dependencies:
@@ -17233,7 +17206,7 @@ packages:
       debug: 4.3.4
       fast-glob: 3.2.11
       pretty-bytes: 5.6.0
-      rollup: 2.79.0
+      rollup: 2.78.1
       workbox-build: 6.5.4
       workbox-window: 6.5.4
     transitivePeerDependencies:
@@ -17241,7 +17214,7 @@ packages:
       - supports-color
     dev: false
 
-  /vite/3.0.9_sass@1.54.8:
+  /vite/3.0.9_sass@1.54.6:
     resolution: {integrity: sha512-waYABTM+G6DBTCpYAxvevpG50UOlZuynR0ckTK5PawNVt7ebX6X7wNXHaGIO6wYYFXSM7/WcuFuO2QzhBB6aMw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -17264,7 +17237,7 @@ packages:
       postcss: 8.4.16
       resolve: 1.22.1
       rollup: 2.77.3
-      sass: 1.54.8
+      sass: 1.54.6
     optionalDependencies:
       fsevents: 2.3.2
     dev: false
@@ -17359,7 +17332,7 @@ packages:
   /vscode-html-languageservice/5.0.1:
     resolution: {integrity: sha512-OYsyn5HGAhxs0OIG+M0jc34WnftLtD67Wg7+TfrYwvf0waOkkr13zUqtdrVm2JPNQ6fJx+qnuM+vTbq7o1dCdQ==}
     dependencies:
-      vscode-languageserver-textdocument: 1.0.7
+      vscode-languageserver-textdocument: 1.0.5
       vscode-languageserver-types: 3.17.2
       vscode-nls: 5.2.0
       vscode-uri: 3.0.3
@@ -17377,6 +17350,10 @@ packages:
       vscode-languageserver-types: 3.17.2
     dev: false
 
+  /vscode-languageserver-textdocument/1.0.5:
+    resolution: {integrity: sha512-1ah7zyQjKBudnMiHbZmxz5bYNM9KKZYz+5VQLj+yr8l+9w3g+WAhCkUkWbhMEdC5u0ub4Ndiye/fDyS8ghIKQg==}
+    dev: false
+
   /vscode-languageserver-textdocument/1.0.7:
     resolution: {integrity: sha512-bFJH7UQxlXT8kKeyiyu41r22jCZXG8kuuVVA33OEJn1diWOZK5n8zBSPZFHVBOu8kXZ6h0LIRhf5UnCo61J4Hg==}
     dev: false
@@ -17536,9 +17513,9 @@ packages:
       '@babel/core': 7.19.0
       '@babel/preset-env': 7.19.0_@babel+core@7.19.0
       '@babel/runtime': 7.19.0
-      '@rollup/plugin-babel': 5.3.1_b6woseefyuugm6lsnk4tw7iz2e
-      '@rollup/plugin-node-resolve': 11.2.1_rollup@2.79.0
-      '@rollup/plugin-replace': 2.4.2_rollup@2.79.0
+      '@rollup/plugin-babel': 5.3.1_o3fvycpalvsydbhpdgqv4wrrry
+      '@rollup/plugin-node-resolve': 11.2.1_rollup@2.78.1
+      '@rollup/plugin-replace': 2.4.2_rollup@2.78.1
       '@surma/rollup-plugin-off-main-thread': 2.2.3
       ajv: 8.11.0
       common-tags: 1.8.2
@@ -17547,8 +17524,8 @@ packages:
       glob: 7.2.3
       lodash: 4.17.21
       pretty-bytes: 5.6.0
-      rollup: 2.79.0
-      rollup-plugin-terser: 7.0.2_rollup@2.79.0
+      rollup: 2.78.1
+      rollup-plugin-terser: 7.0.2_rollup@2.78.1
       source-map: 0.8.0-beta.0
       stringify-object: 3.3.0
       strip-comments: 2.0.1