-
-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
…-a-x-b-cross-selection-list-page refactor: docs tutorial a x b cross selection list page
- Loading branch information
Showing
26 changed files
with
617 additions
and
131 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| .container { | ||
| max-width: 1000px; | ||
| width: 100%; | ||
| margin: 0 auto; | ||
| padding: 0 24px; | ||
|
|
||
| .row { | ||
| display: flex; | ||
| gap: 24px; | ||
|
|
||
| .main { | ||
| flex: 1; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 24px; | ||
| overflow: hidden; | ||
| margin-bottom: 50px; | ||
| } | ||
|
|
||
| .toc { | ||
| flex: 0 0 276px; | ||
| } | ||
| } | ||
|
|
||
| &.hasToc { | ||
| max-width: 1200px; | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 996px) { | ||
| .container { | ||
| max-width: 100vw; | ||
|
|
||
| &.hasToc { | ||
| max-width: 100vw; | ||
| } | ||
|
|
||
| .row .toc { | ||
| display: none; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| .title { | ||
| font: var(--font-headline-1); | ||
| margin-block: 32px 0; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .subtitle { | ||
| font: var(--font-body-0); | ||
| text-align: center; | ||
| margin-bottom: 16px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| import Translate from '@docusaurus/Translate'; | ||
| import { useHistory, useLocation } from '@docusaurus/router'; | ||
| import { PageMetadata, HtmlClassNameProvider, ThemeClassNames } from '@docusaurus/theme-common'; | ||
| import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; | ||
| import { conditional } from '@silverhand/essentials'; | ||
| import BlogLayout from '@theme/BlogLayout'; | ||
| import type { Props } from '@theme/BlogListPage'; | ||
| import BlogListPageStructuredData from '@theme/BlogListPage/StructuredData'; | ||
| import BlogListPaginator from '@theme/BlogListPaginator'; | ||
| import BlogPostItems from '@theme/BlogPostItems'; | ||
| import SearchMetadata from '@theme/SearchMetadata'; | ||
| import clsx from 'clsx'; | ||
| import { useMemo } from 'react'; | ||
|
|
||
| import { getConnectorPath, getSdkPath } from '@site/plugins/tutorial-generator/utils'; | ||
|
|
||
| import TitleWithSelectionDropdown from '../BlogPostItem/Header/TitleWithSelectionDropdown'; | ||
|
|
||
| import styles from './index.module.scss'; | ||
|
|
||
| function BlogListPageMetadata(props: Props): JSX.Element { | ||
| const { metadata } = props; | ||
| const { | ||
| siteConfig: { title: siteTitle }, | ||
| } = useDocusaurusContext(); | ||
|
|
||
| const { blogDescription, blogTitle, permalink } = metadata; | ||
| const isBlogOnlyMode = permalink === '/'; | ||
| const title = isBlogOnlyMode ? siteTitle : blogTitle; | ||
| return ( | ||
| <> | ||
| <PageMetadata title={title} description={blogDescription} /> | ||
| <SearchMetadata tag="blog_posts_list" /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| function BlogListPageContent(props: Props): JSX.Element { | ||
| const { metadata, items, sidebar } = props; | ||
| const { search } = useLocation(); | ||
| const { push } = useHistory(); | ||
| const searchParams = new URLSearchParams(search); | ||
| const sdk = conditional(searchParams.get('sdk')); | ||
| const connector = conditional(searchParams.get('connector')); | ||
|
|
||
| const filteredItems = useMemo(() => { | ||
| if (!sdk && !connector) { | ||
| return items; | ||
| } | ||
| if (!sdk && connector) { | ||
| return items.filter((item) => item.content.metadata.tags[1]?.label === connector); | ||
| } | ||
| if (sdk && !connector) { | ||
| return items.filter((item) => item.content.metadata.tags[2]?.label === sdk); | ||
| } | ||
| return items.filter( | ||
| (item) => | ||
| item.content.metadata.tags[1]?.label === connector && | ||
| item.content.metadata.tags[2]?.label === sdk | ||
| ); | ||
| }, [items, sdk, connector]); | ||
|
|
||
| return ( | ||
| <BlogLayout sidebar={sidebar}> | ||
| <h1 className={styles.title}> | ||
| <TitleWithSelectionDropdown | ||
| defaultConnectorSlugPart={connector} | ||
| defaultSdkSlugPart={sdk} | ||
| onSelectConnector={(selection) => { | ||
| if (selection) { | ||
| searchParams.set('connector', getConnectorPath(selection)); | ||
| } else { | ||
| searchParams.delete('connector'); | ||
| } | ||
| push({ | ||
| search: searchParams.toString(), | ||
| }); | ||
| }} | ||
| onSelectSdk={(selection) => { | ||
| if (selection) { | ||
| searchParams.set('sdk', getSdkPath(selection)); | ||
| } else { | ||
| searchParams.delete('sdk'); | ||
| } | ||
| push({ | ||
| search: searchParams.toString(), | ||
| }); | ||
| }} | ||
| /> | ||
| </h1> | ||
| <h2 className={styles.subtitle}> | ||
| <Translate id="theme.blog.tutorial.subtitle"> | ||
| Follow our step-by-step tutorial to set up an authentication system right away. | ||
| </Translate> | ||
| </h2> | ||
| <BlogPostItems items={filteredItems} /> | ||
| <BlogListPaginator metadata={metadata} /> | ||
| </BlogLayout> | ||
| ); | ||
| } | ||
|
|
||
| export default function BlogListPage(props: Props): JSX.Element { | ||
| return ( | ||
| <HtmlClassNameProvider | ||
| className={clsx(ThemeClassNames.wrapper.blogPages, ThemeClassNames.page.blogListPage)} | ||
| > | ||
| <BlogListPageMetadata {...props} /> | ||
| <BlogListPageStructuredData {...props} /> | ||
| <BlogListPageContent {...props} /> | ||
| </HtmlClassNameProvider> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import type { Props } from '@theme/BlogPostItem/Container'; | ||
|
|
||
| export default function BlogPostItemContainer({ children, className }: Props): JSX.Element { | ||
| return <article className={className}>{children}</article>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { useBlogPost } from '@docusaurus/plugin-content-blog/client'; | ||
| import { ThemeClassNames } from '@docusaurus/theme-common'; | ||
| import EditMetaRow from '@theme/EditMetaRow'; | ||
| import TagsListInline from '@theme/TagsListInline'; | ||
| import clsx from 'clsx'; | ||
|
|
||
| export default function BlogPostItemFooter() { | ||
| const { metadata, isBlogPostPage } = useBlogPost(); | ||
| const { tags, editUrl, hasTruncateMarker, lastUpdatedBy, lastUpdatedAt } = metadata; | ||
|
|
||
| // A post is truncated if it's in the "list view" and it has a truncate marker | ||
| const truncatedPost = !isBlogPostPage && hasTruncateMarker; | ||
|
|
||
| const tagsExists = tags.length > 0; | ||
|
|
||
| const renderFooter = tagsExists || truncatedPost || editUrl; | ||
|
|
||
| if (!renderFooter || !isBlogPostPage) { | ||
| return null; | ||
| } | ||
|
|
||
| // BlogPost footer - details view | ||
| const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy); | ||
|
|
||
| return ( | ||
| <footer className="docusaurus-mt-lg"> | ||
| {tagsExists && ( | ||
| <div className={clsx('row', 'margin-top--sm', ThemeClassNames.blog.blogFooterEditMetaRow)}> | ||
| <div className="col"> | ||
| <TagsListInline tags={tags} /> | ||
| </div> | ||
| </div> | ||
| )} | ||
| {canDisplayEditMetaRow && ( | ||
| <EditMetaRow | ||
| className={clsx('margin-top--sm', ThemeClassNames.blog.blogFooterEditMetaRow)} | ||
| editUrl={editUrl} | ||
| lastUpdatedAt={lastUpdatedAt} | ||
| lastUpdatedBy={lastUpdatedBy} | ||
| /> | ||
| )} | ||
| </footer> | ||
| ); | ||
|
|
||
| // BlogPost footer - list view - Charles commented out - We don't need tags in list view | ||
| // else { | ||
| // return ( | ||
| // <footer className="row docusaurus-mt-lg"> | ||
| // {tagsExists && ( | ||
| // <div className={clsx('col', {'col--9': truncatedPost})}> | ||
| // <TagsListInline tags={tags} /> | ||
| // </div> | ||
| // )} | ||
| // {truncatedPost && ( | ||
| // <div | ||
| // className={clsx('col text--right', { | ||
| // 'col--3': tagsExists, | ||
| // })}> | ||
| // <ReadMoreLink blogPostTitle={title} to={metadata.permalink} /> | ||
| // </div> | ||
| // )} | ||
| // </footer> | ||
| // ); | ||
| // } | ||
| } |
Oops, something went wrong.