Skip to content

Commit e8c7845

Browse files
sunnylqmsunnylqm
committed
Update documentation to reflect recent changes and improve clarity
1 parent b908221 commit e8c7845

15 files changed

Lines changed: 782 additions & 0 deletions

File tree

‎cnwebsite/src/theme/Badge/index.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and 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 styles from './styles.module.css';
10+
11+
export default function Badge({icon, title}) {
12+
return (
13+
<div className={styles.container}>
14+
{icon}
15+
{title}
16+
</div>
17+
);
18+
}

‎cnwebsite/src/theme/Badge/styles.module.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and 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+
.container {
9+
display: inline-flex;
10+
align-items: center;
11+
padding: 0.15rem 0.75rem;
12+
gap: 0.25rem;
13+
border: 1px solid var(--ifm-color-gray-500);
14+
border-radius: 99rem;
15+
font-size: 0.875rem;
16+
font-weight: 500;
17+
color: var(--ifm-color-gray-700);
18+
}
19+
20+
[data-theme="dark"] .container {
21+
border: 1px solid var(--ifm-color-gray-700);
22+
color: var(--ifm-color-gray-500);
23+
}

‎cnwebsite/src/theme/Blog/Components/Author/index.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import Link from '@docusaurus/Link';
4+
import AuthorSocials from '@theme/Blog/Components/Author/Socials';
5+
import Heading from '@theme/Heading';
6+
import styles from './styles.module.css';
7+
8+
function MaybeLink(props) {
9+
if (props.href) {
10+
return <Link {...props} />;
11+
}
12+
return <>{props.children}</>;
13+
}
14+
function AuthorTitle({title}) {
15+
return (
16+
<small className={styles.authorTitle} title={title}>
17+
{title}
18+
</small>
19+
);
20+
}
21+
function AuthorName({name, as}) {
22+
if (!as) {
23+
return <span className={styles.authorName}>{name}</span>;
24+
} else {
25+
return (
26+
<Heading as={as} className={styles.authorName}>
27+
{name}
28+
</Heading>
29+
);
30+
}
31+
}
32+
function AuthorBlogPostCount({count}) {
33+
return <span className={clsx(styles.authorBlogPostCount)}>{count}</span>;
34+
}
35+
// Note: in the future we might want to have multiple "BlogAuthor" components
36+
// Creating different display modes with the "as" prop may not be the best idea
37+
// Explainer: https://kyleshevlin.com/prefer-multiple-compositions/
38+
// For now, we almost use the same design for all cases, so it's good enough
39+
export default function BlogAuthor({as, author, className, count}) {
40+
const {name, title, url, imageURL, email, page} = author;
41+
const link =
42+
page?.permalink || url || (email && `mailto:${email}`) || undefined;
43+
return (
44+
<div
45+
className={clsx(
46+
'avatar margin-bottom--md',
47+
className,
48+
styles[`author-as-${as}`]
49+
)}>
50+
{imageURL && (
51+
<MaybeLink href={link} className="avatar__photo-link">
52+
<img
53+
className={clsx('avatar__photo', styles.authorImage)}
54+
src={imageURL}
55+
alt={name}
56+
/>
57+
</MaybeLink>
58+
)}
59+
60+
{(name || title) && (
61+
<div className={clsx('avatar__intro', styles.authorDetails)}>
62+
<div className="avatar__name">
63+
{name && (
64+
<MaybeLink href={link}>
65+
<AuthorName name={name} as={as} />
66+
</MaybeLink>
67+
)}
68+
{count && <AuthorBlogPostCount count={count} />}
69+
</div>
70+
{!!title && <AuthorTitle title={title} />}
71+
72+
{/*
73+
We always render AuthorSocials even if there's none
74+
This keeps other things aligned with flexbox layout
75+
*/}
76+
<AuthorSocials author={author} />
77+
</div>
78+
)}
79+
</div>
80+
);
81+
}

