Skip to content

Commit 5fed8da

Browse files
EhespEhesp
committed
fix: use favion config option #241 
1 parent 870592c commit 5fed8da

File tree

5 files changed

+51
-73
lines changed

5 files changed

+51
-73
lines changed

‎website/app/components/Documentation.tsx

Lines changed: 35 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@ import components from '~/components/mdx';
99
import { ScrollSpy } from '~/components/ScrollSpy';
1010
import { Sidebar } from '~/components/Sidebar';
1111
import { Theme } from '~/components/Theme';
12-
import { DocumentationProvider, DomainProvider } from '~/context';
1312
import { hash as createHash } from '~/utils';
14-
import domains from '../../../domains.json';
1513
import { DocumentationLoader } from '../loaders/documentation.server';
1614
import { TabsContext } from './mdx/Tabs';
1715
import { MobileNav } from './MobileNav';
@@ -25,52 +23,47 @@ export default function Documentation({ data }: { data: DocumentationLoader }) {
2523
}, [transition.state]);
2624

2725
const MDX = useHydratedMdx({ code: data.code });
28-
2926
const hash = createHash(`${data.owner}/${data.repo}`);
30-
const domain =
31-
domains.find(([, repository]) => repository === `${data.owner}/${data.repo}`)?.[0] || null;
3227

3328
return (
34-
<DomainProvider data={{ domain }}>
35-
<DocumentationProvider data={data}>
36-
<Theme config={data.config} />
37-
<div className="w-screen">
38-
<Header
39-
onSidebarToggle={() => {
40-
toggleMenu(!open);
41-
}}
42-
/>
43-
<div data-test-id={'documentation-provider'} className="max-w-8xl mx-auto">
44-
<div className="hidden lg:block">
45-
<div className="fixed inset-0 top-16 left-[max(0px,calc(50%-45rem))] w-64 overflow-x-auto py-10 pl-4 pr-8">
46-
<Sidebar />
47-
</div>
29+
<>
30+
<Theme config={data.config} />
31+
<div className="w-screen">
32+
<Header
33+
onSidebarToggle={() => {
34+
toggleMenu(!open);
35+
}}
36+
/>
37+
<div data-test-id={'documentation-provider'} className="max-w-8xl mx-auto">
38+
<div className="hidden lg:block">
39+
<div className="fixed inset-0 top-16 left-[max(0px,calc(50%-45rem))] w-64 overflow-x-auto py-10 pl-4 pr-8">
40+
<Sidebar />
4841
</div>
49-
<div className="px-8 pt-10 lg:pr-8 lg:pl-72">
50-
<div
51-
className={cx({
52-
'items-center lg:mr-52 lg:pr-16': true,
53-
})}
54-
>
55-
<main className="prose dark:prose-invert prose-code:font-fira prose-code:font-medium max-w-none justify-center pb-6">
56-
<TabsContext hash={hash}>
57-
<MDX components={components as any} />
58-
</TabsContext>
59-
</main>
60-
<PreviousNext frontmatter={data.frontmatter} />
61-
<div className="my-12 h-px bg-gray-100 dark:bg-gray-700" />
62-
<Footer />
63-
</div>
64-
{!!data.headings && (
65-
<aside className="fixed top-16 bottom-0 right-[max(0px,calc(50%-45rem))] hidden w-60 overflow-y-auto px-8 pt-10 lg:block">
66-
<ScrollSpy />
67-
</aside>
68-
)}
42+
</div>
43+
<div className="px-8 pt-10 lg:pr-8 lg:pl-72">
44+
<div
45+
className={cx({
46+
'items-center lg:mr-52 lg:pr-16': true,
47+
})}
48+
>
49+
<main className="prose dark:prose-invert prose-code:font-fira prose-code:font-medium max-w-none justify-center pb-6">
50+
<TabsContext hash={hash}>
51+
<MDX components={components as any} />
52+
</TabsContext>
53+
</main>
54+
<PreviousNext frontmatter={data.frontmatter} />
55+
<div className="my-12 h-px bg-gray-100 dark:bg-gray-700" />
56+
<Footer />
6957
</div>
58+
{!!data.headings && (
59+
<aside className="fixed top-16 bottom-0 right-[max(0px,calc(50%-45rem))] hidden w-60 overflow-y-auto px-8 pt-10 lg:block">
60+
<ScrollSpy />
61+
</aside>
62+
)}
7063
</div>
7164
</div>
72-
<MobileNav visible={open} />
73-
</DocumentationProvider>
74-
</DomainProvider>
65+
</div>
66+
<MobileNav visible={open} />
67+
</>
7568
);
7669
}

