valaxy 0.15.5 → 0.15.7

package/client/components/ValaxyCopyright.vue

@@ -63,7 +63,6 @@ const licenseHtml = computed(() => {
 
   &::after {
     pointer-events: none;
-
     position: absolute;
     color: white;
     background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath fill='gray' d='M245.8 214.9l-33.2 17.3c-9.4-19.6-25.2-20-27.4-20-22.2 0-33.3 14.6-33.3 43.9 0 23.5 9.2 43.8 33.3 43.8 14.4 0 24.6-7 30.5-21.3l30.6 15.5a73.2 73.2 0 01-65.1 39c-22.6 0-74-10.3-74-77 0-58.7 43-77 72.6-77 30.8-.1 52.7 11.9 66 35.8zm143 0l-32.7 17.3c-9.5-19.8-25.7-20-27.9-20-22.1 0-33.2 14.6-33.2 43.9 0 23.5 9.2 43.8 33.2 43.8 14.5 0 24.7-7 30.5-21.3l31 15.5c-2 3.8-21.3 39-65 39-22.7 0-74-9.9-74-77 0-58.7 43-77 72.6-77C354 179 376 191 389 214.8zM247.7 8C104.7 8 0 123 0 256c0 138.4 113.6 248 247.6 248C377.5 504 496 403 496 256 496 118 389.4 8 247.6 8zm.8 450.8c-112.5 0-203.7-93-203.7-202.8 0-105.5 85.5-203.3 203.8-203.3A201.7 201.7 0 01451.3 256c0 121.7-99.7 202.9-202.9 202.9z'/%3E%3C/svg%3E");

package/client/components/ValaxyLogo.vue

@@ -17,6 +17,7 @@ import valaxyLogoPng from '../assets/images/valaxy-logo.png'
     }
   }
 }
