feat: ✨ banner component

.eslintrc.cjs

@@ -234,6 +234,8 @@ module.exports = {
 				'jsconfig',
 				'vitest',
 				'matcher',
+				'minimalistic',
+				'xmlns',
 			],
 			minLength: 4,
 		}],

.vscode/project.code-workspace

@@ -34,6 +34,9 @@
 		"editor.formatOnSave": false,
 		"editor.codeActionsOnSave": {
 			"source.fixAll.eslint": true
+		},
+		"svelte.plugin.svelte.compilerWarnings": {
+			"missing-declaration": "ignore"
 		}
 	}
 }

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,
+    "encodeSvg": true
-    "ssr": true,
-    "render": true,
-    "banner": true,
-    "Banner": true,
-    "load": true,
-    "data": true,
-    "PageData": true
   }
 }

apps/www/.eslintrc.cjs

@@ -5,5 +5,6 @@ module.exports = {
 	],
 	rules: {
 		'@typescript-eslint/no-throw-literal': 'off',
+		'import/default': 'warn',
 	},
 };

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 {}

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>

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']

apps/www/src/lib/state.ts

@@ -0,0 +1 @@
+export const pastSvg = writable('');

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, ' ');
+}

apps/www/vite.config.ts

@@ -46,7 +46,7 @@ export default defineConfig({
 				}),
 			],
 			dirs: [
-				'./src/lib',
+				'./src/lib/components',
 				'./src/routes',
 			],
 			importPathTransform: (importPath) => {