@docusaurus/theme-classic 2.0.0-beta.18 → 2.0.0-beta.19

package/lib/validateThemeConfig.js

@@ -6,8 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.ThemeConfigSchema = exports.DEFAULT_CONFIG = void 0;
 exports.validateThemeConfig = validateThemeConfig;
 
+var _palenight = _interopRequireDefault(require("prism-react-renderer/themes/palenight"));
+
 var _utilsValidation = require("@docusaurus/utils-validation");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
@@ -15,11 +19,19 @@ var _utilsValidation = require("@docusaurus/utils-validation");
  * LICENSE file in the root directory of this source tree.
  */
 const DEFAULT_DOCS_CONFIG = {
-  versionPersistence: 'localStorage'
+  versionPersistence: 'localStorage',
+  sidebar: {
+    hideable: false,
+    autoCollapseCategories: false
+  }
 };
 
 const DocsSchema = _utilsValidation.Joi.object({
-  versionPersistence: _utilsValidation.Joi.string().equal('localStorage', 'none').default(DEFAULT_DOCS_CONFIG.versionPersistence)
+  versionPersistence: _utilsValidation.Joi.string().equal('localStorage', 'none').default(DEFAULT_DOCS_CONFIG.versionPersistence),
+  sidebar: _utilsValidation.Joi.object({
+    hideable: _utilsValidation.Joi.bool().default(DEFAULT_DOCS_CONFIG.sidebar.hideable),
+    autoCollapseCategories: _utilsValidation.Joi.bool().default(DEFAULT_DOCS_CONFIG.sidebar.autoCollapseCategories)
+  }).default(DEFAULT_DOCS_CONFIG.sidebar)
 }).default(DEFAULT_DOCS_CONFIG);
 
 const DEFAULT_COLOR_MODE_CONFIG = {
@@ -32,14 +44,21 @@ const DEFAULT_CONFIG = {
   docs: DEFAULT_DOCS_CONFIG,
   metadata: [],
   prism: {
-    additionalLanguages: []
+    additionalLanguages: [],
+    theme: _palenight.default,
+    magicComments: [{
+      className: 'theme-code-block-highlighted-line',
+      line: 'highlight-next-line',
+      block: {
+        start: 'highlight-start',
+        end: 'highlight-end'
+      }
+    }]
   },
   navbar: {
     hideOnScroll: false,
     items: []
   },
-  hideableSidebar: false,
-  autoCollapseSidebarCategories: false,
   tableOfContents: {
     minHeadingLevel: 2,
     maxHeadingLevel: 3
@@ -51,8 +70,9 @@ const NavbarItemPosition = _utilsValidation.Joi.string().equal('left', 'right').
 
 const NavbarItemBaseSchema = _utilsValidation.Joi.object({
   label: _utilsValidation.Joi.string(),
+  html: _utilsValidation.Joi.string(),
   className: _utilsValidation.Joi.string()
-}) // We allow any unknown attributes on the links (users may need additional
+}).nand('html', 'label') // We allow any unknown attributes on the links (users may need additional
 // attributes like target, aria-role, data-customAttribute...)
 .unknown();
 
@@ -85,9 +105,24 @@ const DocSidebarItemSchema = NavbarItemBaseSchema.append({
   docsPluginId: _utilsValidation.Joi.string()
 });
 
+const HtmlNavbarItemSchema = _utilsValidation.Joi.object({
+  className: _utilsValidation.Joi.string(),
+  type: _utilsValidation.Joi.string().equal('html').required(),
+  value: _utilsValidation.Joi.string().required()
+}); // A temporary workaround to allow users to add custom navbar items
+// See https://github.com/facebook/docusaurus/issues/7227
+
+
+const CustomNavbarItemRegexp = /custom-.*/;
+
+const CustomNavbarItemSchema = _utilsValidation.Joi.object({
+  type: _utilsValidation.Joi.string().regex(CustomNavbarItemRegexp).required()
+}).unknown();
+
 const itemWithType = type => {
-  // because equal(undefined) is not supported :/
-  const typeSchema = type ? _utilsValidation.Joi.string().required().equal(type) : _utilsValidation.Joi.string().forbidden();
+  // Because equal(undefined) is not supported :/
+  const typeSchema = // eslint-disable-next-line no-nested-ternary
+  type instanceof RegExp ? _utilsValidation.Joi.string().required().regex(type) : type ? _utilsValidation.Joi.string().required().equal(type) : _utilsValidation.Joi.string().forbidden();
   return _utilsValidation.Joi.object({
     type: typeSchema
   }).unknown().required();
@@ -108,6 +143,12 @@ const DropdownSubitemSchema = _utilsValidation.Joi.object({
   }, {
     is: itemWithType(undefined),
     then: DefaultNavbarItemSchema
+  }, {
+    is: itemWithType('html'),
+    then: HtmlNavbarItemSchema
+  }, {
+    is: itemWithType(CustomNavbarItemRegexp),
+    then: CustomNavbarItemSchema
   }, {
     is: _utilsValidation.Joi.alternatives().try(itemWithType('dropdown'), itemWithType('docsVersionDropdown'), itemWithType('localeDropdown'), itemWithType('search')),
     then: _utilsValidation.Joi.forbidden().messages({
@@ -163,6 +204,12 @@ const NavbarItemSchema = _utilsValidation.Joi.object({
   }, {
     is: itemWithType('search'),
     then: SearchItemSchema
+  }, {
+    is: itemWithType('html'),
+    then: HtmlNavbarItemSchema
+  }, {
+    is: itemWithType(CustomNavbarItemRegexp),
+    then: CustomNavbarItemSchema
   }, {
     is: itemWithType(undefined),
     then: _utilsValidation.Joi.object().when('.', {
@@ -186,8 +233,7 @@ const ColorModeSchema = _utilsValidation.Joi.object({
   switchConfig: _utilsValidation.Joi.any().forbidden().messages({
     'any.unknown': 'colorMode.switchConfig is deprecated. If you want to customize the icons for light and dark mode, swizzle IconLightMode, IconDarkMode, or ColorModeToggle instead.'
   })
-}).default(DEFAULT_COLOR_MODE_CONFIG); // schema can probably be improved
-
+}).default(DEFAULT_COLOR_MODE_CONFIG);
 
 const HtmlMetadataSchema = _utilsValidation.Joi.object({
   id: _utilsValidation.Joi.string(),
@@ -276,16 +322,28 @@ const ThemeConfigSchema = _utilsValidation.Joi.object({
     theme: _utilsValidation.Joi.object({
       plain: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.array(), _utilsValidation.Joi.object()).required(),
       styles: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.array(), _utilsValidation.Joi.object()).required()
-    }),
+    }).default(DEFAULT_CONFIG.prism.theme),
     darkTheme: _utilsValidation.Joi.object({
       plain: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.array(), _utilsValidation.Joi.object()).required(),
       styles: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.array(), _utilsValidation.Joi.object()).required()
     }),
     defaultLanguage: _utilsValidation.Joi.string(),
-    additionalLanguages: _utilsValidation.Joi.array().items(_utilsValidation.Joi.string()).default(DEFAULT_CONFIG.prism.additionalLanguages)
+    additionalLanguages: _utilsValidation.Joi.array().items(_utilsValidation.Joi.string()).default(DEFAULT_CONFIG.prism.additionalLanguages),
+    magicComments: _utilsValidation.Joi.array().items(_utilsValidation.Joi.object({
+      className: _utilsValidation.Joi.string().required(),
+      line: _utilsValidation.Joi.string(),
+      block: _utilsValidation.Joi.object({
+        start: _utilsValidation.Joi.string().required(),
+        end: _utilsValidation.Joi.string().required()
+      })
+    }).or('line', 'block')).default(DEFAULT_CONFIG.prism.magicComments)
   }).default(DEFAULT_CONFIG.prism).unknown(),
-  hideableSidebar: _utilsValidation.Joi.bool().default(DEFAULT_CONFIG.hideableSidebar),
-  autoCollapseSidebarCategories: _utilsValidation.Joi.bool().default(DEFAULT_CONFIG.autoCollapseSidebarCategories),
+  hideableSidebar: _utilsValidation.Joi.forbidden().messages({
+    'any.unknown': 'themeConfig.hideableSidebar has been moved to themeConfig.docs.sidebar.hideable.'
+  }),
+  autoCollapseSidebarCategories: _utilsValidation.Joi.forbidden().messages({
+    'any.unknown': 'themeConfig.autoCollapseSidebarCategories has been moved to themeConfig.docs.sidebar.autoCollapseCategories.'
+  }),
   sidebarCollapsible: _utilsValidation.Joi.forbidden().messages({
     'any.unknown': 'The themeConfig.sidebarCollapsible has been moved to docs plugin options. See: https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs'
   }),

package/lib-next/theme/BackToTopButton/index.js

@@ -4,110 +4,14 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, {useRef, useState} from 'react';
+import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
+import {ThemeClassNames, useBackToTopButton} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
-import {
-  ThemeClassNames,
-  useScrollPosition,
-  useLocationChange,
-} from '@docusaurus/theme-common';
-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
-  };
-}
-
-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(); // Break the recursion. Prevents the user from "fighting" against that
-  // recursion producing a weird UX
-
-  return () => raf && cancelAnimationFrame(raf);
-}
-
-function useSmoothScrollToTop() {
-  const lastCancelRef = useRef(null);
-
-  function smoothScrollTop() {
-    lastCancelRef.current = SupportsNativeSmoothScrolling
-      ? smoothScrollTopNative()
-      : smoothScrollTopPolyfill();
-  }
-
-  return {
-    smoothScrollTop,
-    cancelScrollToTop: () => lastCancelRef.current?.(),
-  };
-}
-
 export default function BackToTopButton() {
-  const [show, setShow] = useState(false);
-  const isFocusedAnchor = useRef(false);
-  const {smoothScrollTop, cancelScrollToTop} = useSmoothScrollToTop();
-  useScrollPosition(({scrollY: scrollTop}, lastPosition) => {
-    const lastScrollTop = lastPosition?.scrollY; // No lastScrollTop means component is just being mounted.
-    // Not really a scroll event from the user, so we ignore it
-
-    if (!lastScrollTop) {
-      return;
-    }
-
-    if (isFocusedAnchor.current) {
-      isFocusedAnchor.current = false;
-      return;
-    }
-
-    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);
-    }
-  });
-  useLocationChange((locationChangeEvent) => {
-    if (locationChangeEvent.location.hash) {
-      isFocusedAnchor.current = true;
-      setShow(false);
-    }
+  const {shown, scrollToTop} = useBackToTopButton({
+    threshold: 300,
   });
   return (
     <button
@@ -120,10 +24,10 @@ export default function BackToTopButton() {
         'clean-btn',
         ThemeClassNames.common.backToTopButton,
         styles.backToTopButton,
-        show && styles.backToTopButtonShow,
+        shown && styles.backToTopButtonShow,
       )}
       type="button"
-      onClick={() => smoothScrollTop()}
+      onClick={scrollToTop}
     />
   );
 }

