Skip to content

Commit ea4ba7a

Browse files
smashedrsmashedr
authored
Add CopyButton Component (#5)
1 parent 1ed90a0 commit ea4ba7a

File tree

3 files changed

+139
-42
lines changed

3 files changed

+139
-42
lines changed

‎.vitepress/theme/components/CopyButton.vue‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<script setup>
2+
// noinspection NpmUsedModulesInstalled
3+
import { ref } from 'vue'
4+
5+
const props = defineProps({
6+
text: { type: String, default: null },
7+
next: { type: Boolean, default: false },
8+
all: { type: Boolean, default: false },
9+
margin: { type: String, default: null },
10+
})
11+
12+
const spanStyle = {}
13+
if (props.margin) {
14+
spanStyle.margin = props.margin
15+
} else if (!props.next) {
16+
spanStyle.marginLeft = '6px'
17+
}
18+
// console.log('spanStyle:', spanStyle)
19+
20+
const copied = ref(false)
21+
22+
const doCopy = (text) => {
23+
// console.log(`CopyButton - text: "${text}"`)
24+
if (!text) return console.warn('CopyButton - No Text')
25+
navigator.clipboard.writeText(text)
26+
copied.value = true
27+
setTimeout(() => {
28+
copied.value = false
29+
}, 1000)
30+
}
31+
32+
const copyText = (event) => {
33+
const target = event.currentTarget
34+
if (copied.value) return
35+
if (props.text) {
36+
doCopy(props.text)
37+
} else {
38+
let text
39+
if (props.all) {
40+
text = target.parentElement?.textContent?.trim()
41+
} else {
42+
if (props.next) {
43+
text = target.nextElementSibling.textContent
44+
} else {
45+
text = target.parentElement?.firstChild?.textContent
46+
}
47+
text = text?.replaceAll(/[\u200B-\u200D\uFEFF]/g, '').trim()
48+
}
49+
doCopy(text)
50+
}
51+
}
52+
</script>
53+
54+
<template>
55+
<span @click="copyText" :style="spanStyle" class="copy-button">
56+
<svg v-if="!copied" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="lucide-copy">
57+
<rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
58+
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
59+
</svg>
60+
<svg v-if="copied" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="lucide-check">
61+
<path d="M20 6 9 17l-5-5" />
62+
</svg>
63+
</span>
64+
</template>
65+
66+
<style>
67+
.copy-button {
68+
display: inline-block;
69+
transform: translateY(-2px);
70+
vertical-align: middle;
71+
}
72+
.copy-button:hover {
73+
color: var(--vp-c-text-2);
74+
cursor: pointer;
75+
}
76+
.copy-button svg {
77+
width: 1em;
78+
height: 1em;
79+
fill: none;
80+
stroke: currentColor;
81+
stroke-width: 2;
82+
stroke-linecap: round;
83+
stroke-linejoin: round;
84+
}
85+
.copy-button .lucide-check {
86+
color: var(--vp-c-success-1);
87+
}
88+
</style>

‎.vitepress/theme/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import DefaultTheme, { VPBadge } from 'vitepress/theme'
22
import './custom.css'
33
import 'virtual:group-icons.css'
44

5-
import YouTubeEmbed from './components/YouTubeEmbed.vue'
5+
import CopyButton from './components/CopyButton.vue'
66
import StackTable from './components/StackTable.vue'
7+
import YouTubeEmbed from './components/YouTubeEmbed.vue'
78

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

1617
enhanceApp({ app }) {
1718
app.component('Badge', VPBadge)
18-
app.component('YouTubeEmbed', YouTubeEmbed)
19+
app.component('CopyButton', CopyButton)
1920
app.component('StackTable', StackTable)
21+
app.component('YouTubeEmbed', YouTubeEmbed)
2022

2123
app.component('Contributors', Contributors)
2224
app.config.globalProperties.$contributors = contributors

‎docs/docs/inputs.md‎

Lines changed: 47 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,41 @@
22

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

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

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

33-
### name <Badge type="warning" text="Required" />
33+
### name <CopyButton /> <Badge type="warning" text="Required" />
3434

3535
Swarm sack name or Compose project name.
3636

3737
Example: `cool-stack`
3838

39-
### file
39+
### file <CopyButton />
4040

4141
Stack file or Compose file(s).
4242

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

5151
Default: `docker-compose.yaml`
5252

53-
### mode <Badge type="tip" text="Compose Only" />
53+
### mode <CopyButton /> <Badge type="tip" text="Compose Only" />
5454

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

5757
Default: `swarm`
5858

59-
### args <Badge type="tip" text="Compose Only" />
59+
### args <CopyButton /> <Badge type="tip" text="Compose Only" />
6060

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

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

68-
### host <Badge type="warning" text="Required" />
68+
### host <CopyButton /> <Badge type="warning" text="Required" />
6969

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

9393
:::
9494

95-
### port
95+
### port <CopyButton />
9696

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

9999
Default: `22`
100100

101-
### user <Badge type="warning" text="Required" />
101+
### user <CopyButton /> <Badge type="warning" text="Required" />
102102

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

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

117-
### pass <Badge type="warning" text="Required" />
117+
### pass <CopyButton /> <Badge type="warning" text="Required" />
118118

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

121121
When using a password, a temporary key is generated using [ssh-keygen](https://linux.die.net/man/1/ssh-copy-id)
122122
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).
123123
The authorized_keys file entry is [cleaned up](https://github.com/cssnr/stack-deploy-action/blob/master/src/main.sh#L10) after each deploy.
124124

125-
### ssh_key <Badge type="warning" text="Required" /> {#ssh_key}
125+
### ssh_key <CopyButton /> <Badge type="warning" text="Required" /> {#ssh_key}
126126

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

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

143143
:::
144144

145-
### disable_keyscan {#disable_keyscan}
145+
### disable_keyscan <CopyButton /> {#disable_keyscan}
146146

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

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

151151
Default: `false`
152152

153-
### env_file {#env_file}
153+
### env_file <CopyButton /> {#env_file}
154154

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

165-
### detach <Badge type="tip" text="Swarm Only" />
165+
### detach <CopyButton /> <Badge type="tip" text="Swarm Only" />
166166

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

174174
Default: `true`
175175

176-
### prune
176+
### prune <CopyButton />
177177

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

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

182182
Default: `false`
183183

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

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

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

192192
Default: `always`
193193

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

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

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

202202
Default: `false`
203203

204-
### registry_host {#registry_host}
204+
### registry_host <CopyButton /> {#registry_host}
205205

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

208208
Example: `ghcr.io`
209209

210-
### registry_pass {#registry_pass}
210+
### registry_pass <CopyButton /> {#registry_pass}
211211

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

214-
### registry_user {#registry_user}
214+
### registry_user <CopyButton /> {#registry_user}
215215

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

218-
### summary
218+
### summary <CopyButton />
219219

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

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

224224
Default: `true`
225+
226+
<style module>
227+
table td:nth-child(1),
228+
table td:nth-child(3) {
229+
white-space: nowrap;
230+
}
231+
</style>

0 commit comments

Comments
 (0)