Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: last updated ui in default theme. #338

Merged
merged 8 commits into from
May 8, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/.vuepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ module.exports = {
label: 'English',
selectText: 'Languages',
editLinkText: 'Edit this page on GitHub',
lastUpdated: 'Last Updated',
nav: [
{
text: 'Guide',
Expand All @@ -56,6 +57,7 @@ module.exports = {
label: '简体中文',
selectText: '选择语言',
editLinkText: '在 GitHub 上编辑此页',
lastUpdated: '上次更新',
nav: [
{
text: '指南',
Expand Down
20 changes: 19 additions & 1 deletion docs/default-theme-config/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,7 @@ Built-in Search only builds index from the title, `h2` and `h3` headers, if you

The `themeConfig.algolia` option allows you to use [Algolia DocSearch](https://community.algolia.com/docsearch/) to replace the simple built-in search. To enable it, you need to provide at least `apiKey` and `indexName`:

```js
``` js
module.exports = {
themeConfig: {
algolia: {
Expand All @@ -280,6 +280,24 @@ module.exports = {

For more options, refer to [Algolia DocSearch's documentation](https://github.com/algolia/docsearch#docsearch-options).

## Last Updated

The `themeConfig.lastUpdated` option allows you to get the UNIX timestamp(ms) of each file's last `git` commit, and it will also display at the bottom of each page with a appropriate format:

``` js
module.exports = {
themeConfig: {
lastUpdated: 'Last Updated', // string | boolean
}
}
```

Note that it's `off` by default. If given `string`, it will be displayed as a prefix (default value: `Last Updated`).

::: warning
Since `lastUpdated` is based on `git`, so you can only use it in a `git` repository.
:::

## Prev / Next Links

Prev and next links are automatically inferred based on the sidebar order of the active page. You can also explicitly overwrite or disable them using `YAML front matter`:
Expand Down
7 changes: 4 additions & 3 deletions docs/guide/custom-themes.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ This is the value of `$site` of this very website:
"base": "/",
"pages": [
{
"lastModified": 1524027677,
"lastUpdated": 1524027677000,
"path": "/",
"title": "VuePress",
"frontmatter": {}
Expand All @@ -44,7 +44,7 @@ This is the `$page` object for this page you are looking at:

``` json
{
"lastModified": 1524847549,
"lastUpdated": 1524847549000,
"path": "/guide/custom-themes.html",
"title": "Custom Themes",
"headers": [/* ... */],
Expand All @@ -57,7 +57,8 @@ If the user provided `themeConfig` in `.vuepress/config.js`, it will also be ava
Finally, don't forget that `this.$route` and `this.$router` are also available as part of Vue Router's API.

::: tip
`lastModified` is the UNIX timestamp of this file's last git commit, so please ensure you have git installed.
`lastUpdated` is the UNIX timestamp of this file's last git commit, for more details, refer to [Last Updated](../default-theme-config/#last-updated).

:::

## Content Excerpt
Expand Down
18 changes: 18 additions & 0 deletions docs/zh/default-theme-config/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -276,6 +276,24 @@ module.exports = {

更多选项请参考 [Algolia DocSearch 的文档](https://github.com/algolia/docsearch#docsearch-options)。

## 最近更新

你可以通过 `themeConfig.lastUpdated` 选项来获取每个文件最后一次 `git` 提交的 UNIX 时间戳(ms),同时它将以合适的日期格式显示在每一页的底部:

``` js
module.exports = {
themeConfig: {
lastUpdated: 'Last Updated', // string | boolean
}
}
```

请注意,`themeConfig.lastUpdated` 默认是关闭的,如果给定一个字符串,它将会作为前缀显示(默认值是:`Last Updated`)。

::: warning 使用须知
由于 `lastUpdated` 是基于 `git` 的, 所以你只能在一个基于 `git` 的项目中启用它。
:::

## 上 / 下一篇链接

上一篇和下一篇文章的链接将会自动地根据当前页面的侧边栏的顺序来获取。你也可以使用 `YAML front matter` 来明确地重写或者禁用它:
Expand Down
2 changes: 1 addition & 1 deletion docs/zh/guide/basic-config.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ module.exports = {

由于 VuePress 是一个标准的 Vue 应用,你可以通过创建一个 `.vuepress/enhanceApp.js` 文件来做一些应用级别的配置,当该文件存在的时候,会被导入到应用内部。`enhanceApp.js` 应该 `export default` 一个钩子函数,并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件,或者增加额外的路由钩子等:

```js
``` js
export default ({
Vue, // VuePress 正在使用的 Vue 构造函数
options, // 附加到根实例的一些选项
Expand Down
8 changes: 4 additions & 4 deletions docs/zh/guide/custom-themes.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ VuePress 使用单文件组件来构建自定义主题。想要开发一个自
"base": "/",
"pages": [
{
"lastModified": 1524027677,
"lastUpdated": 1524027677000,
"path": "/",
"title": "VuePress",
"frontmatter": {}
Expand All @@ -44,7 +44,7 @@ VuePress 使用单文件组件来构建自定义主题。想要开发一个自

``` json
{
"lastModified": 1524847549,
"lastUpdated": 1524847549000,
"path": "/custom-themes.html",
"title": "自定义主题",
"headers": [/* ... */],
Expand All @@ -57,7 +57,7 @@ VuePress 使用单文件组件来构建自定义主题。想要开发一个自
最后,别忘了,作为 Vue Router API 的一部分,`this.$route` 和 `this.$router` 同样可以使用。

::: tip 提示
`lastModified` 是这个文件最后一次 git 提交的 unix 时间戳,所以请确保你已经安装了 git
`lastUpdated` 是这个文件最后一次 git 提交的 UNIX 时间戳,更多细节请参考:[最近更新](../default-theme-config/#最近更新)
:::

## 内容摘抄
Expand All @@ -80,7 +80,7 @@ VuePress 使用单文件组件来构建自定义主题。想要开发一个自

自定义主题也可以通过主题根目录下的 `enhanceApp.js` 文件来对 VuePress 应用进行拓展配置。这个文件应当 `export default` 一个钩子函数,并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件,或者增加额外的路由钩子等:

```js
``` js
export default ({
Vue, // VuePress 正在使用的 Vue 构造函数
options, // 附加到根实例的一些选项
Expand Down
2 changes: 1 addition & 1 deletion docs/zh/guide/deploy.md
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ pages:
```

`.firebaserc`:
```js
``` js
{
"projects": {
"default": "<YOUR_FIREBASE_ID>"
Expand Down
2 changes: 1 addition & 1 deletion docs/zh/guide/markdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
└─ four.md
```

```md
``` md
[Home](/) <!-- 跳转到根部的 README.md -->
[foo](/foo/) <!-- 跳转到 foo 文件夹的 index.html -->
[foo heading anchor](/foo/#heading) <!-- 跳转到 foo/index.html 的特定 anchor 位置 -->
Expand Down
4 changes: 2 additions & 2 deletions docs/zh/guide/using-vue.md
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export default {

VuePress 对以下预处理器已经内置相关的 webpack 配置:`sass`、`scss`、`less`、`stylus` 和 `pug`。要使用它们你只需要在项目中安装对应的依赖即可。例如,要使用 `sass`,需要安装:

```bash
``` bash
yarn add -D sass-loader node-sass
```

Expand All @@ -146,7 +146,7 @@ yarn add -D sass-loader node-sass

要在组件中使用 `<template lang="pug">`,则需要安装 `pug` 和 `pug-plain-loader`:

```bash
``` bash
yarn add -D pug pug-plain-loader
```

Expand Down
36 changes: 36 additions & 0 deletions lib/default-theme/Page.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
<div class="content edit-link" v-if="editLink">
<a :href="editLink" target="_blank" rel="noopener noreferrer">{{ editLinkText }}</a>
<OutboundLink/>
<div v-if="lastUpdated" class="last-updated">
<span class="prefix">{{ lastUpdatedText }}: </span>
<span class="time">{{ lastUpdated }}</span>
</div>
</div>
<div class="content page-nav" v-if="prev || next">
<p class="inner">
Expand Down Expand Up @@ -31,6 +35,20 @@ export default {
components: { OutboundLink },
props: ['sidebarItems'],
computed: {
lastUpdated () {
if (this.$page.lastUpdated) {
return new Date(this.$page.lastUpdated).toLocaleString(this.$lang)
}
},
lastUpdatedText () {
if (typeof this.$themeLocaleConfig.lastUpdated === 'string') {
return this.$themeLocaleConfig.lastUpdated
}
if (typeof this.$site.themeConfig.lastUpdated === 'string') {
return this.$site.themeConfig.lastUpdated
}
return 'Last Updated'
},
prev () {
const prev = this.$page.frontmatter.prev
if (prev === false) {
Expand Down Expand Up @@ -129,6 +147,15 @@ function find (page, items, offset) {
a
color lighten($textColor, 25%)
margin-right 0.25rem
.last-updated
margin-bottom .5rem
float right
font-weight 500
font-size .9em
.prefix
color lighten($textColor, 25%)
.time
color #aaa

.page-nav.content
padding-top 1rem !important
Expand All @@ -138,6 +165,15 @@ function find (page, items, offset) {
margin-top 0 !important
border-top 1px solid $borderColor
padding-top 1rem
overflow auto // clear float
.next
float right

@media (max-width: $MQMobile)
.edit-link.content .last-updated
float none
text-align left
margin-top 1rem
font-size .8em

</style>
15 changes: 12 additions & 3 deletions lib/prepare.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const {
inferTitle,
extractHeaders,
parseFrontmatter,
getGitLastModifiedTimeStamp
getGitLastUpdatedTimeStamp
} = require('./util')

fs.ensureDirSync(tempPath)
Expand Down Expand Up @@ -181,15 +181,24 @@ async function resolveOptions (sourceDir) {
// resolve pageFiles
const pageFiles = sort(await globby(['**/*.md', '!.vuepress', '!node_modules'], { cwd: sourceDir }))

// resolve lastUpdated
const shouldResolveLastUpdated = (
themeConfig.lastUpdated ||
Object.keys(siteConfig.locales && themeConfig.locales || {})
.some(base => themeConfig.locales[base].lastUpdated)
)

// resolve pagesData
const pagesData = await Promise.all(pageFiles.map(async (file) => {
const filepath = path.resolve(sourceDir, file)
const lastModified = getGitLastModifiedTimeStamp(filepath)
const data = {
lastModified,
path: fileToPath(file)
}

if (shouldResolveLastUpdated) {
data.lastUpdated = getGitLastUpdatedTimeStamp(filepath)
}

// extract yaml frontmatter
const content = await fs.readFile(filepath, 'utf-8')
const frontmatter = parseFrontmatter(content)
Expand Down
4 changes: 2 additions & 2 deletions lib/util/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,6 @@ exports.extractHeaders = (content, include = [], md) => {
return res
}

exports.getGitLastModifiedTimeStamp = filepath => {
return parseInt(spawn.sync('git', ['log', '-1', '--format=%ct', filepath]).stdout.toString('utf-8'))
exports.getGitLastUpdatedTimeStamp = filepath => {
return parseInt(spawn.sync('git', ['log', '-1', '--format=%ct', filepath]).stdout.toString('utf-8')) * 1000
}