diff --git a/examples/portfolio/README.md b/examples/portfolio/README.md
new file mode 100644
index 0000000000..9cbff3acf9
--- /dev/null
+++ b/examples/portfolio/README.md
@@ -0,0 +1,6 @@
+## π¨ Portfolio Example
+
+```
+npm i
+npm start
+```
diff --git a/examples/portfolio/astro.config.mjs b/examples/portfolio/astro.config.mjs
new file mode 100644
index 0000000000..f50751cfdc
--- /dev/null
+++ b/examples/portfolio/astro.config.mjs
@@ -0,0 +1,5 @@
+export default {
+ extensions: {
+ '.jsx': 'preact',
+ },
+};
diff --git a/examples/portfolio/package.json b/examples/portfolio/package.json
new file mode 100644
index 0000000000..87b585b3f0
--- /dev/null
+++ b/examples/portfolio/package.json
@@ -0,0 +1,8 @@
+{
+ "name": "@astrojs/example-portfolio",
+ "version": "0.0.1",
+ "scripts": {
+ "build": "../../astro.mjs build",
+ "start": "../../astro.mjs dev"
+ }
+}
diff --git a/examples/portfolio/public/app.scss b/examples/portfolio/public/app.scss
new file mode 100644
index 0000000000..3cac56a422
--- /dev/null
+++ b/examples/portfolio/public/app.scss
@@ -0,0 +1,129 @@
+// Tokens
+:root {
+ // (c)olor
+ --c-black: #05091e;
+ --c-blue: #46b4ff;
+ --c-gray: #90aab7;
+ --c-green: #9ef2cb;
+ --c-pink: #ffb8d9;
+ --c-orange: #ffb7a3;
+ --c-yellow: #ffdace;
+ --c-white: #fff;
+
+ // (f)ont
+ --f-u18: 11.390625em;
+ --f-u17: 9.950627481136905em;
+ --f-u16: 8.692673779389363em;
+ --f-u15: 7.59375em;
+ --f-u14: 6.63375165409127em;
+ --f-u13: 5.795115852926242em;
+ --f-u12: 5.0625em;
+ --f-u11: 4.422501102727513em;
+ --f-u10: 3.8634105686174953em;
+ --f-u9: 3.375em;
+ --f-u8: 2.9483340684850083em;
+ --f-u7: 2.575607045744997em;
+ --f-u6: 2.25em;
+ --f-u5: 1.9655560456566725em;
+ --f-u4: 1.7170713638299977em;
+ --f-u3: 1.5em;
+ --f-u2: 1.3103706971044482em;
+ --f-u1: 1.1447142425533319em;
+ --f-d1: 0.8735804647362989em;
+ --f-d2: 0.7631428283688879em;
+ --f-d3: 0.6666666666666666em;
+ --f-d4: 0.5823869764908659em;
+ --f-d5: 0.5087618855792586em;
+ --f-d6: 0.4444444444444444em;
+ --f-d7: 0.3882579843272439em;
+ --f-d8: 0.3391745903861724em;
+ --f-d9: 0.2962962962962963em;
+ --f-d10: 0.2588386562181626em;
+ --f-d11: 0.22611639359078162em;
+ --f-d12: 0.19753086419753085em;
+ --f-d13: 0.17255910414544176em;
+ --f-d14: 0.15074426239385438em;
+ --f-d15: 0.13168724279835392em;
+ --f-d16: 0.11503940276362785em;
+ --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);
+ font-family: 'Inter', 'system-ui', sans-serif;
+}
+
+* {
+ box-sizing: content-box;
+}
+
+img {
+ max-width: 100%;
+ height: auto;
+}
+
+a {
+ color: var(--t-active);
+}
+
+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; }
+}
+
+// text align
+.tac { text-align: center; }
+.tal { text-align: left; }
+.tar { text-align: right; }
+
+// wrapper
+.wrapper {
+ max-width: 80em;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 2rem;
+ padding-right: 2rem;
+}
+.wrapper__readable {
+ max-width: 50em;
+}
\ No newline at end of file
diff --git a/examples/portfolio/public/assets/mesh-gradient.jpg b/examples/portfolio/public/assets/mesh-gradient.jpg
new file mode 100644
index 0000000000..4ee5a663fa
Binary files /dev/null and b/examples/portfolio/public/assets/mesh-gradient.jpg differ
diff --git a/examples/portfolio/src/components/Button/index.jsx b/examples/portfolio/src/components/Button/index.jsx
new file mode 100644
index 0000000000..0e1b6a4c84
--- /dev/null
+++ b/examples/portfolio/src/components/Button/index.jsx
@@ -0,0 +1,8 @@
+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
new file mode 100644
index 0000000000..67a343bdf8
--- /dev/null
+++ b/examples/portfolio/src/components/Button/styles.module.scss
@@ -0,0 +1,7 @@
+.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/index.jsx b/examples/portfolio/src/components/Footer/index.jsx
new file mode 100644
index 0000000000..8e15a2d8e9
--- /dev/null
+++ b/examples/portfolio/src/components/Footer/index.jsx
@@ -0,0 +1,12 @@
+import { h } from 'preact';
+import Styles from './styles.module.scss';
+
+function Footer() {
+ return (
+ <footer className={Styles.footer}>
+ © {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
new file mode 100644
index 0000000000..0e77ee206b
--- /dev/null
+++ b/examples/portfolio/src/components/Footer/styles.module.scss
@@ -0,0 +1,15 @@
+.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
new file mode 100644
index 0000000000..668b374b3a
--- /dev/null
+++ b/examples/portfolio/src/components/MainHead.astro
@@ -0,0 +1,9 @@
+---
+export let title = 'Jeanine White: Personal Site';
+---
+
+<meta charset="UTF-8">
+<title>{title}</title>
+<link rel="stylesheet" type="text/css" href="/app.css">
+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet">
diff --git a/examples/portfolio/src/components/Nav/index.jsx b/examples/portfolio/src/components/Nav/index.jsx
new file mode 100644
index 0000000000..944e44b718
--- /dev/null
+++ b/examples/portfolio/src/components/Nav/index.jsx
@@ -0,0 +1,35 @@
+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" 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 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
new file mode 100644
index 0000000000..d39a65a5b3
--- /dev/null
+++ b/examples/portfolio/src/components/Nav/styles.module.scss
@@ -0,0 +1,65 @@
+.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/index.jsx b/examples/portfolio/src/components/PortfolioPreview/index.jsx
new file mode 100644
index 0000000000..7918008c60
--- /dev/null
+++ b/examples/portfolio/src/components/PortfolioPreview/index.jsx
@@ -0,0 +1,28 @@
+import { h } from 'preact';
+import Styles from './styles.module.scss';
+
+function PortfolioPreview({ project }) {
+ return (
+ <div className={Styles.card}>
+ <div className={Styles.titleCard} style={`background-image:url(${project.img})`}>
+ <h1 className={Styles.title}>{project.title}</h1>
+ </div>
+ <div className="pa3">
+ <p className={`${Styles.desc} mt0 mb2`}>{project.description}</p>
+ <div className={Styles.tags}>
+ Tagged:
+ {project.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
new file mode 100644
index 0000000000..ce169c2fca
--- /dev/null
+++ b/examples/portfolio/src/components/PortfolioPreview/styles.module.scss
@@ -0,0 +1,102 @@
+.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
new file mode 100644
index 0000000000..7ca9734a49
--- /dev/null
+++ b/examples/portfolio/src/layouts/project.astro
@@ -0,0 +1,92 @@
+---
+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';
+
+export let content: any;
+---
+<html>
+ <head>
+ <MainHead title={content.title} />
+ <style lang="scss">
+ .hero {
+ padding: 8rem;
+ display: flex;
+ background-color: var(--t-fg);
+ background-repeat: no-repeat;
+ background-size: cover;
+ min-height: 25vw;
+ color: white;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .tag {
+ 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);
+ }
+ }
+
+ .title {
+ font-size: var(--f-u10);
+ font-weight: 900;
+ text-transform: uppercase;
+ letter-spacing: 0.0625em;
+ }
+
+ .leadIn {
+ color: var(--t-bg);
+ background-color: var(--t-fg);
+ }
+
+ .tagline {
+ font-weight: 300;
+ font-size: var(--f-u3);
+ line-height: 1.5;
+ }
+
+ .content {
+ font-size: var(--f-u1);
+ line-height: 2.2;
+ }
+ </style>
+ </head>
+ <body>
+ <Nav />
+ <header style={`background-image:url(${content.img})`} class="hero">
+ <h1 class="title">{content.title}</h1>
+ </header>
+ <div class="leadIn">
+ <div class="wrapper pt8 pb8 mb8 tac">
+ {content.tags.map((t) => (
+ <span class="tag">{t}</span>
+ ))}
+ <h3 class="tagline">{content.description}</h3>
+ </div>
+ </div>
+ <div class="wrapper wrapper__readable">
+ <div class="content"><slot></slot></div>
+ </div>
+ <footer class="tac mt6">
+ <a href="/projects">
+ <Button>View More</Button>
+ </a>
+ </footer>
+ <Footer />
+ </body>
+</html>
diff --git a/examples/portfolio/src/pages/$projects.astro b/examples/portfolio/src/pages/$projects.astro
new file mode 100644
index 0000000000..5fd00d3c29
--- /dev/null
+++ b/examples/portfolio/src/pages/$projects.astro
@@ -0,0 +1,41 @@
+---
+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';
+
+export let collection;
+export async function createCollection() {
+ return {
+ async data() {
+ const projects = Astro.fetchContent('./project/*.md');
+ projects.sort((a, b) => new Date(b.published_at) - new Date(a.published_at));
+ return projects.filter(({ published_at }) => !!published_at);
+ }
+ }
+}
+---
+
+<html>
+ <head>
+ <MainHead title="All Projects | Jeanine White" />
+ <style lang="scss">
+ .grid {
+ display: grid;
+ grid-gap: 3rem;
+ }
+ </style>
+ </head>
+ <body>
+ <Nav />
+ <div class="wrapper">
+ <h1 class="title mt4 mb4">All Projects</h1>
+ <div class="grid">
+ {collection.data.map((project) => (
+ <PortfolioPreview project={project} />
+ ))}
+ </div>
+ </div>
+ <Footer />
+ </body>
+</html>
diff --git a/examples/portfolio/src/pages/404.astro b/examples/portfolio/src/pages/404.astro
new file mode 100644
index 0000000000..bcf9ff6684
--- /dev/null
+++ b/examples/portfolio/src/pages/404.astro
@@ -0,0 +1,17 @@
+---
+import NotFound from '../components/NotFound.astro';
+import Footer from '../components/Footer/index.jsx';
+import Nav from '../components/Nav/index.jsx';
+---
+
+<html>
+ <head>
+ <MainHead title="Not Found" />
+ </head>
+ <body>
+ <Nav />
+ <h1>Page Not Found</h1>
+ <p>Not found</p>
+ <Footer />
+ </body>
+</html>
diff --git a/examples/portfolio/src/pages/about.astro b/examples/portfolio/src/pages/about.astro
new file mode 100644
index 0000000000..4ae7c3f083
--- /dev/null
+++ b/examples/portfolio/src/pages/about.astro
@@ -0,0 +1,59 @@
+---
+import MainHead from '../components/MainHead.astro';
+import Footer from '../components/Footer/index.jsx';
+import Nav from '../components/Nav/index.jsx';
+---
+
+<html>
+ <head>
+ <MainHead title="About | Jeanine White" />
+ <style lang="scss">
+ .heroImg {
+ object-fit: cover;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .bio {
+ font-size: var(--f-u1);
+ line-height: 2;
+ }
+ </style>
+ </head>
+ <body>
+ <Nav />
+ <div class="wrapper">
+ <h1>About Jeanine</h1>
+ <div class="heroImg">
+ <img width="1400" height="350" 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">
+ <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.
+ </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.
+ </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.
+ </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.
+ </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.
+ </p>
+ </div>
+ </div>
+ <Footer />
+</body>
+</html>
diff --git a/examples/portfolio/src/pages/index.astro b/examples/portfolio/src/pages/index.astro
new file mode 100644
index 0000000000..fcdc21d609
--- /dev/null
+++ b/examples/portfolio/src/pages/index.astro
@@ -0,0 +1,241 @@
+---
+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 PorfolioPreview from '../components/PortfolioPreview/index.jsx';
+
+const projects = Astro.fetchContent('./project/*.md');
+const featuredProject = projects[0];
+---
+
+<html>
+ <head>
+ <MainHead title="Jeanine White: Personal Site" />
+ <style lang="scss">
+ $w-s: 750px;
+
+ .hero {
+ position: relative;
+ overflow: hidden;
+
+ @media (min-width: $w-s) {
+ height: 45vw;
+ }
+ }
+
+ .img {
+ display: block;
+ width: 100%;
+ height: auto;
+ }
+
+ .gradient,
+ .gradient2 {
+ background-image: url('/assets/mesh-gradient.jpg');
+ pointer-events: none;
+ mix-blend-mode: screen;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2;
+ }
+
+ .gradient2 {
+ mix-blend-mode: multiply;
+ }
+
+ .overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 10;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ padding-left: 2rem;
+
+ @media (min-width: $w-s) {
+ padding-left: 4rem;
+ }
+ }
+
+ .title {
+ font-weight: 900;
+ font-size: var(--f-u8);
+ margin-bottom: 0.5rem;
+ margin-top: 0;
+
+ @media (min-width: $w-s) {
+ font-size: var(--f-u12);
+ }
+ }
+
+ .grid {
+ display: grid;
+ grid-gap: 2rem;
+
+ @media (min-width: 1200px) {
+ grid-template-columns: 2fr 1fr;
+ }
+ }
+
+ .sectionTitle {
+ font-weight: 700;
+ font-size: var(--f-u8);
+ margin-top: 4rem;
+ margin-bottom: 2rem;
+ }
+
+ .role {
+ position: relative;
+ display: inline-block;
+ 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) {
+ font-size: var(--f-u3);
+ }
+
+ + .role {
+ margin-left: 1em;
+ }
+
+ &:nth-of-type(1) {
+ .invert {
+ background-color: var(--c-pink);
+ }
+ }
+
+ &:nth-of-type(2) {
+ .invert {
+ background-color: var(--c-blue);
+ }
+ }
+
+ &:nth-of-type(3) {
+ .invert {
+ background-color: var(--c-green);
+ }
+ }
+
+ &:hover {
+ .invert {
+ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
+ }
+ }
+ }
+
+ .invert {
+ position: absolute;
+ color: var(--t-fg);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ pointer-events: none;
+ clip-path: polygon(0% 100%, 100% 100%, 100% 200%, 0% 200%);
+ transition: clip-path cubic-bezier(0.4, 0, 0.5, 1) 150ms;
+ }
+
+ .desc {
+ font-size: var(--f-u2);
+ margin-top: 1.5rem;
+ margin-bottom: 0;
+ }
+
+ .subtitle {
+ display: block;
+ font-weight: 400;
+ font-size: var(--f-d6);
+ letter-spacing: -0.0625em;
+ }
+
+ .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);
+ }
+ }
+ </style>
+ </head>
+ <body>
+ <Nav />
+ <header class="hero">
+ <img
+ width="1600"
+ height="1131"
+ class="img"
+ src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75"
+ srcSet="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 800w,
+ https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 1200w,
+ https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1600&q=75 1600w,
+ https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=2400&q=75 2400w,"
+ sizes="(max-width: 800px) 800px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px, (max-width: 2400px) 2400px, 1200px"
+ />
+ <div class="gradient" />
+ <div class="gradient2" />
+ <div class="overlay">
+ <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>
+ <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">
+ <div class="grid">
+ <div class="section">
+ <h3 class="sectionTitle">Selected Work</h3>
+ <PorfolioPreview project={featuredProject} />
+ <div class="tac mt4">
+ <a href="/projects">
+ <Button>View All</Button>
+ </a>
+ </div>
+ </div>
+ <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/snowpackjs/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>
+ </p>
+ </div>
+ </div>
+ </main>
+ <Footer />
+ </body>
+</html>
diff --git a/examples/portfolio/src/pages/project/mars-rover.md b/examples/portfolio/src/pages/project/mars-rover.md
new file mode 100644
index 0000000000..9351670af6
--- /dev/null
+++ b/examples/portfolio/src/pages/project/mars-rover.md
@@ -0,0 +1,23 @@
+---
+layout: ../../layouts/project.astro
+title: Mars Rover
+client: Self
+published_at: 2020-03-02 00:00:00
+img: https://images.unsplash.com/photo-1547234935-80c7145ec969?fit=crop&w=1400&h=700&q=75
+description: |
+ We built an unofficial Mars Rover Landing site in celebration of NASAβs Perseverance Rover.
+tags:
+ - design
+ - dev
+ - branding
+---
+
+Rubber cheese mascarpone cut the cheese. Jarlsberg parmesan cheesy grin cream cheese port-salut stinking bishop ricotta brie. Roquefort when the cheese comes out everybody's happy goat cheese triangles stilton cheese and biscuits goat babybel. Bocconcini roquefort queso danish fontina pecorino.
+
+Smelly cheese stinking bishop roquefort. Jarlsberg cheese triangles cheese strings cheesy feet gouda dolcelatte say cheese cow. Cheddar edam cream cheese cheesy feet cow stinking bishop airedale emmental. Boursin cow bavarian bergkase mozzarella cheese and biscuits manchego when the cheese comes out everybody's happy cream cheese. Cheese on toast st. agur blue cheese croque monsieur halloumi.
+
+Fromage frais jarlsberg st. agur blue cheese. Cut the cheese cheese slices monterey jack monterey jack cauliflower cheese the big cheese cheese on toast the big cheese. Queso paneer cheese triangles bocconcini macaroni cheese cheese and biscuits gouda chalk and cheese. Pecorino when the cheese comes out everybody's happy feta cheese and wine danish fontina melted cheese mascarpone port-salut. When the cheese comes out everybody's happy pecorino cottage cheese.
+
+Caerphilly parmesan manchego. Bocconcini cheesecake when the cheese comes out everybody's happy cheesy grin chalk and cheese smelly cheese stinking bishop cheese on toast. Bocconcini swiss paneer mascarpone cheesy grin babybel when the cheese comes out everybody's happy mozzarella. Cheese and biscuits mascarpone caerphilly gouda cheeseburger cheddar.
+
+Cheese and biscuits cheesy grin roquefort. Ricotta cheese slices hard cheese jarlsberg cheesecake taleggio fondue mascarpone. Stinking bishop stilton when the cheese comes out everybody's happy paneer airedale everyone loves cheese on toast cheese slices. Ricotta cut the cheese cheese triangles babybel cream cheese ricotta.
diff --git a/package-lock.json b/package-lock.json
index dace52de55..220a079c2f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "astro",
- "version": "0.0.8",
+ "version": "0.0.9",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/src/compiler/codegen/index.ts b/src/compiler/codegen/index.ts
index 73c038de13..5113799d63 100644
--- a/src/compiler/codegen/index.ts
+++ b/src/compiler/codegen/index.ts
@@ -9,7 +9,7 @@ import path from 'path';
import { walk } from 'estree-walker';
import _babelGenerator from '@babel/generator';
import babelParser from '@babel/parser';
-import { codeFrameColumns } from "@babel/code-frame";
+import { codeFrameColumns } from '@babel/code-frame';
import * as babelTraverse from '@babel/traverse';
import { ImportDeclaration, ExportNamedDeclaration, VariableDeclarator, Identifier } from '@babel/types';
import { warn } from '../../logger.js';
@@ -149,7 +149,7 @@ function getComponentWrapper(_name: string, { type, plugin, url }: ComponentInfo
const currFileUrl = new URL(`file://${filename}`);
if (!plugin) {
- throw new Error(`No supported plugin found for extension ${type}`);
+ throw new Error(`No supported plugin found for ${type ? `extension ${type}` : `${url} (try adding an extension)`}`);
}
const getComponentUrl = (ext = '.js') => {
@@ -327,8 +327,8 @@ function compileModule(module: Script, state: CodegenState, compileOptions: Comp
};
let parseResult;
try {
- parseResult = babelParser.parse(module.content, parseOptions)
- } catch(err) {
+ parseResult = babelParser.parse(module.content, parseOptions);
+ } catch (err) {
const location = { start: err.loc };
const frame = codeFrameColumns(module.content, location);
err.frame = frame;