Sundry fixes

app/components/Article/Contents.tsx

@@ -117,13 +117,13 @@ const insertGlossary = (pageid: string, glossary: Glossary) => {
       if (!entry) return undefined
       const link =
         entry.pageid &&
-        `<a href="${questionUrl(entry)}" class="button secondary">View full definition</a>`
+        `<a href="${questionUrl(entry)}" target="_blank" rel="noopener noreferrer" class="button secondary">View full definition</a>`
       const image = entry.image && `<img src="${entry.image}"/>`
       addPopup(
         e as HTMLSpanElement,
         `glossary-${entry.term}`,
-        `<div class="glossary-popup flex-container black small">
-              <div class="contents col-8">
+        `<div class="glossary-popup flex-container black small col-${image ? 6 : 4}">
+              <div class="contents col-6 ${image ? '' : 'full-width'}">
                    <div class="small-bold">${entry.term}</div>
                    <div class="defintion small">${entry.contents}</div>
                    ${link || ''}
@@ -161,7 +161,12 @@ const Contents = ({pageid, html, glossary}: {pageid: PageId; html: string; gloss
     el.querySelectorAll('.footnote-ref > a').forEach((e) => {
       const footnote = footnoteHTML(el, e as HTMLAnchorElement)
       const footnoteId = (e.getAttribute('href') || '').replace('#', '')
-      if (footnote) addPopup(e as HTMLAnchorElement, `footnote-${footnoteId}`, footnote)
+      if (footnote)
+        addPopup(
+          e as HTMLAnchorElement,
+          `footnote-${footnoteId}`,
+          `<div class="footnote">${footnote}</div>`
+        )
     })
   }, [html, glossary, pageid])
 

app/components/Article/KeepGoing/index.tsx

@@ -24,7 +24,7 @@ const NextArticle = ({section, next, first}: NextArticleProps) =>
       </div>
       <div className={`${styles.container} flex-container bordered ${styles.flex_dynamic}`}>
         <div className="vertically-centered white default-bold">{next.title}</div>
-        <Button action={questionUrl(next)} className="primary-alt">
+        <Button action={questionUrl(next)} className="vertically-centered primary-alt">
           {first ? 'Start' : 'Next'}
           <ArrowRight />
         </Button>

app/components/Article/KeepGoing/keepGoing.module.css

@@ -3,6 +3,7 @@
   justify-content: space-between;
   padding: var(--spacing-32);
   margin-bottom: var(--spacing-56);
+  gap: var(--spacing-24);
 }
 
 @media (max-width: 640px) {

app/components/Article/article.css

@@ -78,8 +78,12 @@ article .link-popup {
     visibility 0s 300ms,
     opacity cubic-bezier(1, 0, 1, 1) 300ms;
 }
+article .link-popup .footnote {
+  padding: var(--spacing-24) var(--spacing-24) 0 var(--spacing-24);
+}
+
 article .glossary-popup {
-  width: 522px;
+  max-width: 522px;
   height: 304px;
 }
 

app/components/Article/index.tsx

@@ -45,6 +45,7 @@ const ArticleFooter = (question: Question) => {
             className="secondary"
             action={question.answerEditLink || ''}
             tooltip="Edit article"
+            props={{target: '_blank', rel: 'noopener noreferrer'}}
           >
             <EditIcon className="no-fill" />
           </Button>
@@ -94,7 +95,12 @@ const ArticleActions = ({answerEditLink}: Question) => {
       <Button className="secondary" action={copyLink} tooltip={tooltip}>
         <CopyIcon />
       </Button>
-      <Button className="secondary" action={answerEditLink || ''} tooltip="Edit article">
+      <Button
+        className="secondary"
+        action={answerEditLink || ''}
+        tooltip="Edit article"
+        props={{target: '_blank', rel: 'noopener noreferrer'}}
+      >
         <EditIcon className="no-fill" />
       </Button>
     </CompositeButton>

app/components/ArticlesDropdown/dropdown.css

@@ -8,17 +8,23 @@
   z-index: 100;
   top: 80px;
   position: absolute;
-  padding: var(--spacing-56);
   justify-content: space-between;
   display: flex;
 
   transition: visibility 0.2s;
   visibility: hidden;
 }
+.articles-dropdown-container > div {
+  padding: var(--spacing-56);
+}
 
 .articles-dropdown-title.top-margin-large {
   margin-top: var(--spacing-56);
 }
 .articles-dropdown-entry {
   margin: var(--spacing-12) 0;
 }
+
+.articles-dropdown-container .toc {
+  border-right: 1px solid var(--colors-cool-grey-200);
+}

app/components/ArticlesDropdown/index.tsx

@@ -39,7 +39,7 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
     className?: string
   }) => (
     <div className={className || ''}>
-      <div className="default-bold">{category}</div>
+      <div className="default-bold">{category} sections</div>
       {toc
         .filter((item) => item.category === category)
         .map((item: TOCItem) => (
@@ -50,21 +50,22 @@ export const ArticlesDropdown = ({toc, categories}: ArticlesDropdownProps) => {
 
   return shown ? null : (
     <div className="articles-dropdown-container bordered col-8">
-      <div>
+      <div className="col-5 toc">
         <ArticlesSection category={INTRODUCTORY} toc={toc} className="padding-bottom-32" />
         <ArticlesSection category={ADVANCED} toc={toc} />
       </div>
-
-      <div>
+      <div className="col-4">
         {/*sorted right side*/}
         <div className="default-bold">Browse by category</div>
 
-        {categories
-          ?.sort(sortFuncs['by number of questions'])
-          .slice(0, 12)
-          .map((tag) => (
-            <Link key={tag.rowId} className="teal-500" to={tagUrl(tag)} text={tag.name} />
-          ))}
+        <div className="padding-bottom-8">
+          {categories
+            ?.sort(sortFuncs['by number of questions'])
+            .slice(0, 12)
+            .map((tag) => (
+              <Link key={tag.rowId} className="teal-500" to={tagUrl(tag)} text={tag.name} />
+            ))}
+        </div>
 
         <Button action={tagsUrl()} className="secondary">
           <span onClick={hide}> Browse all categories</span>

app/components/Button/index.tsx

@@ -8,8 +8,9 @@ type ButtonProps = {
   className?: string
   tooltip?: string
   disabled?: boolean
+  props?: {[k: string]: any}
 }
-const Button = ({children, action, tooltip, className, disabled = false}: ButtonProps) => {
+const Button = ({children, action, tooltip, className, disabled = false, props}: ButtonProps) => {
   const classes = ['button', className, tooltip && 'tooltip'].filter((i) => i).join(' ')
   if (typeof action === 'string') {
     return (
@@ -22,13 +23,20 @@ const Button = ({children, action, tooltip, className, disabled = false}: Button
             e.preventDefault()
           }
         }}
+        {...props}
       >
         {children}
       </Link>
     )
   }
   return (
-    <button className={classes} onClick={action} data-tooltip={tooltip} disabled={disabled}>
+    <button
+      className={classes}
+      onClick={action}
+      data-tooltip={tooltip}
+      disabled={disabled}
+      {...props}
+    >
       {children}
     </button>
   )

app/components/ContentBox/index.tsx

@@ -51,7 +51,7 @@ export const ContentBoxMain = () => (
     action={questionUrl({pageid: '9OGZ'})}
     actionTitle={
       <>
-        Start reading
+        <span className="default-bold">Start reading</span>
         <ArrowRight />
       </>
     }
@@ -70,6 +70,7 @@ export const ContentBoxSecond = () => {
       actionTitle="Explore the arguments"
     >
       <ListTable
+        sameTab
         elements={[
           {title: 'What are the main sources of AI existential risk?', pageid: '8503'},
           {
@@ -91,7 +92,7 @@ export const ContentBoxThird = () => {
       title="Want to help with AI safety?"
       action={questionUrl(article)}
       actionTitle="Get involved"
-      classNameTable={'content-box-table main'}
+      classNameTable="content-box-table main"
     >
       <SvgGroup className="desktop-only" />
       <GetInvolvedMobile className="mobile-only full-width" />

app/components/Footer/index.tsx

@@ -31,7 +31,7 @@ export const FooterBar: FunctionComponent = () => {
           <Link to="https://www.every.org/stampy?utm_campaign=donate-link#/donate" title="Donate" />
           <Link to="https://github.com/StampyAI/stampy-ui" title="Code" />
           <Link to="https://get_involved.aisafety.info/" title="Write" />
-          <Link to="https://discord.com/invite/Bt8PaRTDQC" title="Join us on Discord" />
+          <Link to="https://discord.gg/88TbjZnNyA" title="Join us on Discord" />
         </div>
         <div className="partners small col-4">
           <p className="small-bold padding-bottom-16">Partner projects</p>

app/routes/_index.tsx

@@ -29,6 +29,7 @@ export const shouldRevalidate: ShouldRevalidateFunction = () => false
 
 export default function App() {
   const {advanced} = useToC()
+  console.log(advanced)
   return (
     <Page>
       <div className="page-body">
@@ -38,6 +39,7 @@ export default function App() {
         <ContentBoxSecond />
         <ContentBoxThird />
 
+        <div className="desktop-only padding-bottom-56" />
         <WidgetStampy />
 
         <h3 className="grey large-bold padding-bottom-32">Advanced sections</h3>

app/routes/questions.toc.ts

@@ -73,7 +73,8 @@ export const loadToC = async (request: any): Promise<LoaderResp> => {
   return {
     data: data
       .filter(({tags}) => tags.includes(INTRODUCTORY) || tags.includes(ADVANCED))
-      .map(formatQuestion(1)),
+      .map(formatQuestion(1))
+      .sort((a, b) => (a.order || 0) - (b.order || 0)),
     timestamp,
   }
 }