@exdst-sitecore-content-sdk/astro 0.0.1

package/src/client/sitecore-astro-client.ts

@@ -0,0 +1,137 @@
+import {
+  FetchOptions,
+  Page,
+  PageOptions,
+  SitecoreClient,
+  SitecoreClientInit,
+} from '@sitecore-content-sdk/core/client';
+import {
+  AstroContentSdkComponent,
+  ComponentMap,
+  ComponentPropsCollection,
+  ComponentPropsError,
+  PreviewData,
+} from '../sharedTypes/component-props';
+import { LayoutServiceData } from '@sitecore-content-sdk/core/layout';
+import { ComponentPropsService } from '../services/component-props-service';
+import { EditingPreviewData } from '@sitecore-content-sdk/core/editing';
+import {
+  getSiteRewriteData,
+  normalizeSiteRewrite,
+} from '@sitecore-content-sdk/core/site';
+import {
+  getPersonalizedRewriteData,
+  normalizePersonalizedRewrite,
+} from '@sitecore-content-sdk/core/personalize';
+
+export class SitecoreAstroClient extends SitecoreClient {
+  protected componentPropsService: ComponentPropsService;
+  constructor(protected initOptions: SitecoreClientInit) {
+    super(initOptions);
+    this.componentPropsService = this.getComponentPropsService();
+  }
+
+  /**
+   * Gets site name based on the provided path
+   * @param {string | string[]} path path to get site name from
+   * @returns site name, or default site info if not found
+   */
+  getSiteNameFromPath(path: string | string[]) {
+    const resolvedPath = super.parsePath(path);
+    // Get site name (from path rewritten in middleware)
+    const siteData = getSiteRewriteData(
+      resolvedPath,
+      this.initOptions.defaultSite
+    );
+
+    return siteData.siteName;
+  }
+
+  /**
+   * Normalizes a path that could have been rewritten
+   * @param {string | string[]} path path
+   * @returns normalized path string
+   */
+  parsePath(path: string | string[]) {
+    const basePath = super.parsePath(path);
+    return normalizeSiteRewrite(normalizePersonalizedRewrite(basePath));
+  }
+
+  async getPage(
+    path: string | string[],
+    pageOptions: PageOptions,
+    options?: FetchOptions
+  ): Promise<Page | null> {
+    const resolvedPath = this.parsePath(path);
+    // Get variant(s) for personalization (from path), must ensure path is of type string
+    const personalizeData =
+      pageOptions.personalize ||
+      getPersonalizedRewriteData(super.parsePath(path));
+    const site = pageOptions.site || this.getSiteNameFromPath(path);
+    const page = await super.getPage(
+      resolvedPath,
+      {
+        locale: pageOptions.locale,
+        site,
+        personalize: personalizeData,
+      },
+      options
+    );
+
+    return page;
+  }
+
+  /**
+   * Retrieves preview page and layout details
+   * @param {PreviewData} previewData - The editing preview data for metadata mode.
+   * @param {FetchOptions} [fetchOptions] Additional fetch fetch options to override GraphQL requests (like retries and fetch)
+   */
+  async getPreview(
+    previewData: PreviewData,
+    fetchOptions?: FetchOptions
+  ): Promise<Page | null> {
+    return super.getPreview(previewData as EditingPreviewData, fetchOptions);
+  }
+
+  /**
+   * Parses components from nextjs component map and layoutData, executes getServerProps/getStaticProps methods
+   * and returns resulting props from components
+   * @param {LayoutServiceData} layoutData layout data to parse compnents from
+   * @param {ComponentMap<AstroContentSdkComponent>} components component map to get props for
+   * @returns {ComponentPropsCollection} component props
+   */
+  async getComponentData(
+    layoutData: LayoutServiceData,
+    // context: GetServerSidePropsContext | GetStaticPropsContext,
+    components: ComponentMap<AstroContentSdkComponent>
+  ): Promise<ComponentPropsCollection> {
+    let componentProps: ComponentPropsCollection = {};
+    if (!layoutData.sitecore.route) return componentProps;
+    // Retrieve component props using side-effects defined on components level
+    componentProps = await this.componentPropsService.fetchComponentProps({
+      layoutData: layoutData,
+      // context,
+      components,
+    });
+
+    const errors = Object.keys(componentProps)
+      .map((id) => {
+        const component = componentProps[id] as ComponentPropsError;
+
+        return component.error
+          ? `\nUnable to get component props for ${component.componentName} (${id}): ${component.error}`
+          : '';
+      })
+      .join('');
+
+    if (errors.length) {
+      throw new Error(errors);
+    }
+
+    return componentProps;
+  }
+
+  protected getComponentPropsService(): ComponentPropsService {
+    return new ComponentPropsService();
+  }
+}

