From 006b15b467a5cd835a6eab1b49023100bdc8f2e6 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 13 Oct 2023 19:32:56 +0200
Subject: refactor(components): rewrite Code component and usePrism hook

* move Prism styles to Sass placeholders to avoid repeats
* let usePrism consumer define its plugins (remove default ones)
* remove `plugins` prop from Code component
* add new props to Code component to let consumer configure plugins
(and handle plugin list from the given options)

However there are some problems with Prism plugins: line-highlight and
treeview does not seems to be loaded. I don't want to use Babel instead
of SWC so I have no solution for now.
---
 src/styles/abstracts/_placeholders.scss       |   1 +
 src/styles/abstracts/placeholders/_prism.scss | 309 ++++++++++++++++++++++++++
 src/styles/pages/article.module.scss          |   3 +-
 src/styles/pages/partials/_article-prism.scss | 302 -------------------------
 4 files changed, 311 insertions(+), 304 deletions(-)
 create mode 100644 src/styles/abstracts/placeholders/_prism.scss
 delete mode 100644 src/styles/pages/partials/_article-prism.scss

(limited to 'src/styles')

diff --git a/src/styles/abstracts/_placeholders.scss b/src/styles/abstracts/_placeholders.scss
index 04522d7..4070730 100644
--- a/src/styles/abstracts/_placeholders.scss
+++ b/src/styles/abstracts/_placeholders.scss
@@ -5,3 +5,4 @@
 @forward "./placeholders/layout";
 @forward "./placeholders/links";
 @forward "./placeholders/lists";
