add environment variable subsitution with `.env` files and system env

frontend/.env

@@ -0,0 +1,2 @@
+API_URL=http://localhost:8000
+CONFETTI_CHANCE=10

frontend/src/env.d.ts

@@ -0,0 +1,2 @@
+declare const API_URL: string
+declare const CONFETTI_CHANCE: string

frontend/src/index.ts

@@ -9,10 +9,8 @@ import hljs from "highlight.js/lib/common"
 // import hljs from "../min/highlight.min"
 
 import "../min/rosepine.min.css"
-import config from "../config.json"
 import { toggleHiddenIcon } from "./icons"
-const apiUrl = config.api_url
-const confettiChance = parseInt(config.confetti_chance)
+
 let rawContent = ""
 let buttonPaneHidden = false
 let isMarkdown = false
@@ -65,7 +63,7 @@ function enable(element: HTMLButtonElement) {
 
 async function postPaste(content: string, callback: Function) {
 	const payload = { content, single_view: singleView }
-	await fetch(`${apiUrl}/p/n`, {
+	await fetch(`${API_URL}/p/n`, {
 		method: "POST",
 		headers: {
 			"Content-Type": "application/json",
@@ -89,7 +87,7 @@ async function postPaste(content: string, callback: Function) {
 }
 
 async function getPaste(id: string, callback: Function) {
-	await fetch(`${apiUrl}/p/${id}`, {
+	await fetch(`${API_URL}/p/${id}`, {
 		method: "GET",
 		headers: {
 			"Content-Type": "application/json",
@@ -220,7 +218,9 @@ async function savePaste() {
 			rawContent = res["data"]["content"]
 			viewPaste(rawContent, "0", res["data"]["single_view"])
 
-			const rand = Math.floor(Math.random() * confettiChance * 6)
+			const rand = Math.floor(
+				Math.random() * parseInt(CONFETTI_CHANCE ?? "10") * 6
+			)
 
 			if (rand < 5) {
 				jsConfetti.addConfetti({

frontend/src/tsconfig.json

@@ -24,7 +24,7 @@
 		// "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 
 		/* Modules */
-		"module": "es6" /* Specify what module code is generated. */,
+		"module": "esnext" /* Specify what module code is generated. */,
 		// "rootDir": "./",                                  /* Specify the root folder within your source files. */
 		"moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
 		// "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */

frontend/vite.config.ts

@@ -1,7 +1,40 @@
-import { defineConfig } from "vite"
+import { defineConfig, loadEnv } from "vite"
 import pugPlugin from "vite-plugin-pug"
-import viteCompression from 'vite-plugin-compression';
+import viteCompression from "vite-plugin-compression"
+import { createRequire } from "module"
 
-export default defineConfig({
-    plugins: [pugPlugin(), viteCompression()],
-})
+export default defineConfig(async ({ mode }) => {
+	let config: any
+	const env = loadEnv(mode, process.cwd(), "")
+
+	try {
+		// @ts-ignore
+
+		// lazy hack so vite doesn't emit:
+		// [rollup-plugin-dynamic-import-variables] Unexpected token (46:55)
+		// file: /mnt/storage/Projects/Forks/zer0bin/frontend/src/index.ts:46:55
+		// error during build:
+		// SyntaxError: Unexpected token (46:55)
+
+		const _config = await import("./config.json")
+		config = {
+			api_url: JSON.stringify(_config.api_url),
+			confetti_chance: JSON.stringify(_config.confetti_chance),
+		}
+	} catch (e) {
+		config = {
+			api_url: JSON.stringify(env.ZEROBIN_API_URL ?? env.API_URL),
+			confetti_chance: JSON.stringify(
+				env.ZEROBIN_CONFETTI_CHANCE ?? env.CONFETTI_CHANCE
+			),
+		}
+	}
+
+	return {
+		plugins: [pugPlugin(), viteCompression()],
+		define: {
+			API_URL: config.api_url,
+			CONFETTI_CHANCE: config.confetti_chance,
+		},
+	}
+})