Merge pull request #972 from evershopcommerce/release213

feat: Move logo, favicon, social banner and GA4 to admin setting

Author: treoden

changelog.md

@@ -0,0 +1,195 @@
+import { Image, ImageUploader } from '@components/admin/ImageUploader.js';
+import { InputField } from '@components/common/form/InputField.js';
+import { _ } from '@evershop/evershop/lib/locale/translate/_';
+import React, { useEffect, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import uniqid from 'uniqid';
+
+type PreviewType = 'logo' | 'favicon' | 'social';
+
+/**
+ * Build a URL for the on-the-fly image endpoint (`GET /images`), which resizes
+ * + re-encodes the asset and serves it with an immutable cache header. Passing
+ * the stored (relative) `/assets/...` path lets the processor read the file
+ * locally instead of re-fetching it over HTTP.
+ */
+function imageEndpoint(
+  src: string,
+  params: { w: number; h?: number; q?: number; f?: 'webp' | 'jpeg' | 'png' }
+): string {
+  const query = new URLSearchParams({
+    src,
+    w: String(params.w),
+    q: String(params.q ?? 80),
+    f: params.f ?? 'webp'
+  });
+  if (params.h) {
+    query.set('h', String(params.h));
+  }
+  return `/images?${query.toString()}`;
+}
+
+function AssetPreview({ url, type }: { url: string; type: PreviewType }) {
+  if (type === 'favicon') {
+    // Render at the exact sizes the storefront emits so contrast / legibility
+    // problems at 16px are obvious before saving.
+    return (
+      <div className="mt-3 flex items-end gap-4">
+        {[16, 32, 48].map((size) => (
+          <div key={size} className="flex flex-col items-center gap-1">
+            <img
+              src={imageEndpoint(url, { w: size, h: size, q: 90, f: 'png' })}
+              width={size}
+              height={size}
+              alt=""
+            />
+            <span className="text-[11px] text-muted-foreground">{size}px</span>
+          </div>
+        ))}
+      </div>
+    );
+  }
+  if (type === 'social') {
+    // Mirrors the actual og:image render (width-only, jpeg) so the admin sees
+    // the true crop/ratio a crawler will get.
+    return (
+      <div className="mt-3 max-w-sm overflow-hidden rounded-lg border border-border">
+        <img
+          src={imageEndpoint(url, { w: 1200, q: 80, f: 'jpeg' })}
+          className="block w-full"
+          alt={_('Social sharing preview')}
+        />
+      </div>
+    );
+  }
+  // logo — show it on light and dark so a logo that disappears on one theme is
+  // caught immediately.
+  return (
+    <div className="mt-3 flex gap-3">
+      <div className="flex h-12 items-center rounded-md border border-border bg-white px-3">
+        <img
+          src={imageEndpoint(url, { w: 240, q: 85, f: 'webp' })}
+          alt=""
+          className="max-h-7 w-auto"
+        />
+      </div>
+      <div className="flex h-12 items-center rounded-md border border-border bg-neutral-900 px-3">
+        <img
+          src={imageEndpoint(url, { w: 240, q: 85, f: 'webp' })}
+          alt=""
+          className="max-h-7 w-auto"
+        />
+      </div>
+    </div>
+  );
+}
+
+export interface BrandAssetUploaderProps {
+  /** Form field / setting key, e.g. `logo`, `favicon`, `socialSharingImage`. */
+  name: string;
+  /** Current saved value (a `/assets/...` URL) or empty string. */
+  defaultValue?: string;
+  /** Media subfolder the file lands in; a unique token is appended per mount. */
+  folder?: string;
+  /** Which contextual preview to render under the uploader. */
+  previewType?: PreviewType;
+  /**
+   * When set, the asset's real intrinsic pixel size is measured on upload and
+   * written to these form fields. Used for the logo — whose aspect ratio is
+   * arbitrary — so the storefront can size it without distortion or layout
+   * shift. Omit for fixed-ratio assets (favicon, social image).
+   */
+  widthName?: string;
+  heightName?: string;
+  defaultWidth?: string;
+  defaultHeight?: string;
+}
+
+/**
+ * Single-asset image upload for store branding (logo / favicon / social image).
+ * Wraps the shared {@link ImageUploader} in single mode, mirrors the uploaded
+ * URL into a hidden form field so it saves with the rest of the store settings,
+ * and renders a contextual preview built from the `/images` endpoint.
+ */
+export function BrandAssetUploader({
+  name,
+  defaultValue,
+  folder = 'branding',
+  previewType,
+  widthName,
+  heightName,
+  defaultWidth,
+  defaultHeight
+}: BrandAssetUploaderProps) {
+  const [image, setImage] = useState<Image | undefined>(
+    defaultValue ? { uuid: name, url: defaultValue } : undefined
+  );
+  const { setValue } = useFormContext();
+  // A fresh folder per mount so replacing an asset never overwrites the old
+  // file: the image endpoint caches by source path with an immutable header, so
+  // a reused filename would keep serving the previous render.
+  const [targetPath] = useState(() => `${folder}/${uniqid()}`);
+
+  useEffect(() => {
+    setValue(name, image?.url || '');
+  }, [image, name, setValue]);
+
+  // Measure the real intrinsic size of the asset (logo only) so the storefront
+  // sizes it correctly. `window.Image` — the bare `Image` is the type imported
+  // above, not the DOM constructor.
+  useEffect(() => {
+    if (!widthName || !heightName) {
+      return;
+    }
+    if (!image?.url) {
+      setValue(widthName, '');
+      setValue(heightName, '');
+      return;
+    }
+    const probe = new window.Image();
+    probe.onload = () => {
+      setValue(widthName, String(probe.naturalWidth));
+      setValue(heightName, String(probe.naturalHeight));
+    };
+    probe.src = image.url;
+  }, [image, widthName, heightName, setValue]);
+
+  return (
+    <div>
+      {/* The shared uploader is a 100%-width square; in this wide settings
+          column that balloons, so cap it to a compact thumbnail. */}
+      <div className="w-40">
+        <ImageUploader
+          isMultiple={false}
+          allowDelete
+          currentImages={image ? [image] : []}
+          onUpload={(images) => {
+            if (images.length > 0) {
+              setImage(images[0]);
+            }
+          }}
+          onDelete={() => setImage(undefined)}
+          targetPath={targetPath}
+        />
+      </div>
+      <InputField type="hidden" name={name} defaultValue={defaultValue ?? ''} />
+      {widthName && (
+        <InputField
+          type="hidden"
+          name={widthName}
+          defaultValue={defaultWidth ?? ''}
+        />
+      )}
+      {heightName && (
+        <InputField
+          type="hidden"
+          name={heightName}
+          defaultValue={defaultHeight ?? ''}
+        />
+      )}
+      {previewType && image?.url ? (
+        <AssetPreview url={image.url} type={previewType} />
+      ) : null}
+    </div>
+  );
+}

packages/evershop/src/components/admin/BrandAssetUploader.tsx

@@ -287,27 +287,21 @@ export async function buildEmailBodyFromTemplate(
  * @returns The prepared email data with store information.
  */
 async function prepareData(data: EmailData): Promise<EmailData> {
-  const logoConfig = getConfig('themeConfig.logo');
-  let logo;
-  if (logoConfig) {
-    const url = logoConfig.src || '';
-    // check if url is absolute
-    if (url && !/^https?:\/\//i.test(url)) {
-      logo = {
-        src: `${getBaseUrl()}${url}`,
-        alt: logoConfig?.alt || '',
-        height: logoConfig?.height ? String(logoConfig.height) : undefined,
-        width: logoConfig?.width ? String(logoConfig.width) : undefined
-      };
-    } else {
-      logo = {
-        src: url,
-        alt: logoConfig?.alt || '',
-        height: logoConfig?.height ? String(logoConfig.height) : undefined,
-        width: logoConfig?.width ? String(logoConfig.width) : undefined
-      };
-    }
-  }
+  // The logo is an admin setting (Store Setting → Branding). The email needs an
+  // ABSOLUTE, email-safe image, so it is served through the /images endpoint as a
+  // sized PNG (WebP/AVIF are unreliable in Outlook and older mail clients). When
+  // unset, `logo` stays undefined and each template's {{#if storeInfo.logo}} skips it.
+  const logoSetting = await getSetting<string>('logo', '');
+  const logo = logoSetting
+    ? {
+        src: `${getBaseUrl()}/images?src=${encodeURIComponent(
+          logoSetting
+        )}&w=360&q=85&f=png`,
+        alt: await getSetting('storeName', 'Evershop'),
+        // Display width only (2× source for crisp retina); height stays auto.
+        width: '180'
+      }
+    : undefined;
   const addressCountry = await getSetting('storeCountry', 'US');
   const addressProvince = await getSetting('storeProvince', '');
   const addressCity = await getSetting('storeCity', '');

packages/evershop/src/lib/mail/emailHelper.ts

@@ -97,12 +97,6 @@ type ConfigStructure = {
     };
   };
   themeConfig: {
-    logo: {
-      alt: string | undefined;
-      src: string | undefined;
-      width: number | undefined;
-      height: number | undefined;
-    };
     headTags: {
       links: any[];
       metas: any[];

packages/evershop/src/lib/util/getConfig.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+
+interface GoogleAnalyticsProps {
+  setting: {
+    gaMeasurementId?: string | null;
+  };
+}
+
+// GA4 Measurement IDs look like `G-XXXXXXXXXX`. Validating before injection also
+// guarantees the id is safe to interpolate into the inline bootstrap script.
+const GA4_ID_PATTERN = /^G-[A-Z0-9]+$/i;
+
+/**
+ * Loads Google Analytics 4 when a Measurement ID is configured in the store
+ * settings. Injection happens client-side in an effect — not as SSR'd <script>
+ * tags — so it runs identically in dev (client render) and prod (SSR), and the
+ * one-time guard keeps a re-mount / re-hydration from double-counting page_view.
+ */
+export default function GoogleAnalytics({
+  setting: { gaMeasurementId }
+}: GoogleAnalyticsProps) {
+  React.useEffect(() => {
+    if (!gaMeasurementId || !GA4_ID_PATTERN.test(gaMeasurementId)) {
+      return;
+    }
+    const w = window as unknown as { __evershopGaLoaded?: string };
+    if (w.__evershopGaLoaded === gaMeasurementId) {
+      return;
+    }
+    w.__evershopGaLoaded = gaMeasurementId;
+
+    const loader = document.createElement('script');
+    loader.async = true;
+    loader.src = `https://www.googletagmanager.com/gtag/js?id=${encodeURIComponent(
+      gaMeasurementId
+    )}`;
+    document.head.appendChild(loader);
+
+    // Google's canonical bootstrap, verbatim (pushes the `arguments` object).
+    const inline = document.createElement('script');
+    inline.text =
+      `window.dataLayer=window.dataLayer||[];` +
+      `function gtag(){dataLayer.push(arguments);}` +
+      `gtag('js',new Date());` +
+      `gtag('config','${gaMeasurementId}');`;
+    document.head.appendChild(inline);
+  }, [gaMeasurementId]);
+
+  return null;
+}
+
+export const layout = {
+  areaId: 'head',
+  sortOrder: 1
+};
+
+export const query = `
+  query Query {
+    setting {
+      gaMeasurementId
+    }
+  }
+`;

packages/evershop/src/modules/base/pages/frontStore/all/GoogleAnalytics.tsx

@@ -69,6 +69,28 @@ export default function HeadTags({
     });
   }, []);
 
+  // `.ico` / `.svg` are served as-is (the image endpoint resizes via sharp,
+  // which handles neither). A raster favicon (PNG/JPG/WebP) is downscaled to the
+  // standard tab sizes plus a 180px Apple touch icon, all through `/images`.
+  const renderFavicon = () => {
+    if (!favicon) {
+      return null;
+    }
+    const lower = favicon.toLowerCase().split('?')[0];
+    if (lower.endsWith('.ico') || lower.endsWith('.svg')) {
+      return <link rel="icon" href={favicon} />;
+    }
+    const icon = (size: number) =>
+      `/images?src=${encodeURIComponent(favicon)}&w=${size}&h=${size}&q=90&f=png`;
+    return (
+      <>
+        <link rel="icon" type="image/png" sizes="32x32" href={icon(32)} />
+        <link rel="icon" type="image/png" sizes="16x16" href={icon(16)} />
+        <link rel="apple-touch-icon" sizes="180x180" href={icon(180)} />
+      </>
+    );
+  };
+
   return (
     <>
       <title>{title}</title>
@@ -83,7 +105,7 @@ export default function HeadTags({
       {scripts.map((script, index) => (
         <script key={index} {...script} />
       ))}
-      {favicon && <link rel="icon" href={favicon} />}
+      {renderFavicon()}
       {keywords && keywords.length > 0 && (
         <meta name="keywords" content={keywords.join(', ')} />
       )}