subtitles in related articles

StampyAI · Feb 13, 2024 · 8a85c4c · 8a85c4c
1 parent 59863db
commit 8a85c4c
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 71 deletions.
diff --git a/app/components/Article/KeepGoing/index.tsx b/app/components/Article/KeepGoing/index.tsx
@@ -3,7 +3,7 @@ import ListTable from '~/components/Table'
 import {ArrowRight} from '~/components/icons-generated'
 import useToC from '~/hooks/useToC'
 import type {TOCItem} from '~/routes/questions.toc'
-import type {Question} from '~/server-utils/stampy'
+import type {Question, RelatedQuestion} from '~/server-utils/stampy'
 import './keepGoing.css'
 
 const nonContinueSections = ['8TJV']
@@ -38,14 +38,21 @@ export const KeepGoing = ({pageid, relatedQuestions}: Question) => {
   const hasRelated = relatedQuestions && relatedQuestions.length > 0
   const skipNext = nonContinueSections.includes(section?.pageid || '')
 
+  const formatRelated = (related: RelatedQuestion) => {
+    const relatedSection = findSection(related.pageid)
+    const subtitle =
+      relatedSection && relatedSection.pageid !== section?.pageid ? relatedSection.title : undefined
+    return {...related, subtitle, hasIcon: true}
+  }
+
   return (
     <div className="keepGoing">
       {!skipNext && (
         <NextArticle section={section} next={next} first={section?.pageid === pageid} />
       )}
 
       {next && hasRelated && !skipNext && <span>Or jump to a related question</span>}
-      {hasRelated && <ListTable elements={relatedQuestions.map((i) => ({...i, hasIcon: true}))} />}
+      {hasRelated && <ListTable elements={relatedQuestions.slice(0, 3).map(formatRelated)} />}
     </div>
   )
 }

diff --git a/app/components/Table/index.tsx b/app/components/Table/index.tsx
@@ -5,6 +5,7 @@ import './listTable.css'
 export type ListItem = {
   pageid: string
   title: string
+  subtitle?: string
   hasIcon?: boolean
 }
 export type ListTableProps = {
@@ -16,9 +17,16 @@ export type ListTableProps = {
 
 export const ListTable = ({elements}: ListTableProps) => (
   <div className={'table-list'}>
-    {elements.map(({pageid, title, hasIcon}, i) => (
-      <Link key={`entry-${i}`} className={'table-entry'} to={`/${pageid}`}>
-        {title}
+    {elements.map(({pageid, title, subtitle, hasIcon}, i) => (
+      <Link
+        key={`entry-${i}`}
+        className={'table-entry'}
+        to={`/${pageid}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <div>{title}</div>
+        {subtitle && <div className="grey">{subtitle}</div>}
         {hasIcon && <ArrowUpRight />}
       </Link>
     ))}

diff --git a/stories/ArticlesKeepGoing.stories.tsx b/stories/ArticlesKeepGoing.stories.tsx
@@ -4,58 +4,81 @@ import {CachedObjectsContext} from '../app/hooks/useCachedObjects'
 import type {TOCItem} from '../app/routes/questions.toc'
 import type {Question} from '../app/server-utils/stampy'
 
-const toc = {
-  title: 'New to AI safety? Start here.',
-  pageid: '9OGZ',
-  hasText: true,
-  category: 'Your momma',
-  children: [
-    {
-      title: 'What would an AGI be able to do?',
-      pageid: 'NH51',
-      hasText: false,
-    },
-    {
-      title: 'Types of AI',
-      pageid: 'NH50',
-      hasText: false,
-      children: [
-        {
-          title: 'What are the differences between AGI, transformative AI, and superintelligence?',
-          pageid: '5864',
-          hasText: true,
-        },
-        {
-          title: 'What is intelligence?',
-          pageid: '6315',
-          hasText: true,
-        },
-      ],
-    },
-    {
-      title: 'Introduction to ML',
-      pageid: 'NH50',
-      hasText: false,
-      children: [
-        {
-          title: 'What are large language models?',
-          pageid: '8161',
-          hasText: true,
-        },
-        {
-          title: 'What is compute?',
-          pageid: '9358',
-          hasText: true,
-        },
-      ],
-    },
-  ],
-} as any as TOCItem
+const toc = [
+  {
+    title: 'New to AI safety? Start here.',
+    pageid: '9OGZ',
+    hasText: true,
+    category: 'Your momma',
+    children: [
+      {
+        title: 'What would an AGI be able to do?',
+        pageid: 'NH51',
+        hasText: false,
+      },
+      {
+        title: 'Types of AI',
+        pageid: 'NH50',
+        hasText: false,
+        children: [
+          {
+            title:
+              'What are the differences between AGI, transformative AI, and superintelligence?',
+            pageid: '5864',
+            hasText: true,
+          },
+          {
+            title: 'What is intelligence?',
+            pageid: '6315',
+            hasText: true,
+          },
+        ],
+      },
+      {
+        title: 'Introduction to ML',
+        pageid: 'NH50',
+        hasText: false,
+        children: [
+          {
+            title: 'What are large language models?',
+            pageid: '8161',
+            hasText: true,
+          },
+          {
+            title: 'What is compute?',
+            pageid: '9358',
+            hasText: true,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'This is a different section',
+    pageid: '9876',
+    hasText: true,
+    category: 'Your momma',
+    children: [
+      {
+        title: 'Bla bla bla',
+        pageid: 'NH72',
+        hasText: false,
+      },
+    ],
+  },
+] as any[] as TOCItem[]
+
+const relatedQuestions = [
+  {pageid: '1412', title: 'something or other'},
+  {pageid: 'NH72', title: 'From a different section'},
+  {pageid: '0987', title: 'This one doesnt have a section'},
+  {pageid: '1236', title: 'What time is it?'},
+]
 
 const withMockedToC = (StoryFn: any) => {
   return (
     <CachedObjectsContext.Provider
-      value={{toc: {items: [toc]}, glossary: {items: undefined}, tags: {items: undefined}}}
+      value={{toc: {items: toc}, glossary: {items: undefined}, tags: {items: undefined}}}
     >
       <StoryFn />
     </CachedObjectsContext.Provider>
@@ -74,24 +97,14 @@ type Story = StoryObj<typeof KeepGoing>
 export const Default: Story = {
   args: {
     pageid: 'NH50',
-    relatedQuestions: [
-      {pageid: '1412', title: 'something or other'},
-      {pageid: '1234', title: 'Another related question'},
-      {pageid: '1235', title: 'How about this one?'},
-      {pageid: '1236', title: 'What time is it?'},
-    ],
+    relatedQuestions,
   } as any as Question,
 }
 
 export const FirstArticle: Story = {
   args: {
     pageid: '9OGZ',
-    relatedQuestions: [
-      {pageid: '1412', title: 'something or other'},
-      {pageid: '1234', title: 'Another related question'},
-      {pageid: '1235', title: 'How about this one?'},
-      {pageid: '1236', title: 'What time is it?'},
-    ],
+    relatedQuestions,
   } as any as Question,
 }
 
@@ -105,12 +118,7 @@ export const NoMore: Story = {
 export const OnlyRelated: Story = {
   args: {
     pageid: '123',
-    relatedQuestions: [
-      {pageid: '1412', title: 'something or other'},
-      {pageid: '1234', title: 'Another related question'},
-      {pageid: '1235', title: 'How about this one?'},
-      {pageid: '1236', title: 'What time is it?'},
-    ],
+    relatedQuestions,
   } as any as Question,
 }