Skip to content

Commit 9f84815

Browse files
dhrdlickadhrdlicka
authored
Merge pull request #38 from profiq/feature/copy-url-button
Add copy URL buttons
2 parents 57a5162 + 06c0369 commit 9f84815

4 files changed

Lines changed: 86 additions & 17 deletions

File tree

‎assets/css/app.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,21 @@
88
border-radius: 0.75rem;
99
}
1010

11+
.request-method {
12+
font-size: 75%;
13+
border-color: var(--bs-border-color) !important;
14+
color: var(--bs-secondary-color);
15+
}
16+
17+
.request-url {
18+
color: var(--bs-body-color)
19+
}
20+
21+
.icon-tabler-copy {
22+
stroke-width: 1.5;
23+
stroke: var(--bs-primary-text-emphasis);
24+
}
25+
1126
.highlight {
1227
//color: #f8f8f2;
1328
//background-color: #272822;

‎assets/js/app.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,21 @@ liveSocket.connect()
4040
window.liveSocket = liveSocket
4141

4242
import "bootstrap"
43+
44+
function copyExampleUrl(elementId) {
45+
navigator.clipboard.writeText(document.getElementById(elementId).innerText)
46+
}
47+
48+
function copyRequestBoxUrl() {
49+
let baseUrl = document.getElementById("baseUrl").innerText;
50+
let input = document.getElementById("url");
51+
52+
if(input.innerText === "") {
53+
navigator.clipboard.writeText(baseUrl + input.placeholder)
54+
} else {
55+
navigator.clipboard.writeText(baseUrl + input.innerText)
56+
}
57+
}
58+
59+
window.copyExampleUrl = copyExampleUrl;
60+
window.copyRequestBoxUrl = copyRequestBoxUrl;

‎lib/swapi_web/live/requester_live.ex‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,34 @@ defmodule SWAPIWeb.RequesterLive do
66
~H"""
77
<.form for={@form} phx-change="change" phx-submit="request">
88
<div class="input-group">
9-
<span class="input-group-text"><%= url(~p"/api/") %></span>
10-
<.input type="text" class="form-control" field={@form[:url]} placeholder={@placeholder} />
9+
<span class="input-group-text" id="baseUrl"><%= url(~p"/api/") %></span>
10+
<.input
11+
type="text"
12+
class="form-control border-end-0"
13+
field={@form[:url]}
14+
placeholder={@placeholder}
15+
/>
16+
<button
17+
class="btn btn-link border border-start-0 d-flex align-items-center"
18+
title="Copy URL"
19+
onclick="copyRequestBoxUrl(); return false;"
20+
>
21+
<svg
22+
xmlns="http://www.w3.org/2000/svg"
23+
class="icon icon-tabler icon-tabler-copy"
24+
width="20"
25+
height="20"
26+
viewBox="0 0 24 24"
27+
stroke-width="1.5"
28+
fill="none"
29+
stroke-linecap="round"
30+
stroke-linejoin="round"
31+
>
32+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
33+
<path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" />
34+
<path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
35+
</svg>
36+
</button>
1137
<button class="btn btn-primary d-flex align-items-center">
1238
<svg
1339
xmlns="http://www.w3.org/2000/svg"

‎lib/swapi_web/views/page_html/home.html.heex‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,13 @@
1313
</div>
1414
<div class="col text-center">
1515
<h3>Usage</h3>
16-
<p>
17-
You can use this API in your projects and tutorials. You can find all resources under <a href="/swaggerui" target="_blank">documentation</a> tab.
18-
We also provide <a href="/postman" target="_blank">Postman collection</a> and <a href="/api/openapi" target="_blank">Open API definition</a>.
19-
<br>
20-
<br>
21-
For performance testing, you can find <a href="https://github.com/profiq/swapi-elixir?tab=readme-ov-file#docker" target="_blank">docker image</a> on our GitHub repo and run the whole application yourself.
22-
</p>
16+
<p>You can use this API in your projects and tutorials. You can find all resources under <a href="/swaggerui" target="_blank">documentation</a> tab. We also provide <a href="/postman" target="_blank">Postman collection</a> and <a href="/api/openapi" target="_blank">Open API definition</a>.</p>
17+
<p>For performance testing, you can find <a href="https://github.com/profiq/swapi-elixir?tab=readme-ov-file#docker" target="_blank">docker image</a> on our GitHub repo and run the whole application yourself.</p>
2318
</div>
2419
<div class="col text-center">
2520
<h3>Original project</h3>
26-
<p>This is rewrite of <a href="https://swapi.dev/" target="_blank">swapi.dev</a> project. The motivation for our implementation is to provide <b>better performance</b> (CDN) and different technology aproach (Elixir).
27-
<br>
28-
<br>
29-
Feel free to contribute on our <a href="https://github.com/profiq/swapi-elixir" target="_blank">GitHub.</a> </p>
21+
<p>This is rewrite of <a href="https://swapi.dev/" target="_blank">swapi.dev</a> project. The motivation for our implementation is to provide <b>better performance</b> (CDN) and different technology aproach (Elixir).</p>
22+
<p>Feel free to contribute on our <a href="https://github.com/profiq/swapi-elixir" target="_blank">GitHub.</a></p>
3023
</div>
3124
</div>
3225
</div>
@@ -35,8 +28,19 @@
3528
<div class="row row-cols-1 row-cols-lg-2">
3629
<div class="col mt-2">
3730
<div class="border rounded">
38-
<div class="border-bottom">
39-
<pre class="m-2">GET /api/planets/1</pre>
31+
<div class="border-bottom p-2 d-flex align-items-center">
32+
<span class="border rounded me-2 px-2 py-1 request-method">GET</span>
33+
<code id="urlExample1" class="request-url flex-grow-1"><%= url(~p"/api/planets/1") %></code>
34+
<button class="btn btn-link p-0 d-flex align-items-center" title="Copy URL" onclick="copyExampleUrl('urlExample1')">
35+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copy" width="20" height="20">
36+
<symbol id="copyIcon" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
37+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
38+
<path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" />
39+
<path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
40+
</symbol>
41+
<use href="#copyIcon" />
42+
</svg>
43+
</button>
4044
</div>
4145
<%=
4246
Phoenix.ConnTest.build_conn()
@@ -50,8 +54,14 @@
5054
</div>
5155
<div class="col mt-2">
5256
<div class="border rounded">
53-
<div class="border-bottom">
54-
<pre class="m-2">GET /api/starships?search="death star"</pre>
57+
<div class="border-bottom p-2 d-flex align-items-center">
58+
<span class="border rounded me-2 px-2 py-1 request-method">GET</span>
59+
<code id="urlExample2" class="request-url flex-grow-1"><%= url(~p"/api/starships?search=\"death star\"") %></code>
60+
<button class="btn btn-link p-0 d-flex align-items-center" title="Copy URL" onclick="copyExampleUrl('urlExample2')">
61+
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copy" width="20" height="20">
62+
<use href="#copyIcon"/>
63+
</svg>
64+
</button>
5565
</div>
5666
<%=
5767
Phoenix.ConnTest.build_conn()

0 commit comments

Comments
 (0)