Merge branch 'staging-blog' into james/acx-2701-implement-semantic-he…

…ading-tag-for-blog-header
across-protocol · Sep 20, 2024 · a36ebb7 · a36ebb7
2 parents 7283f29 + 94dbc8b
commit a36ebb7
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 81 deletions.
diff --git a/src/app/(routes)/blog/_components/posts.tsx b/src/app/(routes)/blog/_components/posts.tsx
@@ -1,64 +1,27 @@
 import { Text } from "@/app/_components/text";
-import ArticleSnippetCard from "./article-snippet-card";
 import ArticleFullCard from "./article-full-card";
-import {
-  BlogPostWithRelevantEntries,
-  retrieveContentfulPublishedSlugs,
-} from "@/app/_lib/contentful";
+import { retrieveContentfulPublishedSlugs } from "@/app/_lib/contentful";
 import { SearchParams } from "../page";
+import { useState } from "react";
 
-export async function Posts({
-  getStartedSnippets,
-  recentArticleSlugs,
-  searchParams,
-}: {
-  searchParams: SearchParams;
-  recentArticleSlugs: string[];
-  getStartedSnippets: (BlogPostWithRelevantEntries | undefined)[];
-}) {
+export async function Posts({ searchParams }: { searchParams: SearchParams }) {
   const search = searchParams["search"];
-  if (!search) {
-    return (
-      <>
-        <div className="flex w-full flex-col gap-4">
-          <Text variant="body" className="text-grey-400">
-            Get started with Across
-          </Text>
-          <div className="w-full overflow-x-scroll scrollbar-hide">
-            <div className="grid w-[1024px] grid-cols-3 gap-5 md:w-full">
-              {getStartedSnippets.slice(0, 3).map((snippet) => (
-                <div className="w-full" key={snippet?.fields.slug}>
-                  <ArticleSnippetCard article={snippet!} />
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-        <div className="flex w-full flex-col gap-4">
-          <Text variant="body" className="text-grey-400">
-            Most recent articles
-          </Text>
-          {recentArticleSlugs.map((slug) => (
-            <ArticleFullCard key={slug} slug={slug} />
-          ))}
-        </div>
-      </>
-    );
-  } else {
-    const searchedSlugs = await retrieveContentfulPublishedSlugs({
-      query: search,
-    });
-    return searchedSlugs.length === 0 ? (
-      <h2 className="text-2xl my-auto flex-1 text-grey-400">No results.</h2>
-    ) : (
-      <div className="flex w-full flex-col gap-4">
-        <Text variant="body" className="text-grey-400">
-          Search results
-        </Text>
-        {searchedSlugs.map((slug) => (
-          <ArticleFullCard key={slug} slug={slug} />
-        ))}
-      </div>
-    );
-  }
+  const isSearch = Boolean(!!search);
+  const pageLength = 6;
+  const searchedSlugs = await retrieveContentfulPublishedSlugs({
+    query: search ? decodeURI(search) : undefined,
+    sortByRecent: true,
+    limit: pageLength,
+  });
+
+  return (
+    <div className="flex w-full flex-col gap-4">
+      <Text variant="body" className="text-grey-400">
+        {isSearch ? "Search results" : "Most recent articles"}
+      </Text>
+      {searchedSlugs.map((slug) => (
+        <ArticleFullCard key={slug} slug={slug} />
+      ))}
+    </div>
+  );
 }
diff --git a/src/app/(routes)/blog/page.tsx b/src/app/(routes)/blog/page.tsx
@@ -4,10 +4,7 @@ import BackgroundBanner from "./_components/background-banner";
 import Filter from "./_components/filter";
 
 import { Suspense } from "react";
-import {
-  retrieveContentfulPublishedSlugs,
-  retrieveContentfulEntry,
-} from "@/app/_lib/contentful";
+import { retrieveContentfulPublishedSlugs } from "@/app/_lib/contentful";
 import { Posts } from "./_components/posts";
 import { createCacheKey } from "@/app/_lib/cache";
 
@@ -18,23 +15,9 @@ type PageProps = {
 };
 
 export default async function BlogHomePage({ searchParams }: PageProps) {
-  const recentArticleSlugs = await retrieveContentfulPublishedSlugs({
-    limit: 6,
-    avoidTags: ["get-started"],
-    sortByRecent: true,
-  });
-  const getStartedSlugs = await retrieveContentfulPublishedSlugs({
-    limit: 3,
-    includeTags: ["get-started"],
-  });
-  const getStartedSnippets = await Promise.all(
-    getStartedSlugs.map((s) => retrieveContentfulEntry(s)),
-  );
-
   const key = createCacheKey({
     searchParams,
   });
-
   return (
     <>
       <BackgroundBanner />
@@ -51,11 +34,7 @@ export default async function BlogHomePage({ searchParams }: PageProps) {
             <h2 className="text-text-secondary text-2xl my-auto flex-1">Searching...</h2>
           }
         >
-          <Posts
-            getStartedSnippets={getStartedSnippets}
-            recentArticleSlugs={recentArticleSlugs}
-            searchParams={searchParams}
-          />
+          <Posts searchParams={searchParams} />
           <BackToTopButton />
         </Suspense>
       </main>

diff --git a/src/app/_lib/contentful.ts b/src/app/_lib/contentful.ts
@@ -51,12 +51,14 @@ export async function retrieveContentfulPublishedSlugs({
   avoidTags,
   includeTags,
   sortByRecent,
+  skip,
 }: {
   query?: string;
   limit?: number;
   avoidTags?: string[];
   includeTags?: string[];
   sortByRecent?: boolean;
+  skip?: number;
 } = {}): Promise<string[]> {
   const client = getProductionClient();
   const options = {
@@ -69,6 +71,7 @@ export async function retrieveContentfulPublishedSlugs({
     ...(avoidTags ? { "fields.tag[nin]": avoidTags.join(",").toLowerCase() } : {}),
     ...(includeTags ? { "fields.tag[in]": includeTags.join(",").toLowerCase() } : {}),
     ...(sortByRecent ? { order: "-fields.publishDate" } : {}),
+    ...(skip ? { skip } : {}),
   } as const;
   const entries =
     await client.withoutUnresolvableLinks.getEntries<TypeAcrossBlogPostSkeleton>(options);