Show case studies and product updates in blog

Author: hasparus

packages/web/docs/src/app/blog/components/blog-card.tsx

@@ -20,11 +20,15 @@ export function BlogCard({ post, className, variant, tag }: BlogCardProps) {
   const { title, tags } = frontmatter;
   const date = new Date(frontmatter.date);
 
-  const postAuthors: Author[] = (
-    typeof frontmatter.authors === 'string'
-      ? [authors[frontmatter.authors as AuthorId]]
-      : frontmatter.authors.map(author => authors[author as AuthorId])
-  ).filter(Boolean);
+  const authorsArray = Array.isArray(frontmatter.authors)
+    ? frontmatter.authors
+    : [frontmatter.authors];
+
+  const postAuthors: Author[] = authorsArray
+    .map((authorId: AuthorId | Author) =>
+      typeof authorId === 'string' ? authors[authorId] : authorId,
+    )
+    .filter(Boolean);
 
   if (postAuthors.length === 0) {
     console.error('author not found', frontmatter);
@@ -44,6 +48,7 @@ export function BlogCard({ post, className, variant, tag }: BlogCardProps) {
         className,
       )}
       href={post.route}
+      scroll
     >
       <article
         className={cn(
@@ -74,7 +79,8 @@ export function BlogCard({ post, className, variant, tag }: BlogCardProps) {
           <div className="relative size-6">
             <Image
               src={avatarSrc}
-              alt={firstAuthor.name}
+              alt=""
+              role="presentation"
               width={24}
               height={24}
               className="rounded-full"

packages/web/docs/src/app/blog/components/posts-by-tag/latest-posts.tsx

@@ -43,22 +43,24 @@ export function LatestPosts({
       <ul className="mt-6 grid grid-cols-1 gap-4 sm:grid sm:grid-cols-2 sm:gap-6 md:mt-16 lg:grid-cols-3 xl:grid-cols-4">
         {firstSection}
       </ul>
-      <details className="mt-8 sm:mt-12">
-        <summary className="bg-beige-200 text-green-1000 border-beige-300 hover:bg-beige-300 hive-focus mx-auto w-fit cursor-pointer select-none list-none rounded-lg border px-4 py-2 hover:border-current dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700 [&::marker]:hidden [[open]>&]:mb-8 [[open]>&]:sm:mb-12">
-          <span className="[[open]_&]:hidden">Show more</span>
-          <span className="hidden [[open]_&]:inline">Hide posts</span>
-        </summary>
+      {rest.length > 0 && (
+        <details className="mt-8 sm:mt-12">
+          <summary className="bg-beige-200 text-green-1000 border-beige-300 hover:bg-beige-300 hive-focus mx-auto w-fit cursor-pointer select-none list-none rounded-lg border px-4 py-2 hover:border-current dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700 [&::marker]:hidden [[open]>&]:mb-8 [[open]>&]:sm:mb-12">
+            <span className="[[open]_&]:hidden">Show more</span>
+            <span className="hidden [[open]_&]:inline">Hide posts</span>
+          </summary>
 
-        <ul className="mt-4 grid grid-cols-1 gap-4 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 xl:grid-cols-4">
-          {rest.map(post => {
-            return (
-              <li key={post.route} className="*:h-full">
-                <BlogCard post={post} tag={tag} />
-              </li>
-            );
-          })}
-        </ul>
-      </details>
+          <ul className="mt-4 grid grid-cols-1 gap-4 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 xl:grid-cols-4">
+            {rest.map(post => {
+              return (
+                <li key={post.route} className="*:h-full">
+                  <BlogCard post={post} tag={tag} />
+                </li>
+              );
+            })}
+          </ul>
+        </details>
+      )}
     </section>
   );
 }

packages/web/docs/src/app/blog/page.tsx

@@ -1,4 +1,6 @@
 import { getPageMap } from '@theguild/components/server';
+import { coerceCaseStudiesToBlogs } from '../case-studies/coerce-case-studies-to-blogs';
+import { getCaseStudies } from '../case-studies/get-case-studies';
 import { isBlogPost } from './blog-types';
 import { NewsletterFormCard } from './components/newsletter-form-card';
 import { PostsByTag } from './components/posts-by-tag';
@@ -13,7 +15,18 @@ export const metadata = {
 
 export default async function BlogPage() {
   const [_meta, _indexPage, ...pageMap] = await getPageMap('/blog');
-  const allPosts = pageMap.filter(isBlogPost);
+  const [, , ...productUpdates] = await getPageMap('/product-updates');
+
+  const caseStudies = await getCaseStudies().then(coerceCaseStudiesToBlogs);
+
+  const allPosts = pageMap
+    .filter(isBlogPost)
+    .concat(caseStudies)
+    .concat(
+      productUpdates
+        .filter(isBlogPost)
+        .map(post => ((post.frontMatter.tags ||= ['Product Update']), post)),
+    );
 
   return (
     <BlogPageLayout>

packages/web/docs/src/app/case-studies/all-case-studies-list.tsx

@@ -9,15 +9,16 @@ export function AllCaseStudiesList({ caseStudies }: { caseStudies: CaseStudyFile
       <Heading size="md" as="h2" className="text-center">
         Explore customer stories
       </Heading>
-      <ul className="mt-6 flex gap-4 max-sm:flex-col sm:mt-16 sm:gap-6">
+      <ul className="mt-6 flex gap-4 max-lg:flex-col sm:mt-16 sm:gap-6">
         {caseStudies.map(caseStudy => {
           return (
-            <li key={caseStudy.name} className="basis-1/3">
+            <li key={caseStudy.name} className="relative basis-1/3">
               <CaseStudyCard
                 category={caseStudy.frontMatter.category}
                 excerpt={caseStudy.frontMatter.excerpt}
                 href={caseStudy.route}
                 logo={getCompanyLogo(caseStudy.name)}
+                className="h-full"
               />
             </li>
           );

packages/web/docs/src/app/case-studies/case-studies-header.tsx

@@ -24,7 +24,7 @@ export function CaseStudiesHeader(props: React.HTMLAttributes<HTMLDivElement>) {
         <Heading as="h1" size="md" className="max-sm:text-[32px]">
           {frontmatter.title}
         </Heading>
-        <Authors authors={frontmatter.authors} className="mt-8" />
+        <Authors authors={frontmatter.authors} className="max-lg:my-4 lg:mt-8" />
       </div>
       <LogoWithDecorations className="h-[224px] w-full max-w-[640px] shrink-0 max-lg:-order-1 max-sm:mb-6 lg:w-[320px] lg:max-xl:h-[180px] xl:w-[400px] lg:max-xl:[&>svg]:w-[140px] lg:max-xl:[&_svg]:h-[120px]">
         {logo}

packages/web/docs/src/app/case-studies/coerce-case-studies-to-blogs.ts

@@ -0,0 +1,25 @@
+import { Author } from '../../authors';
+import { BlogFrontmatter, BlogPostFile } from '../blog/blog-types';
+import { CaseStudyFile } from './case-study-types';
+
+export function coerceCaseStudiesToBlogs(caseStudies: CaseStudyFile[]): BlogPostFile[] {
+  return caseStudies.map(coerceCaseStudyToBlog);
+}
+
+export function coerceCaseStudyToBlog(caseStudy: CaseStudyFile): BlogPostFile {
+  return {
+    ...caseStudy,
+    frontMatter: {
+      ...caseStudy.frontMatter,
+      tags: ['Case Study'],
+      authors: caseStudy.frontMatter.authors.map(
+        (author): Author => ({
+          name: author.name,
+          avatar: author.avatar,
+          link: '' as 'https://',
+          github: '',
+        }),
+      ),
+    } satisfies BlogFrontmatter,
+  };
+}

packages/web/docs/src/app/case-studies/get-case-studies.ts

@@ -0,0 +1,14 @@
+import { getPageMap } from '@theguild/components/server';
+import { isCaseStudy } from './isCaseStudyFile';
+
+export async function getCaseStudies() {
+  const [_meta, _indexPage, ...pageMap] = await getPageMap('/case-studies');
+
+  const caseStudies = pageMap.filter(isCaseStudy).sort((a, b) => {
+    const aDate = a.frontMatter.date;
+    const bDate = b.frontMatter.date;
+    return aDate < bDate ? 1 : aDate > bDate ? -1 : 0;
+  });
+
+  return caseStudies;
+}

packages/web/docs/src/app/case-studies/page.tsx

@@ -5,24 +5,21 @@ import {
   Heading,
   HiveLayoutConfig,
 } from '@theguild/components';
-import { getPageMap } from '@theguild/components/server';
 import { GetYourAPIGameWhite } from '../../components/get-your-api-game-white';
 import { HeroLinks } from '../../components/hero';
 import { LandingPageContainer } from '../../components/landing-page-container';
 import { TrustedBySection } from '../../components/trusted-by-section';
 import { AllCaseStudiesList } from './all-case-studies-list';
 import { CaseStudiesArchDecoration, CaseStudiesGradientDefs } from './case-studies-arch-decoration';
 import { FeaturedCaseStudiesGrid } from './featured-case-studies-grid';
-import { isCaseStudy } from './isCaseStudyFile';
+import { getCaseStudies } from './get-case-studies';
 
 export const metadata = {
   title: 'Case Studies',
 };
 
 export default async function CaseStudiesPage() {
-  const [_meta, _indexPage, ...pageMap] = await getPageMap('/case-studies');
-
-  const caseStudies = pageMap.filter(isCaseStudy);
+  const caseStudies = await getCaseStudies();
 
   return (
     <LandingPageContainer className="mx-auto max-w-[90rem] overflow-hidden px-6">