@docusaurus/theme-classic 2.0.0-beta.ff31de0ff → 2.0.0-rc.1

package/lib/theme/AnnouncementBar/index.js

@@ -1,74 +1,48 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _themeCommon = require("@docusaurus/theme-common");
-
-var _useUserPreferencesContext = _interopRequireDefault(require("@theme/hooks/useUserPreferencesContext"));
-
-var _Translate = require("@docusaurus/Translate");
-
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
-
-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 AnnouncementBar() {
-  const {
-    isAnnouncementBarClosed,
-    closeAnnouncementBar
-  } = (0, _useUserPreferencesContext.default)();
-  const {
-    announcementBar
-  } = (0, _themeCommon.useThemeConfig)();
-
-  if (!announcementBar) {
+import React from 'react';
+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/Icon/Close';
+import styles from './styles.module.css';
+export default function AnnouncementBar() {
+  const {isActive, close} = useAnnouncementBar();
+  const {announcementBar} = useThemeConfig();
+  if (!isActive) {
     return null;
   }
-
-  const {
-    content,
-    backgroundColor,
-    textColor,
-    isCloseable
-  } = announcementBar;
-
-  if (!content || isCloseable && isAnnouncementBarClosed) {
-    return null;
-  }
-
-  return <div className={_stylesModule.default.announcementBar} style={{
-    backgroundColor,
-    color: textColor
-  }} role="banner">
-      <div className={(0, _clsx.default)(_stylesModule.default.announcementBarContent, {
-      [_stylesModule.default.announcementBarCloseable]: isCloseable
-    })} // Developer provided the HTML, so assume it's safe.
-    // eslint-disable-next-line react/no-danger
-    dangerouslySetInnerHTML={{
-      __html: content
-    }} />
-      {isCloseable ? <button type="button" className={_stylesModule.default.announcementBarClose} onClick={closeAnnouncementBar} aria-label={(0, _Translate.translate)({
-      id: 'theme.AnnouncementBar.closeButtonAriaLabel',
-      message: 'Close',
-      description: 'The ARIA label for close button of announcement bar'
-    })}>
-          <span aria-hidden="true">×</span>
-        </button> : null}
-    </div>;
+  const {content, backgroundColor, textColor, isCloseable} = announcementBar;
+  return (
+    <div
+      className={styles.announcementBar}
+      style={{backgroundColor, color: textColor}}
+      role="banner">
+      {isCloseable && <div className={styles.announcementBarPlaceholder} />}
+      <div
+        className={styles.announcementBarContent}
+        // Developer provided the HTML, so assume it's safe.
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{__html: content}}
+      />
+      {isCloseable ? (
+        <button
+          type="button"
+          className={clsx('clean-btn close', styles.announcementBarClose)}
+          onClick={close}
+          aria-label={translate({
+            id: 'theme.AnnouncementBar.closeButtonAriaLabel',
+            message: 'Close',
+            description: 'The ARIA label for close button of announcement bar',
+          })}>
+          <IconClose width={14} height={14} strokeWidth={3.1} />
+        </button>
+      ) : null}
+    </div>
+  );
 }
-
-var _default = AnnouncementBar;
-exports.default = _default;

package/lib/theme/AnnouncementBar/styles.module.css

@@ -10,59 +10,39 @@
 }
 
 .announcementBar {
-  position: relative;
-  width: 100%;
+  display: flex;
+  align-items: center;
   height: var(--docusaurus-announcement-bar-height);
-  background-color: var(--ifm-color-primary);
+  background-color: var(--ifm-color-white);
   color: var(--ifm-color-black);
+  border-bottom: 1px solid var(--ifm-color-emphasis-100);
 }
 
-@media print {
-  .announcementBar {
-    display: none;
-  }
+html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
+  display: none;
 }
 
