From a5c2e6bbde0b39e33ca030d1f149142936a66aae Mon Sep 17 00:00:00 2001 From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com> Date: Sat, 17 Feb 2024 08:16:25 +0400 Subject: [PATCH] Add blog and avatar page components This code introduces new Astro components for the blog pages and avatar elements, along with their corresponding layout and display factors. It also includes relevant asset imports, formatting utility functions, and mapping of blog content collection for dynamic content presentation. --- src/components/ui/avatars/AvatarBlog.astro | 20 ++++ .../ui/avatars/AvatarBlogLarge.astro | 16 ++++ src/pages/blog/[...slug].astro | 96 +++++++++++++++++++ 3 files changed, 132 insertions(+) create mode 100644 src/components/ui/avatars/AvatarBlog.astro create mode 100644 src/components/ui/avatars/AvatarBlogLarge.astro create mode 100644 src/pages/blog/[...slug].astro diff --git a/src/components/ui/avatars/AvatarBlog.astro b/src/components/ui/avatars/AvatarBlog.astro new file mode 100644 index 0000000..9e20c2f --- /dev/null +++ b/src/components/ui/avatars/AvatarBlog.astro @@ -0,0 +1,20 @@ +--- +import { Image } from "astro:assets"; + +import type { CollectionEntry } from "astro:content"; + +const { blogEntry } = Astro.props; + +interface Props { + blogEntry: CollectionEntry<"blog">; +} +--- +
+ {blogEntry.data.authorImageAlt} +
diff --git a/src/components/ui/avatars/AvatarBlogLarge.astro b/src/components/ui/avatars/AvatarBlogLarge.astro new file mode 100644 index 0000000..4f13485 --- /dev/null +++ b/src/components/ui/avatars/AvatarBlogLarge.astro @@ -0,0 +1,16 @@ +--- +import { Image } from "astro:assets"; + +import type { CollectionEntry } from "astro:content"; + +const { blogEntry } = Astro.props; + +interface Props { + blogEntry: CollectionEntry<"blog">; +} +--- +
+ {blogEntry.data.authorImageAlt} +
\ No newline at end of file diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro new file mode 100644 index 0000000..cb5ea3c --- /dev/null +++ b/src/pages/blog/[...slug].astro @@ -0,0 +1,96 @@ +--- +// Import section components +import MainLayout from "../../layouts/MainLayout.astro"; +import ProductTabBtn from "../../components/ui/buttons/ProductTabBtn.astro"; +import PrimaryCTA from "../../components/ui/buttons/PrimaryCTA.astro"; +import AvatarBlogLarge from "../../components/ui/avatars/AvatarBlogLarge.astro"; +import { Image } from "astro:assets"; +import { capitalize, formatDate } from "../../utils"; +import { getCollection } from "astro:content"; + +export async function getStaticPaths() { + const blogPosts = await getCollection("blog"); + return blogPosts.map((post) => ({ + params: { slug: post.slug }, + props: { post }, + })); +} + +const { post } = Astro.props; +--- + + +
+
+
+
+ +
+
+
+
+ + + {post.data.author} + + +
+
    +
  • + {formatDate(post.data.pubDate)} +
    • +
  • + {post.data.readTime} min read +
    • +
+
+
+
+
+
+ +

+ {post.data.title} +

+ +
+ { + post.data.contents.map((content: string, index: any) => ( + index === 1 ? +

+ {content} +

+ {post.data.cardImageAlt} :

+ {content} +

+ )) + } +
+ +
+ { + post.data.tags.map((tag: string) => ( + + {capitalize(tag)} + + )) + } +
+
+
+