Skip to content

Commit e19f5a7

Browse files
josh-wongjosh-wong
authored
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
1 parent f4ece00 commit e19f5a7

38 files changed

+515
-7
lines changed

‎docs/index.mdx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
---
2+
tags:
3+
- Community
4+
- Enterprise Standard
5+
- Enterprise Premium
6+
---
7+
18
# ScalarDB
29

310
import { CardRowAbout, CardRowGettingStarted, CardRowSamples, CardRowDevelop, CardRowDeploy, CardRowManage, CardRowReference } from '/src/components/Cards/3.13';

‎docs/releases/release-notes.mdx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
---
2+
tags:
3+
- Community
4+
- Enterprise Standard
5+
- Enterprise Premium
6+
---
7+
18
# ScalarDB 3.13 Release Notes
29

310
This page includes a list of release notes for ScalarDB 3.13.

‎docs/releases/release-support-policy.mdx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
---
2+
tags:
3+
- Enterprise Standard
4+
- Enterprise Premium
5+
---
6+
17
# Release Support Policy
28

39
This page describes Scalar's support policy for major and minor version releases of ScalarDB.

‎docs/scalar-licensing/README.mdx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
---
2+
tags:
3+
- Enterprise Standard
4+
- Enterprise Premium
5+
---
6+
17
# How to Configure a Product License Key
28

39
import Tabs from '@theme/Tabs';

‎package-lock.json‎

Lines changed: 74 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@
2222
"@docusaurus/plugin-pwa": "3.5.1",
2323
"@docusaurus/preset-classic": "3.5.1",
2424
"@docusaurus/theme-mermaid": "^3.5.1",
25+
"@fortawesome/fontawesome-svg-core": "6.5.2",
26+
"@fortawesome/free-brands-svg-icons": "6.5.2",
27+
"@fortawesome/free-regular-svg-icons": "6.5.2",
28+
"@fortawesome/free-solid-svg-icons": "6.5.2",
29+
"@fortawesome/react-fontawesome": "0.2.2",
2530
"@mdx-js/react": "^3.0.0",
2631
"clsx": "^2.0.0",
2732
"docusaurus-lunr-search": "^3.3.2",

‎src/css/custom.css‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,3 +100,104 @@ html[data-theme="dark"] .header-github-link::before {
100100
html[data-theme="dark"] .navbar-sidebar .header-github-link {
101101
filter: invert(0%);
102102
}
103+
104+
/* Make tags appear above doc title (tags are natively at the bottom of docs in Docusaurus) */
105+
106+
.badge {
107+
border: none;
108+
display: flow-root;
109+
font-size: 85%;
110+
line-height: 2;
111+
margin: 0.25rem 0 1rem 0;
112+
padding-top: 0.5rem;
113+
width: -webkit-fill-available;
114+
}
115+
116+
.theme-doc-footer-tags-row {
117+
display: inline-flex;
118+
float: inline-end;
119+
}
120+
121+
.margin-top--sm, .margin-vert--sm {
122+
margin-top: 0 !important;
123+
}
124+
125+
.margin-left--sm {
126+
margin-left: 0 !important;
127+
}
128+
129+
a[class^='tag_'] {
130+
background-color: #2673BB;
131+
border: 2px solid #2673BB;
132+
color: white;
133+
font-weight: bold;
134+
135+
&:hover {
136+
border: 2px solid #78C740;
137+
}
138+
}
139+
140+
html[data-theme="dark"] .badge {
141+
background-color: #252526;
142+
border: none;
143+
color: white;
144+
}
145+
146+
html[data-theme="dark"] a[class^='tag_'] {
147+
background-color: #2673BB;
148+
border: 2px solid #2673BB;
149+
color: white;
150+
font-weight: bold;
151+
152+
&:hover {
153+
border: 2px solid #78C740;
154+
}
155+
}
156+
157+
/* 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. */
158+
a[class^='fa-solid fa-circle-question'] {
159+
color: #6B7280;
160+
vertical-align: middle;
161+
162+
&:hover {
163+
color: #78C740;
164+
}
165+
}
166+
167+
html[data-theme="dark"] a[class^='fa-solid fa-circle-question'] {
168+
color: #9CA3AF;
169+
vertical-align: middle;
170+
171+
&:hover {
172+
color: #78C740;
173+
}
174+
}
175+
176+
/* Tooltip container */
177+
.tooltip {
178+
position: relative;
179+
display: inline-block;
180+
/* border-bottom: 1px dotted black; */ /* If you want dots under the hoverable text */
181+
}
182+
183+
/* Tooltip text */
184+
.tooltip .tooltiptext {
185+
background-color: #6c6c6c;
186+
border-radius: 5px;
187+
color: white;
188+
font-size: 12px;
189+
padding: 3px 10px;
190+
position: absolute;
191+
text-align: center;
192+
text-wrap: nowrap;
193+
visibility: hidden;
194+
width: auto;
195+
z-index: 1;
196+
top: -2px;
197+
left: 125%;
198+
}
199+
200+
/* Show the tooltip text when you mouse over the tooltip container */
201+
.tooltip:hover .tooltiptext {
202+
visibility: visible;
203+
}

‎src/theme/DocItem/Footer/index.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import React from 'react';
9+
import clsx from 'clsx';
10+
import {ThemeClassNames} from '@docusaurus/theme-common';
11+
import {useDoc} from '@docusaurus/plugin-content-docs/client';
12+
import TagsListInline from '@theme/TagsListInline';
13+
14+
import EditMetaRow from '@theme/EditMetaRow';
15+
16+
export default function DocItemFooter(): JSX.Element | null {
17+
const {metadata} = useDoc();
18+
const {editUrl, lastUpdatedAt, lastUpdatedBy, tags} = metadata;
19+
20+
const canDisplayTagsRow = tags.length > 0;
21+
const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
22+
23+
const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
24+
25+
if (!canDisplayFooter) {
26+
return null;
27+
}
28+
29+
return (
30+
<footer
31+
className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}>
32+
{/* Commented out tags since we've added them to the top of docs. (See src/theme/DocVersionBadge/index.tsx) */}
33+
{/* {canDisplayTagsRow && (
34+
<div
35+
className={clsx(
36+
'row margin-top--sm',
37+
ThemeClassNames.docs.docFooterTagsRow,
38+
)}>
39+
<div className="col">
40+
<TagsListInline tags={tags} />
41+
</div>
42+
</div>
43+
)} */}
44+
{canDisplayEditMetaRow && (
45+
<EditMetaRow
46+
className={clsx(
47+
'margin-top--sm',
48+
ThemeClassNames.docs.docFooterEditMetaRow,
49+
)}
50+
editUrl={editUrl}
51+
lastUpdatedAt={lastUpdatedAt}
52+
lastUpdatedBy={lastUpdatedBy}
53+
/>
54+
)}
55+
</footer>
56+
);
57+
}

