Add support for tags in docs header (#469)

* Create index.tsx

* Comment out tags in footer

Since we want to have tags at the top of the page we should hide them from the footer.

* Create index.tsx

* Add tags to top of page

Make tags more likely to be seen at first glance on a page by adding components here.

* Add styles for tags at top of page

Add styles to make tags on the same line as `Version` and provide styles to make it look decent in the dark theme.

* Change tag header from `Tags:` to `Editions:`

* Add Font Awesome plugins

* Add styles for Font Awesome question-mark icon

* Add Font Awesome components and question-mark icon

Add Font Awesome components and question-mark icon. The question-mark icon links to our pricing page, which shows features for the available editions.

* Add tooltip for question-mark button/link

* Add tooltip style and border to tags on hover

* Create styles.module.css

* Create index.tsx

* Remove unnecessary styles

These styles are no longer necessary after swizzling the `TagsListInline` component and changing `Tags` to `Editions`.

* Make `Edition` left-aligned

If `Edition` is right aligned, the spacing is awkward if the screen becomes narrow on both desktop and mobile. In such case, at least for now, aligning the `Edition` tags below the version number is less awkward.

* Change component name

Change component name, which was changed in Docusaurus 3.5.0.

* Justify align tags with version

* Comment out "Editions"

Since we'll be showing tags other than editions, we've decided to remove "Editions" from the badge area at the top of the page.

* Add tags

* Add tags

* Remove awkward margin spacing on mobile

* Fix issue with tags being left aligned in Firefox

Author: josh-wong

docs/index.mdx

@@ -1,3 +1,10 @@
+---
+tags:
+  - Community
+  - Enterprise Standard
+  - Enterprise Premium
+---
+
 # ScalarDB
 
 import { CardRowAbout, CardRowGettingStarted, CardRowSamples, CardRowDevelop, CardRowDeploy, CardRowManage, CardRowReference } from '/src/components/Cards/3.13';

docs/releases/release-notes.mdx

@@ -1,3 +1,10 @@
+---
+tags:
+  - Community
+  - Enterprise Standard
+  - Enterprise Premium
+---
+
 # ScalarDB 3.13 Release Notes
 
 This page includes a list of release notes for ScalarDB 3.13.

docs/releases/release-support-policy.mdx

@@ -1,3 +1,9 @@
+---
+tags:
+  - Enterprise Standard
+  - Enterprise Premium
+---
+
 # Release Support Policy
 
 This page describes Scalar's support policy for major and minor version releases of ScalarDB.

docs/scalar-licensing/README.mdx

@@ -1,3 +1,9 @@
+---
+tags:
+  - Enterprise Standard
+  - Enterprise Premium
+---
+
 # How to Configure a Product License Key
 
 import Tabs from '@theme/Tabs';

package-lock.json

@@ -22,6 +22,11 @@
     "@docusaurus/plugin-pwa": "3.5.1",
     "@docusaurus/preset-classic": "3.5.1",
     "@docusaurus/theme-mermaid": "^3.5.1",
+    "@fortawesome/fontawesome-svg-core": "6.5.2",
+    "@fortawesome/free-brands-svg-icons": "6.5.2",
+    "@fortawesome/free-regular-svg-icons": "6.5.2",
+    "@fortawesome/free-solid-svg-icons": "6.5.2",
+    "@fortawesome/react-fontawesome": "0.2.2",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "docusaurus-lunr-search": "^3.3.2",

package.json

@@ -100,3 +100,104 @@ html[data-theme="dark"] .header-github-link::before {
 html[data-theme="dark"] .navbar-sidebar .header-github-link {
   filter: invert(0%);
 }
+
+/* Make tags appear above doc title (tags are natively at the bottom of docs in Docusaurus) */
+
+.badge {
+  border: none;
+  display: flow-root;
+  font-size: 85%;
+  line-height: 2;
+  margin: 0.25rem 0 1rem 0;
+  padding-top: 0.5rem;
+  width: -webkit-fill-available;
+}
+
+.theme-doc-footer-tags-row {
+  display: inline-flex;
+  float: inline-end;
+}
+
+.margin-top--sm, .margin-vert--sm {
+  margin-top: 0 !important;
+}
+
+.margin-left--sm {
+  margin-left: 0 !important;
+}
+
+a[class^='tag_'] {
+  background-color: #2673BB;
+  border: 2px solid #2673BB;
+  color: white;
+  font-weight: bold;
+
+  &:hover {
+    border: 2px solid #78C740;
+  }
+}
+
+html[data-theme="dark"] .badge {
+  background-color: #252526;
+  border: none;
+  color: white;
+}
+
+html[data-theme="dark"] a[class^='tag_'] {
+  background-color: #2673BB;
+  border: 2px solid #2673BB;
+  color: white;
+  font-weight: bold;
+
+  &:hover {
+    border: 2px solid #78C740;
+  }
+}
+
+/* The following Font Awesome-related styles are for the question mark next to the Editions tags. These styles are currently not being used but might be useful later. */
+a[class^='fa-solid fa-circle-question'] {
+  color: #6B7280;
+  vertical-align: middle;
+
+  &:hover {
+    color: #78C740;
+  }
+}
+
+html[data-theme="dark"] a[class^='fa-solid fa-circle-question'] {
+  color: #9CA3AF;
+  vertical-align: middle;
+
+  &:hover {
+    color: #78C740;
+  }
+}
+
+/* Tooltip container */
+.tooltip {
+  position: relative;
+  display: inline-block;
+  /* border-bottom: 1px dotted black; */ /* If you want dots under the hoverable text */
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  background-color: #6c6c6c;
+  border-radius: 5px;
+  color: white;
+  font-size: 12px;
+  padding: 3px 10px;
+  position: absolute;
+  text-align: center;
+  text-wrap: nowrap;
+  visibility: hidden;
+  width: auto;
+  z-index: 1;
+  top: -2px;
+  left: 125%;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}

src/css/custom.css

@@ -0,0 +1,57 @@
+/**
+ * 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 {ThemeClassNames} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/plugin-content-docs/client';
+import TagsListInline from '@theme/TagsListInline';
+
+import EditMetaRow from '@theme/EditMetaRow';
+
+export default function DocItemFooter(): JSX.Element | null {
+  const {metadata} = useDoc();
+  const {editUrl, lastUpdatedAt, lastUpdatedBy, tags} = metadata;
+
+  const canDisplayTagsRow = tags.length > 0;
+  const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
+
+  const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
+
+  if (!canDisplayFooter) {
+    return null;
+  }
+
+  return (
+    <footer
+      className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}>
+      {/* Commented out tags since we've added them to the top of docs. (See src/theme/DocVersionBadge/index.tsx) */}
+      {/* {canDisplayTagsRow && (
+        <div
+          className={clsx(
+            'row margin-top--sm',
+            ThemeClassNames.docs.docFooterTagsRow,
+          )}>
+          <div className="col">
+            <TagsListInline tags={tags} />
+          </div>
+        </div>
+      )} */}
+      {canDisplayEditMetaRow && (
+        <EditMetaRow
+          className={clsx(
+            'margin-top--sm',
+            ThemeClassNames.docs.docFooterEditMetaRow,
+          )}
+          editUrl={editUrl}
+          lastUpdatedAt={lastUpdatedAt}
+          lastUpdatedBy={lastUpdatedBy}
+        />
+      )}
+    </footer>
+  );
+}

