This commit is contained in:
Fred K. Schott 2021-07-11 22:55:41 -04:00
parent 653b23082f
commit 59728dd64a
4 changed files with 26 additions and 250 deletions

View file

@ -1,9 +1,16 @@
--- ---
const { title = 'Jeanine White: Personal Site' } = Astro.props; export interface Props {
--- title: string;
description?: string[];
}
export function __state({props}: {props: Props}) {
return {description: props.description || 'This is the default site descrition.'};
}
---
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>{title}</title> <title>{$props.title}</title>
<meta name="description" content={$state.description}>
<link rel="stylesheet" type="text/css" href="/global.css"> <link rel="stylesheet" type="text/css" href="/global.css">
<link rel="preconnect" href="https://fonts.gstatic.com"> <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"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet">

View file

@ -3,12 +3,10 @@ import MainHead from '../components/MainHead.astro';
import Button from '../components/Button/index.jsx'; import Button from '../components/Button/index.jsx';
import Footer from '../components/Footer/index.jsx'; import Footer from '../components/Footer/index.jsx';
import Nav from '../components/Nav/index.jsx'; import Nav from '../components/Nav/index.jsx';
const { content } = Astro.props;
--- ---
<html> <html>
<head> <head>
<MainHead title={content.title} /> <MainHead title={$props.content.title} />
<style lang="scss"> <style lang="scss">
.hero { .hero {
padding: 8rem; padding: 8rem;

View file

@ -1,245 +1,12 @@
--- ---
// Component Imports // Component Imports
import MainHead from '../components/MainHead.astro'; 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';
// Data Fetching: List all Markdown posts in the repo.
const projects = await Astro.fetchContent(import.meta.glob('./project/**/*.md'));
const featuredProject = projects[0];
// Full Astro Component Syntax:
// https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/astro-components.md
--- ---
<html> <html>
<head> <head>
<MainHead title="Jeanine White: Personal Site" /> <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> </head>
<body> <body>
<Nav /> Test
<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>&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>
</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> Im 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> </body>
</html> </html>

View file

@ -124,8 +124,11 @@ const Astro = {
}; };
const __Astro = Astro; const __Astro = Astro;
// <script astro></script>
// Frontmatter Script
${result.imports.join('\n')} ${result.imports.join('\n')}
${result.script}
${ ${
result.hasCustomElements result.hasCustomElements
? ` ? `
@ -141,16 +144,18 @@ const __astro_element_registry = new AstroElementRegistry({
// \`__render()\`: Render the contents of the Astro module. // \`__render()\`: Render the contents of the Astro module.
import { h, Fragment } from 'astro/dist/internal/h.js'; import { h, Fragment } from 'astro/dist/internal/h.js';
const __astroInternal = Symbol('astro.internal'); const __astroInternal = Symbol('astro.internal');
async function __render(props, ...children) { async function __render($props, ...children) {
const Astro = { const Astro = {
...__Astro, ...__Astro,
props, // props,
css: props[__astroInternal]?.css || [], css: $props[__astroInternal]?.css || [],
request: props[__astroInternal]?.request || {}, request: $props[__astroInternal]?.request || {},
isPage: props[__astroInternal]?.isPage || false, isPage: $props[__astroInternal]?.isPage || false,
}; };
${result.script} const $state = typeof __state !== 'undefined' ? __state({props: $props}) : {};
console.log('$state', $state);
return h(Fragment, null, ${result.html}); return h(Fragment, null, ${result.html});
} }
export default { export default {
@ -194,10 +199,9 @@ export async function __renderPage({request, children, props, css}) {
return childBodyResult; return childBodyResult;
}; };
${result.exports.join('\n')}
`; `;
console.log(moduleJavaScript);
return { return {
result, result,
contents: moduleJavaScript, contents: moduleJavaScript,