feat: add global footer (vuejs#33)

src/vitepress/components/VPApp.vue

@@ -45,6 +45,12 @@ provide('close-sidebar', closeSidebar)
       <template #aside-bottom>
         <slot name="aside-bottom" />
       </template>
+      <template #footer-before>
+        <slot name="footer-before" />
+      </template>
+      <template #footer-after>
+        <slot name="footer-after" />
+      </template>
     </VPContent>
   </div>
 </template>

src/vitepress/components/VPContent.vue

@@ -13,13 +13,16 @@ const { hasSidebar } = useSidebar()
 <template>
   <div class="VPContent" :class="{ 'has-sidebar': hasSidebar }">
     <VPNotFound v-if="route.component === VPNotFound" />
-    <VPContentPage v-else-if="!!frontmatter.page" />
+    <VPContentPage v-else-if="!!frontmatter.page">
+      <template #footer-before><slot name="footer-before" /></template>
+      <template #footer-after><slot name="footer-after" /></template>
+    </VPContentPage>
     <VPContentDoc v-else :class="{ 'has-sidebar': hasSidebar }">
       <template #content-top><slot name="content-top" /></template>
       <template #content-bottom><slot name="content-bottom" /></template>
       <template #aside-top><slot name="aside-top" /></template>
       <template #aside-mid><slot name="aside-mid" /></template>
-      <template #aside-bottom><slot name="aside-bottom" /></template>
+      <template #aside-bottom><slot name="aside-bottom" /></template>\
     </VPContentDoc>
   </div>
 </template>

src/vitepress/components/VPContentPage.vue

@@ -1,5 +1,16 @@
+<script lang="ts" setup>
+import { useData } from 'vitepress'
+import VPFooter from './VPFooter.vue'
+
+const { frontmatter } = useData()
+</script>
+
 <template>
   <div class="VPContentPage">
     <Content />
+
+    <slot name="footer-before" />
+    <VPFooter v-if="frontmatter.footer !== false" />
+    <slot name="footer-after" />
   </div>
 </template>

src/vitepress/components/VPFooter.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { useData } from 'vitepress'
+import { VTLink } from '../../core'
+
+const { theme } = useData()
+</script>
+
+<template>
+  <div class="VPFooter">
+    <p v-if="theme.footer?.license" class="license">
+      Released under the <VTLink class="link" :href="theme.footer.license.link" no-icon>{{ theme.footer.license.text }}</VTLink>.
+    </p>
+
+    <p v-if="theme.footer?.copyright" class="copyright">
+      {{ theme.footer.copyright }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.VPFooter {
+  border-top: 1px solid var(--vt-c-bg-soft);
+  padding: 23px 0 24px;
+  background-color: var(--vt-c-bg-soft);
+  transition: border-top 0.5s, background-color 0.5s;
+}
+
+.dark .VPFooter {
+  border-top: 1px solid var(--vt-c-divider-light);
+  background-color: var(--vt-c-bg);
+}
+
+.license,
+.copyright {
+  text-align: center;
+  line-height: 20px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vt-c-text-2);
+  transition: color 0.25s;
+}
+
+.link {
+  color: var(--vt-c-text-1);
+  transition: color 0.25s;
+}
+
+.link:hover {
+  color: var(--vt-c-text-2);
+}
+</style>

src/vitepress/config.ts

@@ -43,6 +43,20 @@ export interface Config {
    */
   sidebar?: SidebarConfig
 
+  /**
+   * Global footer settings. The footer will only be displayed when a page has
+   * the frontmatter option `page: true`.  You may pass `footer: false` to the
+   * frontmatter to hide the footer.
+   */
+  footer?: {
+    license?: {
+      text: string
+      link: string
+    }
+
+    copyright?: string
+  }
+
   /**
    * Algolia configuration for the site search.
    */