Skip to content

Commit

Permalink
feat: add footer area for page content (#1792)
Browse files Browse the repository at this point in the history
* feat: support show edit link and last updated time

* feat: add content footer navigation

* docs: decribe editLink and lastUpdated config

* docs: complete config description
  • Loading branch information
PeachScript committed Jul 30, 2023
1 parent 7471ce8 commit 1928eb9
Show file tree
Hide file tree
Showing 13 changed files with 385 additions and 5 deletions.
24 changes: 20 additions & 4 deletions docs/theme/default.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,21 @@ dumi 内置了一套完善的默认主题,默认主题的呈现效果与 dumi

<!-- site config -->

### name
### editLink <Badge>2.2.2+</Badge>

- 类型:`string`
- 默认值:`undefined`
- 类型:`boolean | string`
- 默认值:`true`

配置导航栏上的站点名称,不配置时不展示。
配置是否在 Markdown 页面内容区域底部展示当前文档的编辑链接。

当配置为 `true` 时 dumi 会根据项目 `package.json` 中的 `repository` 配置及当前分支,使用 [hosted-git-info](https://github.com/npm/hosted-git-info) 自动生成编辑链接,仅支持[部分代码托管平台](https://github.com/npm/hosted-git-info#supported-hosts);如果你使用的是其他代码托管平台或私有化部署的平台,可以使用字符串模板自定义编辑链接,例如 `https://gitlab.example.com/group/repo/{filename}`,其中 `{filename}` 会被替换为当前文档在仓库中的文件路径。

### lastUpdated <Badge>2.2.2+</Badge>

- 类型:`boolean`
- 默认值:`true`

配置是否在 Markdown 页面内容区域底部展示当前文档的最后更新时间。

### logo

Expand All @@ -30,6 +39,13 @@ dumi 内置了一套完善的默认主题,默认主题的呈现效果与 dumi

配置为 `false` 时不展示 LOGO。

### name

- 类型:`string`
- 默认值:`undefined`

配置导航栏上的站点名称,不配置时不展示。

### nav

- `Navs`类型:`{ title: '导航标题', link: '导航路由' }[] | Record<string, { title: '导航标题', link: '导航路由' }[]>`
Expand Down
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@
"hast-util-to-estree": "^2.1.0",
"hast-util-to-string": "^2.0.0",
"heti": "^0.9.2",
"hosted-git-info": "^6.1.1",
"html-to-text": "^8.2.1",
"html2sketch": "^1.0.1",
"js-yaml": "^4.1.0",
Expand Down Expand Up @@ -143,6 +144,7 @@
"@commitlint/config-conventional": "^17.0.3",
"@types/github-slugger": "^1.3.0",
"@types/highlight-words-core": "^1.2.1",
"@types/hosted-git-info": "^3.0.2",
"@types/js-yaml": "^4.0.5",
"@types/lodash.throttle": "^4.1.7",
"@types/node": "^18.6.3",
Expand Down
22 changes: 22 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions src/client/theme-api/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ export interface IRouteMeta {
};
atomId?: string;
filename?: string;
lastUpdated?: number;
debug?: boolean;
/**
* Control the display of the sidebar menu.
Expand Down Expand Up @@ -219,6 +220,8 @@ export interface IThemeConfig {
*/
[key in SocialTypes]?: string;
};
editLink?: boolean | string;
lastUpdated?: boolean;
[key: string]: any;
}

