Revert "Merge branch 'canary' into master" (CaiJimmy#712)

Revert "Merge branch 'canary' into master (CaiJimmy#711)" This reverts commit 8a597a5.
haxung · Oct 29, 2022 · b03390d · b03390d
1 parent 8a597a5
commit b03390d
Show file tree

Hide file tree

Showing 73 changed files with 1,981 additions and 897 deletions.
diff --git a/archetypes/default.md b/archetypes/default.md
@@ -5,6 +5,7 @@ date: {{ .Date }}
 image: 
 math: 
 license: 
+hidden: false
 comments: true
 draft: true
 ---
diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss
@@ -192,6 +192,7 @@
         .article-preview {
             font-size: 1.4rem;
             color: var(--card-text-color-tertiary);
+            margin-top: 10px;
             line-height: 1.5;
         }
     }

diff --git a/assets/scss/partials/highlight/dark.scss b/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";
diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
@@ -286,12 +286,10 @@
         line-height: 1.428571429;
         word-break: break-all;
         padding: var(--card-padding);
-
         //  keep Codeblocks LTR
         [dir="rtl"] & {
             direction: ltr;
         }
-
         code {
             color: unset;
             border: none;
@@ -305,11 +303,15 @@
         padding: var(--card-padding);
         position: relative;
 
+        &:hover {
+            .copyCodeButton {
+                opacity: 1;
+            }
+        }
         // keep Codeblocks LTR
         [dir="rtl"] & {
             direction: ltr;
         }
-
         pre {
             margin: initial;
             padding: 0;
@@ -318,30 +320,20 @@
         }
     }
 
-    .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;
-        }
+    .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;
     }
 
     .table-wrapper {
@@ -410,7 +402,7 @@
     /// Negative margins
     blockquote,
     figure,
-    .codeblock,
+    .highlight,
     pre,
     .gallery,
     .video-wrapper,

diff --git a/assets/scss/partials/layout/search.scss b/assets/scss/partials/layout/search.scss
@@ -31,7 +31,6 @@
 
     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);
@@ -79,4 +78,5 @@
             height: 20px;
         }
     }
-}
+
+}
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
@@ -11,6 +11,7 @@
     flex-direction: column;
     flex-shrink: 0;
     align-self: stretch;
+    gap: var(--sidebar-element-separation);
     max-width: none;
     width: 100%;
     position: relative;
@@ -64,11 +65,6 @@
             }
         }
     }
-
-    .social-menu,
-    .menu {
-        margin-top: var(--sidebar-element-separation);
-    }
 }
 
 .right-sidebar {

diff --git a/assets/ts/codeblock.ts b/assets/ts/codeblock.ts
diff --git a/assets/ts/color.ts b/assets/ts/color.ts
@@ -0,0 +1,63 @@
+interface colorScheme {
+    hash: string,                        /// Regenerate color scheme when the image hash is changed
+    DarkMuted: {
+        hex: string,
+        rgb: Number[],
+        bodyTextColor: string
+    },
+    Vibrant: {
+        hex: string,
+        rgb: Number[],
+        bodyTextColor: string
+    }
+}
+
+let colorsCache: { [key: string]: colorScheme } = {};
+
+if (localStorage.hasOwnProperty('StackColorsCache')) {
+    try {
+        colorsCache = JSON.parse(localStorage.getItem('StackColorsCache'));
+    }
+    catch (e) {
+        colorsCache = {};
+    }
+}
+
+async function getColor(key: string, hash: string, imageURL: string) {
+    if (!key) {
+        /**
+         * If no key is provided, do not cache the result
+         */
+        return await Vibrant.from(imageURL).getPalette();
+    }
+
+    if (!colorsCache.hasOwnProperty(key) || colorsCache[key].hash !== hash) {
+        /**
+         * If key is provided, but not found in cache, or the hash mismatches => Regenerate color scheme
+         */
+        const palette = await Vibrant.from(imageURL).getPalette();
+
+        colorsCache[key] = {
+            hash: hash,
+            Vibrant: {
+                hex: palette.Vibrant.hex,
+                rgb: palette.Vibrant.rgb,
+                bodyTextColor: palette.Vibrant.bodyTextColor
+            },
+            DarkMuted: {
+                hex: palette.DarkMuted.hex,
+                rgb: palette.DarkMuted.rgb,
+                bodyTextColor: palette.DarkMuted.bodyTextColor
+            }
+        }
+
+        /* Save the result in localStorage */
+        localStorage.setItem('StackColorsCache', JSON.stringify(colorsCache));
+    }
+
+    return colorsCache[key];
+}
+
+export {
+    getColor
+}