chore: Styles/some PT serializer cleanup

kiosion · Sep 21, 2023 · 3f889cf · 3f889cf
1 parent c4fa9eb
commit 3f889cf
Show file tree

Hide file tree

Showing 11 changed files with 106 additions and 140 deletions.
diff --git a/svelte-app/src/components/code-block.svelte b/svelte-app/src/components/code-block.svelte
@@ -11,6 +11,7 @@
     LineNumbers
   } from 'svelte-highlight';
 
+  import { browser } from '$app/environment';
   import { navigating } from '$app/stores';
   import { t } from '$i18n';
   import Settings from '$stores/settings';
@@ -23,7 +24,6 @@
 
   export let content: string,
     filename: string | undefined,
-    showClipboard = false,
     showLineNumbers = true,
     lang: string | undefined = undefined;
 
@@ -33,34 +33,30 @@
   let hlHighlight: Highlight,
     hlAuto: HighlightAuto,
     hlLang: Promise<LanguageType>,
-    hlStyles: unknown,
+    hlStyles: string | undefined,
     container: HTMLElement,
     codeContainer: HTMLElement,
     innerHeight: number;
 
-  const copy = () => {
-    content && navigator.clipboard.writeText(content);
-    clicked();
-  };
-
-  const clicked = () => {
-    if (!copied && hovered) {
-      copied = true;
-      setTimeout(() => {
-        copied = false;
-      }, 1200);
-    }
-  };
-
-  const { theme } = Settings;
-
-  const unsubscribe = theme.subscribe(async (res) => {
-    if (res === 'light') {
-      hlStyles = (await import('svelte-highlight/styles/github')).default;
-    } else {
-      hlStyles = (await import('svelte-highlight/styles/github-dark')).default;
-    }
-  });
+  const id = Math.random().toString(36).substring(2),
+    copy = () => {
+      content && navigator.clipboard.writeText(content);
+
+      if (!copied && hovered) {
+        copied = true;
+        setTimeout(() => {
+          copied = false;
+        }, 1200);
+      }
+    },
+    { theme } = Settings,
+    unsubscribe = theme.subscribe(
+      async (res) =>
+        (hlStyles =
+          res === 'light'
+            ? (await import('svelte-highlight/styles/github')).default
+            : (await import('svelte-highlight/styles/github-dark')).default)
+    );
 
   onMount(async () => {
     !lang
@@ -111,7 +107,7 @@
 
   onDestroy(() => unsubscribe());
 
-  $: codeContainer && (codeContainer.style.height = `${innerHeight ?? 0}px`);
+  $: browser && codeContainer && (codeContainer.style.height = `${innerHeight ?? 0}px`);
 </script>
 
 <svelte:head>
@@ -122,9 +118,12 @@
 </svelte:head>
 
 <div
+  class="relative -mx-3 my-8 overflow-hidden rounded-sm border border-dark/40 duration-150 dark:border-light/40 {hovered
+    ? 'border-dark/60 dark:border-light/60'
+    : ''}"
   role="group"
-  class="codeBlock--container"
-  class:active={hovered}
+  aria-label={$t('Code block')}
+  aria-labelledby={filename ? `${id}-filename` : undefined}
   bind:this={container}
   on:mouseenter={() => (hovered = true)}
   on:mouseleave={() => (hovered = false)}
@@ -133,18 +132,23 @@
   on:blur={() => (hovered = false)}
 >
   {#if filename}
-    <div class="codeBlock--filename">
-      <span>{filename}</span>
+    <div
+      class="border-b border-dark/40 bg-dark/5 py-[13px] pl-5 font-mono text-base duration-150 dark:border-light/40 dark:bg-dark/40 {hovered
+        ? 'border-dark/60 dark:border-light/60'
+        : ''}"
+      id="{id}-filename"
+    >
+      {filename}
     </div>
   {/if}
-  {#if showClipboard && !$navigating}
+  {#if !$navigating}
     <Hoverable>
       <Tooltip text={$t('Copy to clipboard')} position="left" delay={150} fixed>
         {#key copied}
           <button
-            class="codeBlock--copyButton focusOutline-sm"
+            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()}
-            class:visible={hovered || filename}
             in:fade={{ duration: 100, delay: 100 }}
             out:fade={{ delay: 100, duration: 100 }}
           >
@@ -154,13 +158,20 @@
       </Tooltip>
     </Hoverable>
   {/if}
-  <div class="codeBlock--codeContainer focusOutline" bind:this={codeContainer}>
+  <div
+    class="focusOutline relative h-fit w-full overflow-hidden rounded-sm text-lg transition-[height]"
+    bind:this={codeContainer}
+  >
     <div
-      class="inner is-{$theme} transition-all"
-      class:active={hovered}
+      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'
+        : ''}"
+      id="hljs-container"
       bind:clientHeight={innerHeight}
     >
-      {#if !lang}
+      {#if !browser}
+        <div class="mx-auto my-4 w-fit"><Spinner /></div>
+      {:else if !lang}
         <svelte:component this={hlAuto} code={content} />
       {:else}
         {#await hlLang}

diff --git a/svelte-app/src/components/context-menu/option.svelte b/svelte-app/src/components/context-menu/option.svelte
@@ -28,8 +28,8 @@
 <Hoverable>
   <div
     class="flex w-full max-w-[460px] items-center justify-start gap-4 px-4 py-2 {disabled
-      ? 'cursor-not-allowed bg-stone-400/50 text-stone-800 dark:bg-stone-500/50'
-      : 'cursor-pointer hover:bg-stone-300/50 dark:hover:bg-stone-500/50'}"
+      ? 'cursor-not-allowed bg-dark/10 text-stone-800 dark:bg-light/10'
+      : 'cursor-pointer hover:bg-dark/20 dark:hover:bg-light/20'}"
     data-test-option-index={index}
     role="button"
     tabindex="0"

diff --git a/svelte-app/src/components/lists/list-item.svelte b/svelte-app/src/components/lists/list-item.svelte
@@ -29,7 +29,7 @@
     <a
       href={$linkTo(link)}
       target={external ? '_blank' : undefined}
-      class="flex flex-row items-start justify-start gap-2"
+      class="flex w-full flex-row items-start justify-start gap-2"
       tabindex="0"
       data-sveltekit-preload-code
       data-sveltekit-preload-data
@@ -51,7 +51,7 @@
     <a
       href={$linkTo(link)}
       target={external ? '_blank' : undefined}
-      class="flex flex-col items-start justify-start gap-2"
+      class="flex w-full flex-col items-start justify-start gap-2"
       tabindex="0"
       data-sveltekit-preload-code
       data-sveltekit-preload-data

diff --git a/svelte-app/src/components/portable-text/portable-text.svelte b/svelte-app/src/components/portable-text/portable-text.svelte
@@ -111,6 +111,7 @@
             h3: CustomHeading,
             h4: CustomHeading,
             h5: CustomHeading,
+            h6: CustomHeading,
             normal: CustomParagraph,
             blockquote: CustomQuote
           },

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} showClipboard={true} lang={language} {filename} />
+<CodeBlock content={code} showLineNumbers={false} lang={language} {filename} />
diff --git a/svelte-app/src/components/portable-text/serializers/custom-heading.svelte b/svelte-app/src/components/portable-text/serializers/custom-heading.svelte
@@ -13,12 +13,7 @@
 </script>
 
 <Hoverable bind:hovered>
-  <a
-    class="focusOutline-sm"
-    class:large={style && ['h1', 'h2'].indexOf(style) !== -1}
-    id={`heading-${value._key}`}
-    href={`#${value._key}`}
-  >
+  <a class="focusOutline-sm {style}" id={`heading-${value._key}`} href={`#${value._key}`}>
     {#if hovered}
       <Icon icon="link" class="absolute -left-8 top-1/2 -translate-y-1/2" />
     {/if}
@@ -34,11 +29,26 @@
 
 <style lang="scss">
   a {
-    @apply relative mb-2 mt-6 block w-fit rounded-sm font-extrabold;
+    @apply relative block w-fit rounded-sm font-extrabold;
 
-    &.large {
+    &.h1 {
+      @apply mb-6 mt-14;
+    }
+    &.h2 {
       @apply mb-6 mt-12;
     }
+    &.h3 {
+      @apply mb-5 mt-10;
+    }
+    &.h4 {
+      @apply mb-4 mt-8;
+    }
+    &.h5 {
+      @apply mb-4 mt-6;
+    }
+    &.h6 {
+      @apply mb-3 mt-5;
+    }
 
     h1 {
       @apply text-5xl;
@@ -55,5 +65,8 @@
     h5 {
       @apply text-xl;
     }
+    h6 {
+      @apply text-lg;
+    }
   }
 </style>
diff --git a/svelte-app/src/components/portable-text/serializers/custom-highlight.svelte b/svelte-app/src/components/portable-text/serializers/custom-highlight.svelte
@@ -1,8 +1,8 @@
-<span class="relative px-1 py-0.5 text-light dark:text-dark">
+<span class="relative p-0.5 text-light dark:text-dark">
   <span class="relative z-[1]">
     <slot />
   </span>
   <span
-    class="absolute bottom-0 left-0 z-[0] h-full w-full rounded-sm bg-accent-light dark:bg-accent-dark"
+    class="absolute bottom-0 left-0 right-0 top-0 z-[0] rounded-[1px] bg-accent-light/80 dark:bg-accent-dark/90"
   />
 </span>
diff --git a/svelte-app/src/routes/[[lang=lang]]/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/+page.svelte
@@ -37,17 +37,24 @@
     <div class="align-center flex flex-col justify-start gap-4">
       <HeadedBlock icon="list" heading={$t('Recent posts')} class="flex-[1]">
         {#if data.posts?.length}
-          <div class="flex flex-col gap-y-5 pt-4" role="group" aria-label={$t('Posts')}>
+          <div
+            class="flex w-full flex-col gap-y-5 pt-4"
+            role="group"
+            aria-label={$t('Posts')}
+          >
             {#each data.posts as post}
               <ListItem document={post} small />
             {/each}
+            <div class="flex w-full flex-row items-start justify-start gap-2">
+              <span class="block w-[72px] flex-shrink-0" />
+              <a
+                href={$linkTo('/blog')}
+                class="inline-block w-full font-code text-accent-light hover:text-dark dark:text-accent-dark dark:hover:text-light"
+              >
+                {$t('See more')} &rarr;
+              </a>
+            </div>
           </div>
-          <a
-            href={$linkTo('/blog')}
-            class="ml-[72px] mt-4 inline-block pl-[8px] font-code text-accent-light hover:text-dark dark:text-accent-dark dark:hover:text-light"
-          >
-            {$t('See more')} &rarr;
-          </a>
         {:else}
           <div class="flex flex-col gap-y-5 pt-4">
             <p class="p-4 font-code">
@@ -66,13 +73,16 @@
             {#each data.projects as project}
               <ListItem document={project} small />
             {/each}
+            <div class="flex w-full flex-row items-start justify-start gap-2">
+              <span class="block w-[72px] flex-shrink-0" />
+              <a
+                href={$linkTo('/work')}
+                class="inline-block w-full font-code text-accent-light hover:text-dark dark:text-accent-dark dark:hover:text-light"
+              >
+                {$t('See more')} &rarr;
+              </a>
+            </div>
           </div>
-          <a
-            href={$linkTo('/work')}
-            class="ml-[72px] mt-4 inline-block pl-[8px] font-code text-accent-light hover:text-dark dark:text-accent-dark dark:hover:text-light"
-          >
-            {$t('See more')} &rarr;
-          </a>
         {:else}
           <div class="flex flex-col gap-y-5 pt-4">
             <p class="p-4 font-code">

diff --git a/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte b/svelte-app/src/routes/[[lang=lang]]/blog/+page.svelte
@@ -36,7 +36,9 @@
       <div class="flex flex-col items-start justify-start gap-y-2 md:flex-row">
         <h1 class="min-w-[6rem] font-code text-4xl font-black">{yearObj.year}</h1>
         {#if yearObj.items.length}
-          <div class="ml-1 mt-2 flex flex-col items-start justify-start gap-4 md:ml-0">
+          <div
+            class="ml-1 mt-2 flex w-full flex-col items-start justify-start gap-4 md:ml-0"
+          >
             {#each yearObj.items as item}
               <ListItem document={item} />
             {/each}

diff --git a/svelte-app/src/stores/settings.ts b/svelte-app/src/stores/settings.ts
@@ -11,8 +11,7 @@ const prefersLight = '(prefers-color-scheme: light)';
 
 const defaultSettings = {
   theme: writable<Setting>('dark'),
-  reduce_motion: writable<Setting>(false),
-  sounds: writable<Setting>(true)
+  reduce_motion: writable<Setting>(false)
 };
 
 if (browser) {