Merge pull request #726 from CodeCrowCorp/dev

v0.1.03
CodeCrowCorp · Sep 30, 2023 · a3fe7f4 · a3fe7f4
2 parents e3b51d5 + d154f8a
commit a3fe7f4
Show file tree

Hide file tree

Showing 13 changed files with 313 additions and 110 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.1.01",
+	"version": "0.1.03",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",

diff --git a/src/lib/assets/icons/IconLink.svelte b/src/lib/assets/icons/IconLink.svelte
@@ -4,7 +4,7 @@
 	viewBox="0 0 24 24"
 	stroke-width="1.5"
 	stroke="currentColor"
-	class="w-6 h-6">
+	class="w-8 h-8">
 	<path
 		stroke-linecap="round"
 		stroke-linejoin="round"

diff --git a/src/lib/assets/svg-json/image_urls.json b/src/lib/assets/svg-json/image_urls.json
@@ -81,6 +81,7 @@
 	"Redux": "/category-optimized/web2/redux.svg",
 	"Ruby Gem": "/category-optimized/web2/ruby-gem.svg",
 	"Ruby": "/category-optimized/web2/ruby-programming-language.svg",
+	"Rust-Lang": "/category-optimized/web2/rust-lang.svg",
 	"Salesforce": "/category-optimized/web2/salesforce.svg",
 	"Sass": "/category-optimized/web2/sass.svg",
 	"Selenium": "/category-optimized/web2/selenium.svg",

diff --git a/src/lib/assets/svg-json/web2.json b/src/lib/assets/svg-json/web2.json
@@ -81,6 +81,7 @@
 	"Redux": "/category-optimized/web2/redux.svg",
 	"Ruby Gem": "/category-optimized/web2/ruby-gem.svg",
 	"Ruby": "/category-optimized/web2/ruby-programming-language.svg",
+	"Rust-Lang": "/category-optimized/web2/rust-lang.svg",
 	"Salesforce": "/category-optimized/web2/salesforce.svg",
 	"Sass": "/category-optimized/web2/sass.svg",
 	"Selenium": "/category-optimized/web2/selenium.svg",

diff --git a/src/lib/components/Browse/Sections/ItemCarousel.svelte b/src/lib/components/Browse/Sections/ItemCarousel.svelte
@@ -11,9 +11,9 @@
 </script>
 
 <a
-	class="swiper-slide rounded-md"
+	class="swiper-slide rounded-md bg-black h-fit"
 	href="/channel/{channel._id}"
-	style="background-image: url({bg_cover});">
+	style="background-image: url({bg_cover}); background-size: cover; background-repeat: no-repeat;">
 	<div class="flex flex-col justify-between p-3 w-full h-full">
 		<div class="flex flex-row justify-between">
 			<div class="flex gap-2 mb-3">

diff --git a/src/lib/components/Profile/DrawerEditProfile.svelte b/src/lib/components/Profile/DrawerEditProfile.svelte
@@ -2,11 +2,40 @@
 	import { enhance } from '$app/forms'
 	import { page } from '$app/stores'
 	import DrawerAddCategory from '$lib/components/Browse/DrawerAddCategory.svelte'
+	import IconLink from '$lib/assets/icons/IconLink.svelte'
 	import { category_list } from '$lib/stores/channelStore'
-	import { createEffect } from '$lib/utils'
+	import { createEffect, objectMonitor } from '$lib/utils'
 
 	export let showDrawer: boolean
 	export let profile: any
+	
+	let isProfileUpdated = objectMonitor($page.data.profile)
+
+	let inputFields = [...profile.urls]
+
+	const removeInputField = (index: number) => {
+		inputFields = inputFields.filter((_, i) => i !== index)
+	}
+
+	const addInputField = () => {
+		const lastField = inputFields[inputFields.length - 1]
+
+		if (isValidURL(lastField)) {
+			inputFields = [...inputFields, '']
+		}
+	}
+
+	let isLastFieldValid = false
+
+	const isValidURL = (url: string) => {
+		const urlPattern = /^https?:\/\/\S+$/i
+		return urlPattern.test(url)
+	}
+
+	$: {
+		const lastField = inputFields[inputFields.length - 1]
+		isLastFieldValid = isValidURL(lastField)
+	}
 
 	let params = $page.params
 
@@ -54,6 +83,14 @@
 			}
 		}
 	}, [$page.params])
+
+	$: useOueryEffect(() => {
+		if(isProfileUpdated($page.data.profile)){
+			if (submitBtn) submitBtn.disabled = false
+			toggleDrawer()
+		}
+	}, [$page.data.profile])
+
 </script>
 
 <div class="drawer drawer-end absolute w-full z-20 top-0 right-0">
