@docusaurus/theme-classic 2.0.0-beta.fc64c12e4 → 2.0.0

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

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-next/theme/Footer/styles.module.css → lib/theme/BlogPostItem/index.d.ts}

@@ -4,12 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-.footerLogoLink {
-  opacity: 0.5;
-  transition: opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
-}
-
-.footerLogoLink:hover {
-  opacity: 1;
-}
+/// <reference types="react" />
+import type { Props } from '@theme/BlogPostItem';
+export default function BlogPostItem({ children, className, }: Props): JSX.Element;

package/lib/theme/BlogPostItem/index.js

@@ -1,161 +1,28 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _react2 = require("@mdx-js/react");
-
-var _Translate = _interopRequireWildcard(require("@docusaurus/Translate"));
-
-var _Link = _interopRequireDefault(require("@docusaurus/Link"));
-
-var _themeCommon = require("@docusaurus/theme-common");
-
-var _MDXComponents = _interopRequireDefault(require("@theme/MDXComponents"));
-
-var _Seo = _interopRequireDefault(require("@theme/Seo"));
-
-var _EditThisPage = _interopRequireDefault(require("@theme/EditThisPage"));
-
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * 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.
  */
-// Very simple pluralization: probably good enough for now
-function useReadingTimePlural() {
-  const {
-    selectMessage
-  } = (0, _themeCommon.usePluralForm)();
-  return readingTimeFloat => {
-    const readingTime = Math.ceil(readingTimeFloat);
-    return selectMessage(readingTime, (0, _Translate.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
-    }));
-  };
+import React from 'react';
+import clsx from 'clsx';
+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';
+// apply a bottom margin in list view
+function useContainerClassName() {
+  const {isBlogPostPage} = useBlogPost();
+  return !isBlogPostPage ? 'margin-bottom--xl' : undefined;
 }
-
-function BlogPostItem(props) {
-  const readingTimePlural = useReadingTimePlural();
-  const {
-    children,
-    frontMatter,
-    metadata,
-    truncated,
-    isBlogPostPage = false
-  } = props;
-  const {
-    date,
-    formattedDate,
-    permalink,
-    tags,
-    readingTime,
-    title,
-    editUrl
-  } = metadata;
-  const {
-    author,
-    image,
-    keywords
-  } = 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';
-    return <header>
-        <TitleHeading className={_stylesModule.default.blogPostTitle}>
-          {isBlogPostPage ? title : <_Link.default to={permalink}>{title}</_Link.default>}
-        </TitleHeading>
-        <div className={(0, _clsx.default)(_stylesModule.default.blogPostData, 'margin-vert--md')}>
-          <time dateTime={date}>{formattedDate}</time>
-
-          {readingTime && <>
-              {' · '}
-              {readingTimePlural(readingTime)}
-            </>}
-        </div>
-        <div className="avatar margin-vert--md">
-          {authorImageURL && <_Link.default className="avatar__photo-link avatar__photo" href={authorURL}>
-              <img src={authorImageURL} alt={author} />
-            </_Link.default>}
-          <div className="avatar__intro">
-            {author && <>
-                <div className="avatar__name">
-                  <_Link.default href={authorURL}>{author}</_Link.default>
-                </div>
-                <small className="avatar__subtitle">{authorTitle}</small>
-              </>}
-          </div>
-        </div>
-      </header>;
-  };
-
-  return <>
-      <_Seo.default {...{
-      keywords,
-      image
-    }} />
-
-      <article className={!isBlogPostPage ? 'margin-bottom--xl' : undefined}>
-        {renderPostHeader()}
-        <div className="markdown">
-          <_react2.MDXProvider components={_MDXComponents.default}>{children}</_react2.MDXProvider>
-        </div>
-        {(tags.length > 0 || truncated) && <footer className={(0, _clsx.default)('row docusaurus-mt-lg', {
-        [_stylesModule.default.blogPostDetailsFull]: isBlogPostPage
-      })}>
-            {tags.length > 0 && <div className="col">
-                <b>
-                  <_Translate.default id="theme.tags.tagsListLabel" description="The label alongside a tag list">
-                    Tags:
-                  </_Translate.default>
-                </b>
-                {tags.map(({
-            label,
-            permalink: tagPermalink
-          }) => <_Link.default key={tagPermalink} className="margin-horiz--sm" to={tagPermalink}>
-                    {label}
-                  </_Link.default>)}
-              </div>}
-
-            {isBlogPostPage && editUrl && <div className="col margin-top--sm">
-                <_EditThisPage.default editUrl={editUrl} />
-              </div>}
-
-            {!isBlogPostPage && truncated && <div className="col text--right">
-                <_Link.default to={metadata.permalink} aria-label={`Read more about ${title}`}>
-                  <b>
-                    <_Translate.default id="theme.blog.post.readMore" description="The label used in blog post item excerpts to link to full blog posts">
-                      Read More
-                    </_Translate.default>
-                  </b>
-                </_Link.default>
-              </div>}
-          </footer>}
-      </article>
-    </>;
+export default function BlogPostItem({children, className}) {
+  const containerClassName = useContainerClassName();
+  return (
+    <BlogPostItemContainer className={clsx(containerClassName, className)}>
+      <BlogPostItemHeader />
+      <BlogPostItemContent>{children}</BlogPostItemContent>
+      <BlogPostItemFooter />
+    </BlogPostItemContainer>
+  );
 }