‎src/theme/DocVersionBadge/index.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import React from 'react';
9+
import clsx from 'clsx';
10+
import Translate from '@docusaurus/Translate';
11+
import {ThemeClassNames} from '@docusaurus/theme-common';
12+
import {useDocsVersion, useDoc} from '@docusaurus/plugin-content-docs/client';
13+
import type {Props} from '@theme/DocVersionBadge';
14+
import TagsListInline from '@theme/TagsListInline';
15+
// Import the original mapper
16+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; // Import the FontAwesomeIcon component.
17+
import { library } from '@fortawesome/fontawesome-svg-core'; // Import the library component.
18+
import { fab } from '@fortawesome/free-brands-svg-icons'; // Import all brands icons.
19+
import { far, faCircleQuestion } from '@fortawesome/free-regular-svg-icons'; // Import all solid icons.
20+
import { fas } from '@fortawesome/free-solid-svg-icons'; // Import all solid icons.
21+
22+
library.add(fab, fas, far, faCircleQuestion); // Add all icons to the library so you can use them without importing them individually.
23+
24+
export default function DocVersionBadge({
25+
className,
26+
}: Props): JSX.Element | null {
27+
28+
const {metadata} = useDoc();
29+
const {tags} = metadata;
30+
31+
const versionMetadata = useDocsVersion();
32+
if (versionMetadata.badge) {
33+
return (
34+
<span
35+
className={clsx(
36+
className,
37+
ThemeClassNames.docs.docVersionBadge,
38+
'badge badge--secondary',
39+
)}>
40+
<Translate
41+
id="theme.docs.versionBadge.label"
42+
values={{versionLabel: versionMetadata.label}}>
43+
{'Version: {versionLabel}'}
44+
</Translate>
45+
<div
46+
className={clsx(
47+
'row margin-top--sm',
48+
ThemeClassNames.docs.docFooterTagsRow,
49+
)}>
50+
<div className="col">
51+
<TagsListInline tags={tags} />
52+
<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>
53+
</div>
54+
</div>
55+
</span>
56+
);
57+
}
58+
return null;
59+
}

‎src/theme/TagsListInline/index.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,17 @@ export default function TagsListInline({tags}: Props): JSX.Element {
1212
{/* <b>
1313
<Translate
1414
id="theme.tags.tagsListLabel"
15-
description="The label alongside a tag list">
16-
Tags:
15+
description="The label alongside a list of editions">
16+
Editions:
1717
</Translate>
18-
</b>
18+
</b> */}
1919
<ul className={clsx(styles.tags, 'padding--none', 'margin-left--sm')}>
20-
{tags.map((tag) => (
21-
<li key={tag.permalink} className={styles.tag}>
22-
<Tag {...tag} />
20+
{tags.map(({label, permalink: tagPermalink}) => (
21+
<li key={tagPermalink} className={styles.tag}>
22+
<Tag label={label} permalink={tagPermalink} />
2323
</li>
2424
))}
25-
</ul> */}
25+
</ul>
2626
</>
2727
);
2828
}

0 commit comments

Comments
 (0)