Use Prettier

.eslintrc.js

@@ -25,7 +25,10 @@ module.exports = {
       parser: '@typescript-eslint/parser',
       extends: ['plugin:@typescript-eslint/recommended'],
       rules: {
-        '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' }],
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          { argsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' },
+        ],
         '@typescript-eslint/no-non-null-assertion': 'off',
       },
     },

.prettierignore

@@ -0,0 +1,5 @@
+dist
+node_modules
+.github
+.changeset
+*.md

.prettierrc

@@ -0,0 +1,16 @@
+{
+  "printWidth": 120,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": true,
+  "overrides": [
+    {
+      "files": [".*", "*.json", "*.md", "*.toml", "*.yml"],
+      "options": {
+        "useTabs": false
+      }
+    }
+  ]
+}

.vscode/extensions.json

@@ -1,4 +1,9 @@
 {
-  "recommendations": ["astro-build.astro-vscode", "bradlc.vscode-tailwindcss", "dbaeumer.vscode-eslint"],
+  "recommendations": [
+    "astro-build.astro-vscode",
+    "bradlc.vscode-tailwindcss",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ],
   "unwantedRecommendations": []
 }

.vscode/settings.json

@@ -5,5 +5,9 @@
     "astro", // Enable .astro
     "typescript", // Enable .ts
     "typescriptreact" // Enable .tsx
-  ]
+  ],
+  "prettier.documentSelectors": ["**/*.astro"],
+  "[astro]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

astro.config.mjs

@@ -1,14 +1,14 @@
-import path from "path";
+import path from 'path';
-import { fileURLToPath } from "url";
+import { fileURLToPath } from 'url';
 
-import { defineConfig } from "astro/config";
+import { defineConfig } from 'astro/config';
 
-import tailwind from "@astrojs/tailwind";
+import tailwind from '@astrojs/tailwind';
-import sitemap from "@astrojs/sitemap";
+import sitemap from '@astrojs/sitemap';
-import image from "@astrojs/image";
+import image from '@astrojs/image';
-import partytown from "@astrojs/partytown";
+import partytown from '@astrojs/partytown';
 
