@teleporthq/teleport-shared 0.43.71 → 0.43.75

package/__tests__/_fixtures/rich-text/help-keyboard-shortcuts.html

@@ -0,0 +1,417 @@
+<p>The TeleportHQ editor has keyboard shortcuts for editing, selecting, adding elements, zooming and opening panels. On Windows, use Ctrl and Alt; on a Mac, use Cmd (⌘) and Option (⌥). To see a shortcut sheet inside the editor, press Ctrl+Shift+/ (Cmd+Shift+/ on a Mac), or open <strong>Project Menu → Help → Keyboard Shortcuts</strong>.</p>
+<h2>How TeleportHQ shortcuts work</h2>
+<ul>
+<li><strong>Focus matters.</strong> Most shortcuts work when the canvas or the layers tree is active. Click an empty part of the canvas first. While you're typing in a text element or a settings field, the keys type text instead.</li>
+<li><strong>Mac and Windows.</strong> Every &quot;Ctrl&quot; shortcut below uses Cmd on a Mac, and every &quot;Alt&quot; uses Option.</li>
+<li><strong>The in-app sheet.</strong> The keyboard icon at the bottom of the left sidebar also opens the <strong>Keyboard Shortcuts</strong> sheet, with tabs <strong>Control</strong>, <strong>View</strong>, <strong>Elements</strong> and <strong>Others</strong>. This article lists the shortcuts that work in the editor today, including some that aren't on the sheet.</li>
+<li><strong>No save shortcut needed.</strong> TeleportHQ saves your work automatically, so Ctrl+S does nothing.</li>
+</ul>
+<h2>Editing</h2>
+<table>
+<thead>
+<tr>
+<th>Action</th>
+<th>Windows</th>
+<th>Mac</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Copy</td>
+<td>Ctrl+C</td>
+<td>⌘C</td>
+</tr>
+<tr>
+<td>Cut</td>
+<td>Ctrl+X</td>
+<td>⌘X</td>
+</tr>
+<tr>
+<td>Paste</td>
+<td>Ctrl+V</td>
+<td>⌘V</td>
+</tr>
+<tr>
+<td>Paste style (copy the look of the copied element)</td>
+<td>Ctrl+Alt+V</td>
+<td>⌘⌥V</td>
+</tr>
+<tr>
+<td>Duplicate</td>
+<td>Ctrl+D</td>
+<td>⌘D</td>
+</tr>
+<tr>
+<td>Group selected elements into a container</td>
+<td>Ctrl+G</td>
+<td>⌘G</td>
+</tr>
+<tr>
+<td>Ungroup</td>
+<td>Ctrl+Shift+G</td>
+<td>⌘⇧G</td>
+</tr>
+<tr>
+<td>Delete</td>
+<td>Delete or Backspace</td>
+<td>⌫</td>
+</tr>
+<tr>
+<td>Add or edit a link</td>
+<td>Ctrl+K</td>
+<td>⌘K</td>
+</tr>
+<tr>
+<td>Start editing the selected element (for example, its text)</td>
+<td>E</td>
+<td>E</td>
+</tr>
+<tr>
+<td>Move the element before or after its neighbor</td>
+<td>Arrow keys</td>
+<td>Arrow keys</td>
+</tr>
+</tbody>
+</table>
+<p>Arrow keys move the element left or right in a row, and up or down in a column. See <a href="copy-and-paste-elements.md">How to copy, paste and duplicate elements</a>.</p>
+<h2>Text</h2>
+<p>These work while you're editing text on the canvas:</p>
+<table>
+<thead>
+<tr>
+<th>Action</th>
+<th>Windows</th>
+<th>Mac</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Bold</td>
+<td>Ctrl+B</td>
+<td>⌘B</td>
+</tr>
+<tr>
+<td>Italic</td>
+<td>Ctrl+I</td>
+<td>⌘I</td>
+</tr>
+<tr>
+<td>Underline</td>
+<td>Ctrl+U</td>
+<td>⌘U</td>
+</tr>
+</tbody>
+</table>
+<h2>Selecting</h2>
+<table>
+<thead>
+<tr>
+<th>Action</th>
+<th>Windows</th>
+<th>Mac</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Select the parent element</td>
+<td>Esc</td>
+<td>Esc</td>
+</tr>
+<tr>
+<td>Select the first element inside (or start editing)</td>
+<td>Enter</td>
+<td>Return</td>
+</tr>
+<tr>
+<td>Select the next element at the same level</td>
+<td>Tab</td>
+<td>Tab</td>
+</tr>
+<tr>
+<td>Select the previous element at the same level</td>
+<td>Shift+Tab</td>
+<td>⇧Tab</td>
+</tr>
+<tr>
+<td>Select all elements at the same level</td>
+<td>Ctrl+A</td>
+<td>⌘A</td>
+</tr>
+<tr>
+<td>Add or remove an element from the selection</td>
+<td>Ctrl+click</td>
+<td>⌘-click</td>
+</tr>
+<tr>
+<td>Select a range of elements next to each other</td>
+<td>Shift+click</td>
+<td>⇧-click</td>
+</tr>
+<tr>
+<td>Open the next page (or component)</td>
+<td>Ctrl+↓</td>
+<td>⌘↓</td>
+</tr>
+<tr>
+<td>Open the previous page (or component)</td>
+<td>Ctrl+↑</td>
+<td>⌘↑</td>
+</tr>
+</tbody>
+</table>
+<p>Esc also cancels a drag in progress. See <a href="../elements/select-elements.md">How to select one or several elements</a>.</p>
+<h2>History</h2>
+<table>
+<thead>
+<tr>
+<th>Action</th>
+<th>Windows</th>
+<th>Mac</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Undo</td>
+<td>Ctrl+Z</td>
+<td>⌘Z</td>
+</tr>
+<tr>
+<td>Redo</td>
+<td>Ctrl+Shift+Z</td>
+<td>⌘⇧Z</td>
+</tr>
+</tbody>
+</table>
+<p>See <a href="undo-and-redo.md">How to undo and redo changes</a>.</p>
+<h2>Adding elements</h2>
+<p>Select a container on the canvas, then press a letter. The element is added inside the selected element. These keys don't work inside a component copy (instance) on a page.</p>
+<table>
+<thead>
+<tr>
+<th>Key</th>
+<th>Adds</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>R</td>
+<td>Row</td>
+</tr>
+<tr>
+<td>C</td>
+<td>Column</td>
+</tr>
+<tr>
+<td>T</td>
+<td>Text</td>
+</tr>
+<tr>
+<td>H</td>
+<td>Heading</td>
+</tr>
+<tr>
+<td>L or K</td>
+<td>Link</td>
+</tr>
+<tr>
+<td>B</td>
+<td>Button</td>
+</tr>
+<tr>
+<td>I</td>
+<td>Image</td>
+</tr>
+<tr>
+<td>V</td>
+<td>Video</td>
+</tr>
+<tr>
+<td>D</td>
+<td>Date</td>
+</tr>
+<tr>
+<td>S</td>
+<td>Slot (only while editing a component)</td>
+</tr>
+</tbody>
+</table>
+<h2>Zoom and view</h2>
+<table>
+<thead>
+<tr>
+<th>Action</th>
+<th>Windows</th>
+<th>Mac</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Zoom in</td>
+<td>Ctrl + <code>+</code></td>
+<td>⌘ + <code>+</code></td>
+</tr>
+<tr>
+<td>Zoom out</td>
+<td>Ctrl + <code>−</code></td>
+<td>⌘ + <code>−</code></td>
+</tr>
+<tr>
+<td>Zoom to 100%</td>
+<td>Ctrl+0</td>
+<td>⌘0</td>
+</tr>
+<tr>
+<td>Zoom smoothly</td>
+<td>Ctrl + scroll</td>
+<td>Ctrl + scroll, or pinch</td>
+</tr>
+<tr>
+<td>Move around the canvas</td>
+<td>Hold Space and drag</td>
+<td>Hold Space and drag</td>
+</tr>
+<tr>
+<td>Scroll sideways</td>
+<td>Shift + scroll</td>
+<td>⇧ + scroll</td>
+</tr>
+<tr>
+<td>Show or hide margin and padding highlights</td>
+<td>Ctrl+Shift+H</td>
+<td>⌘⇧H</td>
+</tr>
+<tr>
+<td>Turn Grayscale Structure Mode on or off</td>
+<td>Ctrl+Shift+S</td>
+<td>⌘⇧S</td>
+</tr>
+<tr>
+<td>Switch the right panel between <strong>Visual</strong> and <strong>Advanced</strong></td>
+<td>Ctrl+Shift+I</td>
+<td>⌘⇧I</td>
+</tr>
+</tbody>
+</table>
+<p>See <a href="zoom-and-move-around-the-canvas.md">How to zoom and move around the canvas</a> and <a href="grayscale-structure-mode.md">How to see your page structure</a>.</p>
+<h2>Panels</h2>
+<table>
+<thead>
+<tr>
+<th>Action</th>
+<th>Windows</th>
+<th>Mac</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Open or close <strong>Elements</strong></td>
+<td>Ctrl+1</td>
+<td>⌘1</td>
+</tr>
+<tr>
+<td>Open or close <strong>Pages, Components &amp; Treeview</strong></td>
+<td>Ctrl+2</td>
+<td>⌘2</td>
+</tr>
+<tr>
+<td>Open or close <strong>Assets Manager</strong></td>
+<td>Ctrl+4</td>
+<td>⌘4</td>
+</tr>
+<tr>
+<td>Open or close <strong>Forms</strong></td>
+<td>Ctrl+5</td>
+<td>⌘5</td>
+</tr>
+<tr>
+<td>Move a focused sidebar icon up or down</td>
+<td>Alt+↑ / Alt+↓</td>
+<td>⌥↑ / ⌥↓</td>
+</tr>
+</tbody>
+</table>
+<h2>Pages and components list</h2>
+<p>These work when a page or component is selected in the <strong>Pages, Components &amp; Treeview</strong> panel:</p>
+<table>
+<thead>
+<tr>
+<th>Action</th>
+<th>Windows</th>
+<th>Mac</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Rename</td>
+<td>F2</td>
+<td>F2</td>
+</tr>
+<tr>
+<td>Duplicate</td>
+<td>Ctrl+D</td>
+<td>⌘D</td>
+</tr>
+<tr>
+<td>Delete</td>
+<td>Delete or Backspace</td>
+<td>⌫</td>
+</tr>
+<tr>
+<td>Copy a component (for example, to paste into another project)</td>
+<td>Ctrl+C</td>
+<td>⌘C</td>
+</tr>
+<tr>
+<td>Paste copied content into the selected page or component</td>
+<td>Ctrl+V</td>
+<td>⌘V</td>
+</tr>
+<tr>
+<td>Create a new component</td>
+<td>Ctrl+Alt+K</td>
+<td>⌘⌥K</td>
+</tr>
+</tbody>
+</table>
+<h2>Other</h2>
+<table>
+<thead>
+<tr>
+<th>Action</th>
+<th>Windows</th>
+<th>Mac</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Open the command palette</td>
+<td>Ctrl+P</td>
+<td>⌘P</td>
+</tr>
+<tr>
+<td>Open the command palette with commands</td>
+<td>Ctrl+Shift+P (Firefox: Ctrl+Alt+P)</td>
+<td>⌘⇧P (Firefox: ⌘⌥P)</td>
+</tr>
+<tr>
+<td>Open the <strong>Keyboard Shortcuts</strong> sheet</td>
+<td>Ctrl+Shift+/</td>
+<td>⌘⇧/</td>
+</tr>
+<tr>
+<td>Duplicate while dragging</td>
+<td>Hold Alt while you drop</td>
+<td>Hold ⌥ while you drop</td>
+</tr>
+</tbody>
+</table>
+<p>See <a href="use-the-command-palette.md">How to use the command palette</a>.</p>
+<h2>Related articles</h2>
+<ul>
+<li><a href="use-the-command-palette.md">How to use the command palette</a></li>
+<li><a href="undo-and-redo.md">How to undo and redo changes</a></li>
+<li><a href="copy-and-paste-elements.md">How to copy, paste and duplicate elements</a></li>
+<li><a href="zoom-and-move-around-the-canvas.md">How to zoom and move around the canvas</a></li>
+<li><a href="../elements/select-elements.md">How to select one or several elements</a></li>
+<li><a href="../pages/use-the-layers-panel.md">How to use the layers tree to find and select elements</a></li>
+</ul>