‎website/app/components/Head.tsx

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { Helmet } from 'react-helmet';
22
import { DocumentationLoader } from '~/loaders/documentation.server';
33
import codeHikeStyles from '@code-hike/mdx/dist/index.css';
4-
import { useCustomDomain } from '~/context';
4+
import { useCustomDomain, useImagePath } from '~/context';
55

66
export const Head = ({ data }: { data: DocumentationLoader }) => {
7-
const favicon = getFavicon({ data });
7+
const favicon = useImagePath(data.config.favicon || 'https://docs.page/favicon.ico?v=2');
88
const { domain } = useCustomDomain();
99

1010
return (
@@ -53,22 +53,3 @@ export const Head = ({ data }: { data: DocumentationLoader }) => {
5353
</Helmet>
5454
);
5555
};
56-
57-
const getFavicon = ({ data }: { data: DocumentationLoader }) => {
58-
let favicon = new URL('https://docs.page/favicon.ico?v=2');
59-
60-
const logoConfig = data.config.logo || data.config.logoDark;
61-
const ref = encodeURIComponent(data.source.ref);
62-
63-
if (logoConfig) {
64-
if (logoConfig.startsWith('http')) {
65-
favicon = new URL(logoConfig);
66-
} else if (logoConfig.startsWith('/')) {
67-
favicon = new URL(
68-
`https://raw.githubusercontent.com/${data.owner}/${data.repo}/${ref}/docs${logoConfig}`,
69-
);
70-
}
71-
}
72-
73-
return favicon.href;
74-
};

‎website/app/components/mdx/Image.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ function withFigure(child: React.ReactElement, caption?: string) {
6060
function withZoom(child: React.ReactElement) {
6161
const [isZoomed, setIsZoomed] = useState(false);
6262

63-
const handleZoomChange = useCallback(shouldZoom => {
63+
const handleZoomChange = useCallback((shouldZoom: boolean) => {
6464
setIsZoomed(shouldZoom);
6565
}, []);
6666
return (

‎website/app/context.tsx

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,21 @@ import React, { createContext } from 'react';
22
import { DocumentationLoader } from './loaders/documentation.server';
33
import { ensureLeadingSlash } from './utils';
44
import { usePreviewMode } from './utils/preview';
5+
import domains from '../../domains.json';
56

67
const DocumentationContext = createContext<DocumentationLoader>({} as DocumentationLoader);
78

89
export type DomainProviderProps = {
9-
data: {
10-
domain: string | null;
11-
};
10+
data: DocumentationLoader;
1211
children: React.ReactNode | React.ReactNode[];
1312
};
1413

1514
const DomainContext = createContext<{ domain: string | null }>({} as { domain: string | null });
1615

1716
export function DomainProvider({ data, children }: DomainProviderProps) {
18-
return <DomainContext.Provider value={data}>{children}</DomainContext.Provider>;
17+
const domain =
18+
domains.find(([, repository]) => repository === `${data.owner}/${data.repo}`)?.[0] || null;
19+
return <DomainContext.Provider value={{ domain }}>{children}</DomainContext.Provider>;
1920
}
2021

2122
export function useCustomDomain() {
@@ -59,15 +60,13 @@ export function useImagePath(src: string) {
5960
if (src.startsWith('http')) {
6061
return src;
6162
}
62-
6363
const previewMode = usePreviewMode();
6464

6565
if (previewMode?.enabled && previewMode.imageUrls) {
6666
return previewMode?.imageUrls[src] || '';
6767
}
6868

69-
const blob = useRawBlob(src);
70-
return blob;
69+
return useRawBlob(src);
7170
}
7271

7372
// Returns a path to a blob in the `docs` directory.

‎website/app/routes/$owner.$repo.$.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import Documentation from '~/components/Documentation';
1818
import { Head } from '~/components/Head';
1919
import { getSocialImage } from '~/utils';
2020
import codeHikeStyles from '@code-hike/mdx/dist/index.css';
21+
import { DocumentationProvider, DomainProvider } from '~/context';
2122

2223
//@ts-ignore
2324
export function headers({ loaderHeaders }) {
@@ -76,8 +77,12 @@ export default function Page() {
7677
const data = useLoaderData<DocumentationLoader>();
7778
return (
7879
<>
79-
<Head data={data} />
80-
<Documentation data={data} />
80+
<DomainProvider data={data}>
81+
<DocumentationProvider data={data}>
82+
<Head data={data} />
83+
<Documentation data={data} />
84+
</DocumentationProvider>
85+
</DomainProvider>
8186
</>
8287
);
8388
}

0 commit comments

Comments
 (0)