Redirects

app/components/Article/KeepGoing/index.tsx

@@ -4,6 +4,7 @@ import {ArrowRight} from '~/components/icons-generated'
 import useToC from '~/hooks/useToC'
 import type {TOCItem} from '~/routes/questions.toc'
 import type {Question, RelatedQuestion} from '~/server-utils/stampy'
+import {questionUrl} from '~/routesMapper'
 import styles from './keepGoing.module.css'
 
 const nonContinueSections = ['8TJV']
@@ -18,12 +19,12 @@ const NextArticle = ({section, next, first}: NextArticleProps) =>
     <>
       <h2 className="padding-bottom-40">Keep going! &#128073;</h2>
       <div className="padding-bottom-24">
-        {first ? 'Start' : 'Continue'} with the {first ? 'first' : 'next'} article in{' '}
-        {section?.category}
+        {first ? 'Start' : 'Continue'} with the {first ? 'first' : 'next'} article in "
+        {section?.title}"
       </div>
       <div className={`${styles.container} flex-container bordered`}>
         <div className="vertically-centered white default-bold">{next.title}</div>
-        <Button action={`/${next.pageid}`} className="primary-alt">
+        <Button action={questionUrl(next)} className="primary-alt">
           {first ? 'Start' : 'Next'}
           <ArrowRight />
         </Button>
