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

package/lib/getSwizzleConfig.js

@@ -87,35 +87,35 @@ function getSwizzleConfig() {
                 },
                 description: 'The footer logo',
             },
-            IconArrow: {
+            'Icon/Arrow': {
                 actions: {
                     eject: 'safe',
                     wrap: 'safe',
                 },
                 description: 'The arrow icon component',
             },
-            IconDarkMode: {
+            'Icon/DarkMode': {
                 actions: {
                     eject: 'safe',
                     wrap: 'safe',
                 },
                 description: 'The dark mode icon component.',
             },
-            IconEdit: {
+            'Icon/Edit': {
                 actions: {
                     eject: 'safe',
                     wrap: 'safe',
                 },
                 description: 'The edit icon component',
             },
-            IconLightMode: {
+            'Icon/LightMode': {
                 actions: {
                     eject: 'safe',
                     wrap: 'safe',
                 },
                 description: 'The light mode icon component.',
             },
-            IconMenu: {
+            'Icon/Menu': {
                 actions: {
                     eject: 'safe',
                     wrap: 'safe',

package/lib/theme/AnnouncementBar/index.js

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import {useAnnouncementBar} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
-import IconClose from '@theme/IconClose';
+import IconClose from '@theme/Icon/Close';
 import styles from './styles.module.css';
 export default function AnnouncementBar() {
   const {isActive, close} = useAnnouncementBar();

package/lib/theme/BlogListPage/index.js

@@ -13,9 +13,9 @@ 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 BlogPostItems from '@theme/BlogPostItems';
 function BlogListPageMetadata(props) {
   const {metadata} = props;
   const {
@@ -35,16 +35,7 @@ function BlogListPageContent(props) {
   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/lib/theme/BlogPostItem/Container/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/BlogPostItem/Container';
+export default function BlogPostItemContainer({ children, className, }: Props): JSX.Element;

package/lib/theme/BlogPostItem/Container/index.js

@@ -0,0 +1,26 @@
+/**
+ * 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';
+export default function BlogPostItemContainer({children, className}) {
+  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/lib/theme/BlogPostItem/Content/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/BlogPostItem/Content';
+export default function BlogPostItemContent({ children, className, }: Props): JSX.Element;

package/lib/theme/BlogPostItem/Content/index.js

@@ -0,0 +1,23 @@
+/**
+ * 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';
+export default function BlogPostItemContent({children, className}) {
+  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/lib/theme/BlogPostItem/Footer/ReadMoreLink/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/BlogPostItem/Footer/ReadMoreLink';
+export default function BlogPostItemFooterReadMoreLink(props: Props): JSX.Element;

package/lib/theme/BlogPostItem/Footer/ReadMoreLink/index.js

@@ -0,0 +1,38 @@
+/**
+ * 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';
+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) {
+  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/lib/theme/BlogPostItem/Footer/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 BlogPostItemFooter(): JSX.Element | null;

package/lib/theme/BlogPostItem/Footer/index.js

@@ -0,0 +1,52 @@
+/**
+ * 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() {
+  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/lib/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/lib/theme/BlogPostItem/Header/Author/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/BlogPostItem/Header/Author';
+export default function BlogPostItemHeaderAuthor({ author, className, }: Props): JSX.Element;

package/lib/theme/{BlogPostAuthor → BlogPostItem/Header/Author}/index.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 function MaybeLink(props) {
   if (props.href) {
@@ -12,11 +13,11 @@ function MaybeLink(props) {
   }
   return <>{props.children}</>;
 }
-export default function BlogPostAuthor({author}) {
+export default function BlogPostItemHeaderAuthor({author, className}) {
   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/BlogPostItem/Header/Authors/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/BlogPostItem/Header/Authors';
+export default function BlogPostItemHeaderAuthors({ className, }: Props): JSX.Element | null;

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

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

package/lib/theme/{BlogPostAuthor → BlogPostItem/Header/Info}/index.d.ts

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="react" />
-import type { Props } from '@theme/BlogPostAuthor';
-export default function BlogPostAuthor({ author }: Props): JSX.Element;
+import type { Props } from '@theme/BlogPostItem/Header/Info';
+export default function BlogPostItemHeaderInfo({ className, }: Props): JSX.Element;

package/lib/theme/BlogPostItem/Header/Info/index.js

@@ -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 {translate} from '@docusaurus/Translate';
+import {usePluralForm} from '@docusaurus/theme-common';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+import styles from './styles.module.css';
+// Very simple pluralization: probably good enough for now
+function useReadingTimePlural() {
+  const {selectMessage} = usePluralForm();
+  return (readingTimeFloat) => {
+    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}) {
+  const readingTimePlural = useReadingTimePlural();
+  return <>{readingTimePlural(readingTime)}</>;
+}
+function Date({date, formattedDate}) {
+  return (
+    <time dateTime={date} itemProp="datePublished">
+      {formattedDate}
+    </time>
+  );
+}
+function Spacer() {
+  return <>{' · '}</>;
+}
+export default function BlogPostItemHeaderInfo({className}) {
+  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/lib/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/lib/theme/{BlogPostAuthors → BlogPostItem/Header/Title}/index.d.ts

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="react" />
-import type { Props } from '@theme/BlogPostAuthors';
-export default function BlogPostAuthors({ authors, assets, }: Props): JSX.Element | null;
+import type { Props } from '@theme/BlogPostItem/Header/Title';
+export default function BlogPostItemHeaderTitle({ className, }: Props): JSX.Element;

package/lib/theme/BlogPostItem/Header/Title/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 clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+import styles from './styles.module.css';
+export default function BlogPostItemHeaderTitle({className}) {
+  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/{src/theme/BlogPostItem → lib/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/lib/theme/BlogPostItem/Header/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 BlogPostItemHeader(): JSX.Element;

package/lib/theme/BlogPostItem/Header/index.js

@@ -0,0 +1,19 @@
+/**
+ * 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() {
+  return (
+    <header>
+      <BlogPostItemHeaderTitle />
+      <BlogPostItemHeaderInfo />
+      <BlogPostItemHeaderAuthors />
+    </header>
+  );
+}

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

@@ -6,4 +6,4 @@
  */
 /// <reference types="react" />
 import type { Props } from '@theme/BlogPostItem';
-export default function BlogPostItem(props: Props): JSX.Element;
+export default function BlogPostItem({ children, className, }: Props): JSX.Element;