darvesh/ipfs-pastebin.html

## ipfs-pastebin.html
<html lang="en"><head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Temporary Pastebin</title>
</head>
<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/ipfs/0.54.4/index.min.js" integrity="sha512-6GHE5kFKM1y+tmjSWrTCF13qsIqV9hDYYwrZ9iu/7wnoY4qvq/u7qSVKN4iDk0xeI7pLv6h3nBRp64aIYya8KA==" crossorigin="anonymous" referrerpolicy="no-referrer">
		</script>
	<script>
		window.ipfs = window.ipfs ? Promise.resolve(window.ipfs) : window.Ipfs.create();
	</script>
	<div class="container">
		<nav>
			<button id="save-button" style="display: none;">Save</button>
			<button id="new-button">New</button>
			<button id="fork-button" style="display: flex;">Fork</button>
			<button>
				<a id="source-button" href="http://github.com/darvesh">Source</a>
			</button>
	</nav></div>

	<textarea id="editor-textarea" autofocus="" placeholder="Paste you code.." disabled=""></textarea>

	<script>
		const editor = document.getElementById("editor");
		const editorText = document.getElementById("editor-textarea");
		const saveButton = document.getElementById("save-button");
		const newButton = document.getElementById("new-button");
		const forkButton = document.getElementById("fork-button");
		const updateHistory = (path) => history.pushState(null, "Temporary Bin", path);
		const hash = new URL(window.location.href).searchParams.get("id");
		const getSnippet = (hash) =>
			fetch(`https://ipfs.io/ipfs/${hash}`)
				.then((res) => res.text())
				.catch(console.error);
		const events = new EventTarget();
		const dispatch = (eventType) => events.dispatchEvent(new Event(eventType));
		events.addEventListener("new", () => {
			updateHistory("?");
			saveButton.style.display = "flex";
			forkButton.style.display = "none";
			editorText.value = "";
			editorText.disabled = false;
			editorText.placeholder = "Paste you code..";
			editorText.focus();
		});
		events.addEventListener("view", () => {
			saveButton.style.display = "none";
			forkButton.style.display = "flex";
			editorText.disabled = true;
			getSnippet(hash).then((value) => {
				editorText.value = value;
			});
		});
		events.addEventListener("save", () => {
			if (!editorText.value) return;
			editorText.disabled = true;
			saveButton.style.display = "none";
			forkButton.style.display = "flex";
			window.ipfs
				.then((node) => node.add(editorText.value))
				.then((res) => {
					updateHistory(`?id=${res.path}`);
					return res.path;
				})
				.then(getSnippet);
		});
		events.addEventListener("fork", () => {
			updateHistory("?");
			saveButton.style.display = "flex";
			forkButton.style.display = "none";
			editorText.disabled = false;
			if (!editorText.value) editorText.placeholder = "Paste you code..";
			editorText.focus();
		});
		newButton.addEventListener("click", () => void dispatch("new"));
		saveButton.addEventListener("click", () => void dispatch("save"));
		forkButton.addEventListener("click", () => void dispatch("fork"));
		if (hash) dispatch("view");
		else dispatch("new");
	</script>
	<style>
		@import url(https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap);*{font-family:"JetBrains Mono",monospace}:root{--main-bg:#0b090a;--button-bg:#ffbe0b;--button-text:#03071e;--text-color:#e0fbfc}body{padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--main-bg);overflow-y:hidden;overflow-x:hidden}.container{height:100%;overflow-y:hidden;overflow-x:hidden}nav{display:flex;align-items:flex-end;justify-content:flex-end;width:100%;position:fixed}button{display:flex;align-items:center;justify-content:center;background-color:var(--button-bg);color:var(--button-text);height:40px;width:70px;padding:1vh;margin:1vh;cursor:pointer}a{text-decoration:none;color:initial}textarea{margin:2vh;resize:none;width:100%;height:100vh;background-color:transparent;color:var(--text-color);border:none;outline:0}textarea::placeholder{color:var(--text-color);opacity:.5}.view>pre>code{color:var(--text-color)}
	</style>

</body></html>
	<html lang="en"><head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Temporary Pastebin</title>
	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/ipfs/0.54.4/index.min.js" integrity="sha512-6GHE5kFKM1y+tmjSWrTCF13qsIqV9hDYYwrZ9iu/7wnoY4qvq/u7qSVKN4iDk0xeI7pLv6h3nBRp64aIYya8KA==" crossorigin="anonymous" referrerpolicy="no-referrer">
	</script>
	<script>
	window.ipfs = window.ipfs ? Promise.resolve(window.ipfs) : window.Ipfs.create();
	</script>
	<div class="container">
	<nav>
	<button id="save-button" style="display: none;">Save</button>
	<button id="new-button">New</button>
	<button id="fork-button" style="display: flex;">Fork</button>
	<button>
	<a id="source-button" href="http://github.com/darvesh">Source</a>
	</button>
	</nav></div>

	<textarea id="editor-textarea" autofocus="" placeholder="Paste you code.." disabled=""></textarea>

	<script>
	const editor = document.getElementById("editor");
	const editorText = document.getElementById("editor-textarea");
	const saveButton = document.getElementById("save-button");
	const newButton = document.getElementById("new-button");
	const forkButton = document.getElementById("fork-button");
	const updateHistory = (path) => history.pushState(null, "Temporary Bin", path);
	const hash = new URL(window.location.href).searchParams.get("id");
	const getSnippet = (hash) =>
	fetch(`https://ipfs.io/ipfs/${hash}`)
	.then((res) => res.text())
	.catch(console.error);
	const events = new EventTarget();
	const dispatch = (eventType) => events.dispatchEvent(new Event(eventType));
	events.addEventListener("new", () => {
	updateHistory("?");
	saveButton.style.display = "flex";
	forkButton.style.display = "none";
	editorText.value = "";
	editorText.disabled = false;
	editorText.placeholder = "Paste you code..";
	editorText.focus();
	});
	events.addEventListener("view", () => {
	saveButton.style.display = "none";
	forkButton.style.display = "flex";
	editorText.disabled = true;
	getSnippet(hash).then((value) => {
	editorText.value = value;
	});
	});
	events.addEventListener("save", () => {
	if (!editorText.value) return;
	editorText.disabled = true;
	saveButton.style.display = "none";
	forkButton.style.display = "flex";
	window.ipfs
	.then((node) => node.add(editorText.value))
	.then((res) => {
	updateHistory(`?id=${res.path}`);
	return res.path;
	})
	.then(getSnippet);
	});
	events.addEventListener("fork", () => {
	updateHistory("?");
	saveButton.style.display = "flex";
	forkButton.style.display = "none";
	editorText.disabled = false;
	if (!editorText.value) editorText.placeholder = "Paste you code..";
	editorText.focus();
	});
	newButton.addEventListener("click", () => void dispatch("new"));
	saveButton.addEventListener("click", () => void dispatch("save"));
	forkButton.addEventListener("click", () => void dispatch("fork"));
	if (hash) dispatch("view");
	else dispatch("new");
	</script>
	<style>
	@import url(https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap);*{font-family:"JetBrains Mono",monospace}:root{--main-bg:#0b090a;--button-bg:#ffbe0b;--button-text:#03071e;--text-color:#e0fbfc}body{padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--main-bg);overflow-y:hidden;overflow-x:hidden}.container{height:100%;overflow-y:hidden;overflow-x:hidden}nav{display:flex;align-items:flex-end;justify-content:flex-end;width:100%;position:fixed}button{display:flex;align-items:center;justify-content:center;background-color:var(--button-bg);color:var(--button-text);height:40px;width:70px;padding:1vh;margin:1vh;cursor:pointer}a{text-decoration:none;color:initial}textarea{margin:2vh;resize:none;width:100%;height:100vh;background-color:transparent;color:var(--text-color);border:none;outline:0}textarea::placeholder{color:var(--text-color);opacity:.5}.view>pre>code{color:var(--text-color)}
	</style>

	</body></html>