update: optimize theme color scheme and waline style

.vscode/settings.json

@@ -101,6 +101,7 @@
     "unpic",
     "vite",
     "waline",
+    "walinejs",
     "weibo",
     "Посты",
     "себе",

pnpm-lock.yaml

@@ -1699,8 +1699,8 @@ packages:
     peerDependencies:
       eslint: '*'
 
-  eslint-plugin-antfu@3.1.0:
+  eslint-plugin-antfu@3.1.1:
-    resolution: {integrity: sha512-BKlJcpIG8OGyU5JwQCdyTGaLuRgItheEYinhNroCx3bcuz2bCSYK0eNzJvPy2TY8yyz0uSSRxr5KHuQ1WOdOKg==}
+    resolution: {integrity: sha512-7Q+NhwLfHJFvopI2HBZbSxWXngTwBLKxW1AGXLr2lEGxcEIK/AsDs8pn8fvIizl5aZjBbVbVK5ujmMpBe4Tvdg==}
     peerDependencies:
       eslint: '*'
 
@@ -3821,7 +3821,7 @@ snapshots:
       eslint-config-flat-gitignore: 2.1.0(eslint@9.21.0(jiti@2.4.2))
       eslint-flat-config-utils: 2.0.1
       eslint-merge-processors: 2.0.0(eslint@9.21.0(jiti@2.4.2))
-      eslint-plugin-antfu: 3.1.0(eslint@9.21.0(jiti@2.4.2))
+      eslint-plugin-antfu: 3.1.1(eslint@9.21.0(jiti@2.4.2))
       eslint-plugin-command: 3.1.0(eslint@9.21.0(jiti@2.4.2))
       eslint-plugin-import-x: 4.6.1(eslint@9.21.0(jiti@2.4.2))(typescript@5.8.2)
       eslint-plugin-jsdoc: 50.6.3(eslint@9.21.0(jiti@2.4.2))
@@ -5615,7 +5615,7 @@ snapshots:
     dependencies:
       eslint: 9.21.0(jiti@2.4.2)
 
-  eslint-plugin-antfu@3.1.0(eslint@9.21.0(jiti@2.4.2)):
+  eslint-plugin-antfu@3.1.1(eslint@9.21.0(jiti@2.4.2)):
     dependencies:
       eslint: 9.21.0(jiti@2.4.2)
 

src/components/Comments/Waline.astro

@@ -43,6 +43,7 @@ function initWaline() {
     requiredMeta: ['nick', 'mail'],
     highlighter: false,
     texRenderer: false,
+    noCopyright: true,
     reaction: [],
     ...walineConfig,
   })
@@ -53,12 +54,105 @@ document.addEventListener('astro:after-swap', initWaline)
 </script>
 
 <style is:global>
