fix: Codeblock, nav styles

kiosion · Sep 21, 2023 · e72a95b · e72a95b
1 parent 3dc0f25
commit e72a95b
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 45 deletions.
diff --git a/svelte-app/src/components/code-block.svelte b/svelte-app/src/components/code-block.svelte
@@ -12,7 +12,6 @@
   } from 'svelte-highlight';
 
   import { browser } from '$app/environment';
-  import { navigating } from '$app/stores';
   import { t } from '$i18n';
   import Settings from '$stores/settings';
 
@@ -36,7 +35,8 @@
     hlStyles: string | undefined,
     container: HTMLElement,
     codeContainer: HTMLElement,
-    innerHeight: number;
+    innerHeight: number,
+    hideLoader = false;
 
   const id = Math.random().toString(36).substring(2),
     copy = () => {
@@ -108,6 +108,7 @@
   onDestroy(() => unsubscribe());
 
   $: browser && codeContainer && (codeContainer.style.height = `${innerHeight ?? 0}px`);
+  $: browser && (hideLoader = innerHeight > 52);
 </script>
 
 <svelte:head>
@@ -141,42 +142,47 @@
       {filename}
     </div>
   {/if}
-  {#if !$navigating}
-    <Hoverable>
-      <Tooltip text={$t('Copy to clipboard')} position="left" delay={150} fixed>
-        {#key copied}
-          <button
-            class="focusOutline-sm absolute right-0 top-0 z-[2] cursor-pointer rounded-sm pb-3 pl-3 pr-4 pt-4 text-dark/60 opacity-0 transition-opacity duration-150 hover:text-dark dark:text-light/60 dark:hover:text-light"
-            class:opacity-100={hovered || filename}
-            on:click={() => copy()}
-            in:fade={{ duration: 100, delay: 100 }}
-            out:fade={{ delay: 100, duration: 100 }}
-          >
-            <Icon icon={copied ? 'Check' : 'Copy'} />
-          </button>
-        {/key}
-      </Tooltip>
-    </Hoverable>
-  {/if}
+  <Hoverable>
+    <Tooltip text={$t('Copy to clipboard')} position="left" delay={150} fixed>
+      {#key copied}
+        <button
+          class="focusOutline-sm absolute right-0 top-0 z-[2] cursor-pointer rounded-sm pb-3 pl-3 pr-4 pt-4 text-dark/60 opacity-0 transition-opacity duration-150 hover:text-dark dark:text-light/60 dark:hover:text-light"
+          class:opacity-100={hovered || filename}
+          on:click={() => copy()}
+          in:fade={{ duration: 100, delay: 100 }}
+          out:fade={{ delay: 100, duration: 100 }}
+        >
+          <Icon icon={copied ? 'Check' : 'Copy'} />
+        </button>
+      {/key}
+    </Tooltip>
+  </Hoverable>
   <div
     class="focusOutline relative h-fit w-full overflow-hidden rounded-sm text-lg transition-[height]"
     bind:this={codeContainer}
   >
     <div
       class="h-fit w-full min-w-full rounded-sm p-1 transition-all dark:bg-dark/10 {hovered
-        ? 'bg-dark/5 dark:bg-dark/40'
+        ? 'bg-dark/[0.025] dark:bg-light/5'
         : ''}"
       id="hljs-container"
       bind:clientHeight={innerHeight}
     >
-      {#if !browser}
-        <div class="mx-auto my-4 w-fit"><Spinner /></div>
-      {:else if !lang}
+      <div
+        class="pointer-events-none absolute left-1/2 top-1/2 h-fit w-fit -translate-x-1/2 -translate-y-1/2 transition-opacity"
+        class:opacity-0={hideLoader}
+      >
+        <Spinner />
+      </div>
+      {#if !hideLoader}
+        <span class="mt-11 block" />
+      {/if}
+      {#if !lang}
         <svelte:component this={hlAuto} code={content} />
       {:else}
-        {#await hlLang}
-          <div class="mx-auto my-4 w-fit"><Spinner /></div>
-        {:then resolvedLang}
+        {#await hlLang then resolvedLang}
+          <!-- <div class="mx-auto my-4 w-fit"><Spinner /></div> -->
+          <!-- {:then resolvedLang} -->
           {#if showLineNumbers === true}
             <svelte:component
               this={hlHighlight}

diff --git a/svelte-app/src/components/document/content/common/summary.svelte b/svelte-app/src/components/document/content/common/summary.svelte
@@ -23,7 +23,7 @@
 
     &:hover,
     &.expanded {
-      @apply border-dark/60 bg-dark/5;
+      @apply border-dark/60 bg-dark/[0.025];
     }
   }
 
@@ -33,7 +33,7 @@
 
       &:hover,
       &.expanded {
-        @apply border-light/60 bg-dark/30;
+        @apply border-light/60 bg-light/5;
       }
     }
   }

diff --git a/svelte-app/src/components/nav.svelte b/svelte-app/src/components/nav.svelte
@@ -21,7 +21,7 @@
 <div class="fixed left-6 right-6 top-4 z-10 flex items-center justify-center">
   <Hoverable setPointer={false} bind:hovered>
     <nav
-      class="flex w-full max-w-6xl flex-col items-center justify-center rounded-lg border px-6 py-2 backdrop-blur-lg transition-[background-color,border-color] {hovered
+      class="flex w-full max-w-6xl flex-col items-center justify-center rounded-lg border px-6 py-5 backdrop-blur-lg transition-[background-color,border-color] md:py-2 {hovered
         ? 'border-dark/60 bg-light/60 dark:border-light/60 dark:bg-dark/70'
         : 'border-dark/40 bg-light/40 dark:border-light/40 dark:bg-dark/50'}"
       aria-label="Main navigation"

diff --git a/svelte-app/src/components/portable-text/serializers/code-block.svelte b/svelte-app/src/components/portable-text/serializers/code-block.svelte
@@ -9,4 +9,4 @@
   $: ({ code, language, filename } = value);
 </script>
 
-<CodeBlock content={code} showLineNumbers={false} lang={language} {filename} />
+<CodeBlock content={code} showLineNumbers lang={language} {filename} />
diff --git a/svelte-app/src/components/tooltip.svelte b/svelte-app/src/components/tooltip.svelte
@@ -50,14 +50,17 @@
     div.innerText = content;
     div.classList.add(
       'tooltip',
-      'rounded-md',
+      'rounded-sm',
       'py-1',
       'px-2',
-      'shadow-md',
-      'bg-light',
+      'backdrop-blur-sm',
+      'bg-light/50',
       'text-dark',
-      'dark:bg-gray',
+      'dark:bg-dark/50',
       'dark:text-light',
+      'border',
+      'border-dark/40',
+      'dark:border-light/40',
       'font-code',
       'text-sm'
     );

diff --git a/svelte-app/src/lib/store.ts b/svelte-app/src/lib/store.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { API_URL } from '$lib/env';
 import Logger from '$lib/logger';
 import tryFetch from '$lib/try-fetch';
@@ -36,8 +37,62 @@ type QueryResponse<T> =
     }
   | undefined;
 
-const documentCache = {} as {
-  [query: string]: unknown[] | unknown;
+const EXP_TIME = 1000 * 60 * 30;
+
+const documentCache = new Proxy(
+  {} as Record<
+    string,
+    | {
+        exp: number;
+        data:
+          | DocumentRegistry[keyof DocumentRegistry][]
+          | DocumentRegistry[keyof DocumentRegistry];
+      }
+    | undefined
+  >,
+  {
+    get: (target, prop) => {
+      switch (prop) {
+        case 'get':
+          return (key: string) => {
+            if (!(key in target) || target[key] === undefined) {
+              return undefined;
+            }
+
+            if (target[key]!.exp <= Date.now()) {
+              target[key] = undefined;
+              return undefined;
+            }
+
+            return target[key]!.data;
+          };
+        case 'set':
+          return <T extends DocumentRegistry[keyof DocumentRegistry]>(
+            key: string,
+            value: T
+          ) =>
+            (target[key] = {
+              exp: Date.now() + EXP_TIME,
+              data: value
+            });
+        default:
+          return undefined;
+      }
+    }
+  }
+) as unknown as {
+  get: (
+    key: string
+  ) =>
+    | DocumentRegistry[keyof DocumentRegistry]
+    | DocumentRegistry[keyof DocumentRegistry][]
+    | undefined;
+  set: (
+    key: string,
+    value:
+      | DocumentRegistry[keyof DocumentRegistry]
+      | DocumentRegistry[keyof DocumentRegistry][]
+  ) => boolean;
 };
 
 const constructUrl = (
@@ -63,8 +118,8 @@ const find = async <T extends keyof DocumentRegistry>(
   params: PossibleParams = {}
 ) => {
   const cacheKey = JSON.stringify({ model, params, many: true });
-  if (cacheKey in documentCache) {
-    return documentCache[cacheKey] as DocumentRegistry[T][];
+  if (documentCache.get(cacheKey)) {
+    return documentCache.get(cacheKey) as DocumentRegistry[T][];
   }
 
   const url = constructUrl(model, params, true);
@@ -85,7 +140,7 @@ const find = async <T extends keyof DocumentRegistry>(
   }
 
   if (response) {
-    documentCache[cacheKey] = response;
+    documentCache.set(cacheKey, response);
   }
   return response;
 };
@@ -96,8 +151,8 @@ const findOne = async <T extends keyof DocumentRegistry>(
   params: PossibleParams = {}
 ) => {
   const cacheKey = JSON.stringify({ model, params, many: false });
-  if (cacheKey in documentCache) {
-    return documentCache[cacheKey] as DocumentRegistry[T];
+  if (!(params.preview === 'true') && documentCache.get(cacheKey)) {
+    return documentCache.get(cacheKey) as DocumentRegistry[T];
   }
 
   const url = constructUrl(model, params);
@@ -117,8 +172,8 @@ const findOne = async <T extends keyof DocumentRegistry>(
     return undefined;
   }
 
-  if (response) {
-    documentCache[cacheKey] = response;
+  if (!(params.preview === 'true') && response) {
+    documentCache.set(cacheKey, response);
   }
   return response;
 };

diff --git a/svelte-app/src/styles/components/_code-block.scss b/svelte-app/src/styles/components/_code-block.scss
@@ -1,5 +1,14 @@
-#hljs-container > pre {
-  white-space: break-spaces;
+#hljs-container {
+  > pre {
+    white-space: break-spaces;
+  }
+  > div > table {
+    max-width: 100%;
+
+    > tbody > tr > td:nth-of-type(2) {
+      word-wrap: anywhere;
+    }
+  }
 }
 
 tbody.hljs, .hljs {