@cntrl-site/sdk-nextjs 1.9.71-9 → 1.9.72

package/src/common/useKeyframeValue.ts

@@ -1,85 +1,85 @@
-import { KeyframeType, ItemAny } from '@cntrl-site/sdk';
-import isEqual from 'lodash.isequal';
-import { DependencyList, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { ArticleRectContext } from '../provider/ArticleRectContext';
-import { KeyframesContext } from '../provider/KeyframesContext';
-import { AnimationData, Animator } from '../utils/Animator/Animator';
-import { useLayoutContext } from '../components/useLayoutContext';
-
-export type AnimatorGetter<T> = (animator: Animator, scroll: number, value: T) => T;
-type ItemParamGetter<T> = (item: ItemAny, layoutId: string | undefined) => T;
-const emptyDeps: DependencyList = [];
-
-export function useKeyframeValue<T>(
-  item: ItemAny,
-  type: KeyframeType,
-  itemParamsGetter: ItemParamGetter<T>,
-  animatorGetter: AnimatorGetter<T>,
-  sectionId: string,
-  deps: DependencyList = emptyDeps
-): T {
-  const animatorGetterRef = useRef(animatorGetter);
-  const itemParamsGetterRef = useRef(itemParamsGetter);
-
-  animatorGetterRef.current = animatorGetter;
-  itemParamsGetterRef.current = itemParamsGetter;
-
-  const articleRectObserver = useContext(ArticleRectContext);
-  const layoutId = useLayoutContext();
-  const keyframesRepo = useContext(KeyframesContext);
-  const keyframes = useMemo(() => keyframesRepo.getItemKeyframes(item.id).filter(kf => kf.type === type), [item.id, keyframesRepo, type]);
-  const paramValue = useMemo<T>(() => {
-    return itemParamsGetterRef.current(item, layoutId);
-  }, [item, layoutId, ...deps]);
-
-  const [adjustedValue, setAdjustedValue] = useState<T>(paramValue);
-  const adjustedValueRef = useRef<T>(adjustedValue);
-  adjustedValueRef.current = adjustedValue;
-
-  const animator = useMemo(() => {
-    if (!layoutId || !keyframes.length) return;
-    const animationData = keyframes
-      .filter(k => k.layoutId === layoutId)
-      .map<AnimationData<KeyframeType>>(({ position, type, value }) => ({
-        position,
-        type,
-        value
-      }));
-    return new Animator(animationData);
-  }, [keyframes, layoutId]);
-
-  const handleKeyframeValue = useCallback((scroll: number) => {
-    if (!animator) return;
-    const newValue = animatorGetterRef.current(animator, scroll, paramValue);
-    if (!isEqual(newValue, adjustedValueRef.current)) {
-      setAdjustedValue(newValue);
-    }
-  }, [animator, paramValue]);
-
-  useEffect(() => {
-    setAdjustedValue(paramValue);
-  }, [paramValue]);
-
-  useEffect(() => {
-    if (!articleRectObserver || !animator) return;
-    const scroll = articleRectObserver.getSectionScroll(sectionId);
-    handleKeyframeValue(scroll);
-  }, [articleRectObserver, handleKeyframeValue, animator]);
-
-  useEffect(() => {
-    if (!articleRectObserver || !animator) return;
-    return articleRectObserver.on('resize', () => {
-      const scroll = articleRectObserver.getSectionScroll(sectionId);
-      handleKeyframeValue(scroll);
-    });
-  }, [handleKeyframeValue, articleRectObserver, animator]);
-
-  useEffect(() => {
-    if (!articleRectObserver || !animator) return;
-    return articleRectObserver.on('scroll', () => {
-      const scroll = articleRectObserver.getSectionScroll(sectionId);
-      handleKeyframeValue(scroll);
-    });
-  }, [handleKeyframeValue, articleRectObserver, animator]);
-  return keyframes.length ? adjustedValue : paramValue;
-}
+import { KeyframeType, ItemAny } from '@cntrl-site/sdk';
+import isEqual from 'lodash.isequal';
+import { DependencyList, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { ArticleRectContext } from '../provider/ArticleRectContext';
+import { KeyframesContext } from '../provider/KeyframesContext';
+import { AnimationData, Animator } from '../utils/Animator/Animator';
+import { useLayoutContext } from '../components/useLayoutContext';
+
+export type AnimatorGetter<T> = (animator: Animator, scroll: number, value: T) => T;
+type ItemParamGetter<T> = (item: ItemAny, layoutId: string | undefined) => T;
+const emptyDeps: DependencyList = [];
+
+export function useKeyframeValue<T>(
+  item: ItemAny,
+  type: KeyframeType,
+  itemParamsGetter: ItemParamGetter<T>,
+  animatorGetter: AnimatorGetter<T>,
+  sectionId: string,
+  deps: DependencyList = emptyDeps
+): T {
+  const animatorGetterRef = useRef(animatorGetter);
+  const itemParamsGetterRef = useRef(itemParamsGetter);
+
+  animatorGetterRef.current = animatorGetter;
+  itemParamsGetterRef.current = itemParamsGetter;
+
+  const articleRectObserver = useContext(ArticleRectContext);
+  const layoutId = useLayoutContext();
+  const keyframesRepo = useContext(KeyframesContext);
+  const keyframes = useMemo(() => keyframesRepo.getItemKeyframes(item.id).filter(kf => kf.type === type), [item.id, keyframesRepo, type]);
+  const paramValue = useMemo<T>(() => {
+    return itemParamsGetterRef.current(item, layoutId);
+  }, [item, layoutId, ...deps]);
+
+  const [adjustedValue, setAdjustedValue] = useState<T>(paramValue);
+  const adjustedValueRef = useRef<T>(adjustedValue);
+  adjustedValueRef.current = adjustedValue;
+
+  const animator = useMemo(() => {
+    if (!layoutId || !keyframes.length) return;
+    const animationData = keyframes
+      .filter(k => k.layoutId === layoutId)
+      .map<AnimationData<KeyframeType>>(({ position, type, value }) => ({
+        position,
+        type,
+        value
+      }));
+    return new Animator(animationData);
+  }, [keyframes, layoutId]);
+
+  const handleKeyframeValue = useCallback((scroll: number) => {
+    if (!animator) return;
+    const newValue = animatorGetterRef.current(animator, scroll, paramValue);
+    if (!isEqual(newValue, adjustedValueRef.current)) {
+      setAdjustedValue(newValue);
+    }
+  }, [animator, paramValue]);
+
+  useEffect(() => {
+    setAdjustedValue(paramValue);
+  }, [paramValue]);
+
+  useEffect(() => {
+    if (!articleRectObserver || !animator) return;
+    const scroll = articleRectObserver.getSectionScroll(sectionId);
+    handleKeyframeValue(scroll);
+  }, [articleRectObserver, handleKeyframeValue, animator]);
+
+  useEffect(() => {
+    if (!articleRectObserver || !animator) return;
+    return articleRectObserver.on('resize', () => {
+      const scroll = articleRectObserver.getSectionScroll(sectionId);
+      handleKeyframeValue(scroll);
+    });
+  }, [handleKeyframeValue, articleRectObserver, animator]);
+
+  useEffect(() => {
+    if (!articleRectObserver || !animator) return;
+    return articleRectObserver.on('scroll', () => {
+      const scroll = articleRectObserver.getSectionScroll(sectionId);
+      handleKeyframeValue(scroll);
+    });
+  }, [handleKeyframeValue, articleRectObserver, animator]);
+  return keyframes.length ? adjustedValue : paramValue;
+}

package/src/common/useRegisterResize.ts

@@ -1,16 +1,16 @@
-import { useEffect } from 'react';
-import ResizeObserver from 'resize-observer-polyfill';
-
-export function useRegisterResize(ref: HTMLElement | null, onResize?: (height: number) => void) {
-  useEffect(() => {
-    if (!ref || !onResize) return;
-    const observer = new ResizeObserver((entries) => {
-      const [entry] = entries;
-      onResize(entry.target.clientHeight / window.innerWidth);
-    });
-    observer.observe(ref);
-    return () => {
-      observer.unobserve(ref);
-    };
-  }, [ref, onResize]);
-}
+import { useEffect } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+
+export function useRegisterResize(ref: HTMLElement | null, onResize?: (height: number) => void) {
+  useEffect(() => {
+    if (!ref || !onResize) return;
+    const observer = new ResizeObserver((entries) => {
+      const [entry] = entries;
+      onResize(entry.target.clientHeight / window.innerWidth);
+    });
+    observer.observe(ref);
+    return () => {
+      observer.unobserve(ref);
+    };
+  }, [ref, onResize]);
+}

package/src/components/Article.tsx

@@ -1,69 +1,75 @@
-import { FC, useEffect, useId, useMemo, useRef, useState } from 'react';
-import JSXStyle from 'styled-jsx/style';
-import { Article as TArticle } from '@cntrl-site/sdk';
-import { Section } from './Section/Section';
-import { Item } from './items/Item';
-import { useArticleRectObserver } from '../utils/ArticleRectManager/useArticleRectObserver';
-import { ArticleRectContext } from '../provider/ArticleRectContext';
-import { ArticleWrapper } from './ArticleWrapper';
-import { InteractionsProvider } from '../provider/InteractionsContext';
-import { WebglContextManagerContext } from '../provider/WebGLContextManagerContext';
-import { WebGLContextManager } from '@cntrl-site/effects';
-import { StructuredContent } from './StructuredContent/StructuredContent';
-
-interface Props {
-  article: TArticle;
-  sectionData: Record<SectionName, any>;
-}
-
-export const Article: FC<Props> = ({ article, sectionData }) => {
-  const articleRef = useRef<HTMLDivElement | null>(null);
-  const articleRectObserver = useArticleRectObserver(articleRef.current);
-  const id = useId();
-  const [articleHeight, setArticleHeight] = useState(1);
-
-  useEffect(() => {
-    if (!articleRectObserver) return;
-    return articleRectObserver.on('resize', (rect) => {
-      setArticleHeight(rect.height / rect.width);
-    });
-  }, [articleRectObserver]);
-
-  const webglContextManager = useMemo(() => new WebGLContextManager(), []);
-  const sectionsLength = article.sections.length;
-
-  return (
-    <ArticleRectContext.Provider value={articleRectObserver}>
-      <InteractionsProvider article={article}>
-        <ArticleWrapper>
-          <div className="article" ref={articleRef}>
-            <WebglContextManagerContext.Provider value={webglContextManager}>
-              {article.sections.map((section, i) => {
-                const data = section.name ? sectionData[section.name] : {};
-                return (
-                  <Section
-                    articleHeight={articleHeight}
-                    section={section}
-                    key={section.id}
-                    data={data}
-                    zIndex={sectionsLength - i}
-                  />
-                );
-              })}
-            </WebglContextManagerContext.Provider>
-            <div id="component-portal" />
-            <div id="grid-component-lightbox-portal" />
-          </div>
-        </ArticleWrapper>
-        <JSXStyle id={id}>{`
-       .article {
-         position: relative;
-         overflow: clip;
-       }
-      `}</JSXStyle>
-      </InteractionsProvider>
-    </ArticleRectContext.Provider>
-  );
-};
-
-type SectionName = string;
+import { FC, useEffect, useId, useMemo, useRef, useState } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import { Article as TArticle } from '@cntrl-site/sdk';
+import { Section } from './Section/Section';
+import { Item } from './items/Item';
+import { useArticleRectObserver } from '../utils/ArticleRectManager/useArticleRectObserver';
+import { ArticleRectContext } from '../provider/ArticleRectContext';
+import { ArticleWrapper } from './ArticleWrapper';
+import { InteractionsProvider } from '../provider/InteractionsContext';
+import { WebglContextManagerContext } from '../provider/WebGLContextManagerContext';
+import { WebGLContextManager } from '@cntrl-site/effects';
+
+interface Props {
+  article: TArticle;
+  sectionData: Record<SectionName, any>;
+}
+
+export const Article: FC<Props> = ({ article, sectionData }) => {
+  const articleRef = useRef<HTMLDivElement | null>(null);
+  const articleRectObserver = useArticleRectObserver(articleRef.current);
+  const id = useId();
+  const [articleHeight, setArticleHeight] = useState(1);
+
+  useEffect(() => {
+    if (!articleRectObserver) return;
+    return articleRectObserver.on('resize', (rect) => {
+      setArticleHeight(rect.height / rect.width);
+    });
+  }, [articleRectObserver]);
+
+  const webglContextManager = useMemo(() => new WebGLContextManager(), []);
+  const sectionsLength = article.sections.length;
+
+  return (
+    <ArticleRectContext.Provider value={articleRectObserver}>
+      <InteractionsProvider article={article}>
+        <ArticleWrapper>
+          <div className="article" ref={articleRef}>
+            <WebglContextManagerContext.Provider value={webglContextManager}>
+              {article.sections.map((section, i) => {
+                const data = section.name ? sectionData[section.name] : {};
+                return (
+                  <Section
+                    section={section}
+                    key={section.id}
+                    data={data}
+                    zIndex={sectionsLength - i}
+                  >
+                    {article.sections[i].items.map(item => (
+                      <Item
+                        item={item}
+                        key={item.id}
+                        sectionId={section.id}
+                        articleHeight={articleHeight}
+                      />
+                    ))}
+                  </Section>
+                );
+              })}
+            </WebglContextManagerContext.Provider>
+            <div id="component-portal" />
+          </div>
+        </ArticleWrapper>
+        <JSXStyle id={id}>{`
+       .article {
+         position: relative;
+         overflow: clip;
+       }
+      `}</JSXStyle>
+      </InteractionsProvider>
+    </ArticleRectContext.Provider>
+  );
+};
+
+type SectionName = string;

package/src/components/ArticleWrapper.tsx

@@ -1,21 +1,21 @@
-import React, { CSSProperties, FC, PropsWithChildren } from 'react';
-import { useCurrentLayout } from '../common/useCurrentLayout';
-import { LayoutContext } from '../provider/LayoutContext';
-
-export const ArticleWrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
-  const { layoutId, layoutDeviation } = useCurrentLayout();
-  const layoutDeviationStyle = { '--layout-deviation': layoutDeviation } as CSSProperties;
-
-  return (
-    <LayoutContext.Provider value={layoutId}>
-      <div
-        className="article-wrapper"
-        style={{
-          ...layoutDeviationStyle
-        }}
-      >
-        {children}
-      </div>
-    </LayoutContext.Provider>
-  );
-};
+import React, { CSSProperties, FC, PropsWithChildren } from 'react';
+import { useCurrentLayout } from '../common/useCurrentLayout';
+import { LayoutContext } from '../provider/LayoutContext';
+
+export const ArticleWrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
+  const { layoutId, layoutDeviation } = useCurrentLayout();
+  const layoutDeviationStyle = { '--layout-deviation': layoutDeviation } as CSSProperties;
+
+  return (
+    <LayoutContext.Provider value={layoutId}>
+      <div
+        className="article-wrapper"
+        style={{
+          ...layoutDeviationStyle
+        }}
+      >
+        {children}
+      </div>
+    </LayoutContext.Provider>
+  );
+};

