style: format code for consistency in Counter.svelte and TextInput.svelte; update layout in +page.svelte; fix import statement in vite.config.js

Author: saaqi

src/lib/components/Counter.svelte

@@ -3,10 +3,7 @@
 	let count = $state(0);
 	const times = $derived(count == 1 ? 'time' : 'times');
 
-	const { 
-		btnStyle = 'primary',
-		className = ''
- } = $props();
+	const { btnStyle = 'primary', className = '' } = $props();
 </script>
 
 <!-- onclick event handler is set to the increment function -->

src/lib/components/TextInput.svelte

@@ -1,11 +1,8 @@
 <script>
-	let {
-		placeholder = 'Enter your text here...',
-	} = $props();
+	let { placeholder = 'Enter your text here...' } = $props();
 	let inputText = $state('');
 </script>
 
-
 <div class="mb-3">
 	<label for="exampleFormControlTextarea1" class="form-label">Insert Reactive Text Here:</label>
 	<textarea

src/routes/+page.svelte

@@ -19,17 +19,17 @@
 	/>
 </svelte:head>
 
-<main class="svh-100">
+<main class="svh-100 py-5">
 	<div class="container">
-		<div class="row gap-4">
-			<h1 class="h2">Welcome to SvelteKit + Bootstrap by Saaqi</h1>
+		<div class="d-flex flex-column gap-3">
+			<h1 class="">Welcome to SvelteKit + Bootstrap by Saaqi</h1>
 
 			<div class="d-flex gap-5">
 				<Logos />
 			</div>
 
-			<div class="container">
-				<div class="row g-3 col-12 col-md-6">
+			<div class="col-12 col-md-6">
+				<div class="row g-2">
 					<div class="col-6">
 						<Counter btnStyle="secondary" />
 					</div>
@@ -42,7 +42,7 @@
 							body="Make muffins give attitude chase mice sweet beast under the bed all of a sudden go crazy behind the couch destroy couch intently stare at the same spot chew ipad power cord bag stretch claw drapes, leave dead animals as gifts attack feet flop over hopped up on goofballs hunt anything that moves hide when guests come over intrigued by the shower stand in front of the computer screen rub face on everything."
 						/>
 					</div>
-					<div class="col-12">
+					<div class="col-12 mb-3">
 						<a
 							href="https://pagespeed.web.dev/report?url={hrefLocation}"
 							target="_blank"
@@ -58,7 +58,6 @@
 				</div>
 			</div>
 
-
 			<p>
 				Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation
 			</p>

vite.config.js

@@ -3,7 +3,7 @@ import { defineConfig } from 'vite';
 import { sveltekit } from '@sveltejs/kit/vite';
 import webfontDownload from 'vite-plugin-webfont-dl';
 // import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';
-import htmlPurge from 'vite-plugin-purgecss'
+import htmlPurge from 'vite-plugin-purgecss';
 import autoprefixer from 'autoprefixer';
 import cssnano from 'cssnano';
 const bootstrap = 'node_modules/bootstrap';
@@ -41,9 +41,10 @@ export default defineConfig({
 		}),
 
 		/* ## Download Google Fonts and attach them with production build for offline use */
-		IN_PRODUCTION && webfontDownload([
-			'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'
-		])
+		IN_PRODUCTION &&
+			webfontDownload([
+				'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'
+			])
 	],
 
 	css: {
@@ -56,7 +57,7 @@ export default defineConfig({
 			plugins: [
 				// --- CSSNano is a modern CSS minifier based on the PostCSS ecosystem.
 				cssnano({
-					preset: ["default", { discardComments: { removeAll: true } }],
+					preset: ['default', { discardComments: { removeAll: true } }]
 				}),
 				// --- Autoprefixer is used to add vendor prefixes to CSS rules using values from "Can I Use".
 				autoprefixer