@docusaurus/theme-classic 2.0.0-beta.21 → 2.0.0-beta.22

package/src/theme/BlogPostItem/Header/Info/index.tsx

@@ -0,0 +1,71 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import {usePluralForm} from '@docusaurus/theme-common';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+import type {Props} from '@theme/BlogPostItem/Header/Info';
+
+import styles from './styles.module.css';
+
+// Very simple pluralization: probably good enough for now
+function useReadingTimePlural() {
+  const {selectMessage} = usePluralForm();
+  return (readingTimeFloat: number) => {
+    const readingTime = Math.ceil(readingTimeFloat);
+    return selectMessage(
+      readingTime,
+      translate(
+        {
+          id: 'theme.blog.post.readingTime.plurals',
+          description:
+            'Pluralized label for "{readingTime} min read". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',
+          message: 'One min read|{readingTime} min read',
+        },
+        {readingTime},
+      ),
+    );
+  };
+}
+
+function ReadingTime({readingTime}: {readingTime: number}) {
+  const readingTimePlural = useReadingTimePlural();
+  return <>{readingTimePlural(readingTime)}</>;
+}
+
+function Date({date, formattedDate}: {date: string; formattedDate: string}) {
+  return (
+    <time dateTime={date} itemProp="datePublished">
+      {formattedDate}
+    </time>
+  );
+}
+
+function Spacer() {
+  return <>{' · '}</>;
+}
+
+export default function BlogPostItemHeaderInfo({
+  className,
+}: Props): JSX.Element {
+  const {metadata} = useBlogPost();
+  const {date, formattedDate, readingTime} = metadata;
+
+  return (
+    <div className={clsx(styles.container, 'margin-vert--md', className)}>
+      <Date date={date} formattedDate={formattedDate} />
+      {typeof readingTime !== 'undefined' && (
+        <>
+          <Spacer />
+          <ReadingTime readingTime={readingTime} />
+        </>
+      )}
+    </div>
+  );
+}

package/src/theme/BlogPostItem/Header/Info/styles.module.css

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+.container {
+  font-size: 0.9rem;
+}

package/src/theme/BlogPostItem/Header/Title/index.tsx

@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+import type {Props} from '@theme/BlogPostItem/Header/Title';
+
+import styles from './styles.module.css';
+
+export default function BlogPostItemHeaderTitle({
+  className,
+}: Props): JSX.Element {
+  const {metadata, isBlogPostPage} = useBlogPost();
+  const {permalink, title} = metadata;
+  const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
+  return (
+    <TitleHeading className={clsx(styles.title, className)} itemProp="headline">
+      {isBlogPostPage ? (
+        title
+      ) : (
+        <Link itemProp="url" to={permalink}>
+          {title}
+        </Link>
+      )}
+    </TitleHeading>
+  );
+}

