fix: scoping of breadcrumb links, add unified function that resolves …

…urls for site
vivid-planet · Jan 13, 2025 · 5bfefd2 · 5bfefd2
1 parent 5583c9c
commit 5bfefd2
Show file tree

Hide file tree

Showing 10 changed files with 143 additions and 20 deletions.
diff --git a/demo/site/src/app/[domain]/[language]/[[...path]]/page.tsx b/demo/site/src/app/[domain]/[language]/[[...path]]/page.tsx
@@ -3,6 +3,7 @@ import { ExternalLinkBlockData, InternalLinkBlockData, RedirectsLinkBlockData }
 import { documentTypes } from "@src/documents";
 import { GQLPageTreeNodeScope, GQLPageTreeNodeScopeInput } from "@src/graphql.generated";
 import { createGraphQLFetch } from "@src/util/graphQLClient";
+import { resolveUrl } from "@src/util/resolveUrl";
 import { getSiteConfigForDomain } from "@src/util/siteConfig";
 import type { Metadata, ResolvingMetadata } from "next";
 import { notFound, redirect } from "next/navigation";
@@ -86,7 +87,10 @@ export default async function Page({ params }: Props) {
                     case "internal": {
                         const internalLink = target.block.props as InternalLinkBlockData;
                         if (internalLink.targetPage) {
-                            destination = `/${(internalLink.targetPage.scope as GQLPageTreeNodeScope).language}/${internalLink.targetPage.path}`;
+                            destination = resolveUrl({
+                                path: internalLink.targetPage.path,
+                                scope: { language: (internalLink.targetPage.scope as GQLPageTreeNodeScope).language },
+                            });
                         }
                         break;
                     }
@@ -95,6 +99,7 @@ export default async function Page({ params }: Props) {
                         break;
                 }
             }
+
             if (destination) {
                 redirect(destination);
             }

diff --git a/demo/site/src/app/[domain]/sitemap.ts b/demo/site/src/app/[domain]/sitemap.ts
@@ -1,3 +1,5 @@
+import { resolveUrl } from "@src/util/resolveUrl";
+
 export const dynamic = "force-dynamic"; // don't generate at build time
 
 import { gql } from "@comet/cms-site";
