Skip to content

Commit ed6e924

Browse files
gingerwizardgingerwizard
authored
Merge pull request #3157 from Blargian/kb_search_styling
KB page: update styling of KB page
2 parents 5956b43 + ba7e98e commit ed6e924

File tree

15 files changed

+450
-6
lines changed

15 files changed

+450
-6
lines changed

‎src/css/custom.scss‎

Lines changed: 73 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1111,15 +1111,47 @@ nav[aria-label='Docs sidebar']:hover {
11111111
overflow-y: auto !important;
11121112
}
11131113

1114+
/* Styling changes for the tags page */
1115+
.blog-tags-list-page {
1116+
section.margin-vert--lg {
1117+
margin-top: 2rem !important;
1118+
}
1119+
}
1120+
11141121
.blog-list-page {
1122+
h1 {
1123+
margin-top: 2rem;
1124+
}
1125+
}
1126+
/* Landing page at /docs/knowledgebase and the page shown when you click a tag */
1127+
.blog-list-page, .blog-tags-post-list-page {
11151128

11161129
.container_mt6G {
11171130
font-size: 0.85rem;
11181131
}
11191132

1133+
.title_xvU1 {
1134+
font-size: 14px !important;
1135+
font-weight: 600 !important;
1136+
text-decoration: none !important;
1137+
margin-bottom: 8px !important;
1138+
}
1139+
11201140
.title_f1Hy {
1121-
font-size: 1rem !important;
1122-
margin-bottom: 0px !important;
1141+
font-size: 14px !important;
1142+
font-weight: 600 !important;
1143+
text-decoration: none !important;
1144+
margin-bottom: 12px !important;
1145+
}
1146+
1147+
time {
1148+
font-size: 14px;
1149+
font-weight: 400;
1150+
}
1151+
1152+
.markdown {
1153+
font-size: 14px;
1154+
font-weight: 400;
11231155
}
11241156

11251157
.margin-vert--md {
@@ -1142,6 +1174,41 @@ nav[aria-label='Docs sidebar']:hover {
11421174
margin-top: 30px !important;
11431175
margin-bottom: 1rem !important;
11441176
}
1177+
1178+
.container_iJTo {
1179+
margin-top: 8px !important;
1180+
margin-bottom: 0px !important;
1181+
}
1182+
1183+
.docusaurus-mt-lg {
1184+
margin-top: 12px !important;
1185+
}
1186+
}
1187+
1188+
.tag_zVej span {
1189+
border-radius: 9999px !important;
1190+
}
1191+
.tag_zVej::after {
1192+
display: none;
1193+
}
1194+
1195+
.tag_zVej::before {
1196+
display: none;
1197+
}
1198+
1199+
[data-theme='dark'] .tag_zVej {
1200+
padding: 2px 12px;
1201+
color: #C0C0C0;
1202+
background-color: #A0A0A033;
1203+
border-radius: 9999px;
1204+
border: 1px;
1205+
}
1206+
1207+
[data-theme='light'] .tag_zVej {
1208+
padding: 2px 12px;
1209+
color: #53575F;
1210+
background-color: var(--click-color-note-background);
1211+
border-radius: 9999px;
11451212
}
11461213

11471214
.blog-post-page {
@@ -1172,19 +1239,19 @@ form.DocSearch-Button {
11721239
/* Style changes to placeholder text of form element used in KBArticleSearch */
11731240

11741241
input::-webkit-input-placeholder { /* Chrome, Edge, Safari */
1175-
color: var(--docsearch-muted-color);;
1242+
color: var(--docsearch-muted-color);
11761243
}
11771244

11781245
input::-moz-placeholder { /* Firefox 19+ */
1179-
color:var(--docsearch-muted-color);;
1246+
color:var(--docsearch-muted-color);
11801247
}
11811248

11821249
input:-ms-input-placeholder { /* IE 10-11 */
1183-
color: var(--docsearch-muted-color);;
1250+
color: var(--docsearch-muted-color);
11841251
}
11851252

11861253
input::-ms-input-placeholder { /* Microsoft Edge */
1187-
color: var(--docsearch-muted-color);;
1254+
color: var(--docsearch-muted-color);
11881255
}
11891256

11901257
[data-theme='light'] .details_r1OI {

‎src/theme/BlogListPage/StructuredData/index.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import Head from '@docusaurus/Head';
3+
import {useBlogListPageStructuredData} from '@docusaurus/plugin-content-blog/client';
4+
export default function BlogListPageStructuredData(props) {
5+
const structuredData = useBlogListPageStructuredData(props);
6+
return (
7+
<Head>
8+
<script type="application/ld+json">
9+
{JSON.stringify(structuredData)}
10+
</script>
11+
</Head>
12+
);
13+
}

‎src/theme/BlogListPage/index.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
4+
import {
5+
PageMetadata,
6+
HtmlClassNameProvider,
7+
ThemeClassNames,
8+
} from '@docusaurus/theme-common';
9+
import BlogLayout from '@theme/BlogLayout';
10+
import BlogListPaginator from '@theme/BlogListPaginator';
11+
import SearchMetadata from '@theme/SearchMetadata';
12+
import BlogPostItems from '@theme/BlogPostItems';
13+
import BlogListPageStructuredData from '@theme/BlogListPage/StructuredData';
14+
function BlogListPageMetadata(props) {
15+
const {metadata} = props;
16+
const {
17+
siteConfig: {title: siteTitle},
18+
} = useDocusaurusContext();
19+
const {blogDescription, blogTitle, permalink} = metadata;
20+
const isBlogOnlyMode = permalink === '/';
21+
const title = isBlogOnlyMode ? siteTitle : blogTitle;
22+
return (
23+
<>
24+
<PageMetadata title={title} description={blogDescription} />
25+
<SearchMetadata tag="blog_posts_list" />
26+
</>
27+
);
28+
}
29+
function BlogListPageContent(props) {
30+
const {metadata, items, sidebar} = props;
31+
return (
32+
<BlogLayout sidebar={sidebar}>
33+
<h1>Recently Added</h1>
34+
<BlogPostItems items={items} />
35+
<BlogListPaginator metadata={metadata} />
36+
</BlogLayout>
37+
);
38+
}
39+
export default function BlogListPage(props) {
40+
return (
41+
<HtmlClassNameProvider
42+
className={clsx(
43+
ThemeClassNames.wrapper.blogPages,
44+
ThemeClassNames.page.blogListPage,
45+
)}>
46+
<BlogListPageMetadata {...props} />
47+
<BlogListPageStructuredData {...props} />
48+
<BlogListPageContent {...props} />
49+
</HtmlClassNameProvider>
50+
);
51+
}

‎src/theme/BlogPostItem/Container/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import React from 'react';
2+
export default function BlogPostItemContainer({children, className}) {
3+
return <article className={className}>{children}</article>;
4+
}

‎src/theme/BlogPostItem/Content/index.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import {blogPostContainerID} from '@docusaurus/utils-common';
4+
import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
5+
import MDXContent from '@theme/MDXContent';
6+
import BlogPostItemHeaderInfo from "@theme/BlogPostItem/Header/Info";
7+
export default function BlogPostItemContent({children, className}) {
8+
const {isBlogPostPage} = useBlogPost();
9+
return (
10+
<div
11+
// This ID is used for the feed generation to locate the main content
12+
id={isBlogPostPage ? blogPostContainerID : undefined}
13+
className={clsx('markdown', className)}>
14+
<MDXContent>{children}</MDXContent>
15+
<BlogPostItemHeaderInfo />
16+
</div>
17+
);
18+
}

‎src/theme/BlogPostItem/Footer/ReadMoreLink/index.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import Translate, {translate} from '@docusaurus/Translate';
3+
import Link from '@docusaurus/Link';
4+
function ReadMoreLabel() {
5+
return (
6+
<b>
7+
<Translate
8+
id="theme.blog.post.readMore"
9+
description="The label used in blog post item excerpts to link to full blog posts">
10+
Read more
11+
</Translate>
12+
</b>
13+
);
14+
}
15+
export default function BlogPostItemFooterReadMoreLink(props) {
16+
const {blogPostTitle, ...linkProps} = props;
17+
return (
18+
<Link
19+
aria-label={translate(
20+
{
21+
message: 'Read more about {title}',
22+
id: 'theme.blog.post.readMoreLabel',
23+
description:
24+
'The ARIA label for the link to full blog posts from excerpts',
25+
},
26+
{title: blogPostTitle},
27+
)}
28+
{...linkProps}>
29+
<ReadMoreLabel />
30+
</Link>
31+
);
32+
}

‎src/theme/BlogPostItem/Footer/index.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
4+
import {ThemeClassNames} from '@docusaurus/theme-common';
5+
import EditMetaRow from '@theme/EditMetaRow';
6+
import TagsListInline from '@theme/TagsListInline';
7+
import ReadMoreLink from '@theme/BlogPostItem/Footer/ReadMoreLink';
8+
export default function BlogPostItemFooter() {
9+
const {metadata, isBlogPostPage} = useBlogPost();
10+
const {
11+
tags,
12+
title,
13+
editUrl,
14+
hasTruncateMarker,
15+
lastUpdatedBy,
16+
lastUpdatedAt,
17+
} = metadata;
18+
// A post is truncated if it's in the "list view" and it has a truncate marker
19+
const truncatedPost = !isBlogPostPage && hasTruncateMarker;
20+
const tagsExists = tags.length > 0;
21+
const renderFooter = tagsExists || truncatedPost || editUrl;
22+
if (!renderFooter) {
23+
return null;
24+
}
25+
// BlogPost footer - details view
26+
if (isBlogPostPage) {
27+
const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
28+
return (
29+
<footer className="docusaurus-mt-lg">
30+
{tagsExists && (
31+
<div
32+
className={clsx(
33+
'row',
34+
'margin-top--sm',
35+
ThemeClassNames.blog.blogFooterEditMetaRow,
36+
)}>
37+
<div className="col">
38+
<TagsListInline tags={tags} />
39+
</div>
40+
</div>
41+
)}
42+
{canDisplayEditMetaRow && (
43+
<EditMetaRow
44+
className={clsx(
45+
'margin-top--sm',
46+
ThemeClassNames.blog.blogFooterEditMetaRow,
47+
)}
48+
editUrl={editUrl}
49+
lastUpdatedAt={lastUpdatedAt}
50+
lastUpdatedBy={lastUpdatedBy}
51+
/>
52+
)}
53+
</footer>
54+
);
55+
}
56+
// BlogPost footer - list view
57+
else {
58+
return (
59+
<footer className="row docusaurus-mt-lg">
60+
{tagsExists && (
61+
<div className={clsx('col', {'col--9': truncatedPost})}>
62+
<TagsListInline tags={tags} />
63+
</div>
64+
)}
65+
{truncatedPost && (
66+
<div
67+
className={clsx('col text--right', {
68+
'col--3': tagsExists,
69+
})}>
70+
<ReadMoreLink blogPostTitle={title} to={metadata.permalink} />
71+
</div>
72+
)}
73+
</footer>
74+
);
75+
}
76+
}

‎src/theme/BlogPostItem/Header/Authors/index.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
4+
import BlogAuthor from '@theme/Blog/Components/Author';
5+
import styles from './styles.module.css';
6+
// Component responsible for the authors layout
7+
export default function BlogPostItemHeaderAuthors({className}) {
8+
const {
9+
metadata: {authors},
10+
assets,
11+
} = useBlogPost();
12+
const authorsCount = authors.length;
13+
if (authorsCount === 0) {
14+
return null;
15+
}
16+
const imageOnly = authors.every(({name}) => !name);
17+
const singleAuthor = authors.length === 1;
18+
return (
19+
<div
20+
className={clsx(
21+
'margin-top--md margin-bottom--sm',
22+
imageOnly ? styles.imageOnlyAuthorRow : 'row',
23+
className,
24+
)}>
25+
{authors.map((author, idx) => (
26+
<div
27+
className={clsx(
28+
!imageOnly && (singleAuthor ? 'col col--12' : 'col col--6'),
29+
imageOnly ? styles.imageOnlyAuthorCol : styles.authorCol,
30+
)}
31+
key={idx}>
32+
<BlogAuthor
33+
author={{
34+
...author,
35+
// Handle author images using relative paths
36+
imageURL: assets.authorsImageUrls[idx] ?? author.imageURL,
37+
}}
38+
/>
39+
</div>
40+
))}
41+
</div>
42+
);
43+
}

‎src/theme/BlogPostItem/Header/Authors/styles.module.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.authorCol {
2+
max-width: inherit !important;
3+
}
4+
5+
.imageOnlyAuthorRow {
6+
display: flex;
7+
flex-flow: row wrap;
8+
}
9+
10+
.imageOnlyAuthorCol {
11+
margin-left: 0.3rem;
12+
margin-right: 0.3rem;
13+
}

0 commit comments

Comments
 (0)