From f8283c9b4809d103b2a7c86477d09388ccc093d6 Mon Sep 17 00:00:00 2001
From: Dan Grebb <git@dgrebb.com>
Date: Wed, 31 Jan 2024 19:11:00 -0500
Subject: [PATCH] refactor(front): use flexbox for syntax-highlighter (#1208)

---
 front/patches/svelte-highlight@7.4.8.patch    |  65 +++++--
 front/pnpm-lock.yaml                          |   6 +-
 .../src/lib/components/posts/Code/Code.svelte |  76 ++++----
 front/src/lib/styles/base/typography.css      |   1 -
 front/src/lib/styles/components/Code/Code.css | 175 +++++++-----------
 front/src/lib/styles/pages/cv.css             |   2 +-
 front/src/lib/styles/pages/home.css           |   2 +-
 front/src/lib/styles/pages/post.css           |   2 +-
 8 files changed, 169 insertions(+), 160 deletions(-)

diff --git a/front/patches/svelte-highlight@7.4.8.patch b/front/patches/svelte-highlight@7.4.8.patch
index 3da351a04..44f13311a 100644
--- a/front/patches/svelte-highlight@7.4.8.patch
+++ b/front/patches/svelte-highlight@7.4.8.patch
@@ -1,5 +1,5 @@
 diff --git a/LineNumbers.svelte b/LineNumbers.svelte
-index 704976d98f45c0a472355927aed541adc0934806..1483d231bf576f849644280a8b0e306aae9e7d0e 100644
+index 704976d98f45c0a472355927aed541adc0934806..e79aef99eff32c36b8589523f4049139727856b8 100644
 --- a/LineNumbers.svelte
 +++ b/LineNumbers.svelte
 @@ -24,14 +24,32 @@
@@ -7,17 +7,17 @@ index 704976d98f45c0a472355927aed541adc0934806..1483d231bf576f849644280a8b0e306a
    $: len = len_digits - MIN_DIGITS < 1 ? MIN_DIGITS : len_digits;
    $: width = len * DIGIT_WIDTH;
 +
-+function isHighlightStart(lines, n) {
-+  const i = lines.indexOf(n);
-+  const prev = lines[i - 1];
-+  return prev !== n - 1;
-+}
++  function isHighlightStart(lines, n) {
++    const i = lines.indexOf(n);
++    const prev = lines[i - 1];
++    return prev !== n - 1;
++  }
 +
-+function isHighlightEnd(lines, n) {
-+  const i = lines.indexOf(n);
-+  const next = lines[i + 1];
-+  return next !== n + 1;
-+}
++  function isHighlightEnd(lines, n) {
++    const i = lines.indexOf(n);
++    const next = lines[i + 1];
++    return next !== n + 1;
++  }
  </script>
  
 -<div style:overflow-x="auto" {...$$restProps}>
@@ -59,7 +59,48 @@ index 704976d98f45c0a472355927aed541adc0934806..1483d231bf576f849644280a8b0e306a
            </td>
          </tr>
        {/each}
-@@ -127,26 +133,4 @@
+@@ -67,16 +73,10 @@
+ </div>
+ 
+ <style>
+-  pre {
+-    margin: 0;
+-  }
+-
+   table,
+   tr,
+   td {
+-    padding: 0;
+     border: 0;
+-    margin: 0;
+     vertical-align: baseline;
+   }
+ 
+@@ -86,23 +86,10 @@
+     border-spacing: 0;
+   }
+ 
+-  tr:first-of-type td {
+-    padding-top: 1em;
+-  }
+-
+-  tr:last-child td {
+-    padding-bottom: 1em;
+-  }
+-
+   tr td:first-of-type {
+     z-index: 2;
+   }
+ 
+-  td {
+-    padding-left: var(--padding-left, 1em);
+-    padding-right: var(--padding-right, 1em);
+-  }
+-
+   td.hljs:not(.hideBorder):after {
+     content: "";
+     position: absolute;
+@@ -127,26 +114,4 @@
    pre {
      z-index: 1;
    }
diff --git a/front/pnpm-lock.yaml b/front/pnpm-lock.yaml
index f58e67ece..006d39d29 100644
--- a/front/pnpm-lock.yaml
+++ b/front/pnpm-lock.yaml
@@ -9,7 +9,7 @@ patchedDependencies:
     hash: bqoycfqmdvncggesgjghfff6d4
     path: patches/@sveltejs__kit@2.5.0.patch
   svelte-highlight@7.4.8:
-    hash: qrhzf5kuypvsq4epyje5y7omjm
+    hash: xm6fyir7xl23yn5dh45do3dx2i
     path: patches/svelte-highlight@7.4.8.patch
 
 devDependencies:
@@ -114,7 +114,7 @@ devDependencies:
     version: 3.6.3(postcss@8.4.33)(svelte@4.2.9)
   svelte-highlight:
     specifier: 7.4.8
-    version: 7.4.8(patch_hash=qrhzf5kuypvsq4epyje5y7omjm)
+    version: 7.4.8(patch_hash=xm6fyir7xl23yn5dh45do3dx2i)
   svelte-meta-tags:
     specifier: ^3.1.0
     version: 3.1.0(svelte@4.2.9)(typescript@5.3.3)
@@ -2986,7 +2986,7 @@ packages:
       svelte: 4.2.9
     dev: true
 
-  /svelte-highlight@7.4.8(patch_hash=qrhzf5kuypvsq4epyje5y7omjm):
+  /svelte-highlight@7.4.8(patch_hash=xm6fyir7xl23yn5dh45do3dx2i):
     resolution: {integrity: sha512-KjXI+RwpBiDvwgZX9M0T6JpmAPhLjC4Gcks5qIDrFd7iO/pEBFR3B6qeMUTFIhxipHEPp/rC4/0enAvCQtHp+A==}
     dependencies:
       highlight.js: 11.9.0
diff --git a/front/src/lib/components/posts/Code/Code.svelte b/front/src/lib/components/posts/Code/Code.svelte
index 80dfbdee7..ac7398a6b 100644
--- a/front/src/lib/components/posts/Code/Code.svelte
+++ b/front/src/lib/components/posts/Code/Code.svelte
@@ -47,45 +47,51 @@
   }syntax-highlighter`}
   data-code-instance-id={key}
 >
-  {#if title !== null}
-    <span class="title full" class:copy={showCopyButton === true}>
-      {#if title}{title}{/if}
-    </span>
-  {/if}
-  {#if showCopyButton === true}
-    <CodeCopy {code} {key} {pageTitle} {slug} {title} />
+  {#if title !== null || showCopyButton === true}
+    <header>
+      {#if title !== null}
+        <span class="title full" class:copy={showCopyButton === true}>
+          {#if title}{title}{/if}
+        </span>
+      {/if}
+      {#if showCopyButton === true}
+        <CodeCopy {code} {key} {pageTitle} {slug} {title} />
+      {/if}
+    </header>
   {/if}
-  {#if highlightedLines}
-    {#if lineNumbers === true}
-      {#if syntax === 'Svelte'}
-        <HighlightSvelte {code} {language} let:highlighted>
-          <LineNumbers
-            {highlighted}
-            {startingLineNumber}
-            {highlightedLines}
-            --highlighted-background="transparent"
-            --padding-left="0"
-            hideBorder
-          />
-        </HighlightSvelte>
+  <div class="syntax-highlighter__screen-wrap">
+    {#if highlightedLines}
+      {#if lineNumbers === true}
+        {#if syntax === 'Svelte'}
+          <HighlightSvelte {code} {language} let:highlighted>
+            <LineNumbers
+              {highlighted}
+              {startingLineNumber}
+              {highlightedLines}
+              --highlighted-background="transparent"
+              --padding-left="0"
+              hideBorder
+            />
+          </HighlightSvelte>
+        {:else}
+          <Highlight {code} {language} let:highlighted>
+            <LineNumbers
+              {highlighted}
+              {startingLineNumber}
+              {highlightedLines}
+              --highlighted-background="transparent"
+              --padding-left="0"
+              hideBorder
+            />
+          </Highlight>
+        {/if}
       {:else}
-        <Highlight {code} {language} let:highlighted>
-          <LineNumbers
-            {highlighted}
-            {startingLineNumber}
-            {highlightedLines}
-            --highlighted-background="transparent"
-            --padding-left="0"
-            hideBorder
-          />
-        </Highlight>
+        <Highlight {code} {language} />
       {/if}
+    {:else if syntax === 'Svelte'}
+      <HighlightSvelte {code} {language} />
     {:else}
       <Highlight {code} {language} />
     {/if}
-  {:else if syntax === 'Svelte'}
-    <HighlightSvelte {code} {language} />
-  {:else}
-    <Highlight {code} {language} />
-  {/if}
+  </div>
 </div>
diff --git a/front/src/lib/styles/base/typography.css b/front/src/lib/styles/base/typography.css
index 46b71db21..5cbb19a24 100644
--- a/front/src/lib/styles/base/typography.css
+++ b/front/src/lib/styles/base/typography.css
@@ -129,7 +129,6 @@
   .post-article {
     .post-heading {
       position: relative;
-      padding: 0.25rem 1.5rem 0 0.25rem;
     }
     .heading-anchor-link {
       display: inline;
diff --git a/front/src/lib/styles/components/Code/Code.css b/front/src/lib/styles/components/Code/Code.css
index c8fb439d9..64e0bb7ec 100644
--- a/front/src/lib/styles/components/Code/Code.css
+++ b/front/src/lib/styles/components/Code/Code.css
@@ -10,7 +10,9 @@
 }
 
 .syntax-highlighter {
+  display: flex;
   position: relative;
+  flex-direction: column;
   z-index: 3;
   transition: transform 0s;
   will-change: transform;
@@ -19,8 +21,8 @@
   box-shadow: var(--shadow-elevation-medium);
   border-radius: 0.5rem;
   background-color: var(--blocked-content-bg);
-  padding: 0 1.5rem 0 1rem;
   width: 100%;
+  max-height: 500px;
   font-size: 1rem;
   &::before {
     position: absolute;
@@ -65,11 +67,15 @@
     transition-property: color, background-color, opacity;
     transition-timing-function: var(--transition-timing-function);
   }
+  header {
+    display: flex;
+    align-items: center;
+    border-top-right-radius: 0.5rem;
+    border-top-left-radius: 0.5rem;
+    background-color: var(--hardlight-clr);
+  }
   .title,
   .language {
-    position: absolute;
-    background-color: var(--hardlight-clr);
-    padding: 0.75rem 43px 0.75rem 0.75rem;
     width: 50%;
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
       'Liberation Mono', 'Courier New', monospace;
@@ -82,8 +88,8 @@
     }
   }
   .title {
-    left: 0;
     border-top-left-radius: 0.5rem;
+    padding-left: 0.75rem;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -109,86 +115,63 @@
       padding-top: 1rem;
     }
   }
-  > pre {
+  &__screen-wrap {
+    display: flex;
     position: relative;
-    top: 1px;
-    z-index: 7;
-    transition-duration: var(--transition-duration);
-    transition-property: scrollbar-color;
-    transition-timing-function: var(--transition-timing-function);
-    margin-bottom: -0.5rem;
-    padding: 4.25rem 0 0.5rem 0;
-    max-height: 33rem;
-    overflow: auto;
-    scrollbar-color: transparent transparent;
-    scrollbar-gutter: stable both-edges;
-    scrollbar-width: thin;
-    color: var(--fg-clr);
-    &::-webkit-scrollbar {
-      background-color: transparent;
-      width: 8px;
-      height: 8px;
-    }
-    &::-webkit-scrollbar-thumb {
-      transition-duration: var(--transition-duration);
-      transition-property: background;
-      transition-timing-function: var(--transition-timing-function);
-      border-radius: 3rem;
-      background: transparent;
-    }
-    &:hover,
-    &:focus,
-    &:focus-visible {
-      scrollbar-color: var(--fg-clr-oooo) transparent;
+    padding: 0 0.5rem 0.5rem 0.5rem;
+    min-height: 0;
+    max-height: 100%;
+    > pre,
+    .line-number-wrap {
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+      width: 100%;
+      overflow: scroll;
+      scrollbar-color: transparent transparent;
+      scrollbar-gutter: stable both-edges;
       &::-webkit-scrollbar {
         background-color: transparent;
         width: 8px;
         height: 8px;
       }
       &::-webkit-scrollbar-thumb {
+        transition-duration: var(--transition-duration);
+        transition-property: background;
+        transition-timing-function: var(--transition-timing-function);
         border-radius: 3rem;
-        background: var(--fg-clr-oooo);
+        background: transparent;
+      }
+      &:hover,
+      &:focus,
+      &:focus-visible {
+        scrollbar-color: var(--fg-clr-oooo) transparent;
+        &::-webkit-scrollbar {
+          background-color: transparent;
+          width: 8px;
+          height: 8px;
+        }
+        &::-webkit-scrollbar-thumb {
+          border-radius: 3rem;
+          background: var(--fg-clr-oooo);
+        }
       }
     }
-    code {
-      color: var(--code-text);
+    > pre {
+      position: relative;
+      z-index: 7;
+      transition-duration: var(--transition-duration);
+      transition-property: scrollbar-color;
+      transition-timing-function: var(--transition-timing-function);
+      color: var(--fg-clr);
+      code {
+        color: var(--code-text);
+      }
     }
   }
   .line-number-wrap {
     position: relative;
     z-index: 7;
     transition: scrollbar-color 0.5s;
-    margin-bottom: -0.5rem;
-    padding: 3.25rem 0 0.5rem 0;
-    overflow-x: scroll;
-    scrollbar-color: transparent transparent;
-    scrollbar-gutter: stable both-edges;
-    scrollbar-width: thin;
-    &::-webkit-scrollbar {
-      transition: background-color 0.5s;
-      background-color: transparent;
-      width: 8px;
-      height: 8px;
-    }
-    &::-webkit-scrollbar-thumb {
-      transition: background-color 0.5s;
-      border-radius: 3rem;
-      background: transparent;
-    }
-    &:hover,
-    &:focus,
-    &:focus-visible {
-      scrollbar-color: var(--fg-clr-oooo) transparent;
-      &::-webkit-scrollbar {
-        background-color: transparent;
-        width: 8px;
-        height: 8px;
-      }
-      &::-webkit-scrollbar-thumb {
-        border-radius: 3rem;
-        background: var(--fg-clr-oooo);
-      }
-    }
     code {
       display: inline-block;
       height: 100%;
@@ -212,6 +195,7 @@
         var(--blocked-content-bg) 81%,
         transparent 100%
       );
+      padding-right: 0.5rem;
       color: var(--fg-clr-oooo);
     }
     td:last-child code {
@@ -239,18 +223,15 @@
 }
 
 .code-copy-btn {
-  position: absolute;
-  right: 0;
+  position: relative;
   transition-duration: var(--transition-duration);
   transition-property: color;
+  box-sizing: border-box;
+  margin: 0.75rem;
   padding: 0.75rem;
   line-height: 1.6;
   .titleless & {
     padding: 0.5rem;
-    svg {
-      width: 20px;
-      height: 20px;
-    }
   }
   > * {
     pointer-events: none;
@@ -259,7 +240,9 @@
     top: 2px;
   }
   svg {
+    position: absolute;
     vertical-align: text-bottom;
+    inset: 0 0 auto auto;
   }
   .icon-code-copy {
     display: inline;
@@ -305,7 +288,9 @@
 
 @media screen and (min-width: 480px) {
   .syntax-highlighter {
-    padding: 0 0.75rem 0.75rem 0.75rem;
+    &__screen-wrap {
+      padding: 0 1rem 0.75rem 1rem;
+    }
     .line-number-wrap {
       td:first-child {
         display: table-cell;
@@ -316,16 +301,14 @@
 
 @media screen and (min-width: 640px) {
   .syntax-highlighter {
-    padding: 0 1.75rem 1.75rem 1.5rem;
     width: auto;
-    &.headerless > pre {
-      padding-top: 2rem;
-    }
-    > pre {
-      padding: 4.75rem 0 0 0;
-    }
-    .line-number-wrap {
-      padding: 4rem 0 0 0;
+    &__screen-wrap {
+      padding: 0 1rem 1rem;
+      > pre,
+      .line-number-wrap {
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+      }
     }
   }
 }
@@ -335,31 +318,11 @@
   (-moz-touch-enabled: 1),
   (pointer: coarse) {
   .syntax-highlighter {
-    padding: 0 1rem;
-    > pre {
-      padding: 4.5rem 0 1rem 0;
+    &__screen-wrap > pre {
       scrollbar-color: var(--code-scrollbar-clr) transparent;
     }
     .line-number-wrap {
-      padding: 3rem 0 0.75rem 0;
       scrollbar-color: var(--code-scrollbar-clr) transparent;
     }
   }
 }
-
-@media (hover: none) and (min-width: 640px),
-  (hover: on-demand) and (min-width: 640px),
-  (-moz-touch-enabled: 1) and (min-width: 640px),
-  (pointer: coarse) and (min-width: 640px) {
-  .syntax-highlighter {
-    padding: 0 2rem;
-    > pre {
-      padding-top: 4.5rem;
-      padding-bottom: 1.5rem;
-    }
-    .line-number-wrap {
-      padding-top: 4rem;
-      padding-bottom: 1.5rem;
-    }
-  }
-}
diff --git a/front/src/lib/styles/pages/cv.css b/front/src/lib/styles/pages/cv.css
index 658936f3e..1a27bc88f 100644
--- a/front/src/lib/styles/pages/cv.css
+++ b/front/src/lib/styles/pages/cv.css
@@ -4,7 +4,7 @@
   width: 100%;
   h1.page-heading {
     font-family: var(--font-psbl);
-    letter-spacing: -0.175rem;
+    letter-spacing: -0.0875rem;
   }
   h1.page-heading,
   h1.skill-title {
diff --git a/front/src/lib/styles/pages/home.css b/front/src/lib/styles/pages/home.css
index a21417229..2f3bba168 100644
--- a/front/src/lib/styles/pages/home.css
+++ b/front/src/lib/styles/pages/home.css
@@ -31,7 +31,7 @@
     font-size: 1.875rem;
     line-height: 2.25rem;
     font-family: var(--font-psb);
-    letter-spacing: -0.025em;
+    letter-spacing: -0.0875rem;
   }
   p {
     transition-duration: var(--transition-duration);
diff --git a/front/src/lib/styles/pages/post.css b/front/src/lib/styles/pages/post.css
index 1515e7ab5..c0765ce38 100644
--- a/front/src/lib/styles/pages/post.css
+++ b/front/src/lib/styles/pages/post.css
@@ -390,7 +390,7 @@
 
 @media screen and (min-width: 480px) {
   .post .post-title {
-    padding: 0 1.5rem;
+    padding: 1rem 1.5rem 0;
   }
   .post .post-title,
   .post .post-article {