Created ResultLink to handle the opening of result links in new tabs (#…

…178) * Created ResultLink to handle the opening of result links in new tabs * Removed period * Removed ResultLink from thesaurus & removed noreferrer
StractOrg · Mar 13, 2024 · 7bca42f · 7bca42f
1 parent 32bbbc6
commit 7bca42f
Show file tree

Hide file tree

Showing 11 changed files with 96 additions and 32 deletions.
diff --git a/frontend/src/lib/components/Site.svelte b/frontend/src/lib/components/Site.svelte
@@ -7,27 +7,27 @@
   const dispatch = createEventDispatcher<{ delete: null }>();
 </script>
 
-<span class="bg-secondary group flex overflow-hidden rounded-lg transition">
+<span class="group flex overflow-hidden rounded-lg bg-secondary transition">
   <a
     {href}
     target="_blank"
     class={twMerge(
       'bg-secondary py-2',
       'text-primary-content',
-      'hover:bg-secondary-focus transition',
+      'transition hover:bg-secondary-focus',
       'pl-3 pr-2',
     )}
   >
     <slot />
   </a>
   <span
-    class="noscript:hidden bg-primary-content my-2 w-px transition group-hover:bg-transparent"
+    class="noscript:hidden my-2 w-px bg-primary-content transition group-hover:bg-transparent"
   />
   <button
     class={twMerge(
-      'bg-secondary cursor-pointer px-2 text-sm',
+      'cursor-pointer bg-secondary px-2 text-sm',
       'text-primary-content',
-      'hover:bg-secondary-focus noscript:hidden transition',
+      'noscript:hidden transition hover:bg-secondary-focus',
     )}
     on:click={() => dispatch('delete')}
   >