package/lib-next/theme/BlogLayout/index.js

@@ -15,11 +15,7 @@ export default function BlogLayout(props) {
     <Layout {...layoutProps}>
       <div className="container margin-vert--lg">
         <div className="row">
-          {hasSidebar && (
-            <aside className="col col--3">
-              <BlogSidebar sidebar={sidebar} />
-            </aside>
-          )}
+          <BlogSidebar sidebar={sidebar} />
           <main
             className={clsx('col', {
               'col--7': hasSidebar,

package/lib-next/theme/BlogListPaginator/index.js

@@ -18,34 +18,31 @@ export default function BlogListPaginator(props) {
         message: 'Blog list page navigation',
         description: 'The ARIA label for the blog pagination',
       })}>
-      <div className="pagination-nav__item">
-        {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>
-            }
-          />
-        )}
-      </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {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>
-            }
-          />
-        )}
-      </div>
+      {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>
   );
 }

package/lib-next/theme/BlogPostAuthor/index.js

@@ -6,7 +6,6 @@
  */
 import React from 'react';
 import Link from '@docusaurus/Link';
-import styles from './styles.module.css';
 
 function MaybeLink(props) {
   if (props.href) {
@@ -22,11 +21,9 @@ export default function BlogPostAuthor({author}) {
   return (
     <div className="avatar margin-bottom--sm">
       {imageURL && (
-        <span className="avatar__photo-link avatar__photo">
-          <MaybeLink href={link}>
-            <img className={styles.image} src={imageURL} alt={name} />
-          </MaybeLink>
-        </span>
+        <MaybeLink href={link} className="avatar__photo-link">
+          <img className="avatar__photo" src={imageURL} alt={name} />
+        </MaybeLink>
       )}
 
       {name && (

package/lib-next/theme/BlogPostItem/styles.module.css

@@ -9,6 +9,15 @@
   font-size: 3rem;
 }
 
+/**
+  Blog post title should be smaller on smaller devices
+**/
+@media (max-width: 576px) {
+  .blogPostTitle {
+    font-size: 2rem;
+  }
+}
+
 .blogPostData {
   font-size: 0.9rem;
 }

package/lib-next/theme/BlogPostPaginator/index.js

@@ -17,34 +17,31 @@ export default function BlogPostPaginator(props) {
         message: 'Blog post page navigation',
         description: 'The ARIA label for the blog posts pagination',
       })}>
-      <div className="pagination-nav__item">
-        {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>
-            }
-          />
-        )}
-      </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {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>
-            }
-          />
-        )}
-      </div>
+      {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>
   );
 }

