Merge branch 'main' into raw

README.md

@@ -26,8 +26,8 @@
 # Features
 
 - ✨ Code highlighting and line numbers (default)
-- 📖 Markdown rendering (click the <a href=""><img alt="Markdown" src="https://user-images.githubusercontent.com/44733677/161484749-fdf60750-36ae-4d0a-aaa5-cdcae54fc805.svg" height=18></a> button)
-- 🔥 Single-view pastes (click the <a href=""><img alt="Fire" src="https://user-images.githubusercontent.com/44733677/161485115-c5fccb81-fa21-4e67-88fd-9a6f9dff728e.svg" height=18></a> button)
+- 📖 Markdown rendering (click the <a href="https://github.com/zer0bin-dev/zer0bin"><img alt="Markdown" src="https://user-images.githubusercontent.com/44733677/161484749-fdf60750-36ae-4d0a-aaa5-cdcae54fc805.svg" height=18></a> button)
+- 🔥 Single-view pastes (click the <a href="https://github.com/zer0bin-dev/zer0bin"><img alt="Fire" src="https://user-images.githubusercontent.com/44733677/161485115-c5fccb81-fa21-4e67-88fd-9a6f9dff728e.svg" height=18></a> button)
 - ‍🧑‍💻 [CLI Client](https://github.com/zer0bin-dev/zer0)
 - 🚀 Easily selfhostable
 - 👀 View counter

frontend/index.pug

@@ -46,12 +46,13 @@ html(lang='en')
 					//- 	- }
 				button#new-button.btn(aria-label='New paste')
 				button#copy-button.btn(aria-label='Copy')
+				button#share-button.btn(aria-label='Share')
 				a(href='https://github.com/zer0bin-dev/zer0bin' aria-label='GitHub repo')
 					button#github-button.btn(aria-label='GitHub')
 			span.viewcounter.noselect#viewcounter-label(style='visibility: hidden; display: none') Views: 
 			span.viewcounter.noselect#viewcounter-count(style='visibility: hidden; display: none')
 
-		.hide-button-wrapper
+		.bottom-button-wrapper
 			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)
 
 export const saveTippy = tippy("#save-button", {
 	content: "Save paste<br><span class='keybind'>Ctrl + S</span>",
@@ -89,6 +93,14 @@ tippy("#copy-button", {
 	allowHTML: true,
 })
 
+tippy("#share-button", {
+	content: `Share paste<br><span class='keybind'>Copies URL</span>`,
+	placement: "top",
+	animation: "scale",
+	theme: "rosepine",
+	allowHTML: true,
+})
+
 tippy("#github-button", {
 	content: `GitHub<br><span class='keybind'>
 	${renderIconDefinitionToSVGElement(StarOutlined, {

frontend/src/index.ts

@@ -17,7 +17,6 @@ let isMarkdown = false
 let singleView = false
 let inView = false
 let viewId = ""
-
 const jsConfetti = new JSConfetti()
 
 const lineNumbers = <HTMLElement>document.querySelector(".line-numbers")
@@ -37,6 +36,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")
 )
@@ -118,6 +118,7 @@ function newPaste() {
 	enable(saveButton)
 	disable(newButton)
 	disable(copyButton)
+	disable(shareButton)
 	enable(singleViewButton)
 	saveTippy.setContent("Save paste<br><span class='keybind'>Ctrl + S</span>")
 
@@ -170,7 +171,21 @@ function viewPaste(content: string, views: string, singleView: boolean) {
 		addMessage("This is a single-view paste!")
 	}
 
-	enable(saveButton)
+	enable(shareButton)
+	shareButton.addEventListener("click", function () {
+		const url = window.location.toString()
+		if (navigator.canShare) {
+			navigator.share({
+				title: "zer0bin paste",
+				url: url,
+			})
+		} else {
+			navigator.clipboard.writeText(url)
+			addMessage("Copied URL to clipboard!")
+		}
+	})
+  
+  enable(saveButton)
 	disable(markdownButton)
 	enable(newButton)
 	enable(copyButton)

frontend/style/style.scss

@@ -178,7 +178,7 @@ a {
 	color: $muted;
 	cursor: auto;
 }
-.hide-button-wrapper {
+.bottom-button-wrapper {
 	position: fixed !important;
 	bottom: 0;
 	right: 0;
@@ -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;