[Ticket ID or name] Change button background to red

app/components/Article/KeepGoing/index.tsx

@@ -0,0 +1,40 @@
+import Button from '~/components/Button'
+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 './keepGoing.css'
+
+const NextArticle = ({category, next}: {category?: string; next?: TOCItem}) =>
+  next && (
+    <>
+      <h2>Keep going! &#128073;</h2>
+      <span>Continue with the next article in {category}</span>
+      <div className="keepGoing-next">
+        <span className="keepGoing-next-title">{next.title}</span>
+        <Button action={`/${next.pageid}`} className="primary-alt">
+          Next
+          <ArrowRight />
+        </Button>
+      </div>
+    </>
+  )
+
+export const KeepGoing = ({pageid, relatedQuestions}: Question) => {
+  const {findSection, getNext} = useToC()
+  const {category} = findSection(pageid) || {}
+  const next = getNext(pageid)
+  const hasRelated = relatedQuestions && relatedQuestions.length > 0
+
+  return (
+    <div className="keepGoing">
+      <NextArticle category={category} next={next} />
+
+      {next && hasRelated && <span>Or jump to a related question</span>}
+      {hasRelated && <ListTable elements={relatedQuestions.map((i) => ({...i, hasIcon: true}))} />}
+    </div>
+  )
+}
+
+export default KeepGoing

app/components/Article/index.tsx

@@ -1,4 +1,5 @@
 import {useRef, useState, useEffect} from 'react'
+import KeepGoing from '~/components/Article/KeepGoing'
 import CopyIcon from '~/components/icons-generated/Copy'
 import EditIcon from '~/components/icons-generated/Pencil'
 import ThumbUpIcon from '~/components/icons-generated/ThumbUp'
@@ -232,7 +233,7 @@ export const Article = ({question, glossary}: ArticleProps) => {
     const time = text.split(' ')
     return Math.ceil(time.length / rate) // ceil to avoid "0 min read"
   }