package/lib-next/theme/BlogSidebar/Desktop/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 clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {translate} from '@docusaurus/Translate';
+import styles from './styles.module.css';
+export default function BlogSidebarDesktop({sidebar}) {
+  return (
+    <aside className="col col--3">
+      <nav
+        className={clsx(styles.sidebar, 'thin-scrollbar')}
+        aria-label={translate({
+          id: 'theme.blog.sidebar.navAriaLabel',
+          message: 'Blog recent posts navigation',
+          description: 'The ARIA label for recent posts in the blog sidebar',
+        })}>
+        <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
+          {sidebar.title}
+        </div>
+        <ul className={clsx(styles.sidebarItemList, 'clean-list')}>
+          {sidebar.items.map((item) => (
+            <li key={item.permalink} className={styles.sidebarItem}>
+              <Link
+                isNavLink
+                to={item.permalink}
+                className={styles.sidebarItemLink}
+                activeClassName={styles.sidebarItemLinkActive}>
+                {item.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </aside>
+  );
+}

package/lib-next/theme/BlogSidebar/{styles.module.css → Desktop/styles.module.css}

@@ -18,9 +18,7 @@
 }
 
 .sidebarItemList {
-  list-style: none;
   font-size: 0.9rem;
-  padding-left: 0;
 }
 
 .sidebarItem {
@@ -29,6 +27,7 @@
 
 .sidebarItemLink {
   color: var(--ifm-font-color-base);
+  display: block;
 }
 
 .sidebarItemLink:hover {

package/lib-next/theme/BlogSidebar/Mobile/index.js

@@ -0,0 +1,36 @@
+/**
+ * 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 {NavbarSecondaryMenuFiller} from '@docusaurus/theme-common';
+
+function BlogSidebarMobileSecondaryMenu({sidebar}) {
+  return (
+    <ul className="menu__list">
+      {sidebar.items.map((item) => (
+        <li key={item.permalink} className="menu__list-item">
+          <Link
+            isNavLink
+            to={item.permalink}
+            className="menu__link"
+            activeClassName="menu__link--active">
+            {item.title}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default function BlogSidebarMobile(props) {
+  return (
+    <NavbarSecondaryMenuFiller
+      component={BlogSidebarMobileSecondaryMenu}
+      props={props}
+    />
+  );
+}

package/lib-next/theme/BlogSidebar/index.js

@@ -5,39 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import styles from './styles.module.css';
-import {translate} from '@docusaurus/Translate';
+import BlogSidebarDesktop from '@theme/BlogSidebar/Desktop';
+import BlogSidebarMobile from '@theme/BlogSidebar/Mobile';
+import {useWindowSize} from '@docusaurus/theme-common';
 export default function BlogSidebar({sidebar}) {
-  if (sidebar.items.length === 0) {
+  const windowSize = useWindowSize();
+
+  if (!sidebar?.items.length) {
     return null;
+  } // Mobile sidebar doesn't need to be server-rendered
+
+  if (windowSize === 'mobile') {
+    return <BlogSidebarMobile sidebar={sidebar} />;
   }
 
-  return (
-    <nav
-      className={clsx(styles.sidebar, 'thin-scrollbar')}
-      aria-label={translate({
-        id: 'theme.blog.sidebar.navAriaLabel',
-        message: 'Blog recent posts navigation',
-        description: 'The ARIA label for recent posts in the blog sidebar',
-      })}>
-      <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
-        {sidebar.title}
-      </div>
-      <ul className={styles.sidebarItemList}>
-        {sidebar.items.map((item) => (
-          <li key={item.permalink} className={styles.sidebarItem}>
-            <Link
-              isNavLink
-              to={item.permalink}
-              className={styles.sidebarItemLink}
-              activeClassName={styles.sidebarItemLinkActive}>
-              {item.title}
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </nav>
-  );
+  return <BlogSidebarDesktop sidebar={sidebar} />;
 }

package/lib-next/theme/BlogTagsListPage/index.js

@@ -15,8 +15,7 @@ import {
 } from '@docusaurus/theme-common';
 import SearchMetadata from '../SearchMetadata';
 import clsx from 'clsx';
-export default function BlogTagsListPage(props) {
-  const {tags, sidebar} = props;
+export default function BlogTagsListPage({tags, sidebar}) {
   const title = translateTagsPageTitle();
   return (
     <HtmlClassNameProvider
@@ -28,7 +27,7 @@ export default function BlogTagsListPage(props) {
       <SearchMetadata tag="blog_tags_list" />
       <BlogLayout sidebar={sidebar}>
         <h1>{title}</h1>
-        <TagsListByLetter tags={Object.values(tags)} />
+        <TagsListByLetter tags={tags} />
       </BlogLayout>
     </HtmlClassNameProvider>
   );

package/lib-next/theme/BlogTagsPostsPage/index.js

@@ -38,9 +38,7 @@ function useBlogPostsPlural() {
     );
 }
 
-export default function BlogTagsPostsPage(props) {
-  const {metadata, items, sidebar, listMetadata} = props;
-  const {allTagsPath, name: tagName, count} = metadata;
+export default function BlogTagsPostsPage({tag, items, sidebar, listMetadata}) {
   const blogPostsPlural = useBlogPostsPlural();
   const title = translate(
     {
@@ -49,8 +47,8 @@ export default function BlogTagsPostsPage(props) {
       message: '{nPosts} tagged with "{tagName}"',
     },
     {
-      nPosts: blogPostsPlural(count),
-      tagName,
+      nPosts: blogPostsPlural(tag.count),
+      tagName: tag.label,
     },
   );
   return (
@@ -65,7 +63,7 @@ export default function BlogTagsPostsPage(props) {
         <header className="margin-bottom--xl">
           <h1>{title}</h1>
 
-          <Link href={allTagsPath}>
+          <Link href={tag.allTagsPath}>
             <Translate
               id="theme.tags.tagsPageLink"
               description="The label of the link targeting the tag list page">