package/__tests__/_fixtures/rich-text/help-prompting-tips.html

@@ -0,0 +1,82 @@
+<p>TeleportHQ's AI works best when you guide it like a design partner: describe your business in detail, name the exact colors, fonts and layout you want, and change one section at a time. Select the element you want changed before you ask, start a new AI Assistant chat for each task, and save rules you always want followed in <strong>AI Settings</strong>.</p>
+<h2>1. Start with a detailed business description</h2>
+<p>The business description you give the TeleportHQ AI Website Builder shapes everything: the page plan, the design direction, the text and the images. Include:</p>
+<ul>
+<li><strong>What you do and where</strong>: &quot;An organic coffee shop in Cluj.&quot;</li>
+<li><strong>Who your customers are</strong>: &quot;Students and remote workers who stay for hours.&quot;</li>
+<li><strong>How the site should feel</strong>: &quot;Warm, cozy, handmade, not corporate.&quot;</li>
+<li><strong>What visitors should do</strong>: &quot;See the menu, find opening hours, pre-order online.&quot;</li>
+<li><strong>Style details you already know</strong>: brand colors, fonts, how much animation, rounded or sharp corners.</li>
+</ul>
+<p>A good example: <code>We're an organic coffee shop in Cluj for students and remote workers. The site should feel warm and handmade. Visitors should see our menu, opening hours and location, and pre-order drinks. Use our brand colors #6b3e26 and #f2e3c6, rounded buttons and soft shadows.</code></p>
+<p>Short on words? Use <strong>Generate from URL</strong> with your current site (or a site you like) or <strong>Upload Documents</strong> with a brochure, then edit the result. See <a href="describe-your-business-from-a-url-or-document.md">How to describe your business from a website link or a document</a>.</p>
+<h2>2. Get the design system right before the build</h2>
+<p>The colors, fonts and spacing chosen during setup become your project's design system. Every page and section the AI makes later reuses it, so fix it early:</p>
+<ul>
+<li>On <strong>Colors &amp; Fonts</strong>, click <strong>Regenerate</strong> and give exact values: <code>Use #8b45f2, #ffc928 and #1fcc76</code> or <code>Headings in Playfair Display, body text in Inter</code>.</li>
+<li>Mention spacing, corner radius, shadows and animation in your description. For example: <code>Tight layout spacing, 16px rounded buttons, subtle animations.</code></li>
+</ul>
+<h2>3. Save standing instructions in AI Settings</h2>
+<p>Rules you'd otherwise repeat in every prompt belong in <strong>AI Settings → Custom Requirements</strong>. For example: <code>Always use British English. Keep headings under 8 words. Never use stock photos of people.</code> They apply to every future AI run in the project. See <a href="../ai-tools/ai-settings.md">How to give the AI your business details and instructions (AI Settings)</a>.</p>
+<h2>4. Structure your prompts: context, content, style</h2>
+<p>A strong prompt says what to make, for whom, what goes in it and how it should look:</p>
+<blockquote>
+<p>Create a <strong>[section type]</strong> for a <strong>[business]</strong> with <strong>[specific elements]</strong> that looks <strong>[visual style]</strong>.</p>
+</blockquote>
+<table>
+<thead>
+<tr>
+<th>Weak prompt</th>
+<th>Strong prompt</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>&quot;Make a hero section.&quot;</td>
+<td>&quot;Create a hero section for a SaaS startup with a dark background, a large bold headline on the left, a signup form, and an illustration on the right.&quot;</td>
+</tr>
+<tr>
+<td>&quot;Change the text.&quot;</td>
+<td>&quot;Change the headline to 'Build Faster with AI' and make it larger and bold.&quot;</td>
+</tr>
+<tr>
+<td>&quot;Make it look better.&quot;</td>
+<td>&quot;Add more space between the cards, round their corners and add a soft shadow on hover.&quot;</td>
+</tr>
+</tbody>
+</table>
+<p>Words that help the AI understand what you mean:</p>
+<ul>
+<li><strong>Layout</strong>: 3-column grid, split screen, centered content, sticky header.</li>
+<li><strong>Style</strong>: minimalist, corporate, playful, dark mode, glassmorphism.</li>
+<li><strong>Elements</strong>: call-to-action button, accordion, testimonial slider, pricing cards, social icons.</li>
+</ul>
+<h2>5. Work one section at a time</h2>
+<p>Instead of asking for a whole complex page at once, build and refine it section by section: the hero, then the features, then the testimonials. You keep more control, and each result is easier to check. Create the basic structure first, then ask for details, for example: generate a pricing table, then &quot;make the middle card highlighted&quot;.</p>
+<h2>6. Point at what you want changed</h2>
+<ul>
+<li><strong>Select the element first.</strong> In the AI Assistant, the selected element is added to the chat as context, so &quot;make this rounder&quot; is clear. See <a href="../ai-assistant/give-the-ai-assistant-context.md">How to point the AI Assistant at a specific element or page</a>.</li>
+<li><strong>Use the quick prompt for small changes.</strong> Select one element and type in <strong>Quick AI prompt...</strong> above it. Use <strong>Fast</strong> mode for small text, style and layout changes, and <strong>Complex</strong> mode for multi-step changes. See <a href="../ai-tools/quick-ai-prompt.md">How to change one element with a quick AI prompt</a>.</li>
+<li><strong>Show a picture.</strong> Attach a screenshot to the AI Assistant and ask it to recreate that layout with your design system. See <a href="../ai-assistant/create-a-layout-from-a-screenshot.md">How to create a layout from a screenshot or image</a>.</li>
+</ul>
+<h2>7. Start a new chat for each task</h2>
+<p>In the AI Assistant, click <strong>New</strong> to start a fresh chat whenever you switch tasks, for example one chat for the homepage redesign and another for the contact form. The AI then doesn't mix up instructions, and each message costs fewer tokens, because long chats use more tokens per message. See <a href="../ai-assistant/edit-your-site-with-the-ai-assistant.md">How to edit your website by chatting with the AI Assistant</a>.</p>
+<h2>8. Use the right tool for the job</h2>
+<p>TeleportHQ has a dedicated AI tool for many common jobs. They're often faster than a chat:</p>
+<ul>
+<li>New page: <a href="../ai-tools/generate-a-page-with-ai.md">How to generate a new page with AI</a></li>
+<li>New section: <a href="../ai-tools/generate-a-section-with-ai.md">How to generate a new section with AI</a></li>
+<li>One text: <a href="../ai-tools/rewrite-text-with-ai.md">How to rewrite text with AI</a></li>
+<li>All images or texts on a page, or a translation: <a href="../ai-tools/replace-images-and-text-in-bulk-with-ai.md">How to replace all images or texts on a page with AI</a></li>
+<li>Original images: <a href="../ai-tools/generate-images-with-ai.md">How to generate images with AI</a></li>
+</ul>
+<p>Some changes don't need AI at all. Editing the design system by hand changes every page at once and uses no tokens. See <a href="../ai-tools/edit-an-ai-site-without-ai.md">How to edit an AI-generated website by hand</a>.</p>
+<h2>Related articles</h2>
+<ul>
+<li><a href="generate-a-website-with-ai.md">How to generate a website with AI</a></li>
+<li><a href="../ai-assistant/edit-your-site-with-the-ai-assistant.md">How to edit your website by chatting with the AI Assistant</a></li>
+<li><a href="../ai-assistant/give-the-ai-assistant-context.md">How to point the AI Assistant at a specific element or page</a></li>
+<li><a href="../ai-tools/ai-settings.md">How to give the AI your business details and instructions (AI Settings)</a></li>
+<li><a href="../ai-tools/quick-ai-prompt.md">How to change one element with a quick AI prompt</a></li>
+<li><a href="../ai-assistant/create-a-layout-from-a-screenshot.md">How to create a layout from a screenshot or image</a></li>
+</ul>

