Format astro files in examples (#3862)

8 files changed, 91 insertions, 57 deletions

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>