make all links from the answers external #340

app/root.css

@@ -818,19 +818,6 @@ a.see-more.visible:after {
   content: 'See less';
 }
 
-a[target='_blank']:not(.icon-link, .transparent-link):after {
-  content: ' ';
-  display: inline-block;
-  vertical-align: top;
-  width: 12px;
-  height: 12px;
-  margin-left: 2px;
-  /* Chrome doesn't suppot non-prefix mask yet and we don't use post-css */
-  -webkit-mask: url('/assets/Icon_External_Link.svg') no-repeat center center;
-  -webkit-mask-size: cover;
-  background-color: currentColor;
-}
-
 .error {
   color: red;
 }

app/routes/index.tsx

@@ -10,7 +10,6 @@ import {loadInitialQuestions, loadTags, QuestionState} from '~/server-utils/stam
 import {TOP} from '~/hooks/stateModifiers'
 import useQuestionStateInUrl from '~/hooks/useQuestionStateInUrl'
 import useDraggable from '~/hooks/useDraggable'
-import {getStateEntries} from '~/hooks/stateModifiers'
 import Search from '~/components/search'
 import {Header, Footer} from '~/components/layouts'
 import {LINK_WITHOUT_DETAILS_CLS, Question} from '~/routes/questions/$question'
@@ -172,13 +171,6 @@ export default function App() {
       showMore(el)
       return
     }
-
-    const url = new URL(el.href)
-    if (url.hostname === window.location.hostname) {
-      e.preventDefault()
-      const state = new URLSearchParams(url.search).get('state')
-      if (state) selectQuestion(getStateEntries(state)[0][0], '')
-    }
   }
 
   const nextPageLinkRef = useRef<null | string>(null)

app/server-utils/parsing-utils.spec.ts

@@ -1,4 +1,4 @@
-import {urlToIframe, uniqueFootnotes, externalLinksOnNewTab} from './parsing-utils'
+import {urlToIframe, uniqueFootnotes, allLinksOnNewTab} from './parsing-utils'
 
 describe('urlToIframe', () => {
   describe('should not convert a markdown link', () => {
@@ -79,16 +79,14 @@ describe('uniqueFootnotes', () => {
 
 describe('externalLinksOnNewTab', () => {
   test('no link', () => {
-    expect(externalLinksOnNewTab('gg')).toBe('gg')
+    expect(allLinksOnNewTab('gg')).toBe('gg')
   })
 
   test('text with internal and external links', () => {
     expect(
-      externalLinksOnNewTab(
-        'x <a href="/?state=3">gg</a> and <a href="https://example.com">hh</a> y'
-      )
+      allLinksOnNewTab('x <a href="/?state=3">gg</a> and <a href="https://example.com">hh</a> y')
     ).toBe(
-      'x <a href="/?state=3">gg</a> and <a href="https://example.com" target="_blank" rel="noreferrer">hh</a> y'
+      'x <a href="/?state=3" target="_blank" rel="noreferrer">gg</a> and <a href="https://example.com" target="_blank" rel="noreferrer">hh</a> y'
     )
   })
 })

app/server-utils/parsing-utils.ts

@@ -90,9 +90,9 @@ export const cleanUpDoubleBold = (html: string): string => {
   return html.replaceAll('**', '')
 }
 
-export const externalLinksOnNewTab = (html: string): string => {
+export const allLinksOnNewTab = (html: string): string => {
   // Open external links on new tab by using target="_blank",
   // pros&cons were extensively discussed in https://github.com/StampyAI/stampy-ui/issues/222
   // internal links look like <a href="/?state=1234">, so all absolute http links are treated as external
-  return html.replace(/(<a href="http[^"]+")/g, `$1 target="_blank" rel="noreferrer"`)
+  return html.replace(/(<a href="[^"]+")/g, `$1 target="_blank" rel="noreferrer"`)
 }

app/server-utils/stampy.ts

@@ -1,7 +1,7 @@
 import {withCache} from '~/server-utils/kv-cache'
 import {
   cleanUpDoubleBold,
-  externalLinksOnNewTab,
+  allLinksOnNewTab,
   uniqueFootnotes,
   urlToIframe,
   convertToHtmlAndWrapInDetails,
@@ -230,7 +230,7 @@ const renderText = (pageid: PageId, markdown: string | null): string | null => {
   let html = convertToHtmlAndWrapInDetails(markdown)
   html = uniqueFootnotes(html, pageid)
   html = cleanUpDoubleBold(html)
-  html = externalLinksOnNewTab(html)
+  html = allLinksOnNewTab(html)
 
   return html
 }