feat(v2): meta description (#1447)

* feat(v2): meta description

* add description for blog as well

* fix non-descriptive text link

* remove font awesome

* switch front-matter -> gray-matter

packages/docusaurus-plugin-content-docs/src/__tests__/__fixtures__/website/docs/foo/bar.md

@@ -1,6 +1,7 @@
 ---
 id: bar
 title: Bar
+description: This is custom description
 ---
 
 # Remarkable

packages/docusaurus-plugin-content-docs/src/__tests__/index.test.js

@@ -39,6 +39,7 @@ describe('loadDocs', () => {
       sidebar: 'docs',
       source: path.join(docsDir, 'hello.md'),
       title: 'Hello, World !',
+      description: `Hi, Endilie here :)`,
     });
     expect(docsMetadata['foo/bar']).toEqual({
       category: 'Test',
@@ -49,6 +50,7 @@ describe('loadDocs', () => {
       sidebar: 'docs',
       source: path.join(docsDir, 'foo', 'bar.md'),
       title: 'Bar',
+      description: 'This is custom description',
     });
   });
 });

packages/docusaurus-plugin-content-docs/src/__tests__/metadata.test.js

@@ -40,12 +40,14 @@ describe('processMetadata', () => {
       permalink: '/docs/foo/bar',
       source: path.join(docsDir, sourceA),
       title: 'Bar',
+      description: 'This is custom description',
     });
     expect(dataB).toEqual({
       id: 'hello',
       permalink: '/docs/hello',
       source: path.join(docsDir, sourceB),
       title: 'Hello, World !',
+      description: `Hi, Endilie here :)`,
     });
   });
 
@@ -57,6 +59,7 @@ describe('processMetadata', () => {
       permalink: '/docs/endiliey/permalink',
       source: path.join(docsDir, source),
       title: 'Permalink',
+      description: 'This has a different permalink',
     });
   });
 });

packages/docusaurus-plugin-content-docs/src/markdown/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const fm = require('front-matter');
+const matter = require('gray-matter');
 const {getOptions} = require('loader-utils');
 const {resolve} = require('url');
 
@@ -17,7 +17,7 @@ module.exports = async function(fileString) {
   const {docsDir, sourceToPermalink} = options;
 
   // Extract content of markdown (without frontmatter).
-  const {body} = fm(fileString);
+  let {content} = matter(fileString);
 
   // Determine the source dir. e.g: /docs, /website/versioned_docs/version-1.0.0
   let sourceDir;
@@ -27,10 +27,9 @@ module.exports = async function(fileString) {
   }
 
   // Replace internal markdown linking (except in fenced blocks).
-  let content = body;
   if (sourceDir) {
     let fencedBlock = false;
-    const lines = body.split('\n').map(line => {
+    const lines = content.split('\n').map(line => {
       if (line.trim().startsWith('```')) {
         fencedBlock = !fencedBlock;
       }

packages/docusaurus-plugin-content-docs/src/metadata.js

@@ -18,7 +18,7 @@ module.exports = async function processMetadata(
 ) {
   const filepath = path.resolve(refDir, source);
   const fileString = await fs.readFile(filepath, 'utf-8');
-  const {metadata} = parse(fileString);
+  const {metadata = {}, excerpt} = parse(fileString);
 
   // Default id is the file name.
   if (!metadata.id) {
@@ -33,6 +33,10 @@ module.exports = async function processMetadata(
     metadata.title = metadata.id;
   }
 
+  if (!metadata.description) {
+    metadata.description = excerpt;
+  }
+
   const dirName = path.dirname(source);
   if (dirName !== '.') {
     const prefix = dirName;

packages/docusaurus-plugin-content-docs/src/theme/DocPage/index.js

@@ -14,13 +14,19 @@ import DocSidebar from '@theme/DocSidebar';
 
 function DocPage(props) {
   const {route, docsMetadata, location} = props;
+  const {permalinkToId} = docsMetadata;
+  const id =
+    permalinkToId[location.pathname] ||
+    permalinkToId[location.pathname.replace(/\/$/, '')];
+  const metadata = docsMetadata.docs[id] || {};
+  const {sidebar, description} = metadata;
 
   return (
-    <Layout noFooter>
+    <Layout noFooter description={description}>
       <div className="container container--fluid">
         <div className="row">
           <div className="col col--3">
-            <DocSidebar docsMetadata={docsMetadata} location={location} />
+            <DocSidebar docsMetadata={docsMetadata} sidebar={sidebar} />
           </div>
           <div className="col col--9">
             {renderRoutes(route.routes, {docsMetadata})}

packages/docusaurus-plugin-content-docs/src/theme/DocSidebar/index.js

@@ -12,13 +12,7 @@ import Link from '@docusaurus/Link'; // eslint-disable-line
 import './styles.css';
 
 function DocSidebar(props) {
-  const {docsMetadata, location} = props;
-
-  const id =
-    docsMetadata.permalinkToId[location.pathname] ||
-    docsMetadata.permalinkToId[location.pathname.replace(/\/$/, '')];
-  const metadata = docsMetadata.docs[id] || {};
-  const {sidebar} = metadata;
+  const {docsMetadata, sidebar} = props;
 
   if (!sidebar) {
     return null;