-
-var _default = BlogPostItem;
-exports.default = _default;

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.d.ts

@@ -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.
+ */
+/// <reference types="@docusaurus/plugin-content-blog" />
+/// <reference types="react" />
+import type { Props } from '@theme/BlogPostPage';
+export default function BlogPostPage(props: Props): JSX.Element;

package/lib/theme/BlogPostPage/index.js

@@ -1,53 +1,60 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _BlogLayout = _interopRequireDefault(require("@theme/BlogLayout"));
-
-var _BlogPostItem = _interopRequireDefault(require("@theme/BlogPostItem"));
-
-var _BlogPostPaginator = _interopRequireDefault(require("@theme/BlogPostPaginator"));
-
-var _themeCommon = require("@docusaurus/theme-common");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * 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.
  */
-function BlogPostPage(props) {
-  const {
-    content: BlogPostContents,
-    sidebar
-  } = props;
-  const {
-    frontMatter,
-    metadata
-  } = BlogPostContents;
+import React from 'react';
+import clsx from 'clsx';
+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 BlogPostPageContent({sidebar, children}) {
+  const {metadata, toc} = useBlogPost();
+  const {nextItem, prevItem, frontMatter} = metadata;
   const {
-    title,
-    description,
-    nextItem,
-    prevItem
-  } = metadata;
-  const {
-    hide_table_of_contents: hideTableOfContents
+    hide_table_of_contents: hideTableOfContents,
+    toc_min_heading_level: tocMinHeadingLevel,
+    toc_max_heading_level: tocMaxHeadingLevel,
   } = frontMatter;
-  return <_BlogLayout.default title={title} description={description} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.blogPages} pageClassName={_themeCommon.ThemeClassNames.page.blogPostPage} sidebar={sidebar} toc={!hideTableOfContents && BlogPostContents.toc ? BlogPostContents.toc : undefined}>
-      <_BlogPostItem.default frontMatter={frontMatter} metadata={metadata} isBlogPostPage>
-        <BlogPostContents />
-      </_BlogPostItem.default>
-      {(nextItem || prevItem) && <_BlogPostPaginator.default nextItem={nextItem} prevItem={prevItem} />}
-    </_BlogLayout.default>;
+  return (
+    <BlogLayout
+      sidebar={sidebar}
+      toc={
+        !hideTableOfContents && toc.length > 0 ? (
+          <TOC
+            toc={toc}
+            minHeadingLevel={tocMinHeadingLevel}
+            maxHeadingLevel={tocMaxHeadingLevel}
+          />
+        ) : undefined
+      }>
+      <BlogPostItem>{children}</BlogPostItem>
+
+      {(nextItem || prevItem) && (
+        <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
+      )}
+    </BlogLayout>
+  );
+}
+export default function BlogPostPage(props) {
+  const BlogPostContent = props.content;
+  return (
+    <BlogPostProvider content={props.content} isBlogPostPage>
+      <HtmlClassNameProvider
+        className={clsx(
+          ThemeClassNames.wrapper.blogPages,
+          ThemeClassNames.page.blogPostPage,
+        )}>
+        <BlogPostPageMetadata />
+        <BlogPostPageContent sidebar={props.sidebar}>
+          <BlogPostContent />
+        </BlogPostPageContent>
+      </HtmlClassNameProvider>
+    </BlogPostProvider>
+  );
 }
