Skip to content

Commit f158d32

Browse files
prototypaprototypa
committed
Migrate to typescript
1 parent ba0e67b commit f158d32

28 files changed

+172
-85
lines changed

‎.eslintignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
dist
22
node_modules
3-
.github
3+
.github
4+
types.generated.d.ts

‎README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<img src="lighthouse-score.png" align="right"
44
alt="AstroWind Lighthouse Score" width="100" height="358">
55

6-
**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**.
6+
**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**.
77

88
## Features
99

@@ -88,7 +88,7 @@ Inside AstroWind template, you'll see the following folders and files:
8888
│ | | ├── post-slug-1.md
8989
│ | | ├── post-slug-2.mdx
9090
│ | | └── ...
91-
│ | └-- config.js
91+
│ | └-- config.ts
9292
│ ├── layouts/
9393
│ | |── BaseLayout.astro
9494
│ | └── ...
@@ -104,7 +104,7 @@ Inside AstroWind template, you'll see the following folders and files:
104104
| | | └── [...page].astro
105105
│ | ├── index.astro
106106
| | ├── 404.astro
107-
| | └-- rss.xml.js
107+
| | └-- rss.xml.ts
108108
│ ├── utils/
109109
│ └── config.mjs
110110
├── package.json

‎src/assets/styles/base.css

+2-3
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,9 @@
1717
}
1818

1919
.dropdown:hover .dropdown-menu {
20-
display: block;
20+
display: block;
2121
}
2222

23-
2423
[astro-icon].icon-light > * {
2524
stroke-width: 1.2;
2625
}
@@ -34,4 +33,4 @@
3433

3534
[data-aw-toggle-menu].expanded g > path:last-child {
3635
@apply rotate-45 translate-y-[-8px] translate-x-[14px];
37-
}
36+
}

‎src/components/atoms/Pagination.astro

+9-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
---
22
import { Icon } from 'astro-icon';
33
import { getRelativeLink } from '~/utils/permalinks';
4+
5+
export interface Props {
6+
prevUrl: string;
7+
nextUrl: string;
8+
prevText?: string;
9+
nextText?: string;
10+
}
11+
412
const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } = Astro.props;
513
---
614

@@ -18,12 +26,7 @@ const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } =
1826
<p class="ml-2">{prevText}</p>
1927
</div>
2028
</a>
21-
<a
22-
href={getRelativeLink(nextUrl)}
23-
class={`btn btn-ghost px-3 ${
24-
!nextUrl ? 'invisible' : ''
25-
}`}
26-
>
29+
<a href={getRelativeLink(nextUrl)} class={`btn btn-ghost px-3 ${!nextUrl ? 'invisible' : ''}`}>
2730
<div class="flex flex-row align-middle">
2831
<span class="mr-2">{nextText}</span>
2932
<Icon name="tabler:arrow-right" class="w-6 h-6" />

‎src/components/atoms/SocialShare.astro

+7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
---
22
import { Icon } from 'astro-icon';
3+
4+
export interface Props {
5+
text: string;
6+
url: string;
7+
class?: string;
8+
}
9+
310
const { text, url, class: className = 'inline-block' } = Astro.props;
411
---
512

‎src/components/atoms/Tags.astro

+7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
---
22
import { getPermalink } from '~/utils/permalinks';
33
4+
import type { Post } from '~/utils/posts';
5+
6+
export interface Props {
7+
tags: Post['tags'];
8+
class?: string;
9+
}
10+
411
const { tags, class: className = 'text-sm' } = Astro.props;
512
---
613

‎src/components/blog/Grid.astro

+5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
---
22
import Item from '~/components/blog/GridItem.astro';
3+
import type { Post } from '~/utils/posts';
4+
5+
export interface Props {
6+
posts: Array<Post>;
7+
}
38
49
const { posts } = Astro.props;
510
---

‎src/components/blog/GridItem.astro

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
---
2-
import { Picture } from '@astrojs/image/components'
2+
import { Picture } from '@astrojs/image/components';
33
44
import { findImage } from '~/utils/images';
55
import { getPermalink } from '~/utils/permalinks';
66
7-
const { post } = Astro.props;
7+
import type { Post } from '~/utils/posts';
8+
9+
export interface Props {
10+
post: Post;
11+
}
812
13+
const { post } = Astro.props;
914
const image = await findImage(post.image);
1015
---
1116

‎src/components/blog/List.astro

+5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
---
22
import Item from '~/components/blog/ListItem.astro';
3+
import type { Post } from '~/utils/posts';
4+
5+
export interface Props {
6+
posts: Array<Post>;
7+
}
38
49
const { posts } = Astro.props;
510
---

