Sundry bugfixes

app/components/Article/KeepGoing/index.tsx

@@ -32,7 +32,7 @@ const NextArticle = ({section, next, first}: NextArticleProps) =>
   )
 
 export const KeepGoing = ({pageid, relatedQuestions}: Question) => {
-  const {findSection, getNext} = useToC()
+  const {findSection, getArticle, getNext} = useToC()
   const section = findSection(pageid)
   const next = getNext(pageid)
   const hasRelated = relatedQuestions && relatedQuestions.length > 0
@@ -52,7 +52,10 @@ export const KeepGoing = ({pageid, relatedQuestions}: Question) => {
       )}
 
       {next && hasRelated && !skipNext && <span>Or jump to a related question</span>}
-      {hasRelated && <ListTable elements={relatedQuestions.slice(0, 3).map(formatRelated)} />}
+      {hasRelated && !skipNext && (
+        <ListTable elements={relatedQuestions.slice(0, 3).map(formatRelated)} />
+      )}
+      {skipNext && <ListTable elements={getArticle(pageid)?.children?.map(formatRelated) || []} />}
     </div>
   )
 }

app/components/Article/index.tsx

@@ -15,7 +15,7 @@ const ArticleFooter = (question: Question) => {
   const date =
     question.updatedAt &&
     new Date(question.updatedAt).toLocaleDateString('en-GB', {
-      day: '2-digit',
+      year: 'numeric',
       month: 'short',
     })
 

app/components/ArticlesNav/menu.css

@@ -39,7 +39,7 @@
   cursor: pointer;
 }
 .articles-group .dropdown-icon {
-  background-image: url(https://cdn.builder.io/api/v1/image/assets/TEMP/96fb907358d911377bbe9140fe09eb0758bb8be662c1fc28040cc12a9dd7e0e6?apiKey=f1073757e44b4ccd8d59791af6c41a77&);
+  background-image: url(/assets/arrow.svg);
   background-repeat: no-repeat;
   background-position-x: center;
   padding-right: 16px;
@@ -76,7 +76,7 @@
 }
 .articles-group .parent::before {
   content: ' ';
-  background-image: url(https://cdn.builder.io/api/v1/image/assets/TEMP/8b3b87af0a97a2778dbdc11f33a22e6c9b6a02a262bc2f698e343eefe3912ef2?apiKey=f1073757e44b4ccd8d59791af6c41a77&);
+  background-image: url(/assets/green-dot.svg);
   background-repeat: no-repeat;
   width: 31px;
   height: 8px;

app/components/SearchInput/Input.tsx

@@ -19,12 +19,16 @@ interface SearchInputProps {
 }
 export const SearchInput = ({onChange, expandable, placeholderText}: SearchInputProps) => {
   const [search, setSearch] = useState('')
+
   const handleSearch = (search: string) => {
     setSearch(search)
     if (onChange) {
       onChange(search)
     }
   }
+
+  const clear = () => handleSearch('')
+
   return (
     <div className={`search-box ${expandable ? 'expandable' : ''}`}>
       <div className="search-inputChild" />
@@ -34,23 +38,16 @@ export const SearchInput = ({onChange, expandable, placeholderText}: SearchInput
           type="search"
           name="searchbar"
           placeholder={placeholderText ?? 'Search articles'}
-          className="search-input"
+          className="search-input black"
+          onKeyDown={(e) => {
+            if (e.key === 'Escape') clear()
+          }}
           onChange={(e) => {
             handleSearch(e.currentTarget.value)
           }}
           value={search}
-        ></input>
-        {search === '' ? null : (
-          <XIcon
-            className="x-icon"
-            onClick={() => {
-              setSearch('')
-              if (onChange) {
-                onChange('')
-              }
-            }}
-          />
-        )}
+        />
+        {search !== '' && <XIcon className="x-icon" onClick={clear} />}
       </label>
     </div>
   )

app/components/SearchInput/input.css

@@ -62,8 +62,6 @@
   width: calc(100% - 62px);
   border: 0;
   text-align: left;
-  font-size: 16px;
-  color: var(--text-black);
 }
 .search-input:focus-visible {
   border: 0;

app/components/Widget/Stampy.tsx

@@ -1,3 +1,5 @@
+import StampyIcon from '~/components/icons-generated/StampyChat'
+import SendIcon from '~/components/icons-generated/PlaneSend'
 import './stampy.css'
 
 export const WidgetStampy = () => {
@@ -10,11 +12,7 @@ export const WidgetStampy = () => {
 
       <div className={'widget-chat-group'}>
         <div className={'chat-message'}>
-          <img
-            className={'stampyIcon'}
-            alt=""
-            src="https://cdn.builder.io/api/v1/image/assets/TEMP/3a4dbb68cb3eefe4538c935148f0c71195a9e82a8605a7945521cd1905676e15?apiKey=f1073757e44b4ccd8d59791af6c41a77&"
-          />
+          <StampyIcon />
           <div className={'chat-incoming-message'}>
             <div className={'widget-conversation-start-header'}>Try asking me...</div>
             {/*<img className={"rectangleIcon"} alt="" src="Rectangle.svg" />*/}
@@ -43,11 +41,7 @@ export const WidgetStampy = () => {
         </div>
         <div className={'send-button-group'}>
           <div className={'send-button'} />
-          <img
-            className={'send-button-icon'}
-            alt=""
-            src="https://cdn.builder.io/api/v1/image/assets/TEMP/a970d700a49436e66b549fb8459a9475449f53a9ecf753531a1dc30747212a35?apiKey=f1073757e44b4ccd8d59791af6c41a77&"
-          />
+          <SendIcon />
         </div>
       </div>
     </div>

app/hooks/useSearch.tsx

@@ -1,6 +1,8 @@
 import {useState, useEffect, useRef, MutableRefObject} from 'react'
 import {Question} from '~/server-utils/stampy'
 
+const NUM_RESULTS = 8
+
 export type SearchResult = {
   pageid: string
   title: string
@@ -34,7 +36,7 @@ const byScore = (a: SearchResult, b: SearchResult) => b.score - a.score
 export const baselineSearch = async (
   searchQueryRaw: string,
   questions: Question[],
-  numResults = 5
+  numResults = NUM_RESULTS
 ): Promise<SearchResult[]> => {
   if (!searchQueryRaw) {
     return []
@@ -110,7 +112,10 @@ const normalize = (question: string) =>
  * use baseline search over the list of questions already loaded on the site.
  * Searches containing only one or two words will also use the baseline search
  */
-export const useSearch = (onSiteQuestions: MutableRefObject<Question[]>, numResults = 5) => {
+export const useSearch = (
+  onSiteQuestions: MutableRefObject<Question[]>,
+  numResults = NUM_RESULTS
+) => {
   const tfWorkerRef = useRef<Worker>()
   const runningQueryRef = useRef<string>() // detect current query in search function from previous render => ref
   const timeoutRef = useRef<ReturnType<typeof setTimeout>>() // cancel previous timeout => ref

app/newRoot.css

@@ -2,6 +2,7 @@
 
 :root {
   /* colors */
+  --colors-black: #000;
   --colors-cool-grey-900: #1b2b3e;
   --colors-cool-grey-800: #3a485a;
   --colors-cool-grey-700: #596676;
@@ -123,7 +124,7 @@ h2 {
 /* color classes */
 
 .black {
-  color: var(--text-black);
+  color: var(--colors-black, #000);
 }
 
 .grey {

stories/ArticlesKeepGoing.stories.tsx

@@ -66,6 +66,51 @@ const toc = [
       },
     ],
   },
+  {
+    title: 'The get involved section',
+    pageid: '8TJV',
+    hasText: true,
+    category: 'Introductory',
+    children: [
+      {
+        title: 'Give me money',
+        pageid: 'DOSH',
+        hasText: true,
+        children: [
+          {
+            title: 'Show me the money',
+            pageid: 'MONE',
+            hasText: true,
+          },
+          {
+            title: 'Donations, mayhaps?',
+            pageid: 'DONA',
+            hasText: true,
+          },
+          {
+            title: 'We accept american express',
+            pageid: 'AMEX',
+            hasText: true,
+          },
+          {
+            title: 'A fourth item, to see if it shows',
+            pageid: 'FOUR',
+            hasText: true,
+          },
+        ],
+      },
+      {
+        title: 'Give me time',
+        pageid: 'TIME',
+        hasText: true,
+      },
+      {
+        title: 'Give me content',
+        pageid: 'TEXT',
+        hasText: true,
+      },
+    ],
+  },
 ] as any[] as TOCItem[]
 
 const relatedQuestions = [
@@ -128,3 +173,10 @@ export const OnlyNext: Story = {
     relatedQuestions: [],
   } as any as Question,
 }
+
+export const GetInvolved: Story = {
+  args: {
+    pageid: 'DOSH',
+    relatedQuestions,
+  } as any as Question,
+}

stories/ArticlesNav.stories.ts

@@ -16,7 +16,7 @@ const article = {
   title: 'New to AI safety? Start here.',
   subtitle: 'Basic information about all of this',
   pageid: '9OGZ',
-  icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/9769202bfb08a9b87ab3d7e55cff70586447e8f76a8c076fff6f0d4e8902c5da?apiKey=f1073757e44b4ccd8d59791af6c41a77&',
+  icon: '/assets/coded-banner.svg',
   hasText: true,
   children: [
     {

stories/Grid.stories.tsx

@@ -5,56 +5,56 @@ const toc = [
   {
     title: 'Technical alignment research categories',
     subtitle: 'Lorem ipsum dolor sit amet consectetur',
-    icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/9769202bfb08a9b87ab3d7e55cff70586447e8f76a8c076fff6f0d4e8902c5da?apiKey=f1073757e44b4ccd8d59791af6c41a77&',
+    icon: 'https://cataas.com/cat/says/section1',
     pageid: 'https://google.com',
     hasText: true,
   },
   {
     title: 'Governance',
     subtitle: 'Lorem ipsum dolor sit amet consectetur',
-    icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/7b7d22b33dd958b157082b2ca8a77eef6ad552d10764d38f8035285bc1f7be11?apiKey=f1073757e44b4ccd8d59791af6c41a77&',
+    icon: 'https://cataas.com/cat/says/section2',
     pageid: 'https://google.com',
     hasText: true,
   },
   {
     title: 'Existential risk concepts',
     subtitle: 'Lorem ipsum dolor sit amet consectetur',
-    icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/11cfe00a2459aad8521abe570fe704c47a982a1d7686ea916cc318010eaa7a32?apiKey=f1073757e44b4ccd8d59791af6c41a77&',
+    icon: 'https://cataas.com/cat/says/section3',
     pageid: 'https://google.com',
     hasText: true,
   },
   {
     title: 'Predictions on advanced AI',
     subtitle: 'Lorem ipsum dolor sit amet consectetur',
-    icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/fd10e7106c3d8988b4046afc200b9224122ac8051c52aae1ce0debcf3f04f3cd?apiKey=f1073757e44b4ccd8d59791af6c41a77&',
+    icon: 'https://cataas.com/cat/says/section4',
     pageid: 'https://google.com',
     hasText: true,
   },
   {
     title: 'Prominent research organizations',
     subtitle: 'Lorem ipsum dolor sit amet consectetur',
-    icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/0de85958d44d9176c2dd4eb584ec22c23e7200150932ebc110a86bdf52f595d9?apiKey=f1073757e44b4ccd8d59791af6c41a77&',
+    icon: 'https://cataas.com/cat/says/section5',
     pageid: 'https://google.com',
     hasText: true,
   },
   {
     title: '6th item',
     subtitle: 'Lorem ipsum dolor sit amet consectetur',
-    icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/0de85958d44d9176c2dd4eb584ec22c23e7200150932ebc110a86bdf52f595d9?apiKey=f1073757e44b4ccd8d59791af6c41a77&',
+    icon: 'https://cataas.com/cat/says/section6',
     pageid: 'https://google.com',
     hasText: true,
   },
   {
     title: '7th item',
     subtitle: 'Lorem ipsum dolor sit amet consectetur',
-    icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/0de85958d44d9176c2dd4eb584ec22c23e7200150932ebc110a86bdf52f595d9?apiKey=f1073757e44b4ccd8d59791af6c41a77&',
+    icon: 'https://cataas.com/cat/says/section7',
     pageid: 'https://google.com',
     hasText: true,
   },
   {
     title: '8th item',
     subtitle: 'Lorem ipsum dolor sit amet consectetur',
-    icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/0de85958d44d9176c2dd4eb584ec22c23e7200150932ebc110a86bdf52f595d9?apiKey=f1073757e44b4ccd8d59791af6c41a77&',
+    icon: 'https://cataas.com/cat/says/section8',
     pageid: 'https://google.com',
     hasText: true,
   },

stories/Header.stories.ts

@@ -80,7 +80,6 @@ export const Primary: Story = {
         title: 'New to AI safety? Start here.',
         subtitle: 'Basic information about all of this',
         pageid: '9OGZ',
-        icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/9769202bfb08a9b87ab3d7e55cff70586447e8f76a8c076fff6f0d4e8902c5da?apiKey=f1073757e44b4ccd8d59791af6c41a77&',
         hasText: true,
         children: [
           {

stories/MenuItem.stories.ts

@@ -38,7 +38,7 @@ export const WithIcon: Story = {
   args: {
     link: '#',
     text: 'Link',
-    icon: 'https://cdn.builder.io/api/v1/image/assets/TEMP/3a6d92c1038a2e95b3f9371f120e22f78d20f757ed372832f0daa5df5d632a4b?apiKey=f1073757e44b4ccd8d59791af6c41a77&',
+    icon: '/assets/book-circle.svg',
     primary: false,
   },
 }