From fc116e89ebf5194a0bb696fc09617b5ae4a11cbb Mon Sep 17 00:00:00 2001
From: Om Jogani <om080jogani@gmail.com>
Date: Thu, 26 Oct 2023 23:21:05 +0530
Subject: [PATCH] [Add]: Random Mesh Gradient Background & LinkedIn Banner
 Ratio

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                |  7 +++
 .../RegenerateGradientButton.svelte           | 50 +++++++++++++++++++
 src/routes/+page.svelte                       | 18 ++++++-
 4 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/RegenerateGradientButton.svelte

diff --git a/package.json b/package.json
index bd651c3..12aa23b 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
 		"eslint": "^8.51.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.34.0",
+		"meshgrad": "^0.0.15",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
 		"sass": "^1.69.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 811e4f7..c7179ab 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -85,6 +85,9 @@ devDependencies:
   eslint-plugin-svelte:
     specifier: ^2.34.0
     version: 2.34.0(eslint@8.51.0)(svelte@4.2.2)
+  meshgrad:
+    specifier: ^0.0.15
+    version: 0.0.15
   prettier:
     specifier: ^2.8.0
     version: 2.8.0
@@ -1969,6 +1972,10 @@ packages:
     engines: {node: '>= 8'}
     dev: true
 
+  /meshgrad@0.0.15:
+    resolution: {integrity: sha512-qvu+I92Uu5I5iKrkiWcmEu0IpkBI/jgIsks7P1HQ5vYaD6SQC9W8WHxUIOeQ2zpdxoomjSpO4rZ8m4UIF4qwfQ==}
+    dev: true
+
   /micromatch@4.0.5:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
     engines: {node: '>=8.6'}
diff --git a/src/lib/components/RegenerateGradientButton.svelte b/src/lib/components/RegenerateGradientButton.svelte
new file mode 100644
index 0000000..a220375
--- /dev/null
+++ b/src/lib/components/RegenerateGradientButton.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { generateMeshGradient } from 'meshgrad';
+
+	/**
+	 * Represents 2 properties.
+     * 1. background-color : hsl(XXX, XXX%, XX%)
+     * 2. background-image : radial-gradient(...)
+     * Both are converted to string format (combined)
+	 */
+	export let value: string | null;
+</script>
+
+<button
+	aria-label="Refresh"
+	on:click={async () => {
+		value = generateMeshGradient(6);
+	}}
+>
+	<span class="block i-tabler-refresh" aria-hidden />
+</button>
+
+<style lang="scss">
+	button {
+		@include border-gradient;
+		--p-border-radius: 0.5rem;
+		--p-border-gradient-before: linear-gradient(
+			to bottom,
+			hsl(var(--color-white-hsl) / 0.12) 0%,
+			hsl(var(--color-white-hsl) / 0) 100%
+		);
+
+		background: hsl(var(--color-white-hsl) / 0.08);
+
+		--p-size: 2.5rem;
+		width: var(--p-size);
+		height: var(--p-size);
+		display: grid;
+		place-items: center;
+
+		transition: 150ms ease;
+
+		&:hover {
+			background: hsl(var(--color-white-hsl) / 0.12);
+		}
+
+		&:active {
+			background: hsl(var(--color-white-hsl) / 0.1);
+		}
+	}
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b206296..a5620df 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -9,6 +9,7 @@
 	import { melt, type SelectOption } from '@melt-ui/svelte';
 	import { tick } from 'svelte';
 	import { fly } from 'svelte/transition';
+	import RegenerateGradientButton from '$lib/components/RegenerateGradientButton.svelte';
 
 	// Options
 	const langOptions: SelectOption<LanguagePreset>[] = [
@@ -59,6 +60,10 @@
 		{
 			label: 'Stories (IG, LinkedIn)',
 			value: '1080/1920'
+		},
+		{
+			label: 'LinkedIn Banner',
+			value: '1584/396'
 		}
 	];
 	let ratio = ratios[0].value;
@@ -68,11 +73,13 @@
 
 	const bgOptions: SelectOption<string>[] = [
 		{ label: 'BG Dark 1', value: 'bg-1.png' },
-		{ label: 'Custom', value: 'custom' }
+		{ label: 'Custom', value: 'custom' },
+		{ label: 'Random Mesh Gradient', value: 'random_mesh_gradient' },
 	];
 
 	let bg = bgOptions[1].value;
 	let customBg: string | null = null;
+	let randomGradientValue: string | null = null;
 
 	// Debug Info
 	$: trueRatio = (() => {
@@ -129,7 +136,13 @@
 			</div>
 		{/if}
 
-		<Popover>
+		{#if bg === 'random_mesh_gradient'}
+			<div class="self-end" transition:fly={{ duration: 150, y: 4 }}>
+				<RegenerateGradientButton bind:value={randomGradientValue} />
+			</div>
+		{/if}
+
+		<Popover> 	
 			<button
 				slot="trigger"
 				let:trigger
@@ -197,6 +210,7 @@
 			style:--p-ratio={ratio}
 			style:--p-resize={capturing ? 'none' : 'both'}
 			style:--p-bg="url({bg === 'custom' ? customBg : `/images/${bg}`})"
+			style={bg === 'random_mesh_gradient' ? randomGradientValue : null}
 		>
 			<div class="code-window" style:--p-scale={scale}>
 				<div class="flex gap-8 mis-8">