feat: display cover image on blog post pages

someengineering · Jul 30, 2024 · 0358706 · 0358706
1 parent 701000d
commit 0358706
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 91 deletions.
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -1,6 +1,6 @@
 {
   "name": "Fix Security",
-  "short_name": "Fix Security",
+  "short_name": "Fix",
   "start_url": "./",
   "icons": [
     {

diff --git a/src/app/blog/tag/[slug]/page.tsx b/src/app/blog/tag/[slug]/page.tsx
@@ -35,7 +35,7 @@ export async function generateMetadata({
 
   const url = `${siteConfig.url}/blog/tag/${params.slug}`;
   const title = `${tag.charAt(0).toUpperCase()}${tag.slice(1)} | Blog`;
-  const description = `Guides, how-tos, and news about ${tag} from the Fix Security team.`;
+  const description = `Guides, how-tos, and news from the Fix Security team.`;
   const ogImage = openGraph({
     title,
     description,
@@ -103,8 +103,7 @@ export default async function BlogTagPage({
               {tagName.slice(1)}
             </h1>
             <p className="mt-6 text-pretty text-lg font-semibold text-gray-900 sm:text-xl">
-              Guides, how-tos, and news about {tagName} from the Fix Security
-              team.
+              Guides, how-tos, and news about from the Fix Security team.
             </p>
             <BlogPostList
               initialPosts={posts.edges.map((edge) => edge.node)}

diff --git a/src/components/blog/BlogDraft.tsx b/src/components/blog/BlogDraft.tsx
@@ -54,11 +54,16 @@ export default function BlogDraft({
                 ? draft.features.tableOfContents.items
                 : undefined
             }
+            coverImage={draft.coverImage?.url}
           />
         )}
         <Footer title={draft.title} tags={draft.tagsV2} />
-        {draft.series ? <RelatedPosts seriesSlug={draft.series.slug} /> : null}
       </article>
+      {draft.tagsV2?.find((tag) => tag.slug === 'launch-week') ? (
+        <RelatedPosts tagSlug="launch-week" />
+      ) : draft.series ? (
+        <RelatedPosts seriesSlug={draft.series.slug} />
+      ) : null}
     </div>
   );
 }
diff --git a/src/components/blog/BlogPost/Content.tsx b/src/components/blog/BlogPost/Content.tsx
@@ -1,16 +1,30 @@
+import Image from 'next/image';
+
 import TableOfContents from '@/components/blog/BlogPost/TableOfContents';
 import MarkdownContent from '@/components/common/MarkdownContent';
 import { TableOfContentsItemFragment as HashnodeTableOfContentsItem } from '@/generated/hashnode/graphql';
 
 export default function Content({
   markdown,
   tocItems,
+  coverImage,
 }: {
   markdown?: string;
   tocItems?: HashnodeTableOfContentsItem[];
+  coverImage?: string;
 }) {
   return (
     <div className="w-prose my-8 border-y border-gray-900/5 py-8">
+      {coverImage ? (
+        <div className="mb-8 h-max w-full">
+          <Image
+            src={coverImage}
+            alt=""
+            fill
+            className="!relative mx-auto rounded-xl object-contain"
+          />
+        </div>
+      ) : null}
       {tocItems ? <TableOfContents items={tocItems} /> : null}
       <MarkdownContent itemProp="articleBody">{markdown}</MarkdownContent>
     </div>

diff --git a/src/components/blog/BlogPost/RelatedPosts/index.tsx b/src/components/blog/BlogPost/RelatedPosts/index.tsx
@@ -1,17 +1,26 @@
 import Item from '@/components/blog/BlogPost/RelatedPosts/Item';
-import { getPostsBySeries } from '@/lib/hashnode';
+import { getPostsBySeries, getPostsByTag } from '@/lib/hashnode';
 
 export default async function RelatedPosts({
   seriesSlug,
+  tagSlug,
   excludePostSlug,
 }: {
-  seriesSlug: string;
+  seriesSlug?: string;
+  tagSlug?: string;
   excludePostSlug?: string;
 }) {
-  const posts = await getPostsBySeries({
-    first: excludePostSlug ? 4 : 3,
-    seriesSlug,
-  });
+  const posts = seriesSlug
+    ? await getPostsBySeries({
+        first: excludePostSlug ? 4 : 3,
+        seriesSlug,
+      })
+    : tagSlug
+      ? await getPostsByTag({
+          first: excludePostSlug ? 4 : 3,
+          tagSlug,
+        })
+      : null;
 
   if (!posts) {
     return null;

diff --git a/src/components/blog/BlogPost/index.tsx b/src/components/blog/BlogPost/index.tsx
@@ -59,11 +59,14 @@ export default function BlogPost({
                   ? post.features.tableOfContents.items
                   : undefined
               }
+              coverImage={post.coverImage?.url}
             />
           )}
           <Footer url={url} title={post.title} tags={post.tags ?? undefined} />
         </article>
-        {post.series ? (
+        {post.tags?.find((tag) => tag.slug === 'launch-week') ? (
+          <RelatedPosts tagSlug="launch-week" />
+        ) : post.series ? (
           <RelatedPosts
             seriesSlug={post.series.slug}
             excludePostSlug={post.slug}

diff --git a/src/generated/hashnode/graphql.ts b/src/generated/hashnode/graphql.ts
@@ -5087,6 +5087,7 @@ export type DraftFragment = {
   readTimeInMinutes: number;
   scheduledDate?: string | null;
   updatedAt: string;
+  coverImage?: { __typename?: 'DraftCoverImage'; url: string } | null;
   tagsV2: Array<
     | { __typename?: 'DraftBaseTag'; name: string; slug: string }
     | { __typename?: 'Tag'; id: string; name: string; slug: string }
@@ -5433,6 +5434,7 @@ export type DraftQuery = {
     readTimeInMinutes: number;
     scheduledDate?: string | null;
     updatedAt: string;
+    coverImage?: { __typename?: 'DraftCoverImage'; url: string } | null;
     tagsV2: Array<
       | { __typename?: 'DraftBaseTag'; name: string; slug: string }
       | { __typename?: 'Tag'; id: string; name: string; slug: string }
@@ -6267,6 +6269,16 @@ export const DraftFragmentDoc = {
           { kind: 'Field', name: { kind: 'Name', value: 'title' } },
           { kind: 'Field', name: { kind: 'Name', value: 'subtitle' } },
           { kind: 'Field', name: { kind: 'Name', value: 'slug' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'coverImage' },
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: 'url' } },
+              ],
+            },
+          },
           {
             kind: 'Field',
             name: { kind: 'Name', value: 'tagsV2' },
@@ -7702,6 +7714,16 @@ export const DraftDocument = {
           { kind: 'Field', name: { kind: 'Name', value: 'title' } },
           { kind: 'Field', name: { kind: 'Name', value: 'subtitle' } },
           { kind: 'Field', name: { kind: 'Name', value: 'slug' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'coverImage' },
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: 'url' } },
+              ],
+            },
+          },
           {
             kind: 'Field',
             name: { kind: 'Name', value: 'tagsV2' },

diff --git a/src/lib/hashnode/fragments/Draft.graphql b/src/lib/hashnode/fragments/Draft.graphql
@@ -3,6 +3,9 @@ fragment Draft on Draft {
   title
   subtitle
   slug
+  coverImage {
+    url
+  }
   tagsV2 {
     ...DraftTag
   }