@netlify/spark-ui 1.30.0 → 1.31.0-alpha.1

package/packages/components/ArticleCopyActions.astro

@@ -0,0 +1,122 @@
+---
+interface Props {
+  url: string;
+  content: string;
+  title?: string;
+  class?: string;
+  copyUrlLabel?: string;
+  copyContentLabel?: string;
+  copiedLabel?: string;
+  trackingProps?: Record<string, string>;
+  trackingSelectorClass?: string;
+}
+
+const {
+  url,
+  content,
+  title,
+  class: className,
+  copyUrlLabel = 'Copy URL',
+  copyContentLabel = 'Copy page',
+  copiedLabel = 'Copied!',
+  trackingProps = {},
+  trackingSelectorClass,
+} = Astro.props;
+
+const copyContent = title ? `# ${title}\n\n${content}` : content;
+---
+
+<div class:list={['copy-actions', className]} data-copied-label={copiedLabel}>
+  <button
+    type="button"
+    class:list={['copy-actions-action', 'copy-actions-copy-url', trackingSelectorClass]}
+    data-copy="url"
+    data-value={url}
+    data-track-action="copy_url"
+    {...trackingProps}
+  >
+    <svg
+      class="copy-actions-icon"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.3"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      role="presentation"
+    >
+      <path d="M6.5 9.5a2.5 2.5 0 0 0 3.6.1l2-2a2.5 2.5 0 0 0-3.6-3.6l-1.1 1.1"></path>
+      <path d="M9.5 6.5a2.5 2.5 0 0 0-3.6-.1l-2 2a2.5 2.5 0 0 0 3.6 3.6l1.1-1.1"></path>
+    </svg>
+    <span class="copy-actions-label">{copyUrlLabel}</span>
+  </button>
+  <button
+    type="button"
+    class:list={['copy-actions-action', 'copy-actions-copy-content', trackingSelectorClass]}
+    data-copy="page"
+    data-track-action="copy_page"
+    {...trackingProps}
+  >
+    <svg
+      class="copy-actions-icon"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      aria-hidden="true"
+      role="presentation"
+    >
+      <path
+        d="M4.83333 1C3.82214 1 3 1.78477 3 2.75V13.25C3 14.2152 3.82214 15 4.83333 15H12.1667C13.1779 15 14 14.2152 14 13.25V5.375H10.3333C9.8263 5.375 9.41667 4.98398 9.41667 4.5V1H4.83333ZM10.3333 1V4.5H14L10.3333 1ZM6.20833 8H10.7917C11.0438 8 11.25 8.19687 11.25 8.4375C11.25 8.67813 11.0438 8.875 10.7917 8.875H6.20833C5.95625 8.875 5.75 8.67813 5.75 8.4375C5.75 8.19687 5.95625 8 6.20833 8ZM6.20833 9.75H10.7917C11.0438 9.75 11.25 9.94687 11.25 10.1875C11.25 10.4281 11.0438 10.625 10.7917 10.625H6.20833C5.95625 10.625 5.75 10.4281 5.75 10.1875C5.75 9.94687 5.95625 9.75 6.20833 9.75ZM6.20833 11.5H10.7917C11.0438 11.5 11.25 11.6969 11.25 11.9375C11.25 12.1781 11.0438 12.375 10.7917 12.375H6.20833C5.95625 12.375 5.75 12.1781 5.75 11.9375C5.75 11.6969 5.95625 11.5 6.20833 11.5Z"
+      ></path>
+    </svg>
+    <span class="copy-actions-label">{copyContentLabel}</span>
+  </button>
+</div>
+
+<script is:inline type="text/plain" data-copy-actions-source set:text={copyContent} />
+
+<style>
+  .copy-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--ntl-space-2xs);
+  }
+
+  .copy-actions-action {
+    display: flex;
+    align-items: center;
+    gap: var(--ntl-space-3xs);
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    color: var(--ntl-color-text-weak);
+    cursor: pointer;
+  }
+
+  .copy-actions-label {
+    font-size: var(--ntl-font-size-text-sm);
+  }
+
+  .copy-actions-icon {
+    width: var(--ntl-space-s);
+    height: var(--ntl-space-s);
+  }
+
+  .copy-actions-copy-url::after {
+    content: '•';
+    margin-inline-start: var(--ntl-space-2xs);
+  }
+
+  .copy-actions-action:hover {
+    color: var(--ntl-color-text);
+  }
+</style>
+
+<script>
+  import { initArticleCopyActions } from './articleCopyActions';
+
+  // `astro:page-load` fires on the initial load *and* after every client-side
+  // navigation (`<ClientRouter />`).
+  document.addEventListener('astro:page-load', () => initArticleCopyActions());
+</script>

