@docusaurus/theme-classic 0.0.0-5183 → 0.0.0-5184

package/lib/theme/BlogPostItems/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/BlogPostItems';
+export default function BlogPostItems({ items, component: BlogPostItemComponent, }: Props): JSX.Element;

package/lib/theme/BlogPostItems/index.js

@@ -0,0 +1,27 @@
+/**
+ * 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';
+export default function BlogPostItems({
+  items,
+  component: BlogPostItemComponent = BlogPostItem,
+}) {
+  return (
+    <>
+      {items.map(({content: BlogPostContent}) => (
+        <BlogPostProvider
+          key={BlogPostContent.metadata.permalink}
+          content={BlogPostContent}>
+          <BlogPostItemComponent>
+            <BlogPostContent />
+          </BlogPostItemComponent>
+        </BlogPostProvider>
+      ))}
+    </>
+  );
+}

package/lib/theme/BlogPostPage/Metadata/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+export default function BlogPostPageMetadata(): JSX.Element;

package/lib/theme/BlogPostPage/Metadata/index.js

@@ -0,0 +1,41 @@
+/**
+ * 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() {
+  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/lib/theme/BlogPostPage/index.js

@@ -6,51 +6,15 @@
  */
 import React 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';
-function BlogPostPageMetadata(props) {
-  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) {
-  const {content: BlogPostContents, sidebar} = props;
-  const {assets, metadata} = BlogPostContents;
+function BlogPostPageContent({sidebar, children}) {
+  const {metadata, toc} = useBlogPost();
   const {nextItem, prevItem, frontMatter} = metadata;
   const {
     hide_table_of_contents: hideTableOfContents,
@@ -61,21 +25,15 @@ function BlogPostPageContent(props) {
     <BlogLayout
       sidebar={sidebar}
       toc={
-        !hideTableOfContents && 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} />
@@ -84,14 +42,19 @@ function BlogPostPageContent(props) {
   );
 }
 export default function BlogPostPage(props) {
+  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/lib/theme/BlogTagsPostsPage/index.d.ts

@@ -7,4 +7,4 @@
 /// <reference types="@docusaurus/plugin-content-blog" />
 /// <reference types="react" />
 import type { Props } from '@theme/BlogTagsPostsPage';
-export default function BlogTagsPostsPage({ tag, items, sidebar, listMetadata, }: Props): JSX.Element;
+export default function BlogTagsPostsPage(props: Props): JSX.Element;

package/lib/theme/BlogTagsPostsPage/index.js

@@ -15,9 +15,9 @@ 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 BlogPostItems from '@theme/BlogPostItems';
 // Very simple pluralization: probably good enough for now
 function useBlogPostsPlural() {
   const {selectMessage} = usePluralForm();
@@ -35,9 +35,9 @@ function useBlogPostsPlural() {
       ),
     );
 }
-export default function BlogTagsPostsPage({tag, items, sidebar, listMetadata}) {
+function useBlogTagsPostsPageTitle(tag) {
   const blogPostsPlural = useBlogPostsPlural();
-  const title = translate(
+  return translate(
     {
       id: 'theme.blog.tagTitle',
       description: 'The title of the page for a blog tag',
@@ -45,39 +45,45 @@ export default function BlogTagsPostsPage({tag, items, sidebar, listMetadata}) {
     },
     {nPosts: blogPostsPlural(tag.count), tagName: tag.label},
   );
+}
+function BlogTagsPostsPageMetadata({tag}) {
+  const title = useBlogTagsPostsPageTitle(tag);
+  return (
+    <>
+      <PageMetadata title={title} />
+      <SearchMetadata tag="blog_tags_posts" />
+    </>
+  );
+}
+function BlogTagsPostsPageContent({tag, items, sidebar, listMetadata}) {
+  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) {
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-5183",
+  "version": "0.0.0-5184",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,18 +20,18 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-5183",
-    "@docusaurus/mdx-loader": "0.0.0-5183",
-    "@docusaurus/module-type-aliases": "0.0.0-5183",
-    "@docusaurus/plugin-content-blog": "0.0.0-5183",
-    "@docusaurus/plugin-content-docs": "0.0.0-5183",
-    "@docusaurus/plugin-content-pages": "0.0.0-5183",
-    "@docusaurus/theme-common": "0.0.0-5183",
-    "@docusaurus/theme-translations": "0.0.0-5183",
-    "@docusaurus/types": "0.0.0-5183",
-    "@docusaurus/utils": "0.0.0-5183",
-    "@docusaurus/utils-common": "0.0.0-5183",
-    "@docusaurus/utils-validation": "0.0.0-5183",
+    "@docusaurus/core": "0.0.0-5184",
+    "@docusaurus/mdx-loader": "0.0.0-5184",
+    "@docusaurus/module-type-aliases": "0.0.0-5184",
+    "@docusaurus/plugin-content-blog": "0.0.0-5184",
+    "@docusaurus/plugin-content-docs": "0.0.0-5184",
+    "@docusaurus/plugin-content-pages": "0.0.0-5184",
+    "@docusaurus/theme-common": "0.0.0-5184",
+    "@docusaurus/theme-translations": "0.0.0-5184",
+    "@docusaurus/types": "0.0.0-5184",
+    "@docusaurus/utils": "0.0.0-5184",
+    "@docusaurus/utils-common": "0.0.0-5184",
+    "@docusaurus/utils-validation": "0.0.0-5184",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.0",
     "copy-text-to-clipboard": "^3.0.1",
@@ -64,5 +64,5 @@
   "engines": {
     "node": ">=16.14"
   },
-  "gitHead": "2279a7ff503fd0f2c8261c1890c1bfe10b4fcadc"
+  "gitHead": "d6f6ee218b4fbba6d3a86ee4a7a89e2ec2b479b9"
 }

package/src/theme/BlogListPage/index.tsx

@@ -15,10 +15,10 @@ import {
   ThemeClassNames,
 } from '@docusaurus/theme-common';
 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/BlogListPage';
+import BlogPostItems from '@theme/BlogPostItems';
 
 function BlogListPageMetadata(props: Props): JSX.Element {
   const {metadata} = props;
@@ -40,16 +40,7 @@ function BlogListPageContent(props: Props): JSX.Element {
   const {metadata, items, sidebar} = props;
   return (
     <BlogLayout sidebar={sidebar}>
-      {items.map(({content: BlogPostContent}) => (
-        <BlogPostItem
-          key={BlogPostContent.metadata.permalink}
-          frontMatter={BlogPostContent.frontMatter}
-          assets={BlogPostContent.assets}
-          metadata={BlogPostContent.metadata}
-          truncated={BlogPostContent.metadata.truncated}>
-          <BlogPostContent />
-        </BlogPostItem>
-      ))}
+      <BlogPostItems items={items} />
       <BlogListPaginator metadata={metadata} />
     </BlogLayout>
   );

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

@@ -0,0 +1,32 @@
+/**
+ * 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 {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+import type {Props} from '@theme/BlogPostItem/Container';
+
+export default function BlogPostItemContainer({
+  children,
+  className,
+}: Props): JSX.Element {
+  const {frontMatter, assets} = useBlogPost();
+  const {withBaseUrl} = useBaseUrlUtils();
+  const image = assets.image ?? frontMatter.image;
+  return (
+    <article
+      className={className}
+      itemProp="blogPost"
+      itemScope
+      itemType="http://schema.org/BlogPosting">
+      {image && (
+        <meta itemProp="image" content={withBaseUrl(image, {absolute: true})} />
+      )}
+      {children}
+    </article>
+  );
+}

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

@@ -0,0 +1,29 @@
+/**
+ * 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 {blogPostContainerID} from '@docusaurus/utils-common';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+import MDXContent from '@theme/MDXContent';
+import type {Props} from '@theme/BlogPostItem/Content';
+
+export default function BlogPostItemContent({
+  children,
+  className,
+}: Props): JSX.Element {
+  const {isBlogPostPage} = useBlogPost();
+  return (
+    <div
+      // This ID is used for the feed generation to locate the main content
+      id={isBlogPostPage ? blogPostContainerID : undefined}
+      className={clsx('markdown', className)}
+      itemProp="articleBody">
+      <MDXContent>{children}</MDXContent>
+    </div>
+  );
+}

package/src/theme/BlogPostItem/Footer/ReadMoreLink/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 Translate, {translate} from '@docusaurus/Translate';
+import Link from '@docusaurus/Link';
+import type {Props} from '@theme/BlogPostItem/Footer/ReadMoreLink';
+
+function ReadMoreLabel() {
+  return (
+    <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>
+  );
+}
+
+export default function BlogPostItemFooterReadMoreLink(
+  props: Props,
+): JSX.Element {
+  const {blogPostTitle, ...linkProps} = props;
+  return (
+    <Link
+      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: blogPostTitle},
+      )}
+      {...linkProps}>
+      <ReadMoreLabel />
+    </Link>
+  );
+}

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

@@ -0,0 +1,60 @@
+/**
+ * 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 {useBlogPost} from '@docusaurus/theme-common/internal';
+import EditThisPage from '@theme/EditThisPage';
+import TagsListInline from '@theme/TagsListInline';
+import ReadMoreLink from '@theme/BlogPostItem/Footer/ReadMoreLink';
+
+import styles from './styles.module.css';
+
+export default function BlogPostItemFooter(): JSX.Element | null {
+  const {metadata, isBlogPostPage} = useBlogPost();
+  const {tags, title, editUrl, hasTruncateMarker} = metadata;
+
+  // A post is truncated if it's in the "list view" and it has a truncate marker
+  const truncatedPost = !isBlogPostPage && hasTruncateMarker;
+
+  const tagsExists = tags.length > 0;
+
+  const renderFooter = tagsExists || truncatedPost || editUrl;
+
+  if (!renderFooter) {
+    return null;
+  }
+
+  return (
+    <footer
+      className={clsx(
+        'row docusaurus-mt-lg',
+        isBlogPostPage && styles.blogPostFooterDetailsFull,
+      )}>
+      {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,
+          })}>
+          <ReadMoreLink blogPostTitle={title} to={metadata.permalink} />
+        </div>
+      )}
+    </footer>
+  );
+}

package/src/theme/BlogPostItem/Footer/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.
+ */
+
+.blogPostFooterDetailsFull {
+  flex-direction: column;
+}

package/src/theme/{BlogPostAuthor → BlogPostItem/Header/Author}/index.tsx

@@ -6,8 +6,10 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 import Link, {type Props as LinkProps} from '@docusaurus/Link';
-import type {Props} from '@theme/BlogPostAuthor';
+
+import type {Props} from '@theme/BlogPostItem/Header/Author';
 
 function MaybeLink(props: LinkProps): JSX.Element {
   if (props.href) {
@@ -16,11 +18,14 @@ function MaybeLink(props: LinkProps): JSX.Element {
   return <>{props.children}</>;
 }
 
-export default function BlogPostAuthor({author}: Props): JSX.Element {
+export default function BlogPostItemHeaderAuthor({
+  author,
+  className,
+}: Props): JSX.Element {
   const {name, title, url, imageURL, email} = author;
   const link = url || (email && `mailto:${email}`) || undefined;
   return (
-    <div className="avatar margin-bottom--sm">
+    <div className={clsx('avatar margin-bottom--sm', className)}>
       {imageURL && (
         <MaybeLink href={link} className="avatar__photo-link">
           <img className="avatar__photo" src={imageURL} alt={name} />

package/{lib/theme/BlogPostAuthors/index.js → src/theme/BlogPostItem/Header/Authors/index.tsx}

@@ -4,12 +4,22 @@
  * 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 BlogPostAuthor from '@theme/BlogPostAuthor';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+import BlogPostItemHeaderAuthor from '@theme/BlogPostItem/Header/Author';
+import type {Props} from '@theme/BlogPostItem/Header/Authors';
 import styles from './styles.module.css';
+
 // Component responsible for the authors layout
-export default function BlogPostAuthors({authors, assets}) {
+export default function BlogPostItemHeaderAuthors({
+  className,
+}: Props): JSX.Element | null {
+  const {
+    metadata: {authors},
+    assets,
+  } = useBlogPost();
   const authorsCount = authors.length;
   if (authorsCount === 0) {
     return null;
@@ -20,6 +30,7 @@ export default function BlogPostAuthors({authors, assets}) {
       className={clsx(
         'margin-top--md margin-bottom--sm',
         imageOnly ? styles.imageOnlyAuthorRow : 'row',
+        className,
       )}>
       {authors.map((author, idx) => (
         <div
@@ -28,7 +39,7 @@ export default function BlogPostAuthors({authors, assets}) {
             imageOnly ? styles.imageOnlyAuthorCol : styles.authorCol,
           )}
           key={idx}>
-          <BlogPostAuthor
+          <BlogPostItemHeaderAuthor
             author={{
               ...author,
               // Handle author images using relative paths