docs(theme-press): add edit page links & lastUpdated Time

docs/valaxy.config.ts

@@ -1,7 +1,8 @@
 import { defineValaxyConfig } from 'valaxy'
 import type { PressTheme } from 'valaxy-theme-press'
 
-const commitRef = process.env.COMMIT_REF?.slice(0, 8) || 'dev'
+const COMMIT_ID = process.env.CF_PAGES_COMMIT_SHA || process.env.COMMIT_REF
+const commitRef = COMMIT_ID?.slice(0, 8) || 'dev'
 
 const safelist = [
   'i-ri-home-line',

packages/valaxy-theme-press/components/PressDocFooter.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { useEditLink } from '../composables'
+
+const editLink = useEditLink()
+</script>
+
+<template>
+  <div flex justify="between" text="sm">
+    <a flex items="center" :href="editLink.url" target="_blank">
+      <div i-ri-external-link-line />
+      <span ml-1>{{ editLink.text }}</span>
+    </a>
+    <PressDocFooterLastUpdated />
+  </div>
+</template>

packages/valaxy-theme-press/components/PressDocFooterLastUpdated.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watchEffect } from 'vue'
+import { useData, useThemeConfig } from 'valaxy'
+
+const data = useData()
+const themeConfig = useThemeConfig()
+
+const date = computed(() => new Date(data.lastUpdated!))
+const isoDatetime = computed(() => date.value.toISOString())
+const datetime = ref('')
+
+// set time on mounted hook because the locale string might be different
+// based on end user and will lead to potential hydration mismatch if
+// calculated at build time
+onMounted(() => {
+  watchEffect(() => {
+    datetime.value = date.value.toLocaleString(window.navigator.language)
+  })
+})
+</script>
+
+<template>
+  <p class="press-lastUpdated">
+    {{ themeConfig.lastUpdatedText ?? 'Last updated' }}:
+    <time :datetime="isoDatetime">{{ datetime }}</time>
+  </p>
+</template>
+
+<style scoped>
+.press-lastUpdated {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--va-c-text-light);
+}
+
+@media (min-width: 640px) {
+  .press-lastUpdated {
+    line-height: 32px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+</style>

packages/valaxy-theme-press/components/PressFooter.vue

@@ -8,7 +8,7 @@ const { hasSidebar } = useSidebar()
 
 <template>
   <footer v-if="themeConfig.footer" class="press-footer" :class="{ 'has-sidebar': hasSidebar }">
-    <div class="container">
+    <div flex="~ col" class="container">
       <p v-if="themeConfig.footer.message" class="message" v-html="themeConfig.footer.message" />
       <p v-if="themeConfig.footer.copyright" class="copyright" v-html="themeConfig.footer.copyright" />
     </div>

packages/valaxy-theme-press/components/ValaxyMain.vue

@@ -31,7 +31,7 @@ const isHome = useLayout('home')
           <slot name="main-header-after" />
 
           <slot name="main-content">
-            <ValaxyMd class="prose pb-8 mx-auto w-full max-w-4xl" :frontmatter="frontmatter">
+            <ValaxyMd class="prose mx-auto w-full max-w-4xl" :frontmatter="frontmatter">
               <h1 v-if="hasSidebar && !isHome && frontmatter.title" :id="frontmatter.title" tabindex="-1">
                 {{ frontmatter.title }}
                 <a class="header-anchor" :href="`#${frontmatter.title}`" aria-hidden="true">#</a>
@@ -39,6 +39,9 @@ const isHome = useLayout('home')
               <slot name="main-content-md" />
               <slot />
             </ValaxyMd>
+
+            <PressDocFooter v-if="!isHome" class="pb-8 max-w-4xl" w="full" m="auto" />
+
             <slot name="main-content-after" />
           </slot>
         </div>

packages/valaxy-theme-press/composables/edit-link.ts

@@ -0,0 +1,14 @@
+import { useData } from 'valaxy'
+import { computed } from 'vue'
+import { useThemeConfig } from '.'
+
+export function useEditLink() {
+  const themeConfig = useThemeConfig()
+  return computed(() => {
+    const { text = 'Edit this page', pattern } = themeConfig.value.editLink || {}
+    const { relativePath } = useData()
+    const url = pattern.replace(/:path/g, relativePath)
+
+    return { url, text }
+  })
+}

packages/valaxy-theme-press/composables/index.ts

@@ -1 +1,2 @@
 export * from './config'
+export * from './edit-link'

packages/valaxy-theme-press/config/index.ts

@@ -15,5 +15,10 @@ export const defaultThemeConfig: ThemeConfig = {
   sidebar: [],
   nav: [],
 
+  editLink: {
+    pattern: 'https://github.com/YunYouJun/valaxy/edit/main/docs/:path',
+    text: 'Edit this page on GitHub',
+  },
+
   footer: {},
 }

packages/valaxy-theme-press/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-press",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Docs Theme for Valaxy",
   "author": {
     "email": "me@yunyoujun.cn",

packages/valaxy-theme-press/types/index.d.ts

@@ -9,6 +9,22 @@ export namespace PressTheme {
     copyright?: string;
   }
 
+  export interface EditLink {
+    /**
+     * Pattern for edit link.
+     *
+     * @example 'https://github.com/YunYouJun/valaxy/edit/main/docs/:path'
+     */
+    pattern: string
+
+    /**
+     * Custom text for edit link.
+     *
+     * @default 'Edit this page'
+     */
+    text?: string
+  }
+
   export interface Config {
     /**
      * toc title
@@ -27,6 +43,8 @@ export namespace PressTheme {
     nav: Array<NavItem>
     sidebar: string[]
 
+    editLink: EditLink
+
     footer: Footer
   }
 }

packages/valaxy/node/cli.ts

@@ -154,7 +154,10 @@ cli.command(
     // merge index.html
     const templatePath = path.resolve(options.clientRoot, 'template.html')
     const indexPath = path.resolve(options.clientRoot, 'index.html')
-    await fs.writeFile(indexPath, await getIndexHtml(options), 'utf-8')
+    if (fs.existsSync(templatePath))
+      await fs.copyFile(templatePath, indexPath)
+    const indexHtml = await getIndexHtml(options)
+    await fs.writeFile(indexPath, indexHtml, 'utf-8')
 
     try {
       if (ssg) {

packages/valaxy/node/common.ts

@@ -43,12 +43,8 @@ export async function mergeViteConfigs({ userRoot, themeRoot }: ResolvedValaxyOp
  * @returns
  */
 export async function getIndexHtml({ clientRoot, themeRoot, userRoot, config }: ResolvedValaxyOptions): Promise<string> {
-  const templatePath = resolve(clientRoot, 'template.html')
   const indexPath = resolve(clientRoot, 'index.html')
 
-  if (fs.existsSync(templatePath))
-    await fs.copyFile(templatePath, indexPath)
-
   let main = await fs.readFile(indexPath, 'utf-8')
   let head = ''
   let body = ''

packages/valaxy/node/utils/getGitTimestamp.ts

@@ -9,7 +9,7 @@ export function getGitTimestamp(file: string, type: 'created' | 'updated' = 'upd
     if (type === 'created')
       params.push('|', 'tail', '-1')
 
-    const child = spawn('xxx', params)
+    const child = spawn('git', params)
     let output = ''
     child.stdout.on('data', d => (output += String(d)))
     child.on('close', () => {

test/utils.test.ts

@@ -1,4 +1,5 @@
 import { resolve } from 'path'
+import fs from 'fs-extra'
 import type { DefaultThemeConfig, SiteConfig } from 'valaxy/types'
 import type { ResolvedValaxyOptions, ValaxyConfig } from 'valaxy/node'
 import { getIndexHtml } from '../packages/valaxy/node'
@@ -12,6 +13,12 @@ describe('utils', () => {
     const config = {
       mode: 'light',
     } as ValaxyConfig<DefaultThemeConfig>
+
+    const templatePath = resolve(clientRoot, 'template.html')
+    const indexPath = resolve(clientRoot, 'index.html')
+
+    if (fs.existsSync(templatePath))
+      await fs.copyFile(templatePath, indexPath)
     const indexHtml = await getIndexHtml({ clientRoot, themeRoot, userRoot, config } as ResolvedValaxyOptions)
 
     const head = indexHtml.match(/<head>([\s\S]*?)<\/head>/im)?.[1]