Minor updates

src/pages/customer-stories/[slug]/index.astro

@@ -3,6 +3,10 @@ import {
   render as toPlainText,
   type StructuredTextDocument,
 } from 'datocms-structured-text-to-plain-text';
+import { BlogPostInline } from '~/components/inlineRecords/BlogPostInline';
+import { BlogPostLink } from '~/components/linkToRecords/BlogPostLink';
+import { ChangelogEntryInline } from '~/components/inlineRecords/ChangelogEntryInline';
+import { ChangelogEntryLink } from '~/components/linkToRecords/ChangelogEntryLink';
 import { CodesandboxEmbedBlock } from '~/components/blocks/CodesandboxEmbedBlock';
 import { CtaButton } from '~/components/blocks/CtaButton';
 import { Demo } from '~/components/blocks/Demo';
@@ -23,6 +27,7 @@ import { Wrapper } from '~/components/Wrapper';
 import { avoidAstroTypeCheckBug, notFoundResponse } from '~/lib/notFoundResponse';
 import { executeQuery } from '~/lib/datocms/executeQuery';
 import { filterNodes } from '~/lib/datocms/filterNodes';
+import { intersperse } from '~/lib/intersperse';
 import { isHeading } from 'datocms-structured-text-utils';
 import { query } from './_graphql';
 import { slugify } from '~/lib/slugify';
@@ -78,12 +83,15 @@ const tocItems = filterNodes(
         <p>
           In conversation with
           {
-            post.people.map((person, i) => (
-              <span>
-                {person.name} ({person.title})
-                {i < post.people.length - 2 ? ', ' : i === post.people.length - 2 ? ' and ' : ''}
-              </span>
-            ))
+            intersperse(
+              post.people.map((person) => (
+                <span>
+                  {person.name} ({person.title})
+                </span>
+              )),
+              ', ',
+              ' and ',
+            )
           }
         </p>
       </div>
@@ -105,6 +113,14 @@ const tocItems = filterNodes(
               CtaButtonRecord: CtaButton,
               QuestionAnswerRecord: QuestionAnswer,
             })}
+            inlineRecordComponents={withAllComponents(post.content.links, {
+              BlogPostRecord: BlogPostInline,
+              ChangelogEntryRecord: ChangelogEntryInline,
+            })}
+            linkToRecordComponents={withAllComponents(post.content.links, {
+              BlogPostRecord: BlogPostLink,
+              ChangelogEntryRecord: ChangelogEntryLink,
+            })}
           />
         </Prose>
       </div>

src/pages/customer-stories/p/[pageIndex]/index.astro

@@ -7,6 +7,7 @@ import { Space } from '~/components/Space';
 import { Wrapper } from '~/components/Wrapper';
 import { buildUrlForCustomerStory } from '~/lib/datocms/gqlUrlBuilder/customerStory';
 import { executeQuery } from '~/lib/datocms/executeQuery';
+import { intersperse } from '~/lib/intersperse';
 import { notFoundResponse, avoidAstroTypeCheckBug } from '~/lib/notFoundResponse';
 import { perPage, query } from './_graphql';
 import { render as toPlainText } from 'datocms-structured-text-to-plain-text';
@@ -42,8 +43,8 @@ if (!page || posts.length === 0) {
   <Hero>
     <Fragment slot="title"><mark>Customer Stories</mark></Fragment>
     <Fragment slot="subtitle">
-      Conversations with customers working on some really cool use cases with DatoCMS</Fragment
-    >
+      Conversations with customers working on some really cool use cases with DatoCMS
+    </Fragment>
   </Hero>
 
   <Wrapper>
@@ -75,17 +76,12 @@ if (!page || posts.length === 0) {
                     </div>
 
                     <p>
-                      With{' '}
-                      {post.people.map((person, i) => (
-                        <span>
-                          {person.name}
-                          {i < post.people.length - 2
-                            ? ', '
-                            : i === post.people.length - 2
-                              ? ' and '
-                              : ''}
-                        </span>
-                      ))}
+                      With
+                      {intersperse(
+                        post.people.map((person) => <span>{person.name}</span>),
+                        ', ',
+                        ' and ',
+                      )}
                     </p>
                   </div>
                 </div>