Migrate to typescript

.eslintignore

@@ -1,3 +1,4 @@
 dist
 node_modules
-.github
+.github
+types.generated.d.ts

README.md

@@ -3,7 +3,7 @@
 <img src="lighthouse-score.png" align="right"
      alt="AstroWind Lighthouse Score" width="100" height="358">
 
-**AstroWind** is a free and open-source template to make your website using **[Astro](https://astro.build/) + [Tailwind CSS](https://tailwindcss.com/)**. Ready to start a new project and designed taking into account best practices. 🌟 **Most *starred* & *forked* Astro theme in 2022**.
+**AstroWind** is a free and open-source template to make your website using **[Astro](https://astro.build/) + [Tailwind CSS](https://tailwindcss.com/)**. Ready to start a new project and designed taking into account best practices. 🌟 **Most _starred_ & _forked_ Astro theme in 2022**.
 
 ## Features
 
@@ -88,7 +88,7 @@ Inside AstroWind template, you'll see the following folders and files:
 │   |   |   ├── post-slug-1.md
 │   |   |   ├── post-slug-2.mdx
 │   |   |   └── ...
-│   |   └-- config.js
+│   |   └-- config.ts
 │   ├── layouts/
 │   |   |── BaseLayout.astro
 │   |   └── ...
@@ -104,7 +104,7 @@ Inside AstroWind template, you'll see the following folders and files:
 |   |   |       └── [...page].astro
 │   |   ├── index.astro
 |   |   ├── 404.astro
-|   |   └-- rss.xml.js
+|   |   └-- rss.xml.ts
 │   ├── utils/
 │   └── config.mjs
 ├── package.json

src/assets/styles/base.css

@@ -17,10 +17,9 @@
 }
 
 .dropdown:hover .dropdown-menu {
-  display: block;
+	display: block;
 }
 
-
 [astro-icon].icon-light > * {
 	stroke-width: 1.2;
 }
@@ -34,4 +33,4 @@
 
 [data-aw-toggle-menu].expanded g > path:last-child {
 	@apply rotate-45 translate-y-[-8px] translate-x-[14px];
-}
+}

src/components/atoms/Pagination.astro

@@ -1,6 +1,14 @@
 ---
 import { Icon } from 'astro-icon';
 import { getRelativeLink } from '~/utils/permalinks';
+
+export interface Props {
+	prevUrl: string;
+	nextUrl: string;
+	prevText?: string;
+	nextText?: string;
+}
+
 const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } = Astro.props;
 ---
 
@@ -18,12 +26,7 @@ const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } =
 						<p class="ml-2">{prevText}</p>
 					</div>
 				</a>
-				<a
-					href={getRelativeLink(nextUrl)}
-					class={`btn btn-ghost px-3 ${
-						!nextUrl ? 'invisible' : ''
-					}`}
-				>
+				<a href={getRelativeLink(nextUrl)} class={`btn btn-ghost px-3 ${!nextUrl ? 'invisible' : ''}`}>
 					<div class="flex flex-row align-middle">
 						<span class="mr-2">{nextText}</span>
 						<Icon name="tabler:arrow-right" class="w-6 h-6" />

src/components/atoms/SocialShare.astro

@@ -1,5 +1,12 @@
 ---
 import { Icon } from 'astro-icon';
+
+export interface Props {
+	text: string;
+	url: string;
+	class?: string;
+}
+
 const { text, url, class: className = 'inline-block' } = Astro.props;
 ---
 

src/components/atoms/Tags.astro

@@ -1,6 +1,13 @@
 ---
 import { getPermalink } from '~/utils/permalinks';
 
+import type { Post } from '~/utils/posts';
+
+export interface Props {
+	tags: Post['tags'];
+	class?: string;
+}
+
 const { tags, class: className = 'text-sm' } = Astro.props;
 ---
 

src/components/blog/Grid.astro

@@ -1,5 +1,10 @@
 ---
 import Item from '~/components/blog/GridItem.astro';
+import type { Post } from '~/utils/posts';
+
+export interface Props {
+	posts: Array<Post>;
+}
 
 const { posts } = Astro.props;
 ---

src/components/blog/GridItem.astro

@@ -1,11 +1,16 @@
 ---
-import { Picture } from '@astrojs/image/components'
+import { Picture } from '@astrojs/image/components';
 
 import { findImage } from '~/utils/images';
 import { getPermalink } from '~/utils/permalinks';
 