src/theme/DocItem/Footer/index.tsx

@@ -0,0 +1,59 @@
+/**
+ * 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 Translate from '@docusaurus/Translate';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useDocsVersion, useDoc} from '@docusaurus/plugin-content-docs/client';
+import type {Props} from '@theme/DocVersionBadge';
+import TagsListInline from '@theme/TagsListInline';
+// Import the original mapper
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; // Import the FontAwesomeIcon component.
+import { library } from '@fortawesome/fontawesome-svg-core'; // Import the library component.
+import { fab } from '@fortawesome/free-brands-svg-icons'; // Import all brands icons.
+import { far, faCircleQuestion } from '@fortawesome/free-regular-svg-icons'; // Import all solid icons.
+import { fas } from '@fortawesome/free-solid-svg-icons'; // Import all solid icons.
+
+library.add(fab, fas, far, faCircleQuestion); // Add all icons to the library so you can use them without importing them individually.
+
+export default function DocVersionBadge({
+  className,
+}: Props): JSX.Element | null {
+
+  const {metadata} = useDoc();
+  const {tags} = metadata;
+
+  const versionMetadata = useDocsVersion();
+  if (versionMetadata.badge) {
+    return (
+      <span
+        className={clsx(
+          className,
+          ThemeClassNames.docs.docVersionBadge,
+          'badge badge--secondary',
+        )}>
+        <Translate
+          id="theme.docs.versionBadge.label"
+          values={{versionLabel: versionMetadata.label}}>
+          {'Version: {versionLabel}'}
+        </Translate>
+        <div
+          className={clsx(
+            'row margin-top--sm',
+            ThemeClassNames.docs.docFooterTagsRow,
+          )}>
+          <div className="col">
+            <TagsListInline tags={tags} />
+            <a href="https://scalar-labs.com/pricing/" target="_blank" className="fa-solid fa-circle-question tooltip"><FontAwesomeIcon icon={faCircleQuestion} size="lg" /><span className="tooltiptext">Features and pricing</span></a>
+          </div>
+        </div>
+      </span>
+    );
+  }
+  return null;
+}

src/theme/DocVersionBadge/index.tsx

@@ -12,17 +12,17 @@ export default function TagsListInline({tags}: Props): JSX.Element {
       {/* <b>
         <Translate
           id="theme.tags.tagsListLabel"
-          description="The label alongside a tag list">
-          Tags:
+          description="The label alongside a list of editions">
+          Editions:
         </Translate>
-      </b>
+      </b> */}
       <ul className={clsx(styles.tags, 'padding--none', 'margin-left--sm')}>
-        {tags.map((tag) => (
-          <li key={tag.permalink} className={styles.tag}>
-            <Tag {...tag} />
+        {tags.map(({label, permalink: tagPermalink}) => (
+          <li key={tagPermalink} className={styles.tag}>
+            <Tag label={label} permalink={tagPermalink} />
           </li>
         ))}
-      </ul> */}
+      </ul>
     </>
   );
 }