@@ -40,7 +42,13 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
                         const seoBlock = pageTreeNode.document.seo;
                         if (!seoBlock.noIndex) {
                             sitemap.push({
-                                url: `${siteConfig.url}/${language}${pageTreeNode.path}`,
+                                url: resolveUrl({
+                                    baseUrl: `${siteConfig.url}/`,
+                                    scope: {
+                                        language: language,
+                                    },
+                                    path: pageTreeNode.path,
+                                }),
                                 priority: Number(seoBlock.priority.replace("_", ".")),
                                 changeFrequency: seoBlock.changeFrequency,
                                 lastModified: pageTreeNode.document.updatedAt,

diff --git a/demo/site/src/common/blocks/InternalLinkBlock.tsx b/demo/site/src/common/blocks/InternalLinkBlock.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { PropsWithData } from "@comet/cms-site";
 import { InternalLinkBlockData } from "@src/blocks.generated";
+import { resolveUrl } from "@src/util/resolveUrl";
 import Link from "next/link";
 import { PropsWithChildren } from "react";
 
@@ -14,16 +15,21 @@ export function InternalLinkBlock({ data: { targetPage, targetPageAnchor }, chil
         return <span className={className}>{children}</span>;
     }
 
-    let href = targetPageAnchor !== undefined ? `${targetPage.path}#${targetPageAnchor}` : targetPage.path;
-    if (targetPage.scope) {
-        const language = (targetPage.scope as Record<string, string>).language;
-        if (language) {
-            href = `/${language}${href}`;
-        }
-    }
-
     return (
-        <Link href={href} title={title} className={className}>
+        <Link
+            href={resolveUrl({
+                scope:
+                    targetPage.scope != null
+                        ? {
+                              language: (targetPage.scope as Record<string, string>).language,
+                          }
+                        : null,
+                path: targetPage.path,
+                anchor: targetPageAnchor,
+            })}
+            title={title}
+            className={className}
+        >
             {children}
         </Link>
     );

diff --git a/demo/site/src/common/components/Breadcrumbs.tsx b/demo/site/src/common/components/Breadcrumbs.tsx
@@ -1,25 +1,47 @@
 "use client";
+import { resolveUrl } from "@src/util/resolveUrl";
 import Link from "next/link";
 import { Fragment } from "react";
 
 import { GQLBreadcrumbsFragment } from "./Breadcrumbs.fragment.generated";
 import * as sc from "./Breadcrumbs.sc";
 import { GridRoot } from "./Breadcrumbs.sc";
 
-const Breadcrumbs = ({ name, path, parentNodes }: GQLBreadcrumbsFragment) => {
+type BreadcrumbsProps = GQLBreadcrumbsFragment & {
+    scope: {
+        language: string;
+    };
+};
+const Breadcrumbs = ({ scope, name, path, parentNodes }: BreadcrumbsProps) => {
     return (
         <GridRoot>
             {parentNodes.length > 0 && (
                 <sc.Container>
                     {parentNodes.map((parentNode) => (
                         <Fragment key={parentNode.path}>
-                            <Link href={parentNode.path} passHref>
+                            <Link
+                                href={resolveUrl({
+                                    path: parentNode.path,
+                                    scope: {
+                                        language: scope.language,
+                                    },
+                                })}
+                                passHref
+                            >
                                 <sc.Link> {parentNode.name}</sc.Link>
                             </Link>
                             <sc.Divider />
                         </Fragment>
                     ))}
-                    <Link href={path} passHref>
+                    <Link
+                        href={resolveUrl({
+                            path: path,
+                            scope: {
+                                language: scope.language,
+                            },
+                        })}
+                        passHref
+                    >
                         <sc.Link> {name}</sc.Link>
                     </Link>
                 </sc.Container>

diff --git a/demo/site/src/documents/pages/Page.tsx b/demo/site/src/documents/pages/Page.tsx
@@ -147,7 +147,7 @@ export async function Page({ pageTreeNodeId, scope }: { pageTreeNodeId: string;
             )}
             <TopNavigation data={data.topMenu} />
             <Header header={data.header} />
-            <Breadcrumbs {...data.pageContent} />
+            <Breadcrumbs {...data.pageContent} scope={scope} />
             <div>
                 <PageContentBlock data={data.pageContent.document.content} />
             </div>

diff --git a/demo/site/src/layout/header/PageLink.tsx b/demo/site/src/layout/header/PageLink.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { LinkBlock } from "@src/common/blocks/LinkBlock";
+import { resolveUrl } from "@src/util/resolveUrl";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { PropsWithChildren } from "react";
@@ -34,13 +35,21 @@ function PageLink({ page, children, className: passedClassName, activeClassName
         );
     } else if (page.documentType === "Page") {
         return (
-            <Link href={`/${page.scope.language}${page.path}`} className={className}>
+            <Link
+                href={resolveUrl({
+                    path: page.path,
+                    scope: {
+                        language: page.scope.language,
+                    },
+                })}
+                className={className}
+            >
                 {children}
             </Link>
         );
     } else if (page.documentType === "PredefinedPage") {
         return (
-            <Link href={`/${page.scope.language}${page.path}`} className={className}>
+            <Link href={resolveUrl({ path: page.path, scope: page.scope })} className={className}>
                 {children}
             </Link>
         );

diff --git a/demo/site/src/news/NewsList.tsx b/demo/site/src/news/NewsList.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { DamImageBlock } from "@src/common/blocks/DamImageBlock";
+import { resolveUrl } from "@src/util/resolveUrl";
 import Link from "next/link";
 import styled from "styled-components";
 
@@ -11,7 +12,15 @@ export function NewsList({ newsList }: { newsList: GQLNewsListFragment }) {
             <h1>News</h1>
             <CardList>
                 {newsList.nodes.map((news) => (
-                    <Card key={news.id} href={`/${news.scope.language}/news/${news.slug}`}>
+                    <Card
+                        key={news.id}
+                        href={resolveUrl({
+                            scope: {
+                                language: news.scope.language,
+                            },
+                            path: `/news/${news.slug}`,
+                        })}
+                    >
                         <DamImageBlock data={news.image} aspectRatio="4x3" />
                         <h2>{news.title}</h2>
                         {/* <p><FormattedDate value={news.createdAt} /></p> */}

diff --git a/demo/site/src/news/blocks/NewsLinkBlock.tsx b/demo/site/src/news/blocks/NewsLinkBlock.tsx
@@ -1,5 +1,6 @@
 import { PropsWithData } from "@comet/cms-site";
 import { NewsLinkBlockData } from "@src/blocks.generated";
+import { resolveUrl } from "@src/util/resolveUrl";
 import Link from "next/link";
 import { PropsWithChildren } from "react";
 
@@ -11,7 +12,16 @@ function NewsLinkBlock({ data: { news }, children, title, className }: PropsWith
     }
 
     return (
-        <Link href={`/${news.scope.language}/news/${news.slug}`} title={title} className={className}>
+        <Link
+            href={resolveUrl({
+                scope: {
+                    language: news.scope.language,
+                },
+                path: `/news/${news.slug}`,
+            })}
+            title={title}
+            className={className}
+        >
             {children}
         </Link>
     );

diff --git a/demo/site/src/news/blocks/NewsListBlock.tsx b/demo/site/src/news/blocks/NewsListBlock.tsx
@@ -1,5 +1,6 @@
 import { PropsWithData, withPreview } from "@comet/cms-site";
 import { NewsListBlockData } from "@src/blocks.generated";
+import { resolveUrl } from "@src/util/resolveUrl";
 import Link from "next/link";
 
 import { LoadedData } from "./NewsListBlock.loader";
@@ -14,7 +15,16 @@ export const NewsListBlock = withPreview(
             <ol>
                 {newsList.map((news) => (
                     <li key={news.id}>
-                        <Link href={`/${news.scope.language}/news/${news.slug}`}>{news.title}</Link>
+                        <Link
+                            href={resolveUrl({
+                                scope: {
+                                    language: news.scope.language,
+                                },
+                                path: `/news/${news.slug}`,
+                            })}
+                        >
+                            {news.title}
+                        </Link>
                     </li>
                 ))}
             </ol>

diff --git a/demo/site/src/util/resolveUrl.ts b/demo/site/src/util/resolveUrl.ts
@@ -0,0 +1,44 @@
+type ResolveUrlOptions = {
+    /**
+     * If provided, the baseUrl will be prepended to the resulting path
+     *
+     * Sample: "http://localhost:3000"
+     * @default: "/"
+     */
+    baseUrl?: string;
+
+    /**
+     * path with leading /
+     *
+     * Sample: "/test/to/my/page"
+     */
+    path: string;
+
+    scope: {
+        language: string;
+    } | null;
+
+    /**
+     * If provided, the anchor will be appended to the resulting URL
+     *
+     * Sample: "my-anchor"
+     */
+    anchor?: string;
+};
+
+/**
+ * Resolves a path, scope and a baseUrl to a real URL which can be navigated to.
+ *
+ * @return {string} The resolved URL: /{scope.language}/test/to/my/page#my-anchor
+ */
+export const resolveUrl = ({ baseUrl = "/", path, scope, anchor }: ResolveUrlOptions) => {
+    let safeScope = "";
+    if (scope != null) {
+        safeScope = scope.language;
+    }
+    let anchorPostfix = "";
+    if (anchor) {
+        anchorPostfix = `#${anchor}`;
+    }
+    return `${baseUrl}${safeScope}${path}${anchorPostfix}`;
+};