package/src/components/AstroImage.astro

@@ -0,0 +1,114 @@
+---
+import { Image as OptimizedImage } from 'astro:assets';
+import { useSitecore } from '../context';
+import type {
+  BaseImageProps,
+  ImageField,
+  ImageFieldValue,
+} from './Image.astro';
+import Image from './Image.astro';
+import { EditableFieldProps } from './sharedTypes';
+import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
+import { addClassName } from '../utils';
+import { mediaApi } from '@sitecore-content-sdk/core/media';
+
+const { page } = useSitecore();
+let fallback = false,
+  render = true;
+
+if (page.mode.isEditing || page.mode.isPreview) {
+  fallback = true;
+}
+
+export interface AstroImageProps extends BaseImageProps, EditableFieldProps {
+  // srcSet attribute for Astro Image
+  widths?: number[];
+}
+
+const {
+  editable = true,
+  imageParams,
+  field,
+  alt,
+  mediaUrlPrefix,
+  emptyFieldEditingComponent,
+  ...otherProps
+} = Astro.props as AstroImageProps;
+
+const dynamicMedia = field as ImageField | ImageFieldValue;
+
+const isEmptyField = isFieldValueEmpty(dynamicMedia);
+
+if (fallback || isEmptyField) {
+  render = false;
+}
+
+let img;
+if (!isEmptyField) {
+  // handle image directly on field for forgetful devs
+  img = (dynamicMedia as ImageFieldValue).src
+    ? { ...field }
+    : (dynamicMedia.value as ImageFieldValue);
+
+  if (img) {
+    // prevent metadata from being passed to the img tag
+    if (img.metadata) {
+      delete img.metadata;
+    }
+  }
+}
+
+const getImageAttrs = (
+  {
+    src,
+    ...otherAttrs
+  }: {
+    [key: string]: unknown;
+    src?: string;
+  },
+  imageParams?: { [paramName: string]: string | number },
+  mediaUrlPrefix?: RegExp
+) => {
+  if (!src) {
+    return null;
+  }
+  addClassName(otherAttrs);
+
+  const newAttrs: { [attr: string]: unknown } = {
+    ...otherAttrs,
+  };
+
+  // update image URL for content sdk handler and image rendering params
+  const resolvedSrc = mediaApi.updateImageUrl(src, imageParams, mediaUrlPrefix);
+
+  // always output original src as fallback for older browsers
+  newAttrs.src = resolvedSrc;
+  return newAttrs;
+};
+
+const attrs = getImageAttrs(
+  { ...img, ...otherProps },
+  imageParams,
+  mediaUrlPrefix
+);
+
+const getAttributes = (): any => {
+  return {
+    ...attrs,
+    alt: alt ? alt : (attrs?.alt ?? ''),
+    src: attrs?.src,
+    height: attrs?.height,
+    width: attrs?.width,
+  };
+};
+
+if (attrs?.width === undefined || attrs?.height === undefined) {
+  console.warn('Missing width or height attribute');
+  render = false;
+}
+
+const attributes = getAttributes();
+---
+
+{render && <OptimizedImage {...attributes} />}
+{fallback && <Image {...Astro.props} />}

package/src/components/Date.astro

@@ -0,0 +1,76 @@
+---
+import {
+  FieldMetadata,
+  isFieldValueEmpty,
+} from '@sitecore-content-sdk/core/layout';
+import { EditableFieldProps } from './sharedTypes';
+import WithFieldMetadata from '../enhancers/WithFieldMetadata.astro';
+import WithEmptyFieldEditingComponent from '../enhancers/WithEmptyFieldEditingComponent.astro';
+import DefaultEmptyFieldEditingComponentText from './DefaultEmptyFieldEditingComponentText.astro';
+
+export interface DateFieldProps extends EditableFieldProps {
+  /** The date field data. */
+  [htmlAttributes: string]: unknown;
+  field: FieldMetadata & {
+    value?: string;
+  };
+  /**
+   * The HTML element that will wrap the contents of the field.
+   */
+  tag?: string;
+
+  render?: (date: Date | null) => string | null;
+}
+
+const {
+  field,
+  tag,
+  editable = true,
+  render,
+  emptyFieldEditingComponent,
+  ...otherProps
+} = Astro.props as DateFieldProps;
+
+const isEmptyField = isFieldValueEmpty(field);
+
+const htmlProps: {
+  [htmlAttr: string]: unknown;
+} = {
+  ...otherProps,
+};
+
+let children;
+if (!isEmptyField) {
+  if (render) {
+    // @ts-ignore
+    children = render(field.value ? new Date(field.value) : null);
+  } else {
+    children = field.value;
+  }
+}
+
+const Tag = tag || 'span';
+---
+
+{
+  (
+    <WithFieldMetadata field={field} editable={editable}>
+      <WithEmptyFieldEditingComponent
+        field={field}
+        editable={editable}
+        defaultEmptyFieldEditingComponent={
+          DefaultEmptyFieldEditingComponentText
+        }
+        emptyFieldEditingComponent={emptyFieldEditingComponent}
+        {...otherProps}
+      >
+        {!isEmptyField && (
+          <>
+            {tag && <Tag {...htmlProps} set:html={children} />}
+            {!tag && <Fragment {...htmlProps} set:html={children} />}
+          </>
+        )}
+      </WithEmptyFieldEditingComponent>
+    </WithFieldMetadata>
+  )
+}

