Feat: JsonLd product metadata (#2)

* Generates JSON ld structured metadata from a product & appends to head

* Updated IProduct & IVariation interface

* Added IProductResponse & IProductsResponse interfaces

* Fixed sitemap urls having to many protocols

src/routes/warehouse/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import ProductList from './WarehouseProductList.svelte';
-  import type IProduct from '$lib/interfaces/IProduct';
   import Button from '$lib/components/Button.svelte';
+  import type { IProduct } from '$lib/interfaces/IProduct';
   import type { PageData } from './$types';
 
   export let data: PageData;

src/routes/warehouse/WarehouseProductList.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import type IProduct from '$lib/interfaces/IProduct';
+  import type { IProduct } from '$lib/interfaces/IProduct';
 
   export let products: Array<IProduct>;
 
@@ -29,10 +29,10 @@
 
         <td class="name-and-price">
           <p><a href="/warehouse/{product.product_no}">{product.name}</a></p>
-          <p>{product.variation_count} variation(s)</p>
+          <p>{product?.variations?.length} variation(s)</p>
         </td>
 
-        <td class="stock-column">{product.sum_stock}</td>
+        <td class="stock-column">{product?.sum_stock}</td>
 
         <td class="date-column"
           >{new Intl.DateTimeFormat('nb-NO', { dateStyle: 'short', timeStyle: 'short' }).format(

src/routes/warehouse/[id]/+page.svelte

@@ -3,7 +3,7 @@
   import DetailsSection from './DetailsSection.svelte';
   import Button from '$lib/components/Button.svelte';
   import type { PageServerData } from './$types';
-  import type IProduct from '$lib/interfaces/IProduct';
+  import type { IProduct } from '$lib/interfaces/IProduct';
 
   export let data: PageServerData;
   const product = data.product as IProduct;
@@ -20,7 +20,7 @@
   <img src="{product.image}" alt="Product" />
   <div class="name-and-price">
     <p>{product.name}</p>
-    <p>NOK {product.price}</p>
+    <p>NOK {product?.price}</p>
   </div>
 
   <div class="edit-button">

src/routes/warehouse/[id]/DetailsSection.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type IProduct from '$lib/interfaces/IProduct';
+  import type { IProduct } from '$lib/interfaces/IProduct';
 
   export let product: IProduct;
   export let edit: boolean;

src/routes/warehouse/[id]/PricingSection.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import type IProduct from '$lib/interfaces/IProduct';
-  import type IProductVariation from '$lib/interfaces/IProductVariation';
+  import type { IProduct, IVariation } from '$lib/interfaces/IProduct';
   import Button from '$lib/components/Button.svelte';
   import Badge from '$lib/components/Badge.svelte';
   import BadgeType from '$lib/interfaces/BadgeType';
@@ -10,7 +9,7 @@
   let editingVariationIndex = -1;
 
   interface ISkuResponse {
-    skus: IProductVariation[];
+    skus: IVariation[];
     success: boolean;
   }
 
@@ -19,7 +18,7 @@
     product.variations = response?.skus;
   };
 
-  function setDefault(variation: IProductVariation) {
+  function setDefault(variation: IVariation) {
     if (!product.variations) return;
 
     let url = `/api/product/${product.product_no}/sku/${variation.sku_id}/default_price`;
@@ -60,7 +59,7 @@
       .then(() => (editingVariationIndex = product.variations.length - 1));
   }
 
-  function saveSkuVariation(variation: IProductVariation) {
+  function saveSkuVariation(variation: IVariation) {
     let url = `/api/product/${product.product_no}/sku/${variation?.sku_id}`;
     if (window?.location?.href.includes('localhost')) {
       url = 'http://localhost:30010'.concat(url);
@@ -81,7 +80,7 @@
       .then(() => resetEditingIndex());
   }
 
-  function deleteVariation(variation: IProductVariation) {
+  function deleteVariation(variation: IVariation) {
     console.log('delete it using api', variation);
     let url = `/api/product/${product.product_no}/sku/${variation?.sku_id}`;
     if (window?.location?.href.includes('localhost')) {

src/routes/warehouse/[id]/edit/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Input from '$lib/components/Input.svelte';
-  import type IProduct from '$lib/interfaces/IProduct';
+  import type { IProduct } from '$lib/interfaces/IProduct';
   import type { PageServerData } from './$types';
 
   export let data: PageServerData;
@@ -12,9 +12,9 @@
   <div>
     <h2>Product attributes</h2>
     <Input label="Name" value="{product.name}" required="{false}" />
-    <Input label="Description" value="{product.description}" required="{false}" />
-    <Input label="Subtext" value="{product.subtext}" required="{false}" />
-    <Input label="Color" value="{product.primary_color}" required="{false}" />
+    <Input label="Description" value="{product.description || ''}" required="{false}" />
+    <Input label="Subtext" value="{product.subtext || ''}" required="{false}" />
+    <Input label="Color" value="{product.primary_color || ''}" required="{false}" />
   </div>
 
   <div>