From d06094ee119cfa41fe6ed2c56273676146cecacb Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Thu, 22 Jun 2023 17:55:51 +0900 Subject: [PATCH] fix: refactor blog header with context --- .../theme/BlogLayout/BlogPage.context.tsx | 18 +++--- .../src/client/theme/BlogLayout/index.tsx | 38 +++--------- .../theme/BlogLayout/styles.module.scss | 8 ++- .../src/client/theme/BlogListPage/index.tsx | 60 +++++++++++++++++++ 4 files changed, 85 insertions(+), 39 deletions(-) create mode 100644 packages/logos-docusaurus-theme/src/client/theme/BlogListPage/index.tsx diff --git a/packages/logos-docusaurus-theme/src/client/theme/BlogLayout/BlogPage.context.tsx b/packages/logos-docusaurus-theme/src/client/theme/BlogLayout/BlogPage.context.tsx index dc10be4..71bacbb 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/BlogLayout/BlogPage.context.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/BlogLayout/BlogPage.context.tsx @@ -1,15 +1,15 @@ -import React, { useContext } from 'react' +import { createContext, useContext } from 'react' + +import type { Props as BlogListPageProps } from '@theme/BlogListPage' export type BlogPageContextType = { - type?: 'list' | 'page' - blogTitle?: string - blogDescription?: string + type: 'list' | null + props: BlogListPageProps } -export const BlogPage = React.createContext({ - type: 'list', - blogTitle: '', - blogDescription: '', +export const BlogPageContext = createContext({ + type: null as any, + props: null as any, }) -export const useBlogPage = () => useContext(BlogPage) +export const useBlogPageData = () => useContext(BlogPageContext) diff --git a/packages/logos-docusaurus-theme/src/client/theme/BlogLayout/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/BlogLayout/index.tsx index 848c64e..d3e781a 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/BlogLayout/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/BlogLayout/index.tsx @@ -1,40 +1,20 @@ import clsx from 'clsx' import React from 'react' import { Props } from '@theme/BlogLayout' -import { ensureTrailingSlash } from '../../lib/string.utils' -import useDocusaurusContext from '@docusaurus/useDocusaurusContext' -import { useBlogPluginData } from '@logos-theme/lib/useBlogPluginData' import { Typography } from '@acid-info/lsd-react' import styles from './styles.module.scss' import Layout from '@theme/Layout' import BlogSidebar from '@theme/BlogSidebar' - -const useIsIndexPage = (props: Props) => { - if (typeof window === 'undefined') return false - - const ctx = useDocusaurusContext() - const activePlugin = ctx.siteConfig.plugins.find( - (plugin) => - plugin === '"@docusaurus/plugin-content-blog"' || - plugin?.[0] === '@docusaurus/plugin-content-blog', - ) - - const routeBasePath = activePlugin?.[1]?.routeBasePath ?? '/blog' - - return ( - ensureTrailingSlash(routeBasePath) === - ensureTrailingSlash(window.location.pathname) - ) -} +import { useBlogPageData } from './BlogPage.context' export default function BlogLayoutWrapper(props: Props): JSX.Element { const { sidebar, toc, children, ...layoutProps } = props - const isIndexPage = useIsIndexPage(props) + const { type, props: blogPageProps } = useBlogPageData() + const isIndexPage = type === 'list' const hasSidebar = sidebar && sidebar.items.length > 0 - - const plugin = useBlogPluginData() - + const metadata = blogPageProps?.metadata // desstructing blogTitle & blogDescription raises an error + console.log('isIndexPage', isIndexPage) return ( {isIndexPage && (
- {plugin?.blogTitle && ( + {metadata?.blogTitle && ( - {plugin.blogTitle} + {metadata?.blogTitle} )} - {plugin?.blogDescription && ( + {metadata?.blogDescription && ( - {plugin.blogDescription} + {metadata?.blogDescription} )}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/BlogLayout/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/BlogLayout/styles.module.scss index ddcca85..79d6f94 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/BlogLayout/styles.module.scss +++ b/packages/logos-docusaurus-theme/src/client/theme/BlogLayout/styles.module.scss @@ -5,7 +5,7 @@ display: flex; flex-direction: column; left: 0; - gap: 8px; + gap: 8px !important; width: 100%; max-width: var(--container-max-width); @@ -23,3 +23,9 @@ .blogDescription { grid-column: span 24; } + +@include utils.responsive('lg', 'down') { + .blogHeader { + padding-inline: var(--content-padding); + } +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/BlogListPage/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/BlogListPage/index.tsx new file mode 100644 index 0000000..6568d6c --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/theme/BlogListPage/index.tsx @@ -0,0 +1,60 @@ +import React from 'react' +import clsx from 'clsx' +import useDocusaurusContext from '@docusaurus/useDocusaurusContext' +import { + PageMetadata, + HtmlClassNameProvider, + ThemeClassNames, +} from '@docusaurus/theme-common' +import BlogLayout from '@theme/BlogLayout' +import BlogListPaginator from '@theme/BlogListPaginator' +import SearchMetadata from '@theme/SearchMetadata' +import BlogPostItems from '@theme/BlogPostItems' +import { BlogPageContext } from '../BlogLayout/BlogPage.context' + +function BlogListPageMetadata(props) { + const { metadata } = props + const { + siteConfig: { title: siteTitle }, + } = useDocusaurusContext() + const { blogDescription, blogTitle, permalink } = metadata + const isBlogOnlyMode = permalink === '/' + const title = isBlogOnlyMode ? siteTitle : blogTitle + return ( + <> + + + + ) +} +function BlogListPageContent(props) { + const { metadata, items, sidebar } = props + return ( + + + + + ) +} + +export function BlogListPage(props) { + return ( + + + + + ) +} + +export default function BlogListPageWrapper(props): JSX.Element { + return ( + + + + ) +}