danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/firstcommit.is. Find your first open-source commit on GitHub
firstcommit.is
api
commit
github
nuxt
oauth
2.3 kB
56 lines
1<template>
2 <div class="flex-grow flex flex-col mx-auto justify-center p-2 ">
3 <main class="p-8 m-2 max-w-[500px] w-full mx-auto flex-col flex gap-4">
4 <NuxtLink
5 class="rounded bg-black text-white shadow px-3 py-2 flex flex-row gap-2 items-center"
6 href="/connect/github"
7 external
8 >
9 <svg
10 xmlns="http://www.w3.org/2000/svg"
11 width="32"
12 height="32"
13 viewBox="0 0 24 24"
14 >
15 <path
16 fill="currentColor"
17 d="M12.001 2c-5.525 0-10 4.475-10 10a9.994 9.994 0 0 0 6.837 9.488c.5.087.688-.213.688-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.337 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.913-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.563 4.938c.363.312.676.912.676 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10Z"
18 />
19 </svg>
20 Find your first commit
21 </NuxtLink>
22 <span class="mx-auto text-sm flex flex-row gap-2 items-center before:border-t-2 before:border-gray-400 before:content-[''] before:w-2 before:h-0 before:inline-block after:border-t-2 after:border-gray-400 after:content-[''] after:w-2 after:h-0 after:inline-block">
23 or enter username
24 </span>
25 <UserNameForm
26 v-model="username"
27 placeholder="danielroe"
28 @submit="openCommit"
29 />
30 </main>
31 </div>
32</template>
33
34<script setup>
35defineOgImageComponent('Home', {
36 title: 'firstcommit.is',
37})
38
39useSeoMeta({
40 title: 'firstcommit.is',
41})
42
43useServerSeoMeta({
44 ogTitle: 'firstcommit.is',
45 twitterTitle: 'firstcommit.is',
46 description: 'Find your first open-source commit on GitHub.',
47 ogDescription: 'Find your first open-source commit on GitHub.',
48 twitterCard: 'summary_large_image',
49})
50
51const username = ref('')
52
53async function openCommit () {
54 return navigateTo(`/${username.value.toLowerCase()}`)
55}
56</script>