@@ -71,6 +108,7 @@
 			<DrawerAddCategory bind:showAddCategory bind:categories={profile.category} />
 		{:else}
 			<form
+				enctype="multipart/form-data"
 				class="flex h-full p-5"
 				action="?/update-profile"
 				method="post"
@@ -82,98 +120,147 @@
 				on:submit={() => {
 					submitBtn.disabled = true
 				}}>
-				<div class="bg-base-200 w-80 md:w-[30rem] h-full flex flex-col rounded-lg">
+				<div class="bg-base-200 w-80 md:w-[30rem] h-max flex flex-col rounded-lg">
 					<p class="p-3 text-xl mb-5 pb-2 border-purple-500 font-semibold border-b-2">
 						Update Profile
 					</p>
 					<div class="flex flex-col p-3">
-						<input
-							bind:value={profile.displayName}
-							type="text"
-							name="displayName"
-							id="displayName"
-							required
-							class="input input-primary input-bordered w-full"
-							placeholder="Display name" />
-
-						<input
-							bind:value={profile.username}
-							type="text"
-							name="username"
-							id="username"
-							required
-							class="input input-primary input-bordered mt-5 w-full"
-							placeholder="Username"
-							bind:this={username}
-							on:input={() => {
-								username.setCustomValidity('')
-							}} />
-
-						<input
-							bind:value={profile.website}
-							type="url"
-							name="website"
-							id="website"
-							class="input input-primary input-bordered mt-5 w-full"
-							placeholder="Your website URL" />
-
+						<div class="form-control w-full">
+							<label class="label">
+								<span class="label-text">Display Name</span>
+							</label>
+							<input
+								bind:value={profile.displayName}
+								type="text"
+								name="displayName"
+								id="displayName"
+								required
+								class="input input-primary input-bordered"
+								placeholder="Display name" />
+						</div>
 						<div class="form-control mt-5 w-full">
-							<!-- svelte-ignore a11y-label-has-associated-control -->
 							<label class="label">
-								<span class="label-text">Banner</span>
+								<span class="label-text">Username</span>
 							</label>
 							<input
-								type="file"
-								accept="image/png, image/jpeg"
-								name="banner"
-								id="banner"
-								class="file-input file-input-bordered file-input-primary w-full" />
+								bind:value={profile.username}
+								type="text"
+								name="username"
+								id="username"
+								required
+								class="input input-primary input-bordered"
+								placeholder="Username"
+								bind:this={username}
+								on:input={() => {
+									username.setCustomValidity('')
+								}} />
 						</div>
 
 						<div class="form-control mt-5 w-full">
 							<!-- svelte-ignore a11y-label-has-associated-control -->
 							<label class="label">
-								<span class="label-text">Avatar</span>
+								<span class="label-text">Social Links</span>
 							</label>
-							<input
-								type="file"
-								accept="image/png, image/jpeg"
-								name="avatar"
-								id="avatar"
-								class="file-input file-input-bordered file-input-primary w-full" />
-						</div>
 
