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 {
|
||||
title: string,
|
||||
body: string,
|
||||
href: string,
|
||||
title: string;
|
||||
body: string;
|
||||
href: string;
|
||||
}
|
||||
const {href, title, body} = Astro.props;
|
||||
const { href, title, body } = Astro.props;
|
||||
---
|
||||
|
||||
<li class="link-card">
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span>→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span>→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<style>
|
||||
|
||||
: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 {
|
||||
|
|
@ -49,11 +49,11 @@ const {href, title, body} = Astro.props;
|
|||
margin: 0;
|
||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h2 span {
|
||||
display: inline-block;
|
||||
|
|
@ -65,7 +65,7 @@ const {href, title, body} = Astro.props;
|
|||
}
|
||||
|
||||
.link-card:is(:hover, :focus-within) h2 {
|
||||
color: #4F39FA;
|
||||
color: #4f39fa;
|
||||
}
|
||||
|
||||
.link-card:is(:hover, :focus-within) h2 span {
|
||||
|
|
|
|||
|
|
@ -8,49 +8,48 @@ const { title } = Astro.props as Props;
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--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-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
|
||||
:root {
|
||||
--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-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
|
||||
|
||||
--color-text: hsl(12, 5%, 4%);
|
||||
--color-bg: hsl(10, 21%, 95%);
|
||||
--color-text: hsl(12, 5%, 4%);
|
||||
--color-bg: hsl(10, 21%, 95%);
|
||||
--color-border: hsl(17, 24%, 90%);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: system-ui, sans-serif;
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
html {
|
||||
font-family: system-ui, sans-serif;
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:global(h1) {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
:global(h1) {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
:global(h2) {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
:global(h2) {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
:global(code) {
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
:global(code) {
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,43 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Card from '../components/Card.astro';
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Card from "../components/Card.astro";
|
||||
---
|
||||
|
||||
<Layout title="Welcome to Astro.">
|
||||
<main>
|
||||
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
|
||||
<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.
|
||||
</p>
|
||||
<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 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. ❤️" />
|
||||
<Card
|
||||
href="https://docs.astro.build/"
|
||||
title="Documentation"
|
||||
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>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--astro-gradient: linear-gradient(0deg,#4F39FA, #DA62C4);
|
||||
--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -29,7 +46,7 @@ import Card from '../components/Card.astro';
|
|||
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
padding: 1em;
|
||||
max-width: 60ch;
|
||||
}
|
||||
|
||||
|
|
@ -45,15 +62,20 @@ import Card from '../components/Card.astro';
|
|||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { background-position-y: 0%; }
|
||||
50% { background-position-y: 80%; }
|
||||
0%,
|
||||
100% {
|
||||
background-position-y: 0%;
|
||||
}
|
||||
50% {
|
||||
background-position-y: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.instructions {
|
||||
line-height: 1.6;
|
||||
margin: 1rem 0;
|
||||
background: #4F39FA;
|
||||
padding: 1.0rem;
|
||||
background: #4f39fa;
|
||||
padding: 1rem;
|
||||
border-radius: 0.4rem;
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import '../styles/global.css';
|
||||
import "../styles/global.css";
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
|
|
@ -19,7 +19,10 @@ const { title, description, image, type, next, prev, canonicalURL } = Astro.prop
|
|||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
<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 -->
|
||||
<link rel="sitemap" href="/sitemap.xml" />
|
||||
<!-- RSS -->
|
||||
|
|
@ -30,17 +33,17 @@ const { title, description, image, type, next, prev, canonicalURL } = Astro.prop
|
|||
|
||||
<!-- SEO -->
|
||||
<link rel="canonical" href={canonicalURL} />
|
||||
{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}>}
|
||||
{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} />}
|
||||
|
||||
<!-- OpenGraph -->
|
||||
<meta property="og:title" content={title} />
|
||||
<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 -->
|
||||
<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:title" content={title} />
|
||||
<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">
|
||||
<nav class="nav">
|
||||
<a class="prev" href={prevUrl || '#'} aria-label="Previous Page">Prev</a>
|
||||
<a class="next" href={nextUrl || '#'} aria-label="Next Page">Next</a>
|
||||
<a class="prev" href={prevUrl || "#"} aria-label="Previous Page">Prev</a>
|
||||
<a class="next" href={nextUrl || "#"} aria-label="Next Page">Next</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
|
@ -29,7 +29,7 @@ const { prevUrl, nextUrl } = Astro.props;
|
|||
text-transform: uppercase;
|
||||
font-size: 0.8em;
|
||||
|
||||
&[href='#'] {
|
||||
&[href="#"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ const { post, author } = Astro.props;
|
|||
const { frontmatter } = post;
|
||||
|
||||
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 Nav from '../components/Nav.astro';
|
||||
import authorData from '../data/authors.json';
|
||||
import MainHead from "../components/MainHead.astro";
|
||||
import Nav from "../components/Nav.astro";
|
||||
import authorData from "../data/authors.json";
|
||||
|
||||
const { content } = Astro.props;
|
||||
let canonicalURL = Astro.canonicalURL;
|
||||
---
|
||||
|
||||
<html lang={content.lang || 'en'}>
|
||||
<html lang={content.lang || "en"}>
|
||||
<head>
|
||||
<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">
|
||||
.title {
|
||||
margin-top: 4rem;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
import MainHead from '../components/MainHead.astro';
|
||||
import Nav from '../components/Nav.astro';
|
||||
import MainHead from "../components/MainHead.astro";
|
||||
import Nav from "../components/Nav.astro";
|
||||
|
||||
let title = 'About';
|
||||
let description = 'About page of an example blog on Astro';
|
||||
let title = "About";
|
||||
let description = "About page of an example blog on Astro";
|
||||
let canonicalURL = Astro.canonicalURL;
|
||||
---
|
||||
|
||||
|
|
@ -54,15 +54,19 @@ let canonicalURL = Astro.canonicalURL;
|
|||
</div>
|
||||
<div class="text">
|
||||
<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,
|
||||
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
|
||||
from Motteaux.”
|
||||
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, 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 from Motteaux.”
|
||||
</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
|
||||
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
|
||||
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.
|
||||
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 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 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>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,35 @@
|
|||
---
|
||||
import MainHead from '../../components/MainHead.astro';
|
||||
import Nav from '../../components/Nav.astro';
|
||||
import PostPreview from '../../components/PostPreview.astro';
|
||||
import authorData from '../../data/authors.json';
|
||||
import MainHead from "../../components/MainHead.astro";
|
||||
import Nav from "../../components/Nav.astro";
|
||||
import PostPreview from "../../components/PostPreview.astro";
|
||||
import authorData from "../../data/authors.json";
|
||||
|
||||
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))];
|
||||
return allAuthorsUnique.map((author) => ({ params: { author }, props: { allPosts } }));
|
||||
}
|
||||
|
||||
const { allPosts } = Astro.props;
|
||||
const title = 'Don’s Blog';
|
||||
const description = 'An example blog on Astro';
|
||||
const title = "Don’s Blog";
|
||||
const description = "An example blog on Astro";
|
||||
|
||||
/** 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];
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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">
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,24 @@
|
|||
---
|
||||
// Component Imports
|
||||
import MainHead from '../components/MainHead.astro';
|
||||
import Nav from '../components/Nav.astro';
|
||||
import PostPreview from '../components/PostPreview.astro';
|
||||
import Pagination from '../components/Pagination.astro';
|
||||
import authorData from '../data/authors.json';
|
||||
import MainHead from "../components/MainHead.astro";
|
||||
import Nav from "../components/Nav.astro";
|
||||
import PostPreview from "../components/PostPreview.astro";
|
||||
import Pagination from "../components/Pagination.astro";
|
||||
import authorData from "../data/authors.json";
|
||||
|
||||
// Component Script:
|
||||
// You can write any JavaScript/TypeScript that you'd like here.
|
||||
// It will run during the build, but never in the browser.
|
||||
// All variables are available to use in the HTML template below.
|
||||
let title = 'Don’s Blog';
|
||||
let description = 'An example blog on Astro';
|
||||
let title = "Don’s Blog";
|
||||
let description = "An example blog on Astro";
|
||||
let canonicalURL = Astro.canonicalURL;
|
||||
|
||||
// Data Fetching: List all Markdown posts in the repo.
|
||||
let allPosts = await Astro.glob('./post/*.md');
|
||||
allPosts.sort((a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf());
|
||||
let allPosts = await Astro.glob("./post/*.md");
|
||||
allPosts.sort(
|
||||
(a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf()
|
||||
);
|
||||
let firstPage = allPosts.slice(0, 2);
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
|
|
@ -31,7 +33,9 @@ let firstPage = allPosts.slice(0, 2);
|
|||
<Nav {title} />
|
||||
|
||||
<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>
|
||||
|
||||
<footer>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
---
|
||||
import MainHead from '../../components/MainHead.astro';
|
||||
import Nav from '../../components/Nav.astro';
|
||||
import PostPreview from '../../components/PostPreview.astro';
|
||||
import Pagination from '../../components/Pagination.astro';
|
||||
import authorData from '../../data/authors.json';
|
||||
import MainHead from "../../components/MainHead.astro";
|
||||
import Nav from "../../components/Nav.astro";
|
||||
import PostPreview from "../../components/PostPreview.astro";
|
||||
import Pagination from "../../components/Pagination.astro";
|
||||
import authorData from "../../data/authors.json";
|
||||
|
||||
export async function getStaticPaths({ paginate, rss }) {
|
||||
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 allPosts = await Astro.glob("../post/*.md");
|
||||
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.
|
||||
// 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
|
||||
const title = 'Don’s Blog';
|
||||
const description = 'An example blog on Astro';
|
||||
const title = "Don’s Blog";
|
||||
const description = "An example blog on Astro";
|
||||
const { canonicalURL } = Astro;
|
||||
const { page } = Astro.props;
|
||||
---
|
||||
|
|
@ -37,7 +39,14 @@ const { page } = Astro.props;
|
|||
<html lang="en">
|
||||
<head>
|
||||
<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">
|
||||
.title {
|
||||
|
|
@ -62,7 +71,9 @@ const { page } = Astro.props;
|
|||
<main class="wrapper">
|
||||
<h2 class="title">All Posts</h2>
|
||||
<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>
|
||||
|
||||
<footer>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import '../styles/blog.css';
|
||||
import "../styles/blog.css";
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
|
|
@ -35,4 +35,7 @@ const { title, description, permalink } = Astro.props;
|
|||
|
||||
<!-- Fonts -->
|
||||
<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>
|
||||
<h1>
|
||||
<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>
|
||||
#flame {
|
||||
fill: #ff5d01;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import Author from './Author.astro';
|
||||
import Author from "./Author.astro";
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
|
|
@ -16,7 +16,16 @@ const { title, author, publishDate, heroImage, alt } = Astro.props;
|
|||
<article class="content">
|
||||
<div>
|
||||
<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>
|
||||
<h1 class="title">{title}</h1>
|
||||
<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
|
||||
fill-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"
|
||||
fill="white"
|
||||
/>
|
||||
fill="white"></path>
|
||||
<path
|
||||
fill-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"
|
||||
fill="#FF5D01"
|
||||
/>
|
||||
fill="#FF5D01"></path>
|
||||
<path
|
||||
fill-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"
|
||||
fill="url(#paint1_linear)"
|
||||
/>
|
||||
fill="url(#paint1_linear)"></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"
|
||||
fill="white"
|
||||
/>
|
||||
fill="white"></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"
|
||||
fill="white"
|
||||
/>
|
||||
fill="white"></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"
|
||||
fill="white"
|
||||
/>
|
||||
fill="white"></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"
|
||||
fill="white"
|
||||
/>
|
||||
fill="white"></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"
|
||||
fill="white"
|
||||
/>
|
||||
fill="white"></path>
|
||||
<defs>
|
||||
<linearGradient id="paint1_linear" x1="115.168" y1="65.245" x2="94.0326" y2="109.491" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FF1639" />
|
||||
<stop offset="1" stop-color="#FF1639" stop-opacity="0" />
|
||||
<linearGradient
|
||||
id="paint1_linear"
|
||||
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>
|
||||
</defs>
|
||||
</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 BlogHeader from '../components/BlogHeader.astro';
|
||||
import BlogPost from '../components/BlogPost.astro';
|
||||
|
||||
import BaseHead from "../components/BaseHead.astro";
|
||||
import BlogHeader from "../components/BlogHeader.astro";
|
||||
import BlogPost from "../components/BlogPost.astro";
|
||||
|
||||
const { content } = Astro.props;
|
||||
const { title, description, publishDate, author, heroImage, permalink, alt } = content;
|
||||
---
|
||||
|
||||
<html lang={content.lang || 'en'}>
|
||||
<html lang={content.lang || "en"}>
|
||||
<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} />
|
||||
</head>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,24 @@
|
|||
---
|
||||
// Component Imports
|
||||
import BaseHead from '../components/BaseHead.astro';
|
||||
import BlogHeader from '../components/BlogHeader.astro';
|
||||
import BlogPostPreview from '../components/BlogPostPreview.astro';
|
||||
import BaseHead from "../components/BaseHead.astro";
|
||||
import BlogHeader from "../components/BlogHeader.astro";
|
||||
import BlogPostPreview from "../components/BlogPostPreview.astro";
|
||||
|
||||
// Component Script:
|
||||
// You can write any JavaScript/TypeScript that you'd like here.
|
||||
// It will run during the build, but never in the browser.
|
||||
// All variables are available to use in the HTML template below.
|
||||
let title = 'Example Blog';
|
||||
let description = 'The perfect starter for your perfect blog.';
|
||||
let permalink = 'https://example.com/';
|
||||
let title = "Example Blog";
|
||||
let description = "The perfect starter for your perfect blog.";
|
||||
let permalink = "https://example.com/";
|
||||
|
||||
// Data Fetching: List all Markdown posts in the repo.
|
||||
|
||||
let allPosts = await Astro.glob('./posts/*.md');
|
||||
allPosts = allPosts.sort((a, b) => new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf());
|
||||
let allPosts = await Astro.glob("./posts/*.md");
|
||||
allPosts = allPosts.sort(
|
||||
(a, b) =>
|
||||
new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf()
|
||||
);
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// 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">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ const { type, ...props } = {
|
|||
...Astro.props,
|
||||
} as Props;
|
||||
|
||||
props.type = type || 'button';
|
||||
props.type = type || "button";
|
||||
---
|
||||
|
||||
<button {...props}><slot /></button>
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ const { level, role, ...props } = {
|
|||
...Astro.props,
|
||||
} as Props;
|
||||
|
||||
props.role = role || 'heading';
|
||||
props['aria-level'] = level || '1';
|
||||
props.role = role || "heading";
|
||||
props["aria-level"] = level || "1";
|
||||
---
|
||||
|
||||
<h {...props}><slot /></h>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
// 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 commitsURL = `https://github.com/withastro/astro/commits/main/${path}`;
|
||||
|
||||
|
|
@ -8,16 +8,18 @@ async function getCommits(url) {
|
|||
try {
|
||||
const token = import.meta.env.SNOWPACK_PUBLIC_GITHUB_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, {
|
||||
method: 'GET',
|
||||
method: "GET",
|
||||
headers: {
|
||||
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) => (
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{additionalContributors > 0 && (
|
||||
<span>
|
||||
<a href={commitsURL}>{`and ${additionalContributors} additional contributor${additionalContributors > 1 ? 's' : ''}.`}</a>
|
||||
<a href={commitsURL}>{`and ${additionalContributors} additional contributor${
|
||||
additionalContributors > 1 ? "s" : ""
|
||||
}.`}</a>
|
||||
</span>
|
||||
)}
|
||||
{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;
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import '../styles/theme.css';
|
||||
import '../styles/index.css';
|
||||
import "../styles/theme.css";
|
||||
import "../styles/index.css";
|
||||
---
|
||||
|
||||
<!-- Global Metadata -->
|
||||
|
|
@ -15,19 +15,24 @@ import '../styles/index.css';
|
|||
<!-- Preload Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<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 -->
|
||||
<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 -->
|
||||
<script is:inline>
|
||||
const root = document.documentElement;
|
||||
const theme = localStorage.getItem('theme');
|
||||
if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
root.classList.add('theme-dark');
|
||||
const theme = localStorage.getItem("theme");
|
||||
if (theme === "dark" || (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
|
||||
root.classList.add("theme-dark");
|
||||
} else {
|
||||
root.classList.remove('theme-dark');
|
||||
root.classList.remove("theme-dark");
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import { SITE, OPEN_GRAPH } from '../config.ts';
|
||||
import { SITE, OPEN_GRAPH } from "../config.ts";
|
||||
export interface Props {
|
||||
content: 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:image" content={canonicalImageSrc} />
|
||||
<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} />
|
||||
|
||||
<!-- Twitter Tags -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content={OPEN_GRAPH.twitter} />
|
||||
<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:alt" content={imageAlt} />
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,14 @@
|
|||
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>
|
||||
#flame {
|
||||
fill: var(--theme-text-accent);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
---
|
||||
import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages.ts';
|
||||
import * as CONFIG from '../../config.ts';
|
||||
import AstroLogo from './AstroLogo.astro';
|
||||
import SkipToContent from './SkipToContent.astro';
|
||||
import SidebarToggle from './SidebarToggle.tsx';
|
||||
import LanguageSelect from './LanguageSelect.tsx';
|
||||
import Search from './Search.tsx';
|
||||
import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from "../../languages.ts";
|
||||
import * as CONFIG from "../../config.ts";
|
||||
import AstroLogo from "./AstroLogo.astro";
|
||||
import SkipToContent from "./SkipToContent.astro";
|
||||
import SidebarToggle from "./SidebarToggle.tsx";
|
||||
import LanguageSelect from "./LanguageSelect.tsx";
|
||||
import Search from "./Search.tsx";
|
||||
|
||||
const { currentPage } = Astro.props;
|
||||
const lang = currentPage && getLanguageFromURL(currentPage);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import { getLanguageFromURL } from '../../languages.ts';
|
||||
import { SIDEBAR } from '../../config.ts';
|
||||
import { getLanguageFromURL } from "../../languages.ts";
|
||||
import { SIDEBAR } from "../../config.ts";
|
||||
const { currentPage } = Astro.props;
|
||||
const currentPageMatch = currentPage.slice(1);
|
||||
const langCode = getLanguageFromURL(currentPage);
|
||||
|
|
@ -31,7 +31,10 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => {
|
|||
<ul>
|
||||
{section.children.map((child) => (
|
||||
<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}
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -44,10 +47,10 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => {
|
|||
</nav>
|
||||
|
||||
<script is:inline>
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
var target = document.querySelector('[aria-current="page"]');
|
||||
if (target && target.offsetTop > window.innerHeight - 100) {
|
||||
document.querySelector('.nav-groups').scrollTop = target.offsetTop;
|
||||
document.querySelector(".nav-groups").scrollTop = target.offsetTop;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -100,13 +103,13 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => {
|
|||
background-color: var(--theme-bg-hover);
|
||||
}
|
||||
|
||||
.nav-link a[aria-current='page'] {
|
||||
.nav-link a[aria-current="page"] {
|
||||
color: var(--theme-text-accent);
|
||||
background-color: var(--theme-bg-accent);
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import MoreMenu from '../RightSidebar/MoreMenu.astro';
|
||||
import TableOfContents from '../RightSidebar/TableOfContents.tsx';
|
||||
import MoreMenu from "../RightSidebar/MoreMenu.astro";
|
||||
import TableOfContents from "../RightSidebar/TableOfContents.tsx";
|
||||
|
||||
const { content, githubEditUrl } = Astro.props;
|
||||
const title = content.title;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import ThemeToggleButton from './ThemeToggleButton.tsx';
|
||||
import * as CONFIG from '../../config';
|
||||
import ThemeToggleButton from "./ThemeToggleButton.tsx";
|
||||
import * as CONFIG from "../../config";
|
||||
const { editHref } = Astro.props;
|
||||
const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref;
|
||||
---
|
||||
|
|
@ -25,7 +25,7 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref;
|
|||
<path
|
||||
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"
|
||||
></path>
|
||||
/>
|
||||
</svg>
|
||||
<span>Edit this page</span>
|
||||
</a>
|
||||
|
|
@ -49,7 +49,7 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref;
|
|||
<path
|
||||
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"
|
||||
></path>
|
||||
/>
|
||||
</svg>
|
||||
<span>Join our community</span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import TableOfContents from './TableOfContents.tsx';
|
||||
import MoreMenu from './MoreMenu.astro';
|
||||
import TableOfContents from "./TableOfContents.tsx";
|
||||
import MoreMenu from "./MoreMenu.astro";
|
||||
const { content, githubEditUrl } = Astro.props;
|
||||
const headers = content.astro.headers;
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
---
|
||||
import HeadCommon from '../components/HeadCommon.astro';
|
||||
import HeadSEO from '../components/HeadSEO.astro';
|
||||
import Header from '../components/Header/Header.astro';
|
||||
import Footer from '../components/Footer/Footer.astro';
|
||||
import PageContent from '../components/PageContent/PageContent.astro';
|
||||
import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
|
||||
import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
|
||||
import * as CONFIG from '../config';
|
||||
import HeadCommon from "../components/HeadCommon.astro";
|
||||
import HeadSEO from "../components/HeadSEO.astro";
|
||||
import Header from "../components/Header/Header.astro";
|
||||
import Footer from "../components/Footer/Footer.astro";
|
||||
import PageContent from "../components/PageContent/PageContent.astro";
|
||||
import LeftSidebar from "../components/LeftSidebar/LeftSidebar.astro";
|
||||
import RightSidebar from "../components/RightSidebar/RightSidebar.astro";
|
||||
import * as CONFIG from "../config";
|
||||
|
||||
const { content = {} } = Astro.props;
|
||||
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;
|
||||
---
|
||||
|
||||
<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>
|
||||
<HeadCommon />
|
||||
<HeadSEO {content} canonicalURL={Astro.canonicalURL} />
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ console.log({ SSR, PUBLIC_SOME_KEY });
|
|||
</head>
|
||||
<body>
|
||||
<h1>Hello, Environment Variables!</h1>
|
||||
<script src="/src/scripts/client.ts"></script>
|
||||
<script src="/src/scripts/client.ts">
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
// Component Imports
|
||||
import Counter from '../components/Counter.astro';
|
||||
import Counter from "../components/Counter.astro";
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
|
|
@ -24,7 +24,7 @@ import Counter from '../components/Counter.astro';
|
|||
|
||||
<!-- Load AlpineJS on the page -->
|
||||
<script>
|
||||
import Alpine from 'alpinejs';
|
||||
import Alpine from "alpinejs";
|
||||
window.Alpine = Alpine;
|
||||
Alpine.start();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,58 +1,106 @@
|
|||
<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
|
||||
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.
|
||||
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
|
||||
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.
|
||||
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
|
||||
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
|
||||
mauris pellentesque. In et tempor dolor. Cras blandit congue lorem at facilisis. Aenean vel lacinia quam. Pellentesque luctus metus ut scelerisque efficitur. Mauris laoreet
|
||||
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
|
||||
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
|
||||
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
|
||||
ligula auctor, sollicitudin pharetra lorem. Curabitur a lacus porttitor, venenatis est quis, mattis velit. Fusce hendrerit lobortis mi ac efficitur. Mauris ornare, lorem sed
|
||||
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
|
||||
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.
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
vestibulum massa at felis ullamcorper cursus. Pellentesque facilisis ante ut lectus vulputate vestibulum. Nullam pharetra felis ac lacus sodales, vel suscipit metus faucibus.
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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.
|
||||
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.
|
||||
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 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. 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 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. 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 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 mauris pellentesque. In et tempor dolor. Cras blandit congue lorem at facilisis. Aenean
|
||||
vel lacinia quam. Pellentesque luctus metus ut scelerisque efficitur. Mauris laoreet 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 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 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 ligula auctor, sollicitudin pharetra lorem. Curabitur a
|
||||
lacus porttitor, venenatis est quis, mattis velit. Fusce hendrerit lobortis mi ac efficitur.
|
||||
Mauris ornare, lorem sed 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 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. 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 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 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 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 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 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 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 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 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 vestibulum massa at felis ullamcorper cursus.
|
||||
Pellentesque facilisis ante ut lectus vulputate vestibulum. Nullam pharetra felis ac lacus
|
||||
sodales, vel suscipit metus faucibus. 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 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 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 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 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 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 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. 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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import Lorem from '../components/Lorem.astro';
|
||||
import { CalcAdd } from '../components/calc-add.js';
|
||||
import { MyCounter } from '../components/my-counter.js';
|
||||
import Lorem from "../components/Lorem.astro";
|
||||
import { CalcAdd } from "../components/calc-add.js";
|
||||
import { MyCounter } from "../components/my-counter.js";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -12,8 +12,8 @@ import { MyCounter } from '../components/my-counter.js';
|
|||
</head>
|
||||
<body>
|
||||
<h1>Test app</h1>
|
||||
<MyCounter client:load></MyCounter>
|
||||
<MyCounter client:load />
|
||||
<Lorem />
|
||||
<CalcAdd num={33}></CalcAdd>
|
||||
<CalcAdd num={33} />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
---
|
||||
// Style Imports
|
||||
import '../styles/global.css';
|
||||
import "../styles/global.css";
|
||||
// Component Imports
|
||||
import { A, B as Renamed } from '../components';
|
||||
import * as react from '../components/ReactCounter.jsx';
|
||||
import { PreactCounter } from '../components/PreactCounter.tsx';
|
||||
import PreactSFC from '../components/PreactSFC.tsx';
|
||||
import SolidCounter from '../components/SolidCounter.tsx';
|
||||
import VueCounter from '../components/VueCounter.vue';
|
||||
import SvelteCounter from '../components/SvelteCounter.svelte';
|
||||
import { A, B as Renamed } from "../components";
|
||||
import * as react from "../components/ReactCounter.jsx";
|
||||
import { PreactCounter } from "../components/PreactCounter.tsx";
|
||||
import PreactSFC from "../components/PreactSFC.tsx";
|
||||
import SolidCounter from "../components/SolidCounter.tsx";
|
||||
import VueCounter from "../components/VueCounter.vue";
|
||||
import SvelteCounter from "../components/SvelteCounter.svelte";
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
// Component Imports
|
||||
import Counter from '../components/Counter.tsx';
|
||||
import Counter from "../components/Counter.tsx";
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
// Component Imports
|
||||
import Counter from '../components/Counter.jsx';
|
||||
import Counter from "../components/Counter.jsx";
|
||||
const someProps = {
|
||||
count: 0,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import Counter from '../components/Counter.jsx';
|
||||
import Counter from "../components/Counter.jsx";
|
||||
---
|
||||
|
||||
<html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
// Component Imports
|
||||
import Counter from '../components/Counter.svelte';
|
||||
import Counter from "../components/Counter.svelte";
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
// Component Imports
|
||||
import Counter from '../components/Counter.vue';
|
||||
import Counter from "../components/Counter.vue";
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
|
|
|
|||
|
|
@ -1,66 +1,115 @@
|
|||
---
|
||||
//hey
|
||||
---
|
||||
|
||||
<style>
|
||||
p {
|
||||
color: red;
|
||||
}
|
||||
p {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<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
|
||||
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.
|
||||
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
|
||||
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.
|
||||
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
|
||||
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
|
||||
mauris pellentesque. In et tempor dolor. Cras blandit congue lorem at facilisis. Aenean vel lacinia quam. Pellentesque luctus metus ut scelerisque efficitur. Mauris laoreet
|
||||
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
|
||||
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
|
||||
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
|
||||
ligula auctor, sollicitudin pharetra lorem. Curabitur a lacus porttitor, venenatis est quis, mattis velit. Fusce hendrerit lobortis mi ac efficitur. Mauris ornare, lorem sed
|
||||
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
|
||||
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.
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
vestibulum massa at felis ullamcorper cursus. Pellentesque facilisis ante ut lectus vulputate vestibulum. Nullam pharetra felis ac lacus sodales, vel suscipit metus faucibus.
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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.
|
||||
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.
|
||||
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 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. 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 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. 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 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 mauris pellentesque. In et tempor dolor. Cras blandit congue lorem at facilisis. Aenean
|
||||
vel lacinia quam. Pellentesque luctus metus ut scelerisque efficitur. Mauris laoreet 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 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 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 ligula auctor, sollicitudin pharetra lorem. Curabitur a
|
||||
lacus porttitor, venenatis est quis, mattis velit. Fusce hendrerit lobortis mi ac efficitur.
|
||||
Mauris ornare, lorem sed 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 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. 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 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 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 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 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 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 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 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 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 vestibulum massa at felis ullamcorper cursus.
|
||||
Pellentesque facilisis ante ut lectus vulputate vestibulum. Nullam pharetra felis ac lacus
|
||||
sodales, vel suscipit metus faucibus. 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 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 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 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 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 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 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. 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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
// Page 2!
|
||||
import Link from '../components/Link.jsx';
|
||||
import Link from "../components/Link.jsx";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -10,6 +10,6 @@ import Link from '../components/Link.jsx';
|
|||
<title>Demo: Page 2</title>
|
||||
</head>
|
||||
<body>
|
||||
<Link to="/" text="Go Home" />
|
||||
<Link to="/" text="Go Home" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
import Lorem from '../components/Lorem.astro';
|
||||
import Link from '../components/Link.jsx';
|
||||
import SolidCounter from '../components/SolidCounter.jsx';
|
||||
import { CalcAdd } from '../components/calc-add.js';
|
||||
import { MyCounter } from '../components/my-counter.js';
|
||||
import Lorem from "../components/Lorem.astro";
|
||||
import Link from "../components/Link.jsx";
|
||||
import SolidCounter from "../components/SolidCounter.jsx";
|
||||
import { CalcAdd } from "../components/calc-add.js";
|
||||
import { MyCounter } from "../components/my-counter.js";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -15,39 +15,40 @@ import { MyCounter } from '../components/my-counter.js';
|
|||
<body>
|
||||
<h1 class="px-4 py-4">Test app</h1>
|
||||
<h2 class="partytown-status">
|
||||
<strong>Party Mode!</strong>
|
||||
Colors changing = partytown is enabled
|
||||
</h2>
|
||||
<MyCounter client:load></MyCounter>
|
||||
<SolidCounter client:load></SolidCounter>
|
||||
<Link to="/foo" text="Go to Page 2" />
|
||||
<strong>Party Mode!</strong>
|
||||
Colors changing = partytown is enabled
|
||||
</h2>
|
||||
<MyCounter client:load />
|
||||
<SolidCounter client:load />
|
||||
<Link to="/foo" text="Go to Page 2" />
|
||||
<Lorem />
|
||||
<CalcAdd num={33}></CalcAdd>
|
||||
<script type="text/partytown">
|
||||
// Remove `type="text/partytown"` to see this block the page
|
||||
// and cause the page to become unresponsive
|
||||
console.log('start partytown blocking script')
|
||||
const now = Date.now()
|
||||
let count = 1;
|
||||
while (Date.now() - now < 10000) {
|
||||
if (Date.now() - now > count * 1000) {
|
||||
console.log('blocking', count);
|
||||
count += 1;
|
||||
}
|
||||
}
|
||||
console.log('end partytown blocking script')
|
||||
</script>
|
||||
<CalcAdd num={33} />
|
||||
<script type="text/partytown">
|
||||
// Remove `type="text/partytown"` to see this block the page
|
||||
// and cause the page to become unresponsive
|
||||
console.log("start partytown blocking script");
|
||||
const now = Date.now();
|
||||
let count = 1;
|
||||
while (Date.now() - now < 10000) {
|
||||
if (Date.now() - now > count * 1000) {
|
||||
console.log("blocking", count);
|
||||
count += 1;
|
||||
}
|
||||
}
|
||||
console.log("end partytown blocking script");
|
||||
</script>
|
||||
|
||||
<script is:inline>
|
||||
setInterval(() => {
|
||||
const randomColor = Math.floor(Math.random()*16777215).toString(16);
|
||||
document.querySelector('.partytown-status').style.color = "#" + randomColor;
|
||||
}, 100);
|
||||
</script>
|
||||
<style>
|
||||
h1, h2 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<script is:inline>
|
||||
setInterval(() => {
|
||||
const randomColor = Math.floor(Math.random() * 16777215).toString(16);
|
||||
document.querySelector(".partytown-status").style.color = "#" + randomColor;
|
||||
}, 100);
|
||||
</script>
|
||||
<style>
|
||||
h1,
|
||||
h2 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
---
|
||||
|
||||
---
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
@ -12,7 +11,9 @@
|
|||
// can fetch them directly in the browser.
|
||||
const response = await fetch(`/about.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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
---
|
||||
import '../styles/global.scss';
|
||||
const { title = 'Jeanine White: Personal Site', description = 'The personal site of Jeanine White' } = Astro.props;
|
||||
import "../styles/global.scss";
|
||||
const {
|
||||
title = "Jeanine White: Personal Site",
|
||||
description = "The personal site of Jeanine White",
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<meta charset="UTF-8" />
|
||||
|
|
@ -9,6 +12,9 @@ const { title = 'Jeanine White: Personal Site', description = 'The personal site
|
|||
<title>{title}</title>
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<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 rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<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"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
import MainHead from '../components/MainHead.astro';
|
||||
import Button from '../components/Button/index.jsx';
|
||||
import Footer from '../components/Footer/index.jsx';
|
||||
import Nav from '../components/Nav/index.jsx';
|
||||
import MainHead from "../components/MainHead.astro";
|
||||
import Button from "../components/Button/index.jsx";
|
||||
import Footer from "../components/Footer/index.jsx";
|
||||
import Nav from "../components/Nav/index.jsx";
|
||||
|
||||
const { content } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang={content.lang || 'en'}>
|
||||
<html lang={content.lang || "en"}>
|
||||
<head>
|
||||
<MainHead title={content.title} description={content.description} />
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import MainHead from '../components/MainHead.astro';
|
||||
import Footer from '../components/Footer/index.jsx';
|
||||
import Nav from '../components/Nav/index.jsx';
|
||||
import MainHead from "../components/MainHead.astro";
|
||||
import Footer from "../components/Footer/index.jsx";
|
||||
import Nav from "../components/Nav/index.jsx";
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
|
|
@ -9,11 +9,11 @@ import Nav from '../components/Nav/index.jsx';
|
|||
<MainHead title="Not Found" />
|
||||
</head>
|
||||
<body>
|
||||
<nav />
|
||||
<nav></nav>
|
||||
<div class="wrapper mt4 mb4">
|
||||
<h1>Page Not Found</h1>
|
||||
<p>Not found</p>
|
||||
</div>
|
||||
<footer />
|
||||
<footer></footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import MainHead from '../components/MainHead.astro';
|
||||
import Footer from '../components/Footer/index.jsx';
|
||||
import Nav from '../components/Nav/index.jsx';
|
||||
import MainHead from "../components/MainHead.astro";
|
||||
import Footer from "../components/Footer/index.jsx";
|
||||
import Nav from "../components/Nav/index.jsx";
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
|
|
@ -29,29 +29,41 @@ import Nav from '../components/Nav/index.jsx';
|
|||
<div class="wrapper">
|
||||
<h1>About Jeanine</h1>
|
||||
<div class="heroImg">
|
||||
<img width="1400" height="350" src="https://images.unsplash.com/photo-1581977012607-4091712d36f9?auto=format&fit=crop&w=1400&h=350&q=75" />
|
||||
<img
|
||||
width="1400"
|
||||
height="350"
|
||||
src="https://images.unsplash.com/photo-1581977012607-4091712d36f9?auto=format&fit=crop&w=1400&h=350&q=75"
|
||||
/>
|
||||
</div>
|
||||
<div class="bio wrapper wrapper__readable mt8">
|
||||
<p>
|
||||
Cream cheese say cheese stinking bishop. Brie fondue hard cheese bocconcini feta camembert de normandie babybel airedale. Red leicester swiss manchego mascarpone pepper
|
||||
jack airedale fromage frais ricotta. Cheese and biscuits cauliflower cheese boursin.
|
||||
Cream cheese say cheese stinking bishop. Brie fondue hard cheese bocconcini feta camembert
|
||||
de normandie babybel airedale. Red leicester swiss manchego mascarpone pepper jack
|
||||
airedale fromage frais ricotta. Cheese and biscuits cauliflower cheese boursin.
|
||||
</p>
|
||||
<p>
|
||||
Pepper jack cheesy feet cheese slices. Halloumi port-salut queso caerphilly roquefort cheese slices cheesy feet rubber cheese. Cheese slices smelly cheese pecorino
|
||||
macaroni cheese feta blue castello roquefort edam. Babybel pepper jack airedale cheddar fromage frais manchego.
|
||||
Pepper jack cheesy feet cheese slices. Halloumi port-salut queso caerphilly roquefort
|
||||
cheese slices cheesy feet rubber cheese. Cheese slices smelly cheese pecorino macaroni
|
||||
cheese feta blue castello roquefort edam. Babybel pepper jack airedale cheddar fromage
|
||||
frais manchego.
|
||||
</p>
|
||||
<p>
|
||||
Cauliflower cheese lancashire macaroni cheese. Cheeseburger babybel cheese on toast airedale cauliflower cheese who moved my cheese roquefort paneer. Stinking bishop
|
||||
cheddar taleggio port-salut port-salut stinking bishop cheesy grin babybel. Blue castello feta everyone loves brie.
|
||||
Cauliflower cheese lancashire macaroni cheese. Cheeseburger babybel cheese on toast
|
||||
airedale cauliflower cheese who moved my cheese roquefort paneer. Stinking bishop cheddar
|
||||
taleggio port-salut port-salut stinking bishop cheesy grin babybel. Blue castello feta
|
||||
everyone loves brie.
|
||||
</p>
|
||||
<p>
|
||||
Goat squirty cheese cut the cheese. Cheese and wine cheddar fondue airedale cottage cheese camembert de normandie feta babybel. Rubber cheese melted cheese pecorino
|
||||
port-salut fondue gouda cheese on toast cheesy feet. Feta edam everyone loves cheese strings camembert de normandie.
|
||||
Goat squirty cheese cut the cheese. Cheese and wine cheddar fondue airedale cottage cheese
|
||||
camembert de normandie feta babybel. Rubber cheese melted cheese pecorino port-salut
|
||||
fondue gouda cheese on toast cheesy feet. Feta edam everyone loves cheese strings
|
||||
camembert de normandie.
|
||||
</p>
|
||||
<p>
|
||||
Caerphilly monterey jack goat. Squirty cheese cheesy grin hard cheese cheese strings cheese and biscuits croque monsieur smelly cheese danish fontina. Swiss cheese
|
||||
triangles everyone loves mascarpone cheese on toast who moved my cheese lancashire cheeseburger. Fromage frais fromage frais cheese and biscuits stinking bishop
|
||||
cauliflower cheese.
|
||||
Caerphilly monterey jack goat. Squirty cheese cheesy grin hard cheese cheese strings
|
||||
cheese and biscuits croque monsieur smelly cheese danish fontina. Swiss cheese triangles
|
||||
everyone loves mascarpone cheese on toast who moved my cheese lancashire cheeseburger.
|
||||
Fromage frais fromage frais cheese and biscuits stinking bishop cauliflower cheese.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
// Component Imports
|
||||
import MainHead from '../components/MainHead.astro';
|
||||
import Button from '../components/Button/index.jsx';
|
||||
import Nav from '../components/Nav/index.jsx';
|
||||
import Footer from '../components/Footer/index.jsx';
|
||||
import PortfolioPreview from '../components/PortfolioPreview/index.jsx';
|
||||
import MainHead from "../components/MainHead.astro";
|
||||
import Button from "../components/Button/index.jsx";
|
||||
import Nav from "../components/Nav/index.jsx";
|
||||
import Footer from "../components/Footer/index.jsx";
|
||||
import PortfolioPreview from "../components/PortfolioPreview/index.jsx";
|
||||
|
||||
// Data Fetching: List all Markdown posts in the repo.
|
||||
const projects = await Astro.glob('./project/**/*.md');
|
||||
const projects = await Astro.glob("./project/**/*.md");
|
||||
const featuredProject = projects[0];
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
|
|
@ -16,7 +16,10 @@ const featuredProject = projects[0];
|
|||
|
||||
<html lang="en">
|
||||
<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">
|
||||
$w-s: 750px;
|
||||
|
||||
|
|
@ -37,7 +40,7 @@ const featuredProject = projects[0];
|
|||
|
||||
.gradient,
|
||||
.gradient2 {
|
||||
background-image: url('/assets/mesh-gradient.jpg');
|
||||
background-image: url("/assets/mesh-gradient.jpg");
|
||||
background-size: cover;
|
||||
pointer-events: none;
|
||||
mix-blend-mode: screen;
|
||||
|
|
@ -198,7 +201,7 @@ const featuredProject = projects[0];
|
|||
<div class="gradient2"></div>
|
||||
<div class="overlay">
|
||||
<h1 class="title">
|
||||
<small class="subtitle">The personal site of </small>Jeanine White
|
||||
<small class="subtitle">The personal site of</small>Jeanine White
|
||||
</h1>
|
||||
<div>
|
||||
<span class="role">👩💻 Developer <span class="invert">👩💻 Developer</span></span>
|
||||
|
|
@ -222,9 +225,9 @@ const featuredProject = projects[0];
|
|||
<div class="section">
|
||||
<h3 class="sectionTitle">About me</h3>
|
||||
<p class="bio">
|
||||
<span>Hello!</span> I’m Jeanine, and this is my website. It was made using{' '}
|
||||
<a href="https://github.com/withastro/astro" target="_blank" rel="nofollow"> Astro </a>, a new way to build static sites. This is just an example template for you to
|
||||
modify.
|
||||
<span>Hello!</span> I’m Jeanine, and this is my website. It was made using{" "}
|
||||
<a href="https://github.com/withastro/astro" target="_blank" rel="nofollow"> Astro</a>,
|
||||
a new way to build static sites. This is just an example template for you to modify.
|
||||
</p>
|
||||
<p>
|
||||
<a href="/about">Read more</a>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,27 @@
|
|||
---
|
||||
import MainHead from '../components/MainHead.astro';
|
||||
import Footer from '../components/Footer/index.jsx';
|
||||
import Nav from '../components/Nav/index.jsx';
|
||||
import PortfolioPreview from '../components/PortfolioPreview/index.jsx';
|
||||
import MainHead from "../components/MainHead.astro";
|
||||
import Footer from "../components/Footer/index.jsx";
|
||||
import Nav from "../components/Nav/index.jsx";
|
||||
import PortfolioPreview from "../components/PortfolioPreview/index.jsx";
|
||||
|
||||
const projects = (await Astro.glob('./project/**/*.md'))
|
||||
const projects = (await Astro.glob("./project/**/*.md"))
|
||||
.filter(({ frontmatter }) => !!frontmatter.publishDate)
|
||||
.sort((a, b) => new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf());
|
||||
.sort(
|
||||
(a, b) =>
|
||||
new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf()
|
||||
);
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<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">
|
||||
.grid {
|
||||
display: grid;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
---
|
||||
const { tag = 'div' } = Astro.props;
|
||||
const { tag = "div" } = Astro.props;
|
||||
const Tag = tag;
|
||||
---
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 1248px; /** TODO: responsive */
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
---
|
||||
import TextDecorationSkip from './TextDecorationSkip.astro';
|
||||
import Cart from './Cart.svelte';
|
||||
import { getCart } from '../api';
|
||||
import TextDecorationSkip from "./TextDecorationSkip.astro";
|
||||
import Cart from "./Cart.svelte";
|
||||
import { getCart } from "../api";
|
||||
|
||||
const cart = await getCart(Astro.request);
|
||||
const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0);
|
||||
---
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");
|
||||
|
||||
header {
|
||||
margin: 1rem 2rem;
|
||||
|
|
@ -17,11 +18,12 @@ const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0);
|
|||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-family: 'Lobster', cursive;
|
||||
font-family: "Lobster", cursive;
|
||||
color: black;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
a,
|
||||
a:visited {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -35,14 +37,12 @@ const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0);
|
|||
margin-right: 1rem;
|
||||
}
|
||||
</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>
|
||||
<h1><a href="/"><TextDecorationSkip text="Online Store" /></a></h1>
|
||||
<div class="right-pane">
|
||||
<a href="/login">
|
||||
<span class="material-icons">
|
||||
login
|
||||
</span>
|
||||
<span class="material-icons"> login</span>
|
||||
</a>
|
||||
<Cart client:idle count={cartCount} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
const { products } = Astro.props;
|
||||
---
|
||||
|
||||
<style>
|
||||
ul {
|
||||
list-style-type: none;
|
||||
|
|
@ -45,17 +46,17 @@ const { products } = Astro.props;
|
|||
</style>
|
||||
<slot name="title"></slot>
|
||||
<ul>
|
||||
{products.map(product => (
|
||||
<li class="product">
|
||||
<a href={`/products/${product.id}`}>
|
||||
<figure>
|
||||
<img src={product.image} />
|
||||
<figcaption>
|
||||
<div class="name">{product.name}</div>
|
||||
<div class="price">${product.price}</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
{products.map((product) => (
|
||||
<li class="product">
|
||||
<a href={`/products/${product.id}`}>
|
||||
<figure>
|
||||
<img src={product.image} />
|
||||
<figcaption>
|
||||
<div class="name">{product.name}</div>
|
||||
<div class="price">${product.price}</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
---
|
||||
const { text } = Astro.props;
|
||||
const words = text.split(' ');
|
||||
const words = text.split(" ");
|
||||
const last = words.length - 1;
|
||||
---
|
||||
|
||||
<style>
|
||||
span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
{words.map((word, i) => (
|
||||
<Fragment>
|
||||
<span>{word}</span>{i !== last && (<Fragment> </Fragment>)}
|
||||
<span>{word}</span>
|
||||
{i !== last && <Fragment> </Fragment>}
|
||||
</Fragment>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -1,47 +1,50 @@
|
|||
---
|
||||
import Header from '../components/Header.astro';
|
||||
import Container from '../components/Container.astro';
|
||||
import { getCart } from '../api';
|
||||
import { isLoggedIn } from '../models/user';
|
||||
import Header from "../components/Header.astro";
|
||||
import Container from "../components/Container.astro";
|
||||
import { getCart } from "../api";
|
||||
import { isLoggedIn } from "../models/user";
|
||||
|
||||
if(!isLoggedIn(Astro.request)) {
|
||||
return Astro.redirect('/');
|
||||
if (!isLoggedIn(Astro.request)) {
|
||||
return Astro.redirect("/");
|
||||
}
|
||||
|
||||
// They must be logged in.
|
||||
|
||||
const user = { name: 'test'}; // getUser?
|
||||
const user = { name: "test" }; // getUser?
|
||||
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">
|
||||
<h1>Cart</h1>
|
||||
<p>Hi { user.name }! Here are your cart items:</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<head>
|
||||
<title>Cart | Online Store</title>
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
|
||||
<Container tag="main">
|
||||
<h1>Cart</h1>
|
||||
<p>Hi {user.name}! Here are your cart items:</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,36 @@
|
|||
---
|
||||
import Header from '../components/Header.astro';
|
||||
import Container from '../components/Container.astro';
|
||||
import ProductListing from '../components/ProductListing.astro';
|
||||
import { getProducts } from '../api';
|
||||
import '../styles/common.css';
|
||||
import Header from "../components/Header.astro";
|
||||
import Container from "../components/Container.astro";
|
||||
import ProductListing from "../components/ProductListing.astro";
|
||||
import { getProducts } from "../api";
|
||||
import "../styles/common.css";
|
||||
|
||||
const products = await getProducts(Astro.request);
|
||||
---
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Online Store</title>
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
<head>
|
||||
<title>Online Store</title>
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.product-listing-title {
|
||||
text-align: center;
|
||||
}
|
||||
.product-listing-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-listing {
|
||||
.product-listing {
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
|
||||
<Container tag="main">
|
||||
<ProductListing products={products} class="product-listing">
|
||||
<h2 class="product-listing-title" slot="title">Product Listing</h2>
|
||||
</ProductListing>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,31 @@
|
|||
---
|
||||
import Header from '../components/Header.astro';
|
||||
import Container from '../components/Container.astro';
|
||||
import Header from "../components/Header.astro";
|
||||
import Container from "../components/Container.astro";
|
||||
---
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Online Store</title>
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<head>
|
||||
<title>Online Store</title>
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
|
||||
<Container tag="main">
|
||||
<h1>Login</h1>
|
||||
<form action="/login.form" method="POST">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name">
|
||||
<Container tag="main">
|
||||
<h1>Login</h1>
|
||||
<form action="/login.form" method="POST">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" />
|
||||
|
||||
<label for="password">Password</label>
|
||||
<input type="password" name="password">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" name="password" />
|
||||
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
</Container>
|
||||
</body>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</Container>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,46 +1,45 @@
|
|||
---
|
||||
import Header from '../../components/Header.astro';
|
||||
import Container from '../../components/Container.astro';
|
||||
import AddToCart from '../../components/AddToCart.svelte';
|
||||
import { getProduct } from '../../api';
|
||||
import '../../styles/common.css';
|
||||
import Header from "../../components/Header.astro";
|
||||
import Container from "../../components/Container.astro";
|
||||
import AddToCart from "../../components/AddToCart.svelte";
|
||||
import { getProduct } from "../../api";
|
||||
import "../../styles/common.css";
|
||||
|
||||
const id = Number(Astro.params.id);
|
||||
const product = await getProduct(Astro.request, id);
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{product.name} | Online Store</title>
|
||||
<style>
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
<head>
|
||||
<title>{product.name} | Online Store</title>
|
||||
<style>
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
figure {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
figure {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
|
||||
<Container tag="article">
|
||||
<h2>{product.name}</h2>
|
||||
<figure>
|
||||
img {
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
|
||||
<Container tag="article">
|
||||
<h2>{product.name}</h2>
|
||||
<figure>
|
||||
<img src={product.image} />
|
||||
<figcaption>
|
||||
<AddToCart client:idle id={id} name={product.name} />
|
||||
<p>Description here...</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
</Container>
|
||||
</body>
|
||||
<figcaption>
|
||||
<AddToCart client:idle id={id} name={product.name} />
|
||||
<p>Description here...</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</Container>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
---
|
||||
// Export a "Props" interface to .
|
||||
export interface Props {
|
||||
height?: number,
|
||||
width?: number,
|
||||
height?: 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 Logo from '../components/Logo.astro';
|
||||
import '../styles/global.css';
|
||||
import '../styles/home.css';
|
||||
import { Content as TourContent } from "../content/Tour.md";
|
||||
import Logo from "../components/Logo.astro";
|
||||
import "../styles/global.css";
|
||||
import "../styles/home.css";
|
||||
/* ASTRO:COMPONENT_IMPORTS */
|
||||
|
||||
// Component Script:
|
||||
// You can write any JavaScript/TypeScript that you'd like here.
|
||||
// It will run during the build, but never in the browser.
|
||||
// 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:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>{title}</title>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>{title}</title>
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
|
||||
<style>
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
max-width: min(100%, 68ch);
|
||||
}
|
||||
article {
|
||||
padding-top: 2em;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
max-width: 70ch;
|
||||
}
|
||||
.banner {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
background: var(--color-light);
|
||||
padding: 1em 1.5em;
|
||||
padding-left: 0.75em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
<style is:global>
|
||||
pre {
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<header>
|
||||
<div>
|
||||
<Logo width={60} height={80} />
|
||||
<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
|
||||
</div>
|
||||
</header>
|
||||
<style>
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
max-width: min(100%, 68ch);
|
||||
}
|
||||
article {
|
||||
padding-top: 2em;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
max-width: 70ch;
|
||||
}
|
||||
.banner {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
background: var(--color-light);
|
||||
padding: 1em 1.5em;
|
||||
padding-left: 0.75em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
<style is:global>
|
||||
pre {
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<header>
|
||||
<div>
|
||||
<Logo width={60} height={80} />
|
||||
<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<div class="banner">
|
||||
<p><strong>🧑🚀 Seasoned astronaut?</strong> Delete this template and have fun!</p>
|
||||
</div>
|
||||
<TourContent />
|
||||
</article>
|
||||
<article>
|
||||
<div class="banner">
|
||||
<p><strong>🧑🚀 Seasoned astronaut?</strong> Delete this template and have fun!</p>
|
||||
</div>
|
||||
<TourContent />
|
||||
</article>
|
||||
|
||||
<!--
|
||||
<!--
|
||||
|
||||
You can also use imported framework components directly in your markup!
|
||||
|
||||
|
|
@ -79,7 +80,7 @@ let title = 'My Astro Site';
|
|||
|
||||
-->
|
||||
|
||||
<!-- ASTRO:COMPONENT_MARKUP -->
|
||||
</main>
|
||||
</body>
|
||||
<!-- ASTRO:COMPONENT_MARKUP -->
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import '../styles/main.scss';
|
||||
import Time from '../components/Time.jsx';
|
||||
import "../styles/main.scss";
|
||||
import Time from "../components/Time.jsx";
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
import '../styles/global.css';
|
||||
import "../styles/global.css";
|
||||
|
||||
const { content } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang={content.lang || 'en'}>
|
||||
<html lang={content.lang || "en"}>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
import { Markdown } from 'astro/components';
|
||||
import MainLayout from '../layouts/main.astro';
|
||||
import { Markdown } from "astro/components";
|
||||
import MainLayout from "../layouts/main.astro";
|
||||
---
|
||||
|
||||
<MainLayout content={{ title: 'About' }}>
|
||||
<MainLayout content={{ title: "About" }}>
|
||||
<Markdown>
|
||||
# About
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
import '../styles/global.css';
|
||||
import "../styles/global.css";
|
||||
|
||||
const { content } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang={content.lang || 'en'}>
|
||||
<html lang={content.lang || "en"}>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
import '../styles/global.css';
|
||||
import "../styles/global.css";
|
||||
|
||||
const { content } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang={content.lang || 'en'}>
|
||||
<html lang={content.lang || "en"}>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import { Markdown } from 'astro/components';
|
||||
import Layout from '../layouts/main.astro';
|
||||
import { Markdown } from "astro/components";
|
||||
import Layout from "../layouts/main.astro";
|
||||
|
||||
const title = `External Markdown`;
|
||||
const content = `Markdown *content* to render`;
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
---
|
||||
// Component Imports
|
||||
import { Markdown } from 'astro/components';
|
||||
import Layout from '../layouts/main.astro';
|
||||
import ReactCounter from '../components/ReactCounter.jsx';
|
||||
import PreactCounter from '../components/PreactCounter.tsx';
|
||||
import VueCounter from '../components/VueCounter.vue';
|
||||
import SvelteCounter from '../components/SvelteCounter.svelte';
|
||||
import { Markdown } from "astro/components";
|
||||
import Layout from "../layouts/main.astro";
|
||||
import ReactCounter from "../components/ReactCounter.jsx";
|
||||
import PreactCounter from "../components/PreactCounter.tsx";
|
||||
import VueCounter from "../components/VueCounter.vue";
|
||||
import SvelteCounter from "../components/SvelteCounter.svelte";
|
||||
|
||||
// Component Script:
|
||||
// You can write any JavaScript/TypeScript that you'd like here.
|
||||
// It will run during the build, but never in the browser.
|
||||
// All variables are available to use in the HTML template below.
|
||||
const title = 'Astro Markdown';
|
||||
const variable = 'content';
|
||||
const items = ['A', 'B', 'C'];
|
||||
const title = "Astro Markdown";
|
||||
const variable = "content";
|
||||
const items = ["A", "B", "C"];
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
|
|
@ -57,7 +57,7 @@ const items = ['A', 'B', 'C'];
|
|||
Should work!
|
||||
|
||||
```js
|
||||
import Something from './another';
|
||||
import Something from "./another";
|
||||
|
||||
const thing = new Something();
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
// Style Imports
|
||||
import '../styles/global.css';
|
||||
import '../styles/home.css';
|
||||
import "../styles/global.css";
|
||||
import "../styles/home.css";
|
||||
|
||||
// Component Imports
|
||||
import AdminsReact from '../components/AdminsReact.jsx';
|
||||
import AdminsSvelte from '../components/AdminsSvelte.svelte';
|
||||
import AdminsVue from '../components/AdminsVue.vue';
|
||||
import AdminsSolid from '../components/AdminsSolid.jsx';
|
||||
import AdminsReact from "../components/AdminsReact.jsx";
|
||||
import AdminsSvelte from "../components/AdminsSvelte.svelte";
|
||||
import AdminsVue from "../components/AdminsVue.vue";
|
||||
import AdminsSolid from "../components/AdminsSolid.jsx";
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
|
|
|
|||
|
|
@ -2,11 +2,14 @@
|
|||
// Click button, get confetti!
|
||||
// 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 />
|
||||
</button>
|
||||
|
||||
<script>
|
||||
import confetti from 'canvas-confetti';
|
||||
document.body.querySelector('button').addEventListener("click", () => confetti());
|
||||
import confetti from "canvas-confetti";
|
||||
document.body.querySelector("button").addEventListener("click", () => confetti());
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
// Component Imports
|
||||
import Button from '../components/Button.astro';
|
||||
import Button from "../components/Button.astro";
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@
|
|||
|
||||
<body>
|
||||
<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
|
||||
<script src="/src/index.ts"></script>
|
||||
<script src="/src/index.ts">
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue