@docusaurus/theme-classic 2.0.0-beta.8bda3b2db → 2.0.0-beta.9

package/lib/theme/BackToTopButton/index.js

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _Translate = require("@docusaurus/Translate");
+
+var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+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
+  };
+}
+
+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 = (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 [show, setShow] = (0, _react.useState)(false);
+  const isFocusedAnchor = (0, _react.useRef)(false);
+  const {
+    smoothScrollTop,
+    cancelScrollToTop
+  } = useSmoothScrollToTop();
+  (0, _themeCommon.useScrollPosition)(({
+    scrollY: scrollTop
+  }, lastPosition) => {
+    const lastScrollTop = lastPosition === null || lastPosition === void 0 ? void 0 : 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);
+    }
+  });
+  (0, _themeCommon.useLocationChange)(locationChangeEvent => {
+    if (locationChangeEvent.location.hash) {
+      isFocusedAnchor.current = true;
+      setShow(false);
+    }
+  });
+  return <button aria-label={(0, _Translate.translate)({
+    id: 'theme.BackToTopButton.buttonAriaLabel',
+    message: 'Scroll back to top',
+    description: 'The ARIA label for the back to top button'
+  })} className={(0, _clsx.default)('clean-btn', _themeCommon.ThemeClassNames.common.backToTopButton, _stylesModule.default.backToTopButton, {
+    [_stylesModule.default.backToTopButtonShow]: show
+  })} type="button" onClick={() => smoothScrollTop()} />;
+}
+
+var _default = BackToTopButton;
+exports.default = _default;

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

@@ -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.
+ */
+
+.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: var(--ifm-z-index-fixed);
+  box-shadow: var(--ifm-global-shadow-lw);
+  transition: all var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+  opacity: 0;
+  transform: scale(0);
+}
+
+.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);
+}

package/lib/theme/BlogArchivePage/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlogArchive;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Layout = _interopRequireDefault(require("@theme/Layout"));
+
+var _Link = _interopRequireDefault(require("@docusaurus/Link"));
+
+var _Translate = 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 Year({
+  year,
+  posts
+}) {
+  return <>
+      <h3>{year}</h3>
+      <ul>
+        {posts.map(post => <li key={post.metadata.date}>
+            <_Link.default to={post.metadata.permalink}>
+              {post.metadata.formattedDate} - {post.metadata.title}
+            </_Link.default>
+          </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
+  }));
+}
+
+function BlogArchive({
+  archive
+}) {
+  const title = (0, _Translate.translate)({
+    id: 'theme.blog.archive.title',
+    message: 'Archive',
+    description: 'The page & hero title of the blog archive page'
+  });
+  const description = (0, _Translate.translate)({
+    id: 'theme.blog.archive.description',
+    message: 'Archive',
+    description: 'The page & hero description of the blog archive page'
+  });
+  const years = listPostsByYears(archive.blogPosts);
+  return <_Layout.default title={title} description={description}>
+      <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.default>;
+}

package/lib/theme/BlogLayout/index.js

@@ -0,0 +1,51 @@
+"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"));
+
+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;
+  const hasSidebar = sidebar && sidebar.items.length > 0;
+  return <_Layout.default {...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
+        })} itemScope itemType="http://schema.org/Blog">
+            {children}
+          </main>
+          {toc && <div className="col col--2">{toc}</div>}
+        </div>
+      </div>
+    </_Layout.default>;
+}
+
+var _default = BlogLayout;
+exports.default = _default;

package/lib/theme/BlogListPage/index.js

@@ -9,14 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocusaurusContext"));
 
-var _Layout = _interopRequireDefault(require("@theme/Layout"));
+var _BlogLayout = _interopRequireDefault(require("@theme/BlogLayout"));
 
 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 }; }
@@ -45,26 +43,17 @@ function BlogListPage(props) {
   } = 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={{
+  return <_BlogLayout.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>;
+  }} sidebar={sidebar}>
+      {items.map(({
+      content: BlogPostContent
+    }) => <_BlogPostItem.default key={BlogPostContent.metadata.permalink} frontMatter={BlogPostContent.frontMatter} assets={BlogPostContent.assets} metadata={BlogPostContent.metadata} truncated={BlogPostContent.metadata.truncated}>
+          <BlogPostContent />
+        </_BlogPostItem.default>)}
+      <_BlogListPaginator.default metadata={metadata} />
+    </_BlogLayout.default>;
 }
 
 var _default = BlogListPage;

