misc(v2): change blog front matter to snake_case (#1989)

* misc(v2): change blog front matter to snake_case

* Fix blog image url

* Add docs for change

* More migration docs

packages/docusaurus-init/templates/classic/blog/2019-05-28-hola.md

@@ -2,10 +2,9 @@
 id: hola
 title: Hola
 author: Gao Wei
-authorTitle: Docusaurus Core Team
+author_title: Docusaurus Core Team
-authorURL: https://github.com/wgao19
+author_url: https://github.com/wgao19
-authorImageURL: https://avatars1.githubusercontent.com/u/2055384?v=4
+author_image_url: https://avatars1.githubusercontent.com/u/2055384?v=4
-authorTwitter: wgao19
 tags: [hola, docusaurus]
 ---
 

packages/docusaurus-init/templates/classic/blog/2019-05-29-hello-world.md

@@ -2,10 +2,9 @@
 id: hello-world
 title: Hello
 author: Endilie Yacop Sucipto
-authorTitle: Maintainer of Docusaurus
+author_title: Maintainer of Docusaurus
-authorURL: https://github.com/endiliey
+author_url: https://github.com/endiliey
-authorImageURL: https://avatars1.githubusercontent.com/u/17883920?s=460&v=4
+author_image_url: https://avatars1.githubusercontent.com/u/17883920?s=460&v=4
-authorTwitter: endiliey
 tags: [hello, docusaurus]
 ---
 

packages/docusaurus-init/templates/classic/blog/2019-05-30-welcome.md

@@ -2,10 +2,9 @@
 id: welcome
 title: Welcome
 author: Yangshun Tay
-authorTitle: Front End Engineer @ Facebook
+author_title: Front End Engineer @ Facebook
-authorURL: https://github.com/yangshun
+author_url: https://github.com/yangshun
-authorImageURL: https://avatars0.githubusercontent.com/u/1315101?s=400&v=4
+author_image_url: https://avatars0.githubusercontent.com/u/1315101?s=400&v=4
-authorTwitter: yangshunz
 tags: [facebook, hello, docusaurus]
 ---
 

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

@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import fs from 'fs-extra';
 import globby from 'globby';
 import path from 'path';
@@ -11,7 +18,7 @@ export function truncate(fileString: string, truncateMarker: RegExp | string) {
 }
 
 // YYYY-MM-DD-{name}.mdx?
-// prefer named capture, but old node version do not support
+// prefer named capture, but old Node version does not support.
 const FILENAME_PATTERN = /^(\d{4}-\d{1,2}-\d{1,2})-?(.*?).mdx?$/;
 
 function toUrl({date, link}: DateLink) {
@@ -93,7 +100,8 @@ export async function generateBlogPosts(
 
   await Promise.all(
     blogFiles.map(async (relativeSource: string) => {
-      // Cannot use path.join() as it resolves '../' and removes the '@site'. Let webpack loader resolve it.
+      // Cannot use path.join() as it resolves '../' and removes the '@site'.
+      // Let webpack loader resolve it.
       const source = path.join(blogDir, relativeSource);
       const aliasedSource = `@site/${path.relative(siteDir, source)}`;
       const blogFileName = path.basename(relativeSource);
@@ -102,7 +110,7 @@ export async function generateBlogPosts(
       const {frontMatter, excerpt} = parse(fileString);
 
       let date;
-      // extract date and title from filename
+      // Extract date and title from filename.
       const match = blogFileName.match(FILENAME_PATTERN);
       let linkName = blogFileName.replace(/\.mdx?$/, '');
       if (match) {
@@ -110,11 +118,11 @@ export async function generateBlogPosts(
         date = new Date(dateString);
         linkName = name;
       }
-      // prefer usedefined date
+      // Prefer user-defined date.
       if (frontMatter.date) {
         date = new Date(frontMatter.date);
       }
-      // use file create time for blog
+      // Use file create time for blog.
       date = date || (await fs.stat(source)).birthtime;
       frontMatter.title = frontMatter.title || linkName;
 
@@ -135,6 +143,7 @@ export async function generateBlogPosts(
       });
     }),
   );
+
   blogPosts.sort(
     (a, b) => b.metadata.date.getTime() - a.metadata.date.getTime(),
   );

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

@@ -4,6 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 import fs from 'fs-extra';
 import _ from 'lodash';
 import path from 'path';

packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.js

@@ -14,6 +14,21 @@ import MDXComponents from '@theme/MDXComponents';
 
 import styles from './styles.module.css';
 
+const MONTHS = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
 function BlogPostItem(props) {
   const {
     children,
@@ -23,32 +38,20 @@ function BlogPostItem(props) {
     isBlogPostPage = false,
   } = props;
   const {date, permalink, tags} = metadata;
-  const {author, authorURL, authorTitle, authorFBID, title} = frontMatter;
+  const {author, title} = frontMatter;
+
+  const authorURL = frontMatter.author_url || frontMatter.authorURL;
+  const authorTitle = frontMatter.author_title || frontMatter.authorTitle;
+  const authorImageURL =
+    frontMatter.author_image_url || frontMatter.authorImageURL;
 
   const renderPostHeader = () => {
     const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
     const match = date.substring(0, 10).split('-');
     const year = match[0];
-    const month = [
+    const month = MONTHS[parseInt(match[1], 10) - 1];
-      'January',
-      'February',
-      'March',
-      'April',
-      'May',
-      'June',
-      'July',
-      'August',
-      'September',
-      'October',
-      'November',
-      'December',
-    ][parseInt(match[1], 10) - 1];
     const day = parseInt(match[2], 10);
 
-    const authorImageURL = authorFBID
-      ? `https://graph.facebook.com/${authorFBID}/picture/?height=200&width=200`
-      : frontMatter.authorImageURL;
-
     return (
       <header>
         <TitleHeading

website-1.x/blog/2017-12-14-introducing-docusaurus.md

@@ -2,6 +2,7 @@
 title: Introducing Docusaurus
 author: Joel Marcey
 authorURL: http://twitter.com/JoelMarcey
+authorImageURL: https://graph.facebook.com/611217057/picture/?height=200&width=200
 authorFBID: 611217057
 authorTwitter: JoelMarcey
 ---

website-1.x/blog/2018-04-30-How-I-Converted-Profilo-To-Docusaurus.md

@@ -2,6 +2,7 @@
 title: How I Converted Profilo to Docusaurus in Under 2 Hours
 author: Christine Abernathy
 authorURL: http://twitter.com/abernathyca
+authorImageURL: https://graph.facebook.com/1424840234/picture/?height=200&width=200
 authorFBID: 1424840234
 authorTwitter: abernathyca
 tags: [profilo, adoption]

website-1.x/blog/2018-12-14-Happy-First-Birthday-Slash.md

@@ -3,6 +3,7 @@ title: Happy 1st Birthday Slash!
 author: Joel Marcey
 authorTitle: Co-creator of Docusaurus
 authorURL: https://github.com/JoelMarcey
+authorImageURL: https://graph.facebook.com/611217057/picture/?height=200&width=200
 authorFBID: 611217057
 authorTwitter: JoelMarcey
 tags: [birth]

website/docs/blog.md

@@ -26,10 +26,11 @@ For example, at `my-website/blog/2019-09-05-hello-docusaurus-v2.md`:
 ```yml
 ---
 title: Welcome Docusaurus v2
-author: Dattatreya Tripathy
+author: Joel Marcey
-authorTitle: Contributor of Docusaurus 2
+author_title: Co-creator of Docusaurus 1
-authorURL: https://github.com/dt97
+author_url: https://github.com/JoelMarcey
-authorTwitter: CuriousDT
+author_image_url: https://graph.facebook.com/611217057/picture/?height=200&width=200
+authorURL: https://github.com/JoelMarcey
 tags: [hello, docusaurus-v2]
 ---
 Welcome to this blog. This blog is created with [**Docusaurus 2 alpha**](https://v2.docusaurus.io/).
@@ -46,8 +47,9 @@ A whole bunch of exploration to follow.
 The only required field is `title`; however, we provide options to add author information to your blog post as well along with other options.
 
 - `author` - The author name to be displayed.
-- `authorURL` - The URL that the author's name will be linked to. This could be a GitHub, Twitter, Facebook account URL, etc.
+- `author_url` - The URL that the author's name will be linked to. This could be a GitHub, Twitter, Facebook profile URL, etc.
-- `authorImageURL` - The URL to the author's image. (Note: If you use both `authorFBID` and `authorImageURL`, `authorFBID` will take precedence. Don't include `authorFBID` if you want `authorImageURL` to appear.)
+- `author_image_url` - The URL to the author's thumbnail image.
+- `author_title` - A description of the author.
 - `title` - The blog post title.
 - `tags` - A list of strings to tag to your post.
 

website/docs/migrating-from-v1-to-v2.md

@@ -400,9 +400,9 @@ This will copy the current `<Footer />` component used by the theme to a `src/th
 
 ## Update your page files
 
-Please refer to [creating pages](creating-pages.md) to learn how Docusaurus 2 pages work. After reading that, you can notice that we have to move `pages/en` files in v1 to `src/pages` instead.
+Please refer to [creating pages](creating-pages.md) to learn how Docusaurus 2 pages work. After reading that, notice that you have to move `pages/en` files in v1 to `src/pages` instead.
 
-`CompLibrary` is deprecated in v2, so you have to write your own React component or use Infima styles (Docs will be available soon, sorry about that! In the meanwhile, inspect the V2 website to see what styles are available).
+`CompLibrary` is deprecated in v2, so you have to write your own React component or use Infima styles (Docs will be available soon, sorry about that! In the meanwhile, inspect the V2 website or view https://facebookincubator.github.io/infima/ to see what styles are available).
 
 - The following code could be helpful for migration of various pages
   - Index page - [Flux](https://github.com/facebook/flux/blob/master/website/src/pages/index.js) (recommended), [Docusaurus 2](https://github.com/facebook/docusaurus/blob/master/website/src/pages/index.js), [Hermes](https://github.com/facebook/hermes/blob/master/website/src/pages/index.js),
@@ -418,6 +418,12 @@ In Docusaurus 2, the markdown syntax has been changed to [MDX](https://mdxjs.com
 
 Refer to the [multi-language support code blocks](markdown-features.mdx#multi-language-support-code-blocks) section.
 
+## Update blog
+
+The Docusaurus frontmatter fields for the blog have been changed from camelCase to snake_case to be consistent with the docs.
+
+The fields `authorFBID` and `authorTwitter` have been deprecated. They are only used for generating the profile image of the author which can be done via the `author_image_url` field.
+
 ## Update `.gitignore`
 
 The `.gitignore` in your `website` should contain: