From 65ead53191624320f423528cb98647c4a72f8812 Mon Sep 17 00:00:00 2001
From: Guz013 <43732358+Guz013@users.noreply.github.com>
Date: Mon, 3 Jul 2023 17:02:19 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20banner=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.cjs                             |  2 ++
 .vscode/project.code-workspace            |  3 ++
 apps/www/.eslintrc-auto-import.json       | 10 ++----
 apps/www/.eslintrc.cjs                    |  1 +
 apps/www/src/lib/components.d.ts          |  2 +-
 apps/www/src/lib/components/Banner.svelte | 37 +++++++++++++++++++++++
 apps/www/src/lib/imports.d.ts             |  7 ++---
 apps/www/src/lib/state.ts                 |  1 +
 apps/www/src/lib/utils.ts                 | 17 +++++++++++
 apps/www/vite.config.ts                   |  2 +-
 10 files changed, 67 insertions(+), 15 deletions(-)
 create mode 100644 apps/www/src/lib/components/Banner.svelte
 create mode 100644 apps/www/src/lib/state.ts
 create mode 100644 apps/www/src/lib/utils.ts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index a73469c..c63623e 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -234,6 +234,8 @@ module.exports = {
 				'jsconfig',
 				'vitest',
 				'matcher',
+				'minimalistic',
+				'xmlns',
 			],
 			minLength: 4,
 		}],
diff --git a/.vscode/project.code-workspace b/.vscode/project.code-workspace
index e3765c6..472bc9b 100644
--- a/.vscode/project.code-workspace
+++ b/.vscode/project.code-workspace
@@ -34,6 +34,9 @@
 		"editor.formatOnSave": false,
 		"editor.codeActionsOnSave": {
 			"source.fixAll.eslint": true
+		},
+		"svelte.plugin.svelte.compilerWarnings": {
+			"missing-declaration": "ignore"
 		}
 	}
 }
diff --git a/apps/www/.eslintrc-auto-import.json b/apps/www/.eslintrc-auto-import.json
index 8a927d1..950856a 100644
--- a/apps/www/.eslintrc-auto-import.json
+++ b/apps/www/.eslintrc-auto-import.json
@@ -35,6 +35,7 @@
     "linear": true,
     "onDestroy": true,
     "onMount": true,
+    "pastSvg": true,
     "quadIn": true,
     "quadInOut": true,
     "quadOut": true,
@@ -55,13 +56,6 @@
     "tick": true,
     "tweened": true,
     "writable": true,
-    "csr": true,
-    "ssr": true,
-    "render": true,
-    "banner": true,
-    "Banner": true,
-    "load": true,
-    "data": true,
-    "PageData": true
+    "encodeSvg": true
   }
 }
diff --git a/apps/www/.eslintrc.cjs b/apps/www/.eslintrc.cjs
index 1155b38..f78f27c 100644
--- a/apps/www/.eslintrc.cjs
+++ b/apps/www/.eslintrc.cjs
@@ -5,5 +5,6 @@ module.exports = {
 	],
 	rules: {
 		'@typescript-eslint/no-throw-literal': 'off',
+		'import/default': 'warn',
 	},
 };
diff --git a/apps/www/src/lib/components.d.ts b/apps/www/src/lib/components.d.ts
index 595d04b..d79f791 100644
--- a/apps/www/src/lib/components.d.ts
+++ b/apps/www/src/lib/components.d.ts
@@ -1,7 +1,7 @@
 // generated by unplugin-svelte-components
 // We suggest you to commit this file into source control
 declare global {
-    const Test: typeof import("./Test.svelte")["default"]
+    const Banner: typeof import("./components/Banner.svelte")["default"]
 }
 
 export {}
diff --git a/apps/www/src/lib/components/Banner.svelte b/apps/www/src/lib/components/Banner.svelte
new file mode 100644
index 0000000..3cf04f0
--- /dev/null
+++ b/apps/www/src/lib/components/Banner.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { BannerOptions } from '@marknow/banners';
+	import newBanner from '@marknow/banners';
+
+	export let options: BannerOptions;
+
+	async function loadSvg() {
+		const bannerSvg = newBanner(options);
+
+		pastSvg.set((await bannerSvg).svg);
+
+		return bannerSvg;
+	}
+</script>
+
+<picture un-w="1000px" un-h="280px" un-relative>
+	{#await loadSvg()}
+		<img src={`data:image/svg+xml, ${encodeSvg(get(pastSvg))}`} alt="Resulting banner">
+		<div un-m="l-2">
+			<span un-i-svg-spinners-blocks-shuffle-3 un-inline-block un-m="r-1">
+				Spinner
+			</span>Creating svg
+		</div>
+	{:then banner}
+		<img src={`data:image/svg+xml, ${encodeSvg(banner.svg)}`} alt="Resulting banner">
+	{/await}
+</picture>
+
+<style>
+	:global(#bannerHtml) {
+		padding: 0 !important;
+		height: var(--height) !important;
+	}
+	:global(#bannerHtml > div > div > div:first-child) {
+		margin: 0 0 0 2.5em !important;
+	}
+</style>
diff --git a/apps/www/src/lib/imports.d.ts b/apps/www/src/lib/imports.d.ts
index 44237b8..35fa9ea 100644
--- a/apps/www/src/lib/imports.d.ts
+++ b/apps/www/src/lib/imports.d.ts
@@ -4,7 +4,6 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const Banner: typeof import('./Banner')['default']
   const afterUpdate: typeof import('svelte')['afterUpdate']
   const backIn: typeof import('svelte/easing')['backIn']
   const backInOut: typeof import('svelte/easing')['backInOut']
@@ -19,16 +18,15 @@ declare global {
   const circOut: typeof import('svelte/easing')['circOut']
   const createEventDispatcher: typeof import('svelte')['createEventDispatcher']
   const crossfade: typeof import('svelte/transition')['crossfade']
-  const csr: typeof import('../routes/+page')['csr']
   const cubicIn: typeof import('svelte/easing')['cubicIn']
   const cubicInOut: typeof import('svelte/easing')['cubicInOut']
   const cubicOut: typeof import('svelte/easing')['cubicOut']
-  const data: typeof import('../routes/+page.svelte')['data']
   const derived: typeof import('svelte/store')['derived']
   const draw: typeof import('svelte/transition')['draw']
   const elasticIn: typeof import('svelte/easing')['elasticIn']
   const elasticInOut: typeof import('svelte/easing')['elasticInOut']
   const elasticOut: typeof import('svelte/easing')['elasticOut']
+  const encodeSvg: typeof import('./utils')['encodeSvg']
   const expoIn: typeof import('svelte/easing')['expoIn']
   const expoInOut: typeof import('svelte/easing')['expoInOut']
   const expoOut: typeof import('svelte/easing')['expoOut']
@@ -42,6 +40,7 @@ declare global {
   const linear: typeof import('svelte/easing')['linear']
   const onDestroy: typeof import('svelte')['onDestroy']
   const onMount: typeof import('svelte')['onMount']
+  const pastSvg: typeof import('./state')['pastSvg']
   const quadIn: typeof import('svelte/easing')['quadIn']
   const quadInOut: typeof import('svelte/easing')['quadInOut']
   const quadOut: typeof import('svelte/easing')['quadOut']
@@ -52,7 +51,6 @@ declare global {
   const quintInOut: typeof import('svelte/easing')['quintInOut']
   const quintOut: typeof import('svelte/easing')['quintOut']
   const readable: typeof import('svelte/store')['readable']
-  const render: typeof import('./render')['default']
   const scale: typeof import('svelte/transition')['scale']
   const setContext: typeof import('svelte')['setContext']
   const sineIn: typeof import('svelte/easing')['sineIn']
@@ -60,7 +58,6 @@ declare global {
   const sineOut: typeof import('svelte/easing')['sineOut']
   const slide: typeof import('svelte/transition')['slide']
   const spring: typeof import('svelte/motion')['spring']
-  const ssr: typeof import('../routes/+page')['ssr']
   const tick: typeof import('svelte')['tick']
   const tweened: typeof import('svelte/motion')['tweened']
   const writable: typeof import('svelte/store')['writable']
diff --git a/apps/www/src/lib/state.ts b/apps/www/src/lib/state.ts
new file mode 100644
index 0000000..a950a39
--- /dev/null
+++ b/apps/www/src/lib/state.ts
@@ -0,0 +1 @@
+export const pastSvg = writable('');
diff --git a/apps/www/src/lib/utils.ts b/apps/www/src/lib/utils.ts
new file mode 100644
index 0000000..0e09f45
--- /dev/null
+++ b/apps/www/src/lib/utils.ts
@@ -0,0 +1,17 @@
+/**
+ * @author Taylor Hunt
+ * @see {@link https://codepen.io/tigt/post/optimizing-svgs-in-data-uris}
+ * @see {@link https://gist.github.com/jennyknuth/222825e315d45a738ed9d6e04c7a88d0}
+ */
+export function encodeSvg(svg: string) {
+	return svg.replace('<svg', (~svg.indexOf('xmlns') ? '<svg' : '<svg xmlns="http://www.w3.org/2000/svg"'))
+		.replace(/"/g, '\'')
+		.replace(/%/g, '%25')
+		.replace(/#/g, '%23')
+		.replace(/{/g, '%7B')
+		.replace(/}/g, '%7D')
+		.replace(/</g, '%3C')
+		.replace(/>/g, '%3E')
+
+		.replace(/\s+/g, ' ');
+}
diff --git a/apps/www/vite.config.ts b/apps/www/vite.config.ts
index f03a061..6cfe296 100644
--- a/apps/www/vite.config.ts
+++ b/apps/www/vite.config.ts
@@ -46,7 +46,7 @@ export default defineConfig({
 				}),
 			],
 			dirs: [
-				'./src/lib',
+				'./src/lib/components',
 				'./src/routes',
 			],
 			importPathTransform: (importPath) => {