From 5fed8dab0fb05cdc9cacaf48aadbd69a4a70e577 Mon Sep 17 00:00:00 2001 From: Elliot Hesp Date: Thu, 8 Dec 2022 11:37:54 +0000 Subject: [PATCH] fix: use favion config option #241 --- website/app/components/Documentation.tsx | 77 +++++++++++------------- website/app/components/Head.tsx | 23 +------ website/app/components/mdx/Image.tsx | 2 +- website/app/context.tsx | 13 ++-- website/app/routes/$owner.$repo.$.tsx | 9 ++- 5 files changed, 51 insertions(+), 73 deletions(-) diff --git a/website/app/components/Documentation.tsx b/website/app/components/Documentation.tsx index 075956ad..d11b2d4c 100644 --- a/website/app/components/Documentation.tsx +++ b/website/app/components/Documentation.tsx @@ -9,9 +9,7 @@ import components from '~/components/mdx'; import { ScrollSpy } from '~/components/ScrollSpy'; import { Sidebar } from '~/components/Sidebar'; import { Theme } from '~/components/Theme'; -import { DocumentationProvider, DomainProvider } from '~/context'; import { hash as createHash } from '~/utils'; -import domains from '../../../domains.json'; import { DocumentationLoader } from '../loaders/documentation.server'; import { TabsContext } from './mdx/Tabs'; import { MobileNav } from './MobileNav'; @@ -25,52 +23,47 @@ export default function Documentation({ data }: { data: DocumentationLoader }) { }, [transition.state]); const MDX = useHydratedMdx({ code: data.code }); - const hash = createHash(`${data.owner}/${data.repo}`); - const domain = - domains.find(([, repository]) => repository === `${data.owner}/${data.repo}`)?.[0] || null; return ( - - - -
-
{ - toggleMenu(!open); - }} - /> -
-
-
- -
+ <> + +
+
{ + toggleMenu(!open); + }} + /> +
+
+
+
-
-
-
- - - -
- -
-
-
- {!!data.headings && ( - - )} +
+
+
+
+ + + +
+ +
+
+ {!!data.headings && ( + + )}
- - - +
+ + ); } diff --git a/website/app/components/Head.tsx b/website/app/components/Head.tsx index 90813ed7..0f7c3064 100644 --- a/website/app/components/Head.tsx +++ b/website/app/components/Head.tsx @@ -1,10 +1,10 @@ import { Helmet } from 'react-helmet'; import { DocumentationLoader } from '~/loaders/documentation.server'; import codeHikeStyles from '@code-hike/mdx/dist/index.css'; -import { useCustomDomain } from '~/context'; +import { useCustomDomain, useImagePath } from '~/context'; export const Head = ({ data }: { data: DocumentationLoader }) => { - const favicon = getFavicon({ data }); + const favicon = useImagePath(data.config.favicon || 'https://docs.page/favicon.ico?v=2'); const { domain } = useCustomDomain(); return ( @@ -53,22 +53,3 @@ export const Head = ({ data }: { data: DocumentationLoader }) => { ); }; - -const getFavicon = ({ data }: { data: DocumentationLoader }) => { - let favicon = new URL('https://docs.page/favicon.ico?v=2'); - - const logoConfig = data.config.logo || data.config.logoDark; - const ref = encodeURIComponent(data.source.ref); - - if (logoConfig) { - if (logoConfig.startsWith('http')) { - favicon = new URL(logoConfig); - } else if (logoConfig.startsWith('/')) { - favicon = new URL( - `https://raw.githubusercontent.com/${data.owner}/${data.repo}/${ref}/docs${logoConfig}`, - ); - } - } - - return favicon.href; -}; diff --git a/website/app/components/mdx/Image.tsx b/website/app/components/mdx/Image.tsx index 41b84966..1a4ad0bd 100644 --- a/website/app/components/mdx/Image.tsx +++ b/website/app/components/mdx/Image.tsx @@ -60,7 +60,7 @@ function withFigure(child: React.ReactElement, caption?: string) { function withZoom(child: React.ReactElement) { const [isZoomed, setIsZoomed] = useState(false); - const handleZoomChange = useCallback(shouldZoom => { + const handleZoomChange = useCallback((shouldZoom: boolean) => { setIsZoomed(shouldZoom); }, []); return ( diff --git a/website/app/context.tsx b/website/app/context.tsx index 089a74d9..93371000 100644 --- a/website/app/context.tsx +++ b/website/app/context.tsx @@ -2,20 +2,21 @@ import React, { createContext } from 'react'; import { DocumentationLoader } from './loaders/documentation.server'; import { ensureLeadingSlash } from './utils'; import { usePreviewMode } from './utils/preview'; +import domains from '../../domains.json'; const DocumentationContext = createContext({} as DocumentationLoader); export type DomainProviderProps = { - data: { - domain: string | null; - }; + data: DocumentationLoader; children: React.ReactNode | React.ReactNode[]; }; const DomainContext = createContext<{ domain: string | null }>({} as { domain: string | null }); export function DomainProvider({ data, children }: DomainProviderProps) { - return {children}; + const domain = + domains.find(([, repository]) => repository === `${data.owner}/${data.repo}`)?.[0] || null; + return {children}; } export function useCustomDomain() { @@ -59,15 +60,13 @@ export function useImagePath(src: string) { if (src.startsWith('http')) { return src; } - const previewMode = usePreviewMode(); if (previewMode?.enabled && previewMode.imageUrls) { return previewMode?.imageUrls[src] || ''; } - const blob = useRawBlob(src); - return blob; + return useRawBlob(src); } // Returns a path to a blob in the `docs` directory. diff --git a/website/app/routes/$owner.$repo.$.tsx b/website/app/routes/$owner.$repo.$.tsx index daf67b01..bbaff423 100644 --- a/website/app/routes/$owner.$repo.$.tsx +++ b/website/app/routes/$owner.$repo.$.tsx @@ -18,6 +18,7 @@ import Documentation from '~/components/Documentation'; import { Head } from '~/components/Head'; import { getSocialImage } from '~/utils'; import codeHikeStyles from '@code-hike/mdx/dist/index.css'; +import { DocumentationProvider, DomainProvider } from '~/context'; //@ts-ignore export function headers({ loaderHeaders }) { @@ -76,8 +77,12 @@ export default function Page() { const data = useLoaderData(); return ( <> - - + + + + + + ); }