feat(v2): Provide blog plugin theme typing (#3267)

* feat(v2): Provide blog plugin theme typing

* Update packages/docusaurus-plugin-content-blog/index.d.ts

* Update packages/docusaurus-plugin-content-blog/index.d.ts

* Update packages/docusaurus-plugin-content-blog/index.d.ts

* Update packages/docusaurus-plugin-content-blog/index.d.ts

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>

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

@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable camelcase */
+
+declare module '@theme/BlogPostPage' {
+  export type FrontMatter = {
+    readonly title: string;
+    readonly author?: string;
+    readonly image?: string;
+    readonly tags?: readonly string[];
+    readonly keywords?: readonly string[];
+    readonly author_url?: string;
+    readonly authorURL?: string;
+    readonly author_title?: string;
+    readonly authorTitle?: string;
+    readonly author_image_url?: string;
+    readonly authorImageURL?: string;
+    readonly hide_table_of_contents?: boolean;
+  };
+
+  export type Metadata = {
+    readonly title: string;
+    readonly date: string;
+    readonly permalink: string;
+    readonly description?: string;
+    readonly editUrl?: string;
+    readonly readingTime?: number;
+    readonly truncated?: string;
+    readonly nextItem?: {readonly title: string; readonly permalink: string};
+    readonly prevItem?: {readonly title: string; readonly permalink: string};
+    readonly tags: readonly {
+      readonly label: string;
+      readonly permalink: string;
+    }[];
+  };
+
+  export type Content = {
+    readonly frontMatter: FrontMatter;
+    readonly metadata: Metadata;
+    readonly rightToc: any; // TODO where to define this shared type?
+    (): JSX.Element;
+  };
+
+  export type Props = {
+    readonly content: Content;
+  };
+
+  const BlogPostPage: (props: Props) => JSX.Element;
+  export default BlogPostPage;
+}
+
+declare module '@theme/BlogListPage' {
+  // eslint-disable-next-line import/no-duplicates
+  import type {Content} from '@theme/BlogPostPage';
+
+  export type Item = {
+    readonly content: () => JSX.Element;
+  };
+
+  export type Props = {
+    readonly metadata: {
+      readonly blogDescription: string;
+      readonly nextPage?: string;
+      readonly page: number;
+      readonly permalink: string;
+      readonly postsPerPage: number;
+      readonly previousPage?: string;
+      readonly totalCount: number;
+      readonly totalPages: number;
+    };
+    readonly items: readonly {readonly content: Content}[];
+  };
+
+  const BlogListPage: (props: Props) => JSX.Element;
+  export default BlogListPage;
+}
+
+declare module '@theme/BlogTagsListPage' {
+  export type Tag = {
+    permalink: string;
+    name: string;
+    count: number;
+    allTagsPath: string;
+    slug: string;
+  };
+
+  export type Props = {readonly tags: Readonly<Record<string, Tag>>};
+
+  const BlogTagsListPage: (props: Props) => JSX.Element;
+  export default BlogTagsListPage;
+}
+
+declare module '@theme/BlogTagsPostsPage' {
+  import type {Tag} from '@theme/BlogTagsListPage';
+  // eslint-disable-next-line import/no-duplicates
+  import type {Content} from '@theme/BlogPostPage';
+
+  export type Props = {
+    readonly metadata: Tag;
+    readonly items: readonly {readonly content: Content}[];
+  };
+}

packages/docusaurus-plugin-content-blog/package.json

@@ -3,6 +3,7 @@
   "version": "2.0.0-alpha.61",
   "description": "Blog plugin for Docusaurus",
   "main": "lib/index.js",
+  "types": "index.d.ts",
   "scripts": {
     "build": "tsc",
     "watch": "tsc --watch"

packages/docusaurus-theme-classic/package.json

@@ -36,6 +36,7 @@
   },
   "peerDependencies": {
     "@docusaurus/core": "^2.0.0",
+    "@docusaurus/plugin-content-blog": "^2.0.0-alpha.61",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"
   },

packages/docusaurus-theme-classic/src/theme/BlogListPage/index.tsx

@@ -11,11 +11,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogListPaginator from '@theme/BlogListPaginator';
-
-type Props = {
-  metadata: {permalink: string; title: string; blogDescription: string};
-  items: {content}[];
-};
+import type {Props} from '@theme/BlogListPage';
 
 function BlogListPage(props: Props): JSX.Element {
   const {metadata, items} = props;

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

@@ -12,6 +12,7 @@ import {MDXProvider} from '@mdx-js/react';
 import Head from '@docusaurus/Head';
 import Link from '@docusaurus/Link';
 import MDXComponents from '@theme/MDXComponents';
+import type {FrontMatter, Metadata} from '@theme/BlogPostPage';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import styles from './styles.module.css';
@@ -31,7 +32,15 @@ const MONTHS = [
   'December',
 ];
 
-function BlogPostItem(props): JSX.Element {
+type Props = {
+  readonly frontMatter: FrontMatter;
+  readonly metadata: Metadata;
+  readonly truncated?: boolean;
+  readonly isBlogPostPage?: boolean;
+  readonly children: JSX.Element;
+};
+
+function BlogPostItem(props: Props): JSX.Element {
   const {
     children,
     frontMatter,

packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx

@@ -10,9 +10,10 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogPostPaginator from '@theme/BlogPostPaginator';
+import type {Props} from '@theme/BlogPostPage';
 import TOC from '@theme/TOC';
 
-function BlogPostPage(props): JSX.Element {
+function BlogPostPage(props: Props): JSX.Element {
   const {content: BlogPostContents} = props;
   const {frontMatter, metadata} = BlogPostContents;
   const {title, description, nextItem, prevItem, editUrl} = metadata;

packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/index.tsx

@@ -9,15 +9,14 @@ import React from 'react';
 
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
+import type {Props} from '@theme/BlogTagsListPage';
 
 function getCategoryOfTag(tag: string) {
   // tag's category should be customizable
   return tag[0].toUpperCase();
 }
 
-type Tag = {permalink: string; name: string; count: number};
-
-function BlogTagsListPage(props: {tags: Record<string, Tag>}): JSX.Element {
+function BlogTagsListPage(props: Props): JSX.Element {
   const {tags} = props;
 
   const tagCategories: {[category: string]: string[]} = {};

packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/index.tsx

@@ -10,12 +10,13 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import BlogPostItem from '@theme/BlogPostItem';
 import Link from '@docusaurus/Link';
+import type {Props} from '@theme/BlogTagsPostsPage';
 
 function pluralize(count: number, word: string) {
   return count > 1 ? `${word}s` : word;
 }
 
-function BlogTagsPostPage(props): JSX.Element {
+function BlogTagsPostPage(props: Props): JSX.Element {
   const {metadata, items} = props;
   const {allTagsPath, name: tagName, count} = metadata;
 

packages/docusaurus-theme-classic/src/types.d.ts

@@ -5,5 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// eslint-disable-next-line spaced-comment
+/* eslint-disable spaced-comment */
 /// <reference types="@docusaurus/module-type-aliases" />
+/// <reference types="@docusaurus/plugin-content-blog" />