Auto-notes

docs/src/lib/auto-notes.ts

@@ -0,0 +1,20 @@
+export type Note = {
+	text: string; /* the text of the note */
+	search?: string | RegExp; /* default '' - diplays for any source */
+	layers?: ('svg' | 'canvas' | 'html')[]; /* default [] = shows for all layers */
+	type?: 'basic' | 'note' | 'tip' | 'warning' | 'caution'; /* default 'warning' */
+};
+
+export const autoNotes: Note[] = [
+	// {
+	// 	text: 'your source include the word "createDateSeries" and your layer is "canvas"',
+	// 	search: '/createDateSeries/',
+	// 	layers: ['canvas'],
+	// 	type: 'caution'
+	// },
+	// {
+	// 	text: 'your source include the word "integer" and your layer is "canvas"',
+	// 	search: '/integer/',
+	// 	layers: ['canvas']
+	// }
+];

docs/src/lib/components/AutoNotes.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { getSettings } from 'layerchart';
+	import Blockquote from './Blockquote.svelte';
+	import { autoNotes, type Note } from '$lib/auto-notes';
+	import { fly } from 'svelte/transition';
+
+	let { source }: { source: string } = $props();
+
+	const settings = getSettings();
+	let layer = $derived(settings.layer);
+
+	function matchesSource(search: string | RegExp, src: string): boolean {
+		if (search instanceof RegExp) return search.test(src);
+		const slashPattern = search.match(/^\/(.+)\/$/);
+		return slashPattern ? new RegExp(slashPattern[1]).test(src) : false;
+	}
+
+	const notes = $derived(
+		autoNotes.filter(
+			(note: Note) =>
+				(!note.layers || note.layers.length === 0 || note.layers?.includes(layer)) &&
+				(!note.search || matchesSource(note?.search ?? '', source))
+		)
+	);
+</script>
+
+{#each notes as { text, type }, i (i)}
+	<div in:fly={{ x: 300, delay: i * 300 }}>
+		<Blockquote type={type ?? 'warning'}>
+			<p>{text}</p>
+		</Blockquote>
+	</div>
+{/each}

docs/src/lib/components/Blockquote.svelte

@@ -1,17 +1,65 @@
 <script lang="ts">
 	import { cls } from '@layerstack/tailwind';
+	import InfoIcon from '~icons/lucide/info';
+	import LightbulbIcon from '~icons/lucide/lightbulb';
+	import WarningIcon from '~icons/lucide/triangle-alert';
+	import CautionIcon from '~icons/lucide/octagon-alert';
 
-	import LucideInfo from '~icons/lucide/info';
+	const { children, type = 'basic' } = $props();
 
-	const { children } = $props();
+	const typeClasses = new Map([
+		[
+			'basic',
+			{
+				container: 'bg-primary/10 border-primary/30 border-l-primary text-primary',
+				icon: 'text-primary'
+			}
+		],
+		[
+			'note',
+			{
+				container: 'bg-blue-500/10 border-blue-500/30 border-l-blue-500 text-blue-500',
+				icon: 'text-blue-500'
+			}
+		],
+		[
+			'tip',
+			{
+				container: 'bg-success/10 border-success/30 border-l-success text-success',
+				icon: 'text-success'
+			}
+		],
+		[
+			'warning',
+			{
+				container: 'bg-warning/10 border-warning/30 border-l-warning text-warning',
+				icon: 'text-warning'
+			}
+		],
+		[
+			'caution',
+			{
+				container: 'bg-danger/10 border-danger/30 border-l-danger text-danger',
+				icon: 'text-danger'
+			}
+		]
+	]);
+
+	const classes = $derived(typeClasses.get(type) ?? typeClasses.get('basic')!);
 </script>
 
 <div
 	class={cls(
-		'bg-primary/10 border border-l-[6px] border-primary/30 border-l-primary text-primary px-4 py-2 my-4 rounded-sm flex items-center gap-2 text-sm',
-		'[&>a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:decoration-primary/50 [&>a]:underline-offset-2'
+		'border border-l-[6px] px-4 py-2 my-4 rounded-sm flex items-center gap-2 text-sm',
+		'[&>a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:underline-offset-2',
+		classes.container
 	)}
 >
-	<LucideInfo class="text-primary" />
+	{#if type === 'note'}<InfoIcon class={classes.icon} />
+	{:else if type === 'tip'}<LightbulbIcon class={classes.icon} />
+	{:else if type === 'warning'}<WarningIcon class={classes.icon} />
+	{:else if type === 'caution'}<CautionIcon class={classes.icon} />
+	{:else}<InfoIcon class={classes.icon} />
+	{/if}
 	{@render children()}
 </div>

docs/src/lib/components/Example.svelte

@@ -38,6 +38,7 @@
 		getChartSvgString,
 		getSettings
 	} from 'layerchart';
+	import AutoNotes from './AutoNotes.svelte';
 
 	const settings = getSettings();
 	import { movable } from '$lib/actions/movable';
@@ -439,6 +440,7 @@
 		/>
 	</div>
 {/if}
+<AutoNotes source={example?.source ?? ''} />
 
 <Dialog bind:open={pngDialogOpen} on:close={() => (pngDialogOpen = false)} class="max-w-md">
 	<div slot="title">{pngAction === 'copy' ? 'Copy as PNG' : 'Export as PNG'}</div>