-
-var _default = BlogPostPage;
-exports.default = _default;

package/lib/theme/BlogPostPaginator/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/BlogPostPaginator';
+export default function BlogPostPaginator(props: Props): JSX.Element;

package/lib/theme/BlogPostPaginator/index.js

@@ -1,64 +1,47 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Translate = _interopRequireWildcard(require("@docusaurus/Translate"));
-
-var _Link = _interopRequireDefault(require("@docusaurus/Link"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * 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.
  */
-function BlogPostPaginator(props) {
-  const {
-    nextItem,
-    prevItem
-  } = props;
-  return <nav className="pagination-nav docusaurus-mt-lg" aria-label={(0, _Translate.translate)({
-    id: 'theme.blog.post.paginator.navAriaLabel',
-    message: 'Blog post page navigation',
-    description: 'The ARIA label for the blog posts pagination'
-  })}>
-      <div className="pagination-nav__item">
-        {prevItem && <_Link.default className="pagination-nav__link" to={prevItem.permalink}>
-            <div className="pagination-nav__sublabel">
-              <_Translate.default id="theme.blog.post.paginator.newerPost" description="The blog post button label to navigate to the newer/previous post">
-                Newer Post
-              </_Translate.default>
-            </div>
-            <div className="pagination-nav__label">
-              &laquo; {prevItem.title}
-            </div>
-          </_Link.default>}
-      </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {nextItem && <_Link.default className="pagination-nav__link" to={nextItem.permalink}>
-            <div className="pagination-nav__sublabel">
-              <_Translate.default id="theme.blog.post.paginator.olderPost" description="The blog post button label to navigate to the older/next post">
-                Older Post
-              </_Translate.default>
-            </div>
-            <div className="pagination-nav__label">
-              {nextItem.title} &raquo;
-            </div>
-          </_Link.default>}
-      </div>
-    </nav>;
+import React from 'react';
+import Translate, {translate} from '@docusaurus/Translate';
+import PaginatorNavLink from '@theme/PaginatorNavLink';
+export default function BlogPostPaginator(props) {
+  const {nextItem, prevItem} = props;
+  return (
+    <nav
+      className="pagination-nav docusaurus-mt-lg"
+      aria-label={translate({
+        id: 'theme.blog.post.paginator.navAriaLabel',
+        message: 'Blog post page navigation',
+        description: 'The ARIA label for the blog posts pagination',
+      })}>
+      {prevItem && (
+        <PaginatorNavLink
+          {...prevItem}
+          subLabel={
+            <Translate
+              id="theme.blog.post.paginator.newerPost"
+              description="The blog post button label to navigate to the newer/previous post">
+              Newer Post
+            </Translate>
+          }
+        />
+      )}
+      {nextItem && (
+        <PaginatorNavLink
+          {...nextItem}
+          subLabel={
+            <Translate
+              id="theme.blog.post.paginator.olderPost"
+              description="The blog post button label to navigate to the older/next post">
+              Older Post
+            </Translate>
+          }
+          isNext
+        />
+      )}
+    </nav>
+  );
 }
-
-var _default = BlogPostPaginator;
-exports.default = _default;

package/lib/theme/BlogSidebar/Desktop/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/BlogSidebar/Desktop';
+export default function BlogSidebarDesktop({ sidebar }: Props): JSX.Element;