From 69ce5487c10885369e4c7d4fcad6cffec0b8353c Mon Sep 17 00:00:00 2001 From: sanyuan <494130947@qq.com> Date: Sat, 15 Oct 2022 20:09:15 +0800 Subject: [PATCH 1/4] feat: support theme type and default theme slots --- package.json | 2 +- src/node/plugin-island/config.ts | 11 +++-- src/node/plugin-mdx/pluginMdxRollup.ts | 1 - src/runtime/app.tsx | 4 +- src/runtime/client-entry.tsx | 6 +-- src/shared/types/type.d.ts | 6 +-- .../components/DocFooter/index.tsx | 2 +- .../components/HomeFooter/index.tsx | 2 +- src/theme-default/components/Nav/index.tsx | 12 +++++- src/theme-default/index.ts | 11 +++-- src/theme-default/layout/APILayout/index.tsx | 2 +- src/theme-default/layout/DocLayout/index.tsx | 32 ++++++++++---- src/theme-default/layout/HomeLayout/index.tsx | 14 ++++++- src/theme-default/layout/Layout/index.tsx | 42 ++++++++++++++++--- .../layout/NotFountLayout/index.tsx | 2 +- src/theme-default/logic/index.ts | 2 +- src/theme-default/logic/search.ts | 2 +- src/theme-default/logic/sideEffects.ts | 2 +- src/theme-default/logic/useFrontmatter.ts | 2 +- src/theme-default/logic/useLocaleSiteData.ts | 2 +- src/theme-default/logic/useSidebarData.ts | 2 +- theme.d.ts | 15 +++++++ 22 files changed, 130 insertions(+), 46 deletions(-) create mode 100644 theme.d.ts diff --git a/package.json b/package.json index 15e5ba1b..8aed2a7f 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "./dist/*": "./dist/*", "./package.json": "./package.json", "./theme": { - "types": "./dist/node/index.d.ts", + "types": "./theme.d.ts", "default": "./src/theme-default/index.ts" } }, diff --git a/src/node/plugin-island/config.ts b/src/node/plugin-island/config.ts index cb9d57a7..d31be945 100644 --- a/src/node/plugin-island/config.ts +++ b/src/node/plugin-island/config.ts @@ -59,8 +59,8 @@ export function pluginConfig( ], exclude: [ 'islandjs', - 'island/theme', - 'island/client', + '@theme', + '@client', 'island/routes', 'island/jsx-runtime' ] @@ -77,14 +77,13 @@ export function pluginConfig( }, resolve: { alias: { - 'island/theme': config.themeDir!, - 'island/client': `${CLIENT_EXPORTS_PATH}`, - 'island/routes': join(c.root!, ROUTE_PATH), + '@theme': config.themeDir!, + '@client': `${CLIENT_EXPORTS_PATH}`, 'island/jsx-runtime': join( ISLAND_JSX_RUNTIME_PATH, 'jsx-runtime.js' ), - 'island/theme-default': DEFAULT_THEME_PATH + '@theme-default': DEFAULT_THEME_PATH } }, define: { diff --git a/src/node/plugin-mdx/pluginMdxRollup.ts b/src/node/plugin-mdx/pluginMdxRollup.ts index 30880c40..5dfd0d8a 100644 --- a/src/node/plugin-mdx/pluginMdxRollup.ts +++ b/src/node/plugin-mdx/pluginMdxRollup.ts @@ -2,7 +2,6 @@ import pluginMdx from '@mdx-js/rollup'; import { rehypePluginPreWrapper } from './rehypePlugins/preWrapper'; import remarkPluginGFM from 'remark-gfm'; import remarkPluginFrontMatter from 'remark-frontmatter'; -// @ts-expect-error The type problem of remark-directive import remarkDirective from 'remark-directive'; import remarkPluginMDXFrontMatter from 'remark-mdx-frontmatter'; import { remarkPluginNormalizeLink } from './remarkPlugins/link'; diff --git a/src/runtime/app.tsx b/src/runtime/app.tsx index a1503695..b603f1d6 100644 --- a/src/runtime/app.tsx +++ b/src/runtime/app.tsx @@ -1,4 +1,4 @@ -import { Layout } from 'island/theme'; +import { Layout } from '@theme'; import { routes } from 'virtual:routes'; import { matchRoutes, useLocation } from 'react-router-dom'; import siteData from 'island:site-data'; @@ -7,7 +7,7 @@ import { getRelativePagePath, omit } from './utils'; import { PageData } from '../shared/types'; import { HelmetProvider } from 'react-helmet-async'; import { useContext, useLayoutEffect } from 'react'; -import { DataContext } from 'island/client'; +import { DataContext } from '@client'; import { cleanUrl } from '../shared/utils'; export async function waitForApp(routePath: string): Promise { diff --git a/src/runtime/client-entry.tsx b/src/runtime/client-entry.tsx index d2f73255..09cdfeaf 100644 --- a/src/runtime/client-entry.tsx +++ b/src/runtime/client-entry.tsx @@ -1,4 +1,4 @@ -import { setupEffects } from 'island/theme'; +import { setup } from '@theme'; import { ComponentType } from 'react'; async function renderInBrowser() { @@ -11,7 +11,7 @@ async function renderInBrowser() { const { waitForApp, App } = await import('./app'); const { useState } = await import('react'); const { BrowserRouter } = await import('react-router-dom'); - const { DataContext } = await import('island/client'); + const { DataContext } = await import('@client'); const initialPageData = await waitForApp(window.location.pathname); @@ -61,6 +61,6 @@ async function renderInBrowser() { renderInBrowser().then(() => { // Binding the event after the first render setTimeout(() => { - setupEffects(); + setup(); }); }); diff --git a/src/shared/types/type.d.ts b/src/shared/types/type.d.ts index e41fd0f8..4a341bc8 100644 --- a/src/shared/types/type.d.ts +++ b/src/shared/types/type.d.ts @@ -8,13 +8,13 @@ interface ImportMeta { readonly env: ImportMetaEnv } -declare module 'island/theme*' { +declare module '@theme*' { import { ComponentType, Component, HtmlHTMLAttributes } from 'react'; export const Layout: ComponentType; export const HomeLayout: ComponentType; export const NotFoundLayout: ComponentType; - export const setupEffects: () => void; + export const setup: () => void; } declare module 'island:site-data' { @@ -24,7 +24,7 @@ declare module 'island:site-data' { } -declare module 'island/client' { +declare module '@client' { import { ComponentType, ReactElement } from 'react'; import { PageData, SiteData } from 'shared/types'; import { Route } from 'node/plugin-routes'; diff --git a/src/theme-default/components/DocFooter/index.tsx b/src/theme-default/components/DocFooter/index.tsx index 0b0338b4..49818d30 100644 --- a/src/theme-default/components/DocFooter/index.tsx +++ b/src/theme-default/components/DocFooter/index.tsx @@ -1,5 +1,5 @@ import styles from './index.module.scss'; -import { usePageData } from 'island/client'; +import { usePageData } from '@client'; import { useEditLink, useLocaleSiteData, usePrevNextPage } from '../../logic'; import { normalizeHref } from '../../logic/index'; diff --git a/src/theme-default/components/HomeFooter/index.tsx b/src/theme-default/components/HomeFooter/index.tsx index a0c85568..531d1216 100644 --- a/src/theme-default/components/HomeFooter/index.tsx +++ b/src/theme-default/components/HomeFooter/index.tsx @@ -1,4 +1,4 @@ -import { usePageData } from 'island/client'; +import { usePageData } from '@client'; export function Footer() { const { siteData } = usePageData(); diff --git a/src/theme-default/components/Nav/index.tsx b/src/theme-default/components/Nav/index.tsx index 86833713..e6bd875d 100644 --- a/src/theme-default/components/Nav/index.tsx +++ b/src/theme-default/components/Nav/index.tsx @@ -1,7 +1,7 @@ import styles from './index.module.scss'; import { SwitchAppearance } from '../SwitchAppearance/index'; import { Search } from '../Search/index'; -import { usePageData } from 'island/client'; +import { usePageData } from '@client'; import { NavMenuSingleItem } from './NavMenuSingleItem'; import { NavMenuGroup, NavMenuGroupItem } from './NavMenuGroup'; import { useLocaleSiteData } from '../../logic'; @@ -9,6 +9,11 @@ import GithubSvg from './icons/github.svg'; import { DefaultTheme } from 'shared/types'; import Translator from './icons/translator.svg'; +export interface NavProps { + beforeNavTitle?: React.ReactNode; + afterNavTitle?: React.ReactNode; +} + const IconMap = { github: GithubSvg }; @@ -126,7 +131,8 @@ const NavSocialLinks = ({ ); }; -export function Nav() { +export function Nav(props: NavProps) { + const { beforeNavTitle, afterNavTitle } = props; const { siteData, pageType } = usePageData(); const hasSidebar = pageType === 'doc'; const hasAppearanceSwitch = siteData.appearance !== false; @@ -171,7 +177,9 @@ export function Nav() { hasSidebar ? styles.hasSidebar : '' }`} > + {beforeNavTitle} + {afterNavTitle}
+ {beforeDoc} {hasSidebar ? : null}
@@ -44,6 +54,7 @@ export function DocLayout() {
Loading...
} />
+ {beforeDocFooter}
@@ -65,16 +76,21 @@ export function DocLayout() { }} > {hasAside ? ( -