@cntrl-site/sdk-nextjs 1.9.66 → 1.9.67

package/lib/components/Head.js

@@ -8,7 +8,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const html_react_parser_1 = __importDefault(require("html-react-parser"));
 const head_1 = __importDefault(require("next/head"));
 const sdk_1 = require("@cntrl-site/sdk");
-const CNTRLHead = ({ meta, project }) => {
+const CNTRLHead = ({ meta, project, slug, siteUrl }) => {
+    const canonicalUrl = buildCanonicalUrl(siteUrl !== null && siteUrl !== void 0 ? siteUrl : project.primaryDomain, slug);
     const googleFonts = (0, html_react_parser_1.default)(project.fonts.google);
     const adobeFonts = (0, html_react_parser_1.default)(project.fonts.adobe);
     const parsedFonts = Object.assign(Object.assign({}, (typeof googleFonts === 'object' ? googleFonts : {})), (typeof adobeFonts === 'object' ? adobeFonts : {}));
@@ -25,8 +26,45 @@ const CNTRLHead = ({ meta, project }) => {
             return null;
         return ((0, jsx_runtime_1.jsx)("link", { rel: rel, href: href }, `link-${rel}-${href}`));
     });
-    return ((0, jsx_runtime_1.jsxs)(head_1.default, { children: [(0, jsx_runtime_1.jsx)("title", { children: meta.title }), (0, jsx_runtime_1.jsx)("meta", { name: "description", content: meta.description }), (0, jsx_runtime_1.jsx)("meta", { name: "keywords", content: meta.keywords }), (0, jsx_runtime_1.jsx)("meta", { property: "og:title", content: meta.title }), (0, jsx_runtime_1.jsx)("meta", { property: "og:image", content: meta.opengraphThumbnail }), (0, jsx_runtime_1.jsx)("meta", { property: "og:description", content: meta.description }), (0, jsx_runtime_1.jsx)("meta", { property: "og:type", content: "website" }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:card", content: "summary_large_image" }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:title", content: meta.title }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:image", content: meta.opengraphThumbnail }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:description", content: meta.description }), (0, jsx_runtime_1.jsx)("meta", { name: "generator", content: "https://cntrl.site" }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", href: meta.favicon }), customFonts.length > 0 && ((0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: {
+    return ((0, jsx_runtime_1.jsxs)(head_1.default, { children: [(0, jsx_runtime_1.jsx)("title", { children: meta.title }), (0, jsx_runtime_1.jsx)("meta", { name: "description", content: meta.description }), (0, jsx_runtime_1.jsx)("meta", { name: "keywords", content: meta.keywords }), (0, jsx_runtime_1.jsx)("meta", { property: "og:title", content: meta.title }), (0, jsx_runtime_1.jsx)("meta", { property: "og:image", content: meta.opengraphThumbnail }), (0, jsx_runtime_1.jsx)("meta", { property: "og:description", content: meta.description }), (0, jsx_runtime_1.jsx)("meta", { property: "og:type", content: "website" }), canonicalUrl && (0, jsx_runtime_1.jsx)("link", { rel: "canonical", href: canonicalUrl }), canonicalUrl && (0, jsx_runtime_1.jsx)("meta", { property: "og:url", content: canonicalUrl }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:card", content: "summary_large_image" }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:title", content: meta.title }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:image", content: meta.opengraphThumbnail }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:description", content: meta.description }), (0, jsx_runtime_1.jsx)("meta", { name: "generator", content: "https://cntrl.site" }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", href: meta.favicon }), customFonts.length > 0 && ((0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: {
                     __html: ffGenerator.generate()
                 } })), links, htmlHead] }));
 };
 exports.CNTRLHead = CNTRLHead;
+function buildCanonicalUrl(host, slug) {
+    if (!host)
+        return null;
+    if (slug === undefined)
+        return null;
+    const base = parseAsUrl(host);
+    if (!base)
+        return null;
+    if (!base.pathname.endsWith('/'))
+        base.pathname += '/';
+    const relative = stripSlashes(slug);
+    const target = relative ? new URL(`${relative}/`, base) : base;
+    target.search = '';
+    target.hash = '';
+    return target.toString();
+}
+function parseAsUrl(input) {
+    var _a;
+    return (_a = tryParseUrl(input)) !== null && _a !== void 0 ? _a : tryParseUrl(`https://${input}`);
+}
+function tryParseUrl(input) {
+    try {
+        return new URL(input);
+    }
+    catch (_a) {
+        return null;
+    }
+}
+function stripSlashes(value) {
+    let start = 0;
+    let end = value.length;
+    while (start < end && value[start] === '/')
+        start += 1;
+    while (end > start && value[end - 1] === '/')
+        end -= 1;
+    return value.slice(start, end);
+}

package/lib/components/Page.js

@@ -13,11 +13,13 @@ const Head_1 = require("./Head");
 const Keyframes_1 = require("../provider/Keyframes");
 const ItemGeometryContext_1 = require("../ItemGeometry/ItemGeometryContext");
 const ItemGeometryService_1 = require("../ItemGeometry/ItemGeometryService");