package/src/components/DefaultEmptyFieldEditingComponentImage.astro

@@ -0,0 +1,24 @@
+---
+export interface EmptyFieldEditingComponentImageProps {
+  [key: string]: unknown;
+  className?: string;
+}
+
+const { className, ...props} = Astro.props as EmptyFieldEditingComponentImageProps;
+
+const inlineStyles = {
+  minWidth: '48px',
+  minHeight: '48px',
+  maxWidth: '400px',
+  maxHeight: '400px',
+  cursor: 'pointer',
+};
+---
+
+<img
+  {...props}
+  alt=""
+  src='data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'
+  class={`scEmptyImage ${className || ''}`}
+  style={inlineStyles}
+/>

package/src/components/DefaultEmptyFieldEditingComponentText.astro

@@ -0,0 +1,12 @@
+---
+export interface EmptyFieldEditingComponentTextProps {
+  [key: string]: unknown;
+  tag?: string;
+}
+
+const props = Astro.props as EmptyFieldEditingComponentTextProps;
+
+const Tag = props.tag || 'span';
+---
+
+<Tag {...props} set:html="[No text in field]" />

package/src/components/EditingScripts.astro

@@ -0,0 +1,49 @@
+---
+/**
+ * Renders client scripts and data for editing/preview mode for Pages.
+ * Renders script required for the Design Library (when mode.isDesignLibrary is true).
+ * @returns An Astro component containing the editing scripts or an empty fragment if not in editing/preview mode.
+ */
+
+import { useSitecore } from '../context';
+import { getContentSdkPagesClientData, getDesignLibraryScriptLink } from '@sitecore-content-sdk/core/editing';
+
+const { page: { mode, layout }, api } = useSitecore();
+const { clientData, clientScripts } = layout.sitecore.context;
+
+let scriptUrl;
+if (mode.isDesignLibrary) {
+  // Add cache buster to the script URL (format hh-dd-mm-yyyy, UTC)
+  const now = new Date();
+  const hour = String(now.getUTCHours()).padStart(2, '0');
+  const day = String(now.getUTCDate()).padStart(2, '0');
+  const month = String(now.getUTCMonth() + 1).padStart(2, '0');
+  const year = String(now.getUTCFullYear());
+  const cacheTimestamp = `${hour}-${day}-${month}-${year}`;
+  scriptUrl = `${getDesignLibraryScriptLink(api?.edge?.edgeUrl)}?cb=${cacheTimestamp}`;
+}
+
+const contentSdkClientData = { ...clientData, ...getContentSdkPagesClientData() };
+---
+
+<>
+ <!-- Don't render anything if not in editing mode and rendering type is not component -->
+ { (mode.isNormal || mode.isPreview) && <></> }
+
+  <!-- In case of Design Library - render only the script for Design Library -->
+ { mode.isDesignLibrary && <script src={scriptUrl}></script> }
+
+ { mode.isEditing && <>
+      {clientScripts?.map((src) => (
+        <script src={src} />
+      ))}
+      {Object.keys(contentSdkClientData).map((id) => (
+        <script
+          id={id}
+          type="application/json"
+          set:html={JSON.stringify(contentSdkClientData[id])}
+        />
+      ))}
+    </>
+  }
+</>

package/src/components/EmptyRendering.astro

@@ -0,0 +1,3 @@
+---
+---
+<></>

package/src/components/ErrorBoundary.astro