-  console.log('Question', question)
+
   return (
     <article className="article-container">
       <h1 className="teal">{title}</h1>
@@ -244,6 +245,8 @@ export const Article = ({question, glossary}: ArticleProps) => {
 
       <Contents pageid={pageid} html={text || ''} glossary={glossary || {}} />
 
+      <KeepGoing {...question} />
+
       <ArticleFooter {...question} />
       <hr />
       <div className="article-tags">

app/components/Button/button.css

@@ -12,7 +12,8 @@
 }
 
 .primary {
-  background: var(--colors-teal-500, #1d9089);
+  /* background: var(--colors-teal-500, #1d9089); */
+  background: red;
   font-weight: 600;
   color: var(--colors-white, #ffffff);
 }

app/components/Table/index.tsx

@@ -2,11 +2,16 @@ import {Link} from '@remix-run/react'
 import {ArrowUpRight} from '~/components/icons-generated'
 import './listTable.css'
 
+export type ListItem = {
+  pageid: string
+  title: string
+  hasIcon?: boolean
+}
 export type ListTableProps = {
   /**
    * Browse by category
    */
-  elements: any[]
+  elements: ListItem[]
 }
 
 export const ListTable = ({elements}: ListTableProps) => (

app/components/icons-generated/Aisafety.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgAisafety = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 175 40" {...props}>

app/components/icons-generated/ArrowRight.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgArrowRight = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>

app/components/icons-generated/ArrowUpRight.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgArrowUpRight = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>

app/components/icons-generated/BottomEclipse.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgBottomEclipse = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={320} height={289} fill="none" {...props}>

app/components/icons-generated/Chatbot.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgChatbot = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>

app/components/icons-generated/Code.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgCode = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 640 640" {...props}>

app/components/icons-generated/Copy.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgCopy = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>

app/components/icons-generated/DarkLight.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgDarkLight = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 512 512" {...props}>

app/components/icons-generated/Discord.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgDiscord = (props: SVGProps<SVGSVGElement>) => (
   <svg

app/components/icons-generated/Dislike.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgDislike = (props: SVGProps<SVGSVGElement>) => (
   <svg

app/components/icons-generated/EclipseBook.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgEclipseBook = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={1056} height={348} fill="none" {...props}>

app/components/icons-generated/EclipseIndividual.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgEclipseIndividual = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={320} height={224} fill="none" {...props}>

app/components/icons-generated/EclipseTeam.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgEclipseTeam = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 320 289" {...props}>

app/components/icons-generated/Edit.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgEdit = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 512 512" {...props}>

app/components/icons-generated/Ellipsis.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgEllipsis = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 448 512" {...props}>

app/components/icons-generated/Flag.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgFlag = (props: SVGProps<SVGSVGElement>) => (
   <svg

app/components/icons-generated/Followup.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgFollowup = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 512 512" {...props}>

app/components/icons-generated/GroupTopEcplise.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgGroupTopEcplise = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={320} height={224} fill="none" {...props}>

app/components/icons-generated/Hide.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgHide = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 640 512" {...props}>

app/components/icons-generated/Like.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgLike = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 512 512" {...props}>

app/components/icons-generated/Link.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgLink = (props: SVGProps<SVGSVGElement>) => (
   <svg

app/components/icons-generated/Magnifying.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgMagnifying = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 17" {...props}>

app/components/icons-generated/MagnifyingGlass.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgMagnifyingGlass = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 512 512" {...props}>

app/components/icons-generated/OpenBook.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgOpenBook = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>

app/components/icons-generated/Paper.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgPaper = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" {...props}>

app/components/icons-generated/Pencil.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgPencil = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>

app/components/icons-generated/PlaneSend.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgPlaneSend = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" {...props}>

app/components/icons-generated/Search.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgSearch = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 512 512" {...props}>

app/components/icons-generated/Share.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgShare = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 448 512" {...props}>

app/components/icons-generated/Speaker.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgSpeaker = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>

app/components/icons-generated/StampyChat.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgStampyChat = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={40} height={35} fill="none" {...props}>

app/components/icons-generated/Tag.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgTag = (props: SVGProps<SVGSVGElement>) => (
   <svg

app/components/icons-generated/ThumbDown.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgThumbDown = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>

app/components/icons-generated/ThumbUp.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgThumbUp = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>

app/components/icons-generated/Undo.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgUndo = (props: SVGProps<SVGSVGElement>) => (
   <svg

app/components/icons-generated/Users.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgUsers = (props: SVGProps<SVGSVGElement>) => (
   <svg

app/components/icons-generated/X.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type {SVGProps} from 'react'
 const SvgX = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" {...props}>

app/hooks/stateModifiers.tsx

@@ -1,4 +1,4 @@
-import {Question, QuestionState, RelatedQuestions, PageId} from '~/server-utils/stampy'
+import {Question, QuestionState, RelatedQuestion, PageId} from '~/server-utils/stampy'
 
 type StateEntry = [PageId, QuestionState]
 type StateString = string
@@ -70,7 +70,7 @@ export const insertAfter = (state: StateString, pageId: PageId, to: PageId): Sta
 export const insertInto = (
   state: StateString,
   pageid: PageId,
-  relatedQuestions: RelatedQuestions,
+  relatedQuestions: RelatedQuestion[],
   options = {toggle: true}
 ): StateString =>
   processStateEntries(state, (entries: StateEntry[]) =>

app/hooks/useCachedObjects.tsx

@@ -29,7 +29,7 @@ type useCachedObjectsType = {
   tags: useObjectsType<Tag[]>
   toc: useObjectsType<TOCItem[]>
 }
-const CachedObjectsContext = createContext<useCachedObjectsType | null>(null)
+export const CachedObjectsContext = createContext<useCachedObjectsType | null>(null)
 
 const getGlossary = async () => (await fetchGlossary()).data
 const getTags = async () => (await fetchTags()).tags
@@ -40,7 +40,6 @@ export const CachedObjectsProvider = ({children}: {children: ReactElement}) => {
   const tags = useItemsFuncs<Tag[]>(getTags)
   const toc = useItemsFuncs<TOCItem[]>(getToC)
 
-  console.log('caching')
   return (
     <CachedObjectsContext.Provider value={{tags, glossary, toc}}>
       {children}

app/hooks/useQuestionStateInUrl.ts

@@ -1,6 +1,6 @@
 import {useState, useRef, useEffect, useMemo, useCallback} from 'react'
 import {useSearchParams, useNavigation} from '@remix-run/react'
-import {Question, QuestionState, RelatedQuestions, PageId, Glossary} from '~/server-utils/stampy'
+import {Question, QuestionState, RelatedQuestion, PageId, Glossary} from '~/server-utils/stampy'
 import {fetchAllQuestionsOnSite} from '~/routes/questions.allQuestionsOnSite'
 import {fetchGlossary} from '~/routes/questions.glossary'
 import {
@@ -136,7 +136,7 @@ export default function useQuestionStateInUrl(minLogo: boolean, initialQuestions
   const unshownRelatedQuestions = (
     questions: Question[],
     questionProps: Question
-  ): RelatedQuestions => {
+  ): RelatedQuestion[] => {
     const {relatedQuestions} = questionProps
 
     const onSiteQuestions = onSiteQuestionsRef.current