docs

Author: CamDavidsonPilon

src/components/CopyToClipboardButton.js

@@ -0,0 +1,51 @@
+import React from 'react';
+
+export default function CopyToClipboardButton({
+  content,
+  label = 'Copy',
+  copiedLabel = 'Copied!',
+  className = '',
+  style = {},
+}) {
+  const [copied, setCopied] = React.useState(false);
+
+  const handleCopyClick = async () => {
+    if (!content || typeof navigator === 'undefined' || !navigator.clipboard) {
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (error) {
+      console.error('Unable to copy content to clipboard', error);
+    }
+  };
+
+  const successStyles = copied
+    ? { backgroundColor: '#2c8b43', borderColor: '#2c8b43', color: '#ffffff' }
+    : {};
+
+  const buttonClassName = ['button button--sm', className]
+    .filter(Boolean)
+    .join(' ');
+
+  const baseStyle = {
+    backgroundColor: '#e3e4e6',
+    border: '1px solid #b7b9bd',
+    borderColor: '#b7b9bd',
+    color: '#1b1b1d',
+  };
+
+  return (
+    <button
+      type="button"
+      className={buttonClassName}
+      onClick={handleCopyClick}
+      style={{ ...baseStyle, ...style, ...successStyles }}
+    >
+      {copied ? copiedLabel : label}
+    </button>
+  );
+}

user-guide/01-getting-started/02-software-set-up.mdx

@@ -6,8 +6,7 @@ slug: /software-set-up
 sidebar_class_name: sidebar-item--updated
 ---
 
-import TOCInline from '@theme/TOCInline';
-import ButtonDownloadVersionedImage from '@site/src/components/ButtonDownloadVersionedImage';
+import CopyToClipboardButton from '@site/src/components/CopyToClipboardButton';
 
 
 ### Before you begin
@@ -34,7 +33,7 @@ We'll start with your blank microSD card.
     ![Click "App options"](/img/user-guide/01-getting-started/02-software-set-up/app_options.png)
 4.  Click **Edit** next to _Content Repository_.
     ![Click "Edit" to choose repository](/img/user-guide/01-getting-started/02-software-set-up/content_repo.png)
-5.  Choose **Use Custom URL**, and paste the value: `https://pioreactor.com/imager/os-list.json`
+5.  Choose **Use Custom URL**, and paste the value: `https://pioreactor.com/imager/os-list.json` <CopyToClipboardButton content="https://pioreactor.com/imager/os-list.json" label="Copy" style={{ marginLeft: '0.5rem' }} />
 
     ![Add our repo URL](/img/user-guide/01-getting-started/02-software-set-up/edit_repo.png)
 6.  Click **Apply & restart**.

user-guide/30-Advanced/07-remote-access/03-tailscale.md

@@ -4,6 +4,7 @@ slug: /tailscale-remote-access
 hide_table_of_contents: true
 ---
 
+import CopyToClipboardButton from '@site/src/components/CopyToClipboardButton';
 
 To access the UI remotely, you can join an authenticated VPN using Tailscale. This greatly improves security, but adds a bit of additional work for users.
 
@@ -15,7 +16,10 @@ Tailscale is a really cool service! You may find yourself using it for other pro
 1. Sign up for an account at [Tailscale](https://tailscale.com/). The free account is fine for now.
 2. Once signed up and logged in, visit the [Tailscale admin](https://login.tailscale.com/admin/machines).
 3. Install [Tailscale on your computer](https://tailscale.com/download).
-4. [SSH into your leader Pioreactor](/user-guide/accessing-raspberry-pi). Install Tailscale for Raspberry Pi with the following: `curl -fsSL https://tailscale.com/install.sh | sh`. Don't miss that you also need to run `sudo tailscale up`. _You don't need to install anything on the workers_.
+4. [SSH into your leader Pioreactor](/user-guide/accessing-raspberry-pi).
+   1. Install Tailscale for Raspberry Pi with the following: `curl -fsSL https://tailscale.com/install.sh | sh` <CopyToClipboardButton content="curl -fsSL https://tailscale.com/install.sh | sh" label="Copy" style={{ marginLeft: '0.5rem' }} />
+   2. Don't miss that you also need to run `sudo tailscale up` <CopyToClipboardButton content="sudo tailscale up" label="Copy" style={{ marginLeft: '0.5rem' }} />
+   3. _You don't need to install anything on the workers_.
 5. Back in your [Tailscale admin](https://login.tailscale.com/admin/machines), you should see two machines: your computer and the leader Pioreactor. Make note of the ipv4 address for the leader - we will use it below.
 6. You should still be able to access `http://pioreactor.local` without any problems.
 8. 1. In your **shared config.ini**, add your ipv4 address to the `[mqtt]` section: