Skip to content

Commit

Permalink
implement handling webpostlight root in navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
Ondřej Chrastina committed Jul 19, 2023
1 parent 79df9e9 commit 9af29f6
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 9 deletions.
5 changes: 4 additions & 1 deletion .env.local.template
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
APP_VERSION=$npm_package_version
APP_NAME=$npm_package_name
NEXT_PUBLIC_KONTENT_ENVIRONMENT_ID=2cedc519-a547-01ba-dde7-b01e00b909a1
KONTENT_COLLECTION_CODENAME=ficto_healthtech_surgical
NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME=ficto_healthtech_surgical
# Collection in format <COLLECTION_CODENAME>:<DOMAIN_WITOUHOUT_PROTOCOL> i.e. "ficto_healthtech:ficto-healthtech.vercel.app,ficto_healthtech_imaging:ficto-healthtech-imaging.vercel.app,ficto_healthtech_surgical:ficto-healthtech-surgical.vercel.app
NEXT_PUBLIC_COLLECTION_DOMAINS=
KONTENT_PREVIEW_API_KEY=
KONTENT_MANAGEMENT_API_KEY=

25 changes: 21 additions & 4 deletions components/shared/ui/menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ import { FC, useState } from "react";

import { mainColorBgClass } from "../../../lib/constants/colors";
import { createItemSmartLink } from "../../../lib/utils/smartLinkUtils";
import { Block_Navigation } from "../../../models";
import { Block_Navigation, contentTypes } from "../../../models";
import { useSiteCodename } from "../siteCodenameContext";
import { externalPreviewUrlsMapping } from "../../../lib/constants/menu";

type Link = Readonly<Block_Navigation>;

Expand All @@ -29,9 +30,24 @@ const isCurrentNavigationItemActive = (navigation: Block_Navigation, router: Nex
const pathWithoutQuerystring = router.asPath.replace(/\?.*/, '');
const pathSegments = pathWithoutQuerystring.split("/");
const topLevelSegment = pathSegments[1];
return (navigation.elements.pageLink.linkedItems[0]?.elements.url.value === topLevelSegment);
const pageLink = navigation.elements.pageLink.linkedItems[0];
return (pageLink?.system.codename === contentTypes.page.codename && pageLink?.elements.url.value === topLevelSegment);
};

const resolveLink = (link: Readonly<Block_Navigation>) => {
if (link.elements.externalLink.value) {
return link.elements.externalLink.value;
}

const pageLink = link.elements.pageLink.linkedItems[0];
const collectionDomain = externalPreviewUrlsMapping[pageLink?.system.collection ?? ""] || "";

if (pageLink?.system.type === contentTypes.web_spotlight_root.codename) {
return collectionDomain;
}

return collectionDomain + "/" + pageLink?.elements.url.value;
}

const MenuList: FC<MenuListProps> = props => {
const router = useRouter();
Expand Down Expand Up @@ -59,7 +75,7 @@ const MenuList: FC<MenuListProps> = props => {
<Link
{...link.elements.openInANewWindow.value[0] ? { rel: "noopener noreferrer", target: "_blank" } : {}}
className="h-full flex items-center justify-between w-full py-2 pl-3 pr-4 font-medium text-gray-900 border-b border-gray-100 md:w-auto md:bg-transparent md:border-0 md:hover:bg-white"
href={link.elements.externalLink.value ? link.elements.externalLink.value : "/" + link.elements.pageLink.linkedItems[0]?.elements.url.value}
href={resolveLink(link)}
>
{link.elements.label.value}
</Link>
Expand All @@ -70,6 +86,7 @@ const MenuList: FC<MenuListProps> = props => {
);
}


const DropdownButton: FC<Props> = props => {
return (
<button
Expand All @@ -90,7 +107,7 @@ const DropdownMenuItems: FC<DropdownMenuProps> = props => {
<li key={link.system.codename}>
<Link
{...link.elements.openInANewWindow.value[0] ? { rel: "noopener noreferrer", target: "_blank" } : {}}
href={link.elements.externalLink.value ? link.elements.externalLink.value : "/" + link.elements.pageLink.linkedItems[0]?.elements.url.value}
href={resolveLink(link)}
className={`${isCurrentNavigationItemActive(link, router) ? "border-l-gray-500 cursor-default " : "border-l-transparent hover:border-l-gray-500"}
block p-3 bg-gray-200 border-l-8 h-full`}
>
Expand Down
7 changes: 7 additions & 0 deletions lib/constants/menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,12 @@ export const perCollectionRootItems = {
ficto_healthtech_surgical: "ficto_healthtech_surgical"
} as const satisfies PerCollection<string>;

export const externalPreviewUrlsMapping = Object.fromEntries(
process.env.NEXT_PUBLIC_COLLECTION_DOMAINS?.split(",")
.map(collectionPair => collectionPair.split(":"))
.map(([collectionCodename, domain]) => [collectionCodename, "https://" + domain])
.filter(([collectionCodename]) => collectionCodename !== process.env.NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME) ?? []
);

export const getRootCodename = (siteCodename: ValidCollectionCodename) => perCollectionRootItems[siteCodename];

8 changes: 4 additions & 4 deletions lib/utils/env.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { isValidCollectionCodename } from "../types/perCollection";

const { KONTENT_COLLECTION_CODENAME } = process.env;
const { NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME } = process.env;

if (!isValidCollectionCodename(KONTENT_COLLECTION_CODENAME)) {
throw new Error(`Invalid collection codename "${KONTENT_COLLECTION_CODENAME}".`);
if (!isValidCollectionCodename(NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME)) {
throw new Error(`Invalid collection codename "${NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME}".`);
}

/** Use only on server - for client use `useSiteCodename` hook */
export const siteCodename = KONTENT_COLLECTION_CODENAME;
export const siteCodename = NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME;

0 comments on commit 9af29f6

Please sign in to comment.