docs: use ANSI snippet instead of an `vitepress-init.png` (#2875)

2 years ago · b0b3f5d46b
parent 1705c179df
commit b0b3f5d46b
2 changed files with 18 additions and 3 deletions
--- a/docs/guide/getting-started.md
+++ b/docs/guide/getting-started.md
@ -71,9 +71,24 @@ $ pnpm dlx vitepress init

 You will be greeted with a few simple questions:

-<p>
-  <img src="./vitepress-init.png" alt="vitepress init screenshot" style="border-radius:8px">
-</p>
+```ansi
+[0;98m┌[0m  [0;36;1m Welcome to VitePress![0m
+[0;98m│[0m
+[0;32m◇[0m  Where should VitePress initialize the config?
+[0;98m│[0m  [0;2m./docs[0m
+[0;98m│[0m
+[0;32m◇[0m  Site title:
+[0;98m│[0m  [0;2mMy Awesome Project[0m
+[0;98m│[0m
+[0;32m◇[0m  Site description:
+[0;98m│[0m  [0;2mA VitePress Site[0m
+[0;98m│[0m
+[0;36m◆[0m  Theme:
+[0;36m│[0m  [0;32m●[0m Default Theme [0;2m(Out of the box, good-looking docs)[0m
+[0;36m│[0m  [0;2m○[0m [0;2mDefault Theme + Customization[0m
+[0;36m│[0m  [0;2m○[0m [0;2mCustom Theme[0m
+[0;36m└
+```

 ::: tip Vue as Peer Dependency
 If you intend to perform customization that uses Vue components or APIs, you should also explicitly install `vue` as a peer dependency.
--- a/docs/guide/vitepress-init.png
+++ b/docs/guide/vitepress-init.png