-import { SITE } from "./src/config.mjs";
+import { SITE } from './src/config.mjs';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -18,7 +18,7 @@ export default defineConfig({
 	site: SITE.origin,
 	base: SITE.basePathname,
 
-  output: "static",
+	output: 'static',
 
 	integrations: [
 		tailwind({
@@ -31,14 +31,14 @@ export default defineConfig({
 
 		/* Disable this integration if you don't use Google Analytics (or other external script). */
 		partytown({
-      config: { forward: ["dataLayer.push"] },
+			config: { forward: ['dataLayer.push'] },
 		}),
 	],
 
 	vite: {
 		resolve: {
 			alias: {
-        "~": path.resolve(__dirname, "./src"),
+				'~': path.resolve(__dirname, './src'),
 			},
 		},
 	},

package.json

@@ -7,9 +7,10 @@
     "dev": "astro dev",
     "start": "astro dev",
     "build": "astro build",
+    "preview": "astro preview",
+    "format": "prettier -w .",
     "lint:eslint": "eslint . --ext .js,.ts,.astro",
-    "subfont": "subfont -ir --no-fallbacks --silent --root dist",
+    "subfont": "subfont -ir --no-fallbacks --silent --root dist"
-    "preview": "astro preview"
   },
   "devDependencies": {
     "@astrojs/image": "^0.7.0",
@@ -27,6 +28,8 @@
     "eslint-plugin-astro": "^0.19.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "limax": "^v2.1.0",
+    "prettier": "^2.7.1",
+    "prettier-plugin-astro": "^0.5.4",
     "reading-time": "^1.5.0",
     "subfont": "^6.9.0"
   },

src/components/atoms/ExtraMetaTags.astro

@@ -1,7 +1,7 @@
 ---
-import { SITE } from "~/config.mjs"
+import { SITE } from '~/config.mjs';
 ---
 
 <link rel="shortcut icon" href={`${SITE.basePathname}favicon.ico`} />
-<link rel="icon" type="image/svg+xml" href={`${SITE.basePathname}favicon.svg`}>
+<link rel="icon" type="image/svg+xml" href={`${SITE.basePathname}favicon.svg`} />
-<link rel="mask-icon" href={`${SITE.basePathname}favicon.svg`} color="#8D46E7">
+<link rel="mask-icon" href={`${SITE.basePathname}favicon.svg`} color="#8D46E7" />

src/components/atoms/Fonts.astro

@@ -1,5 +1,5 @@
 ---
-import "@fontsource/inter/variable.css"
+import '@fontsource/inter/variable.css';
 ---
 
 <!-- Or Google Fonts -->

src/components/atoms/Logo.astro

@@ -2,5 +2,5 @@
 ---
 
 <span class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white">
-  🚀 AstroWind
+	🚀 AstroWind</span
-</span>
+>

src/components/atoms/Pagination.astro

@@ -1,6 +1,6 @@
 ---
-import { Icon } from "astro-icon";
+import { Icon } from 'astro-icon';
-const { prevUrl, nextUrl, prevText = "Newer posts", nextText = "Older posts" } = Astro.props;
+const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } = Astro.props;
 ---
 
 {
@@ -10,7 +10,7 @@ const { prevUrl, nextUrl, prevText = "Newer posts", nextText = "Older posts" } =
 				<a
 					href={prevUrl}
 					class={`btn font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white shadow-none mr-2
-      ${!prevUrl ? "invisible" : ""}`}
+      ${!prevUrl ? 'invisible' : ''}`}
 				>
 					<div class="flex flex-row align-middle">
 						<Icon name="tabler:arrow-left" class="w-6 h-6" />
@@ -20,7 +20,7 @@ const { prevUrl, nextUrl, prevText = "Newer posts", nextText = "Older posts" } =
 				<a
 					href={nextUrl}
 					class={`btn font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white shadow-none ${
-            !nextUrl ? "invisible" : ""
+						!nextUrl ? 'invisible' : ''
 					}`}
 				>
 					<div class="flex flex-row align-middle">

src/components/atoms/Tags.astro

@@ -1,7 +1,7 @@
 ---
-import { getPermalink } from "~/utils/permalinks";
+import { getPermalink } from '~/utils/permalinks';
 
-const { tags, class: className = "text-sm" } = Astro.props;
+const { tags, class: className = 'text-sm' } = Astro.props;
 ---
 
 {
@@ -9,7 +9,7 @@ const { tags, class: className = "text-sm" } = Astro.props;
 		<ul class={className}>
 			{tags.map((tag) => (
 				<li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 mb-2 py-0.5 px-2">
-          <a href={getPermalink(tag, "tag")}>{tag}</a>
+					<a href={getPermalink(tag, 'tag')}>{tag}</a>
 				</li>
 			))}
 		</ul>

src/components/blog/HighlightedPosts.astro

@@ -1,15 +1,15 @@
 ---
-import Picture from "~/components/core/Picture.astro";
+import Picture from '~/components/core/Picture.astro';
 
-import { findPostsByIds } from "~/utils/posts";
+import { findPostsByIds } from '~/utils/posts';
-import { findImage } from "~/utils/images";
+import { findImage } from '~/utils/images';
-import { getPermalink } from "~/utils/permalinks";
+import { getPermalink } from '~/utils/permalinks';
 
 const ids = [
-  "get-started-website-with-astro-tailwind-css",
+	'get-started-website-with-astro-tailwind-css',
-  "how-to-customize-astrowind-to-your-brand",
+	'how-to-customize-astrowind-to-your-brand',
-  "useful-resources-to-create-websites",
+	'useful-resources-to-create-websites',
-  "astrowind-template-in-depth",
+	'astrowind-template-in-depth',
 ];
 
 const items = await Promise.all(
@@ -44,7 +44,7 @@ const items = await Promise.all(
 					/>
 					<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl font-heading">
 						<a
-              href={getPermalink(post.slug, "type")}
+							href={getPermalink(post.slug, 'type')}
 							class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
 						>
 							{post.title}

src/components/blog/List.astro

@@ -1,5 +1,5 @@
 ---
-import Item from "~/components/blog/ListItem.astro";
+import Item from '~/components/blog/ListItem.astro';
 
 const { posts } = Astro.props;
 ---

src/components/blog/ListItem.astro

@@ -1,10 +1,10 @@
 ---
-import Picture from "~/components/core/Picture.astro";
+import Picture from '~/components/core/Picture.astro';
-import PostTags from "~/components/atoms/Tags.astro";
+import PostTags from '~/components/atoms/Tags.astro';
 
-import { getPermalink } from "~/utils/permalinks";
+import { getPermalink } from '~/utils/permalinks';
-import { findImage } from "~/utils/images";
+import { findImage } from '~/utils/images';
-import { getFormattedDate } from "~/utils/utils";
+import { getFormattedDate } from '~/utils/utils';
 
 const { post } = Astro.props;
 
@@ -12,7 +12,7 @@ const image = await findImage(post.image);
 ---
 
 <article class="max-w-md mx-auto md:max-w-none grid md:grid-cols-2 gap-6 md:gap-8">
-  <a class="relative block group" href="#0">
+	<a class="relative block group" href={getPermalink(post.slug, 'post')}>
 		<div
 			class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg"
 		>
@@ -31,7 +31,7 @@ const image = await findImage(post.image);
 			<h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2 font-heading">
 				<a
 					class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
-          href={getPermalink(post.slug, "post")}
+					href={getPermalink(post.slug, 'post')}
 				>
 					{post.title}
 				</a>
@@ -43,7 +43,8 @@ const image = await findImage(post.image);
 		<footer class="mt-4">
 			<div>
 				<span class="text-gray-500 dark:text-slate-400">
-          <time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~ {Math.ceil(post.readingTime)} min read
+					<time datetime={post.pubDate}>{getFormattedDate(post.pubDate)}</time> ~
+					{Math.ceil(post.readingTime)} min read
 				</span>
 			</div>
 			<div class="mt-4">

src/components/blog/SinglePost.astro

@@ -1,8 +1,8 @@
 ---
-import Picture from "~/components/core/Picture.astro";
+import Picture from '~/components/core/Picture.astro';
-import PostTags from "~/components/atoms/Tags.astro";
+import PostTags from '~/components/atoms/Tags.astro';
 
-import { getFormattedDate } from "~/utils/utils";
+import { getFormattedDate } from '~/utils/utils';
 
 const { post } = Astro.props;
 ---

src/components/core/BasicScripts.astro

@@ -8,12 +8,12 @@
 	// }
 
 	if (
-    localStorage.theme === "dark" ||
+		localStorage.theme === 'dark' ||
-    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
+		(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
 	) {
-    document.documentElement.classList.add("dark");
+		document.documentElement.classList.add('dark');
 	} else {
-    document.documentElement.classList.remove("dark");
+		document.documentElement.classList.remove('dark');
 	}
 
 	function attachEvent(selector, event, fn) {
@@ -26,23 +26,23 @@
 	}
 
 	window.onload = function () {
-    attachEvent("[data-aw-toggle-menu]", "click", function (elem) {
+		attachEvent('[data-aw-toggle-menu]', 'click', function (elem) {
-      elem.classList.toggle("expanded");
+			elem.classList.toggle('expanded');
-      document.body.classList.toggle("overflow-hidden");
+			document.body.classList.toggle('overflow-hidden');
-      document.getElementById("menu")?.classList.toggle("hidden");
+			document.getElementById('menu')?.classList.toggle('hidden');
 		});
 
-    attachEvent("[data-aw-toggle-color-scheme]", "click", function () {
+		attachEvent('[data-aw-toggle-color-scheme]', 'click', function () {
-      document.documentElement.classList.toggle("dark");
+			document.documentElement.classList.toggle('dark');
-      localStorage.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
+			localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
 		});
 	};
 	window.onpageshow = function () {
-    const elem = document.querySelector("[data-aw-toggle-menu]");
+		const elem = document.querySelector('[data-aw-toggle-menu]');
 		if (elem) {
-      elem.classList.remove("expanded");
+			elem.classList.remove('expanded');
 		}
-    document.body.classList.remove("overflow-hidden");
+		document.body.classList.remove('overflow-hidden');
-    document.getElementById("menu")?.classList.add("hidden");
+		document.getElementById('menu')?.classList.add('hidden');
 	};
 </script>

src/components/core/GoogleAnalytics.astro

@@ -1,7 +1,7 @@
 ---
-const { id = "G-XXXXXXXXXX", partytown = false } = Astro.props;
+const { id = 'G-XXXXXXXXXX', partytown = false } = Astro.props;
 
-const attrs = partytown ? { type: "text/partytown" } : {};
+const attrs = partytown ? { type: 'text/partytown' } : {};
 ---
 
 <script is:inline async src={`https://www.googletagmanager.com/gtag/js?id=${id}`} {...attrs}></script>
@@ -11,6 +11,6 @@ const attrs = partytown ? { type: "text/partytown" } : {};
 	function gtag() {
 		window.dataLayer.push(arguments);
 	}
-  gtag("js", new Date());
+	gtag('js', new Date());
-  gtag("config", id);
+	gtag('config', id);
 </script>

src/components/core/MetaTags.astro

@@ -1,13 +1,13 @@
 ---
-import { getImage } from "@astrojs/image";
+import { getImage } from '@astrojs/image';
-import { getRelativeUrlByFilePath } from "~/utils/directories";
+import { getRelativeUrlByFilePath } from '~/utils/directories';
 
-import GoogleAnalytics from "~/components/core/GoogleAnalytics.astro";
+import GoogleAnalytics from '~/components/core/GoogleAnalytics.astro';
-import defaultImageSrc from "~/assets/images/default.png";
+import defaultImageSrc from '~/assets/images/default.png';
 
-import { SITE } from "~/config.mjs";
+import { SITE } from '~/config.mjs';
-import Fonts from "../atoms/Fonts.astro";
+import Fonts from '../atoms/Fonts.astro';
-import ExtraMetaTags from "../atoms/ExtraMetaTags.astro";
+import ExtraMetaTags from '../atoms/ExtraMetaTags.astro';
 
 const { src: defaultImage } = await getImage({
 	src: defaultImageSrc,
@@ -17,7 +17,7 @@ const { src: defaultImage } = await getImage({
 
 const {
 	title = SITE.name,
-  description = "",
+	description = '',
 	image: _image = defaultImage,
 	canonical,
 	noindex = false,
@@ -25,9 +25,9 @@ const {
 } = Astro.props;
 
 const image =
-  typeof _image === "string"
+	typeof _image === 'string'
 		? new URL(_image, Astro.site)
-    : _image && typeof _image["src"] !== "undefined"
+		: _image && typeof _image['src'] !== 'undefined'
 		? new URL(getRelativeUrlByFilePath(_image.src), Astro.site)
 		: null;
 ---
@@ -39,7 +39,7 @@ const image =
 <meta name="description" content={description} />
 {canonical && <link rel="canonical" href={canonical} />}
 
-<meta name="robots" content={`${noindex ? "noindex" : "index"}, ${nofollow ? "nofollow" : "follow"}`} />
+<meta name="robots" content={`${noindex ? 'noindex' : 'index'}, ${nofollow ? 'nofollow' : 'follow'}`} />
 
 <!-- Google / Search Engine Tags -->
 <meta itemprop="name" content={title} />

src/components/core/Picture.astro

@@ -1,5 +1,5 @@
 ---
-import { getPicture } from "@astrojs/image";
+import { getPicture } from '@astrojs/image';
 
 const {
 	src,
@@ -7,33 +7,37 @@ const {
 	sizes,
 	widths,
 	aspectRatio = 1,
-  formats = ["avif", "webp"],
+	formats = ['avif', 'webp'],
-  loading = "lazy",
+	loading = 'lazy',
-  decoding = "async",
+	decoding = 'async',
-  class: className = "",
+	class: className = '',
 	...attrs
 } = Astro.props;
 
 let picture = null;
 try {
-  picture = src && await getPicture({
+	picture =
+		src &&
+		(await getPicture({
 			src,
 			widths,
 			formats,
 			aspectRatio,
-  })
+		}));
-}
+} catch (e) {
-catch (e) {
 	// continue regardless of error
 }
 
-const { image = {}, sources = [] } = picture || {}
+const { image = {}, sources = [] } = picture || {};
 ---
 
-{ (src && image?.src) &&
+{
+	src && image?.src && (
 		<picture {...attrs}>
-  {sources.map((attrs) =>
+			{sources.map((attrs) => (
-  <source {...attrs} {sizes} />)}
+				<source {...attrs} sizes={sizes} />
+			))}
 			<img {...image} {loading} {decoding} {alt} class={className} />
 		</picture>
+	)
 }

src/components/core/ToggleMenu.astro

@@ -1,12 +1,12 @@
 ---
-import { Icon } from "astro-icon";
+import { Icon } from 'astro-icon';
 
 const {
-  label = "Toggle Menu",
+	label = 'Toggle Menu',
 	class:
-    className = "ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center transition",
+		className = 'ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center transition',
-  iconClass = "w-6 h-6",
+	iconClass = 'w-6 h-6',
-  iconName = "tabler:menu",
+	iconName = 'tabler:menu',
 } = Astro.props;
 ---
 

src/components/core/ToggleTheme.astro

@@ -1,12 +1,12 @@
 ---
-import { Icon } from "astro-icon";
+import { Icon } from 'astro-icon';
 
 const {
-  label = "Toggle between Dark and Light mode",
+	label = 'Toggle between Dark and Light mode',
 	class:
-    className = "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center",
+		className = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center',
-  iconClass = "w-6 h-6",
+	iconClass = 'w-6 h-6',
-  iconName = "tabler:sun",
+	iconName = 'tabler:sun',
 } = Astro.props;
 ---
 

src/components/widgets/CallToAction.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from "astro-icon";
+import { Icon } from 'astro-icon';
 ---
 
 <section class="relative">

src/components/widgets/Error404.astro

@@ -1,5 +1,5 @@
 ---
-import { getHomePermalink } from "~/utils/permalinks";
+import { getHomePermalink } from '~/utils/permalinks';
 ---
 
 <section class="flex items-center h-full p-16">
@@ -17,8 +17,8 @@ import { getHomePermalink } from "~/utils/permalinks";
 				rel="noopener noreferrer"
 				href={getHomePermalink()}
 				class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
-        >Back to homepage
+				>Back to homepage</a
-      </a>
+			>
 		</div>
 	</div>
 </section>

src/components/widgets/FAQs.astro

@@ -1,16 +1,16 @@
 ---
-import { Icon } from "astro-icon";
+import { Icon } from 'astro-icon';
 
 const items = [
 	[
 		{
-      question: "What do I need to start?",
+			question: 'What do I need to start?',
 			answer: `Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds.
 
     Many say exploration is part of our destiny, but it’s actually our duty to future generations.`,
 		},
 		{
-      question: "How to install the Astro + Tailwind CSS template?",
+			question: 'How to install the Astro + Tailwind CSS template?',
 			answer: `Well, the way they make shows is, they make one show. That show's called a pilot.
 
     Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.`,
@@ -26,13 +26,13 @@ const items = [
 			answer: `Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Here he comes Here comes Speed Racer. He's a demon on wheels.`,
 		},
 		{
-      question: "What is something that you would really like to try again?",
+			question: 'What is something that you would really like to try again?',
 			answer: `A business big enough that it could be listed on the NASDAQ goes belly up. Disappears!
 
       It ceases to exist without me. No, you clearly don't know who you're talking to, so let me clue you in.`,
 		},
 		{
-      question: "If you could only ask one question to each person you meet, what would that question be?",
+			question: 'If you could only ask one question to each person you meet, what would that question be?',
 			answer: `This is not about revenge. This is about justice. A lot of things can change in twelve years, Admiral. Well, that's certainly good to know. About four years. I got tired of hearing how young I looked.`,
 		},
 	],
@@ -58,7 +58,7 @@ const items = [
 									<Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary-500 inline-block icon-bold" />
 									{question}
 								</p>
-                {answer.split("\n\n").map((paragraph) => (
+								{answer.split('\n\n').map((paragraph) => (
 									<p class="text-gray-700 dark:text-gray-400 mb-2" set:html={paragraph} />
 								))}
 							</div>

src/components/widgets/Features.astro

@@ -1,42 +1,42 @@
 ---
-import { Icon } from "astro-icon";
+import { Icon } from 'astro-icon';
 
 const items = [
 	{
-    title: "Headers",
+		title: 'Headers',
 		description:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
+			'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
-    icon: "flat-color-icons:home",
+		icon: 'flat-color-icons:home',
 	},
 	{
-    title: "Footers",
+		title: 'Footers',
 		description:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
+			'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
-    icon: "flat-color-icons:faq",
+		icon: 'flat-color-icons:faq',
 	},
 	{
-    title: "Features",
+		title: 'Features',
 		description:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
+			'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
-    icon: "flat-color-icons:video-projector",
+		icon: 'flat-color-icons:video-projector',
 	},
 	{
-    title: "Call-to-Action",
+		title: 'Call-to-Action',
 		description:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
+			'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
-    icon: "flat-color-icons:video-projector",
+		icon: 'flat-color-icons:video-projector',
 	},
 	{
-    title: "Pricing",
+		title: 'Pricing',
 		description:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
+			'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
-    icon: "flat-color-icons:calculator",
+		icon: 'flat-color-icons:calculator',
 	},
 	{
-    title: "Testimonial",
+		title: 'Testimonial',
 		description:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
+			'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
-    icon: "flat-color-icons:voice-presentation",
+		icon: 'flat-color-icons:voice-presentation',
 	},
 ];
 ---

src/components/widgets/Features2.astro

@@ -2,36 +2,36 @@
 const items = [
 	[
 		{
-      title: "Integration with Tailwind CSS",
+			title: 'Integration with Tailwind CSS',
 			description:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
 		},
 		{
-      title: "Ready-to-use Components",
+			title: 'Ready-to-use Components',
 			description:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
 		},
 		{
-      title: "Best Practices",
+			title: 'Best Practices',
 			description:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
 		},
 	],
 	[
 		{
-      title: "Excellent Page Speed",
+			title: 'Excellent Page Speed',
 			description:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
 		},
 		{
-      title: "Frequently updated",
+			title: 'Frequently updated',
 			description:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
 		},
 		{
-      title: "Open to new ideas and contributions",
+			title: 'Open to new ideas and contributions',
 			description:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
 		},
 	],
 ];
@@ -44,8 +44,8 @@ const items = [
 			<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
 				What's interesting about <span
 					class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500 whitespace-nowrap"
-          >AstroWind
+					>AstroWind</span
-        </span>
+				>
 			</h2>
 			<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
 				Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa

src/components/widgets/Features3.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from "astro-icon";
+import { Icon } from 'astro-icon';
 ---
 
 <section>
@@ -38,8 +38,8 @@ import { Icon } from "astro-icon";
 									<span
 										class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-50 text-primary-600"
 									>
-                    1
+										1</span
-                  </span>
+									>
 								</div>
 								<div class="px-4">
 									<h3 class="mb-4 text-xl font-semibold font-heading">Responsive Elements</h3>
@@ -54,8 +54,8 @@ import { Icon } from "astro-icon";
 									<span
 										class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-50 text-primary-600"
 									>
-                    2
+										2</span
-                  </span>
+									>
 								</div>
 								<div class="px-4">
 									<h3 class="mb-4 text-xl font-semibold font-heading">Flexible Team</h3>
@@ -70,8 +70,8 @@ import { Icon } from "astro-icon";
 									<span
 										class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-50 text-primary-600"
 									>
-                    3
+										3</span
-                  </span>
+									>
 								</div>
 								<div class="px-4">
 									<h3 class="mb-4 text-xl font-semibold font-heading">Ecologic Software</h3>

src/components/widgets/Footer.astro

@@ -1,11 +1,11 @@
 ---
-import { Icon } from "astro-icon";
+import { Icon } from 'astro-icon';
-import { getHomePermalink } from "~/utils/permalinks";
+import { getHomePermalink } from '~/utils/permalinks';
 ---
 
-<footer>
+<footer class="border-t border-gray-200 dark:border-slate-800">
 	<div class="max-w-6xl mx-auto px-4 sm:px-6">
-    <div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12 border-t border-gray-200 dark:border-slate-800">
+		<div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12">
 			<div class="col-span-12 lg:col-span-4">
 				<div class="mb-2">
 					<a class="inline-block font-bold text-xl" href={getHomePermalink()}>AstroWind</a>
@@ -13,14 +13,12 @@ import { getHomePermalink } from "~/utils/permalinks";
 				<div class="text-sm text-gray-600">
 					<a
 						class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
-            href="#"
+						href="#">Terms</a
-            >Terms
+					> ·
-          </a> ·
 					<a
 						class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
-            href="#"
+						href="#">Privacy Policy</a
-            >Privacy Policy
+					>
-          </a>
 				</div>
 			</div>
 			<div class="col-span-6 md:col-span-3 lg:col-span-2">
@@ -28,38 +26,38 @@ import { getHomePermalink } from "~/utils/permalinks";
 				<ul class="text-sm">
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Features
+							>Features</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Security
+							>Security</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Team
+							>Team</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Enterprise
+							>Enterprise</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Customer stories
+							>Customer stories</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Pricing
+							>Pricing</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Resources
+							>Resources</a
-            </a>
+						>
 					</li>
 				</ul>
 			</div>
@@ -68,28 +66,28 @@ import { getHomePermalink } from "~/utils/permalinks";
 				<ul class="text-sm">
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Developer API
+							>Developer API</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Partners
+							>Partners</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Atom
+							>Atom</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Electron
+							>Electron</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >GitHub Desktop
+							>GitHub Desktop</a
-            </a>
+						>
 					</li>
 				</ul>
 			</div>
@@ -98,28 +96,28 @@ import { getHomePermalink } from "~/utils/permalinks";
 				<ul class="text-sm">
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Docs
+							>Docs</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Community Forum
+							>Community Forum</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Professional Services
+							>Professional Services</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Skills
+							>Skills</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Status
+							>Status</a
-            </a>
+						>
 					</li>
 				</ul>
 			</div>
@@ -128,38 +126,38 @@ import { getHomePermalink } from "~/utils/permalinks";
 				<ul class="text-sm">
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >About
+							>About</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Blog
+							>Blog</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Careers
+							>Careers</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Press
+							>Press</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Inclusion
+							>Inclusion</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Social Impact
+							>Social Impact</a
-            </a>
+						>
 					</li>
 					<li class="mb-2">
 						<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
-              >Shop
+							>Shop</a
-            </a>
+						>
 					</li>
 				</ul>
 			</div>

src/components/widgets/Header.astro

@@ -1,10 +1,10 @@
 ---
-import { Icon } from "astro-icon";
+import { Icon } from 'astro-icon';
-import Logo from "~/components/atoms/Logo.astro";
+import Logo from '~/components/atoms/Logo.astro';
-import ToggleTheme from "~/components/core/ToggleTheme.astro";
+import ToggleTheme from '~/components/core/ToggleTheme.astro';
-import ToggleMenu from "~/components/core/ToggleMenu.astro";
+import ToggleMenu from '~/components/core/ToggleMenu.astro';
 
-import { getPermalink, getBlogPermalink, getHomePermalink } from "~/utils/permalinks";
+import { getPermalink, getBlogPermalink, getHomePermalink } from '~/utils/permalinks';
 ---
 
 <header
@@ -31,23 +31,21 @@ import { getPermalink, getBlogPermalink, getHomePermalink } from "~/utils/permal
 				<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"
-            href="#"
+						href="#">Pages</a
-            >Pages
+					>
-          </a>
 				</li>
 				<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"
-            href={getPermalink("useful-resources-to-create-websites", "post")}
+						href={getPermalink('useful-resources-to-create-websites', 'post')}
 						>Resources
 					</a>
 				</li>
 				<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"
-            href={getBlogPermalink()}
+						href={getBlogPermalink()}>Blog</a
-            >Blog
+					>
-          </a>
 				</li>
 				<li class="md:hidden">
 					<a

src/components/widgets/Hero.astro

@@ -1,6 +1,6 @@
 ---
-import { Icon } from "astro-icon";
+import { Icon } from 'astro-icon';
-import Picture from "~/components/core/Picture.astro";
+import Picture from '~/components/core/Picture.astro';
 ---
 
 <section>
@@ -12,14 +12,16 @@ import Picture from "~/components/core/Picture.astro";
 					<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">Astro</span> +
 					<span
 						class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500 sm:whitespace-nowrap"
-            >Tailwind CSS
+						>Tailwind CSS</span
-          </span>
+					>
 				</h1>
 				<div class="max-w-3xl mx-auto">
 					<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
 						AstroWind is a production ready template to start your new website using Astro + Tailwind CSS. It has been
-            designed following Best Practices, SEO, Accessibility, <span class="inline sm:hidden">... </span><span class="hidden sm:inline">Dark Mode, Great Page Speed, image optimization,
+						designed following Best Practices, SEO, Accessibility, <span class="inline sm:hidden">...</span><span
-            sitemap generation and more.</span>
+							class="hidden sm:inline"
+							>Dark Mode, Great Page Speed, image optimization, sitemap generation and more.</span
+						>
 					</p>
 					<div class="max-w-none px-6 flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
 						<div class="flex w-full sm:w-auto">
@@ -35,9 +37,8 @@ import Picture from "~/components/core/Picture.astro";
 						<div class="flex w-full sm:w-auto">
 							<a
 								class="btn text-white bg-gray-900 hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-800 w-full"
-                href="#features"
+								href="#features">Learn more</a
-                >Learn more
+							>
-              </a>
 						</div>
 					</div>
 				</div>
@@ -45,7 +46,7 @@ import Picture from "~/components/core/Picture.astro";
 			<div>
 				<div class="relative mb-8 m-auto max-w-3xl">
 					<Picture
-            src={import("~/assets/images/hero.jpg")}
+						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"

src/components/widgets/Steps.astro

@@ -1,6 +1,6 @@
 ---
-import { Icon } from "astro-icon";
+import { Icon } from 'astro-icon';
-import Picture from "~/components/core/Picture.astro";
+import Picture from '~/components/core/Picture.astro';
 ---
 
 <section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
@@ -78,7 +78,7 @@ import Picture from "~/components/core/Picture.astro";
 		<div class="relative">
 			<Picture
 				class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700"
-        src={import("~/assets/images/astronaut.jpg")}
+				src={import('~/assets/images/astronaut.jpg')}
 				widths={[400, 768]}
 				sizes="(max-width: 768px) 100vw, 432px"
 				alt="Astronaut"

src/config.mjs

@@ -1,30 +1,30 @@
 export const SITE = {
-  name: "AstroWind",
+	name: 'AstroWind',
 
-  origin: "https://astrowind.vercel.app",
+	origin: 'https://astrowind.vercel.app',
-  basePathname: "/",
+	basePathname: '/',
 
-  title: "AstroWind — Your website with Astro + Tailwind CSS",
+	title: 'AstroWind — Your website with Astro + Tailwind CSS',
-  description: "🚀 AstroWind is a free and ready to start template to make your website using Astro and Tailwind CSS.",
+	description: '🚀 AstroWind is a free and ready to start template to make your website using Astro and Tailwind CSS.',
 
 	googleAnalyticsId: false, // or "G-XXXXXXXXXX",
-  googleSiteVerificationId: "orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M",
+	googleSiteVerificationId: 'orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M',
 };
 
 export const BLOG = {
 	disabled: false,
-  slug: "blog",
+	slug: 'blog',
 
 	postsWithoutBlogSlug: true,
 	postsPerPage: 6,
 
 	category: {
 		disabled: false,
-    slug: "category", // set empty to change from /category/some-slug to /some-slug
+		slug: 'category', // set empty to change from /category/some-slug to /some-slug
 	},
 
 	tag: {
 		disabled: false,
-    slug: "tag",
+		slug: 'tag',
 	},
 };

src/layouts/BaseLayout.astro

@@ -1,8 +1,8 @@
 ---
-import "~/assets/styles/base.css";
+import '~/assets/styles/base.css';
 
-import MetaTags from "~/components/core/MetaTags.astro";
+import MetaTags from '~/components/core/MetaTags.astro';
-import BasicScripts from "~/components/core/BasicScripts.astro";
+import BasicScripts from '~/components/core/BasicScripts.astro';
 
 const { meta = {} } = Astro.props;
 ---
@@ -16,11 +16,10 @@ const { meta = {} } = Astro.props;
 	<body class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-slate-900">
 		<slot />
 		<BasicScripts />
-  </body>
-</html>
-
 		<style is:global>
 			img {
 				content-visibility: auto;
 			}
 		</style>
+	</body>
+</html>

src/layouts/BlogLayout.astro

@@ -1,10 +1,10 @@
 ---
-import Layout from "~/layouts/PageLayout.astro";
+import Layout from '~/layouts/PageLayout.astro';
 
 const { meta } = Astro.props;
 ---
 
-<Layout meta={meta}>
+<Layout {meta}>
 	<section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-3xl">
 		<header>
 			<h1

src/layouts/PageLayout.astro

@@ -1,12 +1,12 @@
 ---
-import Layout from "~/layouts/BaseLayout.astro";
+import Layout from '~/layouts/BaseLayout.astro';
-import Header from "~/components/widgets/Header.astro";
+import Header from '~/components/widgets/Header.astro';
-import Footer from "~/components/widgets/Footer.astro";
+import Footer from '~/components/widgets/Footer.astro';
 
 const { meta } = Astro.props;
 ---
 
-<Layout meta={meta}>
+<Layout {meta}>
 	<Header />
 	<main>
 		<slot />

src/pages/404.astro

@@ -1,7 +1,7 @@
 ---
-import Layout from "~/layouts/BaseLayout.astro";
+import Layout from '~/layouts/BaseLayout.astro';
-import { SITE } from "~/config.mjs";
+import { SITE } from '~/config.mjs';
-import Error404 from "~/components/widgets/Error404.astro";
+import Error404 from '~/components/widgets/Error404.astro';
 
 const title = `Error 404 — ${SITE.name}`;
 ---

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

@@ -1,12 +1,12 @@
 ---
-import { SITE, BLOG } from "~/config.mjs";
+import { SITE, BLOG } from '~/config.mjs';
 
-import Layout from "~/layouts/BlogLayout.astro";
+import Layout from '~/layouts/BlogLayout.astro';
-import BlogList from "~/components/blog/List.astro";
+import BlogList from '~/components/blog/List.astro';
-import Pagination from "~/components/atoms/Pagination.astro";
+import Pagination from '~/components/atoms/Pagination.astro';
 
-import { fetchPosts } from "~/utils/posts";
+import { fetchPosts } from '~/utils/posts';
-import { getCanonical, getPermalink, BLOG_BASE } from "~/utils/permalinks";
+import { getCanonical, getPermalink, BLOG_BASE } from '~/utils/permalinks';
 
 export async function getStaticPaths({ paginate }) {
 	if (BLOG?.disabled) return [];
@@ -23,13 +23,13 @@ const { page } = Astro.props;
 const currentPage = page.currentPage ?? 1;
 
 const meta = {
-  title: `Blog ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${SITE.name}`,
+	title: `Blog ${currentPage > 1 ? `— Page ${currentPage} ` : ''}— ${SITE.name}`,
 	description: SITE.description,
 	canonical: getCanonical(getPermalink(page.url.current)),
 };
 ---
 
-<Layout meta={meta}>
+<Layout {meta}>
 	<Fragment slot="title">
 		News and step-by-step guides about
 		<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">AstroWind</span>

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

@@ -1,12 +1,12 @@
 ---
-import { SITE, BLOG } from "~/config.mjs";
+import { SITE, BLOG } from '~/config.mjs';
 
-import Layout from "~/layouts/PageLayout.astro";
+import Layout from '~/layouts/PageLayout.astro';
-import SinglePost from "~/components/blog/SinglePost.astro";
+import SinglePost from '~/components/blog/SinglePost.astro';
 
-import { getCanonical, getPermalink, cleanSlug, BLOG_BASE } from "~/utils/permalinks";
+import { getCanonical, getPermalink, cleanSlug, BLOG_BASE } from '~/utils/permalinks';
-import { fetchPosts } from "~/utils/posts";
+import { fetchPosts } from '~/utils/posts';
-import { findImage } from "~/utils/images";
+import { findImage } from '~/utils/images';
 
 export async function getStaticPaths() {
 	if (BLOG?.disabled) return [];
@@ -14,7 +14,10 @@ export async function getStaticPaths() {
 	const posts = await fetchPosts();
 
 	return posts.map((post) => ({
-    params: { slug: cleanSlug(post.slug), blog: BLOG.postsWithoutBlogSlug ? undefined : BLOG_BASE || undefined },
+		params: {
+			slug: cleanSlug(post.slug),
+			blog: BLOG.postsWithoutBlogSlug ? undefined : BLOG_BASE || undefined,
+		},
 		props: { post },
 	}));
 }
@@ -24,11 +27,11 @@ const { post } = Astro.props;
 const meta = {
 	title: `${post.title} — ${SITE.name}`,
 	description: post.description,
-  canonical: post.canonical || getCanonical(getPermalink(post.slug, "post")),
+	canonical: post.canonical || getCanonical(getPermalink(post.slug, 'post')),
 	image: await findImage(post.image),
 };
 ---
 
-<Layout meta={meta}>
+<Layout {meta}>
 	<SinglePost post={{ ...post, image: meta.image }} />
 </Layout>

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

@@ -1,12 +1,12 @@
 ---
-import { SITE, BLOG } from "~/config.mjs";
+import { SITE, BLOG } from '~/config.mjs';
 
-import Layout from "~/layouts/BlogLayout.astro";
+import Layout from '~/layouts/BlogLayout.astro';
-import BlogList from "~/components/blog/List.astro";
+import BlogList from '~/components/blog/List.astro';
-import Pagination from "~/components/atoms/Pagination.astro";
+import Pagination from '~/components/atoms/Pagination.astro';
 
-import { fetchPosts } from "~/utils/posts";
+import { fetchPosts } from '~/utils/posts';
-import { getCanonical, getPermalink, cleanSlug, CATEGORY_BASE } from "~/utils/permalinks";
+import { getCanonical, getPermalink, cleanSlug, CATEGORY_BASE } from '~/utils/permalinks';
 
 export async function getStaticPaths({ paginate }) {
 	if (BLOG?.disabled || BLOG?.category?.disabled) return [];
@@ -15,12 +15,12 @@ export async function getStaticPaths({ paginate }) {
 
 	const categories = new Set();
 	posts.map((post) => {
-    typeof post.category === "string" && categories.add(post.category.toLowerCase());
+		typeof post.category === 'string' && categories.add(post.category.toLowerCase());
 	});
 
 	return Array.from(categories).map((category) =>
 		paginate(
-      posts.filter((post) => typeof post.category === "string" && category === post.category.toLowerCase()),
+			posts.filter((post) => typeof post.category === 'string' && category === post.category.toLowerCase()),
 			{
 				params: { category: cleanSlug(category), categories: CATEGORY_BASE || undefined },
 				pageSize: BLOG.postsPerPage,
@@ -35,7 +35,7 @@ const { page, category } = Astro.props;
 const currentPage = page.currentPage ?? 1;
 
 const meta = {
-  title: `Category '${category}' ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${SITE.name}`,
+	title: `Category '${category}' ${currentPage > 1 ? `— Page ${currentPage} ` : ''}— ${SITE.name}`,
 	description: SITE.description,
 	canonical: getCanonical(getPermalink(page.url.current)),
 };

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

@@ -1,12 +1,12 @@
 ---
-import { SITE, BLOG } from "~/config.mjs";
+import { SITE, BLOG } from '~/config.mjs';
 
-import Layout from "~/layouts/BlogLayout.astro";
+import Layout from '~/layouts/BlogLayout.astro';
-import BlogList from "~/components/blog/List.astro";
+import BlogList from '~/components/blog/List.astro';
-import Pagination from "~/components/atoms/Pagination.astro";
+import Pagination from '~/components/atoms/Pagination.astro';
 
-import { fetchPosts } from "~/utils/posts";
+import { fetchPosts } from '~/utils/posts';
-import { getCanonical, getPermalink, cleanSlug, TAG_BASE } from "~/utils/permalinks";
+import { getCanonical, getPermalink, cleanSlug, TAG_BASE } from '~/utils/permalinks';
 
 export async function getStaticPaths({ paginate }) {
 	if (BLOG?.disabled || BLOG?.tag?.disabled) return [];
@@ -35,7 +35,7 @@ const { page, tag } = Astro.props;
 const currentPage = page.currentPage ?? 1;
 
 const meta = {
-  title: `Posts by tag '${tag}' ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${SITE.name}`,
+	title: `Posts by tag '${tag}' ${currentPage > 1 ? `— Page ${currentPage} ` : ''}— ${SITE.name}`,
 	description: SITE.description,
 	canonical: getCanonical(getPermalink(page.url.current)),
 };

src/pages/index.astro

@@ -1,17 +1,17 @@
 ---
-import { SITE } from "~/config.mjs";
+import { SITE } from '~/config.mjs';
-import { getCanonical, getHomePermalink } from "~/utils/permalinks";
+import { getCanonical, getHomePermalink } from '~/utils/permalinks';
-import Layout from "~/layouts/PageLayout.astro";
+import Layout from '~/layouts/PageLayout.astro';
 
-import Hero from "~/components/widgets/Hero.astro";
+import Hero from '~/components/widgets/Hero.astro';
-import Features from "~/components/widgets/Features.astro";
+import Features from '~/components/widgets/Features.astro';
-import Features2 from "~/components/widgets/Features2.astro";
+import Features2 from '~/components/widgets/Features2.astro';
-import Steps from "~/components/widgets/Steps.astro";
+import Steps from '~/components/widgets/Steps.astro';
-import Features3 from "~/components/widgets/Features3.astro";
+import Features3 from '~/components/widgets/Features3.astro';
-import HighlightedPosts from "~/components/blog/HighlightedPosts.astro";
+import HighlightedPosts from '~/components/blog/HighlightedPosts.astro';
-import FAQs from "~/components/widgets/FAQs.astro";
+import FAQs from '~/components/widgets/FAQs.astro';
-import Stats from "~/components/widgets/Stats.astro";
+import Stats from '~/components/widgets/Stats.astro';
-import CallToAction from "~/components/widgets/CallToAction.astro";
+import CallToAction from '~/components/widgets/CallToAction.astro';
 
 const meta = {
 	title: SITE.title,
@@ -20,7 +20,7 @@ const meta = {
 };
 ---
 
-<Layout meta={meta}>
+<Layout {meta}>
 	<Hero />
 	<Features />
 	<Steps />

src/pages/rss.xml.js

@@ -1,14 +1,14 @@
-import rss from "@astrojs/rss";
+import rss from '@astrojs/rss';
 
-import { SITE, BLOG } from "~/config.mjs";
+import { SITE, BLOG } from '~/config.mjs';
-import { fetchPosts } from "~/utils/posts";
+import { fetchPosts } from '~/utils/posts';
-import { getPermalink } from "~/utils/permalinks";
+import { getPermalink } from '~/utils/permalinks';
 
 export const get = async () => {
 	if (BLOG.disabled) {
 		return new Response(null, {
 			status: 404,
-      statusText: 'Not found'
+			statusText: 'Not found',
 		});
 	}
 
@@ -20,10 +20,10 @@ export const get = async () => {
 		site: import.meta.env.SITE,
 
 		items: posts.map((post) => ({
-      link: getPermalink(post.slug, "post"),
+			link: getPermalink(post.slug, 'post'),
 			title: post.title,
 			description: post.description,
 			pubDate: post.pubDate,
 		})),
 	});
-}
+};

src/utils/directories.js

@@ -1,5 +1,5 @@
-import path from "path";
+import path from 'path';
-import { fileURLToPath } from "url";
+import { fileURLToPath } from 'url';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -7,15 +7,15 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 export const getProjectRootDir = () => {
 	const mode = import.meta.env.MODE;
 
-  return mode === "production" ? path.join(__dirname, "../") : path.join(__dirname, "../../");
+	return mode === 'production' ? path.join(__dirname, '../') : path.join(__dirname, '../../');
 };
 
-const __srcFolder = path.join(getProjectRootDir(), "/src");
+const __srcFolder = path.join(getProjectRootDir(), '/src');
 
 /** */
 export const getRelativeUrlByFilePath = (filepath) => {
 	if (filepath) {
-    return filepath.replace(__srcFolder, "");
+		return filepath.replace(__srcFolder, '');
 	}
 
 	return null;

src/utils/images.js

@@ -1,7 +1,7 @@
 const load = async function () {
 	let images = [];
 	try {
-    images = import.meta.glob("~/assets/images/**");
+		images = import.meta.glob('~/assets/images/**');
 	} catch (e) {
 		// continue regardless of error
 	}
@@ -18,20 +18,20 @@ export const fetchLocalImages = async () => {
 
 /** */
 export const findImage = async (imagePath) => {
-  if (typeof imagePath !== "string") {
+	if (typeof imagePath !== 'string') {
 		return null;
 	}
 
-  if (imagePath.startsWith("http://") || imagePath.startsWith("https://")) {
+	if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
 		return imagePath;
 	}
 
-  if (!imagePath.startsWith("~/assets")) {
+	if (!imagePath.startsWith('~/assets')) {
 		return null;
 	} // For now only consume images using ~/assets alias (or absolute)
 
 	const images = await fetchLocalImages();
-  const key = imagePath.replace("~/", "/src/");
+	const key = imagePath.replace('~/', '/src/');
 
-  return typeof images[key] === "function" ? (await images[key]())["default"] : null;
+	return typeof images[key] === 'function' ? (await images[key]())['default'] : null;
 };

src/utils/permalinks.js

@@ -1,6 +1,6 @@
-import slugify from "limax";
+import slugify from 'limax';
 
-import { SITE, BLOG } from "~/config.mjs";
+import { SITE, BLOG } from '~/config.mjs';
 
 const trim = (str, ch) => {
 	let start = 0,
@@ -10,8 +10,8 @@ const trim = (str, ch) => {
 	return start > 0 || end < str.length ? str.substring(start, end) : str;
 };
 
-const trimSlash = (s) => trim(trim(s, "/"));
+const trimSlash = (s) => trim(trim(s, '/'));
-const createPath = (...params) => "/" + params.filter((el) => !!el).join("/");
+const createPath = (...params) => '/' + params.filter((el) => !!el).join('/');
 
 const basePathname = trimSlash(SITE.basePathname);
 
@@ -22,23 +22,23 @@ export const CATEGORY_BASE = cleanSlug(BLOG?.category?.slug);
 export const TAG_BASE = cleanSlug(BLOG?.tag?.slug);
 
 /** */
-export const getCanonical = (path = "") => new URL(path, SITE.origin);
+export const getCanonical = (path = '') => new URL(path, SITE.origin);
 
 /** */
-export const getPermalink = (slug = "", type = "page") => {
+export const getPermalink = (slug = '', type = 'page') => {
 	const _slug = cleanSlug(slug);
 
 	switch (type) {
-    case "category":
+		case 'category':
 			return createPath(basePathname, CATEGORY_BASE, _slug);
 
-    case "tag":
+		case 'tag':
 			return createPath(basePathname, TAG_BASE, _slug);
 
-    case "post":
+		case 'post':
-      return createPath(basePathname, BLOG.postsWithoutBlogSlug ? "" : BLOG_BASE, _slug);
+			return createPath(basePathname, BLOG.postsWithoutBlogSlug ? '' : BLOG_BASE, _slug);
 
-    case "page":
+		case 'page':
 		default:
 			return createPath(basePathname, _slug);
 	}
@@ -50,5 +50,5 @@ export const getBlogPermalink = () => getPermalink(BLOG_BASE);
 /** */
 export const getHomePermalink = () => {
 	const permalink = getPermalink();
-  return permalink !== "/" ? permalink + "/" : permalink;
+	return permalink !== '/' ? permalink + '/' : permalink;
 };

src/utils/posts.js

@@ -1,8 +1,8 @@
-import getReadingTime from "reading-time";
+import getReadingTime from 'reading-time';
 
 const getNormalizedPost = async (post) => {
 	const { frontmatter, compiledContent, rawContent, file } = post;
-  const ID = file.split("/").pop().split(".").shift();
+	const ID = file.split('/').pop().split('.').shift();
 
 	return {
 		id: ID,
@@ -27,7 +27,7 @@ const getNormalizedPost = async (post) => {
 };
 
 const load = async function () {
-  const posts = import.meta.glob("~/data/posts/**/*.md", {
+	const posts = import.meta.glob('~/data/posts/**/*.md', {
 		eager: true,
 	});
 

src/utils/utils.js

@@ -1,9 +1,9 @@
 /** */
 export const getFormattedDate = (date) =>
 	date
-    ? new Date(date).toLocaleDateString("en-us", {
+		? new Date(date).toLocaleDateString('en-us', {
-        year: "numeric",
+				year: 'numeric',
-        month: "short",
+				month: 'short',
-        day: "numeric",
+				day: 'numeric',
 		  })
-    : "";
+		: '';

tailwind.config.cjs

@@ -1,8 +1,8 @@
-const defaultTheme = require("tailwindcss/defaultTheme");
+const defaultTheme = require('tailwindcss/defaultTheme');
-const colors = require("tailwindcss/colors")
+const colors = require('tailwindcss/colors');
 
 module.exports = {
-  content: ["./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}"],
+	content: ['./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}'],
 	theme: {
 		extend: {
 			colors: {
@@ -14,8 +14,8 @@ module.exports = {
 			},
 		},
 	},
-  plugins: [require("@tailwindcss/typography")],
+	plugins: [require('@tailwindcss/typography')],
-  darkMode: "class",
+	darkMode: 'class',
 };
 
 /*