improve public page crawl signals

Author: dnywh

e2e/home.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test";
+import { HOST_EMAIL, signIn } from "./helpers";
 
 test("homepage hydrates without chat date mismatches", async ({
   browser,
@@ -108,3 +109,57 @@ test("homepage drop-off only shows curated featured hosts", async ({
     page.getByTestId("homepage-featured-host-demo-newtown-worm-farm")
   ).toHaveCount(0);
 });
+
+test("homepage account button stays hidden while signed-in profile state loads", async ({
+  page,
+}) => {
+  await signIn(page, { email: HOST_EMAIL, redirectTo: "/profile" });
+
+  let resolveProfileRequest = () => {};
+  const profileRequestStarted = new Promise<void>((resolve) => {
+    resolveProfileRequest = resolve;
+  });
+  let continueProfileRequest = () => {};
+  const profileRequestCanContinue = new Promise<void>((resolve) => {
+    continueProfileRequest = resolve;
+  });
+
+  await page.route(/\/rest\/v1\/profiles(?:\?|$)/, async (route) => {
+    const request = route.request();
+
+    if (
+      request.method() === "GET" &&
+      request.url().includes("select=first_name")
+    ) {
+      resolveProfileRequest();
+      await profileRequestCanContinue;
+    }
+
+    await route.continue();
+  });
+
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await profileRequestStarted;
+
+  try {
+    await expect(page.getByTestId("account-button-profile")).toHaveCount(0);
+    await expect(page.getByTestId("account-button-sign-in")).toHaveCount(0);
+  } finally {
+    continueProfileRequest();
+  }
+
+  const profileAccountButton = page.getByTestId("account-button-profile");
+
+  await expect(profileAccountButton).toHaveAttribute("href", "/profile");
+  await expect(profileAccountButton).toHaveCSS("opacity", "1");
+});
+
+test("homepage account button links guests to sign in", async ({ page }) => {
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+
+  await expect(page.getByTestId("account-button-sign-in")).toHaveAttribute(
+    "href",
+    "/sign-in"
+  );
+  await expect(page.getByTestId("account-button-profile")).toHaveCount(0);
+});

src/components/AccountButton/AccountButton.tsx

@@ -1,6 +1,8 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
+import { styled } from "next-yak";
 import Button from "@/components/Button";
 import { useAuthUser } from "@/hooks/useAuthUser";
 import type { LinkButtonProps } from "@/components/Button";
@@ -13,16 +15,69 @@ type AccountButtonProps = Omit<
 export default function AccountButton({ ...props }: AccountButtonProps) {
   const t = useTranslations("Actions");
   const tCommon = useTranslations("Common");
-  const { user, profileFirstName } = useAuthUser({ includeProfile: true });
+  const { user, profileFirstName, isLoading } = useAuthUser({
+    includeProfile: true,
+  });
+  const [isReadyToShow, setIsReadyToShow] = useState(false);
   const label = profileFirstName?.trim() || tCommon("account");
 
+  useEffect(() => {
+    if (isLoading) {
+      setIsReadyToShow(false);
+      return;
+    }
+
+    const animationFrame = window.requestAnimationFrame(() => {
+      setIsReadyToShow(true);
+    });
+
+    return () => {
+      window.cancelAnimationFrame(animationFrame);
+    };
+  }, [isLoading]);
+
+  if (isLoading) {
+    return null;
+  }
+
+  const hiddenButtonProps = !isReadyToShow
+    ? ({
+        "aria-hidden": true,
+        tabIndex: -1,
+      } satisfies Pick<LinkButtonProps, "aria-hidden" | "tabIndex">)
+    : {};
+
   return user ? (
-    <Button href="/profile" variant="secondary" {...props}>
+    <FadingAccountButton
+      href="/profile"
+      variant="secondary"
+      {...props}
+      {...hiddenButtonProps}
+      $visible={isReadyToShow}
+      data-testid="account-button-profile"
+    >
       {label}
-    </Button>
+    </FadingAccountButton>
   ) : (
-    <Button href="/sign-in" variant="secondary" {...props}>
+    <FadingAccountButton
+      href="/sign-in"
+      variant="secondary"
+      {...props}
+      {...hiddenButtonProps}
+      $visible={isReadyToShow}
+      data-testid="account-button-sign-in"
+    >
       {t("signIn")}
-    </Button>
+    </FadingAccountButton>
   );
 }
+
+const FadingAccountButton = styled(Button)<{ $visible: boolean }>`
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  pointer-events: ${({ $visible }) => ($visible ? "auto" : "none")};
+  transition: opacity 160ms ease-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`;

src/components/JsonLd.tsx

@@ -1,3 +1,5 @@
+import { serializeJsonLd } from "@/utils/jsonLd";
+
 type JsonLdProps = {
   data: unknown;
 };
@@ -7,7 +9,7 @@ export default function JsonLd({ data }: JsonLdProps) {
     <script
       type="application/ld+json"
       dangerouslySetInnerHTML={{
-        __html: JSON.stringify(data).replace(/</g, "\\u003c"),
+        __html: serializeJsonLd(data),
       }}
     />
   );

src/features/map/lib/mapUtils.ts

@@ -89,9 +89,9 @@ export function wrapLongitude(lng: number): number {
 // direction). This lets us fetch a slightly padded area so that small pans
 // reuse already-loaded pins without hitting the network again.
 //
-// Returns 1 or 2 boxes. Two are returned when the padded viewport crosses
-// the antimeridian (e.g. Fiji, NZ → Alaska), so the caller can fetch both
-// halves and merge the results.
+// Returns one or more boxes. Two are returned when the padded viewport crosses
+// the antimeridian (e.g. Fiji, NZ → Alaska), and global viewports are split
+// into geography-safe slices. Callers should fetch each box and merge results.
 export function padBounds(bounds: LngLatBounds, factor = 0.3): BoundingBox[] {
   const sw = bounds.getSouthWest();
   const ne = bounds.getNorthEast();

src/utils/jsonLd.test.ts

@@ -0,0 +1,23 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+
+import { serializeJsonLd } from "./jsonLd.ts";
+
+test("JSON-LD serialization falls back safely for undefined data", () => {
+  assert.equal(serializeJsonLd(undefined), "null");
+});
+
+test("JSON-LD serialization falls back safely for unsupported data", () => {
+  const circular: { self?: unknown } = {};
+  circular.self = circular;
+
+  assert.equal(serializeJsonLd(1n), "null");
+  assert.equal(serializeJsonLd(circular), "null");
+});
+
+test("JSON-LD serialization escapes HTML tag openings", () => {
+  assert.equal(
+    serializeJsonLd({ name: "<script>alert('x')</script>" }),
+    `{"name":"\\u003cscript>alert('x')\\u003c/script>"}`
+  );
+});

src/utils/jsonLd.ts

@@ -0,0 +1,11 @@
+export function serializeJsonLd(data: unknown) {
+  let json = "null";
+
+  try {
+    json = JSON.stringify(data ?? null) ?? "null";
+  } catch {
+    json = "null";
+  }
+
+  return json.replace(/</g, "\\u003c");
+}

src/utils/listingUtils.test.ts

@@ -115,3 +115,18 @@ test("anonymous residential listing JSON-LD omits structured location details",
   assert.equal(jsonLd.about.address, undefined);
   assert.equal(jsonLd.about.geo, undefined);
 });
+
+test("anonymous listing JSON-LD treats missing listing types as sensitive", () => {
+  const unknownTypeListing = {
+    ...communityListing,
+    type: null,
+    slug: "unknown-type-listing",
+  } satisfies Listing;
+
+  const jsonLd = generateListingJsonLd(unknownTypeListing, null);
+
+  assert.ok(jsonLd);
+  assert.equal(jsonLd.about.address, undefined);
+  assert.equal(jsonLd.about.geo, undefined);
+  assert.equal(jsonLd.about.image, undefined);
+});

src/utils/listingUtils.ts

@@ -308,8 +308,13 @@ export function generateListingJsonLd(
     `/listings/${encodeURIComponent(listing.slug)}`,
     siteConfig.url
   ).toString();
-  const structuredDataImage = getListingStructuredDataImage(listing, user);
-  const canIncludeStructuredLocation = listingType !== "residential" || !!user;
+  const canIncludePublicStructuredDetails =
+    listingType === "business" || listingType === "community";
+  const canIncludeStructuredLocation =
+    canIncludePublicStructuredDetails || !!user;
+  const structuredDataImage = canIncludePublicStructuredDetails
+    ? getListingStructuredDataImage(listing, user)
+    : null;
   const address = {
     "@type": "PostalAddress",
     ...(listing.area_name ? { addressLocality: listing.area_name } : {}),