Merge pull request #66 from s1lvax/dev

Dev

package.json

@@ -20,6 +20,7 @@
 		"@tailwindcss/typography": "^0.5.14",
 		"@types/eslint": "^9.6.0",
 		"autoprefixer": "^10.4.20",
+		"bits-ui": "^0.21.16",
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
@@ -43,7 +44,6 @@
 		"@auth/core": "^0.37.0",
 		"@auth/sveltekit": "^1.7.0",
 		"@prisma/client": "5.21.1",
-		"bits-ui": "^0.21.16",
 		"clsx": "^2.1.1",
 		"formsnap": "^1.0.1",
 		"lucide-svelte": "^0.451.0",

prisma/schema.prisma

@@ -14,14 +14,15 @@ datasource db {
 }
 
 model User {
-  id                 Int      @id @default(autoincrement())
-  githubId           Int      @unique
-  githubUsername     String   @unique
-  views              Int      @default(0)
-  createdAt          DateTime @default(now())
-  updatedAt          DateTime @updatedAt
-  Link               Link[]
-  Skill              Skill[]
+  id                  Int      @id @default(autoincrement())
+  githubId            Int      @unique
+  githubUsername      String   @unique
+  views               Int      @default(0)
+  openToCollaborating Boolean  @default(false)
+  createdAt           DateTime @default(now())
+  updatedAt           DateTime @updatedAt
+  Link                Link[]
+  Skill               Skill[]
 }
 
 model Link {

src/app.html

@@ -4,6 +4,10 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/logo.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta
+			name="description"
+			content="Create a personalized developer profile with Route. Showcase your top skills, favorite links, GitHub stats, and personal blog, all in a customizable, draggable interface. Share a sleek bio link to highlight your work and online presence effortlessly."
+		/>
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<script src="https://kit.fontawesome.com/335a4f9e65.js" crossorigin="anonymous"></script>

src/lib/components/Index/CTA.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { GitPullRequestCreate, UserPen, Github, LogOut } from 'lucide-svelte';
+	import { signIn, signOut } from '@auth/sveltekit/client';
+	import { page } from '$app/stores';
+</script>
+
+<div>
+	<div class="px-6 py-24 sm:px-6 sm:py-32 lg:px-8">
+		<div class="mx-auto max-w-2xl text-center">
+			<h2 class="text-balance text-4xl font-semibold tracking-tight sm:text-5xl">
+				Ready to Showcase Your Developer Profile?
+			</h2>
+			<p class="mx-auto mt-6 max-w-xl text-pretty text-lg/8 text-muted-foreground">
+				Start building a custom, developer-driven profile today. Share your projects, skills, and
+				GitHub stats with the world in just a few clicks.
+			</p>
+			<div class="mt-10 flex items-center justify-center gap-x-6">
+				{#if $page.data.session}
+					<Button href="/profile" class="flex items-center space-x-2"
+						><UserPen /> <span>My Profile</span></Button
+					>
+				{:else}
+					<Button on:click={() => signIn('github')} class="flex items-center space-x-2"
+						><Github /> <span>Sign in with Github</span></Button
+					>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>

src/lib/components/Index/Contributors.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { Contributor } from '$lib/types/GithubData';
+
+	let contributors: Contributor[] = [];
+
+	onMount(async () => {
+		const response = await fetch('https://api.github.com/repos/s1lvax/route/contributors');
+		contributors = await response.json();
+	});
+</script>
+
+<div class="mt-12 py-32 sm:py-24">
+	<div class="mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3">
+		<ul role="list" class="grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2">
+			{#each contributors as contributor}
+				<a href={contributor.html_url}>
+					<li>
+						<div class="flex items-center gap-x-6">
+							<img
+								class="h-16 w-16 rounded-full"
+								src={contributor.avatar_url}
+								alt="{contributor.login}'s avatar"
+							/>
+							<div>
+								<h3 class="text-base font-semibold leading-7 tracking-tight">
+									{contributor.login}
+								</h3>
+								<p class="text-sm font-semibold leading-6 text-muted-foreground">
+									{contributor.contributions} contributions
+								</p>
+							</div>
+						</div>
+					</li>
+				</a>
+			{/each}
+		</ul>
+		<div class="max-w-xl">
+			<div class="flex flex-col space-y-4">
+				<h2 class="text-pretty text-3xl font-semibold tracking-tight sm:text-4xl">
+					Meet our contributors
+				</h2>
+			</div>
+			<p class="mt-6 text-lg leading-8 text-muted-foreground">
+				Built by developers, for developers. Meet the contributors who make this project possible.
+			</p>
+		</div>
+	</div>
+</div>

src/lib/components/Index/Features.svelte

@@ -1,23 +1,38 @@
 <script>
-	import NewSection from '$lib/components/Shared/NewSection.svelte';
 	import { features } from '$lib/constants/features';
-	import * as Card from '$lib/components/ui/card';
 </script>
 
-<NewSection>
-	<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
-		{#each features as feature}
-			<Card.Root>
-				<Card.Header>
-					<Card.Title class="flex items-center space-x-2">
-						<svelte:component this={feature.icon} />
-						<span>{feature.name}</span>
-					</Card.Title>
-				</Card.Header>
-				<Card.Content>
-					<Card.Description>{feature.description}</Card.Description>
-				</Card.Content>
-			</Card.Root>
-		{/each}
+<div class=" py-24 sm:py-32">
+	<div class="mx-auto max-w-7xl px-6 lg:px-8">
+		<div class="mx-auto max-w-2xl lg:mx-0">
+			<h2 class="text-pretty text-4xl font-semibold tracking-tight sm:text-5xl">
+				Unleash the Power of Your Developer Profile
+			</h2>
+			<p class="mt-6 text-lg leading-8 text-muted-foreground">
+				Designed to showcase your skills, projects, and contributions effortlessly, Route empowers
+				developers to tell their story with ease.
+			</p>
+		</div>
+		<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
+			<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2">
+				{#each features as feature}
+					<div class="flex flex-col">
+						<dt class="text-base font-semibold leading-7">
+							<div
+								class="mb-6 flex h-10 w-10 items-center justify-center rounded-lg border border-gray-800 bg-transparent"
+							>
+								<svelte:component this={feature.icon} />
+							</div>
+							{feature.name}
+						</dt>
+						<dd class="mt-1 flex flex-auto flex-col text-base leading-7 text-muted-foreground">
+							<p class="flex-auto">
+								{feature.description}
+							</p>
+						</dd>
+					</div>
+				{/each}
+			</dl>
+		</div>
 	</div>
-</NewSection>
+</div>

src/lib/components/Index/Footer.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { socials } from '$lib/constants/socials';
+</script>
+
+<footer class="border-t">
+	<div class="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8">
+		<div class="flex justify-center space-x-6 md:order-2">
+			{#each socials as social}
+				<a href={social.link} class="text-gray-400 hover:text-gray-500">
+					<span class="sr-only">{social.name}</span>
+					<svelte:component this={social.icon} />
+				</a>
+			{/each}
+		</div>
+		<div class="mt-8 md:order-1 md:mt-0">
+			<p class="text-center text-xs leading-5 text-gray-500">&copy; 2024 Route</p>
+		</div>
+	</div>
+</footer>

src/lib/components/Index/Hero.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { GitPullRequestCreate, UserPen, Github, LogOut } from 'lucide-svelte';
+
+	import { signIn, signOut } from '@auth/sveltekit/client';
+	import { page } from '$app/stores';
+</script>
+
+<div class="relative isolate overflow-hidden">
+	<div class="mx-auto max-w-7xl px-6 pb-24 pt-10 sm:pb-32 lg:flex lg:px-8 lg:py-40">
+		<div class="mx-auto max-w-2xl flex-shrink-0 lg:mx-0 lg:pt-8">
+			<div class="mt-24 sm:mt-32 lg:mt-16">
+				<a href="https://github.com/s1lvax/route" class="inline-flex space-x-6">
+					<span
+						class="rounded-full px-3 py-1 text-sm font-semibold leading-6 ring-1 ring-inset ring-indigo-500/20"
+						>What's new</span
+					>
+					<span class="inline-flex items-center space-x-2 text-sm font-medium leading-6">
+						<span>Just shipped v1.0.0</span>
+						<svg
+							class="h-5 w-5 text-gray-500"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							aria-hidden="true"
+							data-slot="icon"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</span>
+				</a>
+			</div>
+			<h1 class="mt-10 text-pretty text-5xl font-semibold tracking-tight sm:text-7xl">
+				Your Developer Identity, Streamlined and Simplified
+			</h1>
+			<p class="text-md mt-8 text-pretty text-muted-foreground sm:text-xl/8">
+				Create a profile that highlights your GitHub stats and key projects—simple, clean, and
+				yours.
+			</p>
+			<div class="mt-10 flex items-center gap-x-6">
+				{#if $page.data.session}
+					<Button href="/profile" class="flex items-center space-x-2"
+						><UserPen /> <span>My Profile</span></Button
+					>
+					<Button
+						on:click={() => signOut()}
+						variant="destructive"
+						class="flex items-center space-x-2"><LogOut /> <span>Logout</span></Button
+					>
+				{:else}
+					<Button on:click={() => signIn('github')} class="flex items-center space-x-2"
+						><Github /> <span>Sign in with Github</span></Button
+					>
+				{/if}
+			</div>
+		</div>
+		<div
+			class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-32"
+		>
+			<div class="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
+				<img
+					src="https://i.imgur.com/KtVWxtM.png"
+					alt="App screenshot"
+					width="2432"
+					height="1442"
+					class="w-[76rem] rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10"
+				/>
+			</div>
+		</div>
+	</div>
+</div>

src/lib/components/PublicProfile/BasicInfo.svelte

@@ -6,6 +6,7 @@
 	import { Skeleton } from '$lib/components/ui/skeleton';
 	import type { GithubData } from '$lib/types/GithubData';
 	import type { PublicProfile } from '$lib/types/PublicProfile';
+	import { Badge } from '$lib/components/ui/badge';
 
 	export let githubData: GithubData | null;
 	export let userData: PublicProfile;
@@ -24,7 +25,20 @@
 	<div class="flex flex-col space-y-4 text-center">
 		{#if githubData}
 			{#if githubData.name}
-				<p class="text-2xl font-bold">{githubData.name}</p>
+				<div class="flex flex-col items-center justify-center gap-2">
+					<p class="text-2xl font-bold">{githubData.name}</p>
+					<div class="badge">
+						{#if userData.isOpenToCollaborating}
+							<Badge variant="outline" class="border-green-700 text-green-700"
+								>Open to Collaborating</Badge
+							>
+						{:else}
+							<Badge variant="outline" class="border-red-700 text-red-700"
+								>Not Open to Collaborating</Badge
+							>
+						{/if}
+					</div>
+				</div>
 			{:else}
 				<p class="text-2xl font-bold">{userData.username}</p>
 			{/if}

src/lib/components/PublicProfile/TechStack.svelte

@@ -23,7 +23,7 @@
 <!-- Tech Stack Section -->
 <Card.Root>
 	<Card.Header>
-		<Card.Title>Tech Stack</Card.Title>
+		<Card.Title>Skills & Tools</Card.Title>
 		<Card.Description>Explore the developer's skills and expertise</Card.Description>
 	</Card.Header>
 	<Card.Content class="grid gap-4">

src/lib/components/ui/separator/index.ts

@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};