Skip to content

Add CopyButton Component #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
smashedr merged 3 commits into from
Sep 15, 2025
Merged

Add CopyButton Component #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e9e0ce9
Add CopyButton Component
smashedr Sep 15, 2025
234b912
Cleanup
smashedr Sep 15, 2025
be786eb
Add next and margin Options
smashedr Sep 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 88 additions & 0 deletions .vitepress/theme/components/CopyButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<script setup>
// noinspection NpmUsedModulesInstalled
import { ref } from 'vue'

const props = defineProps({
text: { type: String, default: null },
next: { type: Boolean, default: false },
all: { type: Boolean, default: false },
margin: { type: String, default: null },
})

const spanStyle = {}
if (props.margin) {
spanStyle.margin = props.margin
} else if (!props.next) {
spanStyle.marginLeft = '6px'
}
// console.log('spanStyle:', spanStyle)

const copied = ref(false)

const doCopy = (text) => {
// console.log(`CopyButton - text: "${text}"`)
if (!text) return console.warn('CopyButton - No Text')
navigator.clipboard.writeText(text)
copied.value = true
setTimeout(() => {
copied.value = false
}, 1000)
}

const copyText = (event) => {
const target = event.currentTarget
if (copied.value) return
if (props.text) {
doCopy(props.text)
} else {
let text
if (props.all) {
text = target.parentElement?.textContent?.trim()
} else {
if (props.next) {
text = target.nextElementSibling.textContent
} else {
text = target.parentElement?.firstChild?.textContent
}
text = text?.replaceAll(/[\u200B-\u200D\uFEFF]/g, '').trim()
}
doCopy(text)
}
}
</script>

<template>
<span @click="copyText" :style="spanStyle" class="copy-button">
<svg v-if="!copied" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="lucide-copy">
<rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
</svg>
<svg v-if="copied" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="lucide-check">
<path d="M20 6 9 17l-5-5" />
</svg>
</span>
</template>

<style>
.copy-button {
display: inline-block;
transform: translateY(-2px);
vertical-align: middle;
}
.copy-button:hover {
color: var(--vp-c-text-2);
cursor: pointer;
}
.copy-button svg {
width: 1em;
height: 1em;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.copy-button .lucide-check {
color: var(--vp-c-success-1);
}
</style>
6 changes: 4 additions & 2 deletions .vitepress/theme/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import DefaultTheme, { VPBadge } from 'vitepress/theme'
import './custom.css'
import 'virtual:group-icons.css'

import YouTubeEmbed from './components/YouTubeEmbed.vue'
import CopyButton from './components/CopyButton.vue'
import StackTable from './components/StackTable.vue'
import YouTubeEmbed from './components/YouTubeEmbed.vue'

import Contributors from '@cssnr/vitepress-plugin-contributors'
import '@cssnr/vitepress-plugin-contributors/style.css'
Expand All @@ -15,8 +16,9 @@ export default {

enhanceApp({ app }) {
app.component('Badge', VPBadge)
app.component('YouTubeEmbed', YouTubeEmbed)
app.component('CopyButton', CopyButton)
app.component('StackTable', StackTable)
app.component('YouTubeEmbed', YouTubeEmbed)

app.component('Contributors', Contributors)
app.config.globalProperties.$contributors = contributors
Expand Down
87 changes: 47 additions & 40 deletions docs/docs/inputs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,41 @@

💡 Click on the **Input Name** for more [Details](#details).

| Input&nbsp;Name | Default&nbsp;Value | Short&nbsp;Description&nbsp;of&nbsp;the&nbsp;Input&nbsp;Value |
| :------------------------------------ | :---------------------------------- | :------------------------------------------------------------ |
| [name](#name) **\*** | - | Docker Stack/Project Name |
| [file](#file) | `docker-compose.yaml` | Docker Stack/Compose File(s) |
| [mode](#mode) **¹** | `swarm` | Deploy Mode [`swarm`, `compose`] |
| [args](#args) **¹** | `--remove-orphans --force-recreate` | Additional **Compose** Arguments |
| [host](#host) **\*** | - | Remote Docker Hostname or IP |
| [port](#port) | `22` | Remote Docker Port |
| [user](#user) **\*** | - | Remote Docker Username |
| [pass](#pass) **\*** | - | Remote Docker Password |
| [ssh_key](#ssh_key) **\*** | - | Remote SSH Key File |
| [disable_keyscan](#disable_keyscan) | `false` | Disable SSH Keyscan `ssh-keyscan` |
| [env_file](#env_file) | - | Exported Environment File |
| [detach](#detach) **²** | `true` | Detach Flag, `false`, to disable |
| [prune](#prune) **²** | `false` | Prune Flag, `true`, to enable |
| [resolve_image](#resolve_image) **²** | `always` | Resolve [`always`, `changed`, `never`] |
| [registry_auth](#registry_auth) **²** | `false` | Enable Registry Authentication |
| [registry_host](#registry_host) | - | Registry Authentication Host |
| [registry_user](#registry_user) | - | Registry Authentication Username |
| [registry_pass](#registry_pass) | - | Registry Authentication Password |
| [summary](#summary) | `true` | Add Job Summary |
| Input&nbsp;Name | Default&nbsp;Value | Short&nbsp;Description&nbsp;of&nbsp;the&nbsp;Input&nbsp;Value |
| :-------------------------------------------------------- | :---------------------------------- | :------------------------------------------------------------ |
| <CopyButton next /> [name](#name) **\*** | - | Docker Stack/Project Name |
| <CopyButton next /> [file](#file) | `docker-compose.yaml` | Docker Stack/Compose File(s) |
| <CopyButton next /> [mode](#mode) **¹** | `swarm` | Deploy Mode [`swarm`, `compose`] |
| <CopyButton next /> [args](#args) **¹** | `--remove-orphans --force-recreate` | Additional **Compose** Arguments |
| <CopyButton next /> [host](#host) **\*** | - | Remote Docker Hostname or IP |
| <CopyButton next /> [port](#port) | `22` | Remote Docker Port |
| <CopyButton next /> [user](#user) **\*** | - | Remote Docker Username |
| <CopyButton next /> [pass](#pass) **\*** | - | Remote Docker Password |
| <CopyButton next /> [ssh_key](#ssh_key) **\*** | - | Remote SSH Key File |
| <CopyButton next /> [disable_keyscan](#disable_keyscan) | `false` | Disable SSH Keyscan `ssh-keyscan` |
| <CopyButton next /> [env_file](#env_file) | - | Exported Environment File |
| <CopyButton next /> [detach](#detach) **²** | `true` | Detach Flag, `false`, to disable |
| <CopyButton next /> [prune](#prune) **²** | `false` | Prune Flag, `true`, to enable |
| <CopyButton next /> [resolve_image](#resolve_image) **²** | `always` | Resolve [`always`, `changed`, `never`] |
| <CopyButton next /> [registry_auth](#registry_auth) **²** | `false` | Enable Registry Authentication |
| <CopyButton next /> [registry_host](#registry_host) | - | Registry Authentication Host |
| <CopyButton next /> [registry_user](#registry_user) | - | Registry Authentication Username |
| <CopyButton next /> [registry_pass](#registry_pass) | - | Registry Authentication Password |
| <CopyButton next /> [summary](#summary) | `true` | Add Job Summary |

> **\* Required**, note [pass](#pass)/[ssh_key](#ssh_key) are mutually exclusive.
> **¹ Compose Only**, view the [Compose Docs](https://docs.docker.com/reference/cli/docker/compose/up/)
> **² Swarm Only**, view the [Swarm Docs](https://docs.docker.com/reference/cli/docker/stack/deploy/)

## Details

### name <Badge type="warning" text="Required" />
### name <CopyButton /> <Badge type="warning" text="Required" />

Swarm sack name or Compose project name.

Example: `cool-stack`

### file
### file <CopyButton />

Stack file or Compose file(s).

Expand All @@ -50,13 +50,13 @@ _Swarm._ Only supports 1 file per stack.

Default: `docker-compose.yaml`

### mode <Badge type="tip" text="Compose Only" />
### mode <CopyButton /> <Badge type="tip" text="Compose Only" />

Set this to `compose` to use [compose up](https://docs.docker.com/reference/cli/docker/compose/up/) for non-swarm hosts.

Default: `swarm`

### args <Badge type="tip" text="Compose Only" />
### args <CopyButton /> <Badge type="tip" text="Compose Only" />

Compose arguments to pass to the `compose up` command. Only used for `mode: compose` deployments.
The `detach` flag defaults to false for compose. With no args the default is `--remove-orphans --force-recreate`.
Expand All @@ -65,7 +65,7 @@ Use an empty string to override. For more details, see the compose

Default: `--remove-orphans --force-recreate`

### host <Badge type="warning" text="Required" />
### host <CopyButton /> <Badge type="warning" text="Required" />

The hostname or IP address of the remote docker server to deploy too.
If your hostname is behind a proxy like Cloudflare you will need to use the IP address.
Expand All @@ -92,13 +92,13 @@ dig TXT +short o-o.myaddr.l.google.com @ns1.google.com

:::

### port
### port <CopyButton />

SSH Port. Only set this if using a non-standard port.

Default: `22`

### user <Badge type="warning" text="Required" />
### user <CopyButton /> <Badge type="warning" text="Required" />

SSH Username. This user **must** have permissions to access docker.

Expand All @@ -114,15 +114,15 @@ sudo usermod -aG docker mynewuser
After this you should be able to run `docker` commands as `mynewuser` without `sudo`.
Note, you may need to log out and back in for the changes to take effect.

### pass <Badge type="warning" text="Required" />
### pass <CopyButton /> <Badge type="warning" text="Required" />

You must provide either a `pass` or [ssh_key](#ssh_key), but **not** both.

When using a password, a temporary key is generated using [ssh-keygen](https://linux.die.net/man/1/ssh-copy-id)
and copied to the host with [ssh-copy-id](https://linux.die.net/man/1/ssh-copy-id) using [sshpass](https://linux.die.net/man/1/sshpass).
The authorized_keys file entry is [cleaned up](https://github.com/cssnr/stack-deploy-action/blob/master/src/main.sh#L10) after each deploy.

### ssh_key <Badge type="warning" text="Required" /> {#ssh_key}
### ssh_key <CopyButton /> <Badge type="warning" text="Required" /> {#ssh_key}

You must provide either a `ssh_key` or [pass](#pass), but **not** both.

Expand All @@ -142,15 +142,15 @@ cat ~/.ssh/id_rsa

:::

### disable_keyscan {#disable_keyscan}
### disable_keyscan <CopyButton /> {#disable_keyscan}

This will disable the [ssh-keyscan](https://linux.die.net/man/1/ssh-keyscan) command. **Advanced usage only.**

Enabling this will **break** deployments unless you know what you are doing.

Default: `false`

### env_file {#env_file}
### env_file <CopyButton /> {#env_file}

Variables in this file are exported before running stack deploy.
If you need compose file templating this can also be done in a previous step.
Expand All @@ -162,7 +162,7 @@ _Compose._ You can also add to the [args](#args) with `--env-file stringArray`.
That is set in your compose file as normal.
:::

### detach <Badge type="tip" text="Swarm Only" />
### detach <CopyButton /> <Badge type="tip" text="Swarm Only" />

Set this to `false` to not exit immediately and wait for the services to converge.
This will generate extra output in the logs and is useful for debugging deployments.
Expand All @@ -173,15 +173,15 @@ _See the [stack deploy Options](https://docs.docker.com/reference/cli/docker/sta

Default: `true`

### prune
### prune <CopyButton />

Prune services that are no longer referenced. Set to `true` to enable.

_See the [stack deploy Options](https://docs.docker.com/reference/cli/docker/stack/deploy/#options) for more details._

Default: `false`

### resolve_image <Badge type="tip" text="Swarm Only" /> {#resolve_image}
### resolve_image <CopyButton /> <Badge type="tip" text="Swarm Only" /> {#resolve_image}

Can be one of: [`always`, `changed`, `never`]

Expand All @@ -191,7 +191,7 @@ _See the [stack deploy Options](https://docs.docker.com/reference/cli/docker/sta

Default: `always`

### registry_auth <Badge type="tip" text="Swarm Only" /> {#registry_auth}
### registry_auth <CopyButton /> <Badge type="tip" text="Swarm Only" /> {#registry_auth}

Set to `true` to deploy with `--with-registry-auth`.

Expand All @@ -201,24 +201,31 @@ _See the [stack deploy Options](https://docs.docker.com/reference/cli/docker/sta

Default: `false`

### registry_host {#registry_host}
### registry_host <CopyButton /> {#registry_host}

To run [docker login](https://docs.docker.com/reference/cli/docker/login/) on another registry.

Example: `ghcr.io`

### registry_pass {#registry_pass}
### registry_pass <CopyButton /> {#registry_pass}

Required to run [docker login](https://docs.docker.com/reference/cli/docker/login/) before stack deploy.

### registry_user {#registry_user}
### registry_user <CopyButton /> {#registry_user}

Required to run [docker login](https://docs.docker.com/reference/cli/docker/login/) before stack deploy.

### summary
### summary <CopyButton />

Write a Summary for the job. To disable this set to `false`.

For more information see [Job Summary](../guides/features.md#job-summary).

Default: `true`

<style module>
table td:nth-child(1),
table td:nth-child(3) {
white-space: nowrap;
}
</style>