Merge pull request #92 from Blazity/author-image

feat: add author image/change search tag color
Blazity · Nov 8, 2023 · c1ff0df · c1ff0df
2 parents 4c23029 + 005eb87
commit c1ff0df
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 7 deletions.
diff --git a/src/app/[lang]/article/[slug]/page.tsx b/src/app/[lang]/article/[slug]/page.tsx
@@ -40,7 +40,7 @@ export default async function Web({ params: { slug, lang } }: ArticlePageProps)
  imageUrl: image?.data?.url,
  publicationDate: publishedAt,
  title,
- author: { name: author?.name ?? "Anonymous" },
+ author: { name: author?.name ?? "Anonymous", imageUrl: author?.avatar?.data?.url },
  tags,
  slug,
  }}

diff --git a/src/components/ArticleCard/ArticleCard.tsx b/src/components/ArticleCard/ArticleCard.tsx
@@ -32,7 +32,7 @@ type ArticleCardProps = {
 export const hygraphArticleToCardProps = (article: {
  tags: string[]
  title: string
- author?: { name: string } | null
+ author?: { name: string; avatar?: { data: { url: string } } | undefined | null } | null
  image?: { data: { url: string }; description?: { text: string } | undefined | null } | null
  publishedAt?: string
  content?: { raw: RichTextContent } | null
@@ -44,7 +44,7 @@ export const hygraphArticleToCardProps = (article: {
  imageAlt: article.image?.description?.text,
  title: article?.title,
  content: article?.content,
- author: { name: article?.author?.name ?? "Anonymous" },
+ author: { name: article?.author?.name ?? "Anonymous", imageUrl: article?.author?.avatar?.data?.url },
  publicationDate: article?.publishedAt ? article.publishedAt : null,
  slug: article?.slug,
  }

diff --git a/src/components/ArticleCard/ArticlePublishDetails.tsx b/src/components/ArticleCard/ArticlePublishDetails.tsx
@@ -46,8 +46,18 @@ export function ArticlePublishDetails({
  <p>|</p>
  </>
  )}
- <p>{author}</p>
- {imageUrl && <Image src={imageUrl} alt="author" width={24} height={24} className="rounded-full" />}
+ <div className="flex items-center gap-2">
+ <p>{author}</p>
+ {imageUrl && (
+ <Image
+ src={imageUrl}
+ alt="author"
+ width={24}
+ height={24}
+ className="h-[24px] w-[24px] rounded-full border object-cover"
+ />
+ )}
+ </div>
  </div>
  )
 }
diff --git a/src/components/RecentArticles/RecentArticles.tsx b/src/components/RecentArticles/RecentArticles.tsx
@@ -22,7 +22,7 @@ export async function RecentArticles({ title }: RecentArticlesProps) {
  <ArticleCard
  article={hygraphArticleToCardProps(mainArticle)}
  orientation="horizontal"
- imageClassName="md:w-1/2"
+ imageClassName="lg:w-1/2"
  tagsPosition="over"
  />
  </div>

diff --git a/src/components/Search/SearchDialog.tsx b/src/components/Search/SearchDialog.tsx
@@ -92,7 +92,11 @@ function CustomHit({ hit, lang }: { hit: ArticleHit; lang: Locale }) {
  />
  <div className="flex flex-wrap gap-2">
  {hit.tags?.map((tag) => {
- return <Tag key={tag}>{tag}</Tag>
+ return (
+ <Tag variant="light" key={tag}>
+ {tag}
+ </Tag>
+ )
  })}
  </div>
  </article>

diff --git a/src/lib/queries/articles.ts b/src/lib/queries/articles.ts
@@ -35,6 +35,11 @@ export const getRecentArticlesWithMainQuery = graphql(`
  id
  author {
  name
+ avatar {
+ data {
+ url
+ }
+ }
  }
  publishedAt
  updatedAt
@@ -58,6 +63,11 @@ export const getRecentArticlesWithMainQuery = graphql(`
  id
  author {
  name
+ avatar {
+ data {
+ url
+ }
+ }
  }
  publishedAt
  updatedAt
@@ -88,6 +98,11 @@ export const getRecentArticlesQuery = graphql(`
  id
  author {
  name
+ avatar {
+ data {
+ url
+ }
+ }
  }
  publishedAt
  updatedAt
@@ -123,6 +138,11 @@ export const getArticleRecommendedArticlesQuery = graphql(`
  publishedAt
  author {
  name
+ avatar {
+ data {
+ url
+ }
+ }
  }
  image {
  description {
@@ -156,6 +176,11 @@ export const getArticleBySlugQuery = graphql(`
  author {
  id
  name
+ avatar {
+ data {
+ url
+ }
+ }
  }
  content {
  raw
@@ -218,6 +243,11 @@ export const listArticlesBySlugQuery = graphql(`
  author {
  id
  name
+ avatar {
+ data {
+ url
+ }
+ }
  }
  tags
  }
@@ -243,6 +273,11 @@ export const listArticlesByCategoryQuery = graphql(`
  }
  author {
  name
+ avatar {
+ data {
+ url
+ }
+ }
  }
  publishedAt
  tags

diff --git a/src/lib/queries/components.ts b/src/lib/queries/components.ts
@@ -66,6 +66,11 @@ export const getHomepageQuery = graphql(`
  id
  author {
  name
+ avatar {
+ data {
+ url
+ }
+ }
  }
  publishedAt
  locale
@@ -94,6 +99,11 @@ export const getHomepageQuery = graphql(`
  id
  author {
  name
+ avatar {
+ data {
+ url
+ }
+ }
  }
  publishedAt
  locale