‎cnwebsite/src/theme/Blog/Components/Author/styles.module.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and 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+
.authorImage {
9+
background: var(--home-hero-grid-icon);
10+
--ifm-avatar-photo-size: 3.6rem;
11+
}
12+
13+
.author-as-h1 .authorImage {
14+
--ifm-avatar-photo-size: 7rem;
15+
}
16+
17+
.author-as-h2 .authorImage {
18+
--ifm-avatar-photo-size: 5.4rem;
19+
}
20+
21+
.authorDetails {
22+
display: flex;
23+
flex-direction: column;
24+
align-items: flex-start;
25+
justify-content: space-around;
26+
}
27+
28+
.authorName {
29+
font-size: 1rem;
30+
line-height: 1.1rem;
31+
display: flex;
32+
flex-direction: row;
33+
}
34+
35+
.author-as-h1 .authorName {
36+
font-size: 2.4rem;
37+
line-height: 2.4rem;
38+
display: inline;
39+
}
40+
41+
.author-as-h2 .authorName {
42+
font-size: 1.4rem;
43+
line-height: 1.4rem;
44+
display: inline;
45+
}
46+
47+
.authorTitle {
48+
font-size: 0.8rem;
49+
line-height: 1rem;
50+
display: -webkit-box;
51+
color: var(--subtle);
52+
margin-bottom: 4px;
53+
overflow: hidden;
54+
line-clamp: 1;
55+
-webkit-line-clamp: 1;
56+
-webkit-box-orient: vertical;
57+
}
58+
59+
.author-as-h1 .authorTitle {
60+
font-size: 1.2rem;
61+
line-height: 1.6rem;
62+
}
63+
64+
.author-as-h2 .authorTitle {
65+
font-size: 1rem;
66+
line-height: 1.3rem;
67+
}
68+
69+
.authorBlogPostCount {
70+
background: var(--ifm-code-background);
71+
color: var(--subtle);
72+
font-size: 0.8rem;
73+
line-height: 1.2;
74+
border-radius: var(--ifm-global-radius);
75+
padding: 0.1rem 0.4rem;
76+
margin-left: 0.3rem;
77+
}
78+
79+
svg[class^="authorSocialLink"] {
80+
fill: var(--subtle) !important;
81+
82+
&:hover, &:focus {
83+
fill: var(--ifm-hero-text-color) !important;
84+
}
85+
}

‎cnwebsite/src/theme/BlogSidebar/Desktop/index.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and 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 Link from '@docusaurus/Link';
11+
import {translate} from '@docusaurus/Translate';
12+
import styles from './styles.module.css';
13+
import type {Props} from '@theme/BlogSidebar/Desktop';
14+
15+
export default function BlogSidebarDesktop({sidebar}: Props) {
16+
let cachedYear = null;
17+
return (
18+
<aside className="col col--3">
19+
<nav
20+
className={clsx(styles.sidebar, 'thin-scrollbar')}
21+
aria-label={translate({
22+
id: 'theme.blog.sidebar.navAriaLabel',
23+
message: 'Blog recent posts navigation',
24+
description: 'The ARIA label for recent posts in the blog sidebar',
25+
})}>
26+
<div className={clsx(styles.sidebarHeader, 'margin-bottom--md')}>
27+
{sidebar.title}
28+
</div>
29+
<ul className={clsx(styles.sidebarItemList, 'clean-list')}>
30+
{sidebar.items.map(item => {
31+
const postYear = item.permalink.split('/')[2];
32+
const yearHeader = cachedYear !== postYear && (
33+
<h5 className={styles.sidebarItemTitle}>{postYear}</h5>
34+
);
35+
cachedYear = postYear;
36+
return (
37+
<>
38+
{yearHeader}
39+
<li key={item.permalink} className={styles.sidebarItem}>
40+
<Link
41+
isNavLink
42+
to={item.permalink}
43+
className={styles.sidebarItemLink}
44+
activeClassName={styles.sidebarItemLinkActive}>
45+
{item.title}
46+
</Link>
47+
</li>
48+
</>
49+
);
50+
})}
51+
</ul>
52+
</nav>
53+
</aside>
54+
);
55+
}

