codfrm/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ docs时间和阅读耗时

Browse Source
This commit is contained in:
王一之
2024-03-22 16:54:41 +08:00
parent 199bbf2628
commit 5a4efad893
24 changed files with 2577 additions and 2542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/docusaurus-plugin-content-docs/package.json Normal file
View File

@ -0,0 +1,18 @@
{
"name": "docusaurus-plugin-content-docs",
"version": "1.0.0",
"description": "",
"main": "src/index.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"@docusaurus/core": "^3.1.1",
"@docusaurus/plugin-content-docs": "^3.1.1",
"dayjs": "^1.11.10",
"reading-time": "^1.5.0",
"simple-git": "^3.22.0"
}
}

106
packages/docusaurus-plugin-content-docs/src/index.ts Normal file
View File

@ -0,0 +1,106 @@
import docsPlugin, {
PluginOptions,
LoadedContent,
DocMetadata as OfficialDocMetadata,
} from "@docusaurus/plugin-content-docs";
import { Plugin, LoadContext } from "@docusaurus/types";
import matter from "gray-matter";
//@ts-ignore
export { validateOptions } from "@docusaurus/plugin-content-docs/src/index";
import path from "path";
import fs from "fs";
import simpleGit, { DefaultLogFields } from "simple-git";
import readingTime, { ReadTimeResults } from "reading-time";
export type DocMetadata = OfficialDocMetadata & { detail: Detail };
export interface Detail {
filename: string;
reading_time: ReadTimeResults;
create_date?: Date;
update_date?: Date;
}
export default async function pluginContentDocs(
context: LoadContext,
options: PluginOptions & { debug?: boolean }
): Promise<Plugin<LoadedContent>> {
const ret = (await docsPlugin.call(
this,
context,
options
)) as Plugin<LoadedContent>;
const themePath = path.resolve(__dirname, "./theme");
ret.getThemePath = () => {
return themePath;
};
const warpLoadContent = ret.loadContent;
ret.loadContent = async () => {
const ret = await warpLoadContent();
// 注入时间信息
const docs: DocMetadata[] = [];
const git = simpleGit();
ret.loadedVersions.forEach((version) => {
version.docs.forEach((doc) => {
docs.push(doc as any);
});
});
await Promise.all(
docs.map(async (doc) => {
// 读取文件内容, 查看标题, 查看日期
const filename = doc.source.replace("@site", ".");
const meta = matter.read(filename);
const detail: Detail = {
filename: filename,
reading_time: readingTime(meta.content),
};
return new Promise<void>((resolve) => {
// 读取git log文件时间
git.log<DefaultLogFields>(
{
format: "%ad",
file: filename,
},
(_, data) => {
if (meta.data["create_date"]) {
detail.create_date = new Date(meta.data["create_date"]);
} else {
detail.create_date = data.all.length
? new Date(data.all[data.all.length - 1].date)
: new Date();
}
if (meta.data["update_date"]) {
detail.update_date = new Date(meta.data["update_date"]);
} else {
detail.update_date = data.latest
? new Date(data.latest.date)
: new Date();
}
doc.detail = detail;
resolve();
}
);
});
})
);
// 排序创造时间列表
return ret;
};
const warpContentLoaded = ret.contentLoaded;
ret.contentLoaded = async ({ content, actions, allContent }) => {
const ret = await warpContentLoaded({
content,
actions,
allContent,
});
return ret;
};
return ret;
}

0
packages/docusaurus-plugin-content-docs/src/utils.tsx Normal file
View File

1
packages/docusaurus-plugin-docs-info/node_modules/.bin/docusaurus generated vendored
View File

@ -1 +0,0 @@
../../../../node_modules/@docusaurus/core/bin/docusaurus.mjs

3
packages/docusaurus-plugin-docs-info/package.json
View File

@ -10,6 +10,7 @@
"license": "ISC",
"dependencies": {
"@docusaurus/core": "^3.1.1",
"dayjs": "^1.11.10"
"dayjs": "^1.11.10",
"reading-time": "^1.5.0"
}
}

37
packages/docusaurus-plugin-docs-info/src/components/ArticleList/index.tsx
View File

