From 2d0687d885f66b616c9dad8c0b7e5e3121d48d2c Mon Sep 17 00:00:00 2001 From: prototypa Date: Sun, 6 Nov 2022 15:47:44 -0500 Subject: [PATCH] Add Latest Posts support --- package.json | 2 +- src/components/blog/Grid.astro | 9 ++++++ src/components/blog/GridItem.astro | 32 ++++++++++++++++++++ src/components/blog/HighlightedPosts.astro | 35 ++-------------------- src/components/blog/LatestPosts.astro | 24 +++++++++++++++ src/components/blog/ListItem.astro | 32 ++++++++++---------- src/components/blog/SinglePost.astro | 12 +++++--- src/utils/posts.js | 8 +++++ 8 files changed, 102 insertions(+), 52 deletions(-) create mode 100644 src/components/blog/Grid.astro create mode 100644 src/components/blog/GridItem.astro create mode 100644 src/components/blog/LatestPosts.astro diff --git a/package.json b/package.json index 398f7da..246036f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@onwidget/astrowind", "description": "A template to make your website using Astro + Tailwind CSS.", - "version": "0.5.2", + "version": "0.5.3", "private": true, "scripts": { "dev": "astro dev", diff --git a/src/components/blog/Grid.astro b/src/components/blog/Grid.astro new file mode 100644 index 0000000..4806c54 --- /dev/null +++ b/src/components/blog/Grid.astro @@ -0,0 +1,9 @@ +--- +import Item from '~/components/blog/GridItem.astro'; + +const { posts } = Astro.props; +--- + +
+ {posts.map((post) => )} +
diff --git a/src/components/blog/GridItem.astro b/src/components/blog/GridItem.astro new file mode 100644 index 0000000..d9be43a --- /dev/null +++ b/src/components/blog/GridItem.astro @@ -0,0 +1,32 @@ +--- +import Picture from '~/components/core/Picture.astro'; + +import { findImage } from '~/utils/images'; +import { getPermalink } from '~/utils/permalinks'; + +const { post } = Astro.props; + +const image = await findImage(post.image); +--- + +
+ +

+ + {post.title} + +

+

{post.excerpt || post.description}

+
diff --git a/src/components/blog/HighlightedPosts.astro b/src/components/blog/HighlightedPosts.astro index c5b3f73..15b70e6 100644 --- a/src/components/blog/HighlightedPosts.astro +++ b/src/components/blog/HighlightedPosts.astro @@ -1,9 +1,7 @@ --- -import Picture from '~/components/core/Picture.astro'; +import Grid from '~/components/blog/Grid.astro'; import { findPostsByIds } from '~/utils/posts'; -import { findImage } from '~/utils/images'; -import { getPermalink } from '~/utils/permalinks'; const ids = [ 'get-started-website-with-astro-tailwind-css', @@ -11,10 +9,7 @@ const ids = [ 'useful-resources-to-create-websites', 'astrowind-template-in-depth', ]; - -const items = await Promise.all( - (await findPostsByIds(ids)).map(async (item) => ({ ...item, image: await findImage(item.image) })) -); +const posts = await findPostsByIds(ids); ---
@@ -30,29 +25,5 @@ const items = await Promise.all(

-
- { - items.map((post) => ( - - )) - } -
+
diff --git a/src/components/blog/LatestPosts.astro b/src/components/blog/LatestPosts.astro new file mode 100644 index 0000000..9075902 --- /dev/null +++ b/src/components/blog/LatestPosts.astro @@ -0,0 +1,24 @@ +--- +import Grid from '~/components/blog/Grid.astro'; + +import { findLatestPosts } from '~/utils/posts'; + +const count = 4; +const posts = await findLatestPosts({ count }); +--- + +
+
+

+ Latest articles in our Blog +

+ +

+ The blog will be used to display AstroWind documentation. Each new article will be an important step that you will + need to know to be an expert in creating a website using Astro + Tailwind CSS The blog does not exist yet, but + very soon. Astro is a very interesting technology. Thanks. +

+
+ + +
diff --git a/src/components/blog/ListItem.astro b/src/components/blog/ListItem.astro index 5eb9b59..6e457ae 100644 --- a/src/components/blog/ListItem.astro +++ b/src/components/blog/ListItem.astro @@ -11,21 +11,23 @@ const { post } = Astro.props; const image = await findImage(post.image); --- -
- - - +
+ { + image && ( + + + + ) + }

diff --git a/src/components/blog/SinglePost.astro b/src/components/blog/SinglePost.astro index ed75319..ff20dfb 100644 --- a/src/components/blog/SinglePost.astro +++ b/src/components/blog/SinglePost.astro @@ -9,18 +9,18 @@ const { post } = Astro.props;
-
-

+

+

~ {Math.ceil(post.readingTime)} min read

{post.title}

{ - post.image && ( + post.image ? ( + ) : ( +
+
+
) }
diff --git a/src/utils/posts.js b/src/utils/posts.js index 9c133e7..6f81fb4 100644 --- a/src/utils/posts.js +++ b/src/utils/posts.js @@ -64,3 +64,11 @@ export const findPostsByIds = async (ids) => { return r; }, []); }; + +/** */ +export const findLatestPosts = async ({ count }) => { + const _count = count || 4; + const posts = await fetchPosts(); + + return posts ? posts.slice(_count * -1) : []; +};