Sync #50f3f20a

.vitepress/config.ts

@@ -49,7 +49,7 @@ const nav: ThemeConfig['nav'] = [
  { text: 'UI 组件', link: 'https://ui-libs.vercel.app/' },
  {
  text: '证书',
- link: 'https://certification.vuejs.org/?ref=vuejs-nav'
+ link: 'https://certificates.dev/vuejs/?ref=vuejs-nav'
  },
  { text: '找工作', link: 'https://vuejobs.com/?ref=vuejs' },
  { text: 'T-Shirt 商店', link: 'https://vue.threadless.com/' }
@@ -113,6 +113,7 @@ const nav: ThemeConfig['nav'] = [
  link: '/about/community-guide'
  },
  { text: '行为规范', link: '/about/coc' },
+ { text: '隐私政策', link: '/about/privacy' },
  {
  text: '纪录片',
  link: 'https://www.youtube.com/watch?v=OrxmtDw4pVI'
@@ -634,6 +635,14 @@ export default defineConfigWithTheme<ThemeConfig>({
  'utf-8'
  )
  ],
+ [
+ 'script',
+ {},
+ fs.readFileSync(
+ path.resolve(__dirname, './inlined-scripts/uwu.js'),
+ 'utf-8'
+ )
+ ],
  [
  'script',
  {

.vitepress/inlined-scripts/uwu.js

@@ -0,0 +1,3 @@
+if (location.search.includes('?uwu')) {
+ document.documentElement.classList.add('uwu')
+}

.vitepress/theme/components/Home.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import SiteMap from './SiteMap.vue'
 // import NewsLetter from './NewsLetter.vue'
 import { load, data, base } from './sponsors'
@@ -8,13 +8,12 @@ import SponsorsGroup from './SponsorsGroup.vue'
 // https://github.com/vuejs-translations/docs-zh-cn/issues/177
 // import VueMasteryModal from './VueMasteryModal.vue'
 
-onMounted(async () => {
- await load()
-})
+onMounted(load)
 </script>
 
 <template>
  <section id="hero">
+ <img id="uwu" alt="Vue.js Kawaii Logo by @icarusgkx" />
  <h1 class="tagline">
  <span class="accent">渐进式</span>
  <br />JavaScript 框架
@@ -356,4 +355,23 @@ html:not(.dark) .accent,
  font-size: 36px;
  }
 }
+
+#uwu {
+ display: none;
+}
+
+.uwu #uwu {
+ display: block;
+ width: 100%;
+ max-width: 720px;
+ margin: -120px auto -20px;
+ aspect-ratio: 192 / 108;
+ content: url(/logo-uwu.png);
+}
+
+@media (max-width: 576px) {
+ .uwu #uwu {
+ margin: -60px auto -10px;
+ }
+}
 </style>

.vitepress/theme/components/VueMasteryBanner.vue

