diff --git a/packages/docusaurus-theme-classic/src/theme/DocTagDocListPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocTagDocListPage/index.tsx
index 8753e2c6625e..7c1985bea42e 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocTagDocListPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocTagDocListPage/index.tsx
@@ -14,7 +14,7 @@ import type {
PropTagDocList,
PropTagDocListDoc,
} from '@docusaurus/plugin-content-docs-types';
-import {translate} from '@docusaurus/Translate';
+import Translate, {translate} from '@docusaurus/Translate';
type Props = {
tag: PropTagDocList;
@@ -40,12 +40,12 @@ function useNDocsTaggedPlural() {
function DocItem({doc}: {doc: PropTagDocListDoc}): JSX.Element {
return (
-
+
{doc.title}
{doc.description && {doc.description}
}
-
+
);
}
@@ -74,13 +74,19 @@ export default function DocTagDocListPage({tag}: Props): JSX.Element {
{title}
- View All Tags
+
+
+ View All Tags
+
+
-
+
{tag.docs.map((doc) => (
))}
-
+
diff --git a/packages/docusaurus-theme-classic/src/theme/Tag/index.tsx b/packages/docusaurus-theme-classic/src/theme/Tag/index.tsx
new file mode 100644
index 000000000000..c2871fb3352e
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/Tag/index.tsx
@@ -0,0 +1,31 @@
+/**
+ * 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 type {Props} from '@theme/Tag';
+
+import styles from './styles.module.css';
+
+function Tag(props: Props): JSX.Element {
+ const {permalink, name, count} = props;
+
+ return (
+
+ {name}
+ {count && {count}}
+
+ );
+}
+
+export default Tag;
diff --git a/packages/docusaurus-theme-classic/src/theme/Tag/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Tag/styles.module.css
new file mode 100644
index 000000000000..e5870d6b3aec
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/Tag/styles.module.css
@@ -0,0 +1,70 @@
+/**
+ * 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.
+ */
+
+:root {
+ --docusaurus-tag-list-border: var(--ifm-color-emphasis-300);
+}
+
+.tag {
+ border: 1px solid var(--docusaurus-tag-list-border);
+ transition: border var(--ifm-transition-fast);
+}
+
+.tag:hover {
+ --docusaurus-tag-list-border: var(--ifm-link-color);
+ text-decoration: none;
+}
+
+.tagRegular {
+ border-radius: 0.5rem;
+ padding: 0.3rem 0.5rem;
+ font-size: 90%;
+}
+
+.tagWithCount {
+ display: flex;
+ align-items: center;
+ position: relative;
+ padding: 0 0.5rem 0 1rem;
+ border-left: 0;
+}
+
+.tagWithCount:before,
+.tagWithCount:after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ border: 1px solid var(--docusaurus-tag-list-border);
+ transition: inherit;
+}
+
+.tagWithCount:before {
+ right: 100%;
+ transform: translate(50%, -50%) rotate(-45deg);
+ width: 1.18rem;
+ height: 1.18rem;
+ border-right: 0;
+ border-bottom: 0;
+}
+
+.tagWithCount:after {
+ left: 0;
+ transform: translateY(-50%);
+ width: 0.5rem;
+ height: 0.5rem;
+ border-radius: 50%;
+}
+
+.tagWithCount span {
+ background: var(--ifm-color-secondary);
+ color: var(--ifm-color-black);
+ font-size: 0.7rem;
+ line-height: 1.2;
+ border-radius: var(--ifm-global-radius);
+ padding: 0.1rem 0.4rem;
+ margin-left: 0.3rem;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/TagsListByLetter/index.tsx b/packages/docusaurus-theme-classic/src/theme/TagsListByLetter/index.tsx
index aab5e3245cd9..41d70a6426ac 100644
--- a/packages/docusaurus-theme-classic/src/theme/TagsListByLetter/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/TagsListByLetter/index.tsx
@@ -6,24 +6,25 @@
*/
import React from 'react';
-import Link from '@docusaurus/Link';
+import Tag from '@theme/Tag';
import type {Props} from '@theme/TagsListByLetter';
import {listTagsByLetters, TagLetterEntry} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
+
function TagLetterEntryItem({letterEntry}: {letterEntry: TagLetterEntry}) {
return (
-
+
{letterEntry.letter}
- {letterEntry.tags.map((tag) => (
-
- {tag.name} ({tag.count})
-
- ))}
+
+ {letterEntry.tags.map((tag) => (
+ -
+
+
+ ))}
+
-
+
);
}
diff --git a/packages/docusaurus-theme-classic/src/theme/TagsListByLetter/styles.module.css b/packages/docusaurus-theme-classic/src/theme/TagsListByLetter/styles.module.css
new file mode 100644
index 000000000000..bb3203ea5193
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/TagsListByLetter/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.
+ */
+
+.tag {
+ display: inline-block;
+ margin: 0.5rem 0.5rem 0 1rem;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/TagsListInline/index.tsx b/packages/docusaurus-theme-classic/src/theme/TagsListInline/index.tsx
index ebb274176474..f1763085502c 100644
--- a/packages/docusaurus-theme-classic/src/theme/TagsListInline/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/TagsListInline/index.tsx
@@ -6,10 +6,13 @@
*/
import React from 'react';
-import Link from '@docusaurus/Link';
+import clsx from 'clsx';
import Translate from '@docusaurus/Translate';
+import Tag from '@theme/Tag';
import type {Props} from '@theme/TagsListInline';
+import styles from './styles.module.css';
+
export default function TagsListInline({tags}: Props) {
return (
<>
@@ -20,11 +23,13 @@ export default function TagsListInline({tags}: Props) {
Tags:
- {tags.map(({label, permalink: tagPermalink}) => (
-
- {label}
-
- ))}
+
+ {tags.map(({label, permalink: tagPermalink}) => (
+ -
+
+
+ ))}
+
>
);
}
diff --git a/packages/docusaurus-theme-classic/src/theme/TagsListInline/styles.module.css b/packages/docusaurus-theme-classic/src/theme/TagsListInline/styles.module.css
new file mode 100644
index 000000000000..d77c975550a7
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/TagsListInline/styles.module.css
@@ -0,0 +1,15 @@
+/**
+ * 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.
+ */
+
+.tags {
+ list-style: none;
+ display: inline-flex;
+}
+
+.tag {
+ margin-right: 0.4rem;
+}
diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts
index 724064101981..a878b2cb930e 100644
--- a/packages/docusaurus-theme-classic/src/types.d.ts
+++ b/packages/docusaurus-theme-classic/src/types.d.ts
@@ -723,3 +723,11 @@ declare module '@theme/TagsListInline' {
}>;
export default function TagsListInline(props: Props): JSX.Element;
}
+
+declare module '@theme/Tag' {
+ import type {TagsListItem} from '@theme/TagsListByLetter';
+
+ export type Props = Optional;
+
+ export default function Tag(props: Props): JSX.Element;
+}