vowel 0.1.29 → 0.1.31

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vowel",
-	"version": "0.1.29",
+	"version": "0.1.31",
 	"bin": "./bin.js",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/components/DefaultStyles.css

@@ -287,47 +287,47 @@ article.item dl.icon {
 	order: -1;
 }
 
-aside.note {
-	&.note {
-		--icon: 'ℹ️';
-		--rgb: 71, 139, 230;
-	}
+aside.alert.note {
+	--icon: 'ℹ️';
+	--rgb: 71, 139, 230;
+}
 
-	&.tip {
-		--icon: '💡';
-		--rgb: 87, 171, 90;
-	}
+aside.alert.tip {
+	--icon: '💡';
+	--rgb: 87, 171, 90;
+}
 
-	&.important {
-		--icon: '💬';
-		--rgb: 152, 110, 226;
-	}
+aside.alert.important {
+	--icon: '💬';
+	--rgb: 152, 110, 226;
+}
 
-	&.warning {
-		--icon: '⚠️';
-		--rgb: 198, 144, 38;
-	}
+aside.alert.warning {
+	--icon: '⚠️';
+	--rgb: 198, 144, 38;
+}
 
-	&.caution {
-		--icon: '⛔️';
-		--rgb: 229, 83, 75;
-	}
+aside.alert.caution {
+	--icon: '⛔️';
+	--rgb: 229, 83, 75;
+}
 
+aside.alert {
 	border-left: 3px solid rgb(var(--rgb));
 	padding: 1.5rem 2rem;
 	background: rgba(var(--rgb), 0.04);
+}
 
-	h2 {
-		color: rgb(var(--rgb));
-	}
+aside.alert h2 {
+	color: rgb(var(--rgb));
+}
 
-	h2:before {
-		font-size: 0.8em;
-		margin-right: 0.7rem;
-		opacity: 0.9;
-	}
+aside.alert h2:before {
+	font-size: 0.8em;
+	margin-right: 0.7rem;
+	opacity: 0.9;
+}
 
-	h2:before {
-		content: var(--icon);
-	}
+aside.alert h2:before {
+	content: var(--icon);
 }

package/src/lib/components/Markdown/index.svelte

@@ -122,7 +122,7 @@
 				</ol>
 			</section>
 		{:else if node.type === 'containerDirective' && noteTypes[node.name]}
-			<aside class={`note ${node.name}`}>
+			<aside class={`alert ${node.name}`}>
 				<h2>
 					{noteTypes[node.name]}
 				</h2>

package/src/routes/[...path]/+page.svelte

@@ -23,7 +23,10 @@
 		default: DefaultStyles
 	};
 
-	let { data } = $props();
+	// propData is a workaround due to a seeming bug in Svelte
+	let { data: propData } = $props();
+
+	const data = $state(JSON.parse(JSON.stringify(propData, null, 2)))
 
 	const { website, folderName } = $derived(data);