@@ -0,0 +1,283 @@
+<template>
+ <div class="vuemastery-banner-wrapper" role="banner" v-if="isVisible">
+ <div
+ :class="{ 'show-flash': showFlash }"
+ class="vuemastery-background-dim"
+ ref="vuemastery-banner-flash"
+ ></div>
+ <a
+ id="vm-banner"
+ href="https://www.vuemastery.com/free-weekend"
+ target="_blank"
+ >
+ <img
+ id="vm-logo-full"
+ src="/vuemastery/vuemastery-white.svg"
+ alt="vuemastery"
+ />
+ <img
+ id="vm-logo-small"
+ src="https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2Fvue-mastery-logo-small.png?alt=media&token=941fcc3a-2b6f-40e9-b4c8-56b3890da108"
+ alt="vuemastery"
+ />
+ <div class="vm-banner-wrapper">
+ <div class="vm-banner-content">
+ <h1 class="vm-banner-title">
+ FREE WEEKEND <span>MAY 10-12</span>
+ </h1>
+ <p class="vm-banner-sub">Watch all Vue Mastery courses free</p>
+ </div>
+ <button id="vm-banner-cta">Get Access</button>
+ </div>
+ <button id="vm-banner-close" @click.prevent="closeBanner">
+ <VTIconPlus class="close" />
+ </button>
+ </a>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { VTIconPlus } from '@vue/theme'
+
+const isVisible = ref<Boolean>(true)
+const showFlash = ref<Boolean>(false)
+const nameStorage = 'VUEMASTERY-BANNER-FREE_WEEKEND-MAY-10-12-2024'
+
+const closeBanner = () => {
+ // Hide the banner
+ isVisible.value = false
+ // Save action in the local storage
+ localStorage.setItem(nameStorage, String(true))
+ document.documentElement.classList.remove('vuemastery-menu-fixed')
+}
+
+onMounted(() => {
+ isVisible.value = !localStorage.getItem(nameStorage)
+ if (isVisible.value) {
+ document.documentElement.classList.add('vuemastery-menu-fixed')
+ setTimeout(() => {
+ showFlash.value = true
+ }, 2000)
+ }
+})
+</script>
+<style scoped>
+.vuemastery-banner-wrapper {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 61;
+ width: 100%;
+ height: 100%;
+ max-height: 70px;
+ background: linear-gradient(45deg, #0a2b4e, #835ec2);
+ background-size: 110%;
+ background-position: 50% 50%;
+ overflow: hidden;
+ padding: 12px;
+ margin: 0;
+ transition: background-size 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+
+.vuemastery-banner-wrapper:hover {
+ background-size: 100%;
+}
+
+.vuemastery-banner-wrapper:before {
+ content: '';
+ background: url(/vuemastery/background-bubbles-vuemastery.svg) left
+ center no-repeat;
+ background-size: cover;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ transition: all 0.3s ease-out 0.1s;
+ transform: scale(1.1);
+ width: 100%;
+ height: 100%;
+}
+.vuemastery-banner-wrapper:after {
+ content: '';
+ background: url(/vuemastery/lock-vuemastery.svg) right center no-repeat;
+ background-size: auto 100%;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ pointer-events: none;
+}
+
+.vuemastery-banner-wrapper:hover:after {
+ background-image: url(/vuemastery/unlock-vuemastery.svg);
+}
+
+#vm-banner {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ text-decoration: none;
+ color: white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ overflow: hidden;
+}
+
+#vm-logo-full {
+ position: absolute;
+ left: 15px;
+ width: 120px;
+}
+
+#vm-logo-small {
+ display: none;
+}
+
+.vm-banner-wrapper {
+ display: flex;
+ align-items: center;
+}
+
+.vm-banner-content {
+ display: flex;
+}
+
+.vm-banner-title {
+ margin: 0;
+ padding: 0;
+ font-weight: bold;
+ font-size: 24px;
+ text-align: center;
+ background: linear-gradient(145deg, #c3ffac, #86ec87, #38a56a);
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.vm-banner-sub {
+ margin: 0 2em;
+ padding: 0;
+ font-size: 16px;
+ text-align: center;
+ color: #fff;
+}
+
+#vm-banner-cta {
+ position: relative;
+ margin-left: 10px;
+ padding: 10px 24px;
+ background: linear-gradient(to top right, #41b782, #86d169);
+ border: none;
+ border-radius: 30px;
+ color: #fff;
+ font-size: 12px;
+ font-weight: bold;
+ text-decoration: none;
+ text-transform: uppercase;
+}
+
+#vm-banner-cta:hover {
+ background: linear-gradient(to bottom right, #41b782, #86d169);
+}
+
+#vm-banner-close {
+ position: absolute;
+ right: 12px;
+ color: #fff;
+ font-size: 20px;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+#vm-banner-close > .close {
+ width: 20px;
+ height: 20px;
+ fill: #fff;
+ transform: rotate(45deg);
+}
+
+@media (max-width: 1200px) {
+ #vm-banner-cta {
+ display: none;
+ }
+
+ .vm-banner-content {
+ flex-direction: column;
+ }
+
+ .vm-banner-sub {
+ margin: 0 1em;
+ }
+}
+
+@media (max-width: 850px) {
+ .vuemastery-banner-wrapper:after {
+ background: none;
+ }
+}
+@media (max-width: 767px) {
+ #vm-logo-full {
+ left: 10px;
+ width: 100px;
+ }
+}
+@media (max-width: 767px) {
+ #vm-logo-full {
+ display: none;
+ }
+ #vm-logo-small {
+ position: absolute;
+ display: block;
+ left: 10px;
+ width: 40px;
+ }
+ .vm-banner-title {
+ font-size: 14px;
+ }
+ .vm-banner-sub {
+ font-size: 12px;
+ margin: 0;
+ }
+}
+
+.vuemastery-background-dim {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+}
+.vuemastery-background-dim:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 90deg,
+ transparent,
+ rgba(255, 255, 255, 0.4),
+ transparent
+ );
+ transition: 0.5s;
+ transition-delay: 0.5s;
+}
+.vuemastery-background-dim.show-flash:after {
+ left: 100%;
+}
+</style>
+
+<style>
+html.vuemastery-menu-fixed {
+ --vt-banner-height: 70px;
+}
+</style>

.vitepress/theme/index.ts

@@ -13,11 +13,12 @@ import SponsorsAside from './components/SponsorsAside.vue'
 import WwAds from './components/WwAds.vue'
 // import TextAd from './components/TextAd.vue'
 
+
 export default Object.assign({}, VPTheme, {
  Layout: () => {
  // @ts-ignore
  return h(VPTheme.Layout, null, {
- // banner: () => h(Banner),
+ // banner: () => h(VueMasteryBanner),
  'sidebar-top': () => h(PreferenceSwitch),
  'aside-mid': () => h(SponsorsAside),
  'aside-bottom': () => h(WwAds),

.vitepress/theme/styles/inline-demo.css

@@ -12,8 +12,8 @@
  border: 2px solid var(--vt-c-green);
  margin-right: 8px;
  margin-left: 4px;
- line-height: 15px;
- padding-left: 4.5px;
+ line-height: 16px;
+ padding-left: 4.2px;
  font-size: 11px;
 }