diff --git a/frontend/src/lib/stores.ts b/frontend/src/lib/stores.ts
@@ -73,6 +73,9 @@ export const queryIdStore = writableLocalStorage<string | undefined>(QUERY_ID_KE
 const MARK_PAGES_WITH_ADS_KEY = 'markPagesWithAds';
 export const markPagesWithAdsStore = writableLocalStorage<boolean>(MARK_PAGES_WITH_ADS_KEY, false);
 
+const RESULTS_IN_NEW_TAB_KEY = 'resultsInNewTab';
+export const resultsInNewTab = writableLocalStorage<boolean>(RESULTS_IN_NEW_TAB_KEY, false);
+
 const MARK_PAGES_WITH_PAYWALL_KEY = 'markPagesWithPaywall';
 export const markPagesWithPaywallStore = writableLocalStorage<boolean>(
   MARK_PAGES_WITH_PAYWALL_KEY,

diff --git a/frontend/src/routes/explore/+page.svelte b/frontend/src/routes/explore/+page.svelte
@@ -105,7 +105,7 @@
       </div>
       <form
         class={twJoin(
-          'border-base-400 bg-base-100 mb-2 flex w-full max-w-lg rounded-full border p-[1px] pl-3 transition focus-within:shadow',
+          'mb-2 flex w-full max-w-lg rounded-full border border-base-400 bg-base-100 p-[1px] pl-3 transition focus-within:shadow',
         )}
         id="site-input-container"
         on:submit|preventDefault={() => addWebsite(inputWebsite, true)}
@@ -186,7 +186,7 @@
                 >
                   <PlusCircleOutline
                     class={twJoin(
-                      'text-success text-xl group-hover:scale-105 group-active:scale-95',
+                      'text-xl text-success group-hover:scale-105 group-active:scale-95',
                     )}
                   />
                 </button>
@@ -200,7 +200,7 @@
         </div>
         <div class="noscript:hidden flex w-full justify-center">
           <button
-            class="text-accent h-6 w-6 cursor-pointer rounded-full"
+            class="h-6 w-6 cursor-pointer rounded-full text-accent"
             aria-label="Show more similar sites"
             on:click={() => {
               if (limit == LIMIT_OPTIONS[LIMIT_OPTIONS.length - 1]) {

diff --git a/frontend/src/routes/search/Entity.svelte b/frontend/src/routes/search/Entity.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { getApiBase, type DisplayedEntity } from '$lib/api';
   import EntitySnippet from '$lib/components/EntitySnippet.svelte';
+  import ResultLink from './ResultLink.svelte';
 
   export let entity: DisplayedEntity;
 </script>
@@ -9,32 +10,35 @@
   <div class="flex w-full flex-col items-center">
     {#if entity.imageId}
       <div class="w-lg mb-5">
-        <a href="https://en.wikipedia.org/wiki/{encodeURI(entity.title)}">
+        <ResultLink href="https://en.wikipedia.org/wiki/{encodeURI(entity.title)}">
           <div class="h-40">
             <img
               alt="Image of {entity.title}"
               class="h-full w-full rounded-full object-contain"
               src="{getApiBase()}/beta/api/entity_image?imageId={entity.imageId}"
             />
           </div>
-        </a>
+        </ResultLink>
       </div>
     {/if}
     <div class="mb-5 text-xl">
-      <a class="hover:underline" href="https://en.wikipedia.org/wiki/{encodeURI(entity.title)}">
+      <ResultLink
+        _class="hover:underline"
+        href="https://en.wikipedia.org/wiki/{encodeURI(entity.title)}"
+      >
         {entity.title}
-      </a>
+      </ResultLink>
     </div>
     <div class="text-sm">
       <span><EntitySnippet snippet={entity.smallAbstract} /></span>{' '}
       <span class="italic">
         source:{' '}
-        <a
-          class="text-link visited:text-link-visited hover:underline"
+        <ResultLink
+          _class="text-link visited:text-link-visited hover:underline"
           href="https://en.wikipedia.org/wiki/{encodeURI(entity.title)}"
         >
           wikipedia
-        </a>
+        </ResultLink>
       </span>
     </div>
     {#if entity.info.length > 0}
@@ -56,21 +60,21 @@
           {#each entity.relatedEntities as related (related.title)}
             <div class="flex flex-col items-center p-4">
               {#if related.imageId != null}
-                <a href="/search?q={encodeURIComponent(related.title)}">
+                <ResultLink href="/search?q={encodeURIComponent(related.title)}">
                   <div class="h-20 w-20">
                     <img
                       alt="Image of {related.title}"
                       class="h-full w-full rounded-full object-cover"
                       src="{getApiBase()}/beta/api/entity_image?imageId={related.imageId}&maxWidth=200&maxHeight=200"
                     />
                   </div>
-                </a>
+                </ResultLink>
               {/if}
 
               <div class="line-clamp-3 text-center">
-                <a href="/search?q={encodeURI(related.title)}">
+                <ResultLink href="/search?q={encodeURI(related.title)}">
                   {related.title}
-                </a>
+                </ResultLink>
               </div>
             </div>
           {/each}

diff --git a/frontend/src/routes/search/Result.svelte b/frontend/src/routes/search/Result.svelte
@@ -7,12 +7,14 @@
     summariesStore,
     markPagesWithAdsStore,
     markPagesWithPaywallStore,
+    resultsInNewTab,
   } from '$lib/stores';
   import Summary from './Summary.svelte';
   import { derived } from 'svelte/store';
   import { improvements } from '$lib/improvements';
   import TextSnippet from '$lib/components/TextSnippet.svelte';
   import StackOverflowSnippet from './StackOverflowSnippet.svelte';
+  import ResultLink from './ResultLink.svelte';
 
   export let webpage: DisplayedWebpage;
   export let resultIndex: number;
@@ -28,22 +30,22 @@
   <div class="flex min-w-0">
     <div class="flex min-w-0 grow flex-col space-y-0.5">
       <div class="flex items-center text-sm">
-        <a
-          class="max-w-[calc(100%-100px)] truncate text-neutral-focus"
+        <ResultLink
+          _class="max-w-[calc(100%-100px)] truncate text-neutral-focus"
           href={webpage.url}
-          use:improvements={resultIndex}
+          {resultIndex}
         >
           {webpage.prettyUrl}
-        </a>
+        </ResultLink>
       </div>
-      <a
-        class="max-w-[calc(100%-30px)] truncate text-xl font-medium text-link visited:text-link-visited hover:underline"
+      <ResultLink
+        _class="max-w-[calc(100%-30px)] truncate text-xl font-medium text-link visited:text-link-visited hover:underline"
         title={webpage.title}
         href={webpage.url}
-        use:improvements={resultIndex}
+        {resultIndex}
       >
         {webpage.title}
-      </a>
+      </ResultLink>
     </div>
     <button
       class="noscript:hidden flex w-5 min-w-fit items-center justify-center bg-transparent text-neutral hover:cursor-pointer hover:text-neutral-focus"

diff --git a/frontend/src/routes/search/ResultLink.svelte b/frontend/src/routes/search/ResultLink.svelte
@@ -0,0 +1,34 @@
+<!-- Template to simplify the logic of result links, checking the results in new tab setting -->
+
+<script lang="ts">
+  import { resultsInNewTab } from '$lib/stores';
+  import { improvements } from '$lib/improvements';
+
+  export let href: string;
+  export let _class: string = '';
+  export let title: string | null = null;
+  export let resultIndex: number | null = null;
+</script>
+
+{#if resultIndex != null}
+  <a
+    {href}
+    class={_class}
+    {title}
+    use:improvements={resultIndex}
+    target={$resultsInNewTab ? '_blank' : null}
+    rel={$resultsInNewTab ? 'noopener' : null}
+  >
+    <slot />
+  </a>
+{:else}
+  <a
+    {href}
+    class={_class}
+    {title}
+    target={$resultsInNewTab ? '_blank' : null}
+    rel={$resultsInNewTab ? 'noopener' : null}
+  >
+    <slot />
+  </a>
+{/if}
diff --git a/frontend/src/routes/search/StackOverflow.svelte b/frontend/src/routes/search/StackOverflow.svelte
@@ -3,6 +3,7 @@
   import type { StackOverflowAnswer } from '$lib/api';
   import Code from '$lib/components/Code.svelte';
   import StackOverflowText from './StackOverflowText.svelte';
+  import ResultLink from './ResultLink.svelte';
 
   export let title: string;
   export let answer: StackOverflowAnswer;
@@ -11,7 +12,9 @@
 <div class="flex flex-col space-y-5 overflow-hidden rounded-lg border p-5 md:max-w-lg">
   <div class="flex flex-col space-y-1">
     <div class="flex grow justify-between space-x-2">
-      <a class="flex text-lg font-medium leading-6" href={answer.url}>{title}</a>
+      <ResultLink _class="flex text-lg font-medium leading-6" href={answer.url}>
+        {title}
+      </ResultLink>
       <div class="flex items-center space-x-1">
         <span class="h-fit">
           {answer.upvotes}
@@ -23,7 +26,9 @@
     </div>
     <div class="flex grow justify-between space-x-2 text-sm">
       <div>
-        <a href={answer.url}>{answer.url}</a>
+        <ResultLink href={answer.url}>
+          {answer.url}
+        </ResultLink>
       </div>
       <div>{answer.date}</div>
     </div>

diff --git a/frontend/src/routes/search/StackOverflowSnippet.svelte b/frontend/src/routes/search/StackOverflowSnippet.svelte
@@ -4,6 +4,7 @@
   import HandThumbUp from '~icons/heroicons/hand-thumb-up';
   import Check from '~icons/heroicons/check';
   import StackOverflowText from './StackOverflowText.svelte';
+  import ResultLink from './ResultLink.svelte';
 
   export let question: StackOverflowQuestion;
   export let answers: StackOverflowAnswer[];
@@ -19,8 +20,8 @@
 <div class="flex space-x-4 pt-2 text-xs">
   {#each answers.slice(0, 3) as answer}
     <div class="w-1/3 overflow-hidden">
-      <a
-        class="block h-56 overflow-hidden rounded-lg border p-2 hover:bg-base-200/80"
+      <ResultLink
+        _class="block h-56 overflow-hidden rounded-lg border p-2 hover:bg-base-200/80"
         href={answer.url}
       >
         <div class="mb-1 flex w-full items-center justify-between space-x-1 text-xs text-neutral">
@@ -50,7 +51,7 @@
             {/if}
           {/each}
         </div>
-      </a>
+      </ResultLink>
     </div>
   {/each}
 </div>
diff --git a/frontend/src/routes/search/ThesaurusWidgetMeaning.svelte b/frontend/src/routes/search/ThesaurusWidgetMeaning.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { WordMeaning } from '$lib/api';
+  import ResultLink from './ResultLink.svelte';
 
   export let meaning: WordMeaning;
 </script>

diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
@@ -4,6 +4,7 @@
   import SafeSearchSelect from './SafeSearchSelect.svelte';
   import MarkPagesWithAdsSelect from './MarkPagesWithAdsSelect.svelte';
   import MarkPagesWithPaywallSelect from './MarkPagesWithPaywallSelect.svelte';
+  import ResultsInNewTabs from './ResultsInNewTabs.svelte';
 
   const settings = [
     {
@@ -32,6 +33,11 @@
         'Add a marker to search results where it is likely that the page contains a paywall',
       type: 'mark-pages-with-paywall',
     },
+    {
+      title: 'Open results in a new tab',
+      description: 'Keep the search results window open and have links open in new tabs',
+      type: 'results-in-new-tabs',
+    },
   ] as const;
 </script>
 
@@ -57,6 +63,8 @@
                 <MarkPagesWithAdsSelect />
               {:else if setting.type == 'mark-pages-with-paywall'}
                 <MarkPagesWithPaywallSelect />
+              {:else if setting.type == 'results-in-new-tabs'}
+                <ResultsInNewTabs />
               {/if}
             </div>
           </div>

diff --git a/frontend/src/routes/settings/ResultsInNewTabs.svelte b/frontend/src/routes/settings/ResultsInNewTabs.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+  import { resultsInNewTab } from '$lib/stores';
+  import RadioSelect from './RadioSelect.svelte';
+</script>
+
+<RadioSelect store={resultsInNewTab} prefix="results-in-new-tabs" />