@@ -0,0 +1,77 @@
+---
+import { Page } from '@sitecore-content-sdk/core/client';
+import { ComponentRendering } from '@sitecore-content-sdk/core/layout';
+import { AstroContentSdkComponent } from '../sharedTypes/component-props';
+import { useSitecore } from '../context';
+
+export type ErrorBoundaryProps = {
+  page: Page;
+  isDynamic?: boolean;
+  errorComponent?: AstroContentSdkComponent;
+  rendering?: ComponentRendering;
+  componentLoadingMessage?: string;
+  disableSuspense?: boolean;
+};
+
+let props = Astro.props as ErrorBoundaryProps;
+const { page } = useSitecore();
+props = { ...props, page };
+
+const defaultErrorMessage = 'There was a problem loading this section.';
+
+const isInDevMode = (): boolean => {
+  return process.env.NODE_ENV === 'development';
+};
+
+const showErrorDetails = (): boolean => {
+  return (
+    isInDevMode() || props.page.mode.isEditing || props.page.mode.isPreview
+  );
+};
+
+let state: { error?: Error } = {};
+
+let html;
+
+try {
+  html = await Astro.slots.render('default');
+} catch (e) {
+  state = { error: e };
+  if (showErrorDetails()) {
+    console.error(
+      `An error occurred in component ${props.rendering?.componentName} (${props.rendering?.uid}): `
+    );
+  }
+  console.error(e);
+}
+---
+
+<>
+  {!state.error && <Fragment set:html={html} />}
+  {
+    state.error && props.errorComponent && (
+      <props.errorComponent error={state.error} />
+    )
+  }
+  {
+    state.error && !props.errorComponent && showErrorDetails() && (
+      <div>
+        <div class="sc-content-sdk-placeholder-error">
+          A rendering error occurred in component{' '}
+          <em>{props.rendering?.componentName}</em>
+          <br />
+          Error: <em>{state.error.message || JSON.stringify(state.error)}</em>
+        </div>
+      </div>
+    )
+  }
+  {
+    state.error && !props.errorComponent && !showErrorDetails() && (
+      <div>
+        <div class="sc-content-sdk-placeholder-error">
+          {defaultErrorMessage}
+        </div>
+      </div>
+    )
+  }
+</>

package/src/components/FieldMetadata.astro

@@ -0,0 +1,30 @@
+---
+/**
+ * The component which renders field metadata markup
+ */
+
+import { MetadataKind } from '@sitecore-content-sdk/core/editing';
+
+interface FieldMetadataProps {
+  metadata: { [key: string]: unknown };
+}
+
+const props = Astro.props as FieldMetadataProps;
+
+const data = JSON.stringify(props.metadata);
+
+const attributes = {
+  type: 'text/sitecore',
+  chrometype: 'field',
+  className: 'scpm',
+};
+
+const codeOpenAttributes = { ...attributes, kind: MetadataKind.Open };
+const codeCloseAttributes = { ...attributes, kind: MetadataKind.Close };
+---
+
+<>
+  <code {...codeOpenAttributes}>{data}</code>
+  <slot />
+  <code {...codeCloseAttributes}>{}</code>
+</>

package/src/components/File.astro

@@ -0,0 +1,46 @@
+---
+import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
+
+export interface FileFieldValue {
+  [propName: string]: unknown;
+  src?: string;
+  title?: string;
+  displayName?: string;
+}
+
+export interface FileField {
+  value: FileFieldValue;
+}
+
+export interface FileProps {
+  [attributeName: string]: unknown;
+  /** The file field data. */
+  field: FileFieldValue | FileField;
+}
+
+const { field, ...otherProps } = Astro.props as FileProps;
+
+const dynamicField: FileField | FileFieldValue = field;
+
+const isEmptyField = isFieldValueEmpty(dynamicField);
+
+let file, linkText, anchorAttrs, finalChildren;
+
+if (!isEmptyField) {
+  // handle link directly on field for forgetful devs
+  file = (
+    (dynamicField as FileFieldValue).src ? field : dynamicField.value
+  ) as FileFieldValue;
+
+  if (file) {
+    const children = await Astro.slots.render('default');
+    linkText = !children ? file.title || file.displayName : null;
+    anchorAttrs = { href: file.src };
+    finalChildren = children ? children : linkText;
+  }
+}
+
+const attrs = { ...anchorAttrs, ...otherProps };
+---
+
+{!isEmptyField && file && <a {...attrs} set:html={finalChildren}></a>}

package/src/components/HiddenRendering.astro

@@ -0,0 +1,22 @@
+---
+const baseStyles = {
+  backgroundSize: '3px 3px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '30px',
+  color: '#aaa',
+};
+
+const backgroundImageStyle = {
+  backgroundImage:
+    'linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%)',
+};
+
+const styles =
+  process.env.NODE_ENV === 'test'
+    ? baseStyles
+    : { ...baseStyles, ...backgroundImageStyle };
+---
+
+<div style={styles}>The component is hidden</div>