Toast study

packages/web/docs/next.config.js

@@ -1,6 +1,7 @@
+import withBundleAnalyzer from '@next/bundle-analyzer';
 import { withGuildDocs } from '@theguild/components/next.config';
 
-export default withGuildDocs({
+let config = withGuildDocs({
   output: 'export',
   eslint: {
     ignoreDuringBuilds: true,
@@ -334,3 +335,9 @@ export default withGuildDocs({
     return config;
   },
 });
+
+if (process.env.ANALYZE === 'true') {
+  config = withBundleAnalyzer({ enabled: true })(config);
+}
+
+export default config;

packages/web/docs/package.json

@@ -7,8 +7,10 @@
   },
   "scripts": {
     "build": "next build && next-sitemap",
+    "build:analyze": "ANALYZE=true next build",
     "dev": "next --turbopack",
     "postbuild": "pagefind --site .next/server/app --output-path out/_pagefind",
+    "prettier": "prettier --cache --write --list-different --ignore-unknown src",
     "validate-mdx-links": "pnpx validate-mdx-links@1.1.0 --files 'src/**/*.mdx'"
   },
   "dependencies": {
@@ -32,6 +34,7 @@
   },
   "devDependencies": {
     "@mdx-js/typescript-plugin": "^0.0.8",
+    "@next/bundle-analyzer": "^16.0.0",
     "@tailwindcss/typography": "0.5.16",
     "@theguild/tailwind-config": "0.6.3",
     "@types/react": "18.3.18",

packages/web/docs/src/app/blog/(posts)/graphql-request-cancellation/page.mdx

@@ -176,7 +176,7 @@ flowchart
   id31["Load total post likes (Post.likeCount)"]
   id32["Load comments for each post (Post.comments)"]
   id4["Load author for each comments (Comment.author)"]
-  id5["Load author avataer for each comment author (User.avatar)"]
+  id5["Load author avatar for each comment author (User.avatar)"]
 
   id1 --> id21
   id1 --> id22
@@ -199,7 +199,7 @@ flowchart
   id31["Load total post likes (Post.likeCount)"]
   id32["Load comments for each post (Post.comments)"]
   id4["Load author for each comments (Comment.author)"]
-  id5["Load author avataer for each comment author (User.avatar)"]
+  id5["Load author avatar for each comment author (User.avatar)"]
 
   id1 --> id21
   id1 --> id22

packages/web/docs/src/app/blog/blog-types.ts

@@ -1,9 +1,11 @@
 import type { StaticImageData } from 'next/image';
-import { AuthorId } from '../../authors';
-import { MdxFile, PageMapItem } from '../../mdx-types';
+import type { Author, AuthorId } from '../../authors';
+import type { MdxFile, PageMapItem } from '../../mdx-types';
+
+type OneOrMany<T> = T | T[];
 
 export interface BlogFrontmatter {
-  authors: AuthorId | AuthorId[];
+  authors: OneOrMany<AuthorId | Author>;
   title: string;
   date: string;
   tags: string | string[];

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/feed.xml/route.ts

@@ -2,11 +2,17 @@
 import RSS from 'rss';
 import { getPageMap } from '@theguild/components/server';
 import { AuthorId, authors } from '../../../authors';
-import { isBlogPost } from '../blog-types';
+import { BlogFrontmatter, isBlogPost } from '../blog-types';
 
-function getAuthor(name: string) {
-  const author = authors[name as AuthorId]?.name;
-  return author ?? name;
+function getAuthor(frontmatterAuthors: BlogFrontmatter['authors']): string {
+  const first = Array.isArray(frontmatterAuthors) ? frontmatterAuthors[0] : frontmatterAuthors;
+
+  if (typeof first === 'string') {
+    const author = authors[first as AuthorId];
+    return author ? author.name : 'Unknown Author';
+  }
+
+  return first.name;
 }
 
 export async function GET() {
@@ -20,11 +26,7 @@ export async function GET() {
           date: new Date(item.frontMatter.date),
           url: `https://the-guild.dev/graphql/hive${item.route}`,
           description: (item.frontMatter as any).description ?? '',
-          author: getAuthor(
-            typeof item.frontMatter.authors === 'string'
-              ? item.frontMatter.authors
-              : item.frontMatter.authors.at(0)!,
-          ),
+          author: getAuthor(item.frontMatter.authors),
           categories: Array.isArray(item.frontMatter.tags)
             ? item.frontMatter.tags
             : [item.frontMatter.tags],

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

@@ -1,5 +1,8 @@
 import { getPageMap } from '@theguild/components/server';
-import { isBlogPost } from './blog-types';
+import type { Author } from '../../authors';
+import { CaseStudyFile } from '../case-studies/case-study-types';
+import { getCaseStudies } from '../case-studies/get-case-studies';
+import { BlogFrontmatter, BlogPostFile, isBlogPost } from './blog-types';
 import { NewsletterFormCard } from './components/newsletter-form-card';
 import { PostsByTag } from './components/posts-by-tag';
 // We can't move this page to `(index)` dir together with `tag` page because Nextra crashes for
@@ -13,7 +16,10 @@ export const metadata = {
 
 export default async function BlogPage() {
   const [_meta, _indexPage, ...pageMap] = await getPageMap('/blog');
-  const allPosts = pageMap.filter(isBlogPost);
+
+  const caseStudies = await getCaseStudies().then(coerceCaseStudiesToBlogs);
+
+  const allPosts = pageMap.filter(isBlogPost).concat(caseStudies);
 
   return (
     <BlogPageLayout>
@@ -23,3 +29,21 @@ export default async function BlogPage() {
     </BlogPageLayout>
   );
 }
+
+function coerceCaseStudiesToBlogs(caseStudies: CaseStudyFile[]): BlogPostFile[] {
+  return caseStudies.map(caseStudy => ({
+    ...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/(posts)/layout.tsx

@@ -1,5 +1,4 @@
-import { GetYourAPIGameWhite } from '#components/get-your-api-game-white';
-import { cn, HiveLayoutConfig } from '@theguild/components';
+import { cn, GetYourAPIGameRightSection, HiveLayoutConfig } from '@theguild/components';
 import { CaseStudiesHeader } from '../case-studies-header';
 import { MoreStoriesSection } from '../more-stories-section';
 import '../../hive-prose-styles.css';
@@ -17,10 +16,10 @@ export default function CaseStudiesLayout({ children }: { children: React.ReactN
       <CaseStudiesHeader className="mx-auto max-w-[--nextra-content-width] pl-6 sm:my-12 md:pl-12 lg:my-24" />
       <div className={cn(MAIN_CONTENT, 'mx-auto flex [&>div:first-of-type>:first-child]:hidden')}>
         {children}
-        <LookingToUseHiveUpsellBlock className="sticky right-2 top-[108px] mb-8 h-min max-lg:hidden lg:w-[320px] xl:w-[400px]" />
+        <LookingToUseHiveUpsellBlock className="sticky right-2 top-[108px] mb-8 h-min shrink-0 max-lg:hidden lg:w-[320px] xl:w-[400px]" />
       </div>
       <MoreStoriesSection className="mx-4 md:mx-6" />
-      <GetYourAPIGameWhite className="sm:my-24" />
+      <GetYourAPIGameRightSection className="light [&_h2]:text-green-1000 mx-4 sm:my-24 md:mx-6" />
     </div>
   );
 }

packages/web/docs/src/app/case-studies/(posts)/sound-xyz/page.mdx

@@ -4,6 +4,7 @@ excerpt:
   'Sound.xyz is revolutionizing the music industry by addressing two critical challenges: the
   concentration of streaming revenue among top artists and the inadequate compensation per stream.'
 category: Music
+date: 2025-01-27
 authors:
   - name: David Greenstein
     position: Co-Founder