docs(site): update aside style

.commitlintrc.cjs

@@ -46,6 +46,6 @@ module.exports = {
     aiDiffIgnore: [ 'pnpm-lock.yaml', 'docs/public' ],
     customIssuePrefixAlign: !issue ? 'top' : 'bottom',
     defaultIssues: !issue ? '' : `#${issue}`,
-    formatMessageCB: ({ defaultMessage }) => defaultMessage + coAuthoredBy,
+    // formatMessageCB: ({ defaultMessage }) => defaultMessage + coAuthoredBy,
   },
 }

docs/.vitepress/build/plugins/pwa.ts

@@ -19,7 +19,7 @@ export const pwa: Partial<VitePWAOptions> = {
   outDir: '.vitepress/dist',
   registerType: 'autoUpdate',
   // include all static assets under public/
-  includeAssets: fg.sync('**/*.{png,svg,gif,ico,txt}', { cwd: resolve(__dirname, '../../../public') }),
+  includeAssets: fg.sync('**/*.{png,webp,svg,gif,ico,txt}', { cwd: resolve(__dirname, '../../../public') }),
   manifest: {
     id: '/',
     name,

docs/.vitepress/components.d.ts

@@ -9,6 +9,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AdsASide: typeof import('./theme/components/AdsASide.vue')['default']
     Badge: typeof import('./theme/components/Badge.vue')['default']
     CodeGroupItem: typeof import('./theme/components/CodeGroupItem.vue')['default']
     HomePage: typeof import('./theme/components/HomePage.vue')['default']

docs/.vitepress/theme/components/AdsASide.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+// @ts-expect-error
+import { useLangs } from 'vitepress/dist/client/theme-default/composables/langs'
+
+const { currentLang } = useLangs({ correspondingLink: true })
+</script>
+
+<template>
+  <div class="w-250px rd bg-$vp-carbon-ads-bg-color">
+    <a v-if="currentLang.label === 'English'" class="p-2 flex items-center justify-center" href="https://www.siteground.com/index.htm?afcode=15ef80d558a8f791784686f35c96efcd" target="_blank">
+      <img src="/images/250x250-en.webp" width="230" height="230" alt="Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.">
+    </a>
+    <a v-else class="p-2 flex items-center justify-center" href="https://my.laoxuehost.com/aff.php?aff=11895" target="_blank">
+      <img src="/images/250x250-cn.webp" width="230" height="230" alt="广告 - 一键建站，香港云主机，一年59元起，75折专属推荐码 qbbsh。点击了解更多">
+    </a>
+  </div>
+</template>

docs/.vitepress/theme/index.ts

@@ -8,6 +8,7 @@ import 'uno.css'
 import { createMediumZoomProvider } from './components/composables'
 import Badge from './components/Badge.vue'
 import HomePage from './components/HomePage.vue'
+import AdsASide from './components/AdsASide.vue'
 import CodeGroupItem from './components/CodeGroupItem.vue'
 import { CodeGroup } from './components/CodeGroup'
 
@@ -19,6 +20,7 @@ export default {
   Layout() {
     return h(Theme.Layout, null, {
       'home-features-after': () => h(HomePage),
+      'aside-bottom': () => h(AdsASide),
     })
   },
   enhanceApp({ app, router }: EnhanceAppContext) {

docs/.vitepress/theme/style/main.css

@@ -368,3 +368,26 @@ img.error::after {
   text-align: center;
   color: var(--vp-c-text-2);
 }
+
+.VPDoc.has-aside .content .content-container {
+  max-width: 720px;
+}
+
+@media (min-width: 960px) {
+  .VPDoc .aside+.content,
+  .VPDoc > .content {
+    padding: 0 32px 128px;
+  }
+}
+
+.VPDoc .aside-curtain {
+  background: transparent;
+}
+
+.VPDoc .aside .aside-container {
+  width: var(--vp-sidebar-width);
+}
+
+.VPDoc .aside {
+  max-width: var(--vp-sidebar-width);
+}

docs/.vitepress/theme/style/vars.css

@@ -5,6 +5,7 @@
 :root {
   --vp-font-family-mono: Menlo, "Noto Sans Mono", ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --vp-layout-max-width: 1490px;
+  --vp-sidebar-width: 280px;
   --vp-c-accent: rgb(218, 180, 11);
   --vp-c-brand: #eb5c5c;
   --vp-c-brand-light: #fe7a7a;