docs: convert png diagrams to svg (#9208)

vitejs · Jul 21, 2022 · 6adb906 · 6adb906
1 parent fa97bf3
commit 6adb906
Show file tree

Hide file tree

Showing 11 changed files with 140 additions and 4 deletions.
diff --git a/docs/.vitepress/theme/components/SvgImage.vue b/docs/.vitepress/theme/components/SvgImage.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{ svg: string }>()
+</script>
+
+<template>
+  <figure class="svg-image-root" v-html="svg" />
+</template>
+
+<style>
+.svg-image-root {
+  background-color: #eee;
+  border-radius: 8px;
+  padding: 1ch;
+  margin: 1ch 0;
+}
+html.dark .svg-image-root {
+  background-color: #313641;
+}
+.svg-image-root svg text {
+  font-family: var(--vp-font-family-base);
+}
+</style>
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -3,6 +3,7 @@ import Theme from 'vitepress/theme'
 import './styles/vars.css'
 import HomeSponsors from './components/HomeSponsors.vue'
 import AsideSponsors from './components/AsideSponsors.vue'
+import SvgImage from './components/SvgImage.vue'
 
 export default {
   ...Theme,
@@ -11,5 +12,8 @@ export default {
       'home-features-after': () => h(HomeSponsors),
       'aside-ads-before': () => h(AsideSponsors)
     })
+  },
+  enhanceApp({ app }) {
+    app.component('SvgImage', SvgImage)
   }
 }
diff --git a/docs/guide/features.md b/docs/guide/features.md
@@ -538,7 +538,10 @@ Vite automatically generates `<link rel="modulepreload">` directives for entry c
 
 In real world applications, Rollup often generates "common" chunks - code that is shared between two or more other chunks. Combined with dynamic imports, it is quite common to have the following scenario:
 
-![graph](/images/graph.png)
+<script setup>
+import graphSvg from '../images/graph.svg?raw'
+</script>
+<svg-image :svg="graphSvg" />
 
 In the non-optimized scenarios, when async chunk `A` is imported, the browser will have to request and parse `A` before it can figure out that it also needs the common chunk `C`. This results in an extra network roundtrip:
 

diff --git a/docs/guide/why.md b/docs/guide/why.md
@@ -24,9 +24,12 @@ Vite improves the dev server start time by first dividing the modules in an appl
 
   Vite serves source code over [native ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). This is essentially letting the browser take over part of the job of a bundler: Vite only needs to transform and serve source code on demand, as the browser requests it. Code behind conditional dynamic imports is only processed if actually used on the current screen.
 
-  ![bundler based dev server](/images/bundler.png)
-
-  ![esm based dev server](/images/esm.png)
+<script setup>
+import bundlerSvg from '../images/bundler.svg?raw'
+import esmSvg from '../images/esm.svg?raw'
+</script>
+<svg-image :svg="bundlerSvg" />
+<svg-image :svg="esmSvg" />
 
 ### Slow Updates
 

diff --git a/docs/images/bundler.png b/docs/images/bundler.png
diff --git a/docs/images/bundler.svg b/docs/images/bundler.svg
diff --git a/docs/images/diagrams.fig b/docs/images/diagrams.fig
diff --git a/docs/images/esm.png b/docs/images/esm.png
diff --git a/docs/images/esm.svg b/docs/images/esm.svg
diff --git a/docs/images/graph.png b/docs/images/graph.png
diff --git a/docs/images/graph.svg b/docs/images/graph.svg