Merge branch 'canary' into master (#711)

* refactor(i18n): simplify the structure of the translation file

* chore: prepare repository for v4.0.0-alpha

* chore: modify go.mod to v4

* refactor: migrate theme configuration to TOML

* fix: exampleSite not using correct theme

* feat: add favicon from assets folder

* refactor: drop linear grandient background feature

remove node-vibrant from dependencies

* feat: use Hugo's code block render hook to implement code copy button

Now it can have i18n support

* refactor: delete color.ts

* refactor: delete Emoji support post from example site

* refactor: drop support for `hidden` field in front matter

* feat: upgrade to PhotoSwipe v5

* chore: bump the required hugo version to 0.100.0

* refactor: remove PhotoSwipe from external.yaml

* fix: extra margin in search result

* fix: incorrect markdown heading level in example site

* refactor: remove some usages of `default` in template

No longer needed thanks to Hugo's configuration merge

* fix: one line codeblock style in firefox

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/564

* feat: add style to new codeblock

* feat: i18n support for codeblock copy text

* fix(menu): jitter when closing menu

It's caused by flexbox gap property, which can't animate

* fix(search): long text overflows under the Search icon

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/515

assets/scss/partials/article.scss

@@ -192,7 +192,6 @@
         .article-preview {
             font-size: 1.4rem;
             color: var(--card-text-color-tertiary);
-            margin-top: 10px;
             line-height: 1.5;
         }
     }

assets/scss/partials/highlight/dark.scss

@@ -11,4 +11,4 @@ $text-color: $color;
 $name-color: #a6e22e;
 $literal-color: #e6db74;
 
-@import "common.scss";
+@import "common.scss";

assets/scss/partials/layout/article.scss

@@ -286,10 +286,12 @@
         line-height: 1.428571429;
         word-break: break-all;
         padding: var(--card-padding);
+
         //  keep Codeblocks LTR
         [dir="rtl"] & {
             direction: ltr;
         }
+
         code {
             color: unset;
             border: none;
@@ -303,15 +305,11 @@
         padding: var(--card-padding);
         position: relative;
 
-        &:hover {
-            .copyCodeButton {
-                opacity: 1;
-            }
-        }
         // keep Codeblocks LTR
         [dir="rtl"] & {
             direction: ltr;
         }
+
         pre {
             margin: initial;
             padding: 0;
@@ -320,20 +318,30 @@
         }
     }
 
-    .copyCodeButton {
-        position: absolute;
-        top: calc(var(--card-padding));
-        right: calc(var(--card-padding));
-        background: var(--card-background);
-        border: none;
-        box-shadow: var(--shadow-l2);
-        border-radius: var(--tag-border-radius);
-        padding: 8px 16px;
-        color: var(--card-text-color-main);
-        cursor: pointer;
-        font-size: 14px;
-        opacity: 0;
-        transition: opacity 0.3s ease;
+    .codeblock {
+        header {
+            background-color: var(--card-background-selected);
+            padding: 5px var(--card-padding);
+            display: flex;
+            justify-content: space-between;
+            box-shadow: var(--shadow-l1);
+
+            span {
+                text-transform: uppercase;
+                font-weight: bold;
+                color: var(--card-text-color-secondary);
+            }
+        }
+
+        .codeblock-copy {
+            cursor: pointer;
+            background-color: transparent;
+            border: none;
+            padding: 8px 16px;
+            color: var(--card-text-color-secondary);
+            font-size: 14px;
+            font-weight: bold;
+        }
     }
 
     .table-wrapper {
@@ -402,7 +410,7 @@
     /// Negative margins
     blockquote,
     figure,
-    .highlight,
+    .codeblock,
     pre,
     .gallery,
     .video-wrapper,

assets/scss/partials/layout/search.scss

@@ -31,6 +31,7 @@
 
     input {
         padding: 40px 20px 20px;
+        padding-inline-end: var(--button-size);
         border-radius: var(--card-border-radius);
         background-color: var(--card-background);
         box-shadow: var(--shadow-l1);
@@ -78,5 +79,4 @@
             height: 20px;
         }
     }
-
-}
+}

assets/scss/partials/sidebar.scss

@@ -11,7 +11,6 @@
     flex-direction: column;
     flex-shrink: 0;
     align-self: stretch;
-    gap: var(--sidebar-element-separation);
     max-width: none;
     width: 100%;
     position: relative;
@@ -65,6 +64,11 @@
             }
         }
     }
+
+    .social-menu,
+    .menu {
+        margin-top: var(--sidebar-element-separation);
+    }
 }
 
 .right-sidebar {