Migrate to typescript

src/components/widgets/Error404.astro

@@ -13,12 +13,7 @@ import { getHomePermalink } from '~/utils/permalinks';
 			<p class="mt-4 mb-8 text-lg text-gray-600 dark:text-slate-400">
 				But dont worry, you can find plenty of other things on our homepage.
 			</p>
-			<a
-				rel="noopener noreferrer"
-				href={getHomePermalink()}
-				class="btn ml-4"
-				>Back to homepage</a
-			>
+			<a rel="noopener noreferrer" href={getHomePermalink()} class="btn ml-4">Back to homepage</a>
 		</div>
 	</div>
 </section>

src/components/widgets/Header.astro

@@ -37,16 +37,19 @@ import { getHomePermalink, getBlogPermalink, getPermalink, getRelativeLink } fro
 						<li class="">
 							<a
 								class="rounded-t md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
-								href="#">Features</a>
+								href="#">Features</a
+							>
 						</li>
 						<li class="">
 							<a class="md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap" href="#"
-								>Profile</a>
+								>Profile</a
+							>
 						</li>
 						<li class="">
 							<a
 								class="rounded-b md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
-								href="#">Pricing</a>
+								href="#">Pricing</a
+							>
 						</li>
 					</ul>
 				</li>

src/components/widgets/Hero.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon';
-import { Picture } from '@astrojs/image/components'
+import { Picture } from '@astrojs/image/components';
 ---
 
 <section>
@@ -10,16 +10,15 @@ import { Picture } from '@astrojs/image/components'
 				<h1 class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4 font-heading">
 					Your website with
 					<span>Astro</span> +
-					<span
-						class="sm:whitespace-nowrap"
-						>Tailwind CSS</span
-					>
+					<span class="sm:whitespace-nowrap">Tailwind CSS</span>
 				</h1>
 				<div class="max-w-3xl mx-auto">
 					<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
-						<span class="font-semibold underline decoration-wavy decoration-1 decoration-primary-600 underline-offset-2">AstroWind</span> is a production ready template to start your new website using <em>Astro</em> + <em>Tailwind CSS</em>. It has been
-						designed following Best Practices, SEO, Accessibility, <span class="inline sm:hidden">...</span><span
-							class="hidden sm:inline"
+						<span class="font-semibold underline decoration-wavy decoration-1 decoration-primary-600 underline-offset-2"
+							>AstroWind</span
+						> is a production ready template to start your new website using <em>Astro</em> + <em>Tailwind CSS</em>. 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, sitemap generation and more.</span
 						>
 					</p>
@@ -35,10 +34,7 @@ import { Picture } from '@astrojs/image/components'
 							</a>
 						</div>
 						<div class="flex w-full sm:w-auto">
-							<a
-								class="btn w-full"
-								href="#features">Learn more</a
-							>
+							<a class="btn w-full" href="#features">Learn more</a>
 						</div>
 					</div>
 				</div>
@@ -51,7 +47,7 @@ import { Picture } from '@astrojs/image/components'
 						widths={[400, 768, 1480]}
 						sizes="(max-width: 767px) 400px, (max-width: 1479px) 768px, 1480px"
 						alt="Hero Image"
-						aspectRatio={1480/833}
+						aspectRatio={1480 / 833}
 						loading="eager"
 						width={1480}
 						height={833}

src/components/widgets/Note.astro

@@ -4,7 +4,8 @@ import { Icon } from 'astro-icon';
 
 <section class="bg-primary-100 dark:bg-slate-800">
 	<div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium">
-		<span class="font-bold"> <Icon name="tabler:info-square" class="w-5 h-5 inline-block align-text-bottom" /> Philosophy:</span> Simplicity, Best
-		Practices and High Performance
+		<span class="font-bold">
+			<Icon name="tabler:info-square" class="w-5 h-5 inline-block align-text-bottom" /> Philosophy:</span
+		> Simplicity, Best Practices and High Performance
 	</div>
 </section>

src/components/widgets/Steps.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon';
-import { Picture } from '@astrojs/image/components'
+import { Picture } from '@astrojs/image/components';
 ---
 
 <section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
@@ -64,7 +64,9 @@ import { Picture } from '@astrojs/image/components'
 			<div class="flex">
 				<div class="flex flex-col items-center mr-4">
 					<div>
-						<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2 bg-primary-600">
+						<div
+							class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2 bg-primary-600"
+						>
 							<Icon name="tabler:check" class="w-6 h-6 text-white dark:text-slate-200" />
 						</div>
 					</div>