package/packages/components/articleCopyActions.test.ts

@@ -0,0 +1,143 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { initArticleCopyActions } from './articleCopyActions';
+
+const ARTICLE_URL = 'https://www.netlify.com/blog/some-post/';
+const MARKDOWN = '# Some post\n\nBody content.';
+
+function renderCopyActions({ url = ARTICLE_URL, markdown = MARKDOWN, copiedLabel = 'Copied!' } = {}) {
+  document.body.innerHTML = `
+    <div class="copy-actions" data-copied-label="${copiedLabel}">
+      <button
+        type="button"
+        class="copy-actions-action copy-actions-copy-url"
+        data-copy="url"
+        data-value="${url}"
+      >
+        <span>Copy URL</span>
+      </button>
+      <button
+        type="button"
+        class="copy-actions-action copy-actions-copy-content"
+        data-copy="page"
+      >
+        <span>Copy page</span>
+      </button>
+    </div>
+    <script type="text/plain" data-copy-actions-source>${markdown}</script>
+  `;
+
+  return {
+    wrapper: document.querySelector<HTMLElement>('.copy-actions')!,
+    copyUrlBtn: document.querySelector<HTMLButtonElement>('.copy-actions-copy-url')!,
+    copyPageBtn: document.querySelector<HTMLButtonElement>('.copy-actions-copy-content')!,
+    urlLabel: document.querySelector<HTMLElement>('.copy-actions-copy-url span')!,
+    pageLabel: document.querySelector<HTMLElement>('.copy-actions-copy-content span')!,
+  };
+}
+
+describe('initArticleCopyActions', () => {
+  let writeText: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      value: { writeText },
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
+    document.body.innerHTML = '';
+  });
+
+  it('copies the article URL and shows a temporary confirmation', async () => {
+    const { copyUrlBtn, urlLabel } = renderCopyActions();
+    initArticleCopyActions();
+
+    copyUrlBtn.click();
+    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith(ARTICLE_URL));
+    expect(urlLabel.textContent).toBe('Copied!');
+  });
+
+  it('copies the markdown source for the "Copy page" button', async () => {
+    const { copyPageBtn, pageLabel } = renderCopyActions();
+    initArticleCopyActions();
+
+    copyPageBtn.click();
+    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith(MARKDOWN));
+    expect(pageLabel.textContent).toBe('Copied!');
+  });
+
+  it('resets the label back to its original text after the delay', async () => {
+    const { copyUrlBtn, urlLabel } = renderCopyActions();
+    initArticleCopyActions();
+
+    copyUrlBtn.click();
+    await vi.waitFor(() => expect(urlLabel.textContent).toBe('Copied!'));
+
+    vi.advanceTimersByTime(1500);
+    expect(urlLabel.textContent).toBe('Copy URL');
+  });
+
+  it('uses a custom copied label when data-copied-label is set', async () => {
+    const { copyUrlBtn, urlLabel } = renderCopyActions({ copiedLabel: 'Done!' });
+    initArticleCopyActions();
+
+    copyUrlBtn.click();
+    await vi.waitFor(() => expect(urlLabel.textContent).toBe('Done!'));
+  });
+
+  it('does not attach duplicate listeners when initialised twice on the same DOM', async () => {
+    const { copyUrlBtn } = renderCopyActions();
+    initArticleCopyActions();
+    initArticleCopyActions(); // e.g. a spurious re-fire
+
+    copyUrlBtn.click();
+    await vi.waitFor(() => expect(writeText).toHaveBeenCalledTimes(1));
+  });
+
+  it('re-binds after a client-side navigation swaps in fresh buttons', async () => {
+    // Simulate the ClientRouter bug: first page loads and works...
+    const first = renderCopyActions({ url: 'https://example.com/first/' });
+    initArticleCopyActions();
+    first.copyUrlBtn.click();
+    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith('https://example.com/first/'));
+
+    // ...then a navigation replaces the DOM with a new post's buttons.
+    const second = renderCopyActions({ url: 'https://example.com/second/' });
+    // Re-running on `astro:page-load` is what makes the new buttons work.
+    initArticleCopyActions();
+
+    second.copyUrlBtn.click();
+    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith('https://example.com/second/'));
+  });
+
+  it('scopes the markdown source lookup to each wrapper, not a global selector', async () => {
+    document.body.innerHTML = `
+      <div class="copy-actions" data-copied-label="Copied!">
+        <button type="button" class="copy-actions-action copy-actions-copy-content" data-copy="page">
+          <span>Copy page</span>
+        </button>
+      </div>
+      <script type="text/plain" data-copy-actions-source>First post markdown</script>
+      <div class="copy-actions" data-copied-label="Copied!">
+        <button type="button" class="copy-actions-action copy-actions-copy-content" data-copy="page">
+          <span>Copy page</span>
+        </button>
+      </div>
+      <script type="text/plain" data-copy-actions-source>Second post markdown</script>
+    `;
+    initArticleCopyActions();
+
+    const buttons = document.querySelectorAll<HTMLButtonElement>('.copy-actions-copy-content');
+    buttons[1].click();
+    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith('Second post markdown'));
+
+    buttons[0].click();
+    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith('First post markdown'));
+  });
+});

