diff --git a/site/src/common/helpers/HiddenIfInvalidLink.tsx b/site/src/common/helpers/HiddenIfInvalidLink.tsx new file mode 100644 index 000000000..ce7c2200f --- /dev/null +++ b/site/src/common/helpers/HiddenIfInvalidLink.tsx @@ -0,0 +1,30 @@ +import { usePreview } from "@comet/cms-site"; +import { ExternalLinkBlockData, InternalLinkBlockData, LinkBlockData } from "@src/blocks.generated"; +import * as React from "react"; + +interface HiddenIfInvalidLinkProps { + link: LinkBlockData; + children: React.ReactElement; +} + +export function HiddenIfInvalidLink({ link, children }: HiddenIfInvalidLinkProps) { + const { previewType } = usePreview(); + + if (previewType === "BlockPreview") { + return children; + } + + if (!isValidLink(link)) { + return null; + } + + return children; +} + +const isValidLink = (link: LinkBlockData) => { + return Boolean( + link.block && + ((link.block.type === "internal" && (link.block.props as InternalLinkBlockData).targetPage) || + (link.block.type === "external" && (link.block.props as ExternalLinkBlockData).targetUrl)), + ); +}; diff --git a/site/src/layout/header/PageLink.tsx b/site/src/layout/header/PageLink.tsx index a39792bf7..243d53424 100644 --- a/site/src/layout/header/PageLink.tsx +++ b/site/src/layout/header/PageLink.tsx @@ -1,5 +1,6 @@ import { Link, useRouter } from "@comet/cms-site"; import { LinkBlock } from "@src/common/blocks/LinkBlock"; +import { HiddenIfInvalidLink } from "@src/common/helpers/HiddenIfInvalidLink"; import { gql } from "graphql-request"; import * as React from "react"; @@ -32,7 +33,11 @@ function PageLink({ page, children }: Props): JSX.Element | null { return null; } - return {typeof children === "function" ? children(active) : children}; + return ( + + {typeof children === "function" ? children(active) : children} + + ); } else if (page.documentType === "Page") { return (