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

package/lib/theme/AnnouncementBar/index.js

@@ -1,72 +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 _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 {
-    isClosed,
-    close
-  } = (0, _themeCommon.useAnnouncementBar)();
-  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 && isClosed) {
-    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={(0, _clsx.default)(_stylesModule.default.announcementBarClose, 'clean-btn')} onClick={close} 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,8 +10,8 @@
 }
 
 .announcementBar {
-  position: relative;
-  width: 100%;
+  display: flex;
+  align-items: center;
   height: var(--docusaurus-announcement-bar-height);
   background-color: var(--ifm-color-white);
   color: var(--ifm-color-black);
@@ -22,47 +22,27 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
   display: none;
 }
 
-@media print {
-  .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;
-  height: 100%;
+  flex: 0 0 30px;
+  align-self: stretch;
+  padding: 0;
+  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 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
   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

@@ -1,128 +1,32 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _useScrollPosition = _interopRequireDefault(require("@theme/hooks/useScrollPosition"));
-
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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; }
-
 /**
  * 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.
  */
-const threshold = 300; // Not all have support for smooth scrolling (particularly Safari mobile iOS)
-// TODO proper detection is currently unreliable!
-// see https://github.com/wessberg/scroll-behavior-polyfill/issues/16
-
-const SupportsNativeSmoothScrolling = false; // const SupportsNativeSmoothScrolling = ExecutionEnvironment.canUseDOM && 'scrollBehavior' in document.documentElement.style;
-
-function smoothScrollTopNative() {
-  window.scrollTo({
-    top: 0,
-    behavior: 'smooth'
-  });
-  return () => {// Nothing to cancel, it's natively cancelled if user tries to scroll down
-  };
+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}
+    />
+  );
 }
-
-function smoothScrollTopPolyfill() {
-  let raf = null;
-
-  function rafRecursion() {
-    const currentScroll = document.documentElement.scrollTop;
-
-    if (currentScroll > 0) {
-      raf = requestAnimationFrame(rafRecursion);
-      window.scrollTo(0, Math.floor(currentScroll * 0.85));
-    }
-  }
-
-  rafRecursion();
-  return () => {
-    // Break the recursion
-    // Prevents the user from "fighting" against that recursion producing a weird UX
-    raf && cancelAnimationFrame(raf);
-  };
-}
-
-function useSmoothScrollToTop() {
-  const lastCancelRef = (0, _react.useRef)(null);
-
-  function smoothScrollTop() {
-    lastCancelRef.current = SupportsNativeSmoothScrolling ? smoothScrollTopNative() : smoothScrollTopPolyfill();
-  }
-
-  return {
-    smoothScrollTop,
-    cancelScrollToTop: () => {
-      var _lastCancelRef$curren;
-
-      return (_lastCancelRef$curren = lastCancelRef.current) === null || _lastCancelRef$curren === void 0 ? void 0 : _lastCancelRef$curren.call(lastCancelRef);
-    }
-  };
-}
-
-function BackToTopButton() {
-  const {
-    smoothScrollTop,
-    cancelScrollToTop
-  } = useSmoothScrollToTop();
-  const [show, setShow] = (0, _react.useState)(false);
-  (0, _useScrollPosition.default)(({
-    scrollY: scrollTop
-  }, lastPosition) => {
-    // No lastPosition means component is just being mounted.
-    // Not really a scroll event from the user, so we ignore it
-    if (!lastPosition) {
-      return;
-    }
-
-    const lastScrollTop = lastPosition.scrollY;
-    const isScrollingUp = scrollTop < lastScrollTop;
-
-    if (!isScrollingUp) {
-      cancelScrollToTop();
-    }
-
-    if (scrollTop < threshold) {
-      setShow(false);
-      return;
-    }
-
-    if (isScrollingUp) {
-      const documentHeight = document.documentElement.scrollHeight;
-      const windowHeight = window.innerHeight;
-
-      if (scrollTop + windowHeight < documentHeight) {
-        setShow(true);
-      }
-    } else {
-      setShow(false);
-    }
-  }, []);
-  return <button className={(0, _clsx.default)('clean-btn', _stylesModule.default.backToTopButton, {
-    [_stylesModule.default.backToTopButtonShow]: show
-  })} type="button" title="Scroll to top" onClick={() => smoothScrollTop()}>
-      <svg viewBox="0 0 24 24" width="28">
-        <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="currentColor" />
-      </svg>
-    </button>;
-}
-
-var _default = BackToTopButton;
-exports.default = _default;

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

@@ -5,35 +5,40 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-:root {
-  --docusaurus-btt-background: var(--ifm-color-primary);
-  --docusaurus-btt-color: #fff;
-}
-
 .backToTopButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   position: fixed;
   right: 1.3rem;
   bottom: 1.3rem;
   border-radius: 50%;
-  background: var(--docusaurus-btt-background);
-  color: var(--docusaurus-btt-color);
+  background-color: var(--ifm-color-emphasis-200);
   width: 3rem;
   height: 3rem;
-  z-index: var(--ifm-z-index-fixed);
-  box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.3);
-  transition: all var(--ifm-transition-fast) ease-in-out;
+  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%;
 }
 
-.backToTopButton:hover {
-  opacity: 0.8;
+@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

@@ -1,55 +1,33 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _Layout = _interopRequireDefault(require("@theme/Layout"));
-
-var _BlogSidebar = _interopRequireDefault(require("@theme/BlogSidebar"));
-
-var _TOC = _interopRequireDefault(require("@theme/TOC"));
-
-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 BlogLayout(props) {
-  const {
-    sidebar,
-    toc,
-    children,
-    ...layoutProps
-  } = props;
+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.default {...layoutProps}>
+  return (
+    <Layout {...layoutProps}>
       <div className="container margin-vert--lg">
         <div className="row">
-          {hasSidebar && <aside className="col col--3">
-              <_BlogSidebar.default sidebar={sidebar} />
-            </aside>}
-          <main className={(0, _clsx.default)('col', {
-          'col--7': hasSidebar,
-          'col--9 col--offset-1': !hasSidebar
-        })}>
+          <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.default toc={toc} />
-            </div>}
+          {toc && <div className="col col--2">{toc}</div>}
         </div>
       </div>
-    </_Layout.default>;
+    </Layout>
+  );
 }
-
-var _default = BlogLayout;
-exports.default = _default;

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;