‎src/components/blog/ListItem.astro

+7-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,13 @@ import { getPermalink } from '~/utils/permalinks';
66
import { findImage } from '~/utils/images';
77
import { getFormattedDate } from '~/utils/utils';
88
9-
const { post } = Astro.props;
9+
import type { Post } from '~/utils/posts';
10+
11+
export interface Props {
12+
post: Post;
13+
}
1014
15+
const { post } = Astro.props;
1116
const image = await findImage(post.image);
1217
---
1318

@@ -47,7 +52,7 @@ const image = await findImage(post.image);
4752
<footer class="mt-4">
4853
<div>
4954
<span class="text-gray-500 dark:text-slate-400">
50-
<time datetime={post.publishDate}>{getFormattedDate(post.publishDate)}</time> ~
55+
<time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~
5156
{Math.ceil(post.readingTime)} min read
5257
</span>
5358
</div>

‎src/components/blog/SinglePost.astro

+24-11
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,27 @@
11
---
2-
import { Picture } from '@astrojs/image/components'
2+
import { Picture } from '@astrojs/image/components';
33
import PostTags from '~/components/atoms/Tags.astro';
44
import SocialShare from '~/components/atoms/SocialShare.astro';
55
66
import { getFormattedDate } from '~/utils/utils';
77
8+
import type { Post } from '~/utils/posts';
9+
10+
export interface Props {
11+
post: Post;
12+
url: string;
13+
}
14+
815
const { post, url } = Astro.props;
916
---
1017

1118
<section class="py-8 sm:py-16 lg:py-20 mx-auto">
1219
<article>
1320
<header class={post.image ? 'text-center' : ''}>
1421
<p class="px-4 sm:px-6 max-w-3xl mx-auto">
15-
<time datetime={post.publishDate}>{getFormattedDate(post.publishDate)}</time> ~ {Math.ceil(post.readingTime)} min
16-
read
22+
<time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~ {
23+
Math.ceil(post.readingTime)
24+
} min read
1725
</p>
1826
<h1
1927
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;
2735
class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
2836
widths={[400, 900]}
2937
sizes="(max-width: 900px) 400px, 900px"
30-
alt={post.description}
38+
alt={post.description || ''}
3139
loading="eager"
32-
aspectRatio={16/9}
40+
aspectRatio={16 / 9}
3341
width={900}
3442
height={506}
3543
/>
@@ -43,15 +51,20 @@ const { post, url } = Astro.props;
4351
<div
4452
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"
4553
>
46-
{post.Content ? <post.Content /> : <Fragment set:html={post.body} />}
54+
{
55+
post.Content ? (
56+
<>
57+
{/* @ts-ignore */}
58+
<post.Content />
59+
</>
60+
) : (
61+
<Fragment set:html={post.content} />
62+
)
63+
}
4764
</div>
4865
<div class="container mx-auto px-6 sm:px-6 max-w-3xl mt-8 flex justify-between flex-col sm:flex-row">
4966
<PostTags tags={post.tags} class="mr-5" />
50-
<SocialShare
51-
url={url}
52-
text={post.title}
53-
class="mt-5 sm:mt-1 align-middle text-gray-500 dark:text-slate-600"
54-
/>
67+
<SocialShare url={url} text={post.title} class="mt-5 sm:mt-1 align-middle text-gray-500 dark:text-slate-600" />
5568
</div>
5669
</article>
5770
</section>

‎src/components/core/ToggleMenu.astro