-#waline .wl-panel {
+#waline {
-  --at-apply: 'm-0 rounded-2';
+  .wl-panel {
-}
+    --at-apply: 'm-0 rounded-2';
-#waline .wl-editor::placeholder {
+  }
-  color: var(--waline-light-grey);
+  .wl-editor::placeholder {
-}
+    color: var(--waline-light-grey);
+  }
+  /* .wl-btn.primary {
+    border-color: var(--waline-light-grey);
+    color: var(--waline-color);
+    background: none;
+  } */
+  .wl-text-number {
+    display: none;
+  }
+  .wl-action[title="Markdown Guide"] {
+    display: none;
+  }
+  .wl-emoji-popup {
+    inset-inline-start: 0;
+    .wl-tab-wrapper {
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+  /* .wl-editor {
+    min-height: 6rem;
+  } */
+  /* .wl-card-item {
+    padding-left: 0;
+    padding-right: 0;
+  } */
+  .wl-meta-head {
+    padding-top: 0.75rem;
+    padding-bottom: 0.5rem;
+  }
+  .wl-sort {
+    display: none;
+  }
+  .wl-card {
+    border-bottom: none;
+  }
+  .wl-footer {
+    margin: 0.5rem;
+  }
+  /* .wl-comment {
+    margin-bottom: 2rem;
+  } */
+  .wl-header {
+    padding: 0;
+  }
+  /* .wl-nick,
+  .wl-mail,
+  .wl-link {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  } */
+  .wl-header.item3 {
+    border-bottom: none;
+  }
+  .wl-user {
+    margin-inline-end: 0.9rem;
+  }
+  .wl-like {
+    margin-right: 0.4rem;
+  }
+  .wl-content p {
+    line-height: 1.5rem;
+  }
+  /* .wl-power{
+    color: color-mix(in oklch, var(--waline-theme-color), transparent 40%);
+  }
+  a[href*="walinejs"] {
+    color: color-mix(in oklch, var(--waline-theme-color), transparent 40%);
+  } */
+  /* .wl-user-avatar {
+    color: var(--waline-light-grey);
+  } */
+  .wl-time {
+    color: color-mix(in oklch, var(--waline-theme-color), transparent 40%);
+  }
+  .wl-header-item {
+    border-bottom: 1px solid var(--waline-border-color);
+  }
+  .wl-header label {
+    font-size: 0.75rem;
+  }
+  .wl-header input {
+    font-size: 0.7rem;
+  }
+  .wl-editor {
+    min-height: 6rem;
+  }
+  .wl-nick {
+    margin-inline-end: 0.6rem;
+  }
 </style>
 
 <style
@@ -112,8 +206,7 @@ document.addEventListener('astro:after-swap', initWaline)
 
   /* 渲染选择 */
   --waline-border: 1px solid var(--waline-border-color);
-  --waline-avatar-radius: 50%;
+  --waline-avatar-radius: 20%;
-  --waline-box-shadow: none;
 }
 
 /* 暗色模式 */
@@ -158,7 +251,5 @@ html.dark #waline {
 
   /* 渲染选择 */
   --waline-border: 1px solid var(--waline-border-color);
-  --waline-avatar-radius: 50%;
-  --waline-box-shadow: none;
 }
 </style>

src/config.ts

@@ -17,19 +17,19 @@ export const themeConfig: ThemeConfig = {
     mode: 'light', // light, dark
     light: {
       // title color
-      primary: 'oklch(20% 0 0)',
+      primary: 'oklch(20% 0.02 60)',
       // text color
-      secondary: 'oklch(40% 0 0)',
+      secondary: 'oklch(40% 0.02 60)',
       // background color
-      background: 'oklch(95% 0.018 57)',
+      background: 'oklch(95% 0.02 60)',
       // code block theme
       codeTheme: 'github-light',
     },
     dark: {
       // title color
-      primary: 'oklch(80% 0 0)',
+      primary: 'oklch(90% 0 0)',
       // text color
-      secondary: 'oklch(70% 0 0)',
+      secondary: 'oklch(75% 0 0)',
       // background color
       background: 'oklch(20% 0 0)',
       // code block theme

src/layouts/Layout.astro

@@ -24,6 +24,10 @@ interface Props {
 const { postTitle, postDescription, postImage } = Astro.props
 const { isHome, isPost } = getPagePath(Astro.url.pathname)
 const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'font-sans'
+
+const footerMarginClass = isPost && themeConfig.comment?.waline?.serverURL
+  ? 'mt-8'
+  : 'mt-12'
 ---
 
 <html
@@ -50,7 +54,7 @@ const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'fon
       <main class="col-start-1 row-start-1">
         <slot />
       </main>
-      <Footer class="mt-13 block lg:hidden" />
+      <Footer class={`block lg:hidden ${footerMarginClass}`} />
     </div>
 
     <!--  fix position issue on ios   -->

src/pages/posts/[slug].astro

@@ -25,7 +25,7 @@ const { Content, remarkPluginFrontmatter } = await post.render()
   postDescription={post.data.description}
   postImage={post.data.image}
 >
-  <article class="heti mb-16">
+  <article class="heti mb-15">
     <h1 class="post-title">
       <span
         transition:name={`post-${post.data.slug || post.slug}`}