‎cnwebsite/src/theme/BlogSidebar/Desktop/styles.module.css‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and 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+
.sidebar {
9+
max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
10+
overflow-y: auto;
11+
position: sticky;
12+
top: var(--ifm-navbar-height);
13+
padding: 20px 12px 0 0;
14+
margin-left: -20px;
15+
}
16+
17+
.sidebarHeader {
18+
font-size: var(--ifm-h4-font-size);
19+
font-weight: var(--ifm-font-weight-bold);
20+
padding-left: 12px;
21+
display: block;
22+
}
23+
24+
.sidebarItemTitle {
25+
margin: 0.75rem 0 0.5rem;
26+
color: var(--subtle);
27+
padding-left: 12px;
28+
border-bottom: 0.01rem solid var(--ifm-table-border-color);
29+
padding-bottom: 4px;
30+
}
31+
32+
.sidebarItemList {
33+
font-size: 13px;
34+
}
35+
36+
.sidebarItem {
37+
margin-top: 0.1rem;
38+
line-height: 18px;
39+
}
40+
41+
.sidebarItemLink {
42+
color: var(--ifm-font-color-base);
43+
padding: 4px 8px;
44+
display: block;
45+
border-left: 4px solid transparent;
46+
border-radius: 0.25rem;
47+
line-height: 18px;
48+
}
49+
50+
.sidebarItemLink:hover {
51+
background: var(--ifm-menu-color-background-active);
52+
color: var(--ifm-font-color-base);
53+
text-decoration: none;
54+
}
55+
56+
.sidebarItemLinkActive {
57+
color: var(--ifm-font-color-base);
58+
background: var(--ifm-menu-color-background-active);
59+
border-left-color: var(--ifm-menu-color-active);
60+
font-weight: 700;
61+
}
62+
63+
@media (max-width: 996px) {
64+
.sidebar {
65+
display: none;
66+
}
67+
}

‎cnwebsite/src/theme/BlogSidebar/Mobile/index.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and 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 Link from '@docusaurus/Link';
10+
import {NavbarSecondaryMenuFiller} from '@docusaurus/theme-common';
11+
import styles from './styles.module.css';
12+
import type {Props} from '@theme/BlogSidebar/Mobile';
13+
14+
function BlogSidebarMobileSecondaryMenu({sidebar}: Props) {
15+
let cachedYear = null;
16+
return (
17+
<ul className="menu__list blog-menu__list">
18+
{sidebar.items.map(item => {
19+
const postYear = item.permalink.split('/')[2];
20+
const yearHeader = cachedYear !== postYear && (
21+
<h5 className={styles.sidebarItemTitle}>{postYear}</h5>
22+
);
23+
cachedYear = postYear;
24+
return (
25+
<>
26+
{yearHeader}
27+
<li key={item.permalink} className="menu__list-item">
28+
<Link
29+
isNavLink
30+
to={item.permalink}
31+
className="menu__link"
32+
activeClassName="menu__link--active">
33+
{item.title}
34+
</Link>
35+
</li>
36+
</>
37+
);
38+
})}
39+
</ul>
40+
);
41+
}
42+
export default function BlogSidebarMobile(props) {
43+
return (
44+
<NavbarSecondaryMenuFiller
45+
component={BlogSidebarMobileSecondaryMenu}
46+
props={props}
47+
/>
48+
);
49+
}

‎cnwebsite/src/theme/BlogSidebar/Mobile/styles.module.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and 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+
.sidebarItemTitle {
9+
margin: 0.75rem 0 0.5rem;
10+
color: var(--subtle);
11+
padding-left: 12px;
12+
border-bottom: 0.01rem solid var(--ifm-table-border-color);
13+
padding-bottom: 4px;
14+
}

0 commit comments

Comments
 (0)