@@ -38,11 +39,11 @@ export const KeepGoing = ({pageid, relatedQuestions}: Question) => {
   const hasRelated = relatedQuestions && relatedQuestions.length > 0
   const skipNext = nonContinueSections.includes(section?.pageid || '')
 
-  const formatRelated = (related: RelatedQuestion) => {
+  const formatRelated = (hasIcon: boolean) => (related: RelatedQuestion) => {
     const relatedSection = findSection(related.pageid)
     const subtitle =
       relatedSection && relatedSection.pageid !== section?.pageid ? relatedSection.title : undefined
-    return {...related, subtitle, hasIcon: true}
+    return {...related, subtitle, hasIcon}
   }
 
   return (
@@ -56,12 +57,15 @@ export const KeepGoing = ({pageid, relatedQuestions}: Question) => {
       )}
       {hasRelated && !skipNext && (
         <div className="padding-bottom-40">
-          <ListTable elements={relatedQuestions.slice(0, 3).map(formatRelated)} />
+          <ListTable elements={relatedQuestions.slice(0, 3).map(formatRelated(true))} />
         </div>
       )}
       {skipNext && (
         <div className="padding-bottom-40">
-          <ListTable elements={getArticle(pageid)?.children?.map(formatRelated) || []} />
+          <ListTable
+            sameTab
+            elements={getArticle(pageid)?.children?.map(formatRelated(false)) || []}
+          />
         </div>
       )}
     </div>

app/components/Article/index.tsx

@@ -6,6 +6,7 @@ import EditIcon from '~/components/icons-generated/Pencil'
 import Button, {CompositeButton} from '~/components/Button'
 import {Action, ActionType} from '~/routes/questions.actions'
 import type {Glossary, Question} from '~/server-utils/stampy'
+import {tagUrl} from '~/routesMapper'
 import Contents from './Contents'
 import './article.css'
 
@@ -86,7 +87,7 @@ const ArticleMeta = ({question, className}: {question: Question; className?: str
 const Tags = ({tags}: Question) => (
   <div className="tags">
     {tags?.map((tag) => (
-      <Link key={tag} className="tag bordered" to={`/tags/${tag}`}>
+      <Link key={tag} className="tag bordered" to={tagUrl({name: tag})}>
         {tag}
       </Link>
     ))}

app/components/ArticlesDropdown/index.tsx

@@ -2,7 +2,8 @@ import {useState, useEffect} from 'react'
 import {Link as LinkElem} from '@remix-run/react'
 import type {Tag} from '~/server-utils/stampy'
 import {TOCItem, Category, ADVANCED, INTRODUCTORY} from '~/routes/questions.toc'
-import {buildTagUrl, sortFuncs} from '~/routes/tags.$'
+import {sortFuncs} from '~/routes/tags.$'
+import {questionUrl, tagsUrl, tagUrl} from '~/routesMapper'
 import Button from '~/components/Button'
 import './dropdown.css'
 
@@ -41,8 +42,8 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
       <div className="default-bold">{category}</div>
       {toc
         .filter((item) => item.category === category)
-        .map(({pageid, title}: TOCItem) => (
-          <Link key={`${pageid}-${title}`} to={`/${pageid}`} text={title} />
+        .map((item: TOCItem) => (
+          <Link key={`${item.pageid}-${item.title}`} to={questionUrl(item)} text={item.title} />
         ))}
     </div>
   )
@@ -65,12 +66,12 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
             <Link
               key={tag.rowId}
               className="articles-dropdown-teal-entry"
-              to={buildTagUrl(tag)}
+              to={tagUrl(tag)}
               text={tag.name}
             />
           ))}
 
-        <Button action="/tags/" className="secondary">
+        <Button action={tagsUrl()} className="secondary">
           <span onClick={hide}> Browse all categories</span>
         </Button>
       </div>

app/components/ArticlesNav/Menu.tsx

@@ -1,4 +1,5 @@
 import {Link} from '@remix-run/react'
+import {questionUrl} from '~/routesMapper'
 import type {TOCItem} from '~/routes/questions.toc'
 import './menu.css'
 
@@ -19,7 +20,7 @@ const Title = ({article, path, current}: Article) => {
   const selectedClass = article?.pageid === current ? ' selected' : ''
   if (article.pageid === (path && path[0])) {
     return (
-      <Link to={`/${article.pageid}`}>
+      <Link to={questionUrl(article)}>
         <div className={'article' + selectedClass}>
           <div className="articles-headerLine">{article?.title}</div>
         </div>
@@ -28,7 +29,7 @@ const Title = ({article, path, current}: Article) => {
   }
   return (
     <summary className={'articles-title' + selectedClass}>
-      {!article.hasText ? article.title : <Link to={`/${article.pageid}`}>{article.title}</Link>}
+      {!article.hasText ? article.title : <Link to={questionUrl(article)}>{article.title}</Link>}
       <DropdownIcon article={article} path={path} />
     </summary>
   )

app/components/CategoriesNav/Menu.tsx

@@ -2,6 +2,7 @@ import {useState} from 'react'
 import {Link} from '@remix-run/react'
 import {SearchInput} from '../SearchInput/Input'
 import {Tag as TagType} from '~/server-utils/stampy'
+import {tagUrl} from '~/routesMapper'
 import styles from './menu.module.css'
 
 interface CategoriesNavProps {
@@ -28,7 +29,7 @@ export const CategoriesNav = ({categories, activeCategoryId}: CategoriesNavProps
         .map(({tagId, name, questions}) => (
           <Link
             key={tagId}
-            to={`/tags/${tagId}/${name}`}
+            to={tagUrl({tagId, name})}
             className={[
               styles.categoryTitle,
               activeCategoryId == tagId ? 'teal-50-background' : '',

app/components/ContentBox/index.tsx

@@ -2,8 +2,9 @@ import {ReactNode} from 'react'
 import {ArrowRight} from '~/components/icons-generated'
 import ListTable from '~/components/Table'
 import Button from '~/components/Button'
-import './box.css'
 import SvgGroup from '~/components/icons-generated/Group'
+import {questionUrl} from '~/routesMapper'
+import './box.css'
 
 interface ContentBoxProps {
   title: string | ReactNode
@@ -47,7 +48,7 @@ export const ContentBoxMain = () => (
         </div>
       </>
     }
-    action="/9OGZ"
+    action={questionUrl({pageid: '9OGZ'})}
     actionTitle={
       <>
         Start here
@@ -65,8 +66,13 @@ export const ContentBoxMain = () => (
 )
 
 export const ContentBoxSecond = () => {
+  const article = {pageid: '9TDI', title: 'Not convinced? Explore the arguments.'}
   return (
-    <ContentBox title="Explore the arguments" action="/9TDI" actionTitle="Browse all arguments">
+    <ContentBox
+      title="Explore the arguments"
+      action={questionUrl(article)}
+      actionTitle="Browse all arguments"
+    >
       <ListTable
         elements={[
           {title: 'What are the main sources of AI existential risk?', pageid: '8503'},
@@ -79,10 +85,11 @@ export const ContentBoxSecond = () => {
 }
 
 export const ContentBoxThird = () => {
+  const article = {pageid: '8TJV', title: 'Get involved with AI safety'}
   return (
     <ContentBox
       title="Get involved with AI safety"
-      action="/8TJV"
+      action={questionUrl(article)}
       actionTitle="Learn how"
       classNameTable={'content-box-table main'}
     >

app/components/Error/error.module.css

@@ -1,3 +1,4 @@
 .errorContainer {
   margin: var(--spacing-24) auto;
+  height: 100%;
 }

app/components/Error/index.tsx

@@ -1,7 +1,13 @@
 import styles from './error.module.css'
 
 const errors = {
-  404: 'Sorry, this page was not found. Please go to the <a href="https://discord.com/invite/Bt8PaRTDQC">Discord server</a> and report where you found this link.',
+  404: (
+    <>
+      Sorry, this page was not found. Please go to the{' '}
+      <a href="https://discord.com/invite/Bt8PaRTDQC">Discord server</a> and report where you found
+      this link.
+    </>
+  ),
   500: 'Sorry, something bad happened. Please retry',
   emptyArticle: 'Sorry, it looks like this article could not be fetched',
 }
@@ -13,7 +19,7 @@ type ErrorType = {
 
 const Error = ({error}: {error?: ErrorType}) => {
   return (
-    <div className={styles.errorContainer}>
+    <div className={styles.errorContainer + ' col-10'}>
       <h1>{error?.statusText}</h1>
       {error?.status && <div>{errors[error.status as keyof typeof errors] || ''}</div>}
     </div>

app/components/Grid/index.tsx

@@ -1,8 +1,9 @@
 import type {TOCItem} from '~/routes/questions.toc'
+import {questionUrl} from '~/routesMapper'
 import './grid.css'
 
 export const GridBox = ({title, subtitle, icon, pageid}: TOCItem) => (
-  <a href={`/${pageid}`} className="grid-item bordered">
+  <a href={questionUrl({title, pageid})} className="grid-item bordered">
     {icon && <img alt={title} width="72" height="72" src={icon} />}
     <div className="grid-title">{title}</div>
     <div className="grid-description grey">{subtitle}</div>

app/components/Table/index.tsx

@@ -1,5 +1,6 @@
 import {Link} from '@remix-run/react'
 import {ArrowUpRight} from '~/components/icons-generated'
+import {questionUrl} from '~/routesMapper'
 import styles from './listTable.module.css'
 
 export type ListItem = {
@@ -13,18 +14,19 @@ export type ListTableProps = {
    * Browse by category
    */
   elements: ListItem[]
+  sameTab?: boolean
   className?: string
 }
 
-export const ListTable = ({elements, className}: ListTableProps) => (
+export const ListTable = ({elements, sameTab, className}: ListTableProps) => (
   <div className={styles.container + ' bordered' + (className ? ' ' + className : '')}>
     {elements.map(({pageid, title, subtitle, hasIcon}, i) => (
       <Link
         key={`entry-${i}`}
         className={styles.entry + ' teal-500 default-bold flex-container'}
-        to={`/${pageid}`}
-        target="_blank"
-        rel="noopener noreferrer"
+        to={questionUrl({pageid, title})}
+        target={sameTab ? undefined : '_blank'}
+        rel={sameTab ? undefined : 'noopener noreferrer'}
       >
         <div>
           <div>{title}</div>

app/components/Widget/Stampy.tsx

@@ -1,47 +1,52 @@
+import {useState} from 'react'
+import {Link} from '@remix-run/react'
 import StampyIcon from '~/components/icons-generated/Stampy'
 import SendIcon from '~/components/icons-generated/PlaneSend'
+import Button from '~/components/Button'
 import './stampy.css'
 
 export const WidgetStampy = () => {
+  const [question, setQuestion] = useState('')
+  const questions = [
+    'Why couldn’t we just turn the AI off?',
+    'How would the AI even get out in the world?',
+    'Do people seriously worry about existential risk from AI?',
+  ]
   return (
-    <div className={'widget-group'}>
-      <div className={'widget-header'}>
-        <p className={'widget-title'}>Questions?</p>
-        <p className={'widget-subtitle'}>Ask Stampy any question about AI Safety</p>
+    <div className="chat col-10">
+      <div className="col-6 padding-bottom-56">
+        <h2 className="teal-500">Questions?</h2>
+        <h2>Ask Stampy any question about AI Safety</h2>
       </div>
 
-      <div className={'widget-chat-group'}>
-        <div className={'chat-message'}>
-          <StampyIcon />
-          <div className={'chat-incoming-message'}>
-            <div className={'widget-conversation-start-header'}>Try asking me...</div>
-            {/*<img className={"rectangleIcon"} alt="" src="Rectangle.svg" />*/}
-            <div className={'widget-start-conversation'}>
-              <div className={'input-label'}>Why couldn’t we just turn the AI off?</div>
+      <div className="sample-messages-container padding-bottom-24">
+        <StampyIcon />
+        <div className="sample-messages rounded">
+          <div className="padding-bottom-24">Try asking me...</div>
+          {questions.map((question, i) => (
+            <div key={i} className="padding-bottom-16">
+              <Button
+                className="secondary-alt"
+                action={`https://chat.aisafety.info/?question=${question}`}
+              >
+                {question}
+              </Button>
             </div>
-            <div className={'widget-start-conversation'}>
-              <div className={'input-label'}>How would the AI even get out in the world?</div>
-            </div>
-            <div className={'widget-start-conversation'}>
-              <div className={'input-label'}>
-                Do people seriously worry about existential risk from AI?
-              </div>
-            </div>
-          </div>
+          ))}
         </div>
       </div>
 
-      <div className={'widget-ask'}>
-        <div className={'widget-textbox'}>
-          <input
-            type={'text'}
-            className={'widget-input'}
-            placeholder={'Ask Stampy a question...'}
-          />
-        </div>
-        <div className={'send-button-group'}>
+      <div className="widget-ask">
+        <input
+          type="text"
+          className="full-width bordered secondary"
+          placeholder="Ask Stampy a question..."
+          value={question}
+          onChange={(e) => setQuestion(e.target.value)}
+        />
+        <Link to={`https://chat.aisafety.info/?question=${question}`}>
           <SendIcon />
-        </div>
+        </Link>
       </div>
     </div>
   )