feat: integration screen

features/integration.feature

@@ -0,0 +1,63 @@
+Feature: Integration screen
+
+  As a verified RenewCMS owner
+  I want /integration to show my site's base API URL and ready-to-use endpoint examples
+  So that I, or the developer who builds my public site, can wire it up without reading the
+    source
+
+  Background:
+    Given /integration is a verified route (meta.auth "verified") rendered as IntegrationPage
+      inside DashboardShell, per docs/design/routes.md
+    And the screen makes no /v1 calls; api: none (static)
+    And the PageHeader shows title "Connect your website", description "A guide for the developer
+      who builds your public site.", breadcrumb "Integration" (mobile title "Integration"), and no
+      actions
+    And an introductory paragraph reads "RenewCMS is headless: it stores and publishes your
+      articles but doesn't show them to visitors. Your website fetches published articles from the
+      two addresses below and displays them in its own design."
+    And a "Base URL" row shows window.location.origin in a monospace box, with a "Copy" button
+      (icon copy) beside it
+    And two EndpointCard entries follow, in this order:
+      | method | path             | description                                                        |
+      | GET    | /v1/article/     | Lists every online article.                                       |
+      | GET    | /v1/article/{id} | Returns one online article. Drafts and unknown ids both return 404. |
+    And each EndpointCard's fetch example uses the current origin as the base of its URL:
+      | path             | fetch example                                                                                                    |
+      | /v1/article/     | const res = await fetch('{origin}/v1/article/')\nconst articles = await res.json()                              |
+      | /v1/article/{id} | const res = await fetch('{origin}/v1/article/12')\nif (res.status === 404) return notFound()\nconst article = await res.json() |
+    And each EndpointCard has fetch, curl and Response tabs, with fetch active by default, and its
+      CodeBlock is labelled "JavaScript" with its own ghost "Copy" button
+    And the curl tab's content is a plain curl command built from the current origin (e.g.
+      "curl {origin}/v1/article/" and "curl {origin}/v1/article/12"), and the Response tab's
+      content is a JSON sample built from the real domain Article fields; neither tab is active by
+      default, and neither is visually checked, since the fetch tab is the one shown in the board
+    And three info notes follow the endpoint cards, in this order:
+      - "Anonymous callers only ever get online articles. Drafts stay private until you publish
+        them."
+      - "Images in body use paths like /static/uploadedImages/<uuid>.png. Prefix them with the
+        base URL before rendering."
+      - "Browsers can only call the API from origins listed in the server's CORS setting. Ask
+        whoever runs the server to add your site's address."
+
+  Scenario: Default — the page loads with the app's own origin
+    Given the app is served from origin "{origin}"
+    When the user navigates to /integration
+    Then the Base URL row shows exactly "{origin}"
+    And the Base URL "Copy" button reads "Copy", not "Copied"
+    And both EndpointCards' fetch examples use "{origin}" as the base of their URL
+
+  Scenario: Copied — the Base URL copy button
+    Given the user is on /integration, served from origin "{origin}"
+    When the user activates the Base URL row's "Copy" button
+    Then "{origin}" is written to the clipboard
+    And the button's icon changes to check and its text changes to "Copied"
+    And the change is announced to assistive technology
+    When 2 seconds elapse without a further click
+    Then the button reverts to icon copy and text "Copy"
+
+  Scenario: Each EndpointCard's own Copy button is independent of the Base URL's
+    Given the user is on /integration
+    When the user activates the "/v1/article/" EndpointCard's "JavaScript" code block's "Copy"
+      button
+    Then that card's own code is written to the clipboard, and only that button reads "Copied"
+    And the Base URL row's "Copy" button and the other EndpointCard's "Copy" button are unaffected