fix: use favion config option #241

invertase · Dec 8, 2022 · 5fed8da · 5fed8da
1 parent 870592c
commit 5fed8da
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 73 deletions.
diff --git 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 (
-    <DomainProvider data={{ domain }}>
-      <DocumentationProvider data={data}>
-        <Theme config={data.config} />
-        <div className="w-screen">
-          <Header
-            onSidebarToggle={() => {
-              toggleMenu(!open);
-            }}
-          />
-          <div data-test-id={'documentation-provider'} className="max-w-8xl mx-auto">
-            <div className="hidden lg:block">
-              <div className="fixed inset-0 top-16 left-[max(0px,calc(50%-45rem))] w-64 overflow-x-auto py-10 pl-4 pr-8">
-                <Sidebar />
-              </div>
+    <>
+      <Theme config={data.config} />
+      <div className="w-screen">
+        <Header
+          onSidebarToggle={() => {
+            toggleMenu(!open);
+          }}
+        />
+        <div data-test-id={'documentation-provider'} className="max-w-8xl mx-auto">
+          <div className="hidden lg:block">
+            <div className="fixed inset-0 top-16 left-[max(0px,calc(50%-45rem))] w-64 overflow-x-auto py-10 pl-4 pr-8">
+              <Sidebar />
             </div>
-            <div className="px-8 pt-10 lg:pr-8 lg:pl-72">
-              <div
-                className={cx({
-                  'items-center lg:mr-52 lg:pr-16': true,
-                })}
-              >
-                <main className="prose dark:prose-invert prose-code:font-fira prose-code:font-medium max-w-none justify-center pb-6">
-                  <TabsContext hash={hash}>
-                    <MDX components={components as any} />
-                  </TabsContext>
-                </main>
-                <PreviousNext frontmatter={data.frontmatter} />
-                <div className="my-12 h-px bg-gray-100 dark:bg-gray-700" />
-                <Footer />
-              </div>
-              {!!data.headings && (
-                <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">
-                  <ScrollSpy />
-                </aside>
-              )}
+          </div>
+          <div className="px-8 pt-10 lg:pr-8 lg:pl-72">
+            <div
+              className={cx({
+                'items-center lg:mr-52 lg:pr-16': true,
+              })}
+            >
+              <main className="prose dark:prose-invert prose-code:font-fira prose-code:font-medium max-w-none justify-center pb-6">
+                <TabsContext hash={hash}>
+                  <MDX components={components as any} />
+                </TabsContext>
+              </main>
+              <PreviousNext frontmatter={data.frontmatter} />
+              <div className="my-12 h-px bg-gray-100 dark:bg-gray-700" />
+              <Footer />
             </div>
+            {!!data.headings && (
+              <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">
+                <ScrollSpy />
+              </aside>
+            )}
           </div>
         </div>
-        <MobileNav visible={open} />
-      </DocumentationProvider>
-    </DomainProvider>
+      </div>
+      <MobileNav visible={open} />
+    </>
   );
 }
diff --git 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 }) => {
     </Helmet>
   );
 };
-
-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
@@ -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
@@ -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<DocumentationLoader>({} 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 <DomainContext.Provider value={data}>{children}</DomainContext.Provider>;
+  const domain =
+    domains.find(([, repository]) => repository === `${data.owner}/${data.repo}`)?.[0] || null;
+  return <DomainContext.Provider value={{ domain }}>{children}</DomainContext.Provider>;
 }
 
 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
@@ -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<DocumentationLoader>();
   return (
     <>
-      <Head data={data} />
-      <Documentation data={data} />
+      <DomainProvider data={data}>
+        <DocumentationProvider data={data}>
+          <Head data={data} />
+          <Documentation data={data} />
+        </DocumentationProvider>
+      </DomainProvider>
     </>
   );
 }