@ -1,45 +1,21 @@
import { Article } from "../..";
import { FullVersion } from "@docusaurus/plugin-content-docs/lib/types.d.ts";
import { DocMetadata } from "@docusaurus/plugin-content-docs";
import { usePluginData } from "@docusaurus/useGlobalData";
import dayjs from "dayjs";
import Link from "@docusaurus/Link";
import { DocMetadata } from "docusaurus-plugin-content-docs/src";
const ArticleList: React.FC<{
list: Article[];
list: DocMetadata[];
}> = ({ list: data }) => {
const docsData = usePluginData("docusaurus-plugin-content-docs") as {
versions: FullVersion[];
};
const list: Array<Array<Article>> = [];
const map: Map<string, DocMetadata> = new Map();
for (let i = 0; i < docsData.versions[0].docs.length; i++) {
// @ts-ignore
map.set(docsData.versions[0].docs[i].path, docsData.versions[0].docs[i]);
}
const list: Array<Array<DocMetadata>> = [];
// 一行两个
const num = 3;
for (let i = 0; i < data.length && i < 8; i += num) {
list.push(data.slice(i, i + num));
}
// 构建与docs的连接
for (let i = 0; i < list.length; i++) {
for (let j = 0; j < list[i].length; j++) {
const val = list[i][j];
let path = val.filename.replace(/\.(md|mdx)/, "").substring(4);
if (
val.filename.endsWith("index.md") ||
val.filename.endsWith("index.mdx")
) {
path = path.split("/").slice(0, -1).join("/") + "/";
}
const doc = map.get(path);
if (doc) {
// @ts-ignore
list[i][j].link = doc.path;
}
}
}
return (
<>
@ -56,8 +32,7 @@ const ArticleList: React.FC<{
>
<div className="card__header">
<Link
// @ts-ignore
to={val.link}
to={val.permalink}
className="text-left"
style={{
display: "block",
@ -79,7 +54,9 @@ const ArticleList: React.FC<{
fontSize: "12px",
}}
>
<p>{dayjs(val.create_date).format("YYYY年MM月DD日")}</p>
<p>
{dayjs(val.detail.create_date).format("YYYY年MM月DD日")}
</p>
<Link
// @ts-ignore
to={val.link}

2
packages/docusaurus-plugin-docs-info/src/components/LatestDocs/index.tsx
View File

@ -1,5 +1,5 @@
import { usePluginData } from "@docusaurus/useGlobalData";
import { Articles } from "../..";
import { Articles } from "docusaurus-plugin-docs-info";
import ArticleList from "../ArticleList";
import Link from "@docusaurus/Link";

84
packages/docusaurus-plugin-docs-info/src/index.ts
View File

@ -3,6 +3,9 @@ import fs from "fs";
import simpleGit, { DefaultLogFields } from "simple-git";
import matter from "gray-matter";
import { LoadContext, Plugin } from "@docusaurus/types";
import readingTime, { ReadTimeResults } from "reading-time";
import { LoadedVersion } from "@docusaurus/plugin-content-docs";
import { DocMetadata } from "docusaurus-plugin-content-docs/src";
async function readDir(pathName: string) {
return new Promise<string[]>((resolve) => {
@ -32,12 +35,13 @@ async function readDir(pathName: string) {
export interface Article {
filename: string;
title: string;
reading_time: ReadTimeResults;
create_date?: Date;
update_date?: Date;
}
export interface Articles {
list: Article[];
list: DocMetadata[];
current: number;
total: number;
}
@ -52,7 +56,7 @@ export default function (
getThemePath() {
return themePath;
},
async contentLoaded({ content, actions }): Promise<void> {
async contentLoaded({ content, actions, allContent }): Promise<void> {
const { addRoute, createData, setGlobalData } = actions;
const isProd = process.env.NODE_ENV === "production";
if (!isProd && !options.debug) {
@ -64,70 +68,22 @@ export default function (
return;
}
// 读取docs下文件
const files = await readDir("./docs");
const git = simpleGit();
const articles = [];
await Promise.all(
files.map((file) => {
return new Promise<void>((resolve) => {
if (
!(
file.startsWith("_") ||
file.endsWith(".md") ||
file.endsWith(".mdx")
)
) {
return resolve();
}
// 读取文件内容, 查看标题, 查看日期
const meta = matter.read(file);
const article: Article = {
filename: file,
title:
meta.data["title"] ||
path.basename(file).split(".").slice(0, -1).join("."),
};
// 读取git log文件时间
git.log<DefaultLogFields>(
{
format: "%ad",
file: file,
},
(_, data) => {
if (meta.data["create_date"]) {
article.create_date = new Date(meta.data["create_date"]);
} else {
article.create_date = data.all.length
? new Date(data.all[data.all.length - 1].date)
: new Date();
}
if (meta.data["update_date"]) {
article.update_date = new Date(meta.data["update_date"]);
} else {
article.update_date = data.latest
? new Date(data.latest.date)
: new Date();
}
articles.push(article);
resolve();
}
);
});
})
);
// 20篇为一页, 创建时间由新到旧
articles.sort((a, b) => {
return b.create_date.getTime() - a.create_date.getTime();
const docsData = allContent["docusaurus-plugin-content-docs"] as {
default: { loadedVersions: LoadedVersion };
};
let docs = docsData.default.loadedVersions[0].docs as DocMetadata[];
// 文章时间排序
docs = docs.sort((a, b) => {
//@ts-ignore
return b.detail.create_date.getTime() - a.detail.create_date.getTime();
});
// 20篇为一页, 创建时间由新到旧
const pageSize = 21;
const latest = {
current: 1,
list: articles.slice(0, pageSize),
total: articles.length,
list: docs.slice(0, pageSize),
total: docs.length,
};
setGlobalData(latest);
@ -144,14 +100,14 @@ export default function (
exact: true,
});
for (let i = 1; i < Math.ceil(articles.length / pageSize); i++) {
for (let i = 1; i < Math.ceil(docs.length / pageSize); i++) {
const page = i + 1;
const pageData = await createData(
`timeline-${page}.json`,
JSON.stringify({
current: i + 1,
list: articles.slice(i * pageSize, (i + 1) * pageSize),
total: articles.length,
list: docs.slice(i * pageSize, (i + 1) * pageSize),
total: docs.length,
})
);
addRoute({

9
packages/docusaurus-plugin-docs-info/src/theme/Timeline/index.tsx
View File

@ -1,8 +1,8 @@
import Layout from "@theme/Layout";
import { Article, Articles } from "../..";
import ArticleList from "../../components/ArticleList";
import { Article, Articles } from "docusaurus-plugin-docs-info";
import { Pagination } from "antd";
import Link from "@docusaurus/Link";
import ArticleList from "../../components/ArticleList";
export interface TimelineProps {
articles: Articles;
@ -30,8 +30,11 @@ function Timeline({ articles }: TimelineProps) {
total={articles.total}
pageSize={20}
showSizeChanger={false}
style={{
marginBottom: "10px",
}}
itemRender={(page, type, el) => {
if (!page) {
if (type !== "page") {
return el;
}
if (page === 1) {