package/__tests__/_fixtures/rich-text/help-sitemap-robots-and-llms-txt.html

@@ -0,0 +1,82 @@
+<p>TeleportHQ creates three files for search engines and AI tools each time you publish: <strong>sitemap.xml</strong> (a list of your pages), <strong>robots.txt</strong> (rules for search engine crawlers) and <strong>llms.txt</strong> (a summary of your site for AI assistants). You don't need to upload anything. To change them, open <strong>Global SEO Settings</strong>, edit the settings, click <strong>Save Changes</strong> and publish.</p>
+<h2>Before you start</h2>
+<ul>
+<li>
+<p>The sitemap and robots.txt are available on every TeleportHQ plan.</p>
+</li>
+<li>
+<p><strong>LLMS.txt</strong> needs a trial or a paid plan. On other plans it shows a <strong>PRO</strong> label and no llms.txt file is published.</p>
+</li>
+<li>
+<p>The files only exist on your published site, at <code>yoursite.com/sitemap.xml</code>, <code>yoursite.com/robots.txt</code> and <code>yoursite.com/llms.txt</code>.</p>
+</li>
+</ul>
+<h2>Open the settings</h2>
+<ol>
+<li>In the <strong>left sidebar</strong>, click the layers icon (tooltip <strong>Pages, Components &amp; Treeview</strong>).</li>
+<li>In the <strong>Pages</strong> list, right-click any page. You can also hover over it and click <strong>…</strong>.</li>
+<li>Click <strong>Global SEO Settings</strong>. The <strong>Global SEO Settings</strong> window opens.</li>
+</ol>
+<p>You'll find the same settings in <strong>Project Settings → SEO</strong>.</p>
+<p><img src="screenshots/sitemap-robots-and-llms-txt-1.png" alt="The Global SEO Settings window showing the Automatically Generate Sitemap switch, the Robots.txt editor and the LLMS.txt Auto, Edit and Off options"></p>
+<h2>Sitemap</h2>
+<p>The TeleportHQ sitemap lists every page search engines should find, so they discover new pages faster.</p>
+<ol>
+<li>Check that <strong>Automatically Generate Sitemap</strong> is switched on. It's on by default.</li>
+<li>Click <strong>Save Changes</strong>.</li>
+<li>Publish your site.</li>
+</ol>
+<p>The sitemap lists your pages and one address per item on details pages, for example one per product or blog post. It leaves out pages with <strong>No Index</strong> turned on, your 404 page and admin panel pages. On a multilingual site, it lists each language version.</p>
+<h2>Robots.txt</h2>
+<p>The TeleportHQ robots.txt tells search engines which parts of your site they may visit. The default allows everything and points to your sitemap:</p>
+<pre><code>User-agent: Googlebot
+Disallow: /nogooglebot/
+
+User-agent: *
+Allow: /
+
+Sitemap: {{domain_url}}/sitemap.xml
+</code></pre>
+<p>When you publish, <code>{{domain_url}}</code> is replaced with your site's address.</p>
+<ol>
+<li>Click inside the <strong>Robots.txt</strong> editor.</li>
+<li>Edit the rules. For example, to keep crawlers out of a <code>/drafts</code> folder, add <code>Disallow: /drafts/</code> under <code>User-agent: *</code>.</li>
+<li>Click <strong>Save Changes</strong>.</li>
+<li>Publish your site.</li>
+</ol>
+<blockquote>
+<p><strong>Important:</strong> A wrong rule, like <code>Disallow: /</code> under <code>User-agent: *</code>, hides your whole site from Google. To hide single pages, use <strong>No Index</strong> instead. See <a href="noindex-canonical-and-redirects.md">How to hide a page from Google, set a canonical URL or redirect a page</a>.</p>
+</blockquote>
+<h2>LLMS.txt</h2>
+<p>The TeleportHQ llms.txt file helps AI assistants like ChatGPT and Claude understand what your site offers. Pick one of three modes next to <strong>LLMS.txt</strong>:</p>
+<ul>
+<li><strong>Auto</strong> (default): TeleportHQ writes the file from your pages and updates it on every publish. You can read it, but not edit it.</li>
+<li><strong>Edit</strong>: you write the file yourself. Click <strong>Generate</strong> to start from TeleportHQ's version, then change the text.</li>
+<li><strong>Off</strong>: no llms.txt file is published.</li>
+</ul>
+<p>Then click <strong>Save Changes</strong> and publish.</p>
+<h2>Check that it worked</h2>
+<p>After publishing, open your live site and add <code>/sitemap.xml</code>, <code>/robots.txt</code> or <code>/llms.txt</code> to the address, for example <code>https://sweet-crumbs.teleporthq.app/robots.txt</code>. You see the file's content. To help Google find your pages sooner, submit the sitemap address in Google Search Console.</p>
+<h2>Troubleshooting</h2>
+<p><strong>My changes don't show in the file</strong>
+Check that you clicked <strong>Save Changes</strong> and then published. The files are only rebuilt when you publish.</p>
+<p><strong>The file shows old content I uploaded before</strong>
+If your project has a file named <code>robots.txt</code>, <code>sitemap.xml</code> or <code>llms.txt</code> in its uploaded files, TeleportHQ publishes that file and doesn't create its own. Delete the uploaded file from the Assets Manager, then publish. See <a href="../../media/rename-or-delete-assets.md">How to rename or delete files</a>.</p>
+<p><strong>A page is missing from the sitemap</strong>
+Check whether <strong>No Index</strong> is on for that page in <strong>Page SEO Settings</strong>. Pages with &quot;404&quot; or &quot;not-found&quot; in their name are also left out.</p>
+<p><strong>LLMS.txt shows a PRO label</strong>
+llms.txt needs a trial or paid plan. See <a href="../../plans-and-billing/plans/plans-compared.md">What's the difference between Trial, Pro and Premium?</a>.</p>
+<h2>Good to know</h2>
+<ul>
+<li><strong>Turning off the sitemap</strong> stops TeleportHQ from publishing sitemap.xml. The robots.txt default still points to it, so update the <code>Sitemap:</code> line too.</li>
+<li><strong>The robots.txt editor can't be empty.</strong> If you delete everything, the default rules come back.</li>
+<li><strong>Site Health audits check these files.</strong> A missing robots.txt or sitemap.xml shows up as an issue. See <a href="run-a-site-health-audit.md">How to check your site's SEO health</a>.</li>
+</ul>
+<h2>Related articles</h2>
+<ul>
+<li><a href="seo-explained.md">How SEO works in TeleportHQ</a></li>
+<li><a href="noindex-canonical-and-redirects.md">How to hide a page from Google, set a canonical URL or redirect a page</a></li>
+<li><a href="connect-google-search-console.md">How to connect Google Search Console and see your keywords</a></li>
+<li><a href="run-a-site-health-audit.md">How to check your site's SEO health</a></li>
+<li><a href="../../languages/multilingual-urls-and-seo.md">How URLs and SEO work on a multilingual site</a></li>
+</ul>

