fix: Handle vanity domain redirects (#363)

Author: Ehesp

website/app/components/Tabs.tsx

@@ -31,7 +31,6 @@ export function Tabs(props: Props) {
                 <li key={href}>
                   <NavLink
                     to={href}
-                    target={isExternalLink(href) ? "_blank" : undefined}
                     className={cn(
                       "relative top-px flex items-center h-12 border-b-[1.5px] border-transparent",
                       {

website/app/routes/$/route.tsx

@@ -33,7 +33,7 @@ export const loader = async (args: LoaderFunctionArgs) => {
   }).catch((response) => {
     throw response;
   });
-  
+
   // Check whether the repository has a domain assigned.
   const domain = domains
     .find(([, repo]) => repo === `${owner}/${repository}`)
@@ -52,7 +52,11 @@ export const loader = async (args: LoaderFunctionArgs) => {
     }
 
     let url = "";
-    if (domain && environment === "production") {
+    if (vanity) {
+      url = `https://${owner}.docs.page/${repository}`;
+      if (ref) url += `~${ref}`;
+      url += redirectTo;
+    } else if (domain && environment === "production") {
       // If there is a domain setup, always redirect to it.
       url = `https://${domain}`;
       if (ref) url += `/~${ref}`;
@@ -64,6 +68,8 @@ export const loader = async (args: LoaderFunctionArgs) => {
       url += redirectTo;
     }
 
+    console.log('Handling redirect', redirectTo, { owner, repository, ref, vanity, domain, environment }, url);
+
     throw redirect(url);
   }
 
@@ -151,7 +157,7 @@ export const meta: MetaFunction<typeof loader> = ({ data: ctx }) => {
         ctx.bundle.config.logo.light || ctx.bundle.config.logo.dark
           ? getAssetSrc(
               ctx,
-              ctx.bundle.config.logo.light || ctx.bundle.config.logo.dark || "",
+              ctx.bundle.config.logo.light || ctx.bundle.config.logo.dark || ""
             )
           : undefined,
     });

website/app/routes/schema[.]json.ts

@@ -0,0 +1,4 @@
+export const loader = async () => {
+  const response = await fetch("https://staging-api.docs.page/schema.json");
+  return response.json();
+}

website/app/utils.ts

@@ -203,14 +203,14 @@ export function getHref(ctx: Context, path: string) {
   // Define the base href for the current request.
   let href = "";
 
+  // If it's a vanity domain, we need to prefix the path with the owner and repository.
+  if (ctx.vanity) {
+    href += `/${ctx.repository}`;
+  }
   // Ensure all links start with the custom domain if it's set.
-  if (ctx.domain) {
+  else if (ctx.domain) {
     href += `https://${ctx.domain}`;
   } 
-  // If it's a vanity domain, we need to prefix the path with the owner and repository.
-  else if (ctx.vanity) {
-    href += `https://${ctx.owner}.docs.page/${ctx.repository}`;
-  }
   // Prefix the path with the owner and repository, e.g. `/invertase/docs.page`.
   else {
     href = `/${ctx.owner}/${ctx.repository}`;