arthur/website
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website.git synced 2026-02-03 21:57:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add type

Browse Source
This commit is contained in:
Arthur Danjou
2024-02-25 15:57:56 +01:00
parent f53d09629c
commit 22ceeab986
3 changed files with 101 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/main/MainActivity.vue
View File

@@ -1,8 +1,10 @@
<script lang="ts" setup> <script lang="ts" setup>
const { data: activity, refresh } = await useAsyncData('activity', () => $fetch('/api/activity')) import type { Activity } from '~~/types'
const codingActivity = computed(() => activity.value.data.activities.filter(activity => activity.name === 'Visual Studio Code')[0])
function formatDate(date) { const { data: activity, refresh } = await useAsyncData<Activity>('activity', () => $fetch('/api/activity'))
const codingActivity = computed(() => activity.value!.data.activities.filter(activity => activity.name === 'Visual Studio Code')[0])
function formatDate(date: number) {
return `${useDateFormat(date, 'DD MMM YYYY').value} at ${useDateFormat(date, 'HH:mm:ss').value}` return `${useDateFormat(date, 'DD MMM YYYY').value} at ${useDateFormat(date, 'HH:mm:ss').value}`
} }
@@ -19,7 +21,7 @@ useIntervalFn(async () => await refresh(), 5000)
<div v-if="activity && activity.data.activities" class="flex items-center gap-x-4"> <div v-if="activity && activity.data.activities" class="flex items-center gap-x-4">
<p <p
class="uppercase tracking-widest text-sm" class="uppercase tracking-widest text-sm"
:style="{ writingMode: 'vertical-rl', textOrientation: 'sideways-right' }" :style="{ writingMode: 'vertical-rl', textOrientation: 'sideways' }"
> >
Activity Activity
</p> </p>

104
src/components/main/MainStats.vue
View File

@@ -1,5 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
const stats = await $fetch('/api/stats') import type { Stats } from '~~/types'
const stats = await $fetch<Stats>('/api/stats')
const CardUi = { const CardUi = {
footer: { padding: 'px-4 py-2' }, footer: { padding: 'px-4 py-2' },
@@ -8,61 +10,63 @@ const CardUi = {
</script> </script>
<template> <template>
<UCard class="flex flex-col justify-between" :ui="CardUi"> <ClientOnly>
<div class="flex items-center gap-x-4 h-full"> <UCard class="flex flex-col justify-between" :ui="CardUi">
<p <div class="flex items-center gap-x-4 h-full">
class="uppercase tracking-widest text-sm" <p
:style="{ writingMode: 'vertical-rl', textOrientation: 'sideways-right' }" class="uppercase tracking-widest text-sm"
> :style="{ writingMode: 'vertical-rl', textOrientation: 'sideways' }"
STATS >
</p> STATS
<div v-if="stats"> </p>
<div class="flex gap-4 items-center"> <div v-if="stats">
<div class="text-md"> <div class="flex gap-4 items-center">
<div class="flex items-center gap-1"> <div class="text-md">
<h3>Total hours:</h3> <div class="flex items-center gap-1">
<p>{{ usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0) }} hours</p> <h3>Total hours:</h3>
</div> <p>{{ usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0) }} hours</p>
<div class="flex items-start gap-1 flex-wrap"> </div>
<h3>Best Editors:</h3> <div class="flex items-start gap-1 flex-wrap">
<p> <h3>Best Editors:</h3>
{{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(', ') }} <p>
</p> {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(', ') }}
</div> </p>
<div class="flex items-center gap-1"> </div>
<h3>Best OS:</h3> <div class="flex items-center gap-1">
<p>{{ stats.os.data[0].name }} with {{ stats.os.data[0].percent }}%</p> <h3>Best OS:</h3>
</div> <p>{{ stats.os.data[0].name }} with {{ stats.os.data[0].percent }}%</p>
<div class="flex items-start gap-1 flex-wrap"> </div>
<h3>Top languages:</h3> <div class="flex items-start gap-1 flex-wrap">
<p>{{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(', ') }}</p> <h3>Top languages:</h3>
<p>{{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(', ') }}</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <template #footer>
<template #footer> <div class="flex items-center justify-between">
<div class="flex items-center justify-between"> <p v-if="stats" class="text-subtitle text-xs w-1/2">
<p v-if="stats" class="text-subtitle text-xs w-1/2"> Started {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, the {{ useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value }}
Started {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, the {{ useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value }}
</p>
<div class="flex items-center justify-end space-x-1">
<p class="text-subtitle text-xs">
powered by
</p> </p>
<UButton <div class="flex items-center justify-end space-x-1">
size="xs" <p class="text-subtitle text-xs">
:padded="false" powered by
variant="link" </p>
to="https://wakatime.com/" <UButton
target="_blank" size="xs"
label="Wakatime" :padded="false"
/> variant="link"
<UIcon name="i-jam-thunder" class="text-subtitle" /> to="https://wakatime.com/"
target="_blank"
label="Wakatime"
/>
<UIcon name="i-jam-thunder" class="text-subtitle" />
</div>
</div> </div>
</div> </template>
</template> </UCard>
</UCard> </ClientOnly>
</template> </template>
<style> <style>

45
types.ts
View File

@@ -1,4 +1,4 @@
import type { MarkdownParsedContent, ParsedContent } from '@nuxt/content/dist/runtime/types' import type { MarkdownParsedContent, MarkdownRoot, ParsedContent } from '@nuxt/content/dist/runtime/types'
export enum ColorsTheme { export enum ColorsTheme {
RED = 'red', RED = 'red',
@@ -20,9 +20,46 @@ export enum ColorsTheme {
ROSE = 'rose', ROSE = 'rose',
} }
export interface JsonParsedContent<T> extends ParsedContent { interface WakatimeData {
body: T name: string
excerpt: '' percent: number
}
export interface Stats {
coding: {
data: {
grand_total: {
total_seconds_including_other_language: number
}
range: {
start: string
}
}
}
editors: {
data: Array<WakatimeData>
}
os: {
data: Array<WakatimeData>
}
languages: {
data: Array<WakatimeData>
}
}
interface LanyardActivity {
name: string
state: string
details: string
timestamps: {
start: number
}
}
export interface Activity {
data: {
activities: Array<LanyardActivity>
}
} }
export interface Post extends MarkdownParsedContent { export interface Post extends MarkdownParsedContent {