+7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
---
22
import { Icon } from 'astro-icon';
33
4+
export interface Props {
5+
label?: string;
6+
class?: string;
7+
iconClass?: string;
8+
iconName?: string;
9+
}
10+
411
const {
512
label = 'Toggle Menu',
613
class:

‎src/components/core/ToggleTheme.astro

+7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
---
22
import { Icon } from 'astro-icon';
33
4+
export interface Props {
5+
label?: string;
6+
class?: string;
7+
iconClass?: string;
8+
iconName?: string;
9+
}
10+
411
const {
512
label = 'Toggle between Dark and Light mode',
613
class:

‎src/components/widgets/Error404.astro

+1-6
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,7 @@ import { getHomePermalink } from '~/utils/permalinks';
1313
<p class="mt-4 mb-8 text-lg text-gray-600 dark:text-slate-400">
1414
But dont worry, you can find plenty of other things on our homepage.
1515
</p>
16-
<a
17-
rel="noopener noreferrer"
18-
href={getHomePermalink()}
19-
class="btn ml-4"
20-
>Back to homepage</a
21-
>
16+
<a rel="noopener noreferrer" href={getHomePermalink()} class="btn ml-4">Back to homepage</a>
2217
</div>
2318
</div>
2419
</section>

‎src/components/widgets/Header.astro

+6-3
Original file line numberDiff line numberDiff line change
@@ -37,16 +37,19 @@ import { getHomePermalink, getBlogPermalink, getPermalink, getRelativeLink } fro
3737
<li class="">
3838
<a
3939
class="rounded-t md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
40-
href="#">Features</a>
40+
href="#">Features</a
41+
>
4142
</li>
4243
<li class="">
4344
<a class="md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap" href="#"
44-
>Profile</a>
45+
>Profile</a
46+
>
4547
</li>
4648
<li class="">
4749
<a
4850
class="rounded-b md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
49-
href="#">Pricing</a>
51+
href="#">Pricing</a
52+
>
5053
</li>
5154
</ul>
5255
</li>

‎src/components/widgets/Hero.astro

+9-13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
import { Icon } from 'astro-icon';
3-
import { Picture } from '@astrojs/image/components'
3+
import { Picture } from '@astrojs/image/components';
44
---
55

66
<section>
@@ -10,16 +10,15 @@ import { Picture } from '@astrojs/image/components'
1010
<h1 class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4 font-heading">
1111
Your website with
1212
<span>Astro</span> +
13-
<span
14-
class="sm:whitespace-nowrap"
15-
>Tailwind CSS</span
16-
>
13+
<span class="sm:whitespace-nowrap">Tailwind CSS</span>
1714
</h1>
1815
<div class="max-w-3xl mx-auto">
1916
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
20-
<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
21-
designed following Best Practices, SEO, Accessibility, <span class="inline sm:hidden">...</span><span
22-
class="hidden sm:inline"
17+
<span class="font-semibold underline decoration-wavy decoration-1 decoration-primary-600 underline-offset-2"
18+
>AstroWind</span
19+
> is a production ready template to start your new website using <em>Astro</em> + <em>Tailwind CSS</em>. It
20+
has been designed following Best Practices, SEO, Accessibility, <span class="inline sm:hidden">...</span
21+
><span class="hidden sm:inline"
2322
>Dark Mode, Great Page Speed, image optimization, sitemap generation and more.</span
2423
>
2524
</p>
@@ -35,10 +34,7 @@ import { Picture } from '@astrojs/image/components'
3534
</a>
3635
</div>
3736
<div class="flex w-full sm:w-auto">
38-
<a
39-
class="btn w-full"
40-
href="#features">Learn more</a
41-
>
37+
<a class="btn w-full" href="#features">Learn more</a>
4238
</div>
4339
</div>
4440
</div>
@@ -51,7 +47,7 @@ import { Picture } from '@astrojs/image/components'
5147
widths={[400, 768, 1480]}
5248
sizes="(max-width: 767px) 400px, (max-width: 1479px) 768px, 1480px"
5349
alt="Hero Image"
54-
aspectRatio={1480/833}
50+
aspectRatio={1480 / 833}
5551
loading="eager"
5652
width={1480}
5753
height={833}

‎src/components/widgets/Note.astro

+3-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import { Icon } from 'astro-icon';
44

55
<section class="bg-primary-100 dark:bg-slate-800">
66
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium">
7-
<span class="font-bold"> <Icon name="tabler:info-square" class="w-5 h-5 inline-block align-text-bottom" /> Philosophy:</span> Simplicity, Best
8-
Practices and High Performance
7+
<span class="font-bold">
8+
<Icon name="tabler:info-square" class="w-5 h-5 inline-block align-text-bottom" /> Philosophy:</span
9+
> Simplicity, Best Practices and High Performance
910
</div>
1011
</section>

‎src/components/widgets/Steps.astro

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
import { Icon } from 'astro-icon';
3-
import { Picture } from '@astrojs/image/components'
3+
import { Picture } from '@astrojs/image/components';
44
---
55

66
<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'
6464
<div class="flex">
6565
<div class="flex flex-col items-center mr-4">
6666
<div>
67-
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2 bg-primary-600">
67+
<div
68+
class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2 bg-primary-600"
69+
>
6870
<Icon name="tabler:check" class="w-6 h-6 text-white dark:text-slate-200" />
6971
</div>
7072
</div>

‎src/content/config.js ‎src/content/config.ts

File renamed without changes.

‎src/env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="astro/client" />

0 commit comments

Comments
 (0)