-@media screen and (min-width: 1024px) {
-  :root {
-    --docusaurus-announcement-bar-height: 30px;
-  }
+.announcementBarPlaceholder {
+  flex: 0 0 10px;
 }
 
 .announcementBarClose {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 55px;
-  font-size: 1.25rem;
+  flex: 0 0 30px;
+  align-self: stretch;
   padding: 0;
-  border: none;
-  cursor: pointer;
-  background: none;
-  color: inherit;
-  height: 100%;
+  line-height: 0;
 }
 
 .announcementBarContent {
+  flex: 1 1 auto;
   font-size: 85%;
-  width: 100%;
   text-align: center;
   padding: 5px 0;
 }
 
-.announcementBarCloseable {
-  margin-right: 55px;
-}
-
-@media screen and (max-width: 576px) {
-  .announcementBarClose {
-    width: 35px;
-  }
-  .announcementBarContent {
-    width: auto;
-  }
-  .announcementBarCloseable {
-    margin-right: 35px;
+@media print {
+  .announcementBar {
+    display: none;
   }
 }
 
@@ -70,3 +50,14 @@
   color: inherit;
   text-decoration: underline;
 }
+
+@media (min-width: 997px) {
+  :root {
+    --docusaurus-announcement-bar-height: 30px;
+  }
+
+  .announcementBarPlaceholder,
+  .announcementBarClose {
+    flex-basis: 50px;
+  }
+}

package/lib/theme/BackToTopButton/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 BackToTopButton(): JSX.Element;

package/lib/theme/BackToTopButton/index.js

@@ -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 clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useBackToTopButton} from '@docusaurus/theme-common/internal';
+import styles from './styles.module.css';
+export default function BackToTopButton() {
+  const {shown, scrollToTop} = useBackToTopButton({threshold: 300});
+  return (
+    <button
+      aria-label={translate({
+        id: 'theme.BackToTopButton.buttonAriaLabel',
+        message: 'Scroll back to top',
+        description: 'The ARIA label for the back to top button',
+      })}
+      className={clsx(
+        'clean-btn',
+        ThemeClassNames.common.backToTopButton,
+        styles.backToTopButton,
+        shown && styles.backToTopButtonShow,
+      )}
+      type="button"
+      onClick={scrollToTop}
+    />
+  );
+}

package/lib/theme/BackToTopButton/styles.module.css

@@ -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.
+ */
+
+.backToTopButton {
+  position: fixed;
+  right: 1.3rem;
+  bottom: 1.3rem;
+  border-radius: 50%;
+  background-color: var(--ifm-color-emphasis-200);
+  width: 3rem;
+  height: 3rem;
+  z-index: calc(var(--ifm-z-index-fixed) - 1);
+  box-shadow: var(--ifm-global-shadow-lw);
+  transition: all var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+  opacity: 0;
+  transform: scale(0);
+  visibility: hidden;
+}
+
+.backToTopButton::after {
+  content: ' ';
+  display: inline-block;
+  mask: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem no-repeat;
+  background-color: var(--ifm-color-emphasis-1000);
+  width: 100%;
+  height: 100%;
+}
+
+@media (hover: hover) {
+  .backToTopButton:hover {
+    background-color: var(--ifm-color-emphasis-300);
+  }
+}
+
+.backToTopButtonShow {
+  opacity: 1;
+  transform: scale(1);
+  visibility: visible;
+}

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

package/lib/theme/BlogArchivePage/index.js

@@ -0,0 +1,80 @@
+/**
+ * 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';
+import {translate} from '@docusaurus/Translate';
+import {PageMetadata} from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
+function Year({year, posts}) {
+  return (
+    <>
+      <h3>{year}</h3>
+      <ul>
+        {posts.map((post) => (
+          <li key={post.metadata.date}>
+            <Link to={post.metadata.permalink}>
+              {post.metadata.formattedDate} - {post.metadata.title}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+function YearsSection({years}) {
+  return (
+    <section className="margin-vert--lg">
+      <div className="container">
+        <div className="row">
+          {years.map((_props, idx) => (
+            <div key={idx} className="col col--4 margin-vert--lg">
+              <Year {..._props} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+function listPostsByYears(blogPosts) {
+  const postsByYear = blogPosts.reduceRight((posts, post) => {
+    const year = post.metadata.date.split('-')[0];
+    const yearPosts = posts.get(year) ?? [];
+    return posts.set(year, [post, ...yearPosts]);
+  }, new Map());
+  return Array.from(postsByYear, ([year, posts]) => ({
+    year,
+    posts,
+  }));
+}
+export default function BlogArchive({archive}) {
+  const title = translate({
+    id: 'theme.blog.archive.title',
+    message: 'Archive',
+    description: 'The page & hero title of the blog archive page',
+  });
+  const description = translate({
+    id: 'theme.blog.archive.description',
+    message: 'Archive',
+    description: 'The page & hero description of the blog archive page',
+  });
+  const years = listPostsByYears(archive.blogPosts);
+  return (
+    <>
+      <PageMetadata title={title} description={description} />
+      <Layout>
+        <header className="hero hero--primary">
+          <div className="container">
+            <h1 className="hero__title">{title}</h1>
+            <p className="hero__subtitle">{description}</p>
+          </div>
+        </header>
+        <main>{years.length > 0 && <YearsSection years={years} />}</main>
+      </Layout>
+    </>
+  );
+}

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

package/lib/theme/BlogLayout/index.js

@@ -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 Layout from '@theme/Layout';
+import BlogSidebar from '@theme/BlogSidebar';
+export default function BlogLayout(props) {
+  const {sidebar, toc, children, ...layoutProps} = props;
+  const hasSidebar = sidebar && sidebar.items.length > 0;
+  return (
+    <Layout {...layoutProps}>
+      <div className="container margin-vert--lg">
+        <div className="row">
+          <BlogSidebar sidebar={sidebar} />
+          <main
+            className={clsx('col', {
+              'col--7': hasSidebar,
+              'col--9 col--offset-1': !hasSidebar,
+            })}
+            itemScope
+            itemType="http://schema.org/Blog">
+            {children}
+          </main>
+          {toc && <div className="col col--2">{toc}</div>}
+        </div>
+      </div>
+    </Layout>
+  );
+}

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

package/lib/theme/BlogListPage/index.js

@@ -1,71 +1,54 @@
-"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 BlogListPaginator from '@theme/BlogListPaginator';
+import SearchMetadata from '@theme/SearchMetadata';
+import BlogPostItems from '@theme/BlogPostItems';
+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">
-          <div className="col col--3">
-            <_BlogSidebar.default sidebar={sidebar} />
-          </div>
-          <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}>
+      <BlogPostItems items={items} />
+      <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() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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;