chore: reorganize assets and set up manifests

Author: meteorlxy

docs/.vuepress/config.ts

@@ -7,7 +7,47 @@ import { navbar, sidebar } from './configs'
 const config: UserConfig<DefaultThemeOptions> = {
   base: '/',
 
-  head: [['link', { rel: 'icon', href: `/logo.png` }]],
+  head: [
+    [
+      'link',
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '16x16',
+        href: `/images/icons/favicon-16x16.png`,
+      },
+    ],
+    [
+      'link',
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '32x32',
+        href: `/images/icons/favicon-32x32.png`,
+      },
+    ],
+    ['link', { rel: 'manifest', href: '/manifest.webmanifest' }],
+    ['meta', { name: 'application-name', content: 'VuePress' }],
+    ['meta', { name: 'apple-mobile-web-app-title', content: 'VuePress' }],
+    [
+      'meta',
+      { name: 'apple-mobile-web-app-status-bar-style', content: 'black' },
+    ],
+    [
+      'link',
+      { rel: 'apple-touch-icon', href: `/images/icons/apple-touch-icon.png` },
+    ],
+    [
+      'link',
+      {
+        rel: 'mask-icon',
+        href: '/images/icons/safari-pinned-tab.svg',
+        color: '#3eaf7c',
+      },
+    ],
+    ['meta', { name: 'msapplication-TileColor', content: '#3eaf7c' }],
+    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
+  ],
 
   // site-level locales config
   locales: {
@@ -24,7 +64,7 @@ const config: UserConfig<DefaultThemeOptions> = {
   },
 
   themeConfig: {
-    logo: '/hero.png',
+    logo: '/images/hero.png',
 
     repo: 'vuepress/vuepress-next',
 

docs/.vuepress/public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/images/icons/mstile-150x150.png"/>
+            <TileColor>#ffffff</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

docs/.vuepress/public/favicon.ico

@@ -0,0 +1,21 @@
+{
+  "name": "VuePress",
+  "short_name": "VuePress",
+  "description": "Vue-powered Static Site Generator",
+  "start_url": "/index.html",
+  "display": "standalone",
+  "background_color": "#fff",
+  "theme_color": "#3eaf7c",
+  "icons": [
+    {
+      "src": "/images/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/icons/android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    }
+  ]
+}

docs/.vuepress/public/hero.png renamed to docs/.vuepress/public/images/hero.png

@@ -1,7 +1,7 @@
 ---
 home: true
 title: Home
-heroImage: /hero.png
+heroImage: /images/hero.png
 actions:
   - text: Get Started
     link: /guide/getting-started.html

docs/.vuepress/public/images/icons/android-chrome-192x192.png

@@ -28,22 +28,23 @@ Take our documentation source files as an example, we are putting the logo of Vu
 └─ docs
    ├─ .vuepress
    |  └─ public
-   |     └─ hero.png  # <- Logo file
+   |     └─ images
+   |        └─ hero.png  # <- Logo file
    └─ guide
-      └─ assets.md    # <- Here we are
+      └─ assets.md       # <- Here we are
 ```
 
 We can reference our logo in current page like this:
 
 **Input**
 
 ```md
-![VuePress Logo](/hero.png)
+![VuePress Logo](/images/hero.png)
 ```
 
 **Output**
 
-![VuePress Logo](/hero.png)
+![VuePress Logo](/images/hero.png)
 
 ::: tip
 Config reference: [public](../reference/config.md#public)
@@ -56,15 +57,15 @@ If your site is deployed to a non-root URL, i.e. the [base](../reference/config.
 For example, if you plan to deploy your site to `https://foo.github.io/bar/`, then `base` should be set to `"/bar/"`, and you have to reference your public files in Markdown like this:
 
 ```md
-![VuePress Logo](/bar/hero.png)
+![VuePress Logo](/bar/images/hero.png)
 ```
 
 Obviously, it is brittle if you ever decide to change the `base`. This is the reason why we suggest to reference static assets using relative URLs.
 
 To help with that, VuePress provides a built-in helper `$withBase` that generates the correct path:
 
 ```md
-<img :src="$withBase('/hero.png')" alt="VuePress Logo">
+<img :src="$withBase('/images/hero.png')" alt="VuePress Logo">
 ```
 
 The helper is verbose in Markdown. So it might be more helpful for theme and plugin authors.

docs/.vuepress/public/images/icons/android-chrome-384x384.png

@@ -104,15 +104,15 @@ You can also specify the config file via `--config` option of [CLI](./cli.md).
 
 ```js
 module.exports = {
-  head: [['link', { rel: 'icon', href: '/logo.png' }]],
+  head: [['link', { rel: 'icon', href: '/images/logo.png' }]],
 }
 ```
 
 Rendered as：
 
 ```html
 <head>
-  <link rel="icon" href="/logo.png" />
+  <link rel="icon" href="/images/logo.png" />
 </head>
 ```
 

docs/.vuepress/public/images/icons/apple-touch-icon.png

@@ -35,7 +35,7 @@ Frontmatter in this section will only take effect in home pages.
   ```md
   ---
   # public file path
-  heroImage: /hero.png
+  heroImage: /images/hero.png
   # url
   heroImage: https://vuejs.org/images/logo.png
   ---

docs/.vuepress/public/images/icons/favicon-16x16.png

@@ -1,7 +1,7 @@
 ---
 home: true
 title: 首页
-heroImage: /hero.png
+heroImage: /images/hero.png
 actions:
   - text: 快速上手
     link: /zh/guide/getting-started.html

docs/.vuepress/public/images/icons/favicon-32x32.png

@@ -28,22 +28,23 @@
 └─ docs
    ├─ .vuepress
    |  └─ public
-   |     └─ hero.png  # <- Logo 文件
+   |     └─ images
+   |        └─ hero.png  # <- Logo 文件
    └─ guide
-      └─ assets.md    # <- 我们在这里
+      └─ assets.md       # <- 我们在这里
 ```
 
 我们可以这样在当前页面引用 Logo ：
 
 **Input**
 
 ```md
-![VuePress Logo](/hero.png)
+![VuePress Logo](/images/hero.png)
 ```
 
 **Output**
 
-![VuePress Logo](/hero.png)
+![VuePress Logo](/images/hero.png)
 
 ::: tip
 配置参考： [public](../reference/config.md#public)
@@ -56,15 +57,15 @@
 举例来说，如果你想要把网站部署到 `https://foo.github.io/bar/` ，那么应该把 `base` 设置为 `"/bar/"` ，此时你必须在 Markdown 文件中这样引用 Public 文件：
 
 ```md
-![VuePress Logo](/bar/hero.png)
+![VuePress Logo](/bar/images/hero.png)
 ```
 
 显然，一旦某一天你修改了 `base`，这样的路径引用将会显得异常脆弱。这也是我们推荐你使用相对路径来引用静态文件的原因。
 
 为了解决这个问题，VuePress 提供了内置的一个 Helper `$withBase` ，它可以帮助你生成正确的路径：
 
 ```md
-<img :src="$withBase('/hero.png')" alt="VuePress Logo">
+<img :src="$withBase('/images/hero.png')" alt="VuePress Logo">
 ```
 
 在 Markdown 中使用这个 Helper 会显得有些冗长，因此它可能对主题和插件作者更有帮助。

docs/.vuepress/public/images/icons/mstile-150x150.png

@@ -103,15 +103,15 @@ VuePress 配置的参考文档，可以通过配置文件来设置这些配置
 
 ```js
 module.exports = {
-  head: [['link', { rel: 'icon', href: '/logo.png' }]],
+  head: [['link', { rel: 'icon', href: '/images/logo.png' }]],
 }
 ```
 
 渲染为：
 
 ```html
 <head>
-  <link rel="icon" href="/logo.png" />
+  <link rel="icon" href="/images/logo.png" />
 </head>
 ```
 

docs/.vuepress/public/images/icons/safari-pinned-tab.svg

@@ -118,7 +118,7 @@ module.exports = {
 module.exports = {
   themeConfig: {
     // Public 文件路径
-    logo: '/hero.png',
+    logo: '/images/hero.png',
     // URL
     logo: 'https://vuejs.org/images/logo.png',
   },

docs/.vuepress/public/logo.png renamed to docs/.vuepress/public/images/logo.png

@@ -35,7 +35,7 @@
   ```md
   ---
   # Public 文件路径
-  heroImage: /hero.png
+  heroImage: /images/hero.png
   # URL
   heroImage: https://vuejs.org/images/logo.png
   ---