fix: copy button

caarlos0 · caarlos0 · commit 26cf5364eeb5 · 2021-07-31T20:18:27.000-03:00
Signed-off-by: Carlos Alexandro Becker &lt;caarlos0@gmail.com&gt;
diff --git a/static/styles.css b/static/styles.css
@@ -108,11 +108,19 @@ div.main>form>input[type=text] {
 	border-radius: 4px;
 	box-sizing: border-box;
 	font-family: inherit;
-    font-size: 1rem;
+	font-size: 1rem;
 	color: #555;
 }
 
-div.main>form>input[type=submit] {
+
+p.error {
+	color: #e76060;
+	font-weight: bold;
+	margin-top: 1em;
+	margin-bottom: 1em;
+}
+
+.btn {
 	width: 100%;
 	background-color: #3F3D56;
 	color: white;
@@ -122,13 +130,10 @@ div.main>form>input[type=submit] {
 	border-radius: 4px;
 	cursor: pointer;
 	font-family: inherit;
-    font-size: 1rem;
-    font-weight: 450;
+	font-size: 1rem;
+	font-weight: 450;
 }
 
-p.error {
-	color: #e76060;
-	font-weight: bold;
-	margin-top: 1em;
-	margin-bottom: 1em;
+.btn.copy-btn {
+	margin-top: -20px;
 }
diff --git a/static/templates/index.html b/static/templates/index.html
@@ -13,8 +13,10 @@
 	<title>Star Charts</title>
 	<meta name="description" content="StarCharts">
 	<meta name="author" content="https://github/caarlos0">
-	<link rel="stylesheet" href="/static/styles.css">
-	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/darcula.min.css">
+	<link rel="stylesheet" href="/static/styles.css?v={{ .Version }}">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/styles/base16/dracula.min.css"
+		integrity="sha512-oDvVpANXrKQ6R5B25VO6DooEQWA7jUXleyD6oUWHChC0fjv8wAANSX7lKXtp5D6HbZ7EUxd0wjMibtpCQ+aCDw=="
+		crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 
 <body>
@@ -23,7 +25,7 @@
 		<span class="title"><a href="/">starcharts</a></span>
 		<span class="subtitle">Plot your repository stars over time.</span>
 	</div>
-	{{ if .FullName }}
+	{{ with .Details }}
 	<div class="main">
 		<p>
 			{{ if .StargazersCount }}
@@ -48,11 +50,14 @@
 			You can include the chart on your repository's
 			<code>README.md</code>
 			as follows:
-		<pre><code class="markdown">
+<pre>
+<code class="markdown" id="code">
 ## Stargazers over time
 
 [![Stargazers over time](https://starchart.cc/{{ .FullName }}.svg)](https://starchart.cc/{{ .FullName }})
-      </code></pre>
+</code>
+<button class="btn copy-btn" data-clipboard-target="#code">Copy</button>
+</pre>
 		</p>
 	</div>
 	<div class="footer">
@@ -70,14 +75,25 @@
 			<label for="repo">Repository:</label><br>
 			<input type="text" id="repository" name="repository" value="caarlos0/starcharts" placeholder="caarlos0/starcharts"
 				autofocus="true"><br>
-			<input type="submit" value="Submit">
+			<input type="submit" value="Submit" class="btn">
 		</form>
 	</div>
 	{{ end }}
-	<script src="//cdnjs.cloudflare.com/ajax/libs/timeago.js/3.0.2/timeago.min.js"></script>
-	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/timeago.js/4.0.2/timeago.min.js"
+		integrity="sha512-SVDh1zH5N9ChofSlNAK43lcNS7lWze6DTVx1JCXH1Tmno+0/1jMpdbR8YDgDUfcUrPp1xyE53G42GFrcM0CMVg=="
+		crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/languages/markdown.min.js"
+		integrity="sha512-ADxHovZZYEPiuBlIAejqh6IxCe+Vi7CIYVYpKyXtvain1hzK6DpYlQhoxwo0YBHv11Oj8N3jBqRCoOA8I8lXiw=="
+		crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/highlight.min.js"
+		integrity="sha512-z+/WWfyD5tccCukM4VvONpEtLmbAm5LDu7eKiyMQJ9m7OfPEDL7gENyDRL3Yfe8XAuGsS2fS4xSMnl6d30kqGQ=="
+		crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"
+		integrity="sha512-sIqUEnRn31BgngPmHt2JenzleDDsXwYO+iyvQ46Mw6RL+udAUZj2n/u/PGY80NxRxynO7R9xIGx5LEzw4INWJQ=="
+		crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 	<script defer data-domain="starchart.cc" src="https://plausible.io/js/plausible.js"></script>
 	<script>
+		new ClipboardJS('.copy-btn');
 		hljs.initHighlightingOnLoad();
 		timeago().render(document.querySelectorAll('time'));
 	</script>
