Add some fixes

Closes #112
Closes #116

Author: dragomano

docs/.vitepress/theme/components/landing/3. frameworks-section/FrameworkCard.vue

@@ -56,6 +56,7 @@ const props = withDefaults(defineProps<Props>(), {
       v-if="props.framework.logo"
       :src="props.framework.logo"
       :alt="props.framework.name"
+      loading="lazy"
     />
   </component>
 </template>

docs/.vitepress/theme/components/landing/4. community-section/CommunityCard.vue

@@ -36,6 +36,7 @@ defineProps<{
         :src="testimonial.avatar"
         :alt="testimonial.name"
         class="card__avatar"
+        loading="lazy"
       />
       <div class="card__meta">
         <span class="card__name">

docs/.vitepress/theme/components/landing/4. community-section/CommunitySection.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import CommunityCard, { Testimonial } from './CommunityCard.vue'
-import placeholderAvatar from '/images/community/placeholder.jpg'
 
 const testimonials: Testimonial[] = [
   {
@@ -52,7 +51,7 @@ const testimonials: Testimonial[] = [
     name: 'Дэвид Кремер',
     handle: '@zeeg',
     avatar:
-      'https://pbs.twimg.com/profile_images/1706891973553168384/zdAPOznc_400x400.jpg',
+      'https://pbs.twimg.com/profile_images/1911613315765133312/HVkULegC_400x400.jpg',
     comment: ['Vite стал настоящей революцией для индустрии.'],
   },
   {
@@ -68,7 +67,7 @@ const testimonials: Testimonial[] = [
     name: 'Кристоф Наказава',
     handle: '@cpojer',
     avatar:
-      'https://pbs.twimg.com/profile_images/1854151427595407360/4GyUCgEH_400x400.jpg',
+      'https://pbs.twimg.com/profile_images/1910252462126313472/gXgT-jxL_400x400.jpg',
     comment: ['Vite собирается покорить (JavaScript) мир.'],
   },
   {

docs/.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue

@@ -45,6 +45,7 @@ const { data } = useSponsor()
       alt="Vite is made possible by our contributors, partner companies, and sponsors"
       width="58"
       height="55"
+      loading="lazy"
     />
     <h2>Бесплатно и с открытым исходным кодом</h2>
     <h4>
@@ -54,7 +55,7 @@ const { data } = useSponsor()
     <h4>Представлено вам</h4>
     <div class="voidzero">
       <a :href="voidZero.url" target="_blank">
-        <img :src="voidZero.img" />
+        <img :src="voidZero.img" alt="Логотип VoidZero" loading="lazy" />
       </a>
     </div>
 

docs/.vitepress/theme/styles/landing.css

@@ -4,17 +4,11 @@
 
 html:has(.landing) {
   --vp-c-bg: #101010;
-
   background-color: #101010;
-
-  body {
-    background-color: #101010;
-  }
 }
 
 .landing {
   overflow-x: hidden;
-  background-color: #101010;
 
   * {
     -webkit-font-smoothing: antialiased !important;
@@ -64,7 +58,7 @@ html:has(.landing) {
     display: none;
   }
 
-  .VPMenu .translations + .group {
+  .VPMenu .translations+.group {
     display: none;
   }
 
@@ -85,11 +79,9 @@ html:has(.landing) {
     font-family: 'Manrope', sans-serif;
     font-style: normal;
     font-weight: 600;
-    background: linear-gradient(
-      180deg,
-      #fff 0%,
-      rgba(255, 255, 255, 0.31) 100%
-    );
+    background: linear-gradient(180deg,
+        #fff 0%,
+        rgba(255, 255, 255, 0.31) 100%);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -110,7 +102,8 @@ html:has(.landing) {
     @media (min-width: 1025px) {
       font-size: 72px;
       letter-spacing: -1.44px;
-      padding-bottom: 8px; /* Fix for hanging descender on "g" in "tooling" */
+      padding-bottom: 8px;
+      /* Fix for hanging descender on "g" in "tooling" */
     }
   }
 
@@ -176,39 +169,27 @@ html:has(.landing) {
 
     &.btn--primary {
       position: relative;
-      background: radial-gradient(
-          141.42% 141.42% at 100% 0%,
+      background: radial-gradient(141.42% 141.42% at 100% 0%,
           rgba(255, 255, 255, 0.4) 0%,
-          rgba(255, 255, 255, 0) 100%
-        ),
-        radial-gradient(
-          140.35% 140.35% at 100% 94.74%,
+          rgba(255, 255, 255, 0) 100%),
+        radial-gradient(140.35% 140.35% at 100% 94.74%,
           #bd34fe 0%,
-          rgba(189, 52, 254, 0) 100%
-        ),
-        radial-gradient(
-          89.94% 89.94% at 18.42% 15.79%,
+          rgba(189, 52, 254, 0) 100%),
+        radial-gradient(89.94% 89.94% at 18.42% 15.79%,
           #41d1ff 0%,
-          rgba(65, 209, 255, 0) 100%
-        );
+          rgba(65, 209, 255, 0) 100%);
       box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.75) inset;
 
       &:hover {
-        background: radial-gradient(
-            141.42% 141.42% at 100% 0%,
+        background: radial-gradient(141.42% 141.42% at 100% 0%,
             rgba(255, 255, 255, 0.5) 0%,
-            rgba(255, 255, 255, 0) 100%
-          ),
-          radial-gradient(
-            140.35% 140.35% at 100% 94.74%,
+            rgba(255, 255, 255, 0) 100%),
+          radial-gradient(140.35% 140.35% at 100% 94.74%,
             #bd34fe 0%,
-            rgba(189, 52, 254, 0) 100%
-          ),
-          radial-gradient(
-            89.94% 89.94% at 18.42% 15.79%,
+            rgba(189, 52, 254, 0) 100%),
+          radial-gradient(89.94% 89.94% at 18.42% 15.79%,
             #41d1ff 0%,
-            rgba(65, 209, 255, 0) 100%
-          );
+            rgba(65, 209, 255, 0) 100%);
         box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.8) inset;
       }
     }
@@ -225,4 +206,4 @@ html:has(.landing) {
       border-radius: 100px;
     }
   }
-}
+}

docs/guide/index.md

@@ -6,7 +6,7 @@
 
 ## Введение {#overview}
 
-Vite (французское слово, означающее «быстрый», произносится `/vit/`<button style="border:none;padding:3px;border-radius:4px;vertical-align:bottom" id="play-vite-audio" onclick="document.getElementById('vite-audio').play();"><svg style="height:2em;width:2em"><use href="/voice.svg?no-inline#voice" /></svg ></button>, как «вит») — это инструмент сборки, цель которого — обеспечить более быструю и удобную разработку современных веб-проектов. Он состоит из двух основных частей:
+Vite (французское слово, означающее «быстрый», произносится `/vit/`<button style="border:none;padding:3px;border-radius:4px;vertical-align:bottom" id="play-vite-audio" aria-label="pronounce" onclick="document.getElementById('vite-audio').play();"><svg style="height:2em;width:2em"><use href="/voice.svg?no-inline#voice" /></svg ></button>, как «вит») — это инструмент сборки, цель которого — обеспечить более быструю и удобную разработку современных веб-проектов. Он состоит из двух основных частей:
 
 - Сервер разработки, обеспечивающий [расширенные возможности](./features) по сравнению со [встроенными ES-модулями](https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Modules), например, чрезвычайно быструю [горячую замену модулей (HMR)](./features#hot-module-replacement).
 

docs/index.md

@@ -1,6 +1,8 @@
 ---
 title: Vite
 titleTemplate: Инструментарий для фронтенда нового поколения
+# add `dark` here to apply dark mode on initial load,
+# since `onMounted` doesn't run during SSR
 pageClass: landing dark
 
 layout: home
@@ -10,6 +12,9 @@ markdownStyles: false
 ---
 
 <script setup>
+import { useData } from 'vitepress'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
 import Hero from '.vitepress/theme/components/landing/1. hero-section/HeroSection.vue'
 import FeatureSection from './.vitepress/theme/components/landing/2. feature-section/FeatureSection.vue'
 import FrameworksSection from './.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue'
@@ -24,6 +29,16 @@ import FeatureFlexiblePlugins from './.vitepress/theme/components/landing/2. fea
 import FeatureTypedAPI from './.vitepress/theme/components/landing/2. feature-section/FeatureTypedAPI.vue'
 import FeatureSSRSupport from './.vitepress/theme/components/landing/2. feature-section/FeatureSSRSupport.vue'
 import FeatureCI from './.vitepress/theme/components/landing/2. feature-section/FeatureCI.vue'
+
+const { isDark } = useData()
+
+onMounted(() => {
+  document.documentElement.classList.add('dark')
+})
+
+onBeforeUnmount(() => {
+  document.documentElement.classList.toggle('dark', isDark.value)
+})
 </script>
 
 <div class="VPHome">