diff --git a/src/components/buttons/ReadMoreButton.astro b/src/components/buttons/ReadMoreButton.astro new file mode 100644 index 0000000..bcbed1a --- /dev/null +++ b/src/components/buttons/ReadMoreButton.astro @@ -0,0 +1,15 @@ +--- +import { Icon } from 'astro-icon/components'; +--- + +
+
+ + Read More + + +
+
diff --git a/src/components/cards/BlogCard.astro b/src/components/cards/BlogCard.astro index 9f429d1..5d51baf 100644 --- a/src/components/cards/BlogCard.astro +++ b/src/components/cards/BlogCard.astro @@ -1,10 +1,11 @@ --- -import { Icon } from 'astro-icon/components'; import { Image } from 'astro:assets'; +import getReadingTime from 'reading-time'; import type { Post } from '@lib/directusTypes'; -import { formatDate } from '@support/time'; +import Logo from '@components/images/Logo.astro'; +import { formatShortDate } from '@support/time'; import { getDirectusImageURL } from '@/support/url'; interface Props { @@ -12,6 +13,8 @@ interface Props { } const { post } = Astro.props; + +const readingTime = getReadingTime(post.content || ''); ---
@@ -31,25 +34,37 @@ const { post } = Astro.props; inferSize={true} />
-
-

- {post.title} -

-
-
-
- - Read more - - +
+

+ {post.title} +

+
+
+
+
+ -

- {formatDate(post.published_date)} -

+ {post.category.title}
+ + / + +

+ {formatShortDate(post.published_date)} +

+ + / + + + {readingTime.minutes.toPrecision(1)} minutes +
diff --git a/src/components/cards/LargeBlogLeftCard.astro b/src/components/cards/LargeBlogLeftCard.astro index b32800c..c7d4406 100644 --- a/src/components/cards/LargeBlogLeftCard.astro +++ b/src/components/cards/LargeBlogLeftCard.astro @@ -1,33 +1,34 @@ --- -import { Icon } from 'astro-icon/components'; import { Image } from 'astro:assets'; +import getReadingTime from 'reading-time'; -import { formatDate } from '@support/time'; +import type { Post } from '@lib/directusTypes'; + +import ReadMoreButton from '@components/buttons/ReadMoreButton.astro'; +import Logo from '@components/images/Logo.astro'; +import { formatShortDate } from '@support/time'; import { getDirectusImageURL } from '@/support/url'; interface Props { - title: string; - subTitle: string; - url: string; - pubDate: Date, - img: string; - imgAlt: string; + post: Post; } -const { title, subTitle, url, pubDate, img, imgAlt } = Astro.props; +const { post } = Astro.props; + +const readingTime = getReadingTime(post.content || ''); ---
{imgAlt}

- {title} + {post.title}

- {subTitle} + {post.description}

-
-
- - Read More - - + +
+
+
+ +
+ {post.category.title}
+ + / + +

+ {formatShortDate(post.published_date)} +

+ + / + + + {readingTime.minutes.toPrecision(1)} minutes +
- - {formatDate(pubDate)} -
diff --git a/src/components/cards/LargeBlogRightCard.astro b/src/components/cards/LargeBlogRightCard.astro index d8ec78f..1bab72f 100644 --- a/src/components/cards/LargeBlogRightCard.astro +++ b/src/components/cards/LargeBlogRightCard.astro @@ -1,60 +1,72 @@ --- -import { Icon } from 'astro-icon/components'; import { Image } from 'astro:assets'; +import getReadingTime from 'reading-time'; -import { formatDate } from '@support/time'; +import type { Post } from '@lib/directusTypes'; + +import ReadMoreButton from '@components/buttons/ReadMoreButton.astro'; +import Logo from '@components/images/Logo.astro'; +import { formatShortDate } from '@support/time'; import { getDirectusImageURL } from '@/support/url'; interface Props { - title: string; - subTitle: string; - url: string; - pubDate: Date; - imgOne: string; - imgOneAlt: string; - imgTwo?: string; - imgTwoAlt?: string; + post: Post; } -const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = Astro.props; +const { post } = Astro.props; + +const readingTime = getReadingTime(post.content || ''); ---

- {title} + {post.title}

- {subTitle} + {post.description}

-
-
- - Read More - - + +
+
+
+ +
+ {post.category.title}
+ + / + +

+ {formatShortDate(post.published_date)} +

+ + / + + + {readingTime.minutes.toPrecision(1)} minutes +
- - {formatDate(pubDate)} -
- {!imgTwo ? ( + {!post.image_second ? (
{imgOneAlt} {imgOneAlt} {imgOneAlt} {imgTwoAlt}
diff --git a/src/components/sections/CategorySection.astro b/src/components/sections/CategorySection.astro index 0119ec9..67b6bcf 100644 --- a/src/components/sections/CategorySection.astro +++ b/src/components/sections/CategorySection.astro @@ -10,7 +10,7 @@ import { timeago } from '@support/time'; const posts = await directus.request( readItems('posts', { filter: { published: { _eq: true } }, - fields: ['*', 'category.slug'], + fields: ['*', { category: ['*'] }], sort: ['-published_date'], }) ); diff --git a/src/components/sections/SelectedPostsSection.astro b/src/components/sections/SelectedPostsSection.astro index 03efe7b..f1ac171 100644 --- a/src/components/sections/SelectedPostsSection.astro +++ b/src/components/sections/SelectedPostsSection.astro @@ -13,24 +13,8 @@ const { posts } = Astro.props;
{posts.map((post, index) => index % 2 === 0 ? ( - + ) : ( - + ))}
diff --git a/src/pages/all.astro b/src/pages/all.astro index 26ce7e0..29d039f 100644 --- a/src/pages/all.astro +++ b/src/pages/all.astro @@ -10,7 +10,7 @@ const global = await directus.request(readSingleton('site_global')); const posts = await directus.request( readItems('posts', { filter: { published: { _eq: true } }, - fields: ['*'], + fields: ['*', { category: ['*'] }], sort: ['-published_date'], }) ); diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index 2855b64..931351a 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -14,7 +14,7 @@ const global = await directus.request(readSingleton('site_global')); const posts = await directus.request( readItems('posts', { filter: { published: { _eq: true } }, - fields: ['*'], + fields: ['*', { category: ['*'] }], sort: ['-published_date'], }) ); diff --git a/src/pages/categories/[...slug].astro b/src/pages/categories/[...slug].astro index 9bd0aa3..c8415b6 100644 --- a/src/pages/categories/[...slug].astro +++ b/src/pages/categories/[...slug].astro @@ -22,7 +22,7 @@ const global = await directus.request(readSingleton('site_global')); const posts = await directus.request( readItems('posts', { filter: { published: { _eq: true } }, - fields: ['*', 'category.slug'], + fields: ['*', { category: ['*'] }], sort: ['-published_date'], }) ); diff --git a/src/pages/index.astro b/src/pages/index.astro index 8e2da8c..394c57a 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -17,7 +17,7 @@ const weather = await directus.request(readSingleton('site_weather')); const posts = await directus.request( readItems('posts', { filter: { published: { _eq: true } }, - fields: ['*'], + fields: ['*', { category: ['*'] }], sort: ['-published_date'], }) ); diff --git a/src/support/time.ts b/src/support/time.ts index 84a6ccd..53c6872 100644 --- a/src/support/time.ts +++ b/src/support/time.ts @@ -39,4 +39,11 @@ function formatDate(date: Date): string { }) } -export { formatDate, timeago }; +function formatShortDate(date: Date): string { + return new Date(date).toLocaleDateString('en-US', { + month: 'short', + day: 'numeric', + }) +} + +export { formatDate, formatShortDate, timeago }; diff --git a/src/support/url.ts b/src/support/url.ts index 242dfe4..3debb81 100644 --- a/src/support/url.ts +++ b/src/support/url.ts @@ -6,7 +6,7 @@ const getSiteURL = () => { return 'https://www.alexlebens.dev'; }; -async function getDirectusImageURL(image: string) { +function getDirectusImageURL(image: string) { return `${getDirectusURL()}/assets/${image}`; }