fix: remove overriding favicon and fix social preview image (#217)

* fix: remove overriding favicon and fix social preview image

* fix: handle socialPreview absolute and relative mode

Author: cabljac

docs/assets/docs-page-social.png

@@ -4,7 +4,7 @@ import codeHikeStyles from '@code-hike/mdx/dist/index.css';
 
 export const Head = ({ data }: { data: DocumentationLoader }) => {
   const favicon = getFavicon({ data });
-
+  data.repo;
   return (
     <Helmet>
       {data.config.googleAnalytics && (

website/app/components/Head.tsx

@@ -35,7 +35,6 @@ export const links: LinksFunction = () => {
     },
     { rel: 'stylesheet', href: nProgressStyles },
     { rel: 'stylesheet', href: tailwind },
-    { rel: 'icon', href: 'https://docs.page/favicon.ico?v=2' },
   ];
 };
 

website/app/root.tsx

@@ -16,6 +16,7 @@ import reactMediumImage from 'react-medium-image-zoom/dist/styles.css';
 import { BadRequest, NotFound, ServerError } from '~/components/Errors';
 import Documentation from '~/components/Documentation';
 import { Head } from '~/components/Head';
+import { getSocialImage } from '~/utils';
 
 //@ts-ignore
 export function headers({ loaderHeaders }) {
@@ -45,8 +46,12 @@ export const meta: MetaFunction = (props: { data?: DocumentationLoader }) => {
     };
   }
 
+  const socialPreviewImage = getSocialImage(props.data);
+
   return {
     'twitter:card': 'summary_large_image',
+    'twitter:image': socialPreviewImage,
+    'og:image': socialPreviewImage,
     'twiter:image:alt': props.data?.config?.name ?? '',
     'og:url': `https://docs.page/${props.data.owner}/${props.data.repo}${
       props.data.path ? `/${props.data.path}` : ''

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

@@ -10,18 +10,19 @@ import {
 } from '@heroicons/react/solid';
 import { Checkout } from '~/components/Checkout';
 import { Footer } from '~/components/Footer';
+import { getSocialImage } from '~/utils';
 
 export const meta: MetaFunction = () => ({
   'theme-color': '#ffffff',
   title: 'docs.page | Create an instant Open Source docs page with zero configuration.',
   description: 'Create an instant Open Source docs page with zero configuration.',
   'og:title': 'docs.page',
   'og:description': 'Create an instant Open Source docs page with zero configuration.',
-  'og:image': 'http://docs.page/assets/docs-page-social.png',
+  'og:image': getSocialImage(),
   'og:url': 'http://docs.page',
   'twitter:title': 'docs.page',
   'twitter:description': 'Create an instant Open Source docs page with zero configuration.',
-  'twitter:image': 'http://docs.page/assets/docs-page-social.png',
+  'twitter:image': getSocialImage(),
   'twitter:card': 'summary_large_image',
 });
 

website/app/routes/index.tsx

@@ -1,3 +1,4 @@
+import { DocumentationLoader } from '~/loaders/documentation.server';
 import { getValue } from './get';
 
 export function ensureLeadingSlash(path: string) {
@@ -36,3 +37,23 @@ export function hash(value: string): string {
   }
   return hash.toString();
 }
+
+export function getSocialImage(data?: DocumentationLoader): string {
+  if (!data?.config.socialPreview || !data) {
+    return 'https://raw.githubusercontent.com/invertase/docs.page/main/docs/assets/docs-page-social.png';
+  }
+
+  let socialPreviewUrl = data.config.socialPreview;
+
+  if (socialPreviewUrl.startsWith('http')) {
+    return new URL(socialPreviewUrl).href;
+  }
+  if (!socialPreviewUrl.startsWith('/')) {
+    socialPreviewUrl = '/' + socialPreviewUrl;
+  }
+  const ref = encodeURIComponent(data.source.ref);
+
+  socialPreviewUrl = `https://raw.githubusercontent.com/${data.owner}/${data.repo}/${ref}/docs${socialPreviewUrl}`;
+
+  return new URL(socialPreviewUrl).href;
+}