package/src/components/Head.tsx

@@ -1,95 +1,95 @@
-import React, { FC } from 'react';
-import HTMLReactParser, { domToReact } from 'html-react-parser';
-import Head from 'next/head';
-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, 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 = {
-    ...(typeof googleFonts === 'object' ? googleFonts : {}),
-    ...(typeof adobeFonts === 'object' ? adobeFonts : {})
-  };
-  const customFonts = project.fonts.custom;
-  const htmlHead = HTMLReactParser(project.html.head);
-  const ffGenerator = new FontFaceGenerator(customFonts);
-  const links = Object.values(parsedFonts as ReturnType<typeof domToReact>).map((value) => {
-    if (!value) return null;
-    const rel = value?.rel || value.props?.rel;
-    const href = value?.href || value.props?.href;
-    if (!rel || !href) return null;
-    return (
-      <link key={`link-${rel}-${href}`} rel={rel} href={href} />
-    );
-  });
-  return (
-    <Head>
-      <title>{meta.title}</title>
-      <meta name="description" content={meta.description} />
-      <meta name="keywords" content={meta.keywords} />
-      <meta property="og:title" content={meta.title} />
-      <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} />
-      <meta name="twitter:description" content={meta.description} />
-      <meta name="generator" content="https://cntrl.site" />
-      <link rel="icon" href={meta.favicon} />
-      {customFonts.length > 0 && (
-        <style
-          dangerouslySetInnerHTML={{
-            __html: ffGenerator.generate()
-          }}
-        />
-      )}
-      {links}
-      {htmlHead}
-
-    </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);
-}
+import React, { FC } from 'react';
+import HTMLReactParser, { domToReact } from 'html-react-parser';
+import Head from 'next/head';
+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, 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 = {
+    ...(typeof googleFonts === 'object' ? googleFonts : {}),
+    ...(typeof adobeFonts === 'object' ? adobeFonts : {})
+  };
+  const customFonts = project.fonts.custom;
+  const htmlHead = HTMLReactParser(project.html.head);
+  const ffGenerator = new FontFaceGenerator(customFonts);
+  const links = Object.values(parsedFonts as ReturnType<typeof domToReact>).map((value) => {
+    if (!value) return null;
+    const rel = value?.rel || value.props?.rel;
+    const href = value?.href || value.props?.href;
+    if (!rel || !href) return null;
+    return (
+      <link key={`link-${rel}-${href}`} rel={rel} href={href} />
+    );
+  });
+  return (
+    <Head>
+      <title>{meta.title}</title>
+      <meta name="description" content={meta.description} />
+      <meta name="keywords" content={meta.keywords} />
+      <meta property="og:title" content={meta.title} />
+      <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} />
+      <meta name="twitter:description" content={meta.description} />
+      <meta name="generator" content="https://cntrl.site" />
+      <link rel="icon" href={meta.favicon} />
+      {customFonts.length > 0 && (
+        <style
+          dangerouslySetInnerHTML={{
+            __html: ffGenerator.generate()
+          }}
+        />
+      )}
+      {links}
+      {htmlHead}
+
+    </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/LayoutStyle.tsx

