Skip to content

Commit

Permalink
feat: table
Browse files Browse the repository at this point in the history
  • Loading branch information
colinlienard committed May 7, 2024
1 parent b31d4cd commit 7e199f8
Showing 9 changed files with 155 additions and 15 deletions.
1 change: 1 addition & 0 deletions .env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
NUXT_GITHUB_TOKEN=
1 change: 0 additions & 1 deletion .prettierrc
Original file line number Diff line number Diff line change
@@ -2,7 +2,6 @@
"plugins": ["prettier-plugin-tailwindcss"],
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"htmlWhitespaceSensitivity": "ignore"
}
8 changes: 8 additions & 0 deletions assets/css/main.css
Original file line number Diff line number Diff line change
@@ -11,6 +11,14 @@
src: url(/fonts/Inter-Medium.ttf) format('ttf');
}

@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/Inter-SemiBold.ttf) format('ttf');
}

@font-face {
font-family: 'Source Serif Pro';
font-style: normal;
7 changes: 4 additions & 3 deletions eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -5,8 +5,9 @@ export default withNuxt([
eslintConfigPrettier,
{
rules: {
'@typescript-eslint/no-explicit-any': 'off',
'no-console': 'warn',
'vue/multi-word-component-names': 'off'
}
}
'vue/multi-word-component-names': 'off',
},
},
]);
11 changes: 7 additions & 4 deletions nuxt.config.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
export default defineNuxtConfig({
alias: {
heroicons: '@heroicons/vue/24/solid'
heroicons: '@heroicons/vue/24/outline',
},
devtools: { enabled: true },
css: ['~/assets/css/main.css'],
modules: ['@nuxt/eslint'],
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
autoprefixer: {},
},
},
runtimeConfig: {
githubToken: '',
},
});
66 changes: 63 additions & 3 deletions pages/index.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,65 @@
<script setup lang="ts">
import { StarIcon } from 'heroicons';
const { data: repositories } = await useFetch('/api/repositories');
const durationFormatter = new Intl.RelativeTimeFormat('en', { style: 'long' });
function formatDuration(age: number) {
const years = Math.floor(age / 12 / 30 / 24 / 60 / 60 / 1000);
const formatted = durationFormatter.format(years, 'year');
return `${formatted.replace('in ', '')} old`;
}
</script>

<template>
<div>
<h1 class="text-slate-500">Welcome to the homepage</h1>
</div>
<section class="table">
<div class="table-header-group">
<div class="table-row text-slate-400 *:table-cell *:px-4 *:py-6">
<div>Rank</div>
<div>Name</div>
<div>Stars</div>
<div>Description</div>
<div>Language</div>
<div>Age</div>
</div>
</div>
<div class="table-row-group">
<NuxtLink
v-for="(repo, index) in repositories"
:key="repo.name"
:to="repo.url"
target="_blank"
class="after:content-[' '] relative table-row *:table-cell *:px-4 *:py-6 *:align-top after:absolute after:inset-0 after:h-[1px] after:bg-slate-300"
>
<div>
<div
class="flex h-8 w-8 -translate-y-1 items-center justify-center rounded-full border border-solid border-slate-300"
>
{{ index + 1 }}
</div>
</div>
<div>
<div class="flex items-center gap-2 text-nowrap">
<img :src="repo.image" :alt="`GitHub ${repo.ownerName} avatar`" class="h-6 rounded" />
<h3 class="font-semibold">{{ repo.name }}</h3>
</div>
</div>
<div>
<div class="flex items-center gap-1">
<StarIcon class="h-4" />
<span>{{ repo.starsNumber.toLocaleString() }}</span>
</div>
</div>
<div class="text-slate-400">{{ repo.description }}</div>
<div>
<div v-if="repo.language" class="flex items-center gap-1">
<div class="h-2 w-2 rounded-full" :style="{ backgroundColor: repo.language.color }" />
{{ repo.language?.name }}
</div>
</div>
<div class="text-nowrap">{{ formatDuration(repo.age) }}</div>
</NuxtLink>
</div>
</section>
</template>
Binary file added public/fonts/Inter-SemiBold.ttf
Binary file not shown.
68 changes: 68 additions & 0 deletions server/api/repositories.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
type Repository = {
name: string;
ownerName: string;
image: string;
description: string;
starsNumber: number;
url: string;
age: number;
language?: { name: string; color: string };
};

export default defineEventHandler(async (event) => {
const { githubToken } = useRuntimeConfig(event);

const response = await fetch('https://api.github.com/graphql', {
method: 'POST',
headers: {
Accept: 'application/vnd.github.v4.idl',
Authorization: `Bearer ${githubToken}`,
},
body: JSON.stringify({
query: `
query {
search(query: "stars:>10000 sort:stars", type: REPOSITORY, first: 100) {
edges {
node {
... on Repository {
name
description
createdAt
url
stargazers {
totalCount
}
owner {
login
avatarUrl
}
languages(first: 1) {
nodes {
name
color
}
}
}
}
}
}
}
`,
}),
});
const { data } = await response.json();

const today = new Date();

const result: Repository[] = data.search.edges.map(({ node }: any) => ({
name: node.name,
ownerName: node.owner.login,
image: node.owner.avatarUrl,
description: node.description,
starsNumber: node.stargazers.totalCount,
url: node.url,
age: today.getTime() - new Date(node.createdAt).getTime(),
language: node.languages.nodes[0],
}));
return result;
});
8 changes: 4 additions & 4 deletions tailwind.config.js
Original file line number Diff line number Diff line change
@@ -6,12 +6,12 @@ export default {
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./app.vue',
'./error.vue'
'./error.vue',
],
theme: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
serif: ['Source Serif Pro', 'serif']
}
}
serif: ['Source Serif Pro', 'serif'],
},
},
};

0 comments on commit 7e199f8

Please sign in to comment.