package/packages/components/articleCopyActions.ts

@@ -0,0 +1,41 @@
+const COPIED_LABEL_FALLBACK = 'Copied!';
+const RESET_DELAY_MS = 1500;
+
+/**
+ * Wire up the "Copy URL" / "Copy page" buttons rendered by ArticleCopyActions.astro.
+ *
+ * This runs on every `astro:page-load` (initial load *and* every client-side
+ * navigation via `<ClientRouter />`), so the buttons keep working after routing
+ * to another article/post. Each wrapper is guarded so re-initialising the same
+ * DOM node never attaches duplicate listeners.
+ */
+export function initArticleCopyActions(root: ParentNode = document): void {
+  root.querySelectorAll<HTMLElement>('.copy-actions').forEach(wrapper => {
+    if (wrapper.dataset.copyBound === 'true') return;
+    wrapper.dataset.copyBound = 'true';
+
+    const source = wrapper.nextElementSibling as HTMLElement | null;
+    const copiedLabel = wrapper.dataset.copiedLabel ?? COPIED_LABEL_FALLBACK;
+
+    wrapper.querySelectorAll<HTMLButtonElement>('.copy-actions-action').forEach(btn => {
+      const label = btn.querySelector<HTMLElement>('span');
+      const originalText = label?.textContent;
+
+      btn.addEventListener('click', async () => {
+        const value =
+          btn.getAttribute('data-copy') === 'url'
+            ? btn.getAttribute('data-value')
+            : source?.textContent;
+
+        if (!value || !label) return;
+
+        await navigator.clipboard.writeText(value);
+
+        label.textContent = copiedLabel;
+        setTimeout(() => {
+          label.textContent = originalText ?? '';
+        }, RESET_DELAY_MS);
+      });
+    });
+  });
+}

package/packages/components/index.ts

@@ -9,17 +9,32 @@ export { default as SearchModal } from './preact/SearchModal/components/SearchMo
 export {
   DropZone,
   AnonymousDropClient,
+  AuthenticatedBuildClient,
+  AuthenticatedDropClient,
+  deployBuild,
   deployFiles,
+  detectBuild,
+  inferBuildSettings,
   readDataTransfer,
   readFileList,
+  zipFiles,
 } from './preact/DropZone';
 export type {
+  AuthenticatedBuildClientConfig,
+  AuthenticatedDropClientConfig,
+  BuildClient,
+  BuildDeployResult,
+  BuildDetection,
+  BuildSite,
+  DeployedBuild,
+  DeployedSite,
   DropClient,
   DropResponse,
   Digest,
   DeployResult,
   DeployProgress,
   DeployPhase,
+  InferredBuildSettings,
   ProcessedFile,
 } from './preact/DropZone';
 export { type IconName } from './preact/Icon';

package/packages/components/preact/DropZone/DropZone.tsx

