@docusaurus/theme-classic 2.0.0-beta.12faed89d → 2.0.0-beta.13

package/lib/theme/DocSidebar/index.js

@@ -13,8 +13,6 @@ var _themeCommon = require("@docusaurus/theme-common");
 
 var _useWindowSize = _interopRequireDefault(require("@theme/hooks/useWindowSize"));
 
-var _useScrollPosition = _interopRequireDefault(require("@theme/hooks/useScrollPosition"));
-
 var _Logo = _interopRequireDefault(require("@theme/Logo"));
 
 var _IconArrow = _interopRequireDefault(require("@theme/IconArrow"));
@@ -39,17 +37,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 function useShowAnnouncementBar() {
   const {
-    isClosed
+    isActive
   } = (0, _themeCommon.useAnnouncementBar)();
-  const [showAnnouncementBar, setShowAnnouncementBar] = (0, _react.useState)(!isClosed);
-  (0, _useScrollPosition.default)(({
+  const [showAnnouncementBar, setShowAnnouncementBar] = (0, _react.useState)(isActive);
+  (0, _themeCommon.useScrollPosition)(({
     scrollY
   }) => {
-    if (!isClosed) {
+    if (isActive) {
       setShowAnnouncementBar(scrollY === 0);
     }
-  });
-  return showAnnouncementBar;
+  }, [isActive]);
+  return isActive && showAnnouncementBar;
 }
 
 function HideableSidebarButton({
@@ -71,7 +69,6 @@ function HideableSidebarButton({
 function DocSidebarDesktop({
   path,
   sidebar,
-  sidebarCollapsible,
   onCollapse,
   isHidden
 }) {
@@ -82,35 +79,39 @@ function DocSidebarDesktop({
     },
     hideableSidebar
   } = (0, _themeCommon.useThemeConfig)();
-  const {
-    isClosed: isAnnouncementBarClosed
-  } = (0, _themeCommon.useAnnouncementBar)();
   return <div className={(0, _clsx.default)(_stylesModule.default.sidebar, {
     [_stylesModule.default.sidebarWithHideableNavbar]: hideOnScroll,
     [_stylesModule.default.sidebarHidden]: isHidden
   })}>
       {hideOnScroll && <_Logo.default tabIndex={-1} className={_stylesModule.default.sidebarLogo} />}
       <nav className={(0, _clsx.default)('menu thin-scrollbar', _stylesModule.default.menu, {
-      [_stylesModule.default.menuWithAnnouncementBar]: !isAnnouncementBarClosed && showAnnouncementBar
+      [_stylesModule.default.menuWithAnnouncementBar]: showAnnouncementBar
     })}>
-        <ul className="menu__list">
-          <_DocSidebarItem.DocSidebarItems items={sidebar} collapsible={sidebarCollapsible} activePath={path} />
+        <ul className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+          <_DocSidebarItem.DocSidebarItems items={sidebar} activePath={path} level={1} />
         </ul>
       </nav>
       {hideableSidebar && <HideableSidebarButton onClick={onCollapse} />}
     </div>;
-}
+} // eslint-disable-next-line react/function-component-definition
+
 
 const DocSidebarMobileSecondaryMenu = ({
   toggleSidebar,
   sidebar,
-  sidebarCollapsible,
   path
-}) => {
-  return <ul className="menu__list">
-      <_DocSidebarItem.DocSidebarItems items={sidebar} collapsible={sidebarCollapsible} activePath={path} onItemClick={() => toggleSidebar()} />
-    </ul>;
-};
+}) => <ul className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+    <_DocSidebarItem.DocSidebarItems items={sidebar} activePath={path} onItemClick={item => {
+    // Mobile sidebar should only be closed if the category has a link
+    if (item.type === 'category' && item.href) {
+      toggleSidebar();
+    }
+
+    if (item.type === 'link') {
+      toggleSidebar();
+    }
+  }} level={1} />
+  </ul>;
 
 function DocSidebarMobile(props) {
   return <_themeCommon.MobileSecondaryMenuFiller component={DocSidebarMobileSecondaryMenu} props={props} />;

package/lib/theme/DocSidebarItem/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = DocSidebarItem;
 exports.DocSidebarItems = void 0;
+exports.default = DocSidebarItem;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -16,10 +16,14 @@ var _Link = _interopRequireDefault(require("@docusaurus/Link"));
 
 var _isInternalUrl = _interopRequireDefault(require("@docusaurus/isInternalUrl"));
 
+var _Translate = require("@docusaurus/Translate");
+
 var _IconExternalLink = _interopRequireDefault(require("@theme/IconExternalLink"));
 
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
+var _useIsBrowser = _interopRequireDefault(require("@docusaurus/useIsBrowser"));
+
 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); }
@@ -32,30 +36,16 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-const isActiveSidebarItem = (item, activePath) => {
-  if (item.type === 'link') {
-    return (0, _themeCommon.isSamePath)(item.href, activePath);
-  }
-
-  if (item.type === 'category') {
-    return item.items.some(subItem => isActiveSidebarItem(subItem, activePath));
-  }
-
-  return false;
-}; // Optimize sidebar at each "level"
+// Optimize sidebar at each "level"
 // TODO this item should probably not receive the "activePath" props
 // TODO this triggers whole sidebar re-renders on navigation
-
-
-const DocSidebarItems = (0, _react.memo)(function DocSidebarItems({
+const DocSidebarItems = (0, _react.memo)(({
   items,
   ...props
-}) {
-  return <>
+}) => <>
       {items.map((item, index) => <DocSidebarItem key={index} // sidebar is static, the index does not change
-    item={item} {...props} />)}
-    </>;
-});
+  item={item} {...props} />)}
+    </>);
 exports.DocSidebarItems = DocSidebarItems;
 
 function DocSidebarItem({
@@ -89,21 +79,47 @@ function useAutoExpandActiveCategory({
     if (justBecameActive && collapsed) {
       setCollapsed(false);
     }
-  }, [isActive, wasActive, collapsed]);
+  }, [isActive, wasActive, collapsed, setCollapsed]);
+} // When a collapsible category has no link, we still link it to its first child during SSR as a temporary fallback
+// This allows to be able to navigate inside the category even when JS fails to load, is delayed or simply disabled
+// React hydration becomes an optional progressive enhancement
+// see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
+// see https://github.com/facebook/docusaurus/issues/3030
+
+
+function useCategoryHrefWithSSRFallback(item) {
+  const isBrowser = (0, _useIsBrowser.default)();
+  return (0, _react.useMemo)(() => {
+    if (item.href) {
+      return item.href;
+    } // In these cases, it's not necessary to render a fallback
+    // We skip the "findFirstCategoryLink" computation
+
+
+    if (isBrowser || !item.collapsible) {
+      return undefined;
+    }
+
+    return (0, _themeCommon.findFirstCategoryLink)(item);
+  }, [item, isBrowser]);
 }
 
 function DocSidebarItemCategory({
   item,
   onItemClick,
-  collapsible = true,
   activePath,
+  level,
   ...props
 }) {
   const {
     items,
-    label
+    label,
+    collapsible,
+    className,
+    href
   } = item;
-  const isActive = isActiveSidebarItem(item, activePath);
+  const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
+  const isActive = (0, _themeCommon.isActiveSidebarItem)(item, activePath);
   const {
     collapsed,
     setCollapsed,
@@ -112,13 +128,11 @@ function DocSidebarItemCategory({
     // active categories are always initialized as expanded
     // the default (item.collapsed) is only used for non-active categories
     initialState: () => {
-      var _item$collapsed;
-
       if (!collapsible) {
         return false;
       }
 
-      return isActive ? false : (_item$collapsed = item.collapsed) !== null && _item$collapsed !== void 0 ? _item$collapsed : true;
+      return isActive ? false : item.collapsed;
     }
   });
   useAutoExpandActiveCategory({
@@ -126,22 +140,43 @@ function DocSidebarItemCategory({
     collapsed,
     setCollapsed
   });
-  return <li className={(0, _clsx.default)('menu__list-item', {
+  return <li className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docSidebarItemCategory, _themeCommon.ThemeClassNames.docs.docSidebarItemCategoryLevel(level), 'menu__list-item', {
     'menu__list-item--collapsed': collapsed
-  })}>
-      {
-      /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
-    }
-      <a className={(0, _clsx.default)('menu__link', {
-      'menu__link--sublist': collapsible,
-      'menu__link--active': collapsible && isActive,
-      [_stylesModule.default.menuLinkText]: !collapsible
-    })} onClick={collapsible ? toggleCollapsed : undefined} href={collapsible ? '#' : undefined} {...props}>
-        {label}
-      </a>
-
-      <_themeCommon.Collapsible as="ul" className="menu__list" collapsed={collapsed}>
-        <DocSidebarItems items={items} tabIndex={collapsed ? -1 : 0} onItemClick={onItemClick} collapsible={collapsible} activePath={activePath} />
+  }, className)}>
+      <div className="menu__list-item-collapsible">
+        <_Link.default className={(0, _clsx.default)('menu__link', {
+        'menu__link--sublist': collapsible && !href,
+        'menu__link--active': isActive,
+        [_stylesModule.default.menuLinkText]: !collapsible,
+        [_stylesModule.default.hasHref]: !!hrefWithSSRFallback
+      })} onClick={collapsible ? e => {
+        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+
+        if (href) {
+          setCollapsed(false);
+        } else {
+          e.preventDefault();
+          toggleCollapsed();
+        }
+      } : () => {
+        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+      }} href={collapsible ? hrefWithSSRFallback !== null && hrefWithSSRFallback !== void 0 ? hrefWithSSRFallback : '#' : hrefWithSSRFallback} {...props}>
+          {label}
+        </_Link.default>
+        {href && collapsible && <button aria-label={(0, _Translate.translate)({
+        id: 'theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel',
+        message: "Toggle the collapsible sidebar category '{label}'",
+        description: 'The ARIA label to toggle the collapsible sidebar category'
+      }, {
+        label
+      })} type="button" className="clean-btn menu__caret" onClick={e => {
+        e.preventDefault();
+        toggleCollapsed();
+      }} />}
+      </div>
+
+      <_themeCommon.Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
+        <DocSidebarItems items={items} tabIndex={collapsed ? -1 : 0} onItemClick={onItemClick} activePath={activePath} level={level + 1} />
       </_themeCommon.Collapsible>
     </li>;
 }
@@ -150,21 +185,20 @@ function DocSidebarItemLink({
   item,
   onItemClick,
   activePath,
-  collapsible: _collapsible,
+  level,
   ...props
 }) {
   const {
     href,
-    label
+    label,
+    className
   } = item;
-  const isActive = isActiveSidebarItem(item, activePath);
-  return <li className="menu__list-item" key={label}>
+  const isActive = (0, _themeCommon.isActiveSidebarItem)(item, activePath);
+  return <li className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docSidebarItemLink, _themeCommon.ThemeClassNames.docs.docSidebarItemLinkLevel(level), 'menu__list-item', className)} key={label}>
       <_Link.default className={(0, _clsx.default)('menu__link', {
       'menu__link--active': isActive
-    })} to={href} {...(0, _isInternalUrl.default)(href) && {
-      isNavLink: true,
-      exact: true,
-      onClick: onItemClick
+    })} aria-current={isActive ? 'page' : undefined} to={href} {...(0, _isInternalUrl.default)(href) && {
+      onClick: onItemClick ? () => onItemClick(item) : undefined
     }} {...props}>
         {(0, _isInternalUrl.default)(href) ? label : <span>
             {label}

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

@@ -12,4 +12,8 @@
   .menuLinkText:hover {
     background: none;
   }
+
+  .menuLinkText.hasHref {
+    cursor: pointer;
+  }
 }

