Format with prettier

astro.config.mjs

@@ -6,7 +6,7 @@ import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
 import sitemap from '@astrojs/sitemap';
 import image from '@astrojs/image';
-import mdx from "@astrojs/mdx";
+import mdx from '@astrojs/mdx';
 import partytown from '@astrojs/partytown';
 
 import { remarkReadingTime } from './src/utils/frontmatter.js';
@@ -20,7 +20,7 @@ export default defineConfig({
 	// Astro uses this full URL to generate your sitemap and canonical URLs in your final build
 	site: SITE.origin,
 	base: SITE.basePathname,
-	trailingSlash: SITE.trailingSlash ? "always" : "never",
+	trailingSlash: SITE.trailingSlash ? 'always' : 'never',
 
 	output: 'static',
 
@@ -32,7 +32,7 @@ export default defineConfig({
 		}),
 		sitemap(),
 		image({
-			serviceEntryPoint: '@astrojs/image/sharp'
+			serviceEntryPoint: '@astrojs/image/sharp',
 		}),
 		mdx(),
 

data/blog/markdown-elements-demo-post.mdx

@@ -1,11 +1,12 @@
 ---
-publishDate: "Aug 02 2022"
+publishDate: 'Aug 02 2022'
-title: "Markdown elements demo post"
+title: 'Markdown elements demo post'
-description: "Lorem ipsum dolor sit amet"
+description: 'Lorem ipsum dolor sit amet'
-excerpt: "Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit sit fugiat"
+excerpt: 'Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit sit fugiat'
-image: "~/assets/images/astronaut.jpg"
+image: '~/assets/images/astronaut.jpg'
 tags: [markdown, astro, blog]
 ---
+
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
 ## <a name="Headings"></a>Headings
@@ -32,7 +33,6 @@ Veniam enim esse amet veniam deserunt laboris amet enim consequat. Minim nostrud
 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
-
 [[Top]](#top)
 
 ## <a name="Paragraphs"></a>Paragraphs
@@ -95,7 +95,7 @@ Adipisicing voluptate ipsum culpa voluptate id aute laboris labore esse fugiat v
 
 In dolore velit aliquip labore mollit minim tempor veniam eu veniam ad in sint aliquip mollit mollit. Ex occaecat non deserunt elit laborum sunt tempor sint consequat culpa culpa qui sit. Irure ad commodo eu voluptate mollit cillum cupidatat veniam proident amet minim reprehenderit.
 
-***
+---
 
 In laboris eiusmod reprehenderit aliquip sit proident occaecat. Non sit labore anim elit veniam Lorem minim commodo eiusmod irure do minim nisi. Dolor amet cillum excepteur consequat sint non sint.
 
@@ -106,7 +106,7 @@ In laboris eiusmod reprehenderit aliquip sit proident occaecat. Non sit labore a
 Duis sunt ut pariatur reprehenderit mollit mollit magna dolore in pariatur nulla commodo sit dolor ad fugiat. Laboris amet ea occaecat duis eu enim exercitation deserunt ea laborum occaecat reprehenderit. Et incididunt dolor commodo consequat mollit nisi proident non pariatur in et incididunt id. Eu ut et Lorem ea ex magna minim ipsum ipsum do.
 
 | Table Heading 1 | Table Heading 2 | Center align | Right align | Table Heading 5 |
-| :-------------- | :-------------- | :-------------: | --------------: | :-------------- |
+| :-------------- | :-------------- | :----------: | ----------: | :-------------- |
 | Item 1          | Item 2          |    Item 3    |      Item 4 | Item 5          |
 | Item 1          | Item 2          |    Item 3    |      Item 4 | Item 5          |
 | Item 1          | Item 2          |    Item 3    |      Item 4 | Item 5          |
@@ -155,7 +155,7 @@ Sint ea anim ipsum ad commodo cupidatat do **exercitation** incididunt et minim
 
 ![Super wide](https://images.unsplash.com/photo-1471128466710-c26ff0d26143?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2MDc4MTk3Mw&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080)
 
-*Proident sit veniam in est proident officia adipisicing* ea tempor cillum non cillum velit deserunt. Voluptate laborum incididunt sit consectetur Lorem irure incididunt voluptate nostrud. Commodo ut eiusmod tempor cupidatat esse enim minim ex anim consequat. Mollit sint culpa qui laboris quis consectetur ad sint esse. Amet anim anim minim ullamco et duis non irure. Sit tempor adipisicing ea laboris `culpa ex duis sint` anim aute reprehenderit id eu ea. Aute [excepteur proident](#!) Lorem minim adipisicing nostrud mollit ad ut voluptate do nulla esse occaecat aliqua sint anim.
+_Proident sit veniam in est proident officia adipisicing_ ea tempor cillum non cillum velit deserunt. Voluptate laborum incididunt sit consectetur Lorem irure incididunt voluptate nostrud. Commodo ut eiusmod tempor cupidatat esse enim minim ex anim consequat. Mollit sint culpa qui laboris quis consectetur ad sint esse. Amet anim anim minim ullamco et duis non irure. Sit tempor adipisicing ea laboris `culpa ex duis sint` anim aute reprehenderit id eu ea. Aute [excepteur proident](#!) Lorem minim adipisicing nostrud mollit ad ut voluptate do nulla esse occaecat aliqua sint anim.
 
 ![Not so big](https://placekitten.com/480/400)
 

src/components/atoms/Pagination.astro

@@ -9,7 +9,7 @@ const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } =
 		<div class="container flex">
 			<div class="flex flex-row mx-auto container justify-between">
 				<a
-					href={getPermalink(prevUrl, "raw")}
+					href={getPermalink(prevUrl, 'raw')}
 					class={`btn px-2 font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white shadow-none mr-2
       ${!prevUrl ? 'invisible' : ''}`}
 				>
@@ -19,7 +19,7 @@ const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } =
 					</div>
 				</a>
 				<a
-					href={getPermalink(nextUrl, "raw")}
+					href={getPermalink(nextUrl, 'raw')}
 					class={`btn px-2 font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white shadow-none ${
 						!nextUrl ? 'invisible' : ''
 					}`}

src/components/blog/SinglePost.astro

@@ -11,7 +11,8 @@ const { post } = Astro.props;
 	<article>
 		<header>
 			<p class="max-w-3xl mx-auto text-center">
-				<time datetime={post.publishDate}>{getFormattedDate(post.publishDate)}</time> ~ {Math.ceil(post.readingTime)} min read
+				<time datetime={post.publishDate}>{getFormattedDate(post.publishDate)}</time> ~ {Math.ceil(post.readingTime)} min
+				read
 			</p>
 			<h1
 				class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 font-heading"

src/components/core/MetaTags.astro

@@ -1,6 +1,6 @@
 ---
-import { AstroSeo } from "@astrolib/seo"
+import { AstroSeo } from '@astrolib/seo';
-import { GoogleAnalytics } from "@astrolib/analytics"
+import { GoogleAnalytics } from '@astrolib/analytics';
 import { getImage } from '@astrojs/image';
 import { getRelativeUrlByFilePath } from '~/utils/directories';
 
@@ -9,7 +9,7 @@ import defaultImageSrc from '~/assets/images/default.png';
 import { SITE } from '~/config.mjs';
 import Fonts from '../atoms/Fonts.astro';
 import ExtraMetaTags from '../atoms/ExtraMetaTags.astro';
-import SplitbeeAnalytics from "./SplitbeeAnalytics.astro";
+import SplitbeeAnalytics from './SplitbeeAnalytics.astro';
 
 const { src: defaultImage } = await getImage({
 	src: defaultImageSrc,
@@ -44,22 +44,22 @@ const image =
 <AstroSeo
 	title={title}
 	description={description}
-
 	canonical={canonical}
 	noindex={noindex}
 	nofollow={nofollow}
-
 	openGraph={{
 		url: canonical,
 		title: ogTitle,
 		description: description,
 		type: ogType,
-		images: image ? [
+		images: image
+			? [
 					{
 						url: image.toString(),
 						alt: ogTitle,
 					},
-		] : undefined,
+			  ]
+			: undefined,
 		// site_name: 'SiteName',
 	}}
 	twitter={{

src/components/core/SplitbeeAnalytics.astro

@@ -1,15 +1,6 @@
 ---
-const {
+const { doNotTrack = true, noCookieMode = false, url = 'https://cdn.splitbee.io/sb.js' } = Astro.props;
-	doNotTrack = true,
-	noCookieMode = false,
-	url = "https://cdn.splitbee.io/sb.js"
-} = Astro.props;
 ---
 
 <!-- Splitbee Analytics -->
-<script 
+<script data-respect-dnt={doNotTrack} data-no-cookie={noCookieMode} async src={url}></script>
-	data-respect-dnt={doNotTrack}
-	data-no-cookie={noCookieMode}
-	async
-	src={url}
-></script>

src/components/widgets/Header.astro

@@ -25,9 +25,7 @@ import { getPermalink, getBlogPermalink, getHomePermalink } from '~/utils/permal
 			class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200 h-screen md:h-auto"
 			aria-label="Main navigation"
 		>
-			<ul
+			<ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base">
-				class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base"
-			>
 				<li>
 					<a
 						class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"

src/components/widgets/Hero.astro

@@ -6,7 +6,7 @@ import Picture from '~/components/core/Picture.astro';
 <section>
 	<div class="max-w-6xl mx-auto px-4 sm:px-6">
 		<div class="py-12 md:py-20">
-			<div class="text-center pb-10 md:pb-16">
+			<div class="text-center pb-10 md:pb-16 max-w-5xl mx-auto">
 				<h1 class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4 font-heading">
 					Your website with
 					<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">Astro</span> +
@@ -49,9 +49,10 @@ import Picture from '~/components/core/Picture.astro';
 						src={import('~/assets/images/hero.jpg')}
 						class="mx-auto rounded-md shadow-lg bg-gray-400 dark:bg-slate-700 w-full"
 						widths={[400, 768]}
-						sizes=" (max-width: 767px) 400px, 768px"
+						sizes="(max-width: 767px) 400px, 768px"
 						alt="Hero Image"
 						aspectRatio="16:9"
+						loading="eager"
 					/>
 				</div>
 			</div>

src/pages/[...blog]/[...page].astro

@@ -26,8 +26,8 @@ const meta = {
 	title: `Blog ${currentPage > 1 ? `— Page ${currentPage} ` : ''}— ${SITE.name}`,
 	description: SITE.description,
 	canonical: getCanonical(getPermalink(BLOG?.blog?.pathname)),
-	ogType: "blog",
+	ogType: 'blog',
-	noindex: currentPage > 1
+	noindex: currentPage > 1,
 };
 ---
 

src/pages/[...blog]/[slug].astro

@@ -30,7 +30,7 @@ const meta = {
 	canonical: post.canonical || getCanonical(getPermalink(post.slug, 'post')),
 	image: await findImage(post.image),
 	ogTitle: post.title,
-	ogType: "article"
+	ogType: 'article',
 };
 ---
 

src/pages/[...categories]/[category]/[...page].astro

@@ -37,7 +37,7 @@ const currentPage = page.currentPage ?? 1;
 const meta = {
 	title: `Category '${category}' ${currentPage > 1 ? `— Page ${currentPage} ` : ''}— ${SITE.name}`,
 	description: SITE.description,
-	canonical: getCanonical(getPermalink(category, "category")),
+	canonical: getCanonical(getPermalink(category, 'category')),
 	noindex: true,
 };
 ---

src/pages/[...tags]/[tag]/[...page].astro

@@ -37,8 +37,8 @@ const currentPage = page.currentPage ?? 1;
 const meta = {
 	title: `Posts by tag '${tag}' ${currentPage > 1 ? `— Page ${currentPage} ` : ''}— ${SITE.name}`,
 	description: SITE.description,
-	canonical: getCanonical(getPermalink(tag, "tag")),
+	canonical: getCanonical(getPermalink(tag, 'tag')),
-	noindex: true 
+	noindex: true,
 };
 ---