feat: ✨ Markdown button

frontend/index.pug

@@ -27,6 +27,7 @@ html(lang='en')
 			a.logo.noselect(href='/') zer0bin
 			.buttons.noselect
 				button#save-button.btn(aria-label='Save')
+				button#markdown-button.btn(aria-label='Markdown')
 				button#single-view-button.btn(aria-label='Single View')
 					//- .fireBody(style='display: none')
 					//- 	- var parts = 20;

frontend/src/icons.ts

@@ -9,6 +9,7 @@ import {
 	EyeOutlined,
 	EyeInvisibleOutlined,
 	FireOutlined,
+	FileMarkdownOutlined,
 } from "@ant-design/icons-svg"
 import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers"
 import tippy from "tippy.js"
@@ -20,6 +21,9 @@ 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 markdownButton = <HTMLButtonElement>(
+	document.getElementById("markdown-button")
+)
 const singleViewButton = <HTMLButtonElement>(
 	document.getElementById("single-view-button")
 )
@@ -45,6 +49,12 @@ githubButton.innerHTML += renderIconDefinitionToSVGElement(GithubOutlined, {
 hideButton.innerHTML += renderIconDefinitionToSVGElement(EyeInvisibleOutlined, {
 	extraSVGAttrs: extraSVGAttrs,
 })
+markdownButton.innerHTML += renderIconDefinitionToSVGElement(
+	FileMarkdownOutlined,
+	{
+		extraSVGAttrs: extraSVGAttrs,
+	}
+)
 singleViewButton.innerHTML += renderIconDefinitionToSVGElement(FireOutlined, {
 	extraSVGAttrs: extraSVGAttrs,
 })
@@ -57,6 +67,14 @@ tippy("#save-button", {
 	allowHTML: true,
 })
 
+tippy("#markdown-button", {
+	content: "Markdown mode<br><span class='keybind'>Markdown rendering</span>",
+	placement: "bottom",
+	animation: "scale",
+	theme: "rosepine",
+	allowHTML: true,
+})
+
 tippy("#single-view-button", {
 	content:
 		"Single view<br><span class='keybind'>Deletes after seen 👻</span>",

frontend/src/index.ts

@@ -13,6 +13,7 @@ const apiUrl = config.api_url
 const confettiChance = parseInt(config.confetti_chance)
 let rawContent = ""
 let buttonPaneHidden = false
+let isMarkdown = false
 let singleView = false
 
 const jsConfetti = new JSConfetti()
@@ -34,6 +35,9 @@ 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 markdownButton = <HTMLButtonElement>(
+	document.getElementById("markdown-button")
+)
 const singleViewButton = <HTMLButtonElement>(
 	document.getElementById("single-view-button")
 )
@@ -218,10 +222,6 @@ async function savePaste() {
 }
 
 async function duplicatePaste() {
-	const path = window.location.pathname
-	const split = path.split("/")
-	const id = split[split.length - 1]
-
 	const content = rawContent
 	window.history.pushState(null, "", "/")
 	newPaste()
@@ -277,11 +277,9 @@ newButton.addEventListener("click", function () {
 
 hideButton.addEventListener("click", function () {
 	if (!buttonPaneHidden) {
-		// The button pane is currently visible so we hide it
 		buttonPaneHidden = true
 		hide(buttonWrapper)
 	} else {
-		// The button pane isnt visible so we show it
 		buttonPaneHidden = false
 		show(buttonWrapper)
 	}
@@ -289,6 +287,18 @@ hideButton.addEventListener("click", function () {
 	toggleHiddenIcon(buttonPaneHidden)
 })
 
+markdownButton.addEventListener("click", function () {
+	if (isMarkdown) {
+		isMarkdown = false
+		editor.value = editor.value.substring(editor.value.indexOf("\n") + 1)
+		markdownButton.lastElementChild.classList.add("markdown")
+	} else {
+		isMarkdown = true
+		editor.value = `---\n${editor.value}`
+		markdownButton.lastElementChild.classList.remove("markdown")
+	}
+})
+
 singleViewButton.addEventListener("click", function () {
 	if (singleView) {
 		singleView = false

frontend/style/font.scss

@@ -1,17 +1,17 @@
 @font-face {
 	font-family: "Cartograph CF";
-	src: local("../fonts/CartographCF-Regular.woff2") format("woff2"),
-		local("../fonts/CartographCF-Regular.woff") format("woff"),
-		local("../fonts/CartographCF-Regular.ttf") format("truetype");
+	src: url("../fonts/CartographCF-Regular.woff2") format("woff2"),
+		url("../fonts/CartographCF-Regular.woff") format("woff"),
+		url("../fonts/CartographCF-Regular.ttf") format("truetype");
 	font-weight: normal;
 	font-style: normal;
 	font-display: swap;
 }
 @font-face {
 	font-family: "Cartograph CF";
-	src: local("../fonts/CartographCF-RegularItalic.woff2") format("woff2"),
-		local("../fonts/CartographCF-RegularItalic.woff") format("woff"),
-		local("../fonts/CartographCF-RegularItalic.ttf") format("truetype");
+	src: url("../fonts/CartographCF-RegularItalic.woff2") format("woff2"),
+		url("../fonts/CartographCF-RegularItalic.woff") format("woff"),
+		url("../fonts/CartographCF-RegularItalic.ttf") format("truetype");
 	font-weight: normal;
 	font-style: italic;
 	font-display: swap;

frontend/style/style.scss

@@ -221,6 +221,9 @@ a {
 		animation: rainbow 3s ease infinite !important;
 	}
 }
+.markdown {
+	color: $iris;
+}
 .fire {
 	color: $love;
 }