feat(v2): add edit url in post page (#2524)

* Add edit page url in docs

* feat(v2): Create EditPage component

* feat(v2): Improve component

* Add test

* çhore(v2): update description

* çhore(v2): update url

* fix(v2): test

* fix(v2): test

* feat(v2): change the prop of EditPage component

* chore(v2): Remove packages

* feat(v2): Update old tests

* chore(v2): fix package

* fix(v2): fix editUrl

* docs(v2): document editUrl

* --

* --

Co-authored-by: Yangshun Tay <tay.yang.shun@gmail.com>

packages/docusaurus-plugin-content-blog/src/__tests__/index.test.ts

@@ -28,6 +28,8 @@ describe('loadBlog', () => {
       } as LoadContext,
       {
         path: pluginPath,
+        editUrl:
+          'https://github.com/facebook/docusaurus/edit/master/website-1x',
       },
     );
     const {blogPosts} = await plugin.loadContent();
@@ -50,12 +52,15 @@ describe('loadBlog', () => {
       ...blogPosts.find(v => v.metadata.title === 'date-matter').metadata,
       ...{prevItem: undefined},
     }).toEqual({
+      editUrl:
+        'https://github.com/facebook/docusaurus/edit/master/website-1x/blog/date-matter.md',
       permalink: '/blog/2019/01/01/date-matter',
       readingTime: 0.02,
       source: path.join('@site', pluginPath, 'date-matter.md'),
       title: 'date-matter',
       description: `date inside front matter`,
       date: new Date('2019-01-01'),
+      prevItem: undefined,
       tags: [],
       nextItem: {
         permalink: '/blog/2018/12/14/Happy-First-Birthday-Slash',
@@ -68,6 +73,8 @@ describe('loadBlog', () => {
       blogPosts.find(v => v.metadata.title === 'Happy 1st Birthday Slash!')
         .metadata,
     ).toEqual({
+      editUrl:
+        'https://github.com/facebook/docusaurus/edit/master/website-1x/blog/2018-12-14-Happy-First-Birthday-Slash.md',
       permalink: '/blog/2018/12/14/Happy-First-Birthday-Slash',
       readingTime: 0.01,
       source: path.join(
@@ -90,6 +97,8 @@ describe('loadBlog', () => {
       ...blogPosts.find(v => v.metadata.title === 'no date').metadata,
       ...{prevItem: undefined},
     }).toEqual({
+      editUrl:
+        'https://github.com/facebook/docusaurus/edit/master/website-1x/blog/no date.md',
       permalink: noDatePermalink,
       readingTime: 0.01,
       source: noDateSource,
@@ -97,6 +106,7 @@ describe('loadBlog', () => {
       description: `no date`,
       date: noDateSourceBirthTime,
       tags: [],
+      prevItem: undefined,
       nextItem: {
         permalink: '/blog/2020/02/27/draft',
         title: 'draft',

packages/docusaurus-plugin-content-blog/src/blogUtils.ts

@@ -11,7 +11,12 @@ import path from 'path';
 import readingTime from 'reading-time';
 import {Feed} from 'feed';
 import {PluginOptions, BlogPost, DateLink} from './types';
-import {parse, normalizeUrl, aliasedSitePath} from '@docusaurus/utils';
+import {
+  parse,
+  normalizeUrl,
+  aliasedSitePath,
+  getEditUrl,
+} from '@docusaurus/utils';
 import {LoadContext} from '@docusaurus/types';
 
 export function truncate(fileString: string, truncateMarker: RegExp) {
@@ -86,7 +91,13 @@ export async function generateBlogPosts(
   {siteConfig, siteDir}: LoadContext,
   options: PluginOptions,
 ) {
-  const {include, routeBasePath, truncateMarker, showReadingTime} = options;
+  const {
+    include,
+    routeBasePath,
+    truncateMarker,
+    showReadingTime,
+    editUrl,
+  } = options;
 
   if (!fs.existsSync(blogDir)) {
     return [];
@@ -103,8 +114,12 @@ export async function generateBlogPosts(
     blogFiles.map(async (relativeSource: string) => {
       const source = path.join(blogDir, relativeSource);
       const aliasedSource = aliasedSitePath(source, siteDir);
+      const refDir = path.parse(blogDir).dir;
+      const relativePath = path.relative(refDir, source);
       const blogFileName = path.basename(relativeSource);
 
+      const editBlogUrl = getEditUrl(relativePath, editUrl);
+
       const fileString = await fs.readFile(source, 'utf-8');
       const {frontMatter, content, excerpt} = parse(fileString);
 
@@ -140,6 +155,7 @@ export async function generateBlogPosts(
             routeBasePath,
             frontMatter.id || toUrl({date, link: linkName}),
           ]),
+          editUrl: editBlogUrl,
           source: aliasedSource,
           description: frontMatter.description || excerpt,
           date,

packages/docusaurus-plugin-content-blog/src/index.ts

@@ -43,6 +43,7 @@ const DEFAULT_OPTIONS: PluginOptions = {
   showReadingTime: true,
   remarkPlugins: [],
   rehypePlugins: [],
+  editUrl: undefined,
   truncateMarker: /<!--\s*(truncate)\s*-->/, // Regex.
 };
 

packages/docusaurus-plugin-content-blog/src/types.ts

@@ -39,6 +39,7 @@ export interface PluginOptions {
     copyright: string;
     language?: string;
   };
+  editUrl?: string;
 }
 
 export interface BlogTags {
@@ -82,6 +83,7 @@ export interface MetaData {
   prevItem?: Paginator;
   nextItem?: Paginator;
   truncated: boolean;
+  editUrl?: string;
 }
 
 export interface Paginator {