-						<div class="relative">
-							<input
-								on:click={() => (showAddCategory = true)}
-								type="text"
-								name="category-search"
-								placeholder={profile?.category?.length ? '' : 'Category'}
-								class="input input-primary input-bordered mt-5 w-full" />
-							<span class="absolute right-0 top-1/2 text-gray-400 pr-3">({maxCategoryLabel})</span>
-							<span class="absolute flex flex-row gap-2 left-0 top-1/2 pl-5">
-								{#if profile?.category?.length}
-									{#each profile?.category as icon}
-										<img src={$category_list[icon]} alt="" class="h-5 w-5" />
-									{/each}
-								{/if}
-							</span>
-						</div>
+							{#each inputFields as url, index (index)}
+								<div class="flex flex-1 items-baseline mb-2 gap-3 w-full">
+									<div class="relative w-full">
+										<input
+											bind:value={inputFields[index]}
+											type="url"
+											name={`urls`}
+											id={`urls`}
+											class="input input-primary input-bordered w-full"
+											placeholder="Social URL" />
+										<div class="bg-primary w-max absolute right-0 top-0 p-2 h-[48px] rounded-r-lg">
+											<IconLink />
+										</div>
+									</div>
+									{#if index === inputFields.length - 1 && inputFields.length < 10}
+										<button
+											type="button"
+											class="btn btn-primary text-white"
+											disabled={!isLastFieldValid}
+											on:click={addInputField}>
+											+
+										</button>
+									{:else}
+										<button
+											type="button"
+											class="btn btn-neutral text-white"
+											on:click={() => removeInputField(index)}>
+											-
+										</button>
+									{/if}
+								</div>
+							{/each}
 
-						<textarea
-							bind:value={profile.bio}
-							id="bio"
-							name="bio"
-							class="block w-full mt-5 textarea h-28 input-primary"
-							placeholder="Your bio here" />
-					</div>
+							<div class="form-control mt-5 w-full">
+								<!-- svelte-ignore a11y-label-has-associated-control -->
+								<label class="label">
+									<span class="label-text">Banner</span>
+								</label>
+								<input
+									type="file"
+									accept="image/png, image/jpeg"
+									name="banner"
+									id="banner"
+									class="file-input file-input-bordered file-input-primary w-full" />
+							</div>
 
-					<div class="flex flex-row gap-2 mt-auto md:mb-4 p-3">
-						<button
-							type="button"
-							class="btn btn-neutral text-white grow"
-							on:click={() => toggleDrawer()}>Cancel</button>
-						<button type="submit" class="btn btn-primary grow" bind:this={submitBtn}>Save</button>
+							<div class="form-control mt-5 w-full">
+								<!-- svelte-ignore a11y-label-has-associated-control -->
+								<label class="label">
+									<span class="label-text">Avatar</span>
+								</label>
+								<input
+									type="file"
+									accept="image/png, image/jpeg"
+									name="avatar"
+									id="avatar"
+									class="file-input file-input-bordered file-input-primary w-full" />
+							</div>
+
+							<div class="form-control mt-5 w-full relative">
+								<label class="label">
+									<span class="label-text">Category</span>
+								</label>
+								<input
+									on:click={() => (showAddCategory = true)}
+									type="text"
+									name="category-search"
+									placeholder={profile?.category?.length ? '' : 'Category'}
+									class="input input-primary input-bordered" />
+								<span class="absolute right-0 top-1/2 text-gray-400 pr-3"
+									>({maxCategoryLabel})</span>
+								<span class="absolute flex flex-row gap-2 left-0 top-1/2 pl-5">
+									{#if profile?.category?.length}
+										{#each profile?.category as icon}
+											<img src={$category_list[icon]} alt="" class="h-5 w-5" />
+										{/each}
+									{/if}
+								</span>
+							</div>
+							<div class="form-control mt-5 w-full">
+								<label class="label">
+									<span class="label-text">Bio</span>
+								</label>
+								<textarea
+									bind:value={profile.bio}
+									id="bio"
+									name="bio"
+									class="block textarea h-28 input-primary"
+									placeholder="Your bio here" />
+							</div>
+						</div>
+
+						<div class="flex flex-row gap-2 mt-auto md:mb-4 p-3">
+							<button
+								type="button"
+								class="btn btn-neutral text-white grow"
+								on:click={() => toggleDrawer()}>Cancel</button>
+							<button type="submit" class="btn btn-primary grow" bind:this={submitBtn}>Save</button>
+						</div>
 					</div>
 				</div>
 			</form>

diff --git a/src/lib/components/Profile/Elements/UserDetails.svelte b/src/lib/components/Profile/Elements/UserDetails.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import IconLink from '$lib/assets/icons/IconLink.svelte'
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
+	import Favicon from '$lib/components/Profile/Favicon.svelte'
 	import { category_list } from '$lib/stores/channelStore'
 	import { colorFromLevel, levelAndBarValueFromExp } from '$lib/utils'
 	import { onMount } from 'svelte'
@@ -43,21 +44,28 @@
 			{profile.bio || ''}
 		</div>
 	{/if}
-	<div class="pt-4 mb-2">
-		{#if profile.website}
-			<div class="flex gap-2 justify-center p-4">
-				<IconLink />
-				<a class="link link-info" href={profile.website} target="_blank" rel="noreferrer"
-					>{profile.website || ''}</a>
+
+	<div class="pt-4 mb-2 flex flex-col">
+		<div class="card bg-base-200 p-3 tooltip tooltip-left" data-tip="social">
+			<div
+				class="flex gap-2 justify-center items-center lg:overflow-hidden overflow-auto max-w-full">
+				{#each profile.urls || [] as url, index (index)}
+					{#if url}
+						<Favicon {url} />
+					{/if}
+				{/each}
 			</div>
-		{/if}
+		</div>
+
 		{#if profile.category?.length}
-			<div class="flex gap-2 justify-center">
-				{#each profile.category as category}
-					<div class="tooltip" data-tip={category}>
-						<img src={$category_list[category]} alt="" class="h-7 w-7 m-1" />
-					</div>
-				{/each}
+			<div class="card bg-base-200 p-3 mt-4 tooltip tooltip-left" data-tip="category">
+				<div class="flex gap-2 justify-center">
+					{#each profile.category as category}
+						<div class="tooltip" data-tip={category}>
+							<img src={$category_list[category]} alt="" class="h-7 w-7 m-1" />
+						</div>
+					{/each}
+				</div>
 			</div>
 		{/if}
 	</div>