Header fixed at top and UI improvements (#12)

* Indexing pull request for contribute * Fix responsiveness and spaces * Fix spaces and bg color * Ignored pull request * Fixes and improvements * Support button fix * Process image fix * Mobile context menu fix * Update animation * Resizing and UI fix * Type fix
ARK-Builders · Nov 4, 2024 · fcd5d56 · fcd5d56
1 parent bec0bc3
commit fcd5d56
Show file tree

Hide file tree

Showing 21 changed files with 97 additions and 87 deletions.
diff --git a/content/issues/fetchIssues.js b/content/issues/fetchIssues.js
@@ -1,7 +1,9 @@
 import axios from 'axios'
 
 async function callApi() {
-	var issuesList = []
+	let issuesList = []
+	let pullRequestList = []
+
 	try {
 		var repositories = await axios.get(
 			'https://raw.githubusercontent.com/ARK-Builders/website2/main/content/issues/repos-list.json'
@@ -14,6 +16,30 @@ async function callApi() {
 					'https://api.github.com/repos/ARK-Builders/' + repo.name + '/issues'
 				)
 
+				// const pullRequests = await axios.get(
+				// 	'https://api.github.com/repos/ARK-Builders/' + repo.name + '/pulls'
+				// )
+				// if (pullRequests.status === 200) {
+				// 	if (pullRequests.data.length > 0) {
+				// 		for (const pulls of pullRequests.data) {
+				// 			let repoUrl = pulls.url.replace('api.', '').replace('repos/', '')
+				// 			if (pulls.user.login == 'dependabot[bot]') continue
+
+				// 			pullRequestList.push({
+				// 				title: pulls.title,
+				// 				labels: ['pull request'],
+				// 				user: pulls.user.login,
+				// 				user_avatar: pulls.user.avatar_url,
+				// 				date: new Date(pulls.created_at),
+				// 				repo: repoUrl,
+				// 				number: pulls.number,
+				// 				platforms: repo.platforms,
+				// 				languages: repo.languages
+				// 			})
+				// 		}
+				// 	}
+				// }
+
 				if (issues.status === 200) {
 					if (issues.data.length > 0) {
 						for (const issue of issues.data) {

diff --git a/src/lib/components/AppMenus.svelte b/src/lib/components/AppMenus.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
 	import { base } from '$app/paths'
+	import { page } from '$app/stores'
 	import MenuItem from '$lib/components/elements/MenuItem.svelte'
-	import { appList, currentApps } from '$utils/constants'
+	import { currentApps } from '$utils/constants'
 	import Icon from '@iconify/svelte'
 
 	export let link
 </script>
 
 <div class="menus">
 	<a
+		class:underline={$page.url.pathname.includes('/apps')}
+		class:!text-arkOrange={$page.url.pathname.includes('/apps')}
 		href={base + link.href}
 		class="flex items-center p-1 font-medium text-white hover:text-arkOrange dark:text-gray-100 sm:p-2"
 	>

diff --git a/src/lib/components/Blogs.svelte b/src/lib/components/Blogs.svelte
@@ -13,7 +13,6 @@
 	export let subtitle = ''
 	export let posts: Blog[] = []
 	export let tags: any[] = []
-	export let more = true
 	export let search = false
 	export let h2 = false
 	export let count = 0
@@ -30,7 +29,7 @@
 	$: currentPosts = filter ? fuzzySearch(posts, filter) : posts
 </script>
 
-<div class="mx-auto w-full max-w-7xl">
+<div class="mx-auto w-full max-w-7xl px-5 xl:px-0">
 	<div class="space-y-2 pb-8 pt-6 md:space-y-5">
 		<div class="flex w-full justify-center">
 			<Title {title} {subtitle} {h2} />
@@ -58,48 +57,8 @@
 	{#if !currentPosts.length}
 		No post found.
 	{:else}
-		<div class="grid grid-cols-2 gap-4">
+		<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
 			{#each currentPosts as post}
-				<!-- <li class="py-12">
-					<article>
-						<div class="space-y-2 xl:grid xl:grid-cols-4 xl:items-baseline xl:space-y-0">
-							<Author author={post.author} postDate={post.date} />
-							<div class="space-y-5 xl:col-span-3">
-								<div class="space-y-6">
-									<div>
-										<h2 class="text-2xl font-bold leading-8 tracking-tight">
-											<a
-												href={base + `/blog/${post.slug}`}
-												class="text-gray-900 dark:text-gray-100"
-											>
-												{post.title}
-											</a>
-										</h2>
-										<div class="flex flex-wrap">
-											{#each post.tags as tag}
-												<Tag text={tag} />
-											{/each}
-										</div>
-									</div>
-									<div class="prose max-w-none text-gray-500 dark:text-gray-400">
-										{post.summary}
-									</div>
-								</div>
-								{#if more}
-									<div class="text-base font-medium leading-6">
-										<a
-											href={base + `/blog/${post.slug}`}
-											class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
-											aria-label={`Read "${post.title}"`}
-										>
-											Read more &rarr;
-										</a>
-									</div>
-								{/if}
-							</div>
-						</div>
-					</article>
-				</li> -->
 				<BlogItem {post} />
 			{/each}
 		</div>

diff --git a/src/lib/components/elements/BlogItem.svelte b/src/lib/components/elements/BlogItem.svelte
@@ -5,13 +5,15 @@
 	export let post: Blog
 </script>
 
-<div class="flex flex-col gap-3 rounded-xl bg-arkGray5 p-5">
-	<div class="flex flex-col">
-		<p class="text-2xl font-extrabold">{post.title}</p>
-		<p class="font-medium text-arkGray4">{post.date}</p>
+<article>
+	<div class="flex flex-col gap-3 rounded-xl bg-arkGray5 p-5">
+		<div class="flex flex-col">
+			<p class="text-2xl font-extrabold">{post.title}</p>
+			<p class="font-medium text-arkGray4">{post.date}</p>
+		</div>
+		<p>
+			{post.summary}
+		</p>
+		<a href="{base}/blog/{post.slug}" class="font-bold text-arkOrange underline">Read</a>
 	</div>
-	<p>
-		{post.summary}
-	</p>
-	<a href="{base}/blog/{post.slug}" class="font-bold text-arkOrange underline">Read</a>
-</div>
+</article>
diff --git a/src/lib/components/elements/Modal.svelte b/src/lib/components/elements/Modal.svelte
@@ -14,7 +14,7 @@
 		<div
 			in:receive={{ key: id, duration: 200 }}
 			out:send={{ key: id, duration: 200 }}
-			class="relative flex w-4/5 flex-col rounded border bg-white p-2 shadow lg:w-1/4"
+			class="relative flex w-4/5 flex-col rounded border bg-white p-2 shadow lg:w-2/4 xl:w-1/4"
 		>
 			<button
 				class="absolute right-0 top-0 flex w-fit items-center justify-center rounded-full p-[2px] hover:bg-gray-100"

diff --git a/src/lib/components/elements/VideoItem.svelte b/src/lib/components/elements/VideoItem.svelte
@@ -9,7 +9,7 @@
 <a
 	href={videoUrl.replace('watch?v=', 'embed/')}
 	target="_blank"
-	class="flex min-w-60 flex-col rounded-lg"
+	class="flex min-w-56 flex-col rounded-lg"
 >
 	<iframe
 		class="h-full w-full rounded-t-md"

diff --git a/src/lib/components/layouts/Footer.svelte b/src/lib/components/layouts/Footer.svelte
@@ -5,7 +5,7 @@
 	import FooterLogo from '$lib/assets/images/footer-logo.svelte'
 </script>
 
-<footer class="bg-white px-5 pb-10 pt-40 lg:px-5 xl:px-0">
+<footer class="bg-white px-5 pb-10 pt-40 xl:px-0">
 	<div class="mx-auto flex w-full max-w-7xl flex-row gap-10">
 		<div class="flex flex-1 flex-col gap-5">
 			<div class="h-10 w-fit">

diff --git a/src/lib/components/layouts/Header.svelte b/src/lib/components/layouts/Header.svelte
@@ -12,8 +12,10 @@
 	let showMobileMenu = false
 </script>
 
-<header class="sticky top-0 z-10 bg-arkGray bg-opacity-95 px-5 dark:bg-gray-900 xl:px-0">
-	<div class="mx-auto flex h-[72px] items-center justify-between sm:px-8 lg:px-0 xl:max-w-7xl">
+<header
+	class="fixed top-0 z-20 w-full bg-arkGray bg-opacity-90 px-5 backdrop-blur-md dark:bg-gray-900 xl:px-0"
+>
+	<div class="mx-auto flex h-[72px] items-center justify-between lg:px-0 xl:max-w-7xl">
 		<div class="flex flex-row items-center">
 			<a href="{base}/" aria-label={config.headerTitle}>
 				<div class="flex items-center justify-between">
@@ -50,8 +52,9 @@
 				<Icon icon="ic:outline-menu" width="34px" color="white" />
 			</button>
 		</div>
-		{#if showMobileMenu}
-			<MobileMenu bind:showMobileMenu />
-		{/if}
 	</div>
 </header>
+
+{#if showMobileMenu}
+	<MobileMenu bind:showMobileMenu />
+{/if}
diff --git a/src/lib/components/layouts/MobileMenu.svelte b/src/lib/components/layouts/MobileMenu.svelte
@@ -14,7 +14,7 @@
 
 <div
 	transition:slide={{ axis: 'x', duration: 200 }}
-	class="fixed left-0 top-0 flex h-full w-full flex-col gap-3 bg-arkGray2 px-5"
+	class="fixed left-0 top-0 z-20 flex h-full w-full flex-col gap-3 bg-arkGray2 px-5"
 >
 	<div class="absolute right-5 flex flex-row justify-end">
 		<button class="mt-5" on:click={() => (showMobileMenu = !showMobileMenu)}>

diff --git a/src/lib/components/layouts/Transition.svelte b/src/lib/components/layouts/Transition.svelte
@@ -1,10 +1,10 @@
-<script>
+<script lang="ts">
 	import { fly } from 'svelte/transition'
 	export let pathname = ''
 </script>
 
 {#key pathname}
-	<div in:fly={{ x: -5, duration: 500, delay: 500 }}>
+	<div in:fly={{ x: -5, duration: 200, delay: 200 }}>
 		<slot />
 	</div>
 {/key}
diff --git a/src/lib/components/sections/OurApps.svelte b/src/lib/components/sections/OurApps.svelte
@@ -33,18 +33,19 @@
 			<p class="text-center text-4xl font-bold lg:text-6xl">Our Apps</p>
 		</div>
 
-		<div class="flex w-full flex-col gap-7 lg:flex-row">
+		<div class="flex w-full flex-col gap-4 lg:flex-row xl:gap-7">
 			<!-- Left side panel -->
 			<div
-				class="grid h-fit w-full grid-cols-3 flex-row overflow-hidden rounded-lg bg-arkGray6 md:flex lg:w-1/5 lg:flex-col"
+				class="grid h-fit w-full grid-cols-3 flex-row overflow-hidden rounded-lg px-4 md:flex lg:w-1/5 lg:flex-col"
 			>
 				{#each currentApps as app}
 					<button
 						style="background-color: {activeApp.name == app.name ? app.colors[1] : ''};"
 						on:click={() => (activeApp = app)}
 						class="
-						{activeApp.name != app.name ? 'hover:bg-arkGray5' : ''} flex w-full flex-col items-center gap-3
-						border-b bg-transparent px-5 py-3 font-semibold first:rounded-tl-lg last:rounded-br-lg lg:h-[88px] lg:flex-row lg:first:rounded-tr-lg lg:last:rounded-bl-lg"
+						{activeApp.name != app.name ? ' hover:bg-arkGray5' : ''} 
+						flex w-full flex-col items-center gap-3 border-b bg-arkGray6
+						px-5 py-3 font-semibold first:rounded-tl-lg last:rounded-br-lg last:border-b-0 lg:h-[88px] lg:flex-row lg:first:rounded-tr-lg lg:last:rounded-bl-lg"
 					>
 						{#if !app.logo}
 							<img src="{base}/images/placeholder.png" alt="app logo" />

diff --git a/src/lib/components/sections/Process.svelte b/src/lib/components/sections/Process.svelte
@@ -24,7 +24,9 @@
 </script>
 
 <section class="relative flex items-center bg-arkGray py-12">
-	<div class="mx-auto flex w-full max-w-7xl flex-col items-center gap-5 px-5 lg:gap-10 lg:px-0">
+	<div
+		class="mx-auto flex w-full max-w-7xl flex-col items-center gap-5 px-5 lg:gap-10 lg:px-4 xl:px-0"
+	>
 		<div class="flex w-full flex-col gap-4">
 			<p class="text-center text-4xl font-bold text-white lg:text-6xl">Process</p>
 		</div>
@@ -65,12 +67,12 @@
 				<div class="flex flex-col items-center text-white lg:h-[750px] lg:w-2/4 lg:items-start">
 					<!-- ARK App -->
 					<p class="text-center text-2xl font-semibold md:text-[32px] lg:text-start">
-						Resources Needed
+						Resources needed
 					</p>
 					{#if activeType == 'ark'}
 						<div class="flex flex-col items-center gap-3">
 							<img
-								class="-ml-4 h-fit max-h-[720px]"
+								class="-ml-4 max-h-[720px]"
 								src="{base}/images/process/{activeType}-right.png"
 								alt="ARK process"
 							/>
@@ -81,7 +83,7 @@
 					{#if activeType == 'typical'}
 						<div class="mt-[11px] flex flex-col gap-5">
 							<img
-								class="h-fit w-[350px] md:w-[480px]"
+								class="h-fit w-[350px] md:w-[380px] xl:w-[480px]"
 								src="{base}/images/process/typical-right.png"
 								alt="Typical process"
 							/>

diff --git a/src/lib/components/sections/Support.svelte b/src/lib/components/sections/Support.svelte
@@ -83,7 +83,7 @@
 		<div class="my-5 grid grid-cols-2 gap-2 md:flex md:h-[40px] md:flex-row">
 			{#each supportLogosCrypto as logo}
 				<button
-					class="h-full w-[150px] overflow-hidden rounded-md"
+					class="h-11 w-[150px] overflow-hidden rounded-md"
 					on:click={(e) => {
 						if (['bitcoin', 'ethereum'].includes(logo.name)) e.preventDefault()
 						logo.onClick ? logo.onClick() : ''

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -2,15 +2,16 @@
 	import '$lib/app.css'
 	import '@fontsource/jost'
 	import Header from '$lib/components/layouts/Header.svelte'
-	import Transition from '$lib/components/layouts/Transition.svelte'
 	import Footer from '$lib/components/layouts/Footer.svelte'
+	import Transition from '$lib/components/layouts/Transition.svelte'
+	import { page } from '$app/stores'
 </script>
 
 <div class="mx-auto md:px-0">
 	<div class="flex h-screen flex-col justify-between">
 		<Header />
-		<main class="mb-auto flex flex-col">
-			<!-- <Transition pathname={data?.pathname}> -->
+		<main class="mb-auto mt-[72px] flex flex-col">
+			<!-- <Transition pathname={$page.url.pathname}> -->
 			<slot />
 			<!-- </Transition> -->
 		</main>

diff --git a/src/routes/apps/+page.svelte b/src/routes/apps/+page.svelte
@@ -13,7 +13,7 @@
 		<Title title="Our Apps" h2 />
 	</div>
 
-	<div class="mx-auto grid w-full max-w-7xl grid-cols-2 gap-4 px-3 lg:grid-cols-3 lg:px-0">
+	<div class="mx-auto grid w-full max-w-7xl grid-cols-2 gap-4 px-3 lg:grid-cols-3 xl:px-0">
 		{#each data.apps as app}
 			<AppsCard {app} />
 		{/each}

diff --git a/src/routes/blog/+page.server.ts b/src/routes/blog/+page.server.ts
@@ -1,11 +1,12 @@
+import type { Blog } from '$utils/constants'
 import { getEntries, getTags } from '$utils/entries'
 import { error } from '@sveltejs/kit'
 
 /** @type {import('./$types').PageServerLoad} */
 // export const prerender = 'auto'
 
 export async function load() {
-	const posts = getEntries('posts')
+	const posts = getEntries('posts') as Blog[]
 	if (!posts) {
 		throw error(404, 'No post found')
 	}

diff --git a/src/routes/blog/[slug]/+page.server.ts b/src/routes/blog/[slug]/+page.server.ts
@@ -1,21 +1,22 @@
 import { error } from '@sveltejs/kit'
 import { getEntries } from '$utils/entries'
+import type { Blog, Author } from '$utils/constants'
 
 /** @type {import('./$types').EntryGenerator} */
 export function entries() {
-	const posts = getEntries('posts') || []
-	return posts.map((post) => ({ slug: post.slug }))
+	const posts = (getEntries('posts') as Blog[]) || []
+	return posts.map((post: Blog) => ({ slug: post.slug }))
 }
 
 export const prerender = true
 
 /** @type {import('./$types').PageServerLoad} */
 export async function load({ params }) {
-	const posts = getEntries('posts') || []
-	const authors = getEntries('authors') || []
+	const posts = (getEntries('posts') as Blog[]) || []
+	const authors = (getEntries('authors') as Author[]) || []
 	const { slug } = params
 	const post = posts.find((p) => p.slug === slug)
-	const author = authors.find((a) => a.name === post.author)
+	const author = authors.find((a) => a.name === post?.author)
 
 	if (!post) {
 		throw error(404, 'No post found')

diff --git a/src/routes/contribute/+page.svelte b/src/routes/contribute/+page.svelte
@@ -50,7 +50,7 @@
 
 <Head title="Contribute" />
 
-<div class="flex h-full w-full flex-col items-center bg-arkGray bg-opacity-95 px-4 lg:px-0">
+<div class="flex h-full w-full flex-col items-center bg-arkGray bg-opacity-95 px-5 xl:px-0">
 	<div
 		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"
 	>

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -125,6 +125,17 @@ export type Blog = {
 	type: string
 }
 
+export type Author = {
+	id: string
+	name: string
+	avatar?: string
+	occupation?: string
+	company?: string
+	email?: string
+	twitter?: string
+	linkedin?: string
+	github?: string
+}
 export interface Issue {
 	title: string
 	labels: string[]

diff --git a/static/videos/feature-2.json b/static/videos/feature-2.json
diff --git a/static/videos/feature-4.json b/static/videos/feature-4.json