@docusaurus/theme-classic 2.0.0-beta.1ec2c95e3 → 2.0.0-beta.21

package/lib/theme/BlogListPage/index.js

@@ -1,71 +1,63 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocusaurusContext"));
-
-var _Layout = _interopRequireDefault(require("@theme/Layout"));
-
-var _BlogPostItem = _interopRequireDefault(require("@theme/BlogPostItem"));
-
-var _BlogListPaginator = _interopRequireDefault(require("@theme/BlogListPaginator"));
-
-var _BlogSidebar = _interopRequireDefault(require("@theme/BlogSidebar"));
-
-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 BlogListPage(props) {
+import React from 'react';
+import clsx from 'clsx';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  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';
+function BlogListPageMetadata(props) {
+  const {metadata} = props;
   const {
-    metadata,
-    items,
-    sidebar
-  } = props;
-  const {
-    siteConfig: {
-      title: siteTitle
-    }
-  } = (0, _useDocusaurusContext.default)();
-  const {
-    blogDescription,
-    blogTitle,
-    permalink
-  } = metadata;
+    siteConfig: {title: siteTitle},
+  } = useDocusaurusContext();
+  const {blogDescription, blogTitle, permalink} = metadata;
   const isBlogOnlyMode = permalink === '/';
   const title = isBlogOnlyMode ? siteTitle : blogTitle;
-  return <_Layout.default title={title} description={blogDescription} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.blogPages} pageClassName={_themeCommon.ThemeClassNames.page.blogListPage} searchMetadatas={{
-    // assign unique search tag to exclude this page from search results!
-    tag: 'blog_posts_list'
-  }}>
-      <div className="container margin-vert--lg">
-        <div className="row">
-          <aside className="col col--3">
-            <_BlogSidebar.default sidebar={sidebar} />
-          </aside>
-          <main className="col col--7">
-            {items.map(({
-            content: BlogPostContent
-          }) => <_BlogPostItem.default key={BlogPostContent.metadata.permalink} frontMatter={BlogPostContent.frontMatter} metadata={BlogPostContent.metadata} truncated={BlogPostContent.metadata.truncated}>
-                <BlogPostContent />
-              </_BlogPostItem.default>)}
-            <_BlogListPaginator.default metadata={metadata} />
-          </main>
-        </div>
-      </div>
-    </_Layout.default>;
+  return (
+    <>
+      <PageMetadata title={title} description={blogDescription} />
+      <SearchMetadata tag="blog_posts_list" />
+    </>
+  );
+}
+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>
+      ))}
+      <BlogListPaginator metadata={metadata} />
+    </BlogLayout>
+  );
+}
+export default function BlogListPage(props) {
+  return (
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogListPage,
+      )}>
+      <BlogListPageMetadata {...props} />
+      <BlogListPageContent {...props} />
+    </HtmlClassNameProvider>
+  );
 }
-
-var _default = BlogListPage;
-exports.default = _default;

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

package/lib/theme/BlogListPaginator/index.js

