Contribute page UI development (#9)

* Loading general issues

* Language and Platforms

* Filtered issues

* Filter working fine

* Category UI fix

* Title count

* Platform bg remove

* Contribute cards and row UI

* Contribute page responsive fix

* Added transition animation

* Fix path

.github/workflows/fetch.yml

@@ -29,7 +29,7 @@ jobs:
         id: fetchIssues
         run: |
           node ./content/issues/fetchIssues.js > ./content/issues/issues.json
-          cp ./content/issues/issues.json issues.json.res
+          cp ./content/issues/issues.json ./content/issues/issues.json.res
 
       - name: Push into Git
         run: |-

src/lib/components/elements/Category.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Issue } from '$utils/constants'
+	import Icon from '@iconify/svelte'
+
+	export let issue: Issue
+
+	const category: Record<string, { icon: string; color: string }> = {
+		enhancement: { icon: 'mdi:settings', color: '#FFE352' },
+		'good first issue': { icon: 'mdi:git-issue', color: '#65a30d' },
+		feature: { icon: 'mdi:star', color: '#56DD9E' },
+		bug: { icon: 'ri:bug-fill', color: '#FF985F' }
+	}
+</script>
+
+<div class="flex w-fit flex-col gap-1">
+	{#if issue.labels}
+		{#each issue.labels as label}
+			<div
+				class="flex h-6 w-fit items-center gap-1 rounded-lg px-2 text-black lg:h-7"
+				style="background-color: {category[label].color};"
+			>
+				<Icon icon={category[label].icon} />
+				<span class="capitalize">
+					{label}
+				</span>
+			</div>
+		{/each}
+	{/if}
+</div>

src/lib/components/elements/ContributeRow.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Issue } from '$utils/constants'
+	import Category from '$lib/components/elements/Category.svelte'
+	import Language from '$lib/components/elements/Language.svelte'
+	import Platform from '$lib/components/elements/Platform.svelte'
+
+	export let issue: Issue
+
+	const gotoIssue = () => {
+		window.open(issue.repo + '/issues/' + issue.number, '_blank')
+	}
+</script>
+
+<button
+	on:click={gotoIssue}
+	class="flex cursor-pointer flex-col gap-5 rounded-lg bg-arkDeep px-6 py-5 text-white hover:bg-arkDeep2"
+>
+	<p class="max-w-full truncate text-start text-xl">{issue.title}</p>
+
+	<div class="flex flex-col-reverse gap-2 sm:flex-row sm:gap-10">
+		<div class="flex flex-row gap-3 sm:gap-10">
+			<div class="flex flex-col gap-1">
+				<p class="text-start font-bold">Language</p>
+				<Language {issue} />
+			</div>
+			<div class="flex flex-col gap-1">
+				<p class="text-start font-bold">Platforms</p>
+				<Platform {issue} />
+			</div>
+		</div>
+		<div class="flex flex-col gap-1">
+			<p class="text-start font-bold">Category</p>
+			<Category {issue} />
+		</div>
+	</div>
+</button>

src/lib/components/elements/Dropdown.svelte

@@ -1,22 +1,29 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte'
+	import { slide } from 'svelte/transition'
 
 	export let title = ''
 	export let items: string[] = []
 	export let values: string[] = []
 
 	let showList = false
+
+	$: label = values.length > 1 ? `${values[0]} + ${values.length - 1}` : values.toString()
 </script>
 
-<div class="relative w-36">
+<div class="relative w-44">
 	<button
-		class="flex h-9 w-full items-center justify-between rounded bg-arkGray2 px-2 text-arkGray5 focus:border focus:border-arkOrange"
+		class="flex h-9 w-full items-center justify-between truncate rounded bg-arkGray2 px-2 capitalize text-arkGray5 focus:border focus:border-arkOrange"
 		on:click={() => (showList = !showList)}
-		>{title}
+	>
+		{label ? label : title}
 		<Icon icon={showList ? 'mdi:chevron-up' : 'mdi:chevron-down'} width="24px" />
 	</button>
 	{#if showList}
-		<div class="absolute top-10 flex w-full flex-col items-center bg-arkGray2 py-2">
+		<div
+			transition:slide={{ axis: 'y', duration: 200 }}
+			class="absolute top-10 flex w-full flex-col items-center bg-arkGray2 py-2"
+		>
 			{#each items as item}
 				<label
 					class="flex w-full cursor-pointer flex-row items-center justify-between p-2 hover:bg-arkGray"

src/lib/components/elements/Language.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Issue } from '$utils/constants'
+	import Icon from '@iconify/svelte'
+
+	export let issue: Issue
+
+	const languages: Record<string, string> = {
+		Rust: 'skill-icons:rust',
+		Kotlin: 'devicon:kotlin',
+		Svelte: 'skill-icons:svelte',
+		TypeScript: 'skill-icons:typescript'
+	}
+</script>
+
+<div class="flex w-fit flex-row gap-2">
+	{#each issue.languages as language}
+		<div class="flex h-7 flex-row items-center gap-1 rounded-md bg-arkDeep2 px-2">
+			<Icon icon={languages[language]} />
+			{language}
+		</div>
+	{/each}
+</div>

src/lib/components/elements/Platform.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Issue } from '$utils/constants'
+	import Icon from '@iconify/svelte'
+
+	export let issue: Issue
+
+	const platforms: Record<string, string> = {
+		Desktop: 'devicon:windows8',
+		Linux: 'flat-color-icons:linux',
+		Android: 'devicon:android',
+		OSX: 'si:apple-fill'
+	}
+</script>
+
+<div class="flex w-fit flex-row gap-2">
+	{#if issue && issue.platforms}
+		{#each issue.platforms as platform}
+			<div class="flex h-7 items-center">
+				<Icon icon={platforms[platform]} color={platform == 'OSX' ? 'white' : ''} />
+			</div>
+		{/each}
+	{/if}
+</div>

src/routes/contribute/+page.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
+	import Category from '$lib/components/elements/Category.svelte'
+	import ContributeRow from '$lib/components/elements/ContributeRow.svelte'
 	import Cta from '$lib/components/elements/CTA.svelte'
 	import Dropdown from '$lib/components/elements/Dropdown.svelte'
+	import Language from '$lib/components/elements/Language.svelte'
+	import Platform from '$lib/components/elements/Platform.svelte'
 	import Head from '$lib/components/layouts/Head.svelte'
 	import Title from '$lib/components/Title.svelte'
 	import { config } from '$lib/config'
@@ -9,39 +13,60 @@
 
 	export let data
 
+	let hoverGithub = false
+	let issues: Issue[]
+	let selectedLanguages: string[] = []
+	let selectedPlatforms: string[] = []
+	let selectedCategory: string[] = []
+
 	$: issues = JSON.parse(data.data).default
 
+	$: generalIssues = [
+		...new Set(issues.filter((issue: Issue) => !issue.labels.length).flat())
+	] as Issue[]
 	$: languages = [...new Set(issues.map((issue: Issue) => issue.languages).flat())] as string[]
 	$: platforms = [...new Set(issues.map((issue: Issue) => issue.platforms).flat())] as string[]
 	$: categories = [...new Set(issues.map((issue: Issue) => issue.labels).flat())] as string[]
 
-	let hoverGithub = false
+	$: filteredIssues = issues.filter((issue) => {
+		const languageMatch =
+			selectedLanguages.length === 0 ||
+			issue.languages.some((lang) => selectedLanguages.includes(lang))
+		const platformMatch =
+			selectedPlatforms.length === 0 ||
+			issue.platforms.some((platform) => selectedPlatforms.includes(platform))
+		const categoryMatch =
+			selectedCategory.length === 0 ||
+			issue.labels.some((label) => selectedCategory.includes(label))
 
-	// Track selected items
-	let selectedLanguages: string[] = []
-	let selectedPlatforms: string[] = []
-	let selectedCategory: string[] = []
+		return languageMatch && platformMatch && categoryMatch
+	})
+	$: hasFilter = selectedLanguages.length || selectedPlatforms.length || selectedCategory.length
+
+	const gotoIssue = (issue: Issue) => {
+		window.open(issue.repo + '/issues/' + issue.number, '_blank')
+	}
 </script>
 
 <Head title="Contribute" />
 
-<div class="flex h-full w-full flex-col items-center bg-arkGray bg-opacity-95">
+<div class="flex h-full w-full flex-col items-center bg-arkGray bg-opacity-95 px-4 lg:px-0">
 	<div
-		class="mx-auto mt-10 flex w-full max-w-6xl flex-row justify-between rounded-md bg-arkGray2 px-4 py-6 text-white"
+		class="mt-10 flex w-full max-w-6xl flex-col justify-between rounded-md bg-arkGray2 px-4 py-6 text-white lg:flex-row"
 	>
 		<div>
 			<p class="text-2xl">Research</p>
 		</div>
 
 		<div class="flex flex-row gap-3">
-			<Cta text="View documentation" />
+			<Cta text="View documentation" classes="!text-base lg:!text-xl" />
 
 			<div class="flex items-center rounded-lg bg-white pr-2">
 				<Cta
 					on:hover={(e) => (hoverGithub = e.detail)}
 					target="_blank"
 					text="View Github"
-					classes="px-2"
+					classes="px-2 !text-base lg:!text-xl"
 					url={config.github}
 				/>
 				<Icon
@@ -57,37 +82,45 @@
 		<Title title="Contribute" h2 />
 	</div>
 
-	<div class="flex w-full max-w-6xl flex-col text-white">
-		<div class="flex flex-row gap-3">
-			<Dropdown items={languages} values={selectedLanguages} title="Language" />
-			<Dropdown items={platforms} values={selectedPlatforms} title="Platforms" />
-			<Dropdown items={categories} values={selectedCategory} title="Category" />
+	<div class="flex w-full max-w-6xl flex-col gap-5 text-white">
+		<div class="grid grid-cols-2 flex-row gap-3 sm:flex">
+			<Dropdown items={languages} bind:values={selectedLanguages} title="Language" />
+			<Dropdown items={platforms} bind:values={selectedPlatforms} title="Platforms" />
+			<Dropdown items={categories} bind:values={selectedCategory} title="Category" />
 		</div>
-		<table class="mt-5 hidden border-separate border-spacing-y-3 lg:table">
+		<table class="hidden table-fixed border-separate border-spacing-y-3 lg:table">
 			<thead>
 				<tr>
-					<td class="w-[45%]">Titile</td>
+					<td class="">Titile</td>
 					<td>Language</td>
 					<td>Platforms</td>
 					<td>Category</td>
 				</tr>
 			</thead>
 
 			<tbody>
-				<tr class="">
-					<td>Sample text</td>
-					<td>Sample text</td>
-					<td>Sample text</td>
-					<td>Sample text</td>
-				</tr>
-				<tr>
-					<td>Sample text</td>
-					<td>Sample text</td>
-					<td>Sample text</td>
-					<td>Sample text</td>
-				</tr>
+				{#each hasFilter ? filteredIssues : generalIssues as issue}
+					<tr class="" on:click={() => gotoIssue(issue)}>
+						<td class="truncate lg:max-w-80 xl:max-w-[400px]">{issue.title}</td>
+						<td class="">
+							<Language {issue} />
+						</td>
+						<td>
+							<Platform {issue} />
+						</td>
+						<td>
+							<Category {issue} />
+						</td>
+					</tr>
+				{/each}
 			</tbody>
 		</table>
+
+		<div class="flex flex-col gap-4 lg:hidden">
+			{#each hasFilter ? filteredIssues : generalIssues as issue}
+				<ContributeRow {issue} />
+			{/each}
+		</div>
 	</div>
 </div>
 

tailwind.config.js

@@ -24,7 +24,8 @@ export default {
 				arkGray5: '#F5F4F2',
 				arkGray6: '#F9F9F9',
 
-				arkDeep: '#444444'
+				arkDeep: '#444444',
+				arkDeep2: '#4F4F4F'
 			}
 		}
 	},