Refactor a bit theme code and CSS

facebook · Mar 15, 2024 · cb7a7ee · cb7a7ee
1 parent 718c7c3
commit cb7a7ee
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 73 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -91,7 +91,7 @@ module.exports = {
     'no-constant-binary-expression': ERROR,
     'no-continue': OFF,
     'no-control-regex': WARNING,
-    'no-else-return': [WARNING, {allowElseIf: true}],
+    'no-else-return': OFF,
     'no-empty': [WARNING, {allowEmptyCatch: true}],
     'no-lonely-if': WARNING,
     'no-nested-ternary': WARNING,

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Footer/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Footer/index.tsx
@@ -13,8 +13,6 @@ import EditMetaRow from '@theme/EditMetaRow';
 import TagsListInline from '@theme/TagsListInline';
 import ReadMoreLink from '@theme/BlogPostItem/Footer/ReadMoreLink';
 
-import styles from './styles.module.css';
-
 export default function BlogPostItemFooter(): JSX.Element | null {
   const {metadata, isBlogPostPage} = useBlogPost();
   const {
@@ -37,41 +35,56 @@ export default function BlogPostItemFooter(): JSX.Element | null {
     return null;
   }
 
-  const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
-
-  return (
-    <footer
-      className={clsx(
-        'row docusaurus-mt-lg',
-        isBlogPostPage && styles.blogPostFooterDetailsFull,
-      )}>
-      {tagsExists && (
-        <div className={clsx('col', {'col--9': truncatedPost})}>
-          <TagsListInline tags={tags} />
-        </div>
-      )}
-
-      {!truncatedPost && canDisplayEditMetaRow && (
-        <EditMetaRow
-          className={clsx(
-            'col margin-top--sm',
-            ThemeClassNames.blog.blogFooterEditMetaRow,
-            styles.blogFooterPagePadding,
-          )}
-          editUrl={editUrl}
-          lastUpdatedAt={lastUpdatedAt}
-          lastUpdatedBy={lastUpdatedBy}
-        />
-      )}
+  // BlogPost footer - details view
+  if (isBlogPostPage) {
+    const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
 
-      {truncatedPost && (
-        <div
-          className={clsx('col text--right', {
-            'col--3': tagsExists,
-          })}>
-          <ReadMoreLink blogPostTitle={title} to={metadata.permalink} />
-        </div>
-      )}
-    </footer>
-  );
+    return (
+      <footer className="docusaurus-mt-lg">
+        {tagsExists && (
+          <div
+            className={clsx(
+              'row',
+              'margin-top--sm',
+              ThemeClassNames.blog.blogFooterEditMetaRow,
+            )}>
+            <div className="col">
+              <TagsListInline tags={tags} />
+            </div>
+          </div>
+        )}
+        {canDisplayEditMetaRow && (
+          <EditMetaRow
+            className={clsx(
+              'margin-top--sm',
+              ThemeClassNames.blog.blogFooterEditMetaRow,
+            )}
+            editUrl={editUrl}
+            lastUpdatedAt={lastUpdatedAt}
+            lastUpdatedBy={lastUpdatedBy}
+          />
+        )}
+      </footer>
+    );
+  }
+  // BlogPost footer - list view
+  else {
+    return (
+      <footer className="row docusaurus-mt-lg">
+        {tagsExists && (
+          <div className={clsx('col', {'col--9': truncatedPost})}>
+            <TagsListInline tags={tags} />
+          </div>
+        )}
+        {truncatedPost && (
+          <div
+            className={clsx('col text--right', {
+              'col--3': tagsExists,
+            })}>
+            <ReadMoreLink blogPostTitle={title} to={metadata.permalink} />
+          </div>
+        )}
+      </footer>
+    );
+  }
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Footer/styles.module.css b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Footer/styles.module.css
diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/Footer/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/Footer/index.tsx
@@ -9,26 +9,10 @@ import React from 'react';
 import clsx from 'clsx';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 import {useDoc} from '@docusaurus/theme-common/internal';
-import TagsListInline, {
-  type Props as TagsListInlineProps,
-} from '@theme/TagsListInline';
+import TagsListInline from '@theme/TagsListInline';
 
 import EditMetaRow from '@theme/EditMetaRow';
 
-function TagsRow(props: TagsListInlineProps) {
-  return (
-    <div
-      className={clsx(
-        ThemeClassNames.docs.docFooterTagsRow,
-        'row margin-bottom--sm',
-      )}>
-      <div className="col">
-        <TagsListInline {...props} />
-      </div>
-    </div>
-  );
-}
-
 export default function DocItemFooter(): JSX.Element | null {
   const {metadata} = useDoc();
   const {editUrl, lastUpdatedAt, lastUpdatedBy, tags} = metadata;
@@ -45,10 +29,23 @@ export default function DocItemFooter(): JSX.Element | null {
   return (
     <footer
       className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}>
-      {canDisplayTagsRow && <TagsRow tags={tags} />}
+      {canDisplayTagsRow && (
+        <div
+          className={clsx(
+            'row margin-top--sm',
+            ThemeClassNames.docs.docFooterTagsRow,
+          )}>
+          <div className="col">
+            <TagsListInline tags={tags} />
+          </div>
+        </div>
+      )}
       {canDisplayEditMetaRow && (
         <EditMetaRow
-          className={clsx(ThemeClassNames.docs.docFooterEditMetaRow)}
+          className={clsx(
+            'margin-top--sm',
+            ThemeClassNames.docs.docFooterEditMetaRow,
+          )}
           editUrl={editUrl}
           lastUpdatedAt={lastUpdatedAt}
           lastUpdatedBy={lastUpdatedBy}

diff --git a/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts b/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts
@@ -73,6 +73,7 @@ export const ThemeClassNames = {
   },
   blog: {
     // TODO add other stable classNames here
+    blogFooterTagsRow: 'theme-blog-footer-tags-row',
     blogFooterEditMetaRow: 'theme-blog-footer-edit-meta-row',
   },
 } as const;
diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
@@ -195,7 +195,9 @@ export default async function createConfigAsync() {
         result = result.replaceAll('{/_', '{/*');
         result = result.replaceAll('_/}', '*/}');
 
-        if (isDev) {
+        const showDevLink = false;
+
+        if (isDev && showDevLink) {
           const isPartial = path.basename(filePath).startsWith('_');
           if (!isPartial) {
             // "vscode://file/${projectPath}${filePath}:${line}:${column}",