@@ -1,21 +1,21 @@
-import React, { FC } from 'react';
-import { getLayoutMediaQuery, Layout } from '@cntrl-site/sdk';
-import JSXStyle from 'styled-jsx/style';
-
-export interface LayoutStyleProps {
-  id: string;
-  layouts: Layout[];
-  layoutId: string;
-  children?: (layout: Layout) => string;
-}
-
-export const LayoutStyle: FC<LayoutStyleProps> = ({ id, layouts, layoutId, children }) => {
-  const layout = layouts.find(l => l.id === layoutId)!;
-  return (
-    <JSXStyle id={id}>{`
-      ${getLayoutMediaQuery(layoutId, layouts)} {
-        ${children?.(layout)}
-      }
-    `}</JSXStyle>
-  );
-};
+import React, { FC } from 'react';
+import { getLayoutMediaQuery, Layout } from '@cntrl-site/sdk';
+import JSXStyle from 'styled-jsx/style';
+
+export interface LayoutStyleProps {
+  id: string;
+  layouts: Layout[];
+  layoutId: string;
+  children?: (layout: Layout) => string;
+}
+
+export const LayoutStyle: FC<LayoutStyleProps> = ({ id, layouts, layoutId, children }) => {
+  const layout = layouts.find(l => l.id === layoutId)!;
+  return (
+    <JSXStyle id={id}>{`
+      ${getLayoutMediaQuery(layoutId, layouts)} {
+        ${children?.(layout)}
+      }
+    `}</JSXStyle>
+  );
+};