@@ -1,63 +1,48 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Link = _interopRequireDefault(require("@docusaurus/Link"));
-
-var _Translate = _interopRequireWildcard(require("@docusaurus/Translate"));
-
-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 BlogListPaginator(props) {
-  const {
-    metadata
-  } = props;
-  const {
-    previousPage,
-    nextPage
-  } = metadata;
-  return <nav className="pagination-nav" aria-label={(0, _Translate.translate)({
-    id: 'theme.blog.paginator.navAriaLabel',
-    message: 'Blog list page navigation',
-    description: 'The ARIA label for the blog pagination'
-  })}>
-      <div className="pagination-nav__item">
-        {previousPage && <_Link.default className="pagination-nav__link" to={previousPage}>
-            <div className="pagination-nav__label">
-              &laquo;{' '}
-              <_Translate.default id="theme.blog.paginator.newerEntries" description="The label used to navigate to the newer blog posts page (previous page)">
-                Newer Entries
-              </_Translate.default>
-            </div>
-          </_Link.default>}
-      </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {nextPage && <_Link.default className="pagination-nav__link" to={nextPage}>
-            <div className="pagination-nav__label">
-              <_Translate.default id="theme.blog.paginator.olderEntries" description="The label used to navigate to the older blog posts page (next page)">
-                Older Entries
-              </_Translate.default>{' '}
-              &raquo;
-            </div>
-          </_Link.default>}
-      </div>
-    </nav>;
+import React from 'react';
+import Translate, {translate} from '@docusaurus/Translate';
+import PaginatorNavLink from '@theme/PaginatorNavLink';
+export default function BlogListPaginator(props) {
+  const {metadata} = props;
+  const {previousPage, nextPage} = metadata;
+  return (
+    <nav
+      className="pagination-nav"
+      aria-label={translate({
+        id: 'theme.blog.paginator.navAriaLabel',
+        message: 'Blog list page navigation',
+        description: 'The ARIA label for the blog pagination',
+      })}>
+      {previousPage && (
+        <PaginatorNavLink
+          permalink={previousPage}
+          title={
+            <Translate
+              id="theme.blog.paginator.newerEntries"
+              description="The label used to navigate to the newer blog posts page (previous page)">
+              Newer Entries
+            </Translate>
+          }
+        />
+      )}
+      {nextPage && (
+        <PaginatorNavLink
+          permalink={nextPage}
+          title={
+            <Translate
+              id="theme.blog.paginator.olderEntries"
+              description="The label used to navigate to the older blog posts page (next page)">
+              Older Entries
+            </Translate>
+          }
+          isNext
+        />
+      )}
+    </nav>
+  );
 }
-
-var _default = BlogListPaginator;
-exports.default = _default;

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

package/lib/theme/BlogPostAuthor/index.js

@@ -0,0 +1,46 @@
+/**
+ * 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 Link from '@docusaurus/Link';
+function MaybeLink(props) {
+  if (props.href) {
+    return <Link {...props} />;
+  }
+  return <>{props.children}</>;
+}
+export default function BlogPostAuthor({author}) {
+  const {name, title, url, imageURL, email} = author;
+  const link = url || (email && `mailto:${email}`) || undefined;
+  return (
+    <div className="avatar margin-bottom--sm">
+      {imageURL && (
+        <MaybeLink href={link} className="avatar__photo-link">
+          <img className="avatar__photo" src={imageURL} alt={name} />
+        </MaybeLink>
+      )}
+
+      {name && (
+        <div
+          className="avatar__intro"
+          itemProp="author"
+          itemScope
+          itemType="https://schema.org/Person">
+          <div className="avatar__name">
+            <MaybeLink href={link} itemProp="url">
+              <span itemProp="name">{name}</span>
+            </MaybeLink>
+          </div>
+          {title && (
+            <small className="avatar__subtitle" itemProp="description">
+              {title}
+            </small>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/lib/theme/BlogPostAuthors/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/BlogPostAuthors';
+export default function BlogPostAuthors({ authors, assets, }: Props): JSX.Element | null;

package/lib/theme/BlogPostAuthors/index.js

@@ -0,0 +1,42 @@
+/**
+ * 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 BlogPostAuthor from '@theme/BlogPostAuthor';
+import styles from './styles.module.css';
+// Component responsible for the authors layout
+export default function BlogPostAuthors({authors, assets}) {
+  const authorsCount = authors.length;
+  if (authorsCount === 0) {
+    return null;
+  }
+  const imageOnly = authors.every(({name}) => !name);
+  return (
+    <div
+      className={clsx(
+        'margin-top--md margin-bottom--sm',
+        imageOnly ? styles.imageOnlyAuthorRow : 'row',
+      )}>
+      {authors.map((author, idx) => (
+        <div
+          className={clsx(
+            !imageOnly && 'col col--6',
+            imageOnly ? styles.imageOnlyAuthorCol : styles.authorCol,
+          )}
+          key={idx}>
+          <BlogPostAuthor
+            author={{
+              ...author,
+              // Handle author images using relative paths
+              imageURL: assets.authorsImageUrls[idx] ?? author.imageURL,
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

package/{src/theme/Toggle → lib/theme/BlogPostAuthors}/styles.module.css

@@ -5,13 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.toggle {
-  align-items: center;
+.authorCol {
+  max-width: inherit !important;
+  flex-grow: 1 !important;
+}
+
+.imageOnlyAuthorRow {
   display: flex;
-  height: 10px;
-  justify-content: center;
-  width: 10px;
+  flex-flow: row wrap;
 }
-.toggle::before {
-  position: absolute;
+
+.imageOnlyAuthorCol {
+  margin-left: 0.3rem;
+  margin-right: 0.3rem;
 }

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