package/{lib/theme/BlogPostItem → src/theme/BlogPostItem/Header/Title}/styles.module.css

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.blogPostTitle {
+.title {
   font-size: 3rem;
 }
 
@@ -13,15 +13,7 @@
   Blog post title should be smaller on smaller devices
 **/
 @media (max-width: 576px) {
-  .blogPostTitle {
+  .title {
     font-size: 2rem;
   }
 }
-
-.blogPostData {
-  font-size: 0.9rem;
-}
-
-.blogPostDetailsFull {
-  flex-direction: column;
-}

package/src/theme/BlogPostItem/Header/index.tsx

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import BlogPostItemHeaderTitle from '@theme/BlogPostItem/Header/Title';
+import BlogPostItemHeaderInfo from '@theme/BlogPostItem/Header/Info';
+import BlogPostItemHeaderAuthors from '@theme/BlogPostItem/Header/Authors';
+
+export default function BlogPostItemHeader(): JSX.Element {
+  return (
+    <header>
+      <BlogPostItemHeaderTitle />
+      <BlogPostItemHeaderInfo />
+      <BlogPostItemHeaderAuthors />
+    </header>
+  );
+}

package/src/theme/BlogPostItem/index.tsx

@@ -7,155 +7,29 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import Translate, {translate} from '@docusaurus/Translate';
-import Link from '@docusaurus/Link';
-import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
-import {usePluralForm} from '@docusaurus/theme-common';
-import {blogPostContainerID} from '@docusaurus/utils-common';
-import MDXContent from '@theme/MDXContent';
-import EditThisPage from '@theme/EditThisPage';
-import TagsListInline from '@theme/TagsListInline';
-import BlogPostAuthors from '@theme/BlogPostAuthors';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+import BlogPostItemContainer from '@theme/BlogPostItem/Container';
+import BlogPostItemHeader from '@theme/BlogPostItem/Header';
+import BlogPostItemContent from '@theme/BlogPostItem/Content';
+import BlogPostItemFooter from '@theme/BlogPostItem/Footer';
 import type {Props} from '@theme/BlogPostItem';
 
-import styles from './styles.module.css';
-
-// Very simple pluralization: probably good enough for now
-function useReadingTimePlural() {
-  const {selectMessage} = usePluralForm();
-  return (readingTimeFloat: number) => {
-    const readingTime = Math.ceil(readingTimeFloat);
-    return selectMessage(
-      readingTime,
-      translate(
-        {
-          id: 'theme.blog.post.readingTime.plurals',
-          description:
-            'Pluralized label for "{readingTime} min read". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',
-          message: 'One min read|{readingTime} min read',
-        },
-        {readingTime},
-      ),
-    );
-  };
+// apply a bottom margin in list view
+function useContainerClassName() {
+  const {isBlogPostPage} = useBlogPost();
+  return !isBlogPostPage ? 'margin-bottom--xl' : undefined;
 }
 
-export default function BlogPostItem(props: Props): JSX.Element {
-  const readingTimePlural = useReadingTimePlural();
-  const {withBaseUrl} = useBaseUrlUtils();
-  const {
-    children,
-    frontMatter,
-    assets,
-    metadata,
-    truncated,
-    isBlogPostPage = false,
-  } = props;
-  const {
-    date,
-    formattedDate,
-    permalink,
-    tags,
-    readingTime,
-    title,
-    editUrl,
-    authors,
-  } = metadata;
-
-  const image = assets.image ?? frontMatter.image;
-  const truncatedPost = !isBlogPostPage && truncated;
-  const tagsExists = tags.length > 0;
-  const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
-
+export default function BlogPostItem({
+  children,
+  className,
+}: Props): JSX.Element {
+  const containerClassName = useContainerClassName();
   return (
-    <article
-      className={!isBlogPostPage ? 'margin-bottom--xl' : undefined}
-      itemProp="blogPost"
-      itemScope
-      itemType="http://schema.org/BlogPosting">
-      <header>
-        <TitleHeading className={styles.blogPostTitle} itemProp="headline">
-          {isBlogPostPage ? (
-            title
-          ) : (
-            <Link itemProp="url" to={permalink}>
-              {title}
-            </Link>
-          )}
-        </TitleHeading>
-        <div className={clsx(styles.blogPostData, 'margin-vert--md')}>
-          <time dateTime={date} itemProp="datePublished">
-            {formattedDate}
-          </time>
-
-          {typeof readingTime !== 'undefined' && (
-            <>
-              {' · '}
-              {readingTimePlural(readingTime)}
-            </>
-          )}
-        </div>
-        <BlogPostAuthors authors={authors} assets={assets} />
-      </header>
-
-      {image && (
-        <meta itemProp="image" content={withBaseUrl(image, {absolute: true})} />
-      )}
-
-      <div
-        // This ID is used for the feed generation to locate the main content
-        id={isBlogPostPage ? blogPostContainerID : undefined}
-        className="markdown"
-        itemProp="articleBody">
-        <MDXContent>{children}</MDXContent>
-      </div>
-
-      {(tagsExists || truncated) && (
-        <footer
-          className={clsx(
-            'row docusaurus-mt-lg',
-            isBlogPostPage && styles.blogPostDetailsFull,
-          )}>
-          {tagsExists && (
-            <div className={clsx('col', {'col--9': truncatedPost})}>
-              <TagsListInline tags={tags} />
-            </div>
-          )}
-
-          {isBlogPostPage && editUrl && (
-            <div className="col margin-top--sm">
-              <EditThisPage editUrl={editUrl} />
-            </div>
-          )}
-
-          {truncatedPost && (
-            <div
-              className={clsx('col text--right', {
-                'col--3': tagsExists,
-              })}>
-              <Link
-                to={metadata.permalink}
-                aria-label={translate(
-                  {
-                    message: 'Read more about {title}',
-                    id: 'theme.blog.post.readMoreLabel',
-                    description:
-                      'The ARIA label for the link to full blog posts from excerpts',
-                  },
-                  {title},
-                )}>
-                <b>
-                  <Translate
-                    id="theme.blog.post.readMore"
-                    description="The label used in blog post item excerpts to link to full blog posts">
-                    Read More
-                  </Translate>
-                </b>
-              </Link>
-            </div>
-          )}
-        </footer>
-      )}
-    </article>
+    <BlogPostItemContainer className={clsx(containerClassName, className)}>
+      <BlogPostItemHeader />
+      <BlogPostItemContent>{children}</BlogPostItemContent>
+      <BlogPostItemFooter />
+    </BlogPostItemContainer>
   );
 }

package/src/theme/BlogPostItems/index.tsx

@@ -0,0 +1,30 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import {BlogPostProvider} from '@docusaurus/theme-common/internal';
+import BlogPostItem from '@theme/BlogPostItem';
+import type {Props} from '@theme/BlogPostItems';
+
+export default function BlogPostItems({
+  items,
+  component: BlogPostItemComponent = BlogPostItem,
+}: Props): JSX.Element {
+  return (
+    <>
+      {items.map(({content: BlogPostContent}) => (
+        <BlogPostProvider
+          key={BlogPostContent.metadata.permalink}
+          content={BlogPostContent}>
+          <BlogPostItemComponent>
+            <BlogPostContent />
+          </BlogPostItemComponent>
+        </BlogPostProvider>
+      ))}
+    </>
+  );
+}

package/src/theme/BlogPostPage/Metadata/index.tsx

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import {PageMetadata} from '@docusaurus/theme-common';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+
+export default function BlogPostPageMetadata(): JSX.Element {
+  const {assets, metadata} = useBlogPost();
+  const {title, description, date, tags, authors, frontMatter} = metadata;
+
+  const {keywords} = frontMatter;
+  const image = assets.image ?? frontMatter.image;
+  return (
+    <PageMetadata
+      title={title}
+      description={description}
+      keywords={keywords}
+      image={image}>
+      <meta property="og:type" content="article" />
+      <meta property="article:published_time" content={date} />
+      {/* TODO double check those article meta array syntaxes, see https://ogp.me/#array */}
+      {authors.some((author) => author.url) && (
+        <meta
+          property="article:author"
+          content={authors
+            .map((author) => author.url)
+            .filter(Boolean)
+            .join(',')}
+        />
+      )}
+      {tags.length > 0 && (
+        <meta
+          property="article:tag"
+          content={tags.map((tag) => tag.label).join(',')}
+        />
+      )}
+    </PageMetadata>
+  );
+}

package/src/theme/BlogPostPage/index.tsx

@@ -5,56 +5,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
-import {
-  PageMetadata,
-  HtmlClassNameProvider,
-  ThemeClassNames,
-} from '@docusaurus/theme-common';
+import {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common';
+import {BlogPostProvider, useBlogPost} from '@docusaurus/theme-common/internal';
 import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogPostPaginator from '@theme/BlogPostPaginator';
+import BlogPostPageMetadata from '@theme/BlogPostPage/Metadata';
 import TOC from '@theme/TOC';
 import type {Props} from '@theme/BlogPostPage';
+import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
 
-function BlogPostPageMetadata(props: Props): JSX.Element {
-  const {content: BlogPostContents} = props;
-  const {assets, metadata} = BlogPostContents;
-  const {title, description, date, tags, authors, frontMatter} = metadata;
-  const {keywords} = frontMatter;
-  const image = assets.image ?? frontMatter.image;
-  return (
-    <PageMetadata
-      title={title}
-      description={description}
-      keywords={keywords}
-      image={image}>
-      <meta property="og:type" content="article" />
-      <meta property="article:published_time" content={date} />
-      {/* TODO double check those article meta array syntaxes, see https://ogp.me/#array */}
-      {authors.some((author) => author.url) && (
-        <meta
-          property="article:author"
-          content={authors
-            .map((author) => author.url)
-            .filter(Boolean)
-            .join(',')}
-        />
-      )}
-      {tags.length > 0 && (
-        <meta
-          property="article:tag"
-          content={tags.map((tag) => tag.label).join(',')}
-        />
-      )}
-    </PageMetadata>
-  );
-}
-
-function BlogPostPageContent(props: Props): JSX.Element {
-  const {content: BlogPostContents, sidebar} = props;
-  const {assets, metadata} = BlogPostContents;
+function BlogPostPageContent({
+  sidebar,
+  children,
+}: {
+  sidebar: BlogSidebar;
+  children: ReactNode;
+}): JSX.Element {
+  const {metadata, toc} = useBlogPost();
   const {nextItem, prevItem, frontMatter} = metadata;
   const {
     hide_table_of_contents: hideTableOfContents,
@@ -65,23 +35,15 @@ function BlogPostPageContent(props: Props): JSX.Element {
     <BlogLayout
       sidebar={sidebar}
       toc={
-        !hideTableOfContents &&
-        BlogPostContents.toc &&
-        BlogPostContents.toc.length > 0 ? (
+        !hideTableOfContents && toc.length > 0 ? (
           <TOC
-            toc={BlogPostContents.toc}
+            toc={toc}
             minHeadingLevel={tocMinHeadingLevel}
             maxHeadingLevel={tocMaxHeadingLevel}
           />
         ) : undefined
       }>
-      <BlogPostItem
-        frontMatter={frontMatter}
-        assets={assets}
-        metadata={metadata}
-        isBlogPostPage>
-        <BlogPostContents />
-      </BlogPostItem>
+      <BlogPostItem>{children}</BlogPostItem>
 
       {(nextItem || prevItem) && (
         <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
@@ -91,14 +53,19 @@ function BlogPostPageContent(props: Props): JSX.Element {
 }
 
 export default function BlogPostPage(props: Props): JSX.Element {
+  const BlogPostContent = props.content;
   return (
-    <HtmlClassNameProvider
-      className={clsx(
-        ThemeClassNames.wrapper.blogPages,
-        ThemeClassNames.page.blogPostPage,
-      )}>
-      <BlogPostPageMetadata {...props} />
-      <BlogPostPageContent {...props} />
-    </HtmlClassNameProvider>
+    <BlogPostProvider content={props.content} isBlogPostPage>
+      <HtmlClassNameProvider
+        className={clsx(
+          ThemeClassNames.wrapper.blogPages,
+          ThemeClassNames.page.blogPostPage,
+        )}>
+        <BlogPostPageMetadata />
+        <BlogPostPageContent sidebar={props.sidebar}>
+          <BlogPostContent />
+        </BlogPostPageContent>
+      </HtmlClassNameProvider>
+    </BlogPostProvider>
   );
 }

package/src/theme/BlogTagsListPage/index.tsx

@@ -16,7 +16,7 @@ import {
 import BlogLayout from '@theme/BlogLayout';
 import TagsListByLetter from '@theme/TagsListByLetter';
 import type {Props} from '@theme/BlogTagsListPage';
-import SearchMetadata from '../SearchMetadata';
+import SearchMetadata from '@theme/SearchMetadata';
 
 export default function BlogTagsListPage({tags, sidebar}: Props): JSX.Element {
   const title = translateTagsPageTitle();

package/src/theme/BlogTagsPostsPage/index.tsx

@@ -16,10 +16,10 @@ import {
 } from '@docusaurus/theme-common';
 import Link from '@docusaurus/Link';
 import BlogLayout from '@theme/BlogLayout';
-import BlogPostItem from '@theme/BlogPostItem';
 import BlogListPaginator from '@theme/BlogListPaginator';
 import SearchMetadata from '@theme/SearchMetadata';
 import type {Props} from '@theme/BlogTagsPostsPage';
+import BlogPostItems from '@theme/BlogPostItems';
 
 // Very simple pluralization: probably good enough for now
 function useBlogPostsPlural() {
@@ -39,14 +39,9 @@ function useBlogPostsPlural() {
     );
 }
 
-export default function BlogTagsPostsPage({
-  tag,
-  items,
-  sidebar,
-  listMetadata,
-}: Props): JSX.Element {
+function useBlogTagsPostsPageTitle(tag: Props['tag']): string {
   const blogPostsPlural = useBlogPostsPlural();
-  const title = translate(
+  return translate(
     {
       id: 'theme.blog.tagTitle',
       description: 'The title of the page for a blog tag',
@@ -54,40 +49,52 @@ export default function BlogTagsPostsPage({
     },
     {nPosts: blogPostsPlural(tag.count), tagName: tag.label},
   );
+}
 
+function BlogTagsPostsPageMetadata({tag}: Props): JSX.Element {
+  const title = useBlogTagsPostsPageTitle(tag);
+  return (
+    <>
+      <PageMetadata title={title} />
+      <SearchMetadata tag="blog_tags_posts" />
+    </>
+  );
+}
+
+function BlogTagsPostsPageContent({
+  tag,
+  items,
+  sidebar,
+  listMetadata,
+}: Props): JSX.Element {
+  const title = useBlogTagsPostsPageTitle(tag);
+  return (
+    <BlogLayout sidebar={sidebar}>
+      <header className="margin-bottom--xl">
+        <h1>{title}</h1>
+
+        <Link href={tag.allTagsPath}>
+          <Translate
+            id="theme.tags.tagsPageLink"
+            description="The label of the link targeting the tag list page">
+            View All Tags
+          </Translate>
+        </Link>
+      </header>
+      <BlogPostItems items={items} />
+      <BlogListPaginator metadata={listMetadata} />
+    </BlogLayout>
+  );
+}
+export default function BlogTagsPostsPage(props: Props): JSX.Element {
   return (
     <HtmlClassNameProvider
       className={clsx(
         ThemeClassNames.wrapper.blogPages,
         ThemeClassNames.page.blogTagPostListPage,
       )}>
-      <PageMetadata title={title} />
-      <SearchMetadata tag="blog_tags_posts" />
-      <BlogLayout sidebar={sidebar}>
-        <header className="margin-bottom--xl">
-          <h1>{title}</h1>
-
-          <Link href={tag.allTagsPath}>
-            <Translate
-              id="theme.tags.tagsPageLink"
-              description="The label of the link targeting the tag list page">
-              View All Tags
-            </Translate>
-          </Link>
-        </header>
-
-        {items.map(({content: BlogPostContent}) => (
-          <BlogPostItem
-            key={BlogPostContent.metadata.permalink}
-            frontMatter={BlogPostContent.frontMatter}
-            assets={BlogPostContent.assets}
-            metadata={BlogPostContent.metadata}
-            truncated>
-            <BlogPostContent />
-          </BlogPostItem>
-        ))}
-        <BlogListPaginator metadata={listMetadata} />
-      </BlogLayout>
+      <BlogTagsPostsPageMetadata {...props} />
+      <BlogTagsPostsPageContent {...props} />
     </HtmlClassNameProvider>
   );
 }

package/src/theme/CodeBlock/Container/index.tsx

@@ -7,11 +7,8 @@
 
 import React, {type ComponentProps} from 'react';
 import clsx from 'clsx';
-import {
-  usePrismTheme,
-  getPrismCssVariables,
-  ThemeClassNames,
-} from '@docusaurus/theme-common';
+import {ThemeClassNames, usePrismTheme} from '@docusaurus/theme-common';
+import {getPrismCssVariables} from '@docusaurus/theme-common/internal';
 import styles from './styles.module.css';
 
 export default function CodeBlockContainer<T extends 'div' | 'pre'>({
@@ -23,7 +20,7 @@ export default function CodeBlockContainer<T extends 'div' | 'pre'>({
   return (
     <As
       // Polymorphic components are hard to type, without `oneOf` generics
-      {...(props as never)}
+      {...(props as any)}
       style={prismCssVariables}
       className={clsx(
         props.className,