style: format code with prettier

docs/config/algolia-search.md

@@ -4,7 +4,7 @@ The `themeConfig.algolia` option allows you to use [Algolia DocSearch](https://d
 
 ```js
 module.exports = {
-  themeConfig:{
+  themeConfig: {
     algolia: {
       apiKey: 'your_api_key',
       indexName: 'index_name'

docs/config/homepage.md

@@ -12,12 +12,13 @@ tagline: Hero subtitle
 actionText: Get Started
 actionLink: /guide/
 features:
-- title: Simplicity First
-  details: Minimal setup with markdown-centered project structure helps you focus on writing.
-- title: Vue-Powered
-  details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
-- title: Performant
-  details: VitePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
+  - title: Simplicity First
+    details: Minimal setup with markdown-centered project structure helps you focus on writing.
+  - title: Vue-Powered
+    details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
+  - title: Performant
+    details: VitePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
 footer: MIT Licensed | Copyright © 2019-present Evan You
 ---
+
 ```

docs/guide/assets.md

@@ -29,7 +29,7 @@ If your site is deployed to a non-root URL, you will need to set the `base` opti
 With a base URL, to reference an image in `public`, you'd have to use URLs like `/bar/image.png`. But this is brittle if you ever decide to change the base. To help with that, VitePress provides a built-in helper `$withBase` (injected onto Vue's prototype) that generates the correct path:
 
 ```html
-<img :src="$withBase('/foo.png')" alt="foo">
+<img :src="$withBase('/foo.png')" alt="foo" />
 ```
 
 Note you can use the above syntax not only in theme components, but in your Markdown files as well.

docs/guide/configuration.md

@@ -9,7 +9,7 @@ Without any configuration, the page is pretty minimal, and the user has no way t
 │  │  └─ config.js
 │  └─ index.md
 └─ package.json
-````
+```
 
 The essential file for configuring a VitePress site is `.vitepress/config.js`, which should export a JavaScript object:
 

docs/guide/customization.md

@@ -11,15 +11,15 @@ You can develop your custom theme by adding the `.vitepress/theme/index.js` file
 │  │  └─ config.js
 │  └─ index.md
 └─ package.json
-````
+```
 
 In `.vitepress/theme/index.js`, you must export theme object and register your own theme layout. Let's say you have your own `Layout` component like this.
 
 ```vue
 <!-- .vitepress/theme/Layout.vue -->
 <template>
   <h1>Custom Layout!</h1>
-  <Content/><!-- make sure to include markdown outlet -->
+  <Content /><!-- make sure to include markdown outlet -->
 </template>
 ```
 

docs/guide/deploy.md

@@ -128,9 +128,9 @@ deploy:
 
 1. Set the correct `base` in `docs/.vitepress/config.js`.
 
-    If you are deploying to `https://<USERNAME or GROUP>.gitlab.io/`, you can omit `base` as it defaults to `'/'`.
+   If you are deploying to `https://<USERNAME or GROUP>.gitlab.io/`, you can omit `base` as it defaults to `'/'`.
 
-    If you are deploying to `https://<USERNAME or GROUP>.gitlab.io/<REPO>/`, for example your repository is at `https://gitlab.com/<USERNAME>/<REPO>`, then set `base` to `'/<REPO>/'`.
+   If you are deploying to `https://<USERNAME or GROUP>.gitlab.io/<REPO>/`, for example your repository is at `https://gitlab.com/<USERNAME>/<REPO>`, then set `base` to `'/<REPO>/'`.
 
 2. Set `dest` in `.vitepress/config.js` to `public`.
 
@@ -167,26 +167,26 @@ pages:
 
 2. Create `firebase.json` and `.firebaserc` at the root of your project with the following content:
 
- `firebase.json`:
+`firebase.json`:
 
