feat: ✨ Share button

Author: ThatOneCalculator

frontend/index.pug

@@ -52,6 +52,7 @@ html(lang='en')
 			span.viewcounter.noselect#viewcounter-count(style='visibility: hidden; display: none')
 
 		.bottom-button-wrapper
+			button#share-button.btn(aria-label='Share' style='visibility: hidden')
 			button#hide-button.btn(aria-label='Hide')
 
 		.scrollbar-container

frontend/src/icons.ts

@@ -10,6 +10,7 @@ import {
 	EyeInvisibleOutlined,
 	FireOutlined,
 	FileMarkdownOutlined,
+	ShareAltOutlined,
 } from "@ant-design/icons-svg"
 import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers"
 import tippy from "tippy.js"
@@ -22,9 +23,11 @@ const newButton = <HTMLButtonElement>document.getElementById("new-button")
 const copyButton = <HTMLButtonElement>document.getElementById("copy-button")
 const hideButton = <HTMLButtonElement>document.getElementById("hide-button")
 const githubButton = <HTMLButtonElement>document.getElementById("github-button")
+const shareButton = <HTMLButtonElement>document.getElementById("share-button")
 const markdownButton = <HTMLButtonElement>(
 	document.getElementById("markdown-button")
 )
+
 const singleViewButton = <HTMLButtonElement>(
 	document.getElementById("single-view-button")
 )
@@ -47,6 +50,7 @@ renderIcon(githubButton, GithubOutlined)
 renderIcon(hideButton, EyeInvisibleOutlined)
 renderIcon(markdownButton, FileMarkdownOutlined)
 renderIcon(singleViewButton, FireOutlined)
+renderIcon(shareButton, ShareAltOutlined)
 
 tippy("#save-button", {
 	content: "Save paste<br><span class='keybind'>Ctrl + S</span>",
@@ -112,6 +116,14 @@ tippy("#hide-button", {
 	allowHTML: true,
 })
 
+tippy("#share-button", {
+	content: "Share paste",
+	placement: "top",
+	animation: "scale",
+	theme: "rosepine",
+	allowHTML: true,
+})
+
 const observer = new MutationObserver(callback)
 
 function callback() {

frontend/src/index.ts

@@ -35,6 +35,7 @@ const saveButton = <HTMLButtonElement>document.getElementById("save-button")
 const newButton = <HTMLButtonElement>document.getElementById("new-button")
 const copyButton = <HTMLButtonElement>document.getElementById("copy-button")
 const hideButton = <HTMLButtonElement>document.getElementById("hide-button")
+const shareButton = <HTMLButtonElement>document.getElementById("share-button")
 const markdownButton = <HTMLButtonElement>(
 	document.getElementById("markdown-button")
 )
@@ -127,6 +128,7 @@ function newPaste() {
 	hide(codeViewPre)
 	hide(viewCounterLabel)
 	hide(viewCounter)
+	hide(shareButton)
 	viewCounterLabel.style.display = "none"
 	viewCounter.style.display = "none"
 }
@@ -165,6 +167,17 @@ function viewPaste(content: string, views: string, singleView: boolean) {
 		addMessage("This is a single-view paste!")
 	}
 
+	if (navigator.canShare) {
+		show(shareButton)
+
+		shareButton.addEventListener("click", function () {
+			navigator.share({
+				title: "zer0bin paste",
+				url: window.location.toString(),
+			})
+		})
+	}
+
 	disable(saveButton)
 	disable(markdownButton)
 	enable(newButton)

frontend/style/style.scss

@@ -192,6 +192,17 @@ a {
 		}
 	}
 }
+// #share-button {
+// 	position: fixed !important;
+// 	bottom: 0;
+// 	left: 0;
+// 	z-index: 10;
+// 	color: $muted;
+// 	&:hover {
+// 		color: $rose;
+// 	}
+// 	padding: 10px;
+// }
 .keybind {
 	color: $subtle;
 	font-size: 11px;