-const Page = ({ article, project, meta, keyframes, sectionData }) => {
+const Page = ({ article, project, meta, keyframes, sectionData, siteUrl }) => {
+    var _a;
     const afterBodyOpen = (0, html_react_parser_1.default)(project.html.afterBodyOpen);
     const beforeBodyClose = (0, html_react_parser_1.default)(project.html.beforeBodyClose);
     const keyframesRepo = (0, react_1.useMemo)(() => new Keyframes_1.Keyframes(keyframes), [keyframes]);
     const itemGeometryService = (0, react_1.useMemo)(() => new ItemGeometryService_1.ItemGeometryService(), []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project, meta: meta }), afterBodyOpen, (0, jsx_runtime_1.jsx)(ItemGeometryContext_1.ItemGeometryContext.Provider, { value: itemGeometryService, children: (0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, sectionData: sectionData }) }) }), beforeBodyClose] }));
+    const currentSlug = (_a = project.pages.find(p => p.articleId === article.id)) === null || _a === void 0 ? void 0 : _a.slug;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project, meta: meta, slug: currentSlug, siteUrl: siteUrl }), afterBodyOpen, (0, jsx_runtime_1.jsx)(ItemGeometryContext_1.ItemGeometryContext.Provider, { value: itemGeometryService, children: (0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, sectionData: sectionData }) }) }), beforeBodyClose] }));
 };
 exports.Page = Page;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.66",
+  "version": "1.9.67",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",

package/src/components/Head.tsx

@@ -6,9 +6,12 @@ import { FontFaceGenerator, Meta, Project } from '@cntrl-site/sdk';
 interface Props {
   project: Project;
   meta: Meta;
+  slug?: string;
+  siteUrl?: string;
 }
 
-export const CNTRLHead: FC<Props> = ({ meta, project }) => {
+export const CNTRLHead: FC<Props> = ({ meta, project, slug, siteUrl }) => {
+  const canonicalUrl = buildCanonicalUrl(siteUrl ?? project.primaryDomain, slug);
   const googleFonts: ReturnType<typeof domToReact> = HTMLReactParser(project.fonts.google);
   const adobeFonts: ReturnType<typeof domToReact> = HTMLReactParser(project.fonts.adobe);
   const parsedFonts = {
@@ -36,6 +39,8 @@ export const CNTRLHead: FC<Props> = ({ meta, project }) => {
       <meta property="og:image" content={meta.opengraphThumbnail} />
       <meta property="og:description" content={meta.description} />
       <meta property="og:type" content="website" />
+      {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
+      {canonicalUrl && <meta property="og:url" content={canonicalUrl} />}
       <meta name="twitter:card" content="summary_large_image" />
       <meta name="twitter:title" content={meta.title} />
       <meta name="twitter:image" content={meta.opengraphThumbnail} />
@@ -55,3 +60,36 @@ export const CNTRLHead: FC<Props> = ({ meta, project }) => {
     </Head>
   );
 };
+
+function buildCanonicalUrl(host: string | null | undefined, slug: string | undefined): string | null {
+  if (!host) return null;
+  if (slug === undefined) return null;
+  const base = parseAsUrl(host);
+  if (!base) return null;
+  if (!base.pathname.endsWith('/')) base.pathname += '/';
+  const relative = stripSlashes(slug);
+  const target = relative ? new URL(`${relative}/`, base) : base;
+  target.search = '';
+  target.hash = '';
+  return target.toString();
+}
+
+function parseAsUrl(input: string): URL | null {
+  return tryParseUrl(input) ?? tryParseUrl(`https://${input}`);
+}
+
+function tryParseUrl(input: string): URL | null {
+  try {
+    return new URL(input);
+  } catch {
+    return null;
+  }
+}
+
+function stripSlashes(value: string): string {
+  let start = 0;
+  let end = value.length;
+  while (start < end && value[start] === '/') start += 1;
+  while (end > start && value[end - 1] === '/') end -= 1;
+  return value.slice(start, end);
+}

package/src/components/Page.tsx

@@ -21,16 +21,18 @@ export interface PageProps {
   sectionData: Record<SectionName, any>;
   publicApiBase?: string;
   customComponentBundles?: CustomComponentBundlesData;
+  siteUrl?: string;
 }
 
-export const Page: FC<PageProps> = ({ article, project, meta, keyframes, sectionData }) => {
+export const Page: FC<PageProps> = ({ article, project, meta, keyframes, sectionData, siteUrl }) => {
   const afterBodyOpen = HTMLReactParser(project.html.afterBodyOpen);
   const beforeBodyClose = HTMLReactParser(project.html.beforeBodyClose);
   const keyframesRepo = useMemo(() => new Keyframes(keyframes), [keyframes]);
   const itemGeometryService = useMemo(() => new ItemGeometryService(), []);
+  const currentSlug = project.pages.find(p => p.articleId === article.id)?.slug;
   return (
     <>
-      <CNTRLHead project={project} meta={meta} />
+      <CNTRLHead project={project} meta={meta} slug={currentSlug} siteUrl={siteUrl} />
       {afterBodyOpen}
       <ItemGeometryContext.Provider value={itemGeometryService}>
         <KeyframesContext.Provider value={keyframesRepo}>