Merge pull request #27 from zschaffer/dev

feat: Updated styling, Vite version for testing

package.json

@@ -21,6 +21,7 @@
 		"@typescript-eslint/eslint-plugin": "^5.27.0",
 		"@typescript-eslint/parser": "^5.27.0",
 		"autoprefixer": "^10.4.7",
+		"cz-conventional-changelog": "3.3.0",
 		"eslint": "^8.19.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-svelte3": "^4.0.0",
@@ -33,12 +34,17 @@
 		"tailwindcss": "^3.1.5",
 		"tslib": "^2.3.1",
 		"typescript": "^4.7.2",
-		"vite": "^2.9.13"
+		"vite": "^3"
 	},
 	"type": "module",
 	"dependencies": {
 		"@sanity/client": "^3.3.2",
 		"@sanity/image-url": "^1.0.1",
 		"@sanity/types": "^2.29.5"
+	},
+	"config": {
+		"commitizen": {
+			"path": "./node_modules/cz-conventional-changelog"
+		}
 	}
 }

src/lib/Layout/Header.svelte

@@ -1,7 +1,7 @@
 <script>
 	export let reset;
 	const { title } = {
-		title: 'hover:bg-blue-300 text-lg font-bold m-12 ml-0 pl-12'
+		title: 'hover:bg-blue-300 text-lg font-bold p-12 pl-12 pt-11 snap-start sticky top-0 bg-white h-28 shadow-sm shadow-white'
 	};
 </script>
 

src/lib/Layout/Products.svelte

@@ -6,7 +6,7 @@
 	const { container, productStyle } = {
 		container: 'pt-4',
 		productList: 'flex flex-col items-start mt-10 text-sm',
-		productStyle: 'w-full text-left'
+		productStyle: 'w-full text-left snap-start snap-always'
 	};
 </script>
 

src/routes/__layout.svelte

@@ -16,15 +16,17 @@
 		filters = { selectedCat: 0, selectedRating: 0 };
 	};
 
-	const { main, sidebar } = {
+	const { main, container, sidebar } = {
 		main: 'flex w-screen h-screen sfmono',
-		sidebar: 'flex flex-col justify-start h-screen overflow-auto w-52 shrink-0'
+		container: 'flex flex-col h-screen justify-start shrink-0 overflow-auto w-56',
+		sidebar: 'pt-1 flex flex-col shrink-0'
 	};
 </script>
 
 <main class={main}>
-	<div class={sidebar}>
+	<div class={container}>
 		<Header {reset} />
+		<div class={sidebar}>
 		{#if !Object.keys($currentProduct).length}
 			<Search />
 			<Filters bind:filters {reset} />
@@ -32,6 +34,7 @@
 		{:else}
 			<Products productsView={$productsView} {currentProduct} />
 		{/if}
+		</div>
 	</div>
 	<slot />
 </main>

src/routes/index.js

@@ -1,14 +1,15 @@
 import { client } from '$lib/sanityClient';
 /** @type {import('@sveltejs/kit').RequestHandler} */
-export async function get() {
+export async function GET() {
 	const products = await client.fetch('*[_type == "product"]');
 	const tags = await client.fetch('*[_type == "tag"]');
 	const emotions = await client.fetch('*[_type == "emotion"]');
 
-
 	const data = {
-		products,tags,emotions
-	}
+		products,
+		tags,
+		emotions
+	};
 
 	if (data) {
 		return {

src/routes/index.svelte

@@ -3,7 +3,7 @@
 	import Feature from '$lib/Feature/Feature.svelte';
 	import { products, productsView, tags, currentProduct, emotions } from '$lib/stores';
 	import { browser } from '$app/env';
-	import {normalize, parseSlug } from '$helpers';
+	import { normalize, parseSlug } from '$helpers';
 
 	export let data;
 	products.set(data.products);

tests/test.ts

@@ -2,5 +2,5 @@ import { expect, test } from '@playwright/test';
 
 test('index page has expected h1', async ({ page }) => {
 	await page.goto('/');
-	expect(await page.textContent('h1')).toBe('Welcome to SvelteKit');
+	expect(await page.textContent('main')).toBe('Welcome to SvelteKit');
 });

vite.config.js

@@ -15,8 +15,6 @@ const config = {
 			allow: ['backend']
 		}
 	}
-	
-
 };
 
 export default config;