+
 .bg-img {
   border-radius: 50%;
   filter: blur(72px);

package/client/components/ValaxyMd.vue

@@ -75,6 +75,7 @@ useVanillaLazyLoad()
 </template>
 
 <style lang="scss">
+/* stylelint-disable selector-class-pattern */
 .medium-zoom-overlay,
 .medium-zoom-image--opened {
   z-index: 999;

package/client/components/ValaxyOverlay.vue

@@ -14,16 +14,12 @@ withDefaults(defineProps<{
 
 <style lang="scss">
 @use "sass:map";
-
 @use "valaxy/client/styles/mixins/index.scss" as *;
 
 .va-overlay {
   background-color: rgba(0, 0, 0, 0.3);
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   z-index: calc(var(--va-z-overlay) - 1);
   transition: opacity 0.4s;
 

package/client/components/ValaxyPagination.vue

@@ -90,7 +90,6 @@ function jumpTo(page: number) {
     display: inline-flex;
     justify-content: center;
     align-items: center;
-
     width: 2rem;
     height: 2rem;
     margin: 0;
@@ -99,7 +98,6 @@ function jumpTo(page: number) {
 
   .prev, .next, .page-number {
     cursor: pointer;
-
     color: var(--va-c-text);
     text-decoration: none;
     background-color: var(--page-btn-bg-color);

package/client/styles/common/code.scss

@@ -18,14 +18,14 @@ html:not(.dark) .vp-code-dark {
   }
 }
 
-@media (min-width: 640px) {
+@media (width >= 640px) {
   .markdown-body div[class*="language-"] {
     border-radius: 6px;
     margin: 16px 0;
   }
 }
 
-@media (max-width: 639px) {
+@media (width <= 639px) {
   .markdown-body li div[class*="language-"] {
     border-radius: 6px 0 0 6px;
   }
@@ -42,25 +42,19 @@ html:not(.dark) .vp-code-dark {
     background-color: var(--va-code-block-bg);
     overflow-x: auto;
   }
-}
 
-.markdown-body {
   [class*='language-'] pre,
   [class*='language-'] code {
-    /*rtl:ignore*/
+    /* rtl:ignore */
     direction: ltr;
-    /*rtl:ignore*/
+
+    /* rtl:ignore */
     text-align: left;
     white-space: pre;
     word-spacing: normal;
     word-break: normal;
     word-wrap: normal;
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
     tab-size: 4;
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
     hyphens: none;
   }
 
@@ -103,11 +97,12 @@ html:not(.dark) .vp-code-dark {
 
   // copy
   [class*='language-'] > button.copy {
-    /*rtl:ignore*/
+    /* rtl:ignore */
     direction: ltr;
     position: absolute;
     top: 12px;
-    /*rtl:ignore*/
+
+    /* rtl:ignore */
     right: 12px;
     z-index: 3;
     border: 1px solid var(--va-code-copy-code-border-color);
@@ -140,7 +135,7 @@ html:not(.dark) .vp-code-dark {
   
   [class*='language-'] > button.copy.copied,
   [class*='language-'] > button.copy:hover.copied {
-    /*rtl:ignore*/
+    /* rtl:ignore */
     border-radius: 0 4px 4px 0;
     background-color: var(--va-code-copy-code-hover-bg);
     background-image: var(--va-icon-copied);
@@ -150,13 +145,15 @@ html:not(.dark) .vp-code-dark {
   [class*='language-'] > button.copy:hover.copied::before {
     position: relative;
     top: -1px;
-    /*rtl:ignore*/
+
+    /* rtl:ignore */
     transform: translateX(calc(-100% - 1px));
     display: flex;
     justify-content: center;
     align-items: center;
     border: 1px solid var(--va-code-copy-code-hover-border-color);
-    /*rtl:ignore*/
+
+    /* rtl:ignore */
     border-right: 0;
     border-radius: 4px 0 0 4px;
     padding: 0 10px;
@@ -174,7 +171,8 @@ html:not(.dark) .vp-code-dark {
   [class*='language-'] > span.lang {
     position: absolute;
     top: 2px;
-    /*rtl:ignore*/
+
+    /* rtl:ignore */
     right: 8px;
     z-index: 2;
     font-size: 12px;
@@ -189,10 +187,8 @@ html:not(.dark) .vp-code-dark {
   [class*='language-'] > button.copy:focus + span.lang {
     opacity: 0;
   }
-}
 
-// diff
-.markdown-body {
+  // diff
   [class*='language-'] code .diff {
     transition: background-color 0.5s;
     margin: 0 -24px;

package/client/styles/common/hamburger.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable declaration-block-single-line-max-declarations */
 @use "sass:math";
 
 $hamburger-size: 22px;
@@ -34,7 +36,6 @@ $hamburger-size: 22px;
 .vt-hamburger-middle,
 .vt-hamburger-bottom {
   left: 0; 
-
   position: absolute;
   width: $hamburger-size;
   height: 2px;
@@ -46,10 +47,12 @@ $hamburger-size: 22px;
   top: 0; 
   transform: translateX(0);
 }
+
 .vt-hamburger-middle { 
   top: math.div($hamburger-size - 4px, 2); 
   transform: translateX(math.div(-$hamburger-size, 2)); 
 }
+
 .vt-hamburger-bottom { 
   top: $hamburger-size - 4px; 
   transform: translateX(math.div(-$hamburger-size, 4));

package/client/styles/common/markdown.scss

@@ -51,11 +51,8 @@
     margin: 0;
     border-radius: 8px 8px 0 0;
   }
-}
-
 
-// header-anchor
-.markdown-body {
+  // header-anchor
   .header-anchor {
     position: absolute;
     top: 0;
@@ -70,7 +67,7 @@
       opacity 0.25s;
   }
 
-  .header-anchor:before {
+  .header-anchor::before {
     content: var(--va-header-anchor-symbol, '#');
 
     &:hover {
@@ -95,7 +92,7 @@
 }
 
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .markdown-body h1 {
     letter-spacing: -0.02em;
     line-height: 40px;

package/client/styles/common/scrollbar.scss

@@ -13,6 +13,7 @@
 ::-webkit-scrollbar-thumb {
   border-radius: 2px;
   background-color: rgba(122, 122, 122, 0.3);
+
   // transition not work
 
   &:window-inactive {

package/client/styles/components/code-group.scss

@@ -14,7 +14,7 @@
   box-shadow: inset 0 -1px var(--va-code-tab-divider);
 }
 
-@media (min-width: 640px) {
+@media (width >= 640px) {
   .vp-code-group .tabs {
     margin-right: 0;
     margin-left: 0;

package/client/styles/components/custom-block.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 .custom-block-title {
   margin-bottom: -0.4rem;
   font-weight: 600;
@@ -19,26 +20,31 @@
   --va-custom-block-font-size: 14px;
   --va-custom-block-code-font-size: 13px;
 
+  // info
   --va-custom-block-info-border: transparent;
   --va-custom-block-info-text: var(--va-c-text-1);
   --va-custom-block-info-bg: var(--va-c-default-soft);
   --va-custom-block-info-code-bg: var(--va-c-default-soft);
 
+  // tip
   --va-custom-block-tip-border: transparent;
   --va-custom-block-tip-text: var(--va-c-text-1);
   --va-custom-block-tip-bg: var(--va-c-brand-soft);
   --va-custom-block-tip-code-bg: var(--va-c-brand-soft);
 
+  // warning
   --va-custom-block-warning-border: transparent;
   --va-custom-block-warning-text: var(--va-c-text-1);
   --va-custom-block-warning-bg: var(--va-c-warning-soft);
   --va-custom-block-warning-code-bg: var(--va-c-warning-soft);
 
+  // danger
   --va-custom-block-danger-border: transparent;
   --va-custom-block-danger-text: var(--va-c-text-1);
   --va-custom-block-danger-bg: var(--va-c-danger-soft);
   --va-custom-block-danger-code-bg: var(--va-c-danger-soft);
 
+  // details
   --va-custom-block-details-border: var(--va-custom-block-info-border);
   --va-custom-block-details-text: var(--va-custom-block-info-text);
   --va-custom-block-details-bg: var(--va-custom-block-info-bg);
@@ -149,10 +155,6 @@
   background-color: var(--va-custom-block-details-code-bg);
 }
 
-.custom-block-title {
-  font-weight: 600;
-}
-
 .custom-block p + p {
   margin: 8px 0;
 }

package/client/styles/css-vars.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable no-duplicate-selectors */
 @use "sass:map";
 @use "./mixins" as *;
 @use "./vars" as *;
@@ -9,7 +10,6 @@ $c-primary: #0078e7 !default;
     "primary": $c-primary,
   )
 );
-
 @use './css-vars/borders.css' as *;
 @use './css-vars/palette.css' as *;
 @use './css-vars/function.css' as *;
@@ -26,6 +26,7 @@ $c-primary: #0078e7 !default;
 :root {
   // palette different with colors
   @include set-css-var-from-map(palette.$palette, "c");
+
   // primary
   @include set-css-var-from-map(palette.$colors, "c");
 }
@@ -33,12 +34,14 @@ $c-primary: #0078e7 !default;
 // light
 :root {
   color-scheme: light;
+
   @include set-css-var-from-map(palette.$light);
 }
 
 // dark
 .dark {
   color-scheme: dark;
+
   @include set-css-var-from-map(palette.$dark);
 }
 
@@ -56,6 +59,7 @@ $c-primary: #0078e7 !default;
   --va-c-text-2: rgba(60, 60, 67, 0.78);
   --va-c-text-3: rgba(60, 60, 67, 0.56);
 }
+
 .dark {
   --va-c-text-1: rgba(255, 255, 245, 0.86);
   --va-c-text-2: rgba(235, 235, 245, 0.6);
@@ -67,21 +71,21 @@ $c-primary: #0078e7 !default;
   --va-code-line-height: 1.7;
   --va-code-font-size: 0.875em;
 
+  // block
   --va-code-block-color: var(--va-c-text-2);
   --va-code-block-bg: var(--va-c-bg-alt);
   --va-code-block-divider-color: var(--va-c-gutter);
 
+  // line
   --va-code-lang-color: var(--va-c-text-3);
-
   --va-code-line-highlight-color: var(--va-c-default-soft);
   --va-code-line-number-color: var(--va-c-text-3);
 
+  // diff
   --va-code-line-diff-add-color: var(--va-c-green-soft);
   --va-code-line-diff-add-symbol-color: var(--va-c-green-1);
-
   --va-code-line-diff-remove-color: var(--va-c-red-soft);
   --va-code-line-diff-remove-symbol-color: var(--va-c-red-1);
-
   --va-code-line-warning-color: var(--va-c-yellow-soft);
   --va-code-line-error-color: var(--va-c-red-soft);
 

package/client/styles/global/index.scss

@@ -3,7 +3,6 @@ body,
 #app {
   margin: 0;
   padding: 0;
-
   line-height: 2;
 }
 

package/client/styles/index.scss

@@ -13,7 +13,6 @@ $c-primary: #0078e7 !default;
 // common
 @use "./common/code.scss" as *;
 @use "./common/hamburger.scss" as *;
-
 @use "./common/scrollbar.scss" as *;
 @use "./common/transition.scss" as *;
 

package/client/styles/mixins/variable.scss

@@ -4,12 +4,18 @@
 // join-var-name(('button', 'text-color')) => '--#{namespace}-button-text-color'
 @function join-var-name($list) {
   $name: '--' + config.$namespace;
+
   @each $item in $list {
     @if $item != '' {
       $name: $name + '-' + $item;
     }
   }
+
   @return $name;
+
+  
+
+
 }
 
 // get-css-var('button', 'text-color') => var(--el-button-text-color)

package/client/styles/palette.scss

@@ -1,12 +1,12 @@
 @use "sass:map";
 @use "sass:meta";
-
 @use "./mixins" as *;
+@use "sass:color";
 
 $palette: () !default;
 $palette: map.merge(
   (
-    "white": #ffffff,
+    "white": #fff,
     "black": #1a1a1a,
     "gray": #8e8e8e,
     "danger": #db2828,
@@ -16,14 +16,13 @@ $palette: map.merge(
     "text-light-2": rgba(60, 60, 60, 0.7),
     "text-light-3": rgba(60, 60, 60, 0.33),
     "text-light-4": rgba(60, 60, 60, 0.18),
-    "text-dark-1": rgba(255, 255, 255, 0.87),
-    "text-dark-2": rgba(235, 235, 235, 0.6),
-    "text-dark-3": rgba(235, 235, 235, 0.38),
-    "text-dark-4": rgba(235, 235, 235, 0.18),
+    "text-dark-1": rgba(255 ,255 ,255, 0.87),
+    "text-dark-2": rgba(235 ,235 ,235, 0.6),
+    "text-dark-3": rgba(235 ,235 ,235, 0.38),
+    "text-dark-4": rgba(235 ,235 ,235, 0.18),
   ),
   $palette
 );
-
 $colors: () !default;
 $colors: map.merge(
   (
@@ -31,18 +30,15 @@ $colors: map.merge(
   ),
   $colors
 );
-
 $c-primary: map.get($colors, "primary") !default;
-
 $colors: map.merge(
   (
-    "primary-light": lighten($c-primary, 15%),
-    "primary-lighter": lighten($c-primary, 30%),
-    "primary-dark": darken($c-primary, 5%),
+    "primary-light": color.adjust($c-primary, $lightness: 15%),
+    "primary-lighter": color.adjust($c-primary, $lightness: 30%),
+    "primary-dark": color.adjust($c-primary, $lightness: -5%),
   ),
   $colors
 );
-
 $light: () !default;
 $light: map.merge(
   (
@@ -53,7 +49,7 @@ $light: map.merge(
     "c-bg": white,
     "c-bg-light": white,
     "c-bg-dark": #fafafa,
-    "c-bg-opacity": rgba(255, 255, 255, 0.8),
+    "c-bg-opacity": rgba(255, 255, 255 , 0.8),
 
     "c-bg-soft": #f9f9f9,
     "c-bg-alt": #f9f9f9,
@@ -64,18 +60,13 @@ $light: map.merge(
     "c-text-lighter": #666,
     "c-text-dark": #111,
 
-    "c-primary-rgb": #{red($c-primary),
-    green(
-      $c-primary,
-    ),
-    blue($c-primary)},
+    "c-primary-rgb": #{color.red($c-primary), color.green($c-primary), color.blue($c-primary)},
 
     "c-link": get-css-var("c-primary-dark"),
     "c-divider": rgba(60, 60, 60, 0.2),
   ),
   $light
 );
-
 $dark: () !default;
 $dark: map.merge(
   (
@@ -84,7 +75,7 @@ $dark: map.merge(
     "c-bg": #1b1b1f,
     "c-bg-light": #202127,
     "c-bg-dark": #1a1a1a,
-    "c-bg-opacity": rgba(0, 0, 0, 0.8),
+    "c-bg-opacity": rgba(0, 0, 0,  0.8),
 
     "c-bg-alt": #161618,
     "c-bg-soft": #202127,

package/client/styles/third/katex.scss

@@ -1,3 +1,9 @@
+.katex-display {
+  overflow-x: auto;
+  overflow-y: visible;
+  padding: 8px 0;
+}
+
 .katex-display > .katex > .katex-html > .tag {
   right: 2px;
 }

package/client/styles/vars.scss

@@ -8,7 +8,6 @@ $common: map.merge(
   ),
   $common
 );
-
 $border: () !default;
 $border: map.merge(
   (
@@ -16,7 +15,6 @@ $border: map.merge(
   ),
   $border
 );
-
 $font: () !default;
 $font: map.merge(
   (
@@ -27,7 +25,6 @@ $font: map.merge(
   ),
   $font
 );
-
 $transition: () !default;
 $transition: map.merge(
   (

package/client/utils/index.ts

@@ -4,3 +4,4 @@ export * from './time'
 export * from './wrap'
 export * from './types'
 export * from './content'
+export * from './router'

package/client/utils/router.ts

@@ -0,0 +1,39 @@
+export interface ScrollToOptions {
+  smooth: boolean
+  targetPadding: number
+}
+
+export function scrollTo(el: HTMLElement, hash: string, options: Partial<ScrollToOptions> = {
+  smooth: true,
+  targetPadding: -64,
+}) {
+  let target: Element | null = null
+  try {
+    target = el.classList.contains('header-anchor')
+      ? el
+      : ((decodeURIComponent(hash) && document.querySelector(decodeURIComponent(hash))) || null)
+  }
+  catch (e) {
+    console.warn(e)
+  }
+
+  if (target) {
+    const targetPadding = options?.targetPadding || -64
+    const targetTop
+      = window.scrollY
+      + (target as HTMLElement).getBoundingClientRect().top
+      + targetPadding
+
+    // only smooth scroll if distance is smaller than screen height.
+    if (!options.smooth || Math.abs(targetTop - window.scrollY) > window.innerHeight) {
+      window.scrollTo(0, targetTop)
+    }
+    else {
+      window.scrollTo({
+        // left: 0,
+        top: targetTop,
+        behavior: 'smooth',
+      })
+    }
+  }
+}