package/__tests__/_fixtures/rich-text/help-use-a-csv-file-or-static-data.html

@@ -0,0 +1,61 @@
+<p>TeleportHQ has two data sources for fixed lists that don't come from a database: <strong>CSV File</strong>, where you upload a spreadsheet export once, and <strong>JavaScript</strong>, where you type the list yourself as an array of items. Both are added from <strong>Data Sources → Add Data Source</strong>, and both can fill lists, tables and details pages on your site.</p>
+<h2>Before you start</h2>
+<ul>
+<li><strong>Choose the right option.</strong> Use <strong>CSV File</strong> for a list exported from another tool, like a product catalog. Use <strong>JavaScript</strong> for a short list you type, like 5 team members.</li>
+<li><strong>Neither updates by itself.</strong> To change the data later, upload a new file or edit the code. For data that changes often, use a <a href="connect-google-sheets.md">Google Sheet</a> or the <a href="../teleporthq-database/set-up-the-teleporthq-database.md">TeleportHQ database</a>.</li>
+</ul>
+<h2>Upload a CSV file to TeleportHQ</h2>
+<p>To use a CSV file as a TeleportHQ data source:</p>
+<ol>
+<li>In the <strong>left sidebar</strong>, click <strong>Data Sources Integration</strong> (the database icon).</li>
+<li>In the <strong>Data Sources</strong> panel, click <strong>+</strong> (tooltip <strong>Add Data Source</strong>).</li>
+<li>Click the <strong>CSV File</strong> card.</li>
+<li>In <strong>Data Source Name</strong>, type a name, for example <code>Product catalog</code>.</li>
+<li>Under <strong>Upload CSV File</strong>, click <strong>Click to select a CSV file</strong> and choose your <code>.csv</code> file.</li>
+<li>Click <strong>Extract data from CSV</strong>. The <strong>View Data</strong> section shows the first rows.</li>
+<li>Check that the columns look right.</li>
+<li>Click <strong>Save Data Source</strong>. If this is the project's first data source, a window titled <strong>IMPORTANT</strong> appears; click <strong>I understand</strong>.</li>
+</ol>
+<p><img src="screenshots/use-a-csv-file-or-static-data-1.png" alt="The CSV File setup form in TeleportHQ with the Upload CSV File area and the View Data preview"></p>
+<p>If the first row is read as an item instead of column names, turn off <strong>Automatically detect header row</strong>, turn on <strong>First row is header row</strong>, and click <strong>Extract data from CSV</strong> again.</p>
+<h2>Type static data with the JavaScript data source</h2>
+<p>To type a fixed list as a TeleportHQ data source:</p>
+<ol>
+<li>In the <strong>Data Sources</strong> panel, click <strong>+</strong> (tooltip <strong>Add Data Source</strong>).</li>
+<li>Click the <strong>JavaScript</strong> card.</li>
+<li>In <strong>Data Source Name</strong>, type a name, for example <code>Team members</code>.</li>
+<li>In <strong>JavaScript Code</strong>, replace the example with your list. The code must be a valid JavaScript array: a pair of square brackets holding one <code>{ … }</code> block per item.</li>
+<li>Click <strong>Save Data Source</strong>.</li>
+</ol>
+<p>For example, a team list with three people:</p>
+<pre><code class="language-javascript">[
+  { id: 1, name: &quot;Ana Pop&quot;, role: &quot;Head baker&quot;, photo: &quot;https://example.com/ana.jpg&quot; },
+  { id: 2, name: &quot;Mihai Ionescu&quot;, role: &quot;Pastry chef&quot;, photo: &quot;https://example.com/mihai.jpg&quot; },
+  { id: 3, name: &quot;Ioana Radu&quot;, role: &quot;Front of house&quot;, photo: &quot;https://example.com/ioana.jpg&quot; }
+]
+</code></pre>
+<p>The <strong>Save Data Source</strong> button stays disabled while the code has errors. When you edit an existing JavaScript source, it also stays disabled until you change something.</p>
+<h2>Check that it worked</h2>
+<p>The new data source appears as a card in the <strong>Data Sources</strong> panel. Add an Array Mapper to a page and bind it to the source to see the items. See <a href="../dynamic-content/repeat-items-with-a-list.md">How to show a list of items</a>.</p>
+<h2>Troubleshooting</h2>
+<p><strong>&quot;Failed to parse CSV&quot;</strong>
+The file isn't a valid CSV. Export it again from your spreadsheet app as &quot;CSV (comma-separated values)&quot; and upload the new file.</p>
+<p><strong>&quot;Please load preview data before saving&quot;</strong>
+Click <strong>Extract data from CSV</strong> before <strong>Save Data Source</strong>.</p>
+<p><strong>Save Data Source is greyed out (JavaScript)</strong>
+The code has an error, such as a missing comma, bracket or quote. Fix the highlighted line. The whole code must be one array that starts with <code>[</code> and ends with <code>]</code>.</p>
+<h2>Good to know</h2>
+<ul>
+<li><strong>The CSV contents are saved inside your project.</strong> Changing the original file on your computer doesn't change the site. To update, open the data source, click <strong>Click to select a different file</strong>, extract and save again.</li>
+<li><strong>You can't edit CSV rows in TeleportHQ.</strong> To edit rows, sort them or add new ones in the editor, import the file into the TeleportHQ database instead: see <a href="../teleporthq-database/import-data-into-a-table.md">Import data from a spreadsheet file</a>.</li>
+<li><strong>The JavaScript source has no preview step.</strong> Check the result on the canvas after binding a list to it.</li>
+<li>Both sources can power details pages, one page per item. See <a href="../dynamic-content/create-a-details-page-for-each-item.md">Create a page for each item</a>.</li>
+</ul>
+<h2>Related articles</h2>
+<ul>
+<li><a href="what-are-data-sources.md">What are data sources, and which ones can I connect?</a></li>
+<li><a href="connect-google-sheets.md">How to use a Google Sheet as data</a></li>
+<li><a href="../teleporthq-database/import-data-into-a-table.md">How to import data from a spreadsheet file</a></li>
+<li><a href="../dynamic-content/repeat-items-with-a-list.md">How to show a list of items (List / Array Mapper)</a></li>
+<li><a href="../dynamic-content/create-a-details-page-for-each-item.md">How to create a page for each item (details pages)</a></li>
+</ul>