mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Migrate to typescript

Browse Source
This commit is contained in:
prototypa
2023-01-02 10:51:51 -05:00
parent ba0e67b55f
commit f158d32181
28 changed files with 172 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/atoms/Pagination.astro
View File

@ -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" />

7
src/components/atoms/SocialShare.astro
View File

@ -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;
---

7
src/components/atoms/Tags.astro
View File

@ -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;
---

5
src/components/blog/Grid.astro
View File

@ -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;
---

9
src/components/blog/GridItem.astro
View File

@ -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);
---

5
src/components/blog/List.astro
View File

@ -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;
---

9
src/components/blog/ListItem.astro
View File

@ -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>

35
src/components/blog/SinglePost.astro
View File

@ -1,10 +1,17 @@
---
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;
---
@ -12,8 +19,9 @@ const { post, url } = Astro.props;
<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>

7
src/components/core/ToggleMenu.astro
View File

@ -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:

7
src/components/core/ToggleTheme.astro
View File

@ -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:

7
src/components/widgets/Error404.astro
View File

@ -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>

9
src/components/widgets/Header.astro
View File

@ -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>

22
src/components/widgets/Hero.astro
View File

@ -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}

5
src/components/widgets/Note.astro
View File

@ -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>

6
src/components/widgets/Steps.astro
View File

@ -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>