Format astro files in examples (#3862)
This commit is contained in:
Marcus Otterström
GitHub
parent
1f9e4857ff
commit
59e8c71786
73 changed files with 958 additions and 695 deletions
|
|
@ -1,26 +1,26 @@
|
||||||
---
|
---
|
||||||
export interface Props {
|
export interface Props {
|
||||||
title: string,
|
title: string;
|
||||||
body: string,
|
body: string;
|
||||||
href: string,
|
href: string;
|
||||||
}
|
}
|
||||||
const {href, title, body} = Astro.props;
|
const { href, title, body } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<li class="link-card">
|
<li class="link-card">
|
||||||
<a href={href}>
|
<a href={href}>
|
||||||
<h2>
|
<h2>
|
||||||
{title}
|
{title}
|
||||||
<span>→</span>
|
<span>→</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p>
|
<p>
|
||||||
{body}
|
{body}
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--link-gradient: linear-gradient(45deg, #4F39FA, #DA62C4 30%, var(--color-border) 60%);
|
--link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-card {
|
.link-card {
|
||||||
|
|
@ -49,11 +49,11 @@ const {href, title, body} = Astro.props;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-top: 0.75rem;
|
margin-top: 0.75rem;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 span {
|
h2 span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -65,7 +65,7 @@ const {href, title, body} = Astro.props;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-card:is(:hover, :focus-within) h2 {
|
.link-card:is(:hover, :focus-within) h2 {
|
||||||
color: #4F39FA;
|
color: #4f39fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-card:is(:hover, :focus-within) h2 span {
|
.link-card:is(:hover, :focus-within) h2 span {
|
||||||
|
|
|
||||||
|
|
@ -8,49 +8,48 @@ const { title } = Astro.props as Props;
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width">
|
<meta name="viewport" content="width=device-width" />
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<slot />
|
<slot />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
|
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
|
||||||
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
|
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
|
||||||
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
|
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
|
||||||
|
|
||||||
--color-text: hsl(12, 5%, 4%);
|
--color-text: hsl(12, 5%, 4%);
|
||||||
--color-bg: hsl(10, 21%, 95%);
|
--color-bg: hsl(10, 21%, 95%);
|
||||||
--color-border: hsl(17, 24%, 90%);
|
--color-border: hsl(17, 24%, 90%);
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-family: system-ui, sans-serif;
|
font-family: system-ui, sans-serif;
|
||||||
font-size: var(--font-size-base);
|
font-size: var(--font-size-base);
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
background-color: var(--color-bg);
|
background-color: var(--color-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(h1) {
|
:global(h1) {
|
||||||
font-size: var(--font-size-xl);
|
font-size: var(--font-size-xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(h2) {
|
:global(h2) {
|
||||||
font-size: var(--font-size-lg);
|
font-size: var(--font-size-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(code) {
|
:global(code) {
|
||||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,43 @@
|
||||||
---
|
---
|
||||||
import Layout from '../layouts/Layout.astro';
|
import Layout from "../layouts/Layout.astro";
|
||||||
import Card from '../components/Card.astro';
|
import Card from "../components/Card.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Welcome to Astro.">
|
<Layout title="Welcome to Astro.">
|
||||||
<main>
|
<main>
|
||||||
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
|
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
|
||||||
<p class="instructions">
|
<p class="instructions">
|
||||||
Check out the <code>src/pages</code> directory to get started.<br/>
|
Check out the <code>src/pages</code> directory to get started.<br />
|
||||||
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
|
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
|
||||||
</p>
|
</p>
|
||||||
<ul role="list" class="link-card-grid">
|
<ul role="list" class="link-card-grid">
|
||||||
<Card href="https://docs.astro.build/" title="Documentation" body="Learn how Astro works and explore the official API docs." />
|
<Card
|
||||||
<Card href="https://astro.build/integrations/" title="Integrations" body="Supercharge your project with new frameworks and libraries." />
|
href="https://docs.astro.build/"
|
||||||
<Card href="https://astro.build/themes/" title="Themes" body="Explore a galaxy of community-built starter themes." />
|
title="Documentation"
|
||||||
<Card href="https://astro.build/chat/" title="Chat" body="Come say hi to our amazing Discord community. ❤️" />
|
body="Learn how Astro works and explore the official API docs."
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
href="https://astro.build/integrations/"
|
||||||
|
title="Integrations"
|
||||||
|
body="Supercharge your project with new frameworks and libraries."
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
href="https://astro.build/themes/"
|
||||||
|
title="Themes"
|
||||||
|
body="Explore a galaxy of community-built starter themes."
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
href="https://astro.build/chat/"
|
||||||
|
title="Chat"
|
||||||
|
body="Come say hi to our amazing Discord community. ❤️"
|
||||||
|
/>
|
||||||
</ul>
|
</ul>
|
||||||
</main>
|
</main>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--astro-gradient: linear-gradient(0deg,#4F39FA, #DA62C4);
|
--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
@ -29,7 +46,7 @@ import Card from '../components/Card.astro';
|
||||||
|
|
||||||
main {
|
main {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
max-width: 60ch;
|
max-width: 60ch;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -45,15 +62,20 @@ import Card from '../components/Card.astro';
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
0%, 100% { background-position-y: 0%; }
|
0%,
|
||||||
50% { background-position-y: 80%; }
|
100% {
|
||||||
|
background-position-y: 0%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position-y: 80%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.instructions {
|
.instructions {
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
margin: 1rem 0;
|
margin: 1rem 0;
|
||||||
background: #4F39FA;
|
background: #4f39fa;
|
||||||
padding: 1.0rem;
|
padding: 1rem;
|
||||||
border-radius: 0.4rem;
|
border-radius: 0.4rem;
|
||||||
color: var(--color-bg);
|
color: var(--color-bg);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
import '../styles/global.css';
|
import "../styles/global.css";
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
|
|
@ -19,7 +19,10 @@ const { title, description, image, type, next, prev, canonicalURL } = Astro.prop
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
<meta name="description" content={description} />
|
<meta name="description" content={description} />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,700;1,400;1,700&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
<!-- Sitemap -->
|
<!-- Sitemap -->
|
||||||
<link rel="sitemap" href="/sitemap.xml" />
|
<link rel="sitemap" href="/sitemap.xml" />
|
||||||
<!-- RSS -->
|
<!-- RSS -->
|
||||||
|
|
@ -30,17 +33,17 @@ const { title, description, image, type, next, prev, canonicalURL } = Astro.prop
|
||||||
|
|
||||||
<!-- SEO -->
|
<!-- SEO -->
|
||||||
<link rel="canonical" href={canonicalURL} />
|
<link rel="canonical" href={canonicalURL} />
|
||||||
{next && <link rel="next" aria-label="Previous Page" href={new URL(next, canonicalURL).href}>}
|
{next && <link rel="next" aria-label="Previous Page" href={new URL(next, canonicalURL).href} />}
|
||||||
{prev && <link rel="prev" aria-label="Next Page" href={new URL(prev, canonicalURL).href}>}
|
{prev && <link rel="prev" aria-label="Next Page" href={new URL(prev, canonicalURL).href} />}
|
||||||
|
|
||||||
<!-- OpenGraph -->
|
<!-- OpenGraph -->
|
||||||
<meta property="og:title" content={title} />
|
<meta property="og:title" content={title} />
|
||||||
<meta property="og:description" content={description} />
|
<meta property="og:description" content={description} />
|
||||||
{image && (<meta property="og:image" content={new URL(image, canonicalURL)}>)}
|
{image && <meta property="og:image" content={new URL(image, canonicalURL)} />}
|
||||||
|
|
||||||
<!-- Twitter -->
|
<!-- Twitter -->
|
||||||
<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'} />
|
<meta name="twitter:card" content={image ? "summary_large_image" : "summary"} />
|
||||||
<meta name="twitter:site" content="@astro" />
|
<meta name="twitter:site" content="@astro" />
|
||||||
<meta name="twitter:title" content={title} />
|
<meta name="twitter:title" content={title} />
|
||||||
<meta name="twitter:description" content={description} />
|
<meta name="twitter:description" content={description} />
|
||||||
{image && (<meta name="twitter:image" content={image}>)}
|
{image && <meta name="twitter:image" content={image} />}
|
||||||
|
|
|
||||||
|
|
@ -9,8 +9,8 @@ const { prevUrl, nextUrl } = Astro.props;
|
||||||
|
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<nav class="nav">
|
<nav class="nav">
|
||||||
<a class="prev" href={prevUrl || '#'} aria-label="Previous Page">Prev</a>
|
<a class="prev" href={prevUrl || "#"} aria-label="Previous Page">Prev</a>
|
||||||
<a class="next" href={nextUrl || '#'} aria-label="Next Page">Next</a>
|
<a class="next" href={nextUrl || "#"} aria-label="Next Page">Next</a>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -29,7 +29,7 @@ const { prevUrl, nextUrl } = Astro.props;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
|
|
||||||
&[href='#'] {
|
&[href="#"] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ const { post, author } = Astro.props;
|
||||||
const { frontmatter } = post;
|
const { frontmatter } = post;
|
||||||
|
|
||||||
function formatDate(date) {
|
function formatDate(date) {
|
||||||
return new Date(date).toUTCString().replace(/(\d\d\d\d) .*/, '$1'); // remove everything after YYYY
|
return new Date(date).toUTCString().replace(/(\d\d\d\d) .*/, "$1"); // remove everything after YYYY
|
||||||
}
|
}
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,21 @@
|
||||||
---
|
---
|
||||||
import MainHead from '../components/MainHead.astro';
|
import MainHead from "../components/MainHead.astro";
|
||||||
import Nav from '../components/Nav.astro';
|
import Nav from "../components/Nav.astro";
|
||||||
import authorData from '../data/authors.json';
|
import authorData from "../data/authors.json";
|
||||||
|
|
||||||
const { content } = Astro.props;
|
const { content } = Astro.props;
|
||||||
let canonicalURL = Astro.canonicalURL;
|
let canonicalURL = Astro.canonicalURL;
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang={content.lang || 'en'}>
|
<html lang={content.lang || "en"}>
|
||||||
<head>
|
<head>
|
||||||
<title>{content.title}</title>
|
<title>{content.title}</title>
|
||||||
<MainHead title={content.title} description={content.description} image={content.image} {canonicalURL} />
|
<MainHead
|
||||||
|
title={content.title}
|
||||||
|
description={content.description}
|
||||||
|
image={content.image}
|
||||||
|
{canonicalURL}
|
||||||
|
/>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.title {
|
.title {
|
||||||
margin-top: 4rem;
|
margin-top: 4rem;
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
---
|
---
|
||||||
import MainHead from '../components/MainHead.astro';
|
import MainHead from "../components/MainHead.astro";
|
||||||
import Nav from '../components/Nav.astro';
|
import Nav from "../components/Nav.astro";
|
||||||
|
|
||||||
let title = 'About';
|
let title = "About";
|
||||||
let description = 'About page of an example blog on Astro';
|
let description = "About page of an example blog on Astro";
|
||||||
let canonicalURL = Astro.canonicalURL;
|
let canonicalURL = Astro.canonicalURL;
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -54,15 +54,19 @@ let canonicalURL = Astro.canonicalURL;
|
||||||
</div>
|
</div>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<p>
|
<p>
|
||||||
The book cover and spine above and the images which follow were not part of the original Ormsby translation—they are taken from the 1880 edition of J. W. Clark,
|
The book cover and spine above and the images which follow were not part of the original
|
||||||
illustrated by Gustave Doré. Clark in his edition states that, “The English text of ‘Don Quixote’ adopted in this edition is that of Jarvis, with occasional corrections
|
Ormsby translation—they are taken from the 1880 edition of J. W. Clark, illustrated by
|
||||||
from Motteaux.”
|
Gustave Doré. Clark in his edition states that, “The English text of ‘Don Quixote’ adopted
|
||||||
|
in this edition is that of Jarvis, with occasional corrections from Motteaux.”
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
See in the introduction below John Ormsby’s critique of both the Jarvis and Motteaux translations. It has been elected in the present Project Gutenberg edition to attach
|
See in the introduction below John Ormsby’s critique of both the Jarvis and Motteaux
|
||||||
the famous engravings of Gustave Doré to the Ormsby translation instead of the Jarvis/Motteaux. The detail of many of the Doré engravings can be fully appreciated only by
|
translations. It has been elected in the present Project Gutenberg edition to attach the
|
||||||
utilizing the “Full Size” button to expand them to their original dimensions. Ormsby in his Preface has criticized the fanciful nature of Doré’s illustrations; others
|
famous engravings of Gustave Doré to the Ormsby translation instead of the
|
||||||
feel these woodcuts and steel engravings well match Quixote’s dreams.
|
Jarvis/Motteaux. The detail of many of the Doré engravings can be fully appreciated only
|
||||||
|
by utilizing the “Full Size” button to expand them to their original dimensions. Ormsby in
|
||||||
|
his Preface has criticized the fanciful nature of Doré’s illustrations; others feel these
|
||||||
|
woodcuts and steel engravings well match Quixote’s dreams.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,35 @@
|
||||||
---
|
---
|
||||||
import MainHead from '../../components/MainHead.astro';
|
import MainHead from "../../components/MainHead.astro";
|
||||||
import Nav from '../../components/Nav.astro';
|
import Nav from "../../components/Nav.astro";
|
||||||
import PostPreview from '../../components/PostPreview.astro';
|
import PostPreview from "../../components/PostPreview.astro";
|
||||||
import authorData from '../../data/authors.json';
|
import authorData from "../../data/authors.json";
|
||||||
|
|
||||||
export async function getStaticPaths() {
|
export async function getStaticPaths() {
|
||||||
const allPosts = await Astro.glob('../post/*.md');
|
const allPosts = await Astro.glob("../post/*.md");
|
||||||
let allAuthorsUnique = [...new Set(allPosts.map((p) => p.frontmatter.author))];
|
let allAuthorsUnique = [...new Set(allPosts.map((p) => p.frontmatter.author))];
|
||||||
return allAuthorsUnique.map((author) => ({ params: { author }, props: { allPosts } }));
|
return allAuthorsUnique.map((author) => ({ params: { author }, props: { allPosts } }));
|
||||||
}
|
}
|
||||||
|
|
||||||
const { allPosts } = Astro.props;
|
const { allPosts } = Astro.props;
|
||||||
const title = 'Don’s Blog';
|
const title = "Don’s Blog";
|
||||||
const description = 'An example blog on Astro';
|
const description = "An example blog on Astro";
|
||||||
|
|
||||||
/** filter posts by author, sort by date */
|
/** filter posts by author, sort by date */
|
||||||
const posts = allPosts.filter((post) => post.frontmatter.author === Astro.params.author).sort((a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf());
|
const posts = allPosts
|
||||||
|
.filter((post) => post.frontmatter.author === Astro.params.author)
|
||||||
|
.sort((a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf());
|
||||||
const author = authorData[posts[0].frontmatter.author];
|
const author = authorData[posts[0].frontmatter.author];
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
<MainHead {title} {description} image={posts[0].frontmatter.image} canonicalURL={Astro.canonicalURL.toString()} />
|
<MainHead
|
||||||
|
{title}
|
||||||
|
{description}
|
||||||
|
image={posts[0].frontmatter.image}
|
||||||
|
canonicalURL={Astro.canonicalURL.toString()}
|
||||||
|
/>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.title {
|
.title {
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,24 @@
|
||||||
---
|
---
|
||||||
// Component Imports
|
// Component Imports
|
||||||
import MainHead from '../components/MainHead.astro';
|
import MainHead from "../components/MainHead.astro";
|
||||||
import Nav from '../components/Nav.astro';
|
import Nav from "../components/Nav.astro";
|
||||||
import PostPreview from '../components/PostPreview.astro';
|
import PostPreview from "../components/PostPreview.astro";
|
||||||
import Pagination from '../components/Pagination.astro';
|
import Pagination from "../components/Pagination.astro";
|
||||||
import authorData from '../data/authors.json';
|
import authorData from "../data/authors.json";
|
||||||
|
|
||||||
// Component Script:
|
// Component Script:
|
||||||
// You can write any JavaScript/TypeScript that you'd like here.
|
// You can write any JavaScript/TypeScript that you'd like here.
|
||||||
// It will run during the build, but never in the browser.
|
// It will run during the build, but never in the browser.
|
||||||
// All variables are available to use in the HTML template below.
|
// All variables are available to use in the HTML template below.
|
||||||
let title = 'Don’s Blog';
|
let title = "Don’s Blog";
|
||||||
let description = 'An example blog on Astro';
|
let description = "An example blog on Astro";
|
||||||
let canonicalURL = Astro.canonicalURL;
|
let canonicalURL = Astro.canonicalURL;
|
||||||
|
|
||||||
// Data Fetching: List all Markdown posts in the repo.
|
// Data Fetching: List all Markdown posts in the repo.
|
||||||
let allPosts = await Astro.glob('./post/*.md');
|
let allPosts = await Astro.glob("./post/*.md");
|
||||||
allPosts.sort((a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf());
|
allPosts.sort(
|
||||||
|
(a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf()
|
||||||
|
);
|
||||||
let firstPage = allPosts.slice(0, 2);
|
let firstPage = allPosts.slice(0, 2);
|
||||||
// Full Astro Component Syntax:
|
// Full Astro Component Syntax:
|
||||||
// https://docs.astro.build/core-concepts/astro-components/
|
// https://docs.astro.build/core-concepts/astro-components/
|
||||||
|
|
@ -31,7 +33,9 @@ let firstPage = allPosts.slice(0, 2);
|
||||||
<Nav {title} />
|
<Nav {title} />
|
||||||
|
|
||||||
<main class="wrapper">
|
<main class="wrapper">
|
||||||
{allPosts.map((post) => <PostPreview post={post} author={authorData[post.frontmatter.author]} />)}
|
{allPosts.map((post) => (
|
||||||
|
<PostPreview post={post} author={authorData[post.frontmatter.author]} />
|
||||||
|
))}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,15 @@
|
||||||
---
|
---
|
||||||
import MainHead from '../../components/MainHead.astro';
|
import MainHead from "../../components/MainHead.astro";
|
||||||
import Nav from '../../components/Nav.astro';
|
import Nav from "../../components/Nav.astro";
|
||||||
import PostPreview from '../../components/PostPreview.astro';
|
import PostPreview from "../../components/PostPreview.astro";
|
||||||
import Pagination from '../../components/Pagination.astro';
|
import Pagination from "../../components/Pagination.astro";
|
||||||
import authorData from '../../data/authors.json';
|
import authorData from "../../data/authors.json";
|
||||||
|
|
||||||
export async function getStaticPaths({ paginate, rss }) {
|
export async function getStaticPaths({ paginate, rss }) {
|
||||||
const allPosts = await Astro.glob('../post/*.md');
|
const allPosts = await Astro.glob("../post/*.md");
|
||||||
const sortedPosts = allPosts.sort((a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf());
|
const sortedPosts = allPosts.sort(
|
||||||
|
(a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf()
|
||||||
|
);
|
||||||
|
|
||||||
// Generate an RSS feed from this collection of posts.
|
// Generate an RSS feed from this collection of posts.
|
||||||
// NOTE: This is disabled by default, since it requires `site` to be set in your "astro.config.mjs" file.
|
// NOTE: This is disabled by default, since it requires `site` to be set in your "astro.config.mjs" file.
|
||||||
|
|
@ -28,8 +30,8 @@ export async function getStaticPaths({ paginate, rss }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// page
|
// page
|
||||||
const title = 'Don’s Blog';
|
const title = "Don’s Blog";
|
||||||
const description = 'An example blog on Astro';
|
const description = "An example blog on Astro";
|
||||||
const { canonicalURL } = Astro;
|
const { canonicalURL } = Astro;
|
||||||
const { page } = Astro.props;
|
const { page } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
@ -37,7 +39,14 @@ const { page } = Astro.props;
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
<MainHead {title} {description} image={page.data[0].frontmatter.image} canonicalURL={canonicalURL.toString()} prev={page.url.prev} next={page.url.next} />
|
<MainHead
|
||||||
|
{title}
|
||||||
|
{description}
|
||||||
|
image={page.data[0].frontmatter.image}
|
||||||
|
canonicalURL={canonicalURL.toString()}
|
||||||
|
prev={page.url.prev}
|
||||||
|
next={page.url.next}
|
||||||
|
/>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.title {
|
.title {
|
||||||
|
|
@ -62,7 +71,9 @@ const { page } = Astro.props;
|
||||||
<main class="wrapper">
|
<main class="wrapper">
|
||||||
<h2 class="title">All Posts</h2>
|
<h2 class="title">All Posts</h2>
|
||||||
<small class="count">{page.start + 1}–{page.end + 1} of {page.total}</small>
|
<small class="count">{page.start + 1}–{page.end + 1} of {page.total}</small>
|
||||||
{page.data.map((post) => <PostPreview post={post} author={authorData[post.frontmatter.author]} />)}
|
{page.data.map((post) => (
|
||||||
|
<PostPreview post={post} author={authorData[post.frontmatter.author]} />
|
||||||
|
))}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
import '../styles/blog.css';
|
import "../styles/blog.css";
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
|
|
@ -35,4 +35,7 @@ const { title, description, permalink } = Astro.props;
|
||||||
|
|
||||||
<!-- Fonts -->
|
<!-- Fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;700&display=swap" />
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;700&display=swap"
|
||||||
|
/>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,14 @@
|
||||||
<article>
|
<article>
|
||||||
<h1>
|
<h1>
|
||||||
<a href="/">
|
<a href="/">
|
||||||
<svg class="logo" width="32" height="32" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg
|
||||||
|
class="logo"
|
||||||
|
width="32"
|
||||||
|
height="32"
|
||||||
|
viewBox="0 0 256 256"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
<style>
|
<style>
|
||||||
#flame {
|
#flame {
|
||||||
fill: #ff5d01;
|
fill: #ff5d01;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
import Author from './Author.astro';
|
import Author from "./Author.astro";
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
|
|
@ -16,7 +16,16 @@ const { title, author, publishDate, heroImage, alt } = Astro.props;
|
||||||
<article class="content">
|
<article class="content">
|
||||||
<div>
|
<div>
|
||||||
<header>
|
<header>
|
||||||
{heroImage && <img width="720" height="420" class="hero-image" loading="lazy" src={heroImage} alt={alt} />}
|
{heroImage && (
|
||||||
|
<img
|
||||||
|
width="720"
|
||||||
|
height="420"
|
||||||
|
class="hero-image"
|
||||||
|
loading="lazy"
|
||||||
|
src={heroImage}
|
||||||
|
alt={alt}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
<p class="publish-date">{publishDate}</p>
|
<p class="publish-date">{publishDate}</p>
|
||||||
<h1 class="title">{title}</h1>
|
<h1 class="title">{title}</h1>
|
||||||
<Author name="@FredKSchott" href="https://twitter.com/FredKSchott" />
|
<Author name="@FredKSchott" href="https://twitter.com/FredKSchott" />
|
||||||
|
|
|
||||||
|
|
@ -1,46 +1,52 @@
|
||||||
<svg class="logo" width="158" height="170" viewBox="0 0 158 170" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg
|
||||||
|
class="logo"
|
||||||
|
width="158"
|
||||||
|
height="170"
|
||||||
|
viewBox="0 0 158 170"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd"
|
||||||
d="M96.5039 9.46441C97.4758 10.671 97.9714 12.2991 98.9626 15.5553L120.617 86.6902C112.611 82.5368 103.907 79.5413 94.7281 77.9252L80.6289 30.2798C80.3982 29.5002 79.6822 28.9654 78.8692 28.9654C78.0541 28.9654 77.3367 29.503 77.1079 30.2853L63.1795 77.9011C53.9579 79.51 45.2146 82.5109 37.1741 86.6793L58.9347 15.5388C59.929 12.2882 60.4262 10.6629 61.3981 9.45854C62.2562 8.39532 63.3723 7.56959 64.64 7.06003C66.076 6.48285 67.7756 6.48285 71.1749 6.48285H86.7174C90.1211 6.48285 91.823 6.48285 93.2603 7.06124C94.5291 7.575 95.6459 8.39925 96.5039 9.46441Z"
|
d="M96.5039 9.46441C97.4758 10.671 97.9714 12.2991 98.9626 15.5553L120.617 86.6902C112.611 82.5368 103.907 79.5413 94.7281 77.9252L80.6289 30.2798C80.3982 29.5002 79.6822 28.9654 78.8692 28.9654C78.0541 28.9654 77.3367 29.503 77.1079 30.2853L63.1795 77.9011C53.9579 79.51 45.2146 82.5109 37.1741 86.6793L58.9347 15.5388C59.929 12.2882 60.4262 10.6629 61.3981 9.45854C62.2562 8.39532 63.3723 7.56959 64.64 7.06003C66.076 6.48285 67.7756 6.48285 71.1749 6.48285H86.7174C90.1211 6.48285 91.823 6.48285 93.2603 7.06124C94.5291 7.575 95.6459 8.39925 96.5039 9.46441Z"
|
||||||
fill="white"
|
fill="white"></path>
|
||||||
/>
|
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd"
|
||||||
d="M99.0951 90.0755C95.5253 93.1279 88.4002 95.2097 80.1929 95.2097C70.1197 95.2097 61.6767 92.0737 59.4363 87.8561C58.6354 90.2733 58.4558 93.0397 58.4558 94.8069C58.4558 94.8069 57.9281 103.485 63.9636 109.52C63.9636 106.386 66.5042 103.846 69.6381 103.846C75.0097 103.846 75.0036 108.532 74.9987 112.334C74.9986 112.448 74.9984 112.561 74.9984 112.673C74.9984 118.444 78.5255 123.391 83.5416 125.477C82.7924 123.936 82.3721 122.205 82.3721 120.377C82.3721 114.873 85.6034 112.823 89.3588 110.441C92.3469 108.546 95.6668 106.441 97.9548 102.217C99.1486 100.013 99.8265 97.4893 99.8265 94.8069C99.8265 93.1573 99.5702 91.5676 99.0951 90.0755Z"
|
d="M99.0951 90.0755C95.5253 93.1279 88.4002 95.2097 80.1929 95.2097C70.1197 95.2097 61.6767 92.0737 59.4363 87.8561C58.6354 90.2733 58.4558 93.0397 58.4558 94.8069C58.4558 94.8069 57.9281 103.485 63.9636 109.52C63.9636 106.386 66.5042 103.846 69.6381 103.846C75.0097 103.846 75.0036 108.532 74.9987 112.334C74.9986 112.448 74.9984 112.561 74.9984 112.673C74.9984 118.444 78.5255 123.391 83.5416 125.477C82.7924 123.936 82.3721 122.205 82.3721 120.377C82.3721 114.873 85.6034 112.823 89.3588 110.441C92.3469 108.546 95.6668 106.441 97.9548 102.217C99.1486 100.013 99.8265 97.4893 99.8265 94.8069C99.8265 93.1573 99.5702 91.5676 99.0951 90.0755Z"
|
||||||
fill="#FF5D01"
|
fill="#FF5D01"></path>
|
||||||
/>
|
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd"
|
||||||
d="M99.0951 90.0755C95.5253 93.1279 88.4002 95.2097 80.1929 95.2097C70.1197 95.2097 61.6767 92.0737 59.4363 87.8561C58.6354 90.2733 58.4558 93.0397 58.4558 94.8069C58.4558 94.8069 57.9281 103.485 63.9636 109.52C63.9636 106.386 66.5042 103.846 69.6381 103.846C75.0097 103.846 75.0036 108.532 74.9987 112.334C74.9986 112.448 74.9984 112.561 74.9984 112.673C74.9984 118.444 78.5255 123.391 83.5416 125.477C82.7924 123.936 82.3721 122.205 82.3721 120.377C82.3721 114.873 85.6034 112.823 89.3588 110.441C92.3469 108.546 95.6668 106.441 97.9548 102.217C99.1486 100.013 99.8265 97.4893 99.8265 94.8069C99.8265 93.1573 99.5702 91.5676 99.0951 90.0755Z"
|
d="M99.0951 90.0755C95.5253 93.1279 88.4002 95.2097 80.1929 95.2097C70.1197 95.2097 61.6767 92.0737 59.4363 87.8561C58.6354 90.2733 58.4558 93.0397 58.4558 94.8069C58.4558 94.8069 57.9281 103.485 63.9636 109.52C63.9636 106.386 66.5042 103.846 69.6381 103.846C75.0097 103.846 75.0036 108.532 74.9987 112.334C74.9986 112.448 74.9984 112.561 74.9984 112.673C74.9984 118.444 78.5255 123.391 83.5416 125.477C82.7924 123.936 82.3721 122.205 82.3721 120.377C82.3721 114.873 85.6034 112.823 89.3588 110.441C92.3469 108.546 95.6668 106.441 97.9548 102.217C99.1486 100.013 99.8265 97.4893 99.8265 94.8069C99.8265 93.1573 99.5702 91.5676 99.0951 90.0755Z"
|
||||||
fill="url(#paint1_linear)"
|
fill="url(#paint1_linear)"></path>
|
||||||
/>
|
|
||||||
<path
|
<path
|
||||||
d="M11.9957 169.024C20.0117 169.024 24.8597 167.104 27.6917 163.12C27.6917 164.896 27.7877 166.576 28.0277 168.112H32.7797C32.3477 165.616 32.2517 163.984 32.2517 159.472V153.328C32.2517 146.704 27.1157 143.2 17.3237 143.2C7.8677 143.2 1.7237 146.848 0.955701 152.128H5.9957C6.7637 148.576 10.7477 146.704 17.3237 146.704C23.8037 146.704 27.6437 148.96 27.6437 152.8V153.28L12.6677 154.144C6.5717 154.48 4.3157 155.344 2.5877 156.592C0.955701 157.792 0.0437012 159.664 0.0437012 161.824C0.0437012 166.384 4.7477 169.024 11.9957 169.024ZM13.5317 165.616C7.9637 165.616 4.8917 164.32 4.8917 161.728C4.8917 158.944 6.8117 157.696 13.5797 157.264L27.6437 156.4V157.504C27.6437 162.544 21.7397 165.616 13.5317 165.616Z"
|
d="M11.9957 169.024C20.0117 169.024 24.8597 167.104 27.6917 163.12C27.6917 164.896 27.7877 166.576 28.0277 168.112H32.7797C32.3477 165.616 32.2517 163.984 32.2517 159.472V153.328C32.2517 146.704 27.1157 143.2 17.3237 143.2C7.8677 143.2 1.7237 146.848 0.955701 152.128H5.9957C6.7637 148.576 10.7477 146.704 17.3237 146.704C23.8037 146.704 27.6437 148.96 27.6437 152.8V153.28L12.6677 154.144C6.5717 154.48 4.3157 155.344 2.5877 156.592C0.955701 157.792 0.0437012 159.664 0.0437012 161.824C0.0437012 166.384 4.7477 169.024 11.9957 169.024ZM13.5317 165.616C7.9637 165.616 4.8917 164.32 4.8917 161.728C4.8917 158.944 6.8117 157.696 13.5797 157.264L27.6437 156.4V157.504C27.6437 162.544 21.7397 165.616 13.5317 165.616Z"
|
||||||
fill="white"
|
fill="white"></path>
|
||||||
/>
|
|
||||||
<path
|
<path
|
||||||
d="M55.9352 169.024C65.8712 169.024 69.8552 165.76 69.8552 161.008C69.8552 157.072 67.4072 155.056 61.1672 154.528L49.5032 153.616C46.3352 153.376 44.5592 152.464 44.5592 150.496C44.5592 148 47.2952 146.704 53.1992 146.704C59.9192 146.704 63.4232 148.048 65.7272 151.024L69.6152 149.152C67.2152 145.408 61.8872 143.2 53.6312 143.2C45.1352 143.2 40.0472 146.032 40.0472 150.688C40.0472 154.864 43.0712 156.88 48.7832 157.36L60.3512 158.272C64.1432 158.56 65.2952 159.328 65.2952 161.296C65.2952 164.128 62.3672 165.472 56.5592 165.472C49.5032 165.472 45.0392 163.552 42.8792 160.048L39.0872 162.112C42.0152 166.528 47.1512 169.024 55.9352 169.024Z"
|
d="M55.9352 169.024C65.8712 169.024 69.8552 165.76 69.8552 161.008C69.8552 157.072 67.4072 155.056 61.1672 154.528L49.5032 153.616C46.3352 153.376 44.5592 152.464 44.5592 150.496C44.5592 148 47.2952 146.704 53.1992 146.704C59.9192 146.704 63.4232 148.048 65.7272 151.024L69.6152 149.152C67.2152 145.408 61.8872 143.2 53.6312 143.2C45.1352 143.2 40.0472 146.032 40.0472 150.688C40.0472 154.864 43.0712 156.88 48.7832 157.36L60.3512 158.272C64.1432 158.56 65.2952 159.328 65.2952 161.296C65.2952 164.128 62.3672 165.472 56.5592 165.472C49.5032 165.472 45.0392 163.552 42.8792 160.048L39.0872 162.112C42.0152 166.528 47.1512 169.024 55.9352 169.024Z"
|
||||||
fill="white"
|
fill="white"></path>
|
||||||
/>
|
|
||||||
<path
|
<path
|
||||||
d="M79.6765 147.712V159.28C79.6765 164.032 81.3085 168.784 90.1885 168.784C92.4445 168.784 95.1805 168.352 96.3805 167.824V163.936C94.7005 164.32 92.6845 164.608 90.7165 164.608C86.5405 164.608 84.2845 162.976 84.2845 158.848V147.712H96.2845V144.112H84.2845V136L79.6765 137.872V144.112H72.1404V147.712H79.6765Z"
|
d="M79.6765 147.712V159.28C79.6765 164.032 81.3085 168.784 90.1885 168.784C92.4445 168.784 95.1805 168.352 96.3805 167.824V163.936C94.7005 164.32 92.6845 164.608 90.7165 164.608C86.5405 164.608 84.2845 162.976 84.2845 158.848V147.712H96.2845V144.112H84.2845V136L79.6765 137.872V144.112H72.1404V147.712H79.6765Z"
|
||||||
fill="white"
|
fill="white"></path>
|
||||||
/>
|
|
||||||
<path
|
<path
|
||||||
d="M107.728 144.112H103.504V168.112H108.064V159.136C108.064 155.68 108.736 152.752 110.656 150.736C112.336 148.864 114.496 147.808 118.288 147.808C119.584 147.808 120.4 147.904 121.504 148.096V143.68C120.496 143.44 119.632 143.392 118.336 143.392C113.2 143.392 109.12 146.416 107.728 151.072V144.112Z"
|
d="M107.728 144.112H103.504V168.112H108.064V159.136C108.064 155.68 108.736 152.752 110.656 150.736C112.336 148.864 114.496 147.808 118.288 147.808C119.584 147.808 120.4 147.904 121.504 148.096V143.68C120.496 143.44 119.632 143.392 118.336 143.392C113.2 143.392 109.12 146.416 107.728 151.072V144.112Z"
|
||||||
fill="white"
|
fill="white"></path>
|
||||||
/>
|
|
||||||
<path
|
<path
|
||||||
d="M140.724 169.024C150.948 169.024 157.956 163.84 157.956 156.112C157.956 148.384 150.948 143.2 140.724 143.2C130.5 143.2 123.492 148.384 123.492 156.112C123.492 163.84 130.5 169.024 140.724 169.024ZM140.724 165.232C133.188 165.232 128.34 161.68 128.34 156.112C128.34 150.544 133.188 146.992 140.724 146.992C148.212 146.992 153.108 150.544 153.108 156.112C153.108 161.68 148.212 165.232 140.724 165.232Z"
|
d="M140.724 169.024C150.948 169.024 157.956 163.84 157.956 156.112C157.956 148.384 150.948 143.2 140.724 143.2C130.5 143.2 123.492 148.384 123.492 156.112C123.492 163.84 130.5 169.024 140.724 169.024ZM140.724 165.232C133.188 165.232 128.34 161.68 128.34 156.112C128.34 150.544 133.188 146.992 140.724 146.992C148.212 146.992 153.108 150.544 153.108 156.112C153.108 161.68 148.212 165.232 140.724 165.232Z"
|
||||||
fill="white"
|
fill="white"></path>
|
||||||
/>
|
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient id="paint1_linear" x1="115.168" y1="65.245" x2="94.0326" y2="109.491" gradientUnits="userSpaceOnUse">
|
<linearGradient
|
||||||
<stop stop-color="#FF1639" />
|
id="paint1_linear"
|
||||||
<stop offset="1" stop-color="#FF1639" stop-opacity="0" />
|
x1="115.168"
|
||||||
|
y1="65.245"
|
||||||
|
x2="94.0326"
|
||||||
|
y2="109.491"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stop-color="#FF1639"></stop>
|
||||||
|
<stop offset="1" stop-color="#FF1639" stop-opacity="0"></stop>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.6 KiB |
|
|
@ -1,16 +1,18 @@
|
||||||
---
|
---
|
||||||
import BaseHead from '../components/BaseHead.astro';
|
import BaseHead from "../components/BaseHead.astro";
|
||||||
import BlogHeader from '../components/BlogHeader.astro';
|
import BlogHeader from "../components/BlogHeader.astro";
|
||||||
import BlogPost from '../components/BlogPost.astro';
|
import BlogPost from "../components/BlogPost.astro";
|
||||||
|
|
||||||
|
|
||||||
const { content } = Astro.props;
|
const { content } = Astro.props;
|
||||||
const { title, description, publishDate, author, heroImage, permalink, alt } = content;
|
const { title, description, publishDate, author, heroImage, permalink, alt } = content;
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang={content.lang || 'en'}>
|
<html lang={content.lang || "en"}>
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prism-themes@1.9.0/themes/prism-lucario.css"/>
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/prism-themes@1.9.0/themes/prism-lucario.css"
|
||||||
|
/>
|
||||||
<BaseHead {title} {description} {permalink} />
|
<BaseHead {title} {description} {permalink} />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,24 @@
|
||||||
---
|
---
|
||||||
// Component Imports
|
// Component Imports
|
||||||
import BaseHead from '../components/BaseHead.astro';
|
import BaseHead from "../components/BaseHead.astro";
|
||||||
import BlogHeader from '../components/BlogHeader.astro';
|
import BlogHeader from "../components/BlogHeader.astro";
|
||||||
import BlogPostPreview from '../components/BlogPostPreview.astro';
|
import BlogPostPreview from "../components/BlogPostPreview.astro";
|
||||||
|
|
||||||
// Component Script:
|
// Component Script:
|
||||||
// You can write any JavaScript/TypeScript that you'd like here.
|
// You can write any JavaScript/TypeScript that you'd like here.
|
||||||
// It will run during the build, but never in the browser.
|
// It will run during the build, but never in the browser.
|
||||||
// All variables are available to use in the HTML template below.
|
// All variables are available to use in the HTML template below.
|
||||||
let title = 'Example Blog';
|
let title = "Example Blog";
|
||||||
let description = 'The perfect starter for your perfect blog.';
|
let description = "The perfect starter for your perfect blog.";
|
||||||
let permalink = 'https://example.com/';
|
let permalink = "https://example.com/";
|
||||||
|
|
||||||
// Data Fetching: List all Markdown posts in the repo.
|
// Data Fetching: List all Markdown posts in the repo.
|
||||||
|
|
||||||
let allPosts = await Astro.glob('./posts/*.md');
|
let allPosts = await Astro.glob("./posts/*.md");
|
||||||
allPosts = allPosts.sort((a, b) => new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf());
|
allPosts = allPosts.sort(
|
||||||
|
(a, b) =>
|
||||||
|
new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf()
|
||||||
|
);
|
||||||
|
|
||||||
// Full Astro Component Syntax:
|
// Full Astro Component Syntax:
|
||||||
// https://docs.astro.build/core-concepts/astro-components/
|
// https://docs.astro.build/core-concepts/astro-components/
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
import * as Component from '@example/my-component';
|
import * as Component from "@example/my-component";
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ const { type, ...props } = {
|
||||||
...Astro.props,
|
...Astro.props,
|
||||||
} as Props;
|
} as Props;
|
||||||
|
|
||||||
props.type = type || 'button';
|
props.type = type || "button";
|
||||||
---
|
---
|
||||||
|
|
||||||
<button {...props}><slot /></button>
|
<button {...props}><slot /></button>
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,8 @@ const { level, role, ...props } = {
|
||||||
...Astro.props,
|
...Astro.props,
|
||||||
} as Props;
|
} as Props;
|
||||||
|
|
||||||
props.role = role || 'heading';
|
props.role = role || "heading";
|
||||||
props['aria-level'] = level || '1';
|
props["aria-level"] = level || "1";
|
||||||
---
|
---
|
||||||
|
|
||||||
<h {...props}><slot /></h>
|
<h {...props}><slot /></h>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
// fetch all commits for just this page's path
|
// fetch all commits for just this page's path
|
||||||
const path = 'docs/' + Astro.props.path;
|
const path = "docs/" + Astro.props.path;
|
||||||
const url = `https://api.github.com/repos/withastro/astro/commits?path=${path}`;
|
const url = `https://api.github.com/repos/withastro/astro/commits?path=${path}`;
|
||||||
const commitsURL = `https://github.com/withastro/astro/commits/main/${path}`;
|
const commitsURL = `https://github.com/withastro/astro/commits/main/${path}`;
|
||||||
|
|
||||||
|
|
@ -8,16 +8,18 @@ async function getCommits(url) {
|
||||||
try {
|
try {
|
||||||
const token = import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN;
|
const token = import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN;
|
||||||
if (!token) {
|
if (!token) {
|
||||||
throw new Error('Cannot find "SNOWPACK_PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.');
|
throw new Error(
|
||||||
|
'Cannot find "SNOWPACK_PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.'
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const auth = `Basic ${Buffer.from(token, 'binary').toString('base64')}`;
|
const auth = `Basic ${Buffer.from(token, "binary").toString("base64")}`;
|
||||||
|
|
||||||
const res = await fetch(url, {
|
const res = await fetch(url, {
|
||||||
method: 'GET',
|
method: "GET",
|
||||||
headers: {
|
headers: {
|
||||||
Authorization: auth,
|
Authorization: auth,
|
||||||
'User-Agent': 'astro-docs/1.0',
|
"User-Agent": "astro-docs/1.0",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -65,14 +67,22 @@ const additionalContributors = unique.length - recentContributors.length; // lis
|
||||||
{recentContributors.map((item) => (
|
{recentContributors.map((item) => (
|
||||||
<li>
|
<li>
|
||||||
<a href={`https://github.com/${item.login}`}>
|
<a href={`https://github.com/${item.login}`}>
|
||||||
<img alt={`Contributor ${item.login}`} title={`Contributor ${item.login}`} width="64" height="64" src={`https://avatars.githubusercontent.com/u/${item.id}`} />
|
<img
|
||||||
|
alt={`Contributor ${item.login}`}
|
||||||
|
title={`Contributor ${item.login}`}
|
||||||
|
width="64"
|
||||||
|
height="64"
|
||||||
|
src={`https://avatars.githubusercontent.com/u/${item.id}`}
|
||||||
|
/>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
{additionalContributors > 0 && (
|
{additionalContributors > 0 && (
|
||||||
<span>
|
<span>
|
||||||
<a href={commitsURL}>{`and ${additionalContributors} additional contributor${additionalContributors > 1 ? 's' : ''}.`}</a>
|
<a href={commitsURL}>{`and ${additionalContributors} additional contributor${
|
||||||
|
additionalContributors > 1 ? "s" : ""
|
||||||
|
}.`}</a>
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
{unique.length === 0 && <a href={commitsURL}>Contributors</a>}
|
{unique.length === 0 && <a href={commitsURL}>Contributors</a>}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
import AvatarList from './AvatarList.astro';
|
import AvatarList from "./AvatarList.astro";
|
||||||
const { path } = Astro.props;
|
const { path } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import '../styles/theme.css';
|
import "../styles/theme.css";
|
||||||
import '../styles/index.css';
|
import "../styles/index.css";
|
||||||
---
|
---
|
||||||
|
|
||||||
<!-- Global Metadata -->
|
<!-- Global Metadata -->
|
||||||
|
|
@ -15,19 +15,24 @@ import '../styles/index.css';
|
||||||
<!-- Preload Fonts -->
|
<!-- Preload Fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" />
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- Scrollable a11y code helper -->
|
<!-- Scrollable a11y code helper -->
|
||||||
<script src="/make-scrollable-code-focusable.js" is:inline></script>
|
<script src="/make-scrollable-code-focusable.js" is:inline>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
<!-- This is intentionally inlined to avoid FOUC -->
|
<!-- This is intentionally inlined to avoid FOUC -->
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
const root = document.documentElement;
|
const root = document.documentElement;
|
||||||
const theme = localStorage.getItem('theme');
|
const theme = localStorage.getItem("theme");
|
||||||
if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
if (theme === "dark" || (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
|
||||||
root.classList.add('theme-dark');
|
root.classList.add("theme-dark");
|
||||||
} else {
|
} else {
|
||||||
root.classList.remove('theme-dark');
|
root.classList.remove("theme-dark");
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
import { SITE, OPEN_GRAPH } from '../config.ts';
|
import { SITE, OPEN_GRAPH } from "../config.ts";
|
||||||
export interface Props {
|
export interface Props {
|
||||||
content: any;
|
content: any;
|
||||||
site: any;
|
site: any;
|
||||||
|
|
@ -22,14 +22,21 @@ const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
|
||||||
<meta property="og:locale" content={content.ogLocale ?? SITE.defaultLanguage} />
|
<meta property="og:locale" content={content.ogLocale ?? SITE.defaultLanguage} />
|
||||||
<meta property="og:image" content={canonicalImageSrc} />
|
<meta property="og:image" content={canonicalImageSrc} />
|
||||||
<meta property="og:image:alt" content={imageAlt} />
|
<meta property="og:image:alt" content={imageAlt} />
|
||||||
<meta name="description" property="og:description" content={content.description ? content.description : SITE.description} />
|
<meta
|
||||||
|
name="description"
|
||||||
|
property="og:description"
|
||||||
|
content={content.description ? content.description : SITE.description}
|
||||||
|
/>
|
||||||
<meta property="og:site_name" content={SITE.title} />
|
<meta property="og:site_name" content={SITE.title} />
|
||||||
|
|
||||||
<!-- Twitter Tags -->
|
<!-- Twitter Tags -->
|
||||||
<meta name="twitter:card" content="summary_large_image" />
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
<meta name="twitter:site" content={OPEN_GRAPH.twitter} />
|
<meta name="twitter:site" content={OPEN_GRAPH.twitter} />
|
||||||
<meta name="twitter:title" content={formattedContentTitle} />
|
<meta name="twitter:title" content={formattedContentTitle} />
|
||||||
<meta name="twitter:description" content={content.description ? content.description : SITE.description} />
|
<meta
|
||||||
|
name="twitter:description"
|
||||||
|
content={content.description ? content.description : SITE.description}
|
||||||
|
/>
|
||||||
<meta name="twitter:image" content={canonicalImageSrc} />
|
<meta name="twitter:image" content={canonicalImageSrc} />
|
||||||
<meta name="twitter:image:alt" content={imageAlt} />
|
<meta name="twitter:image:alt" content={imageAlt} />
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,14 @@
|
||||||
const { size } = Astro.props;
|
const { size } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<svg class="logo" width={size} height={size} viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg
|
||||||
|
class="logo"
|
||||||
|
width={size}
|
||||||
|
height={size}
|
||||||
|
viewBox="0 0 256 256"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
<style>
|
<style>
|
||||||
#flame {
|
#flame {
|
||||||
fill: var(--theme-text-accent);
|
fill: var(--theme-text-accent);
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
---
|
---
|
||||||
import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages.ts';
|
import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from "../../languages.ts";
|
||||||
import * as CONFIG from '../../config.ts';
|
import * as CONFIG from "../../config.ts";
|
||||||
import AstroLogo from './AstroLogo.astro';
|
import AstroLogo from "./AstroLogo.astro";
|
||||||
import SkipToContent from './SkipToContent.astro';
|
import SkipToContent from "./SkipToContent.astro";
|
||||||
import SidebarToggle from './SidebarToggle.tsx';
|
import SidebarToggle from "./SidebarToggle.tsx";
|
||||||
import LanguageSelect from './LanguageSelect.tsx';
|
import LanguageSelect from "./LanguageSelect.tsx";
|
||||||
import Search from './Search.tsx';
|
import Search from "./Search.tsx";
|
||||||
|
|
||||||
const { currentPage } = Astro.props;
|
const { currentPage } = Astro.props;
|
||||||
const lang = currentPage && getLanguageFromURL(currentPage);
|
const lang = currentPage && getLanguageFromURL(currentPage);
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import { getLanguageFromURL } from '../../languages.ts';
|
import { getLanguageFromURL } from "../../languages.ts";
|
||||||
import { SIDEBAR } from '../../config.ts';
|
import { SIDEBAR } from "../../config.ts";
|
||||||
const { currentPage } = Astro.props;
|
const { currentPage } = Astro.props;
|
||||||
const currentPageMatch = currentPage.slice(1);
|
const currentPageMatch = currentPage.slice(1);
|
||||||
const langCode = getLanguageFromURL(currentPage);
|
const langCode = getLanguageFromURL(currentPage);
|
||||||
|
|
@ -31,7 +31,10 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => {
|
||||||
<ul>
|
<ul>
|
||||||
{section.children.map((child) => (
|
{section.children.map((child) => (
|
||||||
<li class="nav-link">
|
<li class="nav-link">
|
||||||
<a href={`${Astro.site.pathname}${child.link}`} aria-current={`${currentPageMatch === child.link ? 'page' : 'false'}`}>
|
<a
|
||||||
|
href={`${Astro.site.pathname}${child.link}`}
|
||||||
|
aria-current={`${currentPageMatch === child.link ? "page" : "false"}`}
|
||||||
|
>
|
||||||
{child.text}
|
{child.text}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -44,10 +47,10 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => {
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
window.addEventListener('DOMContentLoaded', (event) => {
|
window.addEventListener("DOMContentLoaded", (event) => {
|
||||||
var target = document.querySelector('[aria-current="page"]');
|
var target = document.querySelector('[aria-current="page"]');
|
||||||
if (target && target.offsetTop > window.innerHeight - 100) {
|
if (target && target.offsetTop > window.innerHeight - 100) {
|
||||||
document.querySelector('.nav-groups').scrollTop = target.offsetTop;
|
document.querySelector(".nav-groups").scrollTop = target.offsetTop;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -100,13 +103,13 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => {
|
||||||
background-color: var(--theme-bg-hover);
|
background-color: var(--theme-bg-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link a[aria-current='page'] {
|
.nav-link a[aria-current="page"] {
|
||||||
color: var(--theme-text-accent);
|
color: var(--theme-text-accent);
|
||||||
background-color: var(--theme-bg-accent);
|
background-color: var(--theme-bg-accent);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(:root.theme-dark) .nav-link a[aria-current='page'] {
|
:global(:root.theme-dark) .nav-link a[aria-current="page"] {
|
||||||
color: hsla(var(--color-base-white), 100%, 1);
|
color: hsla(var(--color-base-white), 100%, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import MoreMenu from '../RightSidebar/MoreMenu.astro';
|
import MoreMenu from "../RightSidebar/MoreMenu.astro";
|
||||||
import TableOfContents from '../RightSidebar/TableOfContents.tsx';
|
import TableOfContents from "../RightSidebar/TableOfContents.tsx";
|
||||||
|
|
||||||
const { content, githubEditUrl } = Astro.props;
|
const { content, githubEditUrl } = Astro.props;
|
||||||
const title = content.title;
|
const title = content.title;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import ThemeToggleButton from './ThemeToggleButton.tsx';
|
import ThemeToggleButton from "./ThemeToggleButton.tsx";
|
||||||
import * as CONFIG from '../../config';
|
import * as CONFIG from "../../config";
|
||||||
const { editHref } = Astro.props;
|
const { editHref } = Astro.props;
|
||||||
const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref;
|
const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref;
|
||||||
---
|
---
|
||||||
|
|
@ -25,7 +25,7 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref;
|
||||||
<path
|
<path
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"
|
d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"
|
||||||
></path>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<span>Edit this page</span>
|
<span>Edit this page</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -49,7 +49,7 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref;
|
||||||
<path
|
<path
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
|
d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
|
||||||
></path>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<span>Join our community</span>
|
<span>Join our community</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import TableOfContents from './TableOfContents.tsx';
|
import TableOfContents from "./TableOfContents.tsx";
|
||||||
import MoreMenu from './MoreMenu.astro';
|
import MoreMenu from "./MoreMenu.astro";
|
||||||
const { content, githubEditUrl } = Astro.props;
|
const { content, githubEditUrl } = Astro.props;
|
||||||
const headers = content.astro.headers;
|
const headers = content.astro.headers;
|
||||||
---
|
---
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,20 @@
|
||||||
---
|
---
|
||||||
import HeadCommon from '../components/HeadCommon.astro';
|
import HeadCommon from "../components/HeadCommon.astro";
|
||||||
import HeadSEO from '../components/HeadSEO.astro';
|
import HeadSEO from "../components/HeadSEO.astro";
|
||||||
import Header from '../components/Header/Header.astro';
|
import Header from "../components/Header/Header.astro";
|
||||||
import Footer from '../components/Footer/Footer.astro';
|
import Footer from "../components/Footer/Footer.astro";
|
||||||
import PageContent from '../components/PageContent/PageContent.astro';
|
import PageContent from "../components/PageContent/PageContent.astro";
|
||||||
import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
|
import LeftSidebar from "../components/LeftSidebar/LeftSidebar.astro";
|
||||||
import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
|
import RightSidebar from "../components/RightSidebar/RightSidebar.astro";
|
||||||
import * as CONFIG from '../config';
|
import * as CONFIG from "../config";
|
||||||
|
|
||||||
const { content = {} } = Astro.props;
|
const { content = {} } = Astro.props;
|
||||||
const currentPage = new URL(Astro.request.url).pathname;
|
const currentPage = new URL(Astro.request.url).pathname;
|
||||||
const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
|
const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`;
|
||||||
const githubEditUrl = CONFIG.GITHUB_EDIT_URL && CONFIG.GITHUB_EDIT_URL + currentFile;
|
const githubEditUrl = CONFIG.GITHUB_EDIT_URL && CONFIG.GITHUB_EDIT_URL + currentFile;
|
||||||
---
|
---
|
||||||
|
|
||||||
<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
|
<html dir={content.dir ?? "ltr"} lang={content.lang ?? "en-us"} class="initial">
|
||||||
<head>
|
<head>
|
||||||
<HeadCommon />
|
<HeadCommon />
|
||||||
<HeadSEO {content} canonicalURL={Astro.canonicalURL} />
|
<HeadSEO {content} canonicalURL={Astro.canonicalURL} />
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,8 @@ console.log({ SSR, PUBLIC_SOME_KEY });
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Hello, Environment Variables!</h1>
|
<h1>Hello, Environment Variables!</h1>
|
||||||
<script src="/src/scripts/client.ts"></script>
|
<script src="/src/scripts/client.ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
// Component Imports
|
// Component Imports
|
||||||
import Counter from '../components/Counter.astro';
|
import Counter from "../components/Counter.astro";
|
||||||
|
|
||||||
// Full Astro Component Syntax:
|
// Full Astro Component Syntax:
|
||||||
// https://docs.astro.build/core-concepts/astro-components/
|
// https://docs.astro.build/core-concepts/astro-components/
|
||||||
|
|
@ -24,7 +24,7 @@ import Counter from '../components/Counter.astro';
|
||||||
|
|
||||||
<!-- Load AlpineJS on the page -->
|
<!-- Load AlpineJS on the page -->
|
||||||
<script>
|
<script>
|
||||||
import Alpine from 'alpinejs';
|
import Alpine from "alpinejs";
|
||||||
window.Alpine = Alpine;
|
window.Alpine = Alpine;
|
||||||
Alpine.start();
|
Alpine.start();
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,58 +1,106 @@
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quam arcu, rhoncus et dui at, volutpat viverra augue. Suspendisse placerat libero tellus, ut consequat ligula
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quam arcu, rhoncus et dui at,
|
||||||
rutrum id. Vestibulum lectus libero, viverra in lacus eget, porttitor tincidunt leo. Integer sit amet turpis et felis fringilla lacinia in id nibh. Proin vitae dapibus odio.
|
volutpat viverra augue. Suspendisse placerat libero tellus, ut consequat ligula rutrum id.
|
||||||
Mauris ornare eget urna id volutpat. Duis tellus nisi, hendrerit id sodales in, rutrum a quam. Proin tempor velit turpis, et tempor lacus sagittis in. Sed congue mauris quis nibh
|
Vestibulum lectus libero, viverra in lacus eget, porttitor tincidunt leo. Integer sit amet turpis
|
||||||
posuere, nec semper lacus auctor. Morbi sit amet enim sit amet arcu ullamcorper sollicitudin. Donec dignissim posuere tincidunt. Donec ultrices quam nec orci venenatis suscipit.
|
et felis fringilla lacinia in id nibh. Proin vitae dapibus odio. Mauris ornare eget urna id
|
||||||
Maecenas sapien quam, pretium sit amet ullamcorper at, vulputate sit amet urna. Suspendisse potenti. Integer in sapien turpis. Nulla accumsan viverra diam, quis convallis magna
|
volutpat. Duis tellus nisi, hendrerit id sodales in, rutrum a quam. Proin tempor velit turpis, et
|
||||||
finibus eget. Integer sed eros bibendum, consequat velit sit amet, tincidunt orci. Mauris varius id metus in fringilla. Vestibulum dignissim massa eget erat luctus, ac congue
|
tempor lacus sagittis in. Sed congue mauris quis nibh posuere, nec semper lacus auctor. Morbi sit
|
||||||
mauris pellentesque. In et tempor dolor. Cras blandit congue lorem at facilisis. Aenean vel lacinia quam. Pellentesque luctus metus ut scelerisque efficitur. Mauris laoreet
|
amet enim sit amet arcu ullamcorper sollicitudin. Donec dignissim posuere tincidunt. Donec
|
||||||
sodales libero eget luctus. Proin at congue dui, a cursus risus. Pellentesque lorem sem, rhoncus fermentum arcu ut, euismod fermentum ligula. Nullam eu orci posuere, laoreet leo
|
ultrices quam nec orci venenatis suscipit. Maecenas sapien quam, pretium sit amet ullamcorper at,
|
||||||
in, commodo dolor. Fusce at felis elementum, commodo justo at, placerat justo. Nam feugiat scelerisque arcu, ut fermentum tellus elementum in. Sed ut vulputate ante. Morbi cursus
|
vulputate sit amet urna. Suspendisse potenti. Integer in sapien turpis. Nulla accumsan viverra
|
||||||
arcu quis odio convallis egestas. Donec vulputate vestibulum dolor eget tristique. Nullam tempor semper augue, vitae lobortis neque tempor ac. Pellentesque massa leo, congue id
|
diam, quis convallis magna finibus eget. Integer sed eros bibendum, consequat velit sit amet,
|
||||||
ligula auctor, sollicitudin pharetra lorem. Curabitur a lacus porttitor, venenatis est quis, mattis velit. Fusce hendrerit lobortis mi ac efficitur. Mauris ornare, lorem sed
|
tincidunt orci. Mauris varius id metus in fringilla. Vestibulum dignissim massa eget erat luctus,
|
||||||
varius faucibus, nisi dui pretium urna, sit amet lacinia nibh ligula in ipsum. Phasellus gravida, metus eget ornare ultrices, dolor ipsum consectetur erat, ac aliquet eros metus
|
ac congue mauris pellentesque. In et tempor dolor. Cras blandit congue lorem at facilisis. Aenean
|
||||||
sed lectus. Nullam eleifend posuere rhoncus. Curabitur semper ligula vel ante posuere, at blandit orci accumsan. Vivamus accumsan metus in lorem laoreet, a luctus arcu tempus.
|
vel lacinia quam. Pellentesque luctus metus ut scelerisque efficitur. Mauris laoreet sodales
|
||||||
Donec posuere sollicitudin nulla at vulputate. Nulla condimentum imperdiet purus, et lobortis ligula iaculis in. Donec suscipit viverra neque, ut elementum eros lacinia ut. Fusce
|
libero eget luctus. Proin at congue dui, a cursus risus. Pellentesque lorem sem, rhoncus fermentum
|
||||||
at odio enim. Donec rutrum lectus sit amet est auctor, ac rhoncus lorem imperdiet. Curabitur commodo ex est, non tempus massa pulvinar nec. Sed fermentum, lectus eget ultricies
|
arcu ut, euismod fermentum ligula. Nullam eu orci posuere, laoreet leo in, commodo dolor. Fusce at
|
||||||
luctus, enim sem sodales quam, sed laoreet tortor sem feugiat nisi. Morbi molestie vehicula viverra. Integer accumsan mi in orci ultrices posuere. Integer mi quam, faucibus et
|
felis elementum, commodo justo at, placerat justo. Nam feugiat scelerisque arcu, ut fermentum
|
||||||
aliquet imperdiet, ornare ac ex. Nunc mattis molestie nisi, eu venenatis nibh vehicula at. Aliquam ut elit consectetur, finibus lorem sed, condimentum sapien. Praesent fermentum
|
tellus elementum in. Sed ut vulputate ante. Morbi cursus arcu quis odio convallis egestas. Donec
|
||||||
iaculis orci, vitae tincidunt est viverra nec. Morbi semper turpis sed lectus ornare tristique. Sed congue dui ex. Maecenas orci ligula, imperdiet sit amet accumsan et, finibus a
|
vulputate vestibulum dolor eget tristique. Nullam tempor semper augue, vitae lobortis neque tempor
|
||||||
velit. Ut vitae blandit eros. Nam gravida nec ipsum non volutpat. Integer quam metus, porttitor id ante sed, rutrum porta quam. Aenean at mattis ante. Morbi id libero eget risus
|
ac. Pellentesque massa leo, congue id ligula auctor, sollicitudin pharetra lorem. Curabitur a
|
||||||
sagittis gravida. Proin consequat sapien a dignissim posuere. Ut luctus sed metus ut elementum. Mauris tincidunt condimentum risus at bibendum. Aenean a sapien justo. Morbi vel
|
lacus porttitor, venenatis est quis, mattis velit. Fusce hendrerit lobortis mi ac efficitur.
|
||||||
neque in eros venenatis scelerisque vitae nec justo. Vestibulum lacinia, dui eu sollicitudin ornare, est elit vestibulum arcu, nec ultrices augue turpis in massa. Duis commodo
|
Mauris ornare, lorem sed varius faucibus, nisi dui pretium urna, sit amet lacinia nibh ligula in
|
||||||
lectus sed est posuere, et mollis nisi dapibus. Sed id ultrices arcu. Praesent tempor sodales aliquet. Donec suscipit ipsum eu odio cursus, quis sodales metus sodales. Nunc
|
ipsum. Phasellus gravida, metus eget ornare ultrices, dolor ipsum consectetur erat, ac aliquet
|
||||||
vestibulum massa at felis ullamcorper cursus. Pellentesque facilisis ante ut lectus vulputate vestibulum. Nullam pharetra felis ac lacus sodales, vel suscipit metus faucibus.
|
eros metus sed lectus. Nullam eleifend posuere rhoncus. Curabitur semper ligula vel ante posuere,
|
||||||
Donec facilisis imperdiet risus, in volutpat odio tincidunt a. Aliquam vitae leo lorem. Proin scelerisque efficitur velit, vel cursus ipsum accumsan id. Morbi nibh nulla, pretium
|
at blandit orci accumsan. Vivamus accumsan metus in lorem laoreet, a luctus arcu tempus. Donec
|
||||||
quis venenatis et, pharetra et sapien. Cras lobortis, massa sit amet blandit pulvinar, mi magna condimentum ex, quis commodo ipsum est quis metus. Maecenas pulvinar, leo sit amet
|
posuere sollicitudin nulla at vulputate. Nulla condimentum imperdiet purus, et lobortis ligula
|
||||||
congue pulvinar, neque magna ultrices mi, et rhoncus massa sapien quis libero. Etiam a nunc et ipsum faucibus pretium. Nulla facilisi. Nunc nec dolor velit. In semper semper mi
|
iaculis in. Donec suscipit viverra neque, ut elementum eros lacinia ut. Fusce at odio enim. Donec
|
||||||
non condimentum. Pellentesque vehicula volutpat odio, a semper sem porta a. In sit amet lectus rutrum, sollicitudin augue auctor, maximus quam. Mauris congue, nisl non fermentum
|
rutrum lectus sit amet est auctor, ac rhoncus lorem imperdiet. Curabitur commodo ex est, non
|
||||||
iaculis, leo erat interdum lorem, quis bibendum arcu eros et elit. Fusce tortor ante, gravida a arcu in, lacinia finibus ante. Phasellus facilisis lectus vitae sapien feugiat
|
tempus massa pulvinar nec. Sed fermentum, lectus eget ultricies luctus, enim sem sodales quam, sed
|
||||||
laoreet. Curabitur ultricies libero sit amet condimentum suscipit. Duis at vestibulum mi. Suspendisse at neque augue. Duis ornare a mauris id efficitur. Suspendisse in dui nec
|
laoreet tortor sem feugiat nisi. Morbi molestie vehicula viverra. Integer accumsan mi in orci
|
||||||
dolor dignissim venenatis. Curabitur a magna turpis. Aliquam at commodo tellus. In id sem interdum, suscipit felis at, mattis velit. Proin accumsan sodales felis a lacinia.
|
ultrices posuere. Integer mi quam, faucibus et aliquet imperdiet, ornare ac ex. Nunc mattis
|
||||||
Curabitur at magna a massa varius maximus. Vestibulum in auctor ante. Donec aliquam tortor sed nulla rutrum, et egestas mi efficitur. Sed viverra quam tellus, quis vulputate
|
molestie nisi, eu venenatis nibh vehicula at. Aliquam ut elit consectetur, finibus lorem sed,
|
||||||
felis ultrices sed. Mauris sagittis, neque quis laoreet gravida, nisi est ultrices mi, at tempus nunc justo non dui. Suspendisse porttitor tortor nulla, eget luctus quam finibus
|
condimentum sapien. Praesent fermentum iaculis orci, vitae tincidunt est viverra nec. Morbi semper
|
||||||
id. Proin sodales eros mollis tellus euismod luctus a eu mi. Quisque consectetur iaculis nibh, at mollis tellus volutpat eu. Aenean a nulla vel lectus rhoncus aliquam. Donec
|
turpis sed lectus ornare tristique. Sed congue dui ex. Maecenas orci ligula, imperdiet sit amet
|
||||||
vitae lacinia neque. Donec non lectus eget sem finibus ultrices vel nec felis. Proin fringilla mi a leo rhoncus aliquam sit amet quis augue. Duis congue ligula at est suscipit
|
accumsan et, finibus a velit. Ut vitae blandit eros. Nam gravida nec ipsum non volutpat. Integer
|
||||||
fringilla. Proin aliquam erat ut consequat dapibus. Suspendisse non nisi orci. Donec ac erat vel libero egestas laoreet. Nullam felis odio, tincidunt eget eleifend a, porttitor
|
quam metus, porttitor id ante sed, rutrum porta quam. Aenean at mattis ante. Morbi id libero eget
|
||||||
eu nisi. Suspendisse tristique eros at dolor scelerisque hendrerit. Etiam id dignissim lectus. Fusce lacinia metus eu risus placerat, et eleifend nunc ultrices. Ut gravida a dui
|
risus sagittis gravida. Proin consequat sapien a dignissim posuere. Ut luctus sed metus ut
|
||||||
sed volutpat. Sed semper quis erat sed ornare. Pellentesque sapien sem, fermentum vel nunc at, auctor posuere nisl. Maecenas aliquet lobortis leo. Vivamus tellus urna, dignissim
|
elementum. Mauris tincidunt condimentum risus at bibendum. Aenean a sapien justo. Morbi vel neque
|
||||||
consectetur sapien vitae, hendrerit varius sem. Nunc dictum tristique fermentum. Duis eu suscipit odio. Curabitur quis egestas neque. Fusce eu fringilla orci, vitae euismod
|
in eros venenatis scelerisque vitae nec justo. Vestibulum lacinia, dui eu sollicitudin ornare, est
|
||||||
sapien. Donec sit amet iaculis urna. Phasellus maximus nisl in libero bibendum volutpat. Nulla at vehicula lorem. Phasellus varius, elit ac suscipit pretium, turpis ipsum
|
elit vestibulum arcu, nec ultrices augue turpis in massa. Duis commodo lectus sed est posuere, et
|
||||||
porttitor lectus, vitae ullamcorper orci velit ut ligula. Proin mollis, orci vel commodo auctor, sapien ipsum vulputate enim, sit amet aliquam nulla sapien ut sapien. Proin
|
mollis nisi dapibus. Sed id ultrices arcu. Praesent tempor sodales aliquet. Donec suscipit ipsum
|
||||||
tincidunt ex non massa aliquet, quis aliquam nulla egestas. Maecenas mollis turpis dapibus, dignissim lectus tincidunt, egestas ligula. Suspendisse in lobortis purus. Sed tellus
|
eu odio cursus, quis sodales metus sodales. Nunc vestibulum massa at felis ullamcorper cursus.
|
||||||
tellus, mollis eget tempor sed, interdum ut lectus. Nulla sed ex efficitur, porta dui cursus, tristique elit. Maecenas tincidunt tortor vitae massa laoreet ultricies. Mauris ac
|
Pellentesque facilisis ante ut lectus vulputate vestibulum. Nullam pharetra felis ac lacus
|
||||||
elit vitae orci eleifend ornare non eu ligula. Curabitur venenatis nulla ut neque tristique, non tincidunt justo pretium. Suspendisse mattis semper dui, eget vestibulum risus
|
sodales, vel suscipit metus faucibus. Donec facilisis imperdiet risus, in volutpat odio tincidunt
|
||||||
elementum sed. In consequat nisi sit amet nulla euismod, at convallis tortor tincidunt. Aliquam hendrerit venenatis risus in interdum. Duis ullamcorper imperdiet elit sit amet
|
a. Aliquam vitae leo lorem. Proin scelerisque efficitur velit, vel cursus ipsum accumsan id. Morbi
|
||||||
blandit. Mauris placerat lacinia velit id pharetra. Nam nec iaculis dui. Etiam odio mi, fringilla in rutrum in, viverra quis tellus. Aliquam egestas mauris id nisi facilisis, in
|
nibh nulla, pretium quis venenatis et, pharetra et sapien. Cras lobortis, massa sit amet blandit
|
||||||
laoreet nibh malesuada. Ut eu dui laoreet, venenatis tellus ac, feugiat mauris. Nunc in velit laoreet, venenatis tellus quis, blandit dolor. Nulla ultrices et neque id placerat.
|
pulvinar, mi magna condimentum ex, quis commodo ipsum est quis metus. Maecenas pulvinar, leo sit
|
||||||
Nulla eu interdum nulla. Aliquam molestie enim quis rutrum finibus. Nulla bibendum orci vel scelerisque posuere. Praesent quis magna molestie, luctus tortor tincidunt, gravida
|
amet congue pulvinar, neque magna ultrices mi, et rhoncus massa sapien quis libero. Etiam a nunc
|
||||||
neque. Quisque et ligula eget magna viverra interdum at a sapien. Mauris ornare efficitur nunc sed vulputate. Praesent laoreet mollis tincidunt. Vestibulum id arcu vulputate,
|
et ipsum faucibus pretium. Nulla facilisi. Nunc nec dolor velit. In semper semper mi non
|
||||||
eleifend enim vel, accumsan turpis. Morbi faucibus convallis tellus, semper laoreet justo lacinia nec. Sed sodales ligula consectetur dui rhoncus, et convallis metus accumsan.
|
condimentum. Pellentesque vehicula volutpat odio, a semper sem porta a. In sit amet lectus rutrum,
|
||||||
Sed ullamcorper non ex sit amet ultricies. Donec finibus nulla nec blandit porttitor. Etiam aliquam quis leo a imperdiet. Cras at lobortis est. In convallis semper enim, ac porta
|
sollicitudin augue auctor, maximus quam. Mauris congue, nisl non fermentum iaculis, leo erat
|
||||||
ligula fringilla at. Donec augue est, facilisis et odio sit amet, viverra ullamcorper nisl. Ut porta velit nec sem lacinia, sit amet mollis magna auctor. Nulla lobortis lacinia
|
interdum lorem, quis bibendum arcu eros et elit. Fusce tortor ante, gravida a arcu in, lacinia
|
||||||
mauris nec sagittis. Suspendisse rutrum ex vel nisi interdum hendrerit et ut purus. Sed consectetur sodales nibh eget tempus. Aenean egestas luctus viverra. Integer fermentum
|
finibus ante. Phasellus facilisis lectus vitae sapien feugiat laoreet. Curabitur ultricies libero
|
||||||
tincidunt tellus, nec rhoncus velit hendrerit vitae. Proin quis neque porttitor, scelerisque risus gravida, volutpat sem. Fusce nec ex rhoncus, tempor libero nec, pellentesque
|
sit amet condimentum suscipit. Duis at vestibulum mi. Suspendisse at neque augue. Duis ornare a
|
||||||
ex. Integer quis iaculis purus. Nullam vitae imperdiet orci. Sed sit amet eros condimentum, scelerisque turpis facilisis, dignissim ante. Proin quis tristique lacus, sed sagittis
|
mauris id efficitur. Suspendisse in dui nec dolor dignissim venenatis. Curabitur a magna turpis.
|
||||||
nisl. Cras pharetra ultrices purus, sed ullamcorper nisi fringilla eu. Praesent risus turpis, auctor in fringilla a, fringilla eu dolor. Phasellus auctor tristique enim, eleifend
|
Aliquam at commodo tellus. In id sem interdum, suscipit felis at, mattis velit. Proin accumsan
|
||||||
molestie diam venenatis ut. Mauris dapibus, enim eget pharetra semper, nulla dui porttitor mi, auctor hendrerit augue nulla quis urna. Aliquam in cursus justo.
|
sodales felis a lacinia. Curabitur at magna a massa varius maximus. Vestibulum in auctor ante.
|
||||||
|
Donec aliquam tortor sed nulla rutrum, et egestas mi efficitur. Sed viverra quam tellus, quis
|
||||||
|
vulputate felis ultrices sed. Mauris sagittis, neque quis laoreet gravida, nisi est ultrices mi,
|
||||||
|
at tempus nunc justo non dui. Suspendisse porttitor tortor nulla, eget luctus quam finibus id.
|
||||||
|
Proin sodales eros mollis tellus euismod luctus a eu mi. Quisque consectetur iaculis nibh, at
|
||||||
|
mollis tellus volutpat eu. Aenean a nulla vel lectus rhoncus aliquam. Donec vitae lacinia neque.
|
||||||
|
Donec non lectus eget sem finibus ultrices vel nec felis. Proin fringilla mi a leo rhoncus aliquam
|
||||||
|
sit amet quis augue. Duis congue ligula at est suscipit fringilla. Proin aliquam erat ut consequat
|
||||||
|
dapibus. Suspendisse non nisi orci. Donec ac erat vel libero egestas laoreet. Nullam felis odio,
|
||||||
|
tincidunt eget eleifend a, porttitor eu nisi. Suspendisse tristique eros at dolor scelerisque
|
||||||
|
hendrerit. Etiam id dignissim lectus. Fusce lacinia metus eu risus placerat, et eleifend nunc
|
||||||
|
ultrices. Ut gravida a dui sed volutpat. Sed semper quis erat sed ornare. Pellentesque sapien sem,
|
||||||
|
fermentum vel nunc at, auctor posuere nisl. Maecenas aliquet lobortis leo. Vivamus tellus urna,
|
||||||
|
dignissim consectetur sapien vitae, hendrerit varius sem. Nunc dictum tristique fermentum. Duis eu
|
||||||
|
suscipit odio. Curabitur quis egestas neque. Fusce eu fringilla orci, vitae euismod sapien. Donec
|
||||||
|
sit amet iaculis urna. Phasellus maximus nisl in libero bibendum volutpat. Nulla at vehicula
|
||||||
|
lorem. Phasellus varius, elit ac suscipit pretium, turpis ipsum porttitor lectus, vitae
|
||||||
|
ullamcorper orci velit ut ligula. Proin mollis, orci vel commodo auctor, sapien ipsum vulputate
|
||||||
|
enim, sit amet aliquam nulla sapien ut sapien. Proin tincidunt ex non massa aliquet, quis aliquam
|
||||||
|
nulla egestas. Maecenas mollis turpis dapibus, dignissim lectus tincidunt, egestas ligula.
|
||||||
|
Suspendisse in lobortis purus. Sed tellus tellus, mollis eget tempor sed, interdum ut lectus.
|
||||||
|
Nulla sed ex efficitur, porta dui cursus, tristique elit. Maecenas tincidunt tortor vitae massa
|
||||||
|
laoreet ultricies. Mauris ac elit vitae orci eleifend ornare non eu ligula. Curabitur venenatis
|
||||||
|
nulla ut neque tristique, non tincidunt justo pretium. Suspendisse mattis semper dui, eget
|
||||||
|
vestibulum risus elementum sed. In consequat nisi sit amet nulla euismod, at convallis tortor
|
||||||
|
tincidunt. Aliquam hendrerit venenatis risus in interdum. Duis ullamcorper imperdiet elit sit amet
|
||||||
|
blandit. Mauris placerat lacinia velit id pharetra. Nam nec iaculis dui. Etiam odio mi, fringilla
|
||||||
|
in rutrum in, viverra quis tellus. Aliquam egestas mauris id nisi facilisis, in laoreet nibh
|
||||||
|
malesuada. Ut eu dui laoreet, venenatis tellus ac, feugiat mauris. Nunc in velit laoreet,
|
||||||
|
venenatis tellus quis, blandit dolor. Nulla ultrices et neque id placerat. Nulla eu interdum
|
||||||
|
nulla. Aliquam molestie enim quis rutrum finibus. Nulla bibendum orci vel scelerisque posuere.
|
||||||
|
Praesent quis magna molestie, luctus tortor tincidunt, gravida neque. Quisque et ligula eget magna
|
||||||
|
viverra interdum at a sapien. Mauris ornare efficitur nunc sed vulputate. Praesent laoreet mollis
|
||||||
|
tincidunt. Vestibulum id arcu vulputate, eleifend enim vel, accumsan turpis. Morbi faucibus
|
||||||
|
convallis tellus, semper laoreet justo lacinia nec. Sed sodales ligula consectetur dui rhoncus, et
|
||||||
|
convallis metus accumsan. Sed ullamcorper non ex sit amet ultricies. Donec finibus nulla nec
|
||||||
|
blandit porttitor. Etiam aliquam quis leo a imperdiet. Cras at lobortis est. In convallis semper
|
||||||
|
enim, ac porta ligula fringilla at. Donec augue est, facilisis et odio sit amet, viverra
|
||||||
|
ullamcorper nisl. Ut porta velit nec sem lacinia, sit amet mollis magna auctor. Nulla lobortis
|
||||||
|
lacinia mauris nec sagittis. Suspendisse rutrum ex vel nisi interdum hendrerit et ut purus. Sed
|
||||||
|
consectetur sodales nibh eget tempus. Aenean egestas luctus viverra. Integer fermentum tincidunt
|
||||||
|
tellus, nec rhoncus velit hendrerit vitae. Proin quis neque porttitor, scelerisque risus gravida,
|
||||||
|
volutpat sem. Fusce nec ex rhoncus, tempor libero nec, pellentesque ex. Integer quis iaculis
|
||||||
|
purus. Nullam vitae imperdiet orci. Sed sit amet eros condimentum, scelerisque turpis facilisis,
|
||||||
|
dignissim ante. Proin quis tristique lacus, sed sagittis nisl. Cras pharetra ultrices purus, sed
|
||||||
|
ullamcorper nisi fringilla eu. Praesent risus turpis, auctor in fringilla a, fringilla eu dolor.
|
||||||
|
Phasellus auctor tristique enim, eleifend molestie diam venenatis ut. Mauris dapibus, enim eget
|
||||||
|
pharetra semper, nulla dui porttitor mi, auctor hendrerit augue nulla quis urna. Aliquam in cursus
|
||||||
|
justo.
|
||||||
</p>
|
</p>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
import Lorem from '../components/Lorem.astro';
|
import Lorem from "../components/Lorem.astro";
|
||||||
import { CalcAdd } from '../components/calc-add.js';
|
import { CalcAdd } from "../components/calc-add.js";
|
||||||
import { MyCounter } from '../components/my-counter.js';
|
import { MyCounter } from "../components/my-counter.js";
|
||||||
---
|
---
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
@ -12,8 +12,8 @@ import { MyCounter } from '../components/my-counter.js';
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Test app</h1>
|
<h1>Test app</h1>
|
||||||
<MyCounter client:load></MyCounter>
|
<MyCounter client:load />
|
||||||
<Lorem />
|
<Lorem />
|
||||||
<CalcAdd num={33}></CalcAdd>
|
<CalcAdd num={33} />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
---
|
---
|
||||||
// Style Imports
|
// Style Imports
|
||||||
import '../styles/global.css';
|
import "../styles/global.css";
|
||||||
// Component Imports
|
// Component Imports
|
||||||
import { A, B as Renamed } from '../components';
|
import { A, B as Renamed } from "../components";
|
||||||
import * as react from '../components/ReactCounter.jsx';
|
import * as react from "../components/ReactCounter.jsx";
|
||||||
import { PreactCounter } from '../components/PreactCounter.tsx';
|
import { PreactCounter } from "../components/PreactCounter.tsx";
|
||||||
import PreactSFC from '../components/PreactSFC.tsx';
|
import PreactSFC from "../components/PreactSFC.tsx";
|
||||||
import SolidCounter from '../components/SolidCounter.tsx';
|
import SolidCounter from "../components/SolidCounter.tsx";
|
||||||
import VueCounter from '../components/VueCounter.vue';
|
import VueCounter from "../components/VueCounter.vue";
|
||||||
import SvelteCounter from '../components/SvelteCounter.svelte';
|
import SvelteCounter from "../components/SvelteCounter.svelte";
|
||||||
|
|
||||||
// Full Astro Component Syntax:
|
// Full Astro Component Syntax:
|
||||||
// https://docs.astro.build/core-concepts/astro-components/
|
// https://docs.astro.build/core-concepts/astro-components/
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
// Component Imports
|
// Component Imports
|
||||||
import Counter from '../components/Counter.tsx';
|
import Counter from "../components/Counter.tsx";
|
||||||
|
|
||||||
// Full Astro Component Syntax:
|
// Full Astro Component Syntax:
|
||||||
// https://docs.astro.build/core-concepts/astro-components/
|
// https://docs.astro.build/core-concepts/astro-components/
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
// Component Imports
|
// Component Imports
|
||||||
import Counter from '../components/Counter.jsx';
|
import Counter from "../components/Counter.jsx";
|
||||||
const someProps = {
|
const someProps = {
|
||||||
count: 0,
|
count: 0,
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
import Counter from '../components/Counter.jsx';
|
import Counter from "../components/Counter.jsx";
|
||||||
---
|
---
|
||||||
|
|
||||||
<html>
|
<html>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
// Component Imports
|
// Component Imports
|
||||||
import Counter from '../components/Counter.svelte';
|
import Counter from "../components/Counter.svelte";
|
||||||
|
|
||||||
// Full Astro Component Syntax:
|
// Full Astro Component Syntax:
|
||||||
// https://docs.astro.build/core-concepts/astro-components/
|
// https://docs.astro.build/core-concepts/astro-components/
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
// Component Imports
|
// Component Imports
|
||||||
import Counter from '../components/Counter.vue';
|
import Counter from "../components/Counter.vue";
|
||||||
|
|
||||||
// Full Astro Component Syntax:
|
// Full Astro Component Syntax:
|
||||||
// https://docs.astro.build/core-concepts/astro-components/
|
// https://docs.astro.build/core-concepts/astro-components/
|
||||||
|
|
|
||||||
|
|
@ -1,66 +1,115 @@
|
||||||
---
|
---
|
||||||
//hey
|
//hey
|
||||||
---
|
---
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
p {
|
p {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quam arcu, rhoncus et dui at, volutpat viverra augue. Suspendisse placerat libero tellus, ut consequat ligula
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quam arcu, rhoncus et dui at,
|
||||||
rutrum id. Vestibulum lectus libero, viverra in lacus eget, porttitor tincidunt leo. Integer sit amet turpis et felis fringilla lacinia in id nibh. Proin vitae dapibus odio.
|
volutpat viverra augue. Suspendisse placerat libero tellus, ut consequat ligula rutrum id.
|
||||||
Mauris ornare eget urna id volutpat. Duis tellus nisi, hendrerit id sodales in, rutrum a quam. Proin tempor velit turpis, et tempor lacus sagittis in. Sed congue mauris quis nibh
|
Vestibulum lectus libero, viverra in lacus eget, porttitor tincidunt leo. Integer sit amet turpis
|
||||||
posuere, nec semper lacus auctor. Morbi sit amet enim sit amet arcu ullamcorper sollicitudin. Donec dignissim posuere tincidunt. Donec ultrices quam nec orci venenatis suscipit.
|
et felis fringilla lacinia in id nibh. Proin vitae dapibus odio. Mauris ornare eget urna id
|
||||||
Maecenas sapien quam, pretium sit amet ullamcorper at, vulputate sit amet urna. Suspendisse potenti. Integer in sapien turpis. Nulla accumsan viverra diam, quis convallis magna
|
volutpat. Duis tellus nisi, hendrerit id sodales in, rutrum a quam. Proin tempor velit turpis, et
|
||||||
finibus eget. Integer sed eros bibendum, consequat velit sit amet, tincidunt orci. Mauris varius id metus in fringilla. Vestibulum dignissim massa eget erat luctus, ac congue
|
tempor lacus sagittis in. Sed congue mauris quis nibh posuere, nec semper lacus auctor. Morbi sit
|
||||||
mauris pellentesque. In et tempor dolor. Cras blandit congue lorem at facilisis. Aenean vel lacinia quam. Pellentesque luctus metus ut scelerisque efficitur. Mauris laoreet
|
amet enim sit amet arcu ullamcorper sollicitudin. Donec dignissim posuere tincidunt. Donec
|
||||||
sodales libero eget luctus. Proin at congue dui, a cursus risus. Pellentesque lorem sem, rhoncus fermentum arcu ut, euismod fermentum ligula. Nullam eu orci posuere, laoreet leo
|
ultrices quam nec orci venenatis suscipit. Maecenas sapien quam, pretium sit amet ullamcorper at,
|
||||||
in, commodo dolor. Fusce at felis elementum, commodo justo at, placerat justo. Nam feugiat scelerisque arcu, ut fermentum tellus elementum in. Sed ut vulputate ante. Morbi cursus
|
vulputate sit amet urna. Suspendisse potenti. Integer in sapien turpis. Nulla accumsan viverra
|
||||||
arcu quis odio convallis egestas. Donec vulputate vestibulum dolor eget tristique. Nullam tempor semper augue, vitae lobortis neque tempor ac. Pellentesque massa leo, congue id
|
diam, quis convallis magna finibus eget. Integer sed eros bibendum, consequat velit sit amet,
|
||||||
ligula auctor, sollicitudin pharetra lorem. Curabitur a lacus porttitor, venenatis est quis, mattis velit. Fusce hendrerit lobortis mi ac efficitur. Mauris ornare, lorem sed
|
tincidunt orci. Mauris varius id metus in fringilla. Vestibulum dignissim massa eget erat luctus,
|
||||||
varius faucibus, nisi dui pretium urna, sit amet lacinia nibh ligula in ipsum. Phasellus gravida, metus eget ornare ultrices, dolor ipsum consectetur erat, ac aliquet eros metus
|
ac congue mauris pellentesque. In et tempor dolor. Cras blandit congue lorem at facilisis. Aenean
|
||||||
sed lectus. Nullam eleifend posuere rhoncus. Curabitur semper ligula vel ante posuere, at blandit orci accumsan. Vivamus accumsan metus in lorem laoreet, a luctus arcu tempus.
|
vel lacinia quam. Pellentesque luctus metus ut scelerisque efficitur. Mauris laoreet sodales
|
||||||
Donec posuere sollicitudin nulla at vulputate. Nulla condimentum imperdiet purus, et lobortis ligula iaculis in. Donec suscipit viverra neque, ut elementum eros lacinia ut. Fusce
|
libero eget luctus. Proin at congue dui, a cursus risus. Pellentesque lorem sem, rhoncus fermentum
|
||||||
at odio enim. Donec rutrum lectus sit amet est auctor, ac rhoncus lorem imperdiet. Curabitur commodo ex est, non tempus massa pulvinar nec. Sed fermentum, lectus eget ultricies
|
arcu ut, euismod fermentum ligula. Nullam eu orci posuere, laoreet leo in, commodo dolor. Fusce at
|
||||||
luctus, enim sem sodales quam, sed laoreet tortor sem feugiat nisi. Morbi molestie vehicula viverra. Integer accumsan mi in orci ultrices posuere. Integer mi quam, faucibus et
|
felis elementum, commodo justo at, placerat justo. Nam feugiat scelerisque arcu, ut fermentum
|
||||||
aliquet imperdiet, ornare ac ex. Nunc mattis molestie nisi, eu venenatis nibh vehicula at. Aliquam ut elit consectetur, finibus lorem sed, condimentum sapien. Praesent fermentum
|
tellus elementum in. Sed ut vulputate ante. Morbi cursus arcu quis odio convallis egestas. Donec
|
||||||
iaculis orci, vitae tincidunt est viverra nec. Morbi semper turpis sed lectus ornare tristique. Sed congue dui ex. Maecenas orci ligula, imperdiet sit amet accumsan et, finibus a
|
vulputate vestibulum dolor eget tristique. Nullam tempor semper augue, vitae lobortis neque tempor
|
||||||
velit. Ut vitae blandit eros. Nam gravida nec ipsum non volutpat. Integer quam metus, porttitor id ante sed, rutrum porta quam. Aenean at mattis ante. Morbi id libero eget risus
|
ac. Pellentesque massa leo, congue id ligula auctor, sollicitudin pharetra lorem. Curabitur a
|
||||||
sagittis gravida. Proin consequat sapien a dignissim posuere. Ut luctus sed metus ut elementum. Mauris tincidunt condimentum risus at bibendum. Aenean a sapien justo. Morbi vel
|
lacus porttitor, venenatis est quis, mattis velit. Fusce hendrerit lobortis mi ac efficitur.
|
||||||
neque in eros venenatis scelerisque vitae nec justo. Vestibulum lacinia, dui eu sollicitudin ornare, est elit vestibulum arcu, nec ultrices augue turpis in massa. Duis commodo
|
Mauris ornare, lorem sed varius faucibus, nisi dui pretium urna, sit amet lacinia nibh ligula in
|
||||||
lectus sed est posuere, et mollis nisi dapibus. Sed id ultrices arcu. Praesent tempor sodales aliquet. Donec suscipit ipsum eu odio cursus, quis sodales metus sodales. Nunc
|
ipsum. Phasellus gravida, metus eget ornare ultrices, dolor ipsum consectetur erat, ac aliquet
|
||||||
vestibulum massa at felis ullamcorper cursus. Pellentesque facilisis ante ut lectus vulputate vestibulum. Nullam pharetra felis ac lacus sodales, vel suscipit metus faucibus.
|
eros metus sed lectus. Nullam eleifend posuere rhoncus. Curabitur semper ligula vel ante posuere,
|
||||||
Donec facilisis imperdiet risus, in volutpat odio tincidunt a. Aliquam vitae leo lorem. Proin scelerisque efficitur velit, vel cursus ipsum accumsan id. Morbi nibh nulla, pretium
|
at blandit orci accumsan. Vivamus accumsan metus in lorem laoreet, a luctus arcu tempus. Donec
|
||||||
quis venenatis et, pharetra et sapien. Cras lobortis, massa sit amet blandit pulvinar, mi magna condimentum ex, quis commodo ipsum est quis metus. Maecenas pulvinar, leo sit amet
|
posuere sollicitudin nulla at vulputate. Nulla condimentum imperdiet purus, et lobortis ligula
|
||||||
congue pulvinar, neque magna ultrices mi, et rhoncus massa sapien quis libero. Etiam a nunc et ipsum faucibus pretium. Nulla facilisi. Nunc nec dolor velit. In semper semper mi
|
iaculis in. Donec suscipit viverra neque, ut elementum eros lacinia ut. Fusce at odio enim. Donec
|
||||||
non condimentum. Pellentesque vehicula volutpat odio, a semper sem porta a. In sit amet lectus rutrum, sollicitudin augue auctor, maximus quam. Mauris congue, nisl non fermentum
|
rutrum lectus sit amet est auctor, ac rhoncus lorem imperdiet. Curabitur commodo ex est, non
|
||||||
iaculis, leo erat interdum lorem, quis bibendum arcu eros et elit. Fusce tortor ante, gravida a arcu in, lacinia finibus ante. Phasellus facilisis lectus vitae sapien feugiat
|
tempus massa pulvinar nec. Sed fermentum, lectus eget ultricies luctus, enim sem sodales quam, sed
|
||||||
laoreet. Curabitur ultricies libero sit amet condimentum suscipit. Duis at vestibulum mi. Suspendisse at neque augue. Duis ornare a mauris id efficitur. Suspendisse in dui nec
|
laoreet tortor sem feugiat nisi. Morbi molestie vehicula viverra. Integer accumsan mi in orci
|
||||||
dolor dignissim venenatis. Curabitur a magna turpis. Aliquam at commodo tellus. In id sem interdum, suscipit felis at, mattis velit. Proin accumsan sodales felis a lacinia.
|
ultrices posuere. Integer mi quam, faucibus et aliquet imperdiet, ornare ac ex. Nunc mattis
|
||||||
Curabitur at magna a massa varius maximus. Vestibulum in auctor ante. Donec aliquam tortor sed nulla rutrum, et egestas mi efficitur. Sed viverra quam tellus, quis vulputate
|
molestie nisi, eu venenatis nibh vehicula at. Aliquam ut elit consectetur, finibus lorem sed,
|
||||||
felis ultrices sed. Mauris sagittis, neque quis laoreet gravida, nisi est ultrices mi, at tempus nunc justo non dui. Suspendisse porttitor tortor nulla, eget luctus quam finibus
|
condimentum sapien. Praesent fermentum iaculis orci, vitae tincidunt est viverra nec. Morbi semper
|
||||||
id. Proin sodales eros mollis tellus euismod luctus a eu mi. Quisque consectetur iaculis nibh, at mollis tellus volutpat eu. Aenean a nulla vel lectus rhoncus aliquam. Donec
|
turpis sed lectus ornare tristique. Sed congue dui ex. Maecenas orci ligula, imperdiet sit amet
|
||||||
vitae lacinia neque. Donec non lectus eget sem finibus ultrices vel nec felis. Proin fringilla mi a leo rhoncus aliquam sit amet quis augue. Duis congue ligula at est suscipit
|
accumsan et, finibus a velit. Ut vitae blandit eros. Nam gravida nec ipsum non volutpat. Integer
|
||||||
fringilla. Proin aliquam erat ut consequat dapibus. Suspendisse non nisi orci. Donec ac erat vel libero egestas laoreet. Nullam felis odio, tincidunt eget eleifend a, porttitor
|
quam metus, porttitor id ante sed, rutrum porta quam. Aenean at mattis ante. Morbi id libero eget
|
||||||
eu nisi. Suspendisse tristique eros at dolor scelerisque hendrerit. Etiam id dignissim lectus. Fusce lacinia metus eu risus placerat, et eleifend nunc ultrices. Ut gravida a dui
|
risus sagittis gravida. Proin consequat sapien a dignissim posuere. Ut luctus sed metus ut
|
||||||
sed volutpat. Sed semper quis erat sed ornare. Pellentesque sapien sem, fermentum vel nunc at, auctor posuere nisl. Maecenas aliquet lobortis leo. Vivamus tellus urna, dignissim
|
elementum. Mauris tincidunt condimentum risus at bibendum. Aenean a sapien justo. Morbi vel neque
|
||||||
consectetur sapien vitae, hendrerit varius sem. Nunc dictum tristique fermentum. Duis eu suscipit odio. Curabitur quis egestas neque. Fusce eu fringilla orci, vitae euismod
|
in eros venenatis scelerisque vitae nec justo. Vestibulum lacinia, dui eu sollicitudin ornare, est
|
||||||
sapien. Donec sit amet iaculis urna. Phasellus maximus nisl in libero bibendum volutpat. Nulla at vehicula lorem. Phasellus varius, elit ac suscipit pretium, turpis ipsum
|
elit vestibulum arcu, nec ultrices augue turpis in massa. Duis commodo lectus sed est posuere, et
|
||||||
porttitor lectus, vitae ullamcorper orci velit ut ligula. Proin mollis, orci vel commodo auctor, sapien ipsum vulputate enim, sit amet aliquam nulla sapien ut sapien. Proin
|
mollis nisi dapibus. Sed id ultrices arcu. Praesent tempor sodales aliquet. Donec suscipit ipsum
|
||||||
tincidunt ex non massa aliquet, quis aliquam nulla egestas. Maecenas mollis turpis dapibus, dignissim lectus tincidunt, egestas ligula. Suspendisse in lobortis purus. Sed tellus
|
eu odio cursus, quis sodales metus sodales. Nunc vestibulum massa at felis ullamcorper cursus.
|
||||||
tellus, mollis eget tempor sed, interdum ut lectus. Nulla sed ex efficitur, porta dui cursus, tristique elit. Maecenas tincidunt tortor vitae massa laoreet ultricies. Mauris ac
|
Pellentesque facilisis ante ut lectus vulputate vestibulum. Nullam pharetra felis ac lacus
|
||||||
elit vitae orci eleifend ornare non eu ligula. Curabitur venenatis nulla ut neque tristique, non tincidunt justo pretium. Suspendisse mattis semper dui, eget vestibulum risus
|
sodales, vel suscipit metus faucibus. Donec facilisis imperdiet risus, in volutpat odio tincidunt
|
||||||
elementum sed. In consequat nisi sit amet nulla euismod, at convallis tortor tincidunt. Aliquam hendrerit venenatis risus in interdum. Duis ullamcorper imperdiet elit sit amet
|
a. Aliquam vitae leo lorem. Proin scelerisque efficitur velit, vel cursus ipsum accumsan id. Morbi
|
||||||
blandit. Mauris placerat lacinia velit id pharetra. Nam nec iaculis dui. Etiam odio mi, fringilla in rutrum in, viverra quis tellus. Aliquam egestas mauris id nisi facilisis, in
|
nibh nulla, pretium quis venenatis et, pharetra et sapien. Cras lobortis, massa sit amet blandit
|
||||||
laoreet nibh malesuada. Ut eu dui laoreet, venenatis tellus ac, feugiat mauris. Nunc in velit laoreet, venenatis tellus quis, blandit dolor. Nulla ultrices et neque id placerat.
|
pulvinar, mi magna condimentum ex, quis commodo ipsum est quis metus. Maecenas pulvinar, leo sit
|
||||||
Nulla eu interdum nulla. Aliquam molestie enim quis rutrum finibus. Nulla bibendum orci vel scelerisque posuere. Praesent quis magna molestie, luctus tortor tincidunt, gravida
|
amet congue pulvinar, neque magna ultrices mi, et rhoncus massa sapien quis libero. Etiam a nunc
|
||||||
neque. Quisque et ligula eget magna viverra interdum at a sapien. Mauris ornare efficitur nunc sed vulputate. Praesent laoreet mollis tincidunt. Vestibulum id arcu vulputate,
|
et ipsum faucibus pretium. Nulla facilisi. Nunc nec dolor velit. In semper semper mi non
|
||||||
eleifend enim vel, accumsan turpis. Morbi faucibus convallis tellus, semper laoreet justo lacinia nec. Sed sodales ligula consectetur dui rhoncus, et convallis metus accumsan.
|
condimentum. Pellentesque vehicula volutpat odio, a semper sem porta a. In sit amet lectus rutrum,
|
||||||
Sed ullamcorper non ex sit amet ultricies. Donec finibus nulla nec blandit porttitor. Etiam aliquam quis leo a imperdiet. Cras at lobortis est. In convallis semper enim, ac porta
|
sollicitudin augue auctor, maximus quam. Mauris congue, nisl non fermentum iaculis, leo erat
|
||||||
ligula fringilla at. Donec augue est, facilisis et odio sit amet, viverra ullamcorper nisl. Ut porta velit nec sem lacinia, sit amet mollis magna auctor. Nulla lobortis lacinia
|
interdum lorem, quis bibendum arcu eros et elit. Fusce tortor ante, gravida a arcu in, lacinia
|
||||||
mauris nec sagittis. Suspendisse rutrum ex vel nisi interdum hendrerit et ut purus. Sed consectetur sodales nibh eget tempus. Aenean egestas luctus viverra. Integer fermentum
|
finibus ante. Phasellus facilisis lectus vitae sapien feugiat laoreet. Curabitur ultricies libero
|
||||||
tincidunt tellus, nec rhoncus velit hendrerit vitae. Proin quis neque porttitor, scelerisque risus gravida, volutpat sem. Fusce nec ex rhoncus, tempor libero nec, pellentesque
|
sit amet condimentum suscipit. Duis at vestibulum mi. Suspendisse at neque augue. Duis ornare a
|
||||||
ex. Integer quis iaculis purus. Nullam vitae imperdiet orci. Sed sit amet eros condimentum, scelerisque turpis facilisis, dignissim ante. Proin quis tristique lacus, sed sagittis
|
mauris id efficitur. Suspendisse in dui nec dolor dignissim venenatis. Curabitur a magna turpis.
|
||||||
nisl. Cras pharetra ultrices purus, sed ullamcorper nisi fringilla eu. Praesent risus turpis, auctor in fringilla a, fringilla eu dolor. Phasellus auctor tristique enim, eleifend
|
Aliquam at commodo tellus. In id sem interdum, suscipit felis at, mattis velit. Proin accumsan
|
||||||
molestie diam venenatis ut. Mauris dapibus, enim eget pharetra semper, nulla dui porttitor mi, auctor hendrerit augue nulla quis urna. Aliquam in cursus justo.
|
sodales felis a lacinia. Curabitur at magna a massa varius maximus. Vestibulum in auctor ante.
|
||||||
|
Donec aliquam tortor sed nulla rutrum, et egestas mi efficitur. Sed viverra quam tellus, quis
|
||||||
|
vulputate felis ultrices sed. Mauris sagittis, neque quis laoreet gravida, nisi est ultrices mi,
|
||||||
|
at tempus nunc justo non dui. Suspendisse porttitor tortor nulla, eget luctus quam finibus id.
|
||||||
|
Proin sodales eros mollis tellus euismod luctus a eu mi. Quisque consectetur iaculis nibh, at
|
||||||
|
mollis tellus volutpat eu. Aenean a nulla vel lectus rhoncus aliquam. Donec vitae lacinia neque.
|
||||||
|
Donec non lectus eget sem finibus ultrices vel nec felis. Proin fringilla mi a leo rhoncus aliquam
|
||||||
|
sit amet quis augue. Duis congue ligula at est suscipit fringilla. Proin aliquam erat ut consequat
|
||||||
|
dapibus. Suspendisse non nisi orci. Donec ac erat vel libero egestas laoreet. Nullam felis odio,
|
||||||
|
tincidunt eget eleifend a, porttitor eu nisi. Suspendisse tristique eros at dolor scelerisque
|
||||||
|
hendrerit. Etiam id dignissim lectus. Fusce lacinia metus eu risus placerat, et eleifend nunc
|
||||||
|
ultrices. Ut gravida a dui sed volutpat. Sed semper quis erat sed ornare. Pellentesque sapien sem,
|
||||||
|
fermentum vel nunc at, auctor posuere nisl. Maecenas aliquet lobortis leo. Vivamus tellus urna,
|
||||||
|
dignissim consectetur sapien vitae, hendrerit varius sem. Nunc dictum tristique fermentum. Duis eu
|
||||||
|
suscipit odio. Curabitur quis egestas neque. Fusce eu fringilla orci, vitae euismod sapien. Donec
|
||||||
|
sit amet iaculis urna. Phasellus maximus nisl in libero bibendum volutpat. Nulla at vehicula
|
||||||
|
lorem. Phasellus varius, elit ac suscipit pretium, turpis ipsum porttitor lectus, vitae
|
||||||
|
ullamcorper orci velit ut ligula. Proin mollis, orci vel commodo auctor, sapien ipsum vulputate
|
||||||
|
enim, sit amet aliquam nulla sapien ut sapien. Proin tincidunt ex non massa aliquet, quis aliquam
|
||||||
|
nulla egestas. Maecenas mollis turpis dapibus, dignissim lectus tincidunt, egestas ligula.
|
||||||
|
Suspendisse in lobortis purus. Sed tellus tellus, mollis eget tempor sed, interdum ut lectus.
|
||||||
|
Nulla sed ex efficitur, porta dui cursus, tristique elit. Maecenas tincidunt tortor vitae massa
|
||||||
|
laoreet ultricies. Mauris ac elit vitae orci eleifend ornare non eu ligula. Curabitur venenatis
|
||||||
|
nulla ut neque tristique, non tincidunt justo pretium. Suspendisse mattis semper dui, eget
|
||||||
|
vestibulum risus elementum sed. In consequat nisi sit amet nulla euismod, at convallis tortor
|
||||||
|
tincidunt. Aliquam hendrerit venenatis risus in interdum. Duis ullamcorper imperdiet elit sit amet
|
||||||
|
blandit. Mauris placerat lacinia velit id pharetra. Nam nec iaculis dui. Etiam odio mi, fringilla
|
||||||
|
in rutrum in, viverra quis tellus. Aliquam egestas mauris id nisi facilisis, in laoreet nibh
|
||||||
|
malesuada. Ut eu dui laoreet, venenatis tellus ac, feugiat mauris. Nunc in velit laoreet,
|
||||||
|
venenatis tellus quis, blandit dolor. Nulla ultrices et neque id placerat. Nulla eu interdum
|
||||||
|
nulla. Aliquam molestie enim quis rutrum finibus. Nulla bibendum orci vel scelerisque posuere.
|
||||||
|
Praesent quis magna molestie, luctus tortor tincidunt, gravida neque. Quisque et ligula eget magna
|
||||||
|
viverra interdum at a sapien. Mauris ornare efficitur nunc sed vulputate. Praesent laoreet mollis
|
||||||
|
tincidunt. Vestibulum id arcu vulputate, eleifend enim vel, accumsan turpis. Morbi faucibus
|
||||||
|
convallis tellus, semper laoreet justo lacinia nec. Sed sodales ligula consectetur dui rhoncus, et
|
||||||
|
convallis metus accumsan. Sed ullamcorper non ex sit amet ultricies. Donec finibus nulla nec
|
||||||
|
blandit porttitor. Etiam aliquam quis leo a imperdiet. Cras at lobortis est. In convallis semper
|
||||||
|
enim, ac porta ligula fringilla at. Donec augue est, facilisis et odio sit amet, viverra
|
||||||
|
ullamcorper nisl. Ut porta velit nec sem lacinia, sit amet mollis magna auctor. Nulla lobortis
|
||||||
|
lacinia mauris nec sagittis. Suspendisse rutrum ex vel nisi interdum hendrerit et ut purus. Sed
|
||||||
|
consectetur sodales nibh eget tempus. Aenean egestas luctus viverra. Integer fermentum tincidunt
|
||||||
|
tellus, nec rhoncus velit hendrerit vitae. Proin quis neque porttitor, scelerisque risus gravida,
|
||||||
|
volutpat sem. Fusce nec ex rhoncus, tempor libero nec, pellentesque ex. Integer quis iaculis
|
||||||
|
purus. Nullam vitae imperdiet orci. Sed sit amet eros condimentum, scelerisque turpis facilisis,
|
||||||
|
dignissim ante. Proin quis tristique lacus, sed sagittis nisl. Cras pharetra ultrices purus, sed
|
||||||
|
ullamcorper nisi fringilla eu. Praesent risus turpis, auctor in fringilla a, fringilla eu dolor.
|
||||||
|
Phasellus auctor tristique enim, eleifend molestie diam venenatis ut. Mauris dapibus, enim eget
|
||||||
|
pharetra semper, nulla dui porttitor mi, auctor hendrerit augue nulla quis urna. Aliquam in cursus
|
||||||
|
justo.
|
||||||
</p>
|
</p>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
// Page 2!
|
// Page 2!
|
||||||
import Link from '../components/Link.jsx';
|
import Link from "../components/Link.jsx";
|
||||||
---
|
---
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
@ -10,6 +10,6 @@ import Link from '../components/Link.jsx';
|
||||||
<title>Demo: Page 2</title>
|
<title>Demo: Page 2</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<Link to="/" text="Go Home" />
|
<Link to="/" text="Go Home" />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
---
|
---
|
||||||
import Lorem from '../components/Lorem.astro';
|
import Lorem from "../components/Lorem.astro";
|
||||||
import Link from '../components/Link.jsx';
|
import Link from "../components/Link.jsx";
|
||||||
import SolidCounter from '../components/SolidCounter.jsx';
|
import SolidCounter from "../components/SolidCounter.jsx";
|
||||||
import { CalcAdd } from '../components/calc-add.js';
|
import { CalcAdd } from "../components/calc-add.js";
|
||||||
import { MyCounter } from '../components/my-counter.js';
|
import { MyCounter } from "../components/my-counter.js";
|
||||||
---
|
---
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
@ -15,39 +15,40 @@ import { MyCounter } from '../components/my-counter.js';
|
||||||
<body>
|
<body>
|
||||||
<h1 class="px-4 py-4">Test app</h1>
|
<h1 class="px-4 py-4">Test app</h1>
|
||||||
<h2 class="partytown-status">
|
<h2 class="partytown-status">
|
||||||
<strong>Party Mode!</strong>
|
<strong>Party Mode!</strong>
|
||||||
Colors changing = partytown is enabled
|
Colors changing = partytown is enabled
|
||||||
</h2>
|
</h2>
|
||||||
<MyCounter client:load></MyCounter>
|
<MyCounter client:load />
|
||||||
<SolidCounter client:load></SolidCounter>
|
<SolidCounter client:load />
|
||||||
<Link to="/foo" text="Go to Page 2" />
|
<Link to="/foo" text="Go to Page 2" />
|
||||||
<Lorem />
|
<Lorem />
|
||||||
<CalcAdd num={33}></CalcAdd>
|
<CalcAdd num={33} />
|
||||||
<script type="text/partytown">
|
<script type="text/partytown">
|
||||||
// Remove `type="text/partytown"` to see this block the page
|
// Remove `type="text/partytown"` to see this block the page
|
||||||
// and cause the page to become unresponsive
|
// and cause the page to become unresponsive
|
||||||
console.log('start partytown blocking script')
|
console.log("start partytown blocking script");
|
||||||
const now = Date.now()
|
const now = Date.now();
|
||||||
let count = 1;
|
let count = 1;
|
||||||
while (Date.now() - now < 10000) {
|
while (Date.now() - now < 10000) {
|
||||||
if (Date.now() - now > count * 1000) {
|
if (Date.now() - now > count * 1000) {
|
||||||
console.log('blocking', count);
|
console.log("blocking", count);
|
||||||
count += 1;
|
count += 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log('end partytown blocking script')
|
console.log("end partytown blocking script");
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
setInterval(() => {
|
setInterval(() => {
|
||||||
const randomColor = Math.floor(Math.random()*16777215).toString(16);
|
const randomColor = Math.floor(Math.random() * 16777215).toString(16);
|
||||||
document.querySelector('.partytown-status').style.color = "#" + randomColor;
|
document.querySelector(".partytown-status").style.color = "#" + randomColor;
|
||||||
}, 100);
|
}, 100);
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
h1, h2 {
|
h1,
|
||||||
color: blue;
|
h2 {
|
||||||
}
|
color: blue;
|
||||||
</style>
|
}
|
||||||
|
</style>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
|
---
|
||||||
|
|
||||||
---
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
|
@ -12,7 +11,9 @@
|
||||||
// can fetch them directly in the browser.
|
// can fetch them directly in the browser.
|
||||||
const response = await fetch(`/about.json`);
|
const response = await fetch(`/about.json`);
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
document.getElementById('result').innerHTML = `Load complete!<br/>Built with: <a href="${data.url}">${data.name}!</a>`;
|
document.getElementById(
|
||||||
|
"result"
|
||||||
|
).innerHTML = `Load complete!<br/>Built with: <a href="${data.url}">${data.name}!</a>`;
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
---
|
---
|
||||||
import '../styles/global.scss';
|
import "../styles/global.scss";
|
||||||
const { title = 'Jeanine White: Personal Site', description = 'The personal site of Jeanine White' } = Astro.props;
|
const {
|
||||||
|
title = "Jeanine White: Personal Site",
|
||||||
|
description = "The personal site of Jeanine White",
|
||||||
|
} = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
|
|
@ -9,6 +12,9 @@ const { title = 'Jeanine White: Personal Site', description = 'The personal site
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
|
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<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"
|
||||||
|
/>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
---
|
---
|
||||||
import MainHead from '../components/MainHead.astro';
|
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;
|
const { content } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang={content.lang || 'en'}>
|
<html lang={content.lang || "en"}>
|
||||||
<head>
|
<head>
|
||||||
<MainHead title={content.title} description={content.description} />
|
<MainHead title={content.title} description={content.description} />
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
import MainHead from '../components/MainHead.astro';
|
import MainHead from "../components/MainHead.astro";
|
||||||
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";
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
@ -9,11 +9,11 @@ import Nav from '../components/Nav/index.jsx';
|
||||||
<MainHead title="Not Found" />
|
<MainHead title="Not Found" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav />
|
<nav></nav>
|
||||||
<div class="wrapper mt4 mb4">
|
<div class="wrapper mt4 mb4">
|
||||||
<h1>Page Not Found</h1>
|
<h1>Page Not Found</h1>
|
||||||
<p>Not found</p>
|
<p>Not found</p>
|
||||||
</div>
|
</div>
|
||||||
<footer />
|
<footer></footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
import MainHead from '../components/MainHead.astro';
|
import MainHead from "../components/MainHead.astro";
|
||||||
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";
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
@ -29,29 +29,41 @@ import Nav from '../components/Nav/index.jsx';
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<h1>About Jeanine</h1>
|
<h1>About Jeanine</h1>
|
||||||
<div class="heroImg">
|
<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" />
|
<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>
|
||||||
<div class="bio wrapper wrapper__readable mt8">
|
<div class="bio wrapper wrapper__readable mt8">
|
||||||
<p>
|
<p>
|
||||||
Cream cheese say cheese stinking bishop. Brie fondue hard cheese bocconcini feta camembert de normandie babybel airedale. Red leicester swiss manchego mascarpone pepper
|
Cream cheese say cheese stinking bishop. Brie fondue hard cheese bocconcini feta camembert
|
||||||
jack airedale fromage frais ricotta. Cheese and biscuits cauliflower cheese boursin.
|
de normandie babybel airedale. Red leicester swiss manchego mascarpone pepper jack
|
||||||
|
airedale fromage frais ricotta. Cheese and biscuits cauliflower cheese boursin.
|
||||||
</p>
|
</p>
|
||||||
<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
|
Pepper jack cheesy feet cheese slices. Halloumi port-salut queso caerphilly roquefort
|
||||||
macaroni cheese feta blue castello roquefort edam. Babybel pepper jack airedale cheddar fromage frais manchego.
|
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>
|
||||||
<p>
|
<p>
|
||||||
Cauliflower cheese lancashire macaroni cheese. Cheeseburger babybel cheese on toast airedale cauliflower cheese who moved my cheese roquefort paneer. Stinking bishop
|
Cauliflower cheese lancashire macaroni cheese. Cheeseburger babybel cheese on toast
|
||||||
cheddar taleggio port-salut port-salut stinking bishop cheesy grin babybel. Blue castello feta everyone loves brie.
|
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>
|
||||||
<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
|
Goat squirty cheese cut the cheese. Cheese and wine cheddar fondue airedale cottage cheese
|
||||||
port-salut fondue gouda cheese on toast cheesy feet. Feta edam everyone loves cheese strings camembert de normandie.
|
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>
|
||||||
<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
|
Caerphilly monterey jack goat. Squirty cheese cheesy grin hard cheese cheese strings
|
||||||
triangles everyone loves mascarpone cheese on toast who moved my cheese lancashire cheeseburger. Fromage frais fromage frais cheese and biscuits stinking bishop
|
cheese and biscuits croque monsieur smelly cheese danish fontina. Swiss cheese triangles
|
||||||
cauliflower cheese.
|
everyone loves mascarpone cheese on toast who moved my cheese lancashire cheeseburger.
|
||||||
|
Fromage frais fromage frais cheese and biscuits stinking bishop cauliflower cheese.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
---
|
---
|
||||||
// Component Imports
|
// Component Imports
|
||||||
import MainHead from '../components/MainHead.astro';
|
import MainHead from "../components/MainHead.astro";
|
||||||
import Button from '../components/Button/index.jsx';
|
import Button from "../components/Button/index.jsx";
|
||||||
import Nav from '../components/Nav/index.jsx';
|
import Nav from "../components/Nav/index.jsx";
|
||||||
import Footer from '../components/Footer/index.jsx';
|
import Footer from "../components/Footer/index.jsx";
|
||||||
import PortfolioPreview from '../components/PortfolioPreview/index.jsx';
|
import PortfolioPreview from "../components/PortfolioPreview/index.jsx";
|
||||||
|
|
||||||
// Data Fetching: List all Markdown posts in the repo.
|
// 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];
|
const featuredProject = projects[0];
|
||||||
|
|
||||||
// Full Astro Component Syntax:
|
// Full Astro Component Syntax:
|
||||||
|
|
@ -16,7 +16,10 @@ const featuredProject = projects[0];
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<MainHead title="Jeanine White: Personal Site" description="Jeanine White: Developer, Speaker, and Writer..." />
|
<MainHead
|
||||||
|
title="Jeanine White: Personal Site"
|
||||||
|
description="Jeanine White: Developer, Speaker, and Writer..."
|
||||||
|
/>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
$w-s: 750px;
|
$w-s: 750px;
|
||||||
|
|
||||||
|
|
@ -37,7 +40,7 @@ const featuredProject = projects[0];
|
||||||
|
|
||||||
.gradient,
|
.gradient,
|
||||||
.gradient2 {
|
.gradient2 {
|
||||||
background-image: url('/assets/mesh-gradient.jpg');
|
background-image: url("/assets/mesh-gradient.jpg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
mix-blend-mode: screen;
|
mix-blend-mode: screen;
|
||||||
|
|
@ -198,7 +201,7 @@ const featuredProject = projects[0];
|
||||||
<div class="gradient2"></div>
|
<div class="gradient2"></div>
|
||||||
<div class="overlay">
|
<div class="overlay">
|
||||||
<h1 class="title">
|
<h1 class="title">
|
||||||
<small class="subtitle">The personal site of </small>Jeanine White
|
<small class="subtitle">The personal site of</small>Jeanine White
|
||||||
</h1>
|
</h1>
|
||||||
<div>
|
<div>
|
||||||
<span class="role">👩💻 Developer <span class="invert">👩💻 Developer</span></span>
|
<span class="role">👩💻 Developer <span class="invert">👩💻 Developer</span></span>
|
||||||
|
|
@ -222,9 +225,9 @@ const featuredProject = projects[0];
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h3 class="sectionTitle">About me</h3>
|
<h3 class="sectionTitle">About me</h3>
|
||||||
<p class="bio">
|
<p class="bio">
|
||||||
<span>Hello!</span> I’m Jeanine, and this is my website. It was made using{' '}
|
<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
|
<a href="https://github.com/withastro/astro" target="_blank" rel="nofollow"> Astro</a>,
|
||||||
modify.
|
a new way to build static sites. This is just an example template for you to modify.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<a href="/about">Read more</a>
|
<a href="/about">Read more</a>
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,27 @@
|
||||||
---
|
---
|
||||||
import MainHead from '../components/MainHead.astro';
|
import MainHead from "../components/MainHead.astro";
|
||||||
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";
|
||||||
import PortfolioPreview from '../components/PortfolioPreview/index.jsx';
|
import PortfolioPreview from "../components/PortfolioPreview/index.jsx";
|
||||||
|
|
||||||
const projects = (await Astro.glob('./project/**/*.md'))
|
const projects = (await Astro.glob("./project/**/*.md"))
|
||||||
.filter(({ frontmatter }) => !!frontmatter.publishDate)
|
.filter(({ frontmatter }) => !!frontmatter.publishDate)
|
||||||
.sort((a, b) => new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf());
|
.sort(
|
||||||
|
(a, b) =>
|
||||||
|
new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf()
|
||||||
|
);
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<MainHead title="All Projects | Jeanine White" description="Learn about Jenine White's most recent projects" />
|
<MainHead
|
||||||
|
title="All Projects | Jeanine White"
|
||||||
|
description="Learn about Jenine White"
|
||||||
|
s
|
||||||
|
most
|
||||||
|
recent
|
||||||
|
projects'
|
||||||
|
/>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.grid {
|
.grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
---
|
---
|
||||||
const { tag = 'div' } = Astro.props;
|
const { tag = "div" } = Astro.props;
|
||||||
const Tag = tag;
|
const Tag = tag;
|
||||||
---
|
---
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
width: 1248px; /** TODO: responsive */
|
width: 1248px; /** TODO: responsive */
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,14 @@
|
||||||
---
|
---
|
||||||
import TextDecorationSkip from './TextDecorationSkip.astro';
|
import TextDecorationSkip from "./TextDecorationSkip.astro";
|
||||||
import Cart from './Cart.svelte';
|
import Cart from "./Cart.svelte";
|
||||||
import { getCart } from '../api';
|
import { getCart } from "../api";
|
||||||
|
|
||||||
const cart = await getCart(Astro.request);
|
const cart = await getCart(Astro.request);
|
||||||
const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0);
|
const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0);
|
||||||
---
|
---
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
|
@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");
|
||||||
|
|
||||||
header {
|
header {
|
||||||
margin: 1rem 2rem;
|
margin: 1rem 2rem;
|
||||||
|
|
@ -17,11 +18,12 @@ const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0);
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: 'Lobster', cursive;
|
font-family: "Lobster", cursive;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
a, a:visited {
|
a,
|
||||||
|
a:visited {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
@ -35,14 +37,12 @@ const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0);
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
||||||
<header>
|
<header>
|
||||||
<h1><a href="/"><TextDecorationSkip text="Online Store" /></a></h1>
|
<h1><a href="/"><TextDecorationSkip text="Online Store" /></a></h1>
|
||||||
<div class="right-pane">
|
<div class="right-pane">
|
||||||
<a href="/login">
|
<a href="/login">
|
||||||
<span class="material-icons">
|
<span class="material-icons"> login</span>
|
||||||
login
|
|
||||||
</span>
|
|
||||||
</a>
|
</a>
|
||||||
<Cart client:idle count={cartCount} />
|
<Cart client:idle count={cartCount} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
---
|
---
|
||||||
const { products } = Astro.props;
|
const { products } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
ul {
|
ul {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
|
@ -45,17 +46,17 @@ const { products } = Astro.props;
|
||||||
</style>
|
</style>
|
||||||
<slot name="title"></slot>
|
<slot name="title"></slot>
|
||||||
<ul>
|
<ul>
|
||||||
{products.map(product => (
|
{products.map((product) => (
|
||||||
<li class="product">
|
<li class="product">
|
||||||
<a href={`/products/${product.id}`}>
|
<a href={`/products/${product.id}`}>
|
||||||
<figure>
|
<figure>
|
||||||
<img src={product.image} />
|
<img src={product.image} />
|
||||||
<figcaption>
|
<figcaption>
|
||||||
<div class="name">{product.name}</div>
|
<div class="name">{product.name}</div>
|
||||||
<div class="price">${product.price}</div>
|
<div class="price">${product.price}</div>
|
||||||
</figcaption>
|
</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,17 @@
|
||||||
---
|
---
|
||||||
const { text } = Astro.props;
|
const { text } = Astro.props;
|
||||||
const words = text.split(' ');
|
const words = text.split(" ");
|
||||||
const last = words.length - 1;
|
const last = words.length - 1;
|
||||||
---
|
---
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
span {
|
span {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
{words.map((word, i) => (
|
{words.map((word, i) => (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<span>{word}</span>{i !== last && (<Fragment> </Fragment>)}
|
<span>{word}</span>
|
||||||
|
{i !== last && <Fragment> </Fragment>}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
))}
|
))}
|
||||||
|
|
|
||||||
|
|
@ -1,47 +1,50 @@
|
||||||
---
|
---
|
||||||
import Header from '../components/Header.astro';
|
import Header from "../components/Header.astro";
|
||||||
import Container from '../components/Container.astro';
|
import Container from "../components/Container.astro";
|
||||||
import { getCart } from '../api';
|
import { getCart } from "../api";
|
||||||
import { isLoggedIn } from '../models/user';
|
import { isLoggedIn } from "../models/user";
|
||||||
|
|
||||||
if(!isLoggedIn(Astro.request)) {
|
if (!isLoggedIn(Astro.request)) {
|
||||||
return Astro.redirect('/');
|
return Astro.redirect("/");
|
||||||
}
|
}
|
||||||
|
|
||||||
// They must be logged in.
|
// They must be logged in.
|
||||||
|
|
||||||
const user = { name: 'test'}; // getUser?
|
const user = { name: "test" }; // getUser?
|
||||||
const cart = await getCart(Astro.request);
|
const cart = await getCart(Astro.request);
|
||||||
---
|
---
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Cart | Online Store</title>
|
|
||||||
<style>
|
|
||||||
h1 {
|
|
||||||
font-size: 36px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<Header />
|
|
||||||
|
|
||||||
<Container tag="main">
|
<html>
|
||||||
<h1>Cart</h1>
|
<head>
|
||||||
<p>Hi { user.name }! Here are your cart items:</p>
|
<title>Cart | Online Store</title>
|
||||||
<table>
|
<style>
|
||||||
<thead>
|
h1 {
|
||||||
<tr>
|
font-size: 36px;
|
||||||
<th>Item</th>
|
}
|
||||||
<th>Count</th>
|
</style>
|
||||||
</tr>
|
</head>
|
||||||
</thead>
|
<body>
|
||||||
<tbody>
|
<Header />
|
||||||
{cart.items.map(item => <tr>
|
|
||||||
<td>{item.name}</td>
|
<Container tag="main">
|
||||||
<td>{item.count}</td>
|
<h1>Cart</h1>
|
||||||
</tr>)}
|
<p>Hi {user.name}! Here are your cart items:</p>
|
||||||
</tbody>
|
<table>
|
||||||
</table>
|
<thead>
|
||||||
</Container>
|
<tr>
|
||||||
</body>
|
<th>Item</th>
|
||||||
|
<th>Count</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{cart.items.map((item) => (
|
||||||
|
<tr>
|
||||||
|
<td>{item.name}</td>
|
||||||
|
<td>{item.count}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</Container>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,36 @@
|
||||||
---
|
---
|
||||||
import Header from '../components/Header.astro';
|
import Header from "../components/Header.astro";
|
||||||
import Container from '../components/Container.astro';
|
import Container from "../components/Container.astro";
|
||||||
import ProductListing from '../components/ProductListing.astro';
|
import ProductListing from "../components/ProductListing.astro";
|
||||||
import { getProducts } from '../api';
|
import { getProducts } from "../api";
|
||||||
import '../styles/common.css';
|
import "../styles/common.css";
|
||||||
|
|
||||||
const products = await getProducts(Astro.request);
|
const products = await getProducts(Astro.request);
|
||||||
---
|
---
|
||||||
|
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Online Store</title>
|
<title>Online Store</title>
|
||||||
<style>
|
<style>
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-listing-title {
|
.product-listing-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-listing {
|
.product-listing {
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Header />
|
||||||
|
|
||||||
}
|
<Container tag="main">
|
||||||
</style>
|
<ProductListing products={products} class="product-listing">
|
||||||
</head>
|
<h2 class="product-listing-title" slot="title">Product Listing</h2>
|
||||||
<body>
|
</ProductListing>
|
||||||
<Header />
|
</Container>
|
||||||
|
</body>
|
||||||
<Container tag="main">
|
|
||||||
<ProductListing products={products} class="product-listing">
|
|
||||||
<h2 class="product-listing-title" slot="title">Product Listing</h2>
|
|
||||||
</ProductListing>
|
|
||||||
</Container>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,31 @@
|
||||||
---
|
---
|
||||||
import Header from '../components/Header.astro';
|
import Header from "../components/Header.astro";
|
||||||
import Container from '../components/Container.astro';
|
import Container from "../components/Container.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Online Store</title>
|
<title>Online Store</title>
|
||||||
<style>
|
<style>
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<Container tag="main">
|
<Container tag="main">
|
||||||
<h1>Login</h1>
|
<h1>Login</h1>
|
||||||
<form action="/login.form" method="POST">
|
<form action="/login.form" method="POST">
|
||||||
<label for="name">Name</label>
|
<label for="name">Name</label>
|
||||||
<input type="text" name="name">
|
<input type="text" name="name" />
|
||||||
|
|
||||||
<label for="password">Password</label>
|
<label for="password">Password</label>
|
||||||
<input type="password" name="password">
|
<input type="password" name="password" />
|
||||||
|
|
||||||
<input type="submit" value="Submit">
|
<input type="submit" value="Submit" />
|
||||||
</form>
|
</form>
|
||||||
</Container>
|
</Container>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,46 +1,45 @@
|
||||||
---
|
---
|
||||||
import Header from '../../components/Header.astro';
|
import Header from "../../components/Header.astro";
|
||||||
import Container from '../../components/Container.astro';
|
import Container from "../../components/Container.astro";
|
||||||
import AddToCart from '../../components/AddToCart.svelte';
|
import AddToCart from "../../components/AddToCart.svelte";
|
||||||
import { getProduct } from '../../api';
|
import { getProduct } from "../../api";
|
||||||
import '../../styles/common.css';
|
import "../../styles/common.css";
|
||||||
|
|
||||||
const id = Number(Astro.params.id);
|
const id = Number(Astro.params.id);
|
||||||
const product = await getProduct(Astro.request, id);
|
const product = await getProduct(Astro.request, id);
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>{product.name} | Online Store</title>
|
<title>{product.name} | Online Store</title>
|
||||||
<style>
|
<style>
|
||||||
h2 {
|
h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 3.5rem;
|
font-size: 3.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
figure {
|
figure {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<Container tag="article">
|
<Container tag="article">
|
||||||
<h2>{product.name}</h2>
|
<h2>{product.name}</h2>
|
||||||
<figure>
|
<figure>
|
||||||
<img src={product.image} />
|
<img src={product.image} />
|
||||||
<figcaption>
|
<figcaption>
|
||||||
<AddToCart client:idle id={id} name={product.name} />
|
<AddToCart client:idle id={id} name={product.name} />
|
||||||
<p>Description here...</p>
|
<p>Description here...</p>
|
||||||
</figcaption>
|
</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
|
</Container>
|
||||||
</Container>
|
</body>
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
---
|
---
|
||||||
// Export a "Props" interface to .
|
// Export a "Props" interface to .
|
||||||
export interface Props {
|
export interface Props {
|
||||||
height?: number,
|
height?: number;
|
||||||
width?: number,
|
width?: number;
|
||||||
}
|
}
|
||||||
const {height = 80, width = 60 } = Astro.props;
|
const { height = 80, width = 60 } = Astro.props;
|
||||||
---
|
---
|
||||||
<img height={height} width={width} src="/logo.svg" alt="Astro logo">
|
|
||||||
|
<img height={height} width={width} src="/logo.svg" alt="Astro logo" />
|
||||||
|
|
|
||||||
|
|
@ -1,74 +1,75 @@
|
||||||
---
|
---
|
||||||
import {Content as TourContent} from '../content/Tour.md';
|
import { Content as TourContent } from "../content/Tour.md";
|
||||||
import Logo from '../components/Logo.astro';
|
import Logo from "../components/Logo.astro";
|
||||||
import '../styles/global.css';
|
import "../styles/global.css";
|
||||||
import '../styles/home.css';
|
import "../styles/home.css";
|
||||||
/* ASTRO:COMPONENT_IMPORTS */
|
/* ASTRO:COMPONENT_IMPORTS */
|
||||||
|
|
||||||
// Component Script:
|
// Component Script:
|
||||||
// You can write any JavaScript/TypeScript that you'd like here.
|
// You can write any JavaScript/TypeScript that you'd like here.
|
||||||
// It will run during the build, but never in the browser.
|
// It will run during the build, but never in the browser.
|
||||||
// All variables are available to use in the HTML template below.
|
// All variables are available to use in the HTML template below.
|
||||||
let title = 'My Astro Site';
|
let title = "My Astro Site";
|
||||||
|
|
||||||
// Full Astro Component Syntax:
|
// Full Astro Component Syntax:
|
||||||
// https://docs.astro.build/core-concepts/astro-components/
|
// https://docs.astro.build/core-concepts/astro-components/
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width">
|
<meta name="viewport" content="width=device-width" />
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
|
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
header {
|
header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
max-width: min(100%, 68ch);
|
max-width: min(100%, 68ch);
|
||||||
}
|
}
|
||||||
article {
|
article {
|
||||||
padding-top: 2em;
|
padding-top: 2em;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
max-width: 70ch;
|
max-width: 70ch;
|
||||||
}
|
}
|
||||||
.banner {
|
.banner {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
background: var(--color-light);
|
background: var(--color-light);
|
||||||
padding: 1em 1.5em;
|
padding: 1em 1.5em;
|
||||||
padding-left: 0.75em;
|
padding-left: 0.75em;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style is:global>
|
<style is:global>
|
||||||
pre {
|
pre {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
<header>
|
<header>
|
||||||
<div>
|
<div>
|
||||||
<Logo width={60} height={80} />
|
<Logo width={60} height={80} />
|
||||||
<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
|
<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<article>
|
<article>
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
<p><strong>🧑🚀 Seasoned astronaut?</strong> Delete this template and have fun!</p>
|
<p><strong>🧑🚀 Seasoned astronaut?</strong> Delete this template and have fun!</p>
|
||||||
</div>
|
</div>
|
||||||
<TourContent />
|
<TourContent />
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
|
||||||
You can also use imported framework components directly in your markup!
|
You can also use imported framework components directly in your markup!
|
||||||
|
|
||||||
|
|
@ -79,7 +80,7 @@ let title = 'My Astro Site';
|
||||||
|
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<!-- ASTRO:COMPONENT_MARKUP -->
|
<!-- ASTRO:COMPONENT_MARKUP -->
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import '../styles/main.scss';
|
import "../styles/main.scss";
|
||||||
import Time from '../components/Time.jsx';
|
import Time from "../components/Time.jsx";
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
---
|
---
|
||||||
import '../styles/global.css';
|
import "../styles/global.css";
|
||||||
|
|
||||||
const { content } = Astro.props;
|
const { content } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang={content.lang || 'en'}>
|
<html lang={content.lang || "en"}>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
---
|
---
|
||||||
import { Markdown } from 'astro/components';
|
import { Markdown } from "astro/components";
|
||||||
import MainLayout from '../layouts/main.astro';
|
import MainLayout from "../layouts/main.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<MainLayout content={{ title: 'About' }}>
|
<MainLayout content={{ title: "About" }}>
|
||||||
<Markdown>
|
<Markdown>
|
||||||
# About
|
# About
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
---
|
---
|
||||||
import '../styles/global.css';
|
import "../styles/global.css";
|
||||||
|
|
||||||
const { content } = Astro.props;
|
const { content } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang={content.lang || 'en'}>
|
<html lang={content.lang || "en"}>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
---
|
---
|
||||||
import '../styles/global.css';
|
import "../styles/global.css";
|
||||||
|
|
||||||
const { content } = Astro.props;
|
const { content } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang={content.lang || 'en'}>
|
<html lang={content.lang || "en"}>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
import { Markdown } from 'astro/components';
|
import { Markdown } from "astro/components";
|
||||||
import Layout from '../layouts/main.astro';
|
import Layout from "../layouts/main.astro";
|
||||||
|
|
||||||
const title = `External Markdown`;
|
const title = `External Markdown`;
|
||||||
const content = `Markdown *content* to render`;
|
const content = `Markdown *content* to render`;
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
---
|
---
|
||||||
// Component Imports
|
// Component Imports
|
||||||
import { Markdown } from 'astro/components';
|
import { Markdown } from "astro/components";
|
||||||
import Layout from '../layouts/main.astro';
|
import Layout from "../layouts/main.astro";
|
||||||
import ReactCounter from '../components/ReactCounter.jsx';
|
import ReactCounter from "../components/ReactCounter.jsx";
|
||||||
import PreactCounter from '../components/PreactCounter.tsx';
|
import PreactCounter from "../components/PreactCounter.tsx";
|
||||||
import VueCounter from '../components/VueCounter.vue';
|
import VueCounter from "../components/VueCounter.vue";
|
||||||
import SvelteCounter from '../components/SvelteCounter.svelte';
|
import SvelteCounter from "../components/SvelteCounter.svelte";
|
||||||
|
|
||||||
// Component Script:
|
// Component Script:
|
||||||
// You can write any JavaScript/TypeScript that you'd like here.
|
// You can write any JavaScript/TypeScript that you'd like here.
|
||||||
// It will run during the build, but never in the browser.
|
// It will run during the build, but never in the browser.
|
||||||
// All variables are available to use in the HTML template below.
|
// All variables are available to use in the HTML template below.
|
||||||
const title = 'Astro Markdown';
|
const title = "Astro Markdown";
|
||||||
const variable = 'content';
|
const variable = "content";
|
||||||
const items = ['A', 'B', 'C'];
|
const items = ["A", "B", "C"];
|
||||||
|
|
||||||
// Full Astro Component Syntax:
|
// Full Astro Component Syntax:
|
||||||
// https://docs.astro.build/core-concepts/astro-components/
|
// https://docs.astro.build/core-concepts/astro-components/
|
||||||
|
|
@ -57,7 +57,7 @@ const items = ['A', 'B', 'C'];
|
||||||
Should work!
|
Should work!
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import Something from './another';
|
import Something from "./another";
|
||||||
|
|
||||||
const thing = new Something();
|
const thing = new Something();
|
||||||
```
|
```
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
---
|
---
|
||||||
// Style Imports
|
// Style Imports
|
||||||
import '../styles/global.css';
|
import "../styles/global.css";
|
||||||
import '../styles/home.css';
|
import "../styles/home.css";
|
||||||
|
|
||||||
// Component Imports
|
// Component Imports
|
||||||
import AdminsReact from '../components/AdminsReact.jsx';
|
import AdminsReact from "../components/AdminsReact.jsx";
|
||||||
import AdminsSvelte from '../components/AdminsSvelte.svelte';
|
import AdminsSvelte from "../components/AdminsSvelte.svelte";
|
||||||
import AdminsVue from '../components/AdminsVue.vue';
|
import AdminsVue from "../components/AdminsVue.vue";
|
||||||
import AdminsSolid from '../components/AdminsSolid.jsx';
|
import AdminsSolid from "../components/AdminsSolid.jsx";
|
||||||
|
|
||||||
// Full Astro Component Syntax:
|
// Full Astro Component Syntax:
|
||||||
// https://docs.astro.build/core-concepts/astro-components/
|
// https://docs.astro.build/core-concepts/astro-components/
|
||||||
|
|
|
||||||
|
|
@ -2,11 +2,14 @@
|
||||||
// Click button, get confetti!
|
// Click button, get confetti!
|
||||||
// Styled by Tailwind :)
|
// Styled by Tailwind :)
|
||||||
---
|
---
|
||||||
<button class="py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
|
|
||||||
|
<button
|
||||||
|
class="py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"
|
||||||
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import confetti from 'canvas-confetti';
|
import confetti from "canvas-confetti";
|
||||||
document.body.querySelector('button').addEventListener("click", () => confetti());
|
document.body.querySelector("button").addEventListener("click", () => confetti());
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
// Component Imports
|
// Component Imports
|
||||||
import Button from '../components/Button.astro';
|
import Button from "../components/Button.astro";
|
||||||
|
|
||||||
// Full Astro Component Syntax:
|
// Full Astro Component Syntax:
|
||||||
// https://docs.astro.build/core-concepts/astro-components/
|
// https://docs.astro.build/core-concepts/astro-components/
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,8 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
|
<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
|
||||||
<script src="/src/index.ts"></script>
|
<script src="/src/index.ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue