@sugarat/theme 0.5.11 → 0.5.12-beta.1

package/src/styles/el-base.css

@@ -0,0 +1,340 @@
+@charset "UTF-8";
+
+:root {
+    --el-color-white: #ffffff;
+    --el-color-black: #000000;
+    --el-color-primary-rgb: 64, 158, 255;
+    --el-color-success-rgb: 103, 194, 58;
+    --el-color-warning-rgb: 230, 162, 60;
+    --el-color-danger-rgb: 245, 108, 108;
+    --el-color-error-rgb: 245, 108, 108;
+    --el-color-info-rgb: 144, 147, 153;
+    --el-font-size-extra-large: 20px;
+    --el-font-size-large: 18px;
+    --el-font-size-medium: 16px;
+    --el-font-size-base: 14px;
+    --el-font-size-small: 13px;
+    --el-font-size-extra-small: 12px;
+    --el-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+    --el-font-weight-primary: 500;
+    --el-font-line-height-primary: 24px;
+    --el-index-normal: 1;
+    --el-index-top: 1000;
+    --el-index-popper: 2000;
+    --el-border-radius-base: 4px;
+    --el-border-radius-small: 2px;
+    --el-border-radius-round: 20px;
+    --el-border-radius-circle: 100%;
+    --el-transition-duration: 0.3s;
+    --el-transition-duration-fast: 0.2s;
+    --el-transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
+    --el-transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1);
+    --el-transition-all: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
+    --el-transition-fade: opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
+    --el-transition-md-fade: transform var(--el-transition-duration) var(--el-transition-function-fast-bezier), opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
+    --el-transition-fade-linear: opacity var(--el-transition-duration-fast) linear;
+    --el-transition-border: border-color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
+    --el-transition-box-shadow: box-shadow var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
+    --el-transition-color: color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
+    --el-component-size-large: 40px;
+    --el-component-size: 32px;
+    --el-component-size-small: 24px
+}
+
+:root {
+    color-scheme: light;
+    --el-color-primary: #409eff;
+    --el-color-primary-light-3: #79bbff;
+    --el-color-primary-light-5: #a0cfff;
+    --el-color-primary-light-7: #c6e2ff;
+    --el-color-primary-light-8: #d9ecff;
+    --el-color-primary-light-9: #ecf5ff;
+    --el-color-primary-dark-2: #337ecc;
+    --el-color-success: #67c23a;
+    --el-color-success-light-3: #95d475;
+    --el-color-success-light-5: #b3e19d;
+    --el-color-success-light-7: #d1edc4;
+    --el-color-success-light-8: #e1f3d8;
+    --el-color-success-light-9: #f0f9eb;
+    --el-color-success-dark-2: #529b2e;
+    --el-color-warning: #e6a23c;
+    --el-color-warning-light-3: #eebe77;
+    --el-color-warning-light-5: #f3d19e;
+    --el-color-warning-light-7: #f8e3c5;
+    --el-color-warning-light-8: #faecd8;
+    --el-color-warning-light-9: #fdf6ec;
+    --el-color-warning-dark-2: #b88230;
+    --el-color-danger: #f56c6c;
+    --el-color-danger-light-3: #f89898;
+    --el-color-danger-light-5: #fab6b6;
+    --el-color-danger-light-7: #fcd3d3;
+    --el-color-danger-light-8: #fde2e2;
+    --el-color-danger-light-9: #fef0f0;
+    --el-color-danger-dark-2: #c45656;
+    --el-color-error: #f56c6c;
+    --el-color-error-light-3: #f89898;
+    --el-color-error-light-5: #fab6b6;
+    --el-color-error-light-7: #fcd3d3;
+    --el-color-error-light-8: #fde2e2;
+    --el-color-error-light-9: #fef0f0;
+    --el-color-error-dark-2: #c45656;
+    --el-color-info: #909399;
+    --el-color-info-light-3: #b1b3b8;
+    --el-color-info-light-5: #c8c9cc;
+    --el-color-info-light-7: #dedfe0;
+    --el-color-info-light-8: #e9e9eb;
+    --el-color-info-light-9: #f4f4f5;
+    --el-color-info-dark-2: #73767a;
+    --el-bg-color: #ffffff;
+    --el-bg-color-page: #f2f3f5;
+    --el-bg-color-overlay: #ffffff;
+    --el-text-color-primary: #303133;
+    --el-text-color-regular: #606266;
+    --el-text-color-secondary: #909399;
+    --el-text-color-placeholder: #a8abb2;
+    --el-text-color-disabled: #c0c4cc;
+    --el-border-color: #dcdfe6;
+    --el-border-color-light: #e4e7ed;
+    --el-border-color-lighter: #ebeef5;
+    --el-border-color-extra-light: #f2f6fc;
+    --el-border-color-dark: #d4d7de;
+    --el-border-color-darker: #cdd0d6;
+    --el-fill-color: #f0f2f5;
+    --el-fill-color-light: #f5f7fa;
+    --el-fill-color-lighter: #fafafa;
+    --el-fill-color-extra-light: #fafcff;
+    --el-fill-color-dark: #ebedf0;
+    --el-fill-color-darker: #e6e8eb;
+    --el-fill-color-blank: #ffffff;
+    --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
+    --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
+    --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
+    --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
+    --el-disabled-bg-color: var(--el-fill-color-light);
+    --el-disabled-text-color: var(--el-text-color-placeholder);
+    --el-disabled-border-color: var(--el-border-color-light);
+    --el-overlay-color: rgba(0, 0, 0, 0.8);
+    --el-overlay-color-light: rgba(0, 0, 0, 0.7);
+    --el-overlay-color-lighter: rgba(0, 0, 0, 0.5);
+    --el-mask-color: rgba(255, 255, 255, 0.9);
+    --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
+    --el-border-width: 1px;
+    --el-border-style: solid;
+    --el-border-color-hover: var(--el-text-color-disabled);
+    --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
+    --el-svg-monochrome-grey: var(--el-border-color)
+}
+
+.fade-in-linear-enter-active,
+.fade-in-linear-leave-active {
+    transition: var(--el-transition-fade-linear)
+}
+
+.fade-in-linear-enter-from,
+.fade-in-linear-leave-to {
+    opacity: 0
+}
+
+.el-fade-in-linear-enter-active,
+.el-fade-in-linear-leave-active {
+    transition: var(--el-transition-fade-linear)
+}
+
+.el-fade-in-linear-enter-from,
+.el-fade-in-linear-leave-to {
+    opacity: 0
+}
+
+.el-fade-in-enter-active,
+.el-fade-in-leave-active {
+    transition: all var(--el-transition-duration) cubic-bezier(.55, 0, .1, 1)
+}
+
+.el-fade-in-enter-from,
+.el-fade-in-leave-active {
+    opacity: 0
+}
+
+.el-zoom-in-center-enter-active,
+.el-zoom-in-center-leave-active {
+    transition: all var(--el-transition-duration) cubic-bezier(.55, 0, .1, 1)
+}
+
+.el-zoom-in-center-enter-from,
+.el-zoom-in-center-leave-active {
+    opacity: 0;
+    transform: scaleX(0)
+}
+
+.el-zoom-in-top-enter-active,
+.el-zoom-in-top-leave-active {
+    opacity: 1;
+    transform: scaleY(1);
+    transform-origin: center top;
+    transition: var(--el-transition-md-fade)
+}
+
+.el-zoom-in-top-enter-active[data-popper-placement^=top],
+.el-zoom-in-top-leave-active[data-popper-placement^=top] {
+    transform-origin: center bottom
+}
+
+.el-zoom-in-top-enter-from,
+.el-zoom-in-top-leave-active {
+    opacity: 0;
+    transform: scaleY(0)
+}
+
+.el-zoom-in-bottom-enter-active,
+.el-zoom-in-bottom-leave-active {
+    opacity: 1;
+    transform: scaleY(1);
+    transform-origin: center bottom;
+    transition: var(--el-transition-md-fade)
+}
+
+.el-zoom-in-bottom-enter-from,
+.el-zoom-in-bottom-leave-active {
+    opacity: 0;
+    transform: scaleY(0)
+}
+
+.el-zoom-in-left-enter-active,
+.el-zoom-in-left-leave-active {
+    opacity: 1;
+    transform: scale(1);
+    transform-origin: top left;
+    transition: var(--el-transition-md-fade)
+}
+
+.el-zoom-in-left-enter-from,
+.el-zoom-in-left-leave-active {
+    opacity: 0;
+    transform: scale(.45)
+}
+
+.collapse-transition {
+    transition: var(--el-transition-duration) height ease-in-out, var(--el-transition-duration) padding-top ease-in-out, var(--el-transition-duration) padding-bottom ease-in-out
+}
+
+.el-collapse-transition-enter-active,
+.el-collapse-transition-leave-active {
+    transition: var(--el-transition-duration) max-height ease-in-out, var(--el-transition-duration) padding-top ease-in-out, var(--el-transition-duration) padding-bottom ease-in-out
+}
+
+.horizontal-collapse-transition {
+    transition: var(--el-transition-duration) width ease-in-out, var(--el-transition-duration) padding-left ease-in-out, var(--el-transition-duration) padding-right ease-in-out
+}
+
+.el-list-enter-active,
+.el-list-leave-active {
+    transition: all 1s
+}
+
+.el-list-enter-from,
+.el-list-leave-to {
+    opacity: 0;
+    transform: translateY(-30px)
+}
+
+.el-list-leave-active {
+    position: absolute !important
+}
+
+.el-opacity-transition {
+    transition: opacity var(--el-transition-duration) cubic-bezier(.55, 0, .1, 1)
+}
+
+
+@-webkit-keyframes rotating {
+    0% {
+        transform: rotate(0deg)
+    }
+
+    to {
+        transform: rotate(1turn)
+    }
+}
+
+@keyframes rotating {
+    0% {
+        transform: rotate(0deg)
+    }
+
+    to {
+        transform: rotate(1turn)
+    }
+}
+
+html.dark {
+    color-scheme: dark;
+    --el-color-primary: #409eff;
+    --el-color-primary-light-3: #3375b9;
+    --el-color-primary-light-5: #2a598a;
+    --el-color-primary-light-7: #213d5b;
+    --el-color-primary-light-8: #1d3043;
+    --el-color-primary-light-9: #18222c;
+    --el-color-primary-dark-2: #66b1ff;
+    --el-color-success: #67c23a;
+    --el-color-success-light-3: #4e8e2f;
+    --el-color-success-light-5: #3e6b27;
+    --el-color-success-light-7: #2d481f;
+    --el-color-success-light-8: #25371c;
+    --el-color-success-light-9: #1c2518;
+    --el-color-success-dark-2: #85ce61;
+    --el-color-warning: #e6a23c;
+    --el-color-warning-light-3: #a77730;
+    --el-color-warning-light-5: #7d5b28;
+    --el-color-warning-light-7: #533f20;
+    --el-color-warning-light-8: #3e301c;
+    --el-color-warning-light-9: #292218;
+    --el-color-warning-dark-2: #ebb563;
+    --el-color-danger: #f56c6c;
+    --el-color-danger-light-3: #b25252;
+    --el-color-danger-light-5: #854040;
+    --el-color-danger-light-7: #582e2e;
+    --el-color-danger-light-8: #412626;
+    --el-color-danger-light-9: #2b1d1d;
+    --el-color-danger-dark-2: #f78989;
+    --el-color-error: #f56c6c;
+    --el-color-error-light-3: #b25252;
+    --el-color-error-light-5: #854040;
+    --el-color-error-light-7: #582e2e;
+    --el-color-error-light-8: #412626;
+    --el-color-error-light-9: #2b1d1d;
+    --el-color-error-dark-2: #f78989;
+    --el-color-info: #909399;
+    --el-color-info-light-3: #6b6d71;
+    --el-color-info-light-5: #525457;
+    --el-color-info-light-7: #393a3c;
+    --el-color-info-light-8: #2d2d2f;
+    --el-color-info-light-9: #202121;
+    --el-color-info-dark-2: #a6a9ad;
+    --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
+    --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
+    --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
+    --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
+    --el-bg-color-page: #0a0a0a;
+    --el-bg-color: #141414;
+    --el-bg-color-overlay: #1d1e1f;
+    --el-text-color-primary: #E5EAF3;
+    --el-text-color-regular: #CFD3DC;
+    --el-text-color-secondary: #A3A6AD;
+    --el-text-color-placeholder: #8D9095;
+    --el-text-color-disabled: #6C6E72;
+    --el-border-color-darker: #636466;
+    --el-border-color-dark: #58585B;
+    --el-border-color: #4C4D4F;
+    --el-border-color-light: #414243;
+    --el-border-color-lighter: #363637;
+    --el-border-color-extra-light: #2B2B2C;
+    --el-fill-color-darker: #424243;
+    --el-fill-color-dark: #39393A;
+    --el-fill-color: #303030;
+    --el-fill-color-light: #262727;
+    --el-fill-color-lighter: #1D1D1D;
+    --el-fill-color-extra-light: #191919;
+    --el-fill-color-blank: transparent;
+    --el-mask-color: rgba(0, 0, 0, 0.8);
+    --el-mask-color-extra-light: rgba(0, 0, 0, 0.3)
+}

package/src/styles/{index.scss → index.css}

@@ -1,15 +1,13 @@
+@charset "UTF-8";
 html {
   --bg-gradient: 255, 255, 255, 0.1;
   --bg-gradient-home: 255, 255, 255;
   --box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
-
-  // blog-item
   --box-shadow-hover: 0 2px 16px 0 rgba(0, 0, 0, 0.2);
   --nav-bgc: rgba(255, 255, 255, 0.9);
   --badge-font-color: #4e5969;
   --description-font-color: #86909c;
   --blog-theme-color: var(--vp-c-brand-1);
-  // --blog-theme-color: #409eff;
 }
 
 html.dark {
@@ -25,20 +23,18 @@ html.dark {
 .VPHome {
   min-height: 100vh;
   background: radial-gradient(ellipse, rgba(var(--bg-gradient-home), 1) 0%, rgba(var(--bg-gradient-home), 0) 700%);
-  
-  &::before {
-    content: "";
-    inset: 0;
-    position: fixed;
-    top: 0;
-    z-index: -1;
-    background-image: url(./bg.png);
-    background-repeat: repeat;
-    min-height: 100%;
-  }
+}
+.VPHome::before {
+  content: "";
+  inset: 0;
+  position: fixed;
+  top: 0;
+  z-index: -1;
+  background-image: url(./bg.png);
+  background-repeat: repeat;
+  min-height: 100%;
 }
 
-// 样式重写
 .VPHome {
   margin-bottom: 0 !important;
   padding-bottom: 96px;
@@ -49,76 +45,51 @@ html.dark {
     padding-bottom: 128px;
   }
 }
-
 @media screen and (min-width: 960px) {
   #VPContent.is-home.VPContent {
     padding-top: 0;
-
-    .VPHome {
-      min-height: 100vh;
-
-      .VPHero>.container {
-        padding-top: var(--vp-nav-height);
-      }
-    }
+  }
+  #VPContent.is-home.VPContent .VPHome {
+    min-height: 100vh;
+  }
+  #VPContent.is-home.VPContent .VPHome .VPHero > .container {
+    padding-top: var(--vp-nav-height);
   }
 }
-
 @media screen and (max-width: 959px) {
   .VPNav {
     background-color: var(--nav-bgc);
   }
 }
-
 .el-pagination {
   flex-wrap: wrap;
   justify-content: center;
 }
 
-// .el-pagination > * {
-//   margin-bottom: 10px !important;
-// }
-
 @media screen and (min-width: 768px) and (max-width: 1200px) {
-
   .VPNavBarMenuGroup .button span.text,
   .VPNavBarMenuLink {
     font-size: 12px !important;
   }
-
   .VPNavBar {
     height: auto !important;
   }
-
   .VPNavBarMenu.menu {
     flex-wrap: wrap;
   }
 }
-
 @media screen and (min-width: 960px) and (max-width: 1120px) {
   .VPContent.has-sidebar {
     margin-top: 60px !important;
   }
 }
-
-// sidebar
-// @media (min-width: 1440px) {
-//   aside.VPSidebar {
-//     // padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 16px)) / 2)) !important;
-//     // padding-right: 10px !important;
-//   }
-// }
-
-.VPDoc .content main {
-  img {
-    max-height: 300px;
-    margin: 0 auto;
-    cursor: pointer;
-  }
-
-  .vp-doc a {
-    word-break: break-all;
-  }
+.VPDoc .content main img {
+  max-height: 300px;
+  margin: 0 auto;
+  cursor: pointer;
+}
+.VPDoc .content main .vp-doc a {
+  word-break: break-all;
 }
 
 ::-webkit-scrollbar {
@@ -150,51 +121,45 @@ main .vp-doc a:hover {
   text-decoration: underline dotted;
 }
 
-// 自定义全局样式
-span.svg-icon {
-  svg {
-    width: 14px;
-    height: 14px;
-    margin-right: 4px;
-  }
+span.svg-icon svg {
+  width: 14px;
+  height: 14px;
+  margin-right: 4px;
 }
 
 .vp-doc ul.task-list {
   list-style: none;
   padding-left: 10px;
-
-  input[type="checkbox"] {
-    cursor: pointer;
-    position: relative;
-    width: 13px;
-    height: 13px;
-  }
-
-  input[type="checkbox"]::after {
-    position: absolute;
-    top: 0;
-    color: #000;
-    width: 13px;
-    height: 13px;
-    display: inline-block;
-    visibility: visible;
-    padding-left: 0px;
-    text-align: center;
-    content: " ";
-    border-radius: 3px;
-  }
-
-  input[type="checkbox"]:checked::after {
-    content: "✓";
-    color: #fff;
-    line-height: 14px;
-    font-size: 10px;
-    font-weight: bold;
-    background-color: var(--vp-c-brand-1);
-  }
+}
+.vp-doc ul.task-list input[type=checkbox] {
+  cursor: pointer;
+  position: relative;
+  width: 13px;
+  height: 13px;
+}
+.vp-doc ul.task-list input[type=checkbox]::after {
+  position: absolute;
+  top: 0;
+  color: #000;
+  width: 13px;
+  height: 13px;
+  display: inline-block;
+  visibility: visible;
+  padding-left: 0px;
+  text-align: center;
+  content: " ";
+  border-radius: 3px;
+}
+.vp-doc ul.task-list input[type=checkbox]:checked::after {
+  content: "✓";
+  color: #fff;
+  line-height: 14px;
+  font-size: 10px;
+  font-weight: bold;
+  background-color: var(--vp-c-brand-1);
 }
 
-.VPImage.logo{
+.VPImage.logo {
   width: 24px;
   height: 24px;
 }

package/src/utils/client/index.ts

@@ -174,3 +174,20 @@ export function wrapperCleanUrls(cleanUrls: boolean, route: string) {
 export function replaceValue(str: string, value: any) {
   return str.replace(/\{\{value\}\}/, value)
 }
+
+// https://github.com/mdit-vue/mdit-vue/blob/main/packages/shared/src/slugify.ts
+// eslint-disable-next-line no-control-regex
+const rControl = /[\u0000-\u001F]/g
+const rSpecial = /[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'“”‘’<>,.?/]+/g
+const rCombining = /[\u0300-\u036F]/g
+export function slugify(str: string) {
+  return str
+    .normalize('NFKD')
+    .replace(rCombining, '')
+    .replace(rControl, '')
+    .replace(rSpecial, '-')
+    .replace(/-{2,}/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .replace(/^(\d)/, '_$1')
+    .toLowerCase()
+}

package/src/utils/node/mdPlugins.ts

@@ -78,7 +78,7 @@ export function patchOptimizeDeps(config: any) {
     config.vite.optimizeDeps = {}
   }
   config.vite.optimizeDeps.exclude = ['vitepress-plugin-tabs', '@sugarat/theme']
-  config.vite.optimizeDeps.include = ['element-plus']
+  // config.vite.optimizeDeps.include = ['element-plus']
 }
 
 export function supportRunExtendsPlugin(config: UserConfig<Theme.Config>) {

package/src/utils/node/theme.ts

@@ -3,7 +3,7 @@ import path from 'node:path'
 import { getDefaultTitle, getFileLastModifyTime, getTextSummary, getVitePressPages, grayMatter, normalizePath, renderDynamicMarkdown } from '@sugarat/theme-shared'
 import type { SiteConfig } from 'vitepress'
 import type { Theme } from '../../composables/config/index'
-import { formatDate } from '../client'
+import { formatDate, shuffleArray } from '../client'
 import { getFirstImagURLFromMD } from './index'
 
 export function patchDefaultThemeSideBar(cfg?: Partial<Theme.BlogConfig>) {
@@ -147,5 +147,8 @@ export function patchVPThemeConfig(
 }
 
 export function checkConfig(cfg?: Partial<Theme.BlogConfig>) {
-  // 保留
+  const friendConfig = cfg?.friend
+  if (!Array.isArray(friendConfig) && friendConfig?.random) {
+    friendConfig.list = shuffleArray(friendConfig.list)
+  }
 }