-const { post } = Astro.props;
+import type { Post } from '~/utils/posts';
+
+export interface Props {
+	post: Post;
+}
 
+const { post } = Astro.props;
 const image = await findImage(post.image);
 ---
 

src/components/blog/List.astro

@@ -1,5 +1,10 @@
 ---
 import Item from '~/components/blog/ListItem.astro';
+import type { Post } from '~/utils/posts';
+
+export interface Props {
+	posts: Array<Post>;
+}
 
 const { posts } = Astro.props;
 ---

src/components/blog/ListItem.astro

@@ -6,8 +6,13 @@ import { getPermalink } from '~/utils/permalinks';
 import { findImage } from '~/utils/images';
 import { getFormattedDate } from '~/utils/utils';
 
-const { post } = Astro.props;
+import type { Post } from '~/utils/posts';
+
+export interface Props {
+	post: Post;
+}
 
+const { post } = Astro.props;
 const image = await findImage(post.image);
 ---
 
@@ -47,7 +52,7 @@ const image = await findImage(post.image);
 		<footer class="mt-4">
 			<div>
 				<span class="text-gray-500 dark:text-slate-400">
-					<time datetime={post.publishDate}>{getFormattedDate(post.publishDate)}</time> ~
+					<time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~
 					{Math.ceil(post.readingTime)} min read
 				</span>
 			</div>

src/components/blog/SinglePost.astro

@@ -1,19 +1,27 @@
 ---
-import { Picture } from '@astrojs/image/components'
+import { Picture } from '@astrojs/image/components';
 import PostTags from '~/components/atoms/Tags.astro';
 import SocialShare from '~/components/atoms/SocialShare.astro';
 
 import { getFormattedDate } from '~/utils/utils';
 
+import type { Post } from '~/utils/posts';
+
+export interface Props {
+	post: Post;
+	url: string;
+}
+
 const { post, url } = Astro.props;
 ---
 
 <section class="py-8 sm:py-16 lg:py-20 mx-auto">
 	<article>
 		<header class={post.image ? 'text-center' : ''}>
 			<p class="px-4 sm:px-6 max-w-3xl mx-auto">
-				<time datetime={post.publishDate}>{getFormattedDate(post.publishDate)}</time> ~ {Math.ceil(post.readingTime)} min
-				read
+				<time datetime={String(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-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 font-heading"
@@ -27,9 +35,9 @@ const { post, url } = Astro.props;
 						class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
 						widths={[400, 900]}
 						sizes="(max-width: 900px) 400px, 900px"
-						alt={post.description}
+						alt={post.description || ''}
 						loading="eager"
-						aspectRatio={16/9}
+						aspectRatio={16 / 9}
 						width={900}
 						height={506}
 					/>
@@ -43,15 +51,20 @@ const { post, url } = Astro.props;
 		<div
 			class="container mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
 		>
-			{post.Content ? <post.Content /> : <Fragment set:html={post.body} />}
+			{
+				post.Content ? (
+					<>
+						{/* @ts-ignore */}
+						<post.Content />
+					</>
+				) : (
+					<Fragment set:html={post.content} />
+				)
+			}
 		</div>
 		<div class="container mx-auto px-6 sm:px-6 max-w-3xl mt-8 flex justify-between flex-col sm:flex-row">
 			<PostTags tags={post.tags} class="mr-5" />
-			<SocialShare
-				url={url}
-				text={post.title}
-				class="mt-5 sm:mt-1 align-middle text-gray-500 dark:text-slate-600"
-			/>
+			<SocialShare url={url} text={post.title} class="mt-5 sm:mt-1 align-middle text-gray-500 dark:text-slate-600" />
 		</div>
 	</article>
 </section>

src/components/core/ToggleMenu.astro

@@ -1,6 +1,13 @@
 ---
 import { Icon } from 'astro-icon';
 
+export interface Props {
+	label?: string;
+	class?: string;
+	iconClass?: string;
+	iconName?: string;
+}
+
 const {
 	label = 'Toggle Menu',
 	class:

src/components/core/ToggleTheme.astro

@@ -1,6 +1,13 @@
 ---
 import { Icon } from 'astro-icon';
 
+export interface Props {
+	label?: string;
+	class?: string;
+	iconClass?: string;
+	iconName?: string;
+}
+
 const {
 	label = 'Toggle between Dark and Light mode',
 	class:

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>

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />