refactor(front): use flexbox for syntax-highlighter (#1208)

dgrebb · Feb 1, 2024 · f8283c9 · f8283c9
1 parent 660e8b1
commit f8283c9
Show file tree

Hide file tree

Showing 8 changed files with 169 additions and 160 deletions.
diff --git a/front/patches/[email protected] b/front/patches/[email protected]
@@ -1,23 +1,23 @@
 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 @@
    $: len_digits = lines.length.toString().length;
    $: 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
diff --git 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
@@ -129,7 +129,6 @@
   .post-article {
     .post-heading {
       position: relative;
-      padding: 0.25rem 1.5rem 0 0.25rem;
     }
     .heading-anchor-link {
       display: inline;