From 9813eb40753e44a91fa60edab9d554ca4fb870cf Mon Sep 17 00:00:00 2001
From: Matias Capeletto <matias.capeletto@gmail.com>
Date: Wed, 25 Nov 2020 11:02:53 +0100
Subject: [PATCH] feat: $frontmatter global and global computed docs

---
 docs/.vitepress/config.js     |   1 +
 docs/guide/frontmatter.md     |   2 +-
 docs/guide/global-computed.md | 105 ++++++++++++++++++++++++++++++++++
 src/client/app/index.ts       |   5 ++
 4 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 docs/guide/global-computed.md

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 39efd4cf..075acf2e 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -38,6 +38,7 @@ function getGuideSidebar() {
         { text: 'Configuration', link: '/guide/configuration' },
         { text: 'Markdown Extensions', link: '/guide/markdown' },
         { text: 'Frontmatter', link: '/guide/frontmatter' },
+        { text: 'Global Computed', link: '/guide/global-computed' },
         { text: 'Customization', link: '/guide/customization' },
         { text: 'Deploying', link: '/guide/deploy' }
       ]
diff --git a/docs/guide/frontmatter.md b/docs/guide/frontmatter.md
index 3c6fb5d3..5fc176c4 100644
--- a/docs/guide/frontmatter.md
+++ b/docs/guide/frontmatter.md
@@ -9,7 +9,7 @@ editLink: true
 ---
 ```
 
-Between the triple-dashed lines, you can set [predefined variables](#predefined-variables), or even create custom ones of your own. These variables can be used via the <code>\$page.frontmatter</code> variable.
+Between the triple-dashed lines, you can set [predefined variables](#predefined-variables), or even create custom ones of your own. These variables can be used via the <code>\$frontmatter</code> variable.
 
 Here’s an example of how you could use it in your Markdown file:
 
diff --git a/docs/guide/global-computed.md b/docs/guide/global-computed.md
new file mode 100644
index 00000000..f7de2fb2
--- /dev/null
+++ b/docs/guide/global-computed.md
@@ -0,0 +1,105 @@
+# Global Computed
+
+In VitePress, some core [computed properties](https://v3.vuejs.org/guide/computed.html#computed-properties) can be used by the default theme or custom themes. Or directly in Markdown pages using vue, for example using `{{ $frontmatter.title }}` to access the title defined in the frontmatter section of the page.
+
+## \$site
+
+This is the `$site` value of the site you’re currently reading:
+
+```json
+{
+  "title": "VitePress",
+  "description": "Vite & Vue powered static site generator.",
+  "lang": "en-US",
+  "locales": {},
+  "base": "/",
+  "head": [],
+  "themeConfig: $theme
+}
+```
+
+## \$page
+
+This is the `$page` value of the page you’re currently reading:
+
+```json
+{
+  "title": "Global Computed",
+  "relativePath": "guide/global-computed.md",
+  "lastUpdated": 1606297645000
+  "headers": [
+    {
+      "level": 2,
+      "title": "$site",
+      "slug": "site"
+    },
+    {
+      "level": 2,
+      "title": "$page",
+      "slug": "$page"
+    },
+    ...
+  ],
+  "frontmatter": $frontmatter,
+}
+```
+
+## \$frontmatter
+
+Reference of [\$page](#page).frontmatter.
+
+```json
+{
+  "title": "Docs with VitePress",
+  "editLink": true
+}
+```
+
+## \$theme
+
+Refers to `$site.themeConfig`.
+
+```json
+{
+  "repo": "vuejs/vitepress",
+  "docsDir": "docs",
+  "locales": {},
+  "editLinks": true,
+  "editLinkText": "Edit this page on GitHub",
+  "lastUpdated": "Last Updated",
+  "nav": [
+    {
+      "text": "Guide",
+      "link": "/"
+    },
+    ...
+  ],
+  "sidebar": {
+    "/": [
+      {
+        "text": "Introduction",
+        "children": [
+          {
+            "text": "What is VitePress?",
+            "link": "/"
+          },
+          ...
+        ]
+      }
+    ],
+    "/guide/": [
+      {
+        "text": "Introduction",
+        "children": [
+          {
+            "text": "What is VitePress?",
+            "link": "/"
+          },
+          ...
+        ]
+      }
+    ],
+    ...
+  },
+}
+```
diff --git a/src/client/app/index.ts b/src/client/app/index.ts
index f3eaa170..7749278d 100644
--- a/src/client/app/index.ts
+++ b/src/client/app/index.ts
@@ -87,6 +87,11 @@ export function createApp() {
         return router.route.data
       }
     },
+    $frontmatter: {
+      get() {
+        return router.route.data.frontmatter
+      }
+    },
     $theme: {
       get() {
         return siteDataByRouteRef.value.themeConfig