@@ -4,11 +4,13 @@ import {
   getFileTypes,
   readDataTransfer,
   readFileList,
+  type BuildClient,
   type BuildDetection,
   type DropClient,
 } from './drop-core';
 import {
   useDropDeploy,
+  type DeployedBuild,
   type DeployedSite,
   type DeployError,
   type DeployStatus,
@@ -22,6 +24,13 @@ const DRAG_INACTIVE_MS = 120;
 
 const defaultClaimUrl = (siteName: string) => `https://app.netlify.com/drop/${siteName}`;
 
+/**
+ * Where an authenticated static deploy lands: the new site's project overview,
+ * the same place the app's own logged-in drop sends you.
+ */
+const defaultSiteDashboardUrl = (siteName: string) =>
+  `https://app.netlify.com/projects/${siteName}`;
+
 /**
  * Where a build-required drop is sent by default. Mirrors the app's own Drop
  * page: signup with `next=/drop`, so after signup + email verification the user
@@ -29,6 +38,15 @@ const defaultClaimUrl = (siteName: string) => `https://app.netlify.com/drop/${si
  */
 const defaultBuildSignupUrl = 'https://app.netlify.com/signup?next=/drop&utm_campaign=drop';
 
+/**
+ * Where an authenticated build drop lands: the new site's project overview —
+ * the same destination as a static deploy, and where the app's own Drop page
+ * sends build drops. The overview surfaces the in-progress deploy; consumers
+ * who want the deploy-log page instead can override with `build.deployId`.
+ */
+const defaultBuildDeployUrl = ({ siteName }: DeployedBuild) =>
+  `https://app.netlify.com/projects/${siteName}`;
+
 interface Props {
   /** Content the drop layer sits on top of. The zone is invisible until you drag over it. */
   children?: ComponentChildren;
@@ -38,23 +56,81 @@ interface Props {
   client?: DropClient;
   /** Build the "claim this site" URL from the assigned site name (subdomain). */
   claimUrl?: (siteName: string) => string;
+  /**
+   * Where an authenticated static deploy sends the visitor — the site already
+   * lives in their account, so there is no claim step. Defaults to the new
+   * site's project overview on app.netlify.com.
+   */
+  siteDashboardUrl?: (siteName: string) => string;
   /**
    * Where to send a build-required drop (framework source, build command,
-   * functions) when `onBuildRequired` isn't set. Such projects can't deploy
-   * through the anonymous static drop API, so by default the user is redirected
-   * here — the app signup page with `next=/drop` — to build on the
-   * authenticated Drop page. Override to point at your own destination.
+   * functions) that can't be built here — no `getUploadToken`/`buildClient`, or a
+   * visitor who isn't logged in. Such projects can't deploy through the anonymous
+   * static drop API, so by default the user is redirected here — the app signup
+   * page with `next=/drop` — to build on the authenticated Drop page. Override to
+   * point at your own destination.
    */
   buildSignupUrl?: string;
   /**
-   * Called when a build-required drop is detected, instead of the default
-   * `buildSignupUrl` redirect. Use it to own the hand-off yourself (custom
-   * routing, persisting the drop, gating on auth). When set, the component does
-   * not redirect. The static drop path is unaffected either way.
+   * Mint a short-lived bearer token for direct api.netlify.com uploads — pass it
+   * to switch on the whole authenticated path for logged-in visitors: static
+   * drops deploy straight into their account (then `siteDashboardUrl`), and
+   * build-required drops build in place instead of being handed off to the app.
+   * On netlify.com this reads `GET /access-control/generate-access-control-token`.
+   * Resolving `null` means "no session": static drops fall back to the anonymous
+   * claim flow, build drops to `buildSignupUrl`.
+   * See [Logged-in visitors](#logged-in-visitors).
+   */
+  getUploadToken?: () => Promise<string | null>;
+  /**
+   * Inject a custom `BuildClient` (tests, staging, a different account flow).
+   * Takes precedence over `getUploadToken` for the build path.
+   */
+  buildClient?: BuildClient;
+  /**
+   * Inject a custom authenticated `DropClient` for static drops (tests, staging,
+   * a different account flow). Takes precedence over `getUploadToken` for the
+   * static path. Distinct from `client`, which is the anonymous fallback.
+   */
+  authenticatedDropClient?: DropClient;
+  /**
+   * API root for the authenticated paths' JSON calls, which go through your
+   * access-control rewrite so the session cookie authorizes them. Defaults to
+   * `/access-control/bb-api/api/v1`. (Uploads always go direct to
+   * `api.netlify.com` — the proxy can't carry bodies that large.)
+   */
+  proxyBase?: string;
+  /** Create the visitor's new project in this account. Omit for their default account. */
+  accountSlug?: string;
+  /**
+   * Where an enqueued build sends the visitor. Defaults to the new site's
+   * project overview, same as a static deploy; `build.deployId` is available for
+   * consumers who want the deploy-log page instead.
+   */
+  buildDeployUrl?: (build: DeployedBuild) => string;
+  /**
+   * Poll until the build finishes before handing off, instead of redirecting as
+   * soon as it's enqueued. The trade-off: waiting means a failing build surfaces
+   * its own error message here (via `onError` and the overlay) rather than the
+   * visitor discovering it on the deploy page — at the cost of holding them on a
+   * spinner for the length of the build, which is minutes. Off by default.
+   */
+  waitForBuild?: boolean;
+  /**
+   * Called when a build-required drop is detected, instead of building it or
+   * redirecting. Use it to own the hand-off yourself (custom routing, persisting
+   * the drop, gating on auth). When set, the component neither builds nor
+   * redirects. The static drop path is unaffected either way.
    */
   onBuildRequired?: (info: BuildDetection) => void;
   /** Called once the deploy is live. */
   onDeploy?: (result: DeployedSite) => void;
+  /**
+   * Called once a build-required drop has been zipped, uploaded and enqueued —
+   * before the redirect to `buildDeployUrl`. The site exists at this point but
+   * won't serve content until the build finishes.
+   */
+  onBuildDeploy?: (build: DeployedBuild) => void;
   /**
    * Called when a deploy fails, with a humanized `message` (ready to show a
    * user — the same copy the built-in overlay uses) and the raw `reason`. Pair
@@ -76,10 +152,14 @@ interface Props {
    * Emitted events (all include `dropzone_id` when `analyticsId` is set):
    * - `dropzone_files_dropped`  — files dropped via drag  ({ method: 'drag', file_count, file_types })
    * - `dropzone_browse_opened`  — file picker opened       ({ method: 'keyboard' | 'click' })
-   * - `dropzone_build_required` — drop needs a build; handed off to signup ({ method, reason, file_count, file_types })
-   * - `dropzone_deploy_succeeded` — deploy went live       ({ method, site_name, file_count, file_types })
-   * - `dropzone_deploy_failed`  — deploy errored out       ({ method, reason, file_count?, file_types })
+   * - `dropzone_build_required` — drop needs a build (built here, or handed off) ({ method, reason, file_count, file_types })
+   * - `dropzone_deploy_succeeded` — static deploy went live ({ method, site_name, file_count, authenticated, auth_fallback?, file_types })
+   * - `dropzone_build_deploy_succeeded` — build enqueued for a logged-in visitor ({ method, reason, site_name, file_count, framework?, file_types })
+   * - `dropzone_deploy_failed`  — deploy or build errored out ({ method, reason, file_count?, file_types })
    *
+   * `authenticated` says whether the deploy landed in the visitor's account;
+   * `auth_fallback: true` is sent only when an authenticated attempt bounced
+   * (stale auth hint) and the drop completed anonymously — omitted otherwise.
    * `file_types` is the sorted, de-duplicated list of MIME types in the
    * selection, with `application/octet-stream` standing in wherever the browser
    * reports none (a dragged folder, an `.exe`). It is omitted when the browser
@@ -102,9 +182,18 @@ export default function DropZone({
   apiBase,
   client,
   claimUrl = defaultClaimUrl,
+  siteDashboardUrl = defaultSiteDashboardUrl,
   buildSignupUrl = defaultBuildSignupUrl,
+  getUploadToken,
+  buildClient,
+  authenticatedDropClient,
+  proxyBase,
+  accountSlug,
+  buildDeployUrl = defaultBuildDeployUrl,
+  waitForBuild,
   onBuildRequired,
   onDeploy,
+  onBuildDeploy,
   onError,
   showStatus = true,
   onTrack,
@@ -120,9 +209,18 @@ export default function DropZone({
     apiBase,
     client,
     claimUrl,
+    siteDashboardUrl,
     buildSignupUrl,
+    getUploadToken,
+    buildClient,
+    authenticatedDropClient,
+    proxyBase,
+    accountSlug,
+    buildDeployUrl,
+    waitForBuild,
     onBuildRequired,
     onDeploy,
+    onBuildDeploy,
     onError,
     track,
   });
@@ -267,20 +365,25 @@ function StatusView({
 
     case 'reading':
       return <Spinner label="Reading files…" />;
+    case 'zipping':
+      return <Spinner label="Packaging your project…" />;
     case 'creating':
       return <Spinner label="Creating deploy…" />;
     case 'processing':
       return <Spinner label="Processing — almost live…" />;
+    case 'building':
+      return <Spinner label="Building your project…" />;
     case 'redirecting':
-      return (
-        <Spinner
-          label={
-            status.target === 'signup'
-              ? 'This project needs a build — taking you to Netlify…'
-              : 'Site’s live — taking you to claim it…'
-          }
-        />
-      );
+      switch (status.target) {
+        case 'signup':
+          return <Spinner label="This project needs a build — taking you to Netlify…" />;
+        case 'build':
+          return <Spinner label="Build started — taking you to your new project…" />;
+        case 'claim':
+          return <Spinner label="Site’s live — taking you to claim it…" />;
+        case 'dashboard':
+          return <Spinner label="Site’s live — taking you to your new project…" />;
+      }
 
     case 'uploading': {
       const pct = status.total ? Math.round((status.uploaded / status.total) * 100) : 0;