package/lib/theme/DocTagDocListPage/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DocTagDocListPage;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Layout = _interopRequireDefault(require("@theme/Layout"));
+
+var _Link = _interopRequireDefault(require("@docusaurus/Link"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+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.
+ */
+// Very simple pluralization: probably good enough for now
+function useNDocsTaggedPlural() {
+  const {
+    selectMessage
+  } = (0, _themeCommon.usePluralForm)();
+  return count => selectMessage(count, (0, _Translate.translate)({
+    id: 'theme.docs.tagDocListPageTitle.nDocsTagged',
+    description: 'Pluralized label for "{count} docs tagged". 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 doc tagged|{count} docs tagged'
+  }, {
+    count
+  }));
+}
+
+function DocItem({
+  doc
+}) {
+  return <article className="margin-vert--lg">
+      <_Link.default to={doc.permalink}>
+        <h2>{doc.title}</h2>
+      </_Link.default>
+      {doc.description && <p>{doc.description}</p>}
+    </article>;
+}
+
+function DocTagDocListPage({
+  tag
+}) {
+  const nDocsTaggedPlural = useNDocsTaggedPlural();
+  const title = (0, _Translate.translate)({
+    id: 'theme.docs.tagDocListPageTitle',
+    description: 'The title of the page for a docs tag',
+    message: '{nDocsTagged} with "{tagName}"'
+  }, {
+    nDocsTagged: nDocsTaggedPlural(tag.docs.length),
+    tagName: tag.name
+  });
+  return <_Layout.default title={title} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.docsPages} pageClassName={_themeCommon.ThemeClassNames.page.docsTagDocListPage} searchMetadata={{
+    // assign unique search tag to exclude this page from search results!
+    tag: 'doc_tag_doc_list'
+  }}>
+      <div className="container margin-vert--lg">
+        <div className="row">
+          <main className="col col--8 col--offset-2">
+            <header className="margin-bottom--xl">
+              <h1>{title}</h1>
+              <_Link.default href={tag.allTagsPath}>
+                <_Translate.default id="theme.tags.tagsPageLink" description="The label of the link targeting the tag list page">
+                  View All Tags
+                </_Translate.default>
+              </_Link.default>
+            </header>
+            <section className="margin-vert--lg">
+              {tag.docs.map(doc => <DocItem key={doc.id} doc={doc} />)}
+            </section>
+          </main>
+        </div>
+      </div>
+    </_Layout.default>;
+}

package/lib/theme/DocTagsListPage/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Layout = _interopRequireDefault(require("@theme/Layout"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+var _TagsListByLetter = _interopRequireDefault(require("@theme/TagsListByLetter"));
+
+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 DocTagsListPage({
+  tags
+}) {
+  const title = (0, _themeCommon.translateTagsPageTitle)();
+  return <_Layout.default title={title} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.docsPages} pageClassName={_themeCommon.ThemeClassNames.page.docsTagsListPage} searchMetadata={{
+    // assign unique search tag to exclude this page from search results!
+    tag: 'doc_tags_list'
+  }}>
+      <div className="container margin-vert--lg">
+        <div className="row">
+          <main className="col col--8 col--offset-2">
+            <h1>{title}</h1>
+            <_TagsListByLetter.default tags={tags} />
+          </main>
+        </div>
+      </div>
+    </_Layout.default>;
+}
+
+var _default = DocTagsListPage;
+exports.default = _default;

package/lib/theme/DocVersionBadge/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DocVersionBadge;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+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 DocVersionBadge({
+  className
+}) {
+  const versionMetadata = (0, _themeCommon.useDocsVersion)();
+
+  if (versionMetadata.badge) {
+    return <span className={(0, _clsx.default)(className, _themeCommon.ThemeClassNames.docs.docVersionBadge, 'badge badge--secondary')}>
+        Version: {versionMetadata.label}
+      </span>;
+  }
+
+  return null;
+}

package/lib/theme/DocVersionBanner/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = DocVersionBanner;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -17,6 +17,8 @@ var _useDocs = require("@theme/hooks/useDocs");
 
 var _themeCommon = require("@docusaurus/theme-common");
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -79,6 +81,7 @@ function LatestVersionSuggestionLabel({
 }
 
 function DocVersionBannerEnabled({
+  className,
   versionMetadata
 }) {
   const {
@@ -104,7 +107,7 @@ function DocVersionBannerEnabled({
   // fallback to main doc of latest version
 
   const latestVersionSuggestedDoc = latestDocSuggestion !== null && latestDocSuggestion !== void 0 ? latestDocSuggestion : getVersionMainDoc(latestVersionSuggestion);
-  return <div className="alert alert--warning margin-bottom--md" role="alert">
+  return <div className={(0, _clsx.default)(className, _themeCommon.ThemeClassNames.docs.docVersionBanner, 'alert alert--warning margin-bottom--md')} role="alert">
       <div>
         <BannerLabel siteTitle={siteTitle} versionMetadata={versionMetadata} />
       </div>
@@ -115,14 +118,13 @@ function DocVersionBannerEnabled({
 }
 
 function DocVersionBanner({
-  versionMetadata
+  className
 }) {
-  if (versionMetadata.banner === 'none') {
-    return <></>;
-  } else {
-    return <DocVersionBannerEnabled versionMetadata={versionMetadata} />;
+  const versionMetadata = (0, _themeCommon.useDocsVersion)();
+
+  if (versionMetadata.banner) {
+    return <DocVersionBannerEnabled className={className} versionMetadata={versionMetadata} />;
   }
-}
 
-var _default = DocVersionBanner;
-exports.default = _default;
+  return null;
+}

package/lib/theme/EditThisPage/index.js

@@ -11,6 +11,8 @@ var _Translate = _interopRequireDefault(require("@docusaurus/Translate"));
 
 var _IconEdit = _interopRequireDefault(require("@theme/IconEdit"));
 
+var _themeCommon = require("@docusaurus/theme-common");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -22,7 +24,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function EditThisPage({
   editUrl
 }) {
-  return <a href={editUrl} target="_blank" rel="noreferrer noopener">
+  return <a href={editUrl} target="_blank" rel="noreferrer noopener" className={_themeCommon.ThemeClassNames.common.editThisPage}>
       <_IconEdit.default />
       <_Translate.default id="theme.common.editThisPage" description="The link label to edit the current page">
         Edit this page

package/lib/theme/ErrorPageContent.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ErrorPageContent;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Translate = _interopRequireDefault(require("@docusaurus/Translate"));
+
+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 ErrorPageContent({
+  error,
+  tryAgain
+}) {
+  return <main className="container margin-vert--xl">
+      <div className="row">
+        <div className="col col--6 col--offset-3">
+          <h1 className="hero__title">
+            <_Translate.default id="theme.ErrorPageContent.title" description="The title of the fallback page when the page crashed">
+              This page crashed.
+            </_Translate.default>
+          </h1>
+          <p>{error.message}</p>
+          <div>
+            <button type="button" onClick={tryAgain}>
+              <_Translate.default id="theme.ErrorPageContent.tryAgain" description="The label of the button to try again when the page crashed">
+                Try again
+              </_Translate.default>
+            </button>
+          </div>
+        </div>
+      </div>
+    </main>;
+}

package/lib/theme/Footer/index.js

@@ -54,10 +54,14 @@ function FooterLink({
     </_Link.default>;
 }
 
-const FooterLogo = ({
+function FooterLogo({
   sources,
-  alt
-}) => <_ThemedImage.default className="footer__logo" alt={alt} sources={sources} />;
+  alt,
+  width,
+  height
+}) {
+  return <_ThemedImage.default className="footer__logo" alt={alt} sources={sources} width={width} height={height} />;
+}
 
 function Footer() {
   const {
@@ -98,7 +102,7 @@ function Footer() {
         {(logo || copyright) && <div className="footer__bottom text--center">
             {logo && (logo.src || logo.srcDark) && <div className="margin-bottom--sm">
                 {logo.href ? <_Link.default href={logo.href} className={_stylesModule.default.footerLogoLink}>
-                    <FooterLogo alt={logo.alt} sources={sources} />
+                    <FooterLogo alt={logo.alt} sources={sources} width={logo.width} height={logo.height} />
                   </_Link.default> : <FooterLogo alt={logo.alt} sources={sources} />}
               </div>}
             {copyright ? <div className="footer__copyright" // Developer provided the HTML, so assume it's safe.