package/lib/theme/BlogPostAuthor/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Link = _interopRequireDefault(require("@docusaurus/Link"));
+
+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 BlogPostAuthor({
+  author
+}) {
+  const {
+    name,
+    title,
+    url,
+    imageURL
+  } = author;
+  return <div className="avatar margin-bottom--sm">
+      {imageURL && <_Link.default className="avatar__photo-link avatar__photo" href={url}>
+          <img className={_stylesModule.default.image} src={imageURL} alt={name} />
+        </_Link.default>}
+
+      {// Note: only legacy author frontmatter allow empty name (not frontMatter.authors)
+    name && <div className="avatar__intro" itemProp="author" itemScope itemType="https://schema.org/Person">
+            <div className="avatar__name">
+              <_Link.default href={url} itemProp="url">
+                <span itemProp="name">{name}</span>
+              </_Link.default>
+            </div>
+            {title && <small className="avatar__subtitle" itemProp="description">
+                {title}
+              </small>}
+          </div>}
+    </div>;
+}
+
+var _default = BlogPostAuthor;
+exports.default = _default;

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

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/lib/theme/BlogPostAuthors/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlogPostAuthors;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _BlogPostAuthor = _interopRequireDefault(require("@theme/BlogPostAuthor"));
+
+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.
+ */
+// Component responsible for the authors layout
+function BlogPostAuthors({
+  authors,
+  assets
+}) {
+  const authorsCount = authors.length;
+
+  if (authorsCount === 0) {
+    return <></>;
+  }
+
+  return <div className="row margin-top--md margin-bottom--sm">
+      {authors.map((author, idx) => {
+      var _assets$authorsImageU;
+
+      return <div className={(0, _clsx.default)('col col--6', _stylesModule.default.authorCol)} key={idx}>
+          <_BlogPostAuthor.default author={{ ...author,
+          // Handle author images using relative paths
+          imageURL: (_assets$authorsImageU = assets.authorsImageUrls[idx]) !== null && _assets$authorsImageU !== void 0 ? _assets$authorsImageU : author.imageURL
+        }} />
+        </div>;
+    })}
+    </div>;
+}

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

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+
+.authorCol {
+  max-width: inherit !important;
+  flex-grow: 1 !important;
+}

package/lib/theme/BlogPostItem/index.js

@@ -15,16 +15,20 @@ var _Translate = _interopRequireWildcard(require("@docusaurus/Translate"));
 
 var _Link = _interopRequireDefault(require("@docusaurus/Link"));
 
+var _useBaseUrl = require("@docusaurus/useBaseUrl");
+
 var _themeCommon = require("@docusaurus/theme-common");
 
 var _MDXComponents = _interopRequireDefault(require("@theme/MDXComponents"));
 
-var _Seo = _interopRequireDefault(require("@theme/Seo"));
-
 var _EditThisPage = _interopRequireDefault(require("@theme/EditThisPage"));
 
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
+var _TagsListInline = _interopRequireDefault(require("@theme/TagsListInline"));
+
+var _BlogPostAuthors = _interopRequireDefault(require("@theme/BlogPostAuthors"));
+
 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; }
