chore: Minor aesthetic fixes

kiosion · Jan 18, 2024 · dce0ac9 · dce0ac9
1 parent 020044d
commit dce0ac9
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 41 deletions.
diff --git a/svelte-app/src/components/footer.svelte b/svelte-app/src/components/footer.svelte
@@ -24,14 +24,15 @@
 {#if socials?.length || APP_VERSION?.length}
   <footer>
     {#if socials?.length}
-      <div class="socials">
+      <div>
         {#each socials as social, i}
-          <Tooltip text={social.url} delay={750} position="top" fixed>
+          <Tooltip text={social.url} delay={500} position="top" fixed>
             <BaseLink
               text={social.name}
               href={social.url}
               target={social.target}
               rel={social.rel}
+              noTranslate
             />
           </Tooltip>
           {#if i < socials.length - 1}
@@ -45,7 +46,7 @@
         <Tooltip
           text={$t('View latest commit on GitHub')}
           position="top"
-          delay={750}
+          delay={150}
           fixed
         >
           <BaseLink

diff --git a/svelte-app/src/components/link.svelte b/svelte-app/src/components/link.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 
-  import { linkTo } from '$i18n';
+  import { linkTo, t } from '$i18n';
 
   import Hoverable from '$components/hoverable.svelte';
   import Tooltip from '$components/tooltip.svelte';
@@ -17,7 +17,11 @@
 </script>
 
 <Hoverable let:hovered>
-  <Tooltip text={link?.length > 50 ? `${link.slice(0, 50)}...` : link} delay={750} fixed>
+  <Tooltip
+    text={link?.length > 50 ? `${link.slice(0, 50)}...` : link ?? $t('Visit')}
+    delay={500}
+    fixed
+  >
     <svelte:element
       this={type}
       href={link}
@@ -28,11 +32,7 @@
         : 'decoration-2'} transition-[text-decoration-color]"
       tabindex="0"
       on:click={() => dispatch('click')}
-      on:keyup={(e) => {
-        if (e.key === 'Enter') {
-          dispatch('click');
-        }
-      }}
+      on:keyup={(e) => e.key === 'Enter' && dispatch('click')}
       role={type === 'a' ? 'link' : 'button'}
       aria-label={$$props['aria-label']}
       {...$$restProps}

diff --git a/svelte-app/src/components/nav/base-link.svelte b/svelte-app/src/components/nav/base-link.svelte
@@ -9,32 +9,30 @@
 
   export let active = false,
     text = '',
-    href: string;
+    href: string,
+    noTranslate = false;
 </script>
 
 <Hoverable let:hovered>
   <a
     class:active={active || hovered}
+    class:slotted={$$slots.default !== undefined}
     href={$linkTo(href)}
     tabindex="0"
     role={$$props.role || undefined}
     target={$$props.target || undefined}
     rel={$$props.rel || undefined}
     aria-current={active ? 'page' : undefined}
-    aria-label={$$props['aria-label'] || $t(text)}
+    aria-label={$$props['aria-label'] || noTranslate ? text : $t(text)}
     data-sveltekit-preload-data
     data-sveltekit-preload-code
     on:click={(e) => dispatch('click', e)}
-    on:keyup={(e) => {
-      if (e.code === 'Enter') {
-        dispatch('click', e);
-      }
-    }}
+    on:keyup={(e) => e.code === 'Enter' && dispatch('click', e)}
   >
     {#if $$slots.default}
       <slot {hovered} />
     {:else}
-      {$t(text).toLowerCase()}
+      {noTranslate ? text : $t(text).toLowerCase()}
     {/if}
   </a>
 </Hoverable>
@@ -45,6 +43,10 @@
   a {
     @apply rounded-sm text-sm text-dark/80;
 
+    &.slotted {
+      @apply flex flex-row items-center justify-start gap-x-1.5;
+    }
+
     &:hover,
     &:focus-visible,
     &.active {

diff --git a/svelte-app/src/languages/en.json b/svelte-app/src/languages/en.json
@@ -20,11 +20,13 @@
   "Go to footnote source": "Go to footnote source",
   "Hide stack trace": "Hide stack trace",
   "Home": "Home",
+  "Internal Error": "Internal Error",
   "Links": "Links",
   "Meta": "Meta",
   "More": "More",
   "PGP": "PGP",
   "Page content": "Page content",
+  "Please": "Please",
   "Post": "Post",
   "Posts": "Posts",
   "Project": "Project",
@@ -53,6 +55,7 @@
   "a bit about me": "a bit about me",
   "go back": "go back",
   "present": "present",
+  "refresh the page": "refresh the page",
   "{length} min read": "{length} min read",
   "{stars} stars": "{stars} stars",
   "{views} views": "{views} views"

diff --git a/svelte-app/src/languages/fr.json b/svelte-app/src/languages/fr.json
@@ -20,11 +20,13 @@
   "Go to footnote source": "Aller à la source de la note de bas de page",
   "Hide stack trace": "Masquer la trace de la pile",
   "Home": "Accueil",
+  "Internal Error": "Erreur interne",
   "Links": "Liens",
   "Meta": "Plus",
   "More": "Plus",
   "PGP": "PGP",
   "Page content": "Contenu de la page",
+  "Please": "S'il vous plaît",
   "Post": "Article",
   "Posts": "Articles",
   "Project": "Projet",
@@ -53,6 +55,7 @@
   "a bit about me": "un peu à propos de moi",
   "go back": "retourner",
   "present": "présent",
+  "refresh the page": "rafraîchir la page",
   "{length} min read": "{length} minute de lecture",
   "{stars} stars": "{stars} étoiles",
   "{views} views": "{views} vues"

diff --git a/svelte-app/src/lib/store.ts b/svelte-app/src/lib/store.ts
@@ -117,20 +117,20 @@ const fetchData = async <T>(
     const response = await tryFetch(fetch(url));
     const fetchResponse = (await response.json()) as QueryResponse<T>;
     if (fetchResponse?.errors?.length) {
-      Logger.error(`Errors occured fetching ${model}`, fetchResponse?.errors);
+      Logger.error(`Errors occured fetching ${model}.`, fetchResponse?.errors);
     }
 
     if (!(fetchResponse?.meta && fetchResponse?.data)) {
-      return new Error(`Failed to fetch ${model} data`, {
+      return new Error(`Failed to fetch ${model} data.`, {
         cause:
           fetchResponse?.errors || (!fetchResponse?.data && new Error('No data present'))
       });
     }
 
     return fetchResponse.data;
   } catch (e) {
-    Logger.error(`Failed to fetch ${model}`, e);
-    return new Error(`Failed to fetch ${model} data`, { cause: e });
+    Logger.error(`Failed to fetch ${model}.`, e);
+    return new Error(`Failed to fetch ${model} data.`, { cause: e });
   }
 };
 

diff --git a/svelte-app/src/routes/+error.svelte b/svelte-app/src/routes/+error.svelte
@@ -7,6 +7,8 @@
 
   import ArrowButton from '$components/controls/arrow-button.svelte';
   import Divider from '$components/divider.svelte';
+  import HeadedBlock from '$components/headings/headed-block.svelte';
+  import Icon from '$components/icon.svelte';
   import Link from '$components/link.svelte';
 
   let message = 'Sorry, something went wrong. Please try again.',
@@ -67,27 +69,30 @@
   <meta name="robots" content="none" />
 </svelte:head>
 
-<h3 class="mb-5 mt-12 font-code text-3xl font-bold">
-  {status}: {$t(title)}
-</h3>
-<p class="my-4 text-base">
-  {$t($page.error?.message && $page.status !== 404 ? $page.error.message : message)}
-</p>
-<p class="my-4 text-base">
-  <Link
-    on:click={() => {
-      window.history.back();
-    }}
-    on:keydown={() => {
-      window.history.back();
-    }}>{$t('Click here to go back')}</Link
-  >.
-</p>
-{#if stack}
+<HeadedBlock heading={`${status}: ${$t(title)}`}>
+  <p>
+    {$t($page.error?.message && $page.status !== 404 ? $page.error.message : message)}
+  </p>
+  <p>
+    {$t('Please')}
+    <Link on:click={() => window.history.back()}>{$t('go back')}</Link>, or <Link
+      on:click={() => window.location.reload()}>{$t('refresh the page')}</Link
+    >.
+  </p>
+</HeadedBlock>
+
+{#if causes?.length}
   <Divider />
   <ArrowButton class="w-full text-left" on:click={() => (showStack = !showStack)}>
-    {showStack ? $t('Hide stack trace') : $t('Show stack trace')}
-    <span class="inline-block {showStack ? 'rotate-90' : '-rotate-90'}">&larr;</span>
+    <span class="flex items-center justify-start gap-2">
+      <p>{$t('See more')}</p>
+      <Icon
+        icon="ArrowUp"
+        width={18}
+        inline
+        class={showStack ? 'rotate-0' : 'rotate-180'}
+      />
+    </span>
   </ArrowButton>
   {#if showStack}
     <div transition:slide={{ duration: BASE_ANIMATION_DURATION }}>
@@ -98,3 +103,13 @@
     </div>
   {/if}
 {/if}
+
+<style lang="scss">
+  p {
+    @apply my-4 text-base;
+
+    span & {
+      @apply my-0;
+    }
+  }
+</style>