Sundry fixes

app/components/Article/FeedbackForm/index.tsx

@@ -32,7 +32,6 @@ const FeedbackForm = ({
   hasOptions = true,
 }: FeedbackFormProps) => {
   // to be implemented.
-  console.log(pageid)
   const [selected, setSelected] = React.useState<string>()
   const options = [
     {
@@ -77,7 +76,7 @@ const FeedbackForm = ({
   const handleSubmit = () => {}
 
   return (
-    <div className={className} onBlur={handleBlur} onFocus={onFocus}>
+    <div key={pageid} className={className} onBlur={handleBlur} onFocus={onFocus}>
       <div className={'col-5 feedback-container bordered'}>
         <span className={'black small'}>What was the problem?</span>
         {hasOptions

app/components/Article/KeepGoing/index.tsx

@@ -17,7 +17,7 @@ type NextArticleProps = {
 const NextArticle = ({section, next, first}: NextArticleProps) =>
   next && (
     <>
-      <h2 className="padding-bottom-40">Keep reading! &#128073;</h2>
+      <h2 className="padding-bottom-40">Keep reading!</h2>
       <div className="padding-bottom-24">
         {first ? 'Start' : 'Continue'} with the {first ? 'first' : 'next'} entry in "
         {section?.title}"

app/components/ArticlesDropdown/dropdown.css

@@ -28,3 +28,9 @@
 .articles-dropdown-container .toc {
   border-right: 1px solid var(--colors-cool-grey-200);
 }
+
+@media (max-width: 640px) {
+  .articles-dropdown-container .toc {
+    border-right: 0;
+  }
+}

app/components/Button/button.css

@@ -98,7 +98,7 @@
   content: attr(data-tooltip);
   position: absolute;
   transform: translateY(var(--spacing-56, 56px));
-  padding: var(--spacing-4);
+  padding: var(--spacing-16);
   color: var(--colors-white);
   background: var(--colors-black);
   border-radius: 5px;

app/components/Footer/index.tsx

@@ -35,7 +35,7 @@ export const FooterBar: FunctionComponent = () => {
         </div>
         <div className="partners small col-4">
           <p className="small-bold padding-bottom-16">Partner projects</p>
-          <Link to="https://www.aisafety.com/" title="AIsafety.com" />
+          <Link to="https://www.aisafety.com/" title="AISafety.com" />
           <Link to="https://alignment.dev/" title="Alignment Ecosystem Development" />
         </div>
       </div>

app/components/Nav/Mobile/index.tsx

@@ -5,7 +5,6 @@ import {ListLarge} from '~/components/icons-generated'
 import {XLarge} from '~/components/icons-generated'
 import {CarrotLarge} from '~/components/icons-generated'
 import OpenBookIcon from '~/components/icons-generated/OpenBook'
-import BotIcon from '~/components/icons-generated/Bot'
 import MagnifyingLarge from '~/components/icons-generated/MagnifyingLarge'
 import {NavProps} from '~/components/Nav'
 import Button from '~/components/Button'
@@ -38,18 +37,18 @@ export const MobileNav = ({toc, categories}: NavProps) => {
 
                 {!showMenu ? (
                   <div>
-                    <MagnifyingLarge className={'search-icon'} onClick={toggleSearch} />
-                    <ListLarge className={'menu-button'} onClick={() => setShowMenu(true)} />
+                    <MagnifyingLarge className="search-icon pointer" onClick={toggleSearch} />
+                    <ListLarge className="pointer" onClick={() => setShowMenu(true)} />
                   </div>
                 ) : (
-                  <XLarge className={'menu-button'} onClick={toggleMenu} />
+                  <XLarge className="pointer" onClick={toggleMenu} />
                 )}
               </>
             )}
 
             {showSearch ? (
               <div className={'mobile-searchbar'}>
-                <XLarge className={'menu-button'} onClick={toggleMenu} />
+                <XLarge className="pointer" onClick={toggleMenu} />
                 <Search />
               </div>
             ) : null}
@@ -62,16 +61,10 @@ export const MobileNav = ({toc, categories}: NavProps) => {
               >
                 <p className={'composite-elements small'}>
                   <OpenBookIcon className={'icon-margin'} />
-                  Articles
+                  <span className="black">Articles</span>
                 </p>
                 <CarrotLarge />
               </Button>
-              <Button action="https://xkcd.com/285/" className="secondary full-width flex-start">
-                <p className={'composite-elements small'}>
-                  <BotIcon className={'icon-margin'} />
-                  Stampy chatbot
-                </p>
-              </Button>
             </div>
           )}
         </>
@@ -84,10 +77,10 @@ export const MobileNav = ({toc, categories}: NavProps) => {
               <OpenBookIcon className={'icon-margin'} />
               Articles
             </p>
-            <XLarge className={'menu-button'} onClick={toggleMenu} />
+            <XLarge className="pointer" onClick={toggleMenu} />
           </nav>
 
-          <div className={'articles-mobile'}>
+          <div className={'articles-mobile'} onClick={toggleMenu}>
             <ArticlesDropdown toc={toc} categories={categories || []} />
           </div>
         </>

app/components/Nav/Mobile/navMobile.css

@@ -9,9 +9,6 @@
   .top-logo {
     padding: 0;
   }
-  .menu-button {
-    cursor: pointer;
-  }
   .composite-elements {
     display: flex;
     align-items: center;

app/components/Nav/index.tsx

@@ -1,7 +1,6 @@
 import {Link} from '@remix-run/react'
 import {MenuItem} from '~/components/Menu'
 import OpenBookIcon from '~/components/icons-generated/OpenBook'
-import BotIcon from '~/components/icons-generated/Bot'
 import AISafetyIcon from '~/components/icons-generated/Aisafety'
 import ArticlesDropdown from '~/components/ArticlesDropdown'
 import type {TOCItem} from '~/routes/questions.toc'
@@ -29,12 +28,6 @@ export const Nav = ({toc, categories}: NavProps) => {
             id="showArticles"
           />
           <ArticlesDropdown toc={toc} categories={categories || []} />
-          <MenuItem
-            primary={true}
-            link="https://chat.aisafety.info"
-            icon={<BotIcon />}
-            text="Stampy chatbot"
-          />
           <li className="top-menu-item">
             <div className="top-menu-divider"></div>
           </li>

app/routes/_index.tsx

@@ -1,7 +1,6 @@
 import type {LoaderFunction} from '@remix-run/cloudflare'
 import {ShouldRevalidateFunction, redirect} from '@remix-run/react'
 import {QuestionState} from '~/server-utils/stampy'
-import {WidgetStampy} from '~/components/Widget/Stampy'
 import {ContentBoxMain, ContentBoxSecond, ContentBoxThird} from '~/components/ContentBox'
 import useToC from '~/hooks/useToC'
 import Grid from '~/components/Grid'
@@ -29,7 +28,6 @@ export const shouldRevalidate: ShouldRevalidateFunction = () => false
 
 export default function App() {
   const {advanced} = useToC()
-  console.log(advanced)
   return (
     <Page>
       <div className="page-body">
@@ -40,7 +38,7 @@ export default function App() {
         <ContentBoxThird />
 
         <div className="desktop-only padding-bottom-56" />
-        <WidgetStampy />
+        {/* <WidgetStampy /> */}
 
         <h3 className="grey large-bold padding-bottom-32">Advanced sections</h3>
         <Grid gridBoxes={advanced} />

app/routes/questions.toc.ts

@@ -1,6 +1,6 @@
 import type {LoaderFunction} from '@remix-run/cloudflare'
 import {reloadInBackgroundIfNeeded} from '~/server-utils/kv-cache'
-import {loadAllQuestions, Question, PageId} from '~/server-utils/stampy'
+import {loadAllQuestions, Question, PageId, QuestionStatus} from '~/server-utils/stampy'
 
 const MAX_LEVELS = 3
 export const INTRODUCTORY = 'Introductory'
@@ -59,7 +59,11 @@ export const loadToC = async (request: any): Promise<LoaderResp> => {
   const items = data.reduce((acc, item) => ({...acc, [item.title]: item}), {}) as {
     [k: string]: Question
   }
+  const canBeShown = ({status}: Question) =>
+    status && [QuestionStatus.LIVE_ON_SITE, QuestionStatus.NOT_STARTED].includes(status)
+
   data
+    .filter(canBeShown)
     .filter(({parents}) => parents && parents.length > 0)
     .forEach((item) => {
       item?.parents?.forEach((name) => {
@@ -72,6 +76,7 @@ export const loadToC = async (request: any): Promise<LoaderResp> => {
     })
   return {
     data: data
+      .filter(canBeShown)
       .filter(({tags}) => tags.includes(INTRODUCTORY) || tags.includes(ADVANCED))
       .map(formatQuestion(1))
       .sort((a, b) => (a.order || 0) - (b.order || 0)),

remix.config.js

@@ -1,6 +1,5 @@
 const routes = (defineRoutes) =>
   defineRoutes((route) => {
-    console.log(route)
     route('/*', 'routes/$redirects.tsx')
   })