Expand Down
2 changes: 2 additions & 0 deletions src/client/theme-default/layouts/DocLayout/index.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import ContentFooter from '@/client/theme-default/slots/ContentFooter';
import { ReactComponent as IconSidebar } from '@ant-design/icons-svg/inline-svg/outlined/align-left.svg';
import animateScrollTo from 'animated-scroll-to';
import {
Expand Down Expand Up @@ -93,6 +94,7 @@ const DocLayout: FC = () => {
{showSidebar && <Sidebar />}
<Content>
<article>{outlet}</article>
<ContentFooter />
<Footer />
</Content>
{fm.toc === 'content' && (
Expand Down
4 changes: 4 additions & 0 deletions src/client/theme-default/locales/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@
"api.component.loading": "Properties definition is resolving, wait a moment...",
"api.component.not.found": "Properties definition not found for {id} component",
"content.tabs.default": "Doc",
"content.footer.last.updated": "Last updated: ",
"content.footer.actions.edit": "Improve this documentation",
"content.footer.actions.previous": "PREV",
"content.footer.actions.next": "NEXT",
"search.not.found": "No content was found",
"layout.sidebar.btn": "Sidebar"
}
4 changes: 4 additions & 0 deletions src/client/theme-default/locales/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@
"api.component.loading": "属性定义正在解析中,稍等片刻...",
"api.component.not.found": "未找到 {id} 组件的属性定义",
"content.tabs.default": "文档",
"content.footer.last.updated": "最后更新时间:",
"content.footer.actions.edit": "帮助改进此文档",
"content.footer.actions.previous": "上一篇",
"content.footer.actions.next": "下一篇",
"search.not.found": "未找到相关内容",
"layout.sidebar.btn": "侧边菜单"
}
163 changes: 163 additions & 0 deletions src/client/theme-default/slots/ContentFooter/index.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
@import (reference) '../../styles/variables.less';

.@{prefix}-content-footer {
margin-top: 48px;
color: @c-text-note;
font-size: 14px;
line-height: 1;

@{dark-selector} & {
color: @c-text-note-dark;
}

svg {
fill: @c-text-note;
width: 14px;
vertical-align: -0.13em;
transition: fill 0.2s;

@{dark-selector} & {
fill: @c-text-note-dark;
}
}

> dl {
display: flex;
justify-content: space-between;
margin: 0;
padding-bottom: 12px;

&:empty {
display: none;
}

dd {
margin: 0;

svg {
margin-inline-end: 4px;
}

> a {
color: @c-primary;

@{dark-selector} & {
color: @c-primary-dark;
}

&:not(:hover) {
text-decoration: none;
}

> svg {
fill: @c-primary;

@{dark-selector} & {
fill: @c-primary-dark;
}
}
}
}
}

> nav {
padding: 12px 0;
border-block-start: 1px solid @c-border-light;
overflow: hidden;

&:empty {
display: none;
}

@{dark-selector} & {
border-block-start-color: @c-border-less-dark;
}

> a {
max-width: 180px;
min-width: 120px;
color: @c-primary;
font-size: 16px;
text-decoration: none;
border-radius: 2px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

@media @tablet {
min-width: initial;
max-width: 80px;
}

@{dark-selector} & {
color: @c-primary-dark;
}

&[data-prev] {
float: inline-start;
padding-inline-end: 24px;

svg {
margin-inline-end: 4px;

[data-direction='rtl'] & {
transform: rotate(180deg);
}
}
}

&[data-next] {
float: inline-end;
text-align: end;
padding-inline-start: 24px;

svg {
margin-inline-start: 4px;
transform: rotate(180deg);

[data-direction='rtl'] & {
transform: rotate(0);
}
}
}

small {
display: block;
margin-bottom: 5px;
color: @c-text-note;
font-size: 14px;
transition: color 0.2s;

@{dark-selector} & {
color: @c-text-note-dark;
}
}

&:hover {
small {
color: @c-text-secondary;

@{dark-selector} & {
color: @c-text-secondary-dark;
}
}

svg {
fill: @c-text-secondary;

@{dark-selector} & {
fill: @c-text-secondary-dark;
}
}
}
}
}

[data-no-sidebar] > & {
display: none;
}

:not([data-no-sidebar]) > & + .@{prefix}-footer {
margin-top: 0;
}
}
Loading

0 comments on commit 1928eb9

Please sign in to comment.