-  ```json
-  {
-    "hosting": {
-      "public": "./docs/.vitepress/dist",
-      "ignore": []
-    }
+```json
+{
+  "hosting": {
+    "public": "./docs/.vitepress/dist",
+    "ignore": []
   }
-  ```
+}
+```
 
-  `.firebaserc`:
+`.firebaserc`:
 
-  ```js
-  {
-   "projects": {
-     "default": "<YOUR_FIREBASE_ID>"
-   }
-  }
-  ```
+```js
+{
+ "projects": {
+   "default": "<YOUR_FIREBASE_ID>"
+ }
+}
+```
 
 3. After running `yarn docs:build` or `npm run docs:build`, deploy using the command `firebase deploy`.
 

docs/guide/frontmatter.md

@@ -63,6 +63,7 @@ head:
     - name: keywords
       content: super duper SEO
 ---
+
 ```
 
 ### navbar

docs/guide/global-computed.md

@@ -85,5 +85,5 @@ The content value of the `<meta name= "description" content= "...">` for the cur
 Helper method to generate correct path by prepending the `base` path configured in `.vitepress/config.js`. It's useful when you want to link to [public files with base path](./assets#public-files).
 
 ```html
-<img :src="$withBase('/foo.png')" alt="foo">
+<img :src="$withBase('/foo.png')" alt="foo" />
 ```

docs/guide/markdown.md

@@ -56,6 +56,7 @@ Outbound links automatically get `target="_blank" rel="noopener noreferrer"`:
 title: Blogging Like a Hacker
 lang: en-US
 ---
+
 ```
 
 This data will be available to the rest of the page, along with all custom and theming components.
@@ -202,9 +203,7 @@ export default {
 
 ```html
 <ul>
-  <li v-for="todo in todos" :key="todo.id">
-    {{ todo.text }}
-  </li>
+  <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
 </ul>
 ```
 

docs/index.md

@@ -24,7 +24,7 @@ There're couple of things that are improved from VuePress....
 
 ### It Uses Vue 3
 
-Leverages Vue 3's improved template static analysis to stringify static content as much as possible. Static content is sent as string literals instead of JavaScript render function code – the JS payload is therefore *much* cheaper to parse, and hydration also becomes faster.
+Leverages Vue 3's improved template static analysis to stringify static content as much as possible. Static content is sent as string literals instead of JavaScript render function code – the JS payload is therefore _much_ cheaper to parse, and hydration also becomes faster.
 
 Note the optimization is applied while still allowing the user to freely mix Vue components inside markdown content – the compiler does the static/dynamic separation for you automatically and you never need to think about it.
 

examples/minimal/index.md

@@ -6,7 +6,7 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
 
 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, [link to Vue.js](https://vuejs.org) quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
-Ut enim ad minim veniam, **strong opinion** quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur *and emphasize* adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Ut enim ad minim veniam, **strong opinion** quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur _and emphasize_ adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
 ## Lists
 
@@ -21,10 +21,10 @@ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
 1. Ordered item 1
-  1. Nested ordered item A
-  2. Nested ordered item A
-2. Ordered item 2
-3. Ordered item 3
+1. Nested ordered item A
+1. Nested ordered item A
+1. Ordered item 2
+1. Ordered item 3
 
 ## Code Block and Block Quote
 

src/client/app/components/Debug.vue

@@ -34,12 +34,12 @@ watch(open, (value) => {
   color: #eeeeee;
   overflow: hidden;
   cursor: pointer;
-  background-color: rgba(0, 0, 0, .85);
-  transition: all .15s ease;
+  background-color: rgba(0, 0, 0, 0.85);
+  transition: all 0.15s ease;
 }
 
 .debug:hover {
-  background-color: rgba(0, 0, 0, .75);
+  background-color: rgba(0, 0, 0, 0.75);
 }
 
 .debug.open {
@@ -60,7 +60,7 @@ watch(open, (value) => {
 }
 
 .debug.open:hover {
-  background-color: rgba(0, 0, 0, .85);
+  background-color: rgba(0, 0, 0, 0.85);
 }
 
 .title {
@@ -72,13 +72,13 @@ watch(open, (value) => {
 
 .block {
   margin: 2px 0 0;
-  border-top: 1px solid rgba(255, 255, 255, .16);
+  border-top: 1px solid rgba(255, 255, 255, 0.16);
   padding: 8px 16px;
   font-family: Hack, monospace;
   font-size: 13px;
 }
 
-.block +.block {
+.block + .block {
   margin-top: 8px;
 }
 </style>

src/client/theme-default/Layout.vue

@@ -86,15 +86,15 @@ const Home = defineAsyncComponent(() => import('./components/Home.vue'))
 
 const NoopComponent = () => null
 
-const CarbonAds = __CARBON__ ? defineAsyncComponent(
-  () => import('./components/CarbonAds.vue')
-) : NoopComponent
-const BuySellAds = __BSA__ ? defineAsyncComponent(
-  () => import('./components/BuySellAds.vue')
-) : NoopComponent
-const AlgoliaSearchBox = __ALGOLIA__ ? defineAsyncComponent(
-  () => import('./components/AlgoliaSearchBox.vue')
-) : NoopComponent
+const CarbonAds = __CARBON__
+  ? defineAsyncComponent(() => import('./components/CarbonAds.vue'))
+  : NoopComponent
+const BuySellAds = __BSA__
+  ? defineAsyncComponent(() => import('./components/BuySellAds.vue'))
+  : NoopComponent
+const AlgoliaSearchBox = __ALGOLIA__
+  ? defineAsyncComponent(() => import('./components/AlgoliaSearchBox.vue'))
+  : NoopComponent
 
 // generic state
 const route = useRoute()

src/client/theme-default/components/BuySellAds.vue

@@ -41,7 +41,9 @@ onMounted(() => {
 
     document.head.appendChild(s)
 
-    s.onload = () => { load() }
+    s.onload = () => {
+      load()
+    }
   } else {
     load()
   }
@@ -62,7 +64,7 @@ function load() {
 .buy-sell-ads {
   margin: 0 auto;
   padding-top: 2rem;
-  font-size: .85rem;
+  font-size: 0.85rem;
 }
 
 .bsa-cpc {
@@ -111,7 +113,7 @@ function load() {
   margin-left: 36px;
   padding: 0 8px;
   line-height: 22px;
-  font-size: .85em;
+  font-size: 0.85em;
   font-weight: 500;
   color: #1c90f3;
   content: 'Sponsored';

src/client/theme-default/components/EditLink.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="edit-link">
-    <a v-if="url" class="link" :href="url" target="_blank" rel="noopener noreferrer">
+    <a
+      v-if="url"
+      class="link"
+      :href="url"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       {{ text }} <OutboundLink class="icon" />
     </a>
   </div>

src/client/theme-default/components/HomeFeatures.vue

@@ -3,7 +3,11 @@
     <div class="wrapper">
       <div class="container">
         <div class="features">
-          <section v-for="(feature, index) in features" :key="index" class="feature">
+          <section
+            v-for="(feature, index) in features"
+            :key="index"
+            class="feature"
+          >
             <h2 class="title" v-if="feature.title">{{ feature.title }}</h2>
             <p class="details" v-if="feature.details">{{ feature.details }}</p>
           </section>

src/client/theme-default/components/HomeFooter.vue

@@ -38,7 +38,7 @@
   margin: 0;
   text-align: center;
   line-height: 1.4;
-  font-size: .9rem;
+  font-size: 0.9rem;
   color: var(--c-text-light);
 }
 </style>

src/client/theme-default/components/HomeHero.vue

@@ -1,7 +1,11 @@
 <template>
   <header v-if="showHero" class="home-hero">
     <figure v-if="$frontmatter.heroImage" class="figure">
-      <img class="image" :src="$withBase($frontmatter.heroImage)" :alt="$frontmatter.heroAlt" />
+      <img
+        class="image"
+        :src="$withBase($frontmatter.heroImage)"
+        :alt="$frontmatter.heroAlt"
+      />
     </figure>
 
     <h1 v-if="hasHeroText" id="main-title" class="title">{{ heroText }}</h1>
@@ -30,10 +34,12 @@ const site = useSiteDataByRoute()
 const data = useFrontmatter()
 
 const showHero = computed(() => {
-  return data.value.heroImage
-    || hasHeroText.value
-    || hasTagline.value
-    || hasAction.value
+  return (
+    data.value.heroImage ||
+    hasHeroText.value ||
+    hasTagline.value ||
+    hasAction.value
+  )
 })
 
 const hasHeroText = computed(() => data.value.heroText !== null)
@@ -43,7 +49,9 @@ const hasTagline = computed(() => data.value.tagline !== null)
 const tagline = computed(() => data.value.tagline || site.value.description)
 
 const hasAction = computed(() => data.value.actionLink && data.value.actionText)
-const hasAltAction = computed(() => data.value.altActionLink && data.value.altActionText)
+const hasAltAction = computed(
+  () => data.value.altActionLink && data.value.altActionText
+)
 </script>
 
 <style scoped>

src/client/theme-default/components/NavBar.vue

@@ -34,14 +34,14 @@ defineEmit(['toggle'])
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid var(--c-divider);
-  padding: .7rem 1.5rem .7rem 4rem;
+  padding: 0.7rem 1.5rem 0.7rem 4rem;
   height: var(--header-height);
   background-color: #ffffff;
 }
 
 @media (min-width: 720px) {
   .nav-bar {
-    padding: .7rem 1.5rem;
+    padding: 0.7rem 1.5rem;
   }
 }
 

src/client/theme-default/components/NavBarTitle.vue

@@ -26,7 +26,7 @@
 }
 
 .logo {
-  margin-right: .75rem;
+  margin-right: 0.75rem;
   height: 1.3rem;
   vertical-align: bottom;
 }