@@ -55,10 +59,16 @@ function useReadingTimePlural() {
 }
 
 function BlogPostItem(props) {
+  var _assets$image;
+
   const readingTimePlural = useReadingTimePlural();
+  const {
+    withBaseUrl
+  } = (0, _useBaseUrl.useBaseUrlUtils)();
   const {
     children,
     frontMatter,
+    assets,
     metadata,
     truncated,
     isBlogPostPage = false
@@ -70,91 +80,72 @@ function BlogPostItem(props) {
     tags,
     readingTime,
     title,
-    editUrl
+    editUrl,
+    authors
   } = metadata;
-  const {
-    author,
-    image,
-    keywords
-  } = frontMatter;
-  const authorURL = frontMatter.author_url || frontMatter.authorURL;
-  const authorTitle = frontMatter.author_title || frontMatter.authorTitle;
-  const authorImageURL = frontMatter.author_image_url || frontMatter.authorImageURL;
+  const image = (_assets$image = assets.image) !== null && _assets$image !== void 0 ? _assets$image : frontMatter.image;
+  const truncatedPost = !isBlogPostPage && truncated;
+  const tagsExists = tags.length > 0;
 
   const renderPostHeader = () => {
     const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
     return <header>
-        <TitleHeading className={_stylesModule.default.blogPostTitle}>
-          {isBlogPostPage ? title : <_Link.default to={permalink}>{title}</_Link.default>}
+        <TitleHeading className={_stylesModule.default.blogPostTitle} itemProp="headline">
+          {isBlogPostPage ? title : <_Link.default itemProp="url" to={permalink}>
+              {title}
+            </_Link.default>}
         </TitleHeading>
         <div className={(0, _clsx.default)(_stylesModule.default.blogPostData, 'margin-vert--md')}>
-          <time dateTime={date}>{formattedDate}</time>
+          <time dateTime={date} itemProp="datePublished">
+            {formattedDate}
+          </time>
 
-          {readingTime && <>
+          {typeof readingTime !== 'undefined' && <>
               {' · '}
               {readingTimePlural(readingTime)}
             </>}
         </div>
-        <div className="avatar margin-vert--md">
-          {authorImageURL && <_Link.default className="avatar__photo-link avatar__photo" href={authorURL}>
-              <img src={authorImageURL} alt={author} />
-            </_Link.default>}
-          <div className="avatar__intro">
-            {author && <>
-                <div className="avatar__name">
-                  <_Link.default href={authorURL}>{author}</_Link.default>
-                </div>
-                <small className="avatar__subtitle">{authorTitle}</small>
-              </>}
-          </div>
-        </div>
+        <_BlogPostAuthors.default authors={authors} assets={assets} />
       </header>;
   };
 
-  return <>
-      <_Seo.default {...{
-      keywords,
-      image
-    }} />
+  return <article className={!isBlogPostPage ? 'margin-bottom--xl' : undefined} itemProp="blogPost" itemScope itemType="http://schema.org/BlogPosting">
+      {renderPostHeader()}
 
-      <article className={!isBlogPostPage ? 'margin-bottom--xl' : undefined}>
-        {renderPostHeader()}
-        <div className="markdown">
-          <_react2.MDXProvider components={_MDXComponents.default}>{children}</_react2.MDXProvider>
-        </div>
-        {(tags.length > 0 || truncated) && <footer className={(0, _clsx.default)('row docusaurus-mt-lg', {
-        [_stylesModule.default.blogPostDetailsFull]: isBlogPostPage
+      {image && <meta itemProp="image" content={withBaseUrl(image, {
+      absolute: true
+    })} />}
+
+      <div className="markdown" itemProp="articleBody">
+        <_react2.MDXProvider components={_MDXComponents.default}>{children}</_react2.MDXProvider>
+      </div>
+
+      {(tagsExists || truncated) && <footer className={(0, _clsx.default)('row docusaurus-mt-lg', {
+      [_stylesModule.default.blogPostDetailsFull]: isBlogPostPage
+    })}>
+          {tagsExists && <div className={(0, _clsx.default)('col', {
+        'col--9': truncatedPost
+      })}>
+              <_TagsListInline.default tags={tags} />
+            </div>}
+
+          {isBlogPostPage && editUrl && <div className="col margin-top--sm">
+              <_EditThisPage.default editUrl={editUrl} />
+            </div>}
+
+          {truncatedPost && <div className={(0, _clsx.default)('col text--right', {
+        'col--3': tagsExists
       })}>
-            {tags.length > 0 && <div className="col">
+              <_Link.default to={metadata.permalink} aria-label={`Read more about ${title}`}>
                 <b>
-                  <_Translate.default id="theme.tags.tagsListLabel" description="The label alongside a tag list">
-                    Tags:
+                  <_Translate.default id="theme.blog.post.readMore" description="The label used in blog post item excerpts to link to full blog posts">
+                    Read More
                   </_Translate.default>
                 </b>
-                {tags.map(({
-            label,
-            permalink: tagPermalink
-          }) => <_Link.default key={tagPermalink} className="margin-horiz--sm" to={tagPermalink}>
-                    {label}
-                  </_Link.default>)}
-              </div>}
-
-            {isBlogPostPage && editUrl && <div className="col margin-top--sm">
-                <_EditThisPage.default editUrl={editUrl} />
-              </div>}
-
-            {!isBlogPostPage && truncated && <div className="col text--right">
-                <_Link.default to={metadata.permalink} aria-label={`Read more about ${title}`}>
-                  <b>
-                    <_Translate.default id="theme.blog.post.readMore" description="The label used in blog post item excerpts to link to full blog posts">
-                      Read More
-                    </_Translate.default>
-                  </b>
-                </_Link.default>
-              </div>}
-          </footer>}
-      </article>
-    </>;
+              </_Link.default>
+            </div>}
+        </footer>}
+    </article>;
 }
 
 var _default = BlogPostItem;