diff options
| author |  Marcus OtterstrΓΆm <github@otterstrom.dev>
| 2022-07-08 22:08:32 +0200 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-07-08 22:08:32 +0200 |
| commit | 59e8c71786fd1c154904b3fefa7d26d88f4d92d2 (patch) | |
| tree | 3a352e838b25a402c608913aeca21f471d75a826 | |
| parent | 1f9e4857ff2b2cb7db89d619618cdf546cd3b3dc (diff) | |
| download | astro-59e8c71786fd1c154904b3fefa7d26d88f4d92d2.tar.gz astro-59e8c71786fd1c154904b3fefa7d26d88f4d92d2.tar.zst astro-59e8c71786fd1c154904b3fefa7d26d88f4d92d2.zip | |
Format astro files in examples (#3862)
73 files changed, 957 insertions, 694 deletions
diff --git a/examples/basics/src/components/Card.astro b/examples/basics/src/components/Card.astro index 53b67a9da..4039d4f4f 100644 --- a/examples/basics/src/components/Card.astro +++ b/examples/basics/src/components/Card.astro @@ -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 { diff --git a/examples/basics/src/layouts/Layout.astro b/examples/basics/src/layouts/Layout.astro index fe43c7e27..9a46f2d8e 100644 --- a/examples/basics/src/layouts/Layout.astro +++ b/examples/basics/src/layouts/Layout.astro @@ -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> diff --git a/examples/basics/src/pages/index.astro b/examples/basics/src/pages/index.astro index ea7401f11..cf05f0bb6 100644 --- a/examples/basics/src/pages/index.astro +++ b/examples/basics/src/pages/index.astro @@ -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); } diff --git a/examples/blog-multiple-authors/src/components/MainHead.astro b/examples/blog-multiple-authors/src/components/MainHead.astro index ca129df8d..be3584519 100644 --- a/examples/blog-multiple-authors/src/components/MainHead.astro +++ b/examples/blog-multiple-authors/src/components/MainHead.astro @@ -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} />} diff --git a/examples/blog-multiple-authors/src/components/Pagination.astro b/examples/blog-multiple-authors/src/components/Pagination.astro index 8cc3941f6..f31f00776 100644 --- a/examples/blog-multiple-authors/src/components/Pagination.astro +++ b/examples/blog-multiple-authors/src/components/Pagination.astro @@ -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; } } diff --git a/examples/blog-multiple-authors/src/components/PostPreview.astro b/examples/blog-multiple-authors/src/components/PostPreview.astro index 5a9808348..cf1579203 100644 --- a/examples/blog-multiple-authors/src/components/PostPreview.astro +++ b/examples/blog-multiple-authors/src/components/PostPreview.astro @@ -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 } --- diff --git a/examples/blog-multiple-authors/src/layouts/post.astro b/examples/blog-multiple-authors/src/layouts/post.astro index bbfc7b335..b940bbb40 100644 --- a/examples/blog-multiple-authors/src/layouts/post.astro +++ b/examples/blog-multiple-authors/src/layouts/post.astro @@ -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; diff --git a/examples/blog-multiple-authors/src/pages/about.astro b/examples/blog-multiple-authors/src/pages/about.astro index f1097a6f4..2d2c9665b 100644 --- a/examples/blog-multiple-authors/src/pages/about.astro +++ b/examples/blog-multiple-authors/src/pages/about.astro @@ -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> diff --git a/examples/blog-multiple-authors/src/pages/authors/[author].astro b/examples/blog-multiple-authors/src/pages/authors/[author].astro index bb1bc3aa2..cc83c6bbb 100644 --- a/examples/blog-multiple-authors/src/pages/authors/[author].astro +++ b/examples/blog-multiple-authors/src/pages/authors/[author].astro @@ -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 { diff --git a/examples/blog-multiple-authors/src/pages/index.astro b/examples/blog-multiple-authors/src/pages/index.astro index 4e93a932e..91168ed43 100644 --- a/examples/blog-multiple-authors/src/pages/index.astro +++ b/examples/blog-multiple-authors/src/pages/index.astro @@ -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> diff --git a/examples/blog-multiple-authors/src/pages/posts/[...page].astro b/examples/blog-multiple-authors/src/pages/posts/[...page].astro index f770aadb2..8a6c9a730 100644 --- a/examples/blog-multiple-authors/src/pages/posts/[...page].astro +++ b/examples/blog-multiple-authors/src/pages/posts/[...page].astro @@ -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> diff --git a/examples/blog/src/components/BaseHead.astro b/examples/blog/src/components/BaseHead.astro index 2725363a6..8bc4036a9 100644 --- a/examples/blog/src/components/BaseHead.astro +++ b/examples/blog/src/components/BaseHead.astro @@ -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" +/> diff --git a/examples/blog/src/components/BlogHeader.astro b/examples/blog/src/components/BlogHeader.astro index 4d32e87d8..ebecef7d8 100644 --- a/examples/blog/src/components/BlogHeader.astro +++ b/examples/blog/src/components/BlogHeader.astro @@ -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; diff --git a/examples/blog/src/components/BlogPost.astro b/examples/blog/src/components/BlogPost.astro index 2dba32c3d..55eaa66ed 100644 --- a/examples/blog/src/components/BlogPost.astro +++ b/examples/blog/src/components/BlogPost.astro @@ -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" /> diff --git a/examples/blog/src/components/Logo.astro b/examples/blog/src/components/Logo.astro index a92927536..2c2c759f0 100644 --- a/examples/blog/src/components/Logo.astro +++ b/examples/blog/src/components/Logo.astro @@ -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> diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro index 50e854511..82e1f31ab 100644 --- a/examples/blog/src/layouts/BlogPost.astro +++ b/examples/blog/src/layouts/BlogPost.astro @@ -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> diff --git a/examples/blog/src/pages/index.astro b/examples/blog/src/pages/index.astro index 1e1264533..b278c5510 100644 --- a/examples/blog/src/pages/index.astro +++ b/examples/blog/src/pages/index.astro @@ -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/ diff --git a/examples/component/demo/src/pages/index.astro b/examples/component/demo/src/pages/index.astro index bfdf495a8..e251a69ae 100644 --- a/examples/component/demo/src/pages/index.astro +++ b/examples/component/demo/src/pages/index.astro @@ -1,5 +1,5 @@ --- -import * as Component from '@example/my-component'; +import * as Component from "@example/my-component"; --- <html lang="en"> diff --git a/examples/component/packages/my-component/Button.astro b/examples/component/packages/my-component/Button.astro index 5f32ce4e8..69b3b5eb5 100644 --- a/examples/component/packages/my-component/Button.astro +++ b/examples/component/packages/my-component/Button.astro @@ -7,7 +7,7 @@ const { type, ...props } = { ...Astro.props, } as Props; -props.type = type || 'button'; +props.type = type || "button"; --- <button {...props}><slot /></button> diff --git a/examples/component/packages/my-component/Heading.astro b/examples/component/packages/my-component/Heading.astro index 813c0c11b..00f8926cc 100644 --- a/examples/component/packages/my-component/Heading.astro +++ b/examples/component/packages/my-component/Heading.astro @@ -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> diff --git a/examples/docs/src/components/Footer/AvatarList.astro b/examples/docs/src/components/Footer/AvatarList.astro index c57ee2eb1..6f3ff1a7f 100644 --- a/examples/docs/src/components/Footer/AvatarList.astro +++ b/examples/docs/src/components/Footer/AvatarList.astro @@ -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>} diff --git a/examples/docs/src/components/Footer/Footer.astro b/examples/docs/src/components/Footer/Footer.astro index d13f832e5..ab0634976 100644 --- a/examples/docs/src/components/Footer/Footer.astro +++ b/examples/docs/src/components/Footer/Footer.astro @@ -1,5 +1,5 @@ --- -import AvatarList from './AvatarList.astro'; +import AvatarList from "./AvatarList.astro"; const { path } = Astro.props; --- diff --git a/examples/docs/src/components/HeadCommon.astro b/examples/docs/src/components/HeadCommon.astro index b6a74cdc6..bc3a3955a 100644 --- a/examples/docs/src/components/HeadCommon.astro +++ b/examples/docs/src/components/HeadCommon.astro @@ -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> diff --git a/examples/docs/src/components/HeadSEO.astro b/examples/docs/src/components/HeadSEO.astro index 003872bc9..5d1a2bcb5 100644 --- a/examples/docs/src/components/HeadSEO.astro +++ b/examples/docs/src/components/HeadSEO.astro @@ -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} /> diff --git a/examples/docs/src/components/Header/AstroLogo.astro b/examples/docs/src/components/Header/AstroLogo.astro index 7d6891dcb..840cbf139 100644 --- a/examples/docs/src/components/Header/AstroLogo.astro +++ b/examples/docs/src/components/Header/AstroLogo.astro @@ -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); diff --git a/examples/docs/src/components/Header/Header.astro b/examples/docs/src/components/Header/Header.astro index ca787dc63..0e493b25d 100644 --- a/examples/docs/src/components/Header/Header.astro +++ b/examples/docs/src/components/Header/Header.astro @@ -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); diff --git a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro index 107423385..68c70de2a 100644 --- a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro +++ b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro @@ -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); } diff --git a/examples/docs/src/components/PageContent/PageContent.astro b/examples/docs/src/components/PageContent/PageContent.astro index 32db5cd58..1d14515c1 100644 --- a/examples/docs/src/components/PageContent/PageContent.astro +++ b/examples/docs/src/components/PageContent/PageContent.astro @@ -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; diff --git a/examples/docs/src/components/RightSidebar/MoreMenu.astro b/examples/docs/src/components/RightSidebar/MoreMenu.astro index 649e02c29..a78f86d59 100644 --- a/examples/docs/src/components/RightSidebar/MoreMenu.astro +++ b/examples/docs/src/components/RightSidebar/MoreMenu.astro @@ -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> diff --git a/examples/docs/src/components/RightSidebar/RightSidebar.astro b/examples/docs/src/components/RightSidebar/RightSidebar.astro index a0b5779dc..f61fb010f 100644 --- a/examples/docs/src/components/RightSidebar/RightSidebar.astro +++ b/examples/docs/src/components/RightSidebar/RightSidebar.astro @@ -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; --- diff --git a/examples/docs/src/layouts/MainLayout.astro b/examples/docs/src/layouts/MainLayout.astro index 9939592a9..e9812acdd 100644 --- a/examples/docs/src/layouts/MainLayout.astro +++ b/examples/docs/src/layouts/MainLayout.astro @@ -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} /> diff --git a/examples/env-vars/src/pages/index.astro b/examples/env-vars/src/pages/index.astro index b48fac193..35a441c63 100644 --- a/examples/env-vars/src/pages/index.astro +++ b/examples/env-vars/src/pages/index.astro @@ -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> diff --git a/examples/framework-alpine/src/pages/index.astro b/examples/framework-alpine/src/pages/index.astro index 19b7e6741..7517f3eb4 100644 --- a/examples/framework-alpine/src/pages/index.astro +++ b/examples/framework-alpine/src/pages/index.astro @@ -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> diff --git a/examples/framework-lit/src/components/Lorem.astro b/examples/framework-lit/src/components/Lorem.astro index b4040980e..d742ef6a5 100644 --- a/examples/framework-lit/src/components/Lorem.astro +++ b/examples/framework-lit/src/components/Lorem.astro @@ -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> diff --git a/examples/framework-lit/src/pages/index.astro b/examples/framework-lit/src/pages/index.astro index 3f45d057f..faa131524 100644 --- a/examples/framework-lit/src/pages/index.astro +++ b/examples/framework-lit/src/pages/index.astro @@ -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> diff --git a/examples/framework-multiple/src/pages/index.astro b/examples/framework-multiple/src/pages/index.astro index 30b422c0a..6dfdc4e52 100644 --- a/examples/framework-multiple/src/pages/index.astro +++ b/examples/framework-multiple/src/pages/index.astro @@ -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/ diff --git a/examples/framework-preact/src/pages/index.astro b/examples/framework-preact/src/pages/index.astro index 77ce1c2c7..dc2d35fc0 100644 --- a/examples/framework-preact/src/pages/index.astro +++ b/examples/framework-preact/src/pages/index.astro @@ -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/ diff --git a/examples/framework-react/src/pages/index.astro b/examples/framework-react/src/pages/index.astro index 39a15a797..8f3142393 100644 --- a/examples/framework-react/src/pages/index.astro +++ b/examples/framework-react/src/pages/index.astro @@ -1,6 +1,6 @@ --- // Component Imports -import Counter from '../components/Counter.jsx'; +import Counter from "../components/Counter.jsx"; const someProps = { count: 0, }; diff --git a/examples/framework-solid/src/pages/index.astro b/examples/framework-solid/src/pages/index.astro index feb30a401..710ad1687 100644 --- a/examples/framework-solid/src/pages/index.astro +++ b/examples/framework-solid/src/pages/index.astro @@ -1,5 +1,5 @@ --- -import Counter from '../components/Counter.jsx'; +import Counter from "../components/Counter.jsx"; --- <html> diff --git a/examples/framework-svelte/src/pages/index.astro b/examples/framework-svelte/src/pages/index.astro index 2cc0fed69..4c0146057 100644 --- a/examples/framework-svelte/src/pages/index.astro +++ b/examples/framework-svelte/src/pages/index.astro @@ -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/ diff --git a/examples/framework-vue/src/pages/index.astro b/examples/framework-vue/src/pages/index.astro index 98a667f77..b7eadbfe3 100644 --- a/examples/framework-vue/src/pages/index.astro +++ b/examples/framework-vue/src/pages/index.astro @@ -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/ diff --git a/examples/integrations-playground/src/components/Lorem.astro b/examples/integrations-playground/src/components/Lorem.astro index 7a3ad924a..1355c1313 100644 --- a/examples/integrations-playground/src/components/Lorem.astro +++ b/examples/integrations-playground/src/components/Lorem.astro @@ -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> diff --git a/examples/integrations-playground/src/pages/foo.astro b/examples/integrations-playground/src/pages/foo.astro index fbdd5bb1f..0e9785f14 100644 --- a/examples/integrations-playground/src/pages/foo.astro +++ b/examples/integrations-playground/src/pages/foo.astro @@ -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> diff --git a/examples/integrations-playground/src/pages/index.astro b/examples/integrations-playground/src/pages/index.astro index 66475f3e7..f2b0d2c8a 100644 --- a/examples/integrations-playground/src/pages/index.astro +++ b/examples/integrations-playground/src/pages/index.astro @@ -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> diff --git a/examples/minimal/src/pages/index.astro b/examples/minimal/src/pages/index.astro index 346e155c4..4389d5d25 100644 --- a/examples/minimal/src/pages/index.astro +++ b/examples/minimal/src/pages/index.astro @@ -1,6 +1,6 @@ --- - --- + <html lang="en"> <head> <meta charset="utf-8" /> diff --git a/examples/non-html-pages/src/pages/index.astro b/examples/non-html-pages/src/pages/index.astro index 9abb797e4..b6fc1decf 100644 --- a/examples/non-html-pages/src/pages/index.astro +++ b/examples/non-html-pages/src/pages/index.astro @@ -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> diff --git a/examples/portfolio/src/components/MainHead.astro b/examples/portfolio/src/components/MainHead.astro index 935923060..9d9bc209d 100644 --- a/examples/portfolio/src/components/MainHead.astro +++ b/examples/portfolio/src/components/MainHead.astro @@ -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" +/> diff --git a/examples/portfolio/src/layouts/project.astro b/examples/portfolio/src/layouts/project.astro index aba14a5ac..81d67ad39 100644 --- a/examples/portfolio/src/layouts/project.astro +++ b/examples/portfolio/src/layouts/project.astro @@ -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"> diff --git a/examples/portfolio/src/pages/404.astro b/examples/portfolio/src/pages/404.astro index 39f5994ae..f4ad66119 100644 --- a/examples/portfolio/src/pages/404.astro +++ b/examples/portfolio/src/pages/404.astro @@ -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> diff --git a/examples/portfolio/src/pages/about.astro b/examples/portfolio/src/pages/about.astro index fad3d6ad3..4cc72233b 100644 --- a/examples/portfolio/src/pages/about.astro +++ b/examples/portfolio/src/pages/about.astro @@ -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> diff --git a/examples/portfolio/src/pages/index.astro b/examples/portfolio/src/pages/index.astro index d9527d31f..96fefee89 100644 --- a/examples/portfolio/src/pages/index.astro +++ b/examples/portfolio/src/pages/index.astro @@ -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> diff --git a/examples/portfolio/src/pages/projects.astro b/examples/portfolio/src/pages/projects.astro index 1aa05e07f..42634eb0b 100644 --- a/examples/portfolio/src/pages/projects.astro +++ b/examples/portfolio/src/pages/projects.astro @@ -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; diff --git a/examples/ssr/src/components/Container.astro b/examples/ssr/src/components/Container.astro index f982522b8..3576de90a 100644 --- a/examples/ssr/src/components/Container.astro +++ b/examples/ssr/src/components/Container.astro @@ -1,7 +1,8 @@ --- -const { tag = 'div' } = Astro.props; +const { tag = "div" } = Astro.props; const Tag = tag; --- + <style> .container { width: 1248px; /** TODO: responsive */ diff --git a/examples/ssr/src/components/Header.astro b/examples/ssr/src/components/Header.astro index 426fb4be5..271f73e53 100644 --- a/examples/ssr/src/components/Header.astro +++ b/examples/ssr/src/components/Header.astro @@ -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> diff --git a/examples/ssr/src/components/ProductListing.astro b/examples/ssr/src/components/ProductListing.astro index c0af5a34c..9a6ed0502 100644 --- a/examples/ssr/src/components/ProductListing.astro +++ b/examples/ssr/src/components/ProductListing.astro @@ -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> diff --git a/examples/ssr/src/components/TextDecorationSkip.astro b/examples/ssr/src/components/TextDecorationSkip.astro index b35179ea8..191119bf4 100644 --- a/examples/ssr/src/components/TextDecorationSkip.astro +++ b/examples/ssr/src/components/TextDecorationSkip.astro @@ -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> ))} diff --git a/examples/ssr/src/pages/cart.astro b/examples/ssr/src/pages/cart.astro index 3277ff2db..2214703f2 100644 --- a/examples/ssr/src/pages/cart.astro +++ b/examples/ssr/src/pages/cart.astro @@ -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 /> + <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> + <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> diff --git a/examples/ssr/src/pages/index.astro b/examples/ssr/src/pages/index.astro index 8eb04ffa6..456de484c 100644 --- a/examples/ssr/src/pages/index.astro +++ b/examples/ssr/src/pages/index.astro @@ -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; - } - .product-listing-title { - text-align: center; - } +<html> + <head> + <title>Online Store</title> + <style> + h1 { + font-size: 36px; + } - .product-listing { + .product-listing-title { + text-align: center; + } - } - </style> -</head> -<body> - <Header /> + .product-listing { + } + </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> diff --git a/examples/ssr/src/pages/login.astro b/examples/ssr/src/pages/login.astro index b12a82a5e..081aafedf 100644 --- a/examples/ssr/src/pages/login.astro +++ b/examples/ssr/src/pages/login.astro @@ -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> diff --git a/examples/ssr/src/pages/products/[id].astro b/examples/ssr/src/pages/products/[id].astro index f6ac67f82..9ec934aa2 100644 --- a/examples/ssr/src/pages/products/[id].astro +++ b/examples/ssr/src/pages/products/[id].astro @@ -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 src={product.image} /> - <figcaption> - <AddToCart client:idle id={id} name={product.name} /> - <p>Description here...</p> - </figcaption> - </figure> + img { + width: 400px; + } + </style> + </head> + <body> + <Header /> - </Container> -</body> + <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> </html> diff --git a/examples/starter/src/components/Logo.astro b/examples/starter/src/components/Logo.astro index 02c68c7f0..ca45ef529 100644 --- a/examples/starter/src/components/Logo.astro +++ b/examples/starter/src/components/Logo.astro @@ -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" /> diff --git a/examples/starter/src/pages/index.astro b/examples/starter/src/pages/index.astro index ea853b668..4ec1c38a4 100644 --- a/examples/starter/src/pages/index.astro +++ b/examples/starter/src/pages/index.astro @@ -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> diff --git a/examples/subpath/src/pages/index.astro b/examples/subpath/src/pages/index.astro index a7620accd..7ecb1f58d 100644 --- a/examples/subpath/src/pages/index.astro +++ b/examples/subpath/src/pages/index.astro @@ -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"> diff --git a/examples/with-markdown-plugins/src/layouts/main.astro b/examples/with-markdown-plugins/src/layouts/main.astro index 854b2b425..4ab5b7888 100644 --- a/examples/with-markdown-plugins/src/layouts/main.astro +++ b/examples/with-markdown-plugins/src/layouts/main.astro @@ -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" /> diff --git a/examples/with-markdown-plugins/src/pages/about.astro b/examples/with-markdown-plugins/src/pages/about.astro index 1115fcb8c..e533ceac8 100644 --- a/examples/with-markdown-plugins/src/pages/about.astro +++ b/examples/with-markdown-plugins/src/pages/about.astro @@ -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 diff --git a/examples/with-markdown-shiki/src/layouts/main.astro b/examples/with-markdown-shiki/src/layouts/main.astro index 425f5dc08..006c4ca6c 100644 --- a/examples/with-markdown-shiki/src/layouts/main.astro +++ b/examples/with-markdown-shiki/src/layouts/main.astro @@ -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" /> diff --git a/examples/with-markdown/src/layouts/main.astro b/examples/with-markdown/src/layouts/main.astro index 425f5dc08..006c4ca6c 100644 --- a/examples/with-markdown/src/layouts/main.astro +++ b/examples/with-markdown/src/layouts/main.astro @@ -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" /> diff --git a/examples/with-markdown/src/pages/external.astro b/examples/with-markdown/src/pages/external.astro index 82cac13d4..395e27c71 100644 --- a/examples/with-markdown/src/pages/external.astro +++ b/examples/with-markdown/src/pages/external.astro @@ -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`; diff --git a/examples/with-markdown/src/pages/index.astro b/examples/with-markdown/src/pages/index.astro index e70e12f35..1cc85c16c 100644 --- a/examples/with-markdown/src/pages/index.astro +++ b/examples/with-markdown/src/pages/index.astro @@ -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(); ``` diff --git a/examples/with-nanostores/src/pages/index.astro b/examples/with-nanostores/src/pages/index.astro index ad3fb4e26..cedc0ac60 100644 --- a/examples/with-nanostores/src/pages/index.astro +++ b/examples/with-nanostores/src/pages/index.astro @@ -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/ diff --git a/examples/with-tailwindcss/src/components/Button.astro b/examples/with-tailwindcss/src/components/Button.astro index 7d11c37ea..70962e801 100644 --- a/examples/with-tailwindcss/src/components/Button.astro +++ b/examples/with-tailwindcss/src/components/Button.astro @@ -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> diff --git a/examples/with-tailwindcss/src/pages/index.astro b/examples/with-tailwindcss/src/pages/index.astro index ebccafa34..651a47fa3 100644 --- a/examples/with-tailwindcss/src/pages/index.astro +++ b/examples/with-tailwindcss/src/pages/index.astro @@ -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/ diff --git a/examples/with-vite-plugin-pwa/src/pages/index.astro b/examples/with-vite-plugin-pwa/src/pages/index.astro index 6214033dd..94596d8df 100644 --- a/examples/with-vite-plugin-pwa/src/pages/index.astro +++ b/examples/with-vite-plugin-pwa/src/pages/index.astro @@ -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> |