+@forward "./placeholders/prism";
diff --git a/src/styles/abstracts/placeholders/_prism.scss b/src/styles/abstracts/placeholders/_prism.scss
new file mode 100644
index 0000000..97f28b6
--- /dev/null
+++ b/src/styles/abstracts/placeholders/_prism.scss
@@ -0,0 +1,309 @@
+@use "../functions" as fun;
+@use "../mixins" as mix;
+
+%prism {
+  .code-toolbar {
+    --toolbar-height: #{fun.convert-px(100)};
+
+    position: relative;
+    margin-top: calc(var(--toolbar-height) + var(--spacing-sm));
+
+    @include mix.media("screen") {
+      @include mix.dimensions("2xs") {
+        --toolbar-height: #{fun.convert-px(60)};
+      }
+    }
+
+    .toolbar {
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: center;
+      width: 100%;
+      height: var(--toolbar-height);
+      position: absolute;
+      top: calc(var(--toolbar-height) * -1);
+      left: 0;
+      right: 0;
+      background: var(--color-bg-tertiary);
+      border: fun.convert-px(1) solid var(--color-border);
+    }
+
+    .toolbar-item {
+      display: flex;
+      align-items: center;
+      margin: 0 var(--spacing-2xs);
+    }
+
+    .toolbar-item:nth-child(1) {
+      flex: 0 0 100%;
+      justify-content: center;
+      margin: 0 auto 0 0;
+      padding: 0 var(--spacing-sm);
+      background: var(--color-bg-code);
+      border-bottom: fun.convert-px(1) solid var(--color-border);
+      color: var(--color-primary-darker);
+      font-size: var(--font-size-sm);
+      font-weight: 600;
+
+      @include mix.media("screen") {
+        @include mix.dimensions("2xs") {
+          flex: 0 0 auto;
+          justify-content: left;
+          border-bottom: none;
+          border-right: fun.convert-px(1) solid var(--color-border);
+        }
+      }
+    }
+  }
+
+  .copy-to-clipboard-button,
+  .prism-color-scheme-button {
+    display: block;
+    padding: fun.convert-px(3) var(--spacing-xs);
+    background: var(--color-bg);
+    border: 0.4ex solid var(--color-primary);
+    border-radius: fun.convert-px(30);
+    box-shadow:
+      fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) var(--color-shadow),
+      fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
+        var(--color-shadow),
+      fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
+        var(--color-shadow);
+    color: var(--color-primary);
+    font-size: var(--font-size-sm);
+    font-weight: 600;
+    transition: all 0.35s ease-in-out 0s;
+
+    &:hover,
+    &:focus {
+      transform: translateX(#{fun.convert-px(-2)})
+        translateY(#{fun.convert-px(-2)});
+      box-shadow:
+        fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
+          var(--color-shadow-light),
+        fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
+          var(--color-shadow-light),
+        fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
+          var(--color-shadow-light),
+        fun.convert-px(4) fun.convert-px(7) fun.convert-px(8) fun.convert-px(-3)
+          var(--color-shadow-light);
+    }
+
+    &:focus {
+      text-decoration: underline var(--color-primary) fun.convert-px(3);
+    }
+
+    &:active {
+      text-decoration: none;
+      transform: translateY(#{fun.convert-px(2)});
+      box-shadow: 0 0 0 0 var(--color-shadow);
+    }
+  }
+
+  pre[class*="language-"] {
+    --gutter-size-with-spacing: calc(var(--gutter-size) + var(--spacing-xs));
+
+    padding: 0;
+    position: relative;
+    overflow: auto;
+    background: var(--color-bg-secondary);
+    border: fun.convert-px(1) solid var(--color-border-light);
+    color: var(--color-fg);
+    hyphens: none;
+    tab-size: 4;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+
+    &.command-line {
+      --gutter-size: 19ch;
+      padding-left: var(--gutter-size-with-spacing);
+    }
+
+    &.line-numbers {
+      --gutter-size: 6ch;
+
+      counter-reset: linenumber;
+      padding-left: var(--gutter-size-with-spacing);
+    }
+
+    code {
+      display: block;
+      padding: var(--spacing-xs) 0;
+      position: relative;
+    }
+
+    .line-numbers-rows,
+    .command-line-prompt {
+      display: block;
+      width: var(--gutter-size);
+      padding: var(--spacing-xs) 0;
+      position: absolute;
+      top: 0;
+      left: calc(var(--gutter-size-with-spacing) * -1);
+      background: var(--color-bg);
+      border-right: fun.convert-px(1) solid var(--color-border);
+      font-size: 100%;
+      letter-spacing: -1px;
+      text-align: right;
+      pointer-events: none;
+      user-select: none;
+
+      > span {
+        &::before {
+          display: block;
+          padding-right: var(--spacing-xs);
+          color: var(--color-fg-light);
+        }
+      }
+    }
+
+    .command-line-prompt {
+      > span {
+        &::before {
+          content: " ";
+        }
+
+        &[data-user]::before {
+          content: "[" attr(data-user) "@" attr(data-host) "] $";
+        }
+
+        &[data-user="root"]::before {
+          content: "[" attr(data-user) "@" attr(data-host) "] #";
+        }
+
+        &[data-prompt]::before {
+          content: attr(data-prompt);
+        }
+
+        &[data-continuation-prompt]::before {
+          content: attr(data-continuation-prompt);
+        }
+      }
+    }
+
+    .line-numbers-rows {
+      > span {
+        counter-increment: linenumber;
+
+        &::before {
+          content: counter(linenumber);
+        }
+      }
+    }
+
+    .token {
+      &.comment,
+      &.doc-comment {
+        color: var(--color-fg-light);
+      }
+
+      &.punctuation {
+        color: var(--color-fg);
+      }
+
+      &.attr-name,
+      &.hexcode,
+      &.inserted,
+      &.string {
+        color: var(--color-token-green);
+      }
+
+      &.class,
+      &.coord,
+      &.id,
+      &.function {
+        color: var(--color-token-purple);
+      }
+
+      &.builtin,
+      &.builtin.class-name,
+      &.property-access,
+      &.regex,
+      &.scope {
+        color: var(--color-token-magenta);
+      }
+
+      &.class-name,
+      &.constant,
+      &.global,
+      &.interpolation,
+      &.key,
+      &.package,
+      &.this,
+      &.title,
+      &.variable {
+        color: var(--color-token-blue);
+      }
+
+      &.combinator,
+      &.keyword,
+      &.operator,
+      &.pseudo-class,
+      &.pseudo-element,
+      &.rule,
+      &.selector,
+      &.unit {
+        color: var(--color-token-orange);
+      }
+
+      &.attr-value,
+      &.boolean,
+      &.number {
+        color: var(--color-token-yellow);
+      }
+
+      &.delimiter,
+      &.doctype,
+      &.parameter,
+      &.parent,
+      &.property,
+      &.shebang,
+      &.tag {
+        color: var(--color-token-cyan);
+      }
+
+      &.deleted {
+        color: var(--color-token-red);
+      }
+
+      &.punctuation.brace-hover,
+      &.punctuation.brace-selected {
+        background: var(--color-bg);
+        outline: solid fun.convert-px(1) var(--color-primary-light);
+      }
+
+      &.output {
+        user-select: none;
+      }
+    }
+
+    span.inline-color-wrapper {
+      background: url(fun.encode-svg(
+        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="gray" d="M0 0h2v2H0z"/><path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/></svg>'
+      ));
+
+      /* Prevent glitches where 1px from the repeating pattern could be seen. */
+      background-position: center;
+      background-size: 110%;
+
+      display: inline-block;
+      height: 1.1ch;
+      width: 1.1ch;
+      margin: 0 0.5ch 0 0;
+      border: fun.convert-px(1) solid var(--color-bg);
+      outline: fun.convert-px(1) solid var(--color-border-dark);
+      overflow: hidden;
+    }
+
+    span.inline-color {
+      display: block;
+
+      /* To prevent visual glitches again */
+      height: 120%;
+      width: 120%;
+    }
+  }
+}
diff --git a/src/styles/pages/article.module.scss b/src/styles/pages/article.module.scss
index d2e7822..5e7d520 100644
--- a/src/styles/pages/article.module.scss
+++ b/src/styles/pages/article.module.scss
@@ -5,7 +5,6 @@
 @use "partials/article-links";
 @use "partials/article-lists";
 @use "partials/article-media";
-@use "partials/article-prism";
 @use "partials/article-wp-blocks";
 
 .btn {
@@ -23,8 +22,8 @@
     @include article-links.styles;
     @include article-lists.styles;
     @include article-media.styles;
-    @include article-prism.styles;
     @include article-wp-blocks.styles;
+    @extend %prism;
   }
 }
 
diff --git a/src/styles/pages/partials/_article-prism.scss b/src/styles/pages/partials/_article-prism.scss
deleted file mode 100644
index 7d23e38..0000000
--- a/src/styles/pages/partials/_article-prism.scss
+++ /dev/null
@@ -1,302 +0,0 @@
-@use "../../abstracts/functions" as fun;
-@use "../../abstracts/mixins" as mix;
-
-@mixin styles {
-  .code-toolbar {
-    --toolbar-height: #{fun.convert-px(100)};
-
-    position: relative;
-    margin-top: calc(var(--toolbar-height) + var(--spacing-sm));
-
-    @include mix.media("screen") {
-      @include mix.dimensions("2xs") {
-        --toolbar-height: #{fun.convert-px(60)};
-      }
-    }
-
-    .toolbar {
-      display: flex;
-      flex-flow: row wrap;
-      justify-content: center;
-      width: 100%;
-      height: var(--toolbar-height);
-      position: absolute;
-      top: calc(var(--toolbar-height) * -1);
-      left: 0;
-      right: 0;
-      background: var(--color-bg-tertiary);
-      border: fun.convert-px(1) solid var(--color-border);
-    }
-
-    .toolbar-item {
-      display: flex;
-      align-items: center;
-      margin: 0 var(--spacing-2xs);
-    }
-
-    .toolbar-item:nth-child(1) {
-      flex: 0 0 100%;
-      justify-content: center;
-      margin: 0 auto 0 0;
-      padding: 0 var(--spacing-sm);
-      background: var(--color-bg-code);
-      border-bottom: fun.convert-px(1) solid var(--color-border);
-      color: var(--color-primary-darker);
-      font-size: var(--font-size-sm);
-      font-weight: 600;
-
-      @include mix.media("screen") {
-        @include mix.dimensions("2xs") {
-          flex: 0 0 auto;
-          justify-content: left;
-          border-bottom: none;
-          border-right: fun.convert-px(1) solid var(--color-border);
-        }
-      }
-    }
-  }
-
-  .copy-to-clipboard-button,
-  .prism-color-scheme-button {
-    display: block;
-    padding: fun.convert-px(3) var(--spacing-xs);
-    background: var(--color-bg);
-    border: 0.4ex solid var(--color-primary);
-    border-radius: fun.convert-px(30);
-    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-        var(--color-shadow),
-      fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
-        var(--color-shadow),
-      fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
-        var(--color-shadow);
-    color: var(--color-primary);
-    font-size: var(--font-size-sm);
-    font-weight: 600;
-    transition: all 0.35s ease-in-out 0s;
-
-    &:hover,
-    &:focus {
-      transform: translateX(#{fun.convert-px(-2)})
-        translateY(#{fun.convert-px(-2)});
-      box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-          var(--color-shadow-light),
-        fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
-          var(--color-shadow-light),
-        fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
-          var(--color-shadow-light),
-        fun.convert-px(4) fun.convert-px(7) fun.convert-px(8) fun.convert-px(-3)
-          var(--color-shadow-light);
-    }
-
-    &:focus {
-      text-decoration: underline var(--color-primary) fun.convert-px(3);
-    }
-
-    &:active {
-      text-decoration: none;
-      transform: translateY(#{fun.convert-px(2)});
-      box-shadow: 0 0 0 0 var(--color-shadow);
-    }
-  }
-
-  pre[class*="language-"] {
-    --gutter-size-with-spacing: calc(var(--gutter-size) + var(--spacing-xs));
-
-    padding: 0;
-    position: relative;
-    overflow: auto;
-    border: fun.convert-px(1) solid var(--color-border-light);
-    hyphens: none;
-    tab-size: 4;
-    text-align: left;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
-
-    &.command-line {
-      --gutter-size: 19ch;
-      padding-left: var(--gutter-size-with-spacing);
-    }
-
-    &.line-numbers {
-      --gutter-size: 6ch;
-
-      counter-reset: lineNumber;
-      padding-left: var(--gutter-size-with-spacing);
-    }
-
-    code {
-      display: block;
-      padding: var(--spacing-xs) 0;
-      position: relative;
-    }
-
-    .line-numbers-rows,
-    .command-line-prompt {
-      display: block;
-      width: var(--gutter-size);
-      padding: var(--spacing-xs) 0;
-      position: absolute;
-      top: 0;
-      left: calc(var(--gutter-size-with-spacing) * -1);
-      background: var(--color-bg);
-      border-right: fun.convert-px(1) solid var(--color-border);
-      font-size: 100%;
-      letter-spacing: -1px;
-      text-align: right;
-      pointer-events: none;
-      user-select: none;
-
-      > span {
-        &::before {
-          display: block;
-          padding-right: var(--spacing-xs);
-          color: var(--color-fg-light);
-        }
-      }
-    }
-
-    .command-line-prompt {
-      > span {
-        &::before {
-          content: " ";
-        }
-
-        &[data-user]::before {
-          content: "[" attr(data-user) "@" attr(data-host) "] $";
-        }
-
-        &[data-user="root"]::before {
-          content: "[" attr(data-user) "@" attr(data-host) "] #";
-        }
-
-        &[data-prompt]::before {
-          content: attr(data-prompt);
-        }
-
-        &[data-continuation-prompt]::before {
-          content: attr(data-continuation-prompt);
-        }
-      }
-    }
-
-    .line-numbers-rows {
-      > span {
-        counter-increment: lineNumber;
-
-        &::before {
-          content: counter(lineNumber);
-        }
-      }
-    }
-
-    .token {
-      &.comment,
-      &.doc-comment {
-        color: var(--color-fg-light);
-      }
-
-      &.punctuation {
-        color: var(--color-fg);
-      }
-
-      &.attr-name,
-      &.hexcode,
-      &.inserted,
-      &.string {
-        color: var(--color-token-green);
-      }
-
-      &.class,
-      &.coord,
-      &.id,
-      &.function {
-        color: var(--color-token-purple);
-      }
-
-      &.builtin,
-      &.builtin.class-name,
-      &.property-access,
-      &.regex,
-      &.scope {
-        color: var(--color-token-magenta);
-      }
-
-      &.class-name,
-      &.constant,
-      &.global,
-      &.interpolation,
-      &.key,
-      &.package,
-      &.this,
-      &.title,
-      &.variable {
-        color: var(--color-token-blue);
-      }
-
-      &.combinator,
-      &.keyword,
-      &.operator,
-      &.pseudo-class,
-      &.pseudo-element,
-      &.rule,
-      &.selector,
-      &.unit {
-        color: var(--color-token-orange);
-      }
-
-      &.attr-value,
-      &.boolean,
-      &.number {
-        color: var(--color-token-yellow);
-      }
-
-      &.delimiter,
-      &.doctype,
-      &.parameter,
-      &.parent,
-      &.property,
-      &.shebang,
-      &.tag {
-        color: var(--color-token-cyan);
-      }
-
-      &.deleted {
-        color: var(--color-token-red);
-      }
-
-      &.punctuation.brace-hover,
-      &.punctuation.brace-selected {
-        background: var(--color-bg);
-        outline: solid fun.convert-px(1) var(--color-primary-light);
-      }
-    }
-
-    span.inline-color-wrapper {
-      background: url(fun.encode-svg(
-        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="gray" d="M0 0h2v2H0z"/><path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/></svg>'
-      ));
-
-      /* Prevent glitches where 1px from the repeating pattern could be seen. */
-      background-position: center;
-      background-size: 110%;
-
-      display: inline-block;
-      height: 1.1ch;
-      width: 1.1ch;
-      margin: 0 0.5ch 0 0;
-      border: fun.convert-px(1) solid var(--color-bg);
-      outline: fun.convert-px(1) solid var(--color-border-dark);
-      overflow: hidden;
-    }
-
-    span.inline-color {
-      display: block;
-
-      /* To prevent visual glitches again */
-      height: 120%;
-      width: 120%;
-    }
-  }
-}
-- 
cgit v1.2.3