elk/components/status/StatusPreviewGitHub.vue
2022-12-17 22:11:39 +01:00

128 lines
3.6 KiB
Vue

<script setup lang="ts">
import type { Card } from 'masto'
const props = defineProps<{
card: Card
}>()
const isSquare = false
const root = true
type UrlType = 'user' | 'repo' | 'issue' | 'pull'
interface Meta {
type: UrlType
user: string
avatar: string
details: string
repo?: string
number?: string
extra?: {
state: string
author?: {
avatar: string
user: string
}
}
}
const meta = $computed(() => {
const { url } = props.card
const path = url.split('https://github.com/')[1]
const user = path.match(/([\w-]+)\//)![1]
const repo = path.match(/[\w-]+\/([\w-]+)/)?.[1]
const repoPath = `${user}/${repo}`
const inRepoPath = path.split(`${repoPath}/`)?.[1]
let number: string | undefined
let type: UrlType = repo ? 'repo' : 'user'
if (inRepoPath) {
number = inRepoPath.match(/issues\/(\d+)/)?.[1]
if (number) {
type = 'issue'
}
else {
number = inRepoPath.match(/pull\/(\d+)/)?.[1]
if (number)
type = 'pull'
}
}
const avatar = `https://github.com/${user}.png`
const details = (props.card.title ?? '').replace('GitHub - ', '').replace(`${repoPath}: `, '').split(' · ')[0]
const info = $ref<Meta>({
type,
user,
details,
repo,
number,
avatar,
})
/* It is rate limited for anonymous usage, leaving this to play, but for now it is probably better to avoid the call
We can't show the author of the PR or issue without this info, because the handle isn't in the meta. I think we
could ask GitHub to add it.
if (number) {
fetch(`https://api.github.com/repos/${user}/${repo}/issues/${number}`).then(res => res.json()).then((data) => {
info.extra = {
state: data.state as string,
author: {
avatar: data.user.avatar_url as string,
user: data.user.login as string,
},
}
})
}
*/
return info
})
</script>
<template>
<div
v-if="card.image"
flex flex-col
display-block of-hidden
bg-code
relative
border="base"
:class="{
'sm:(min-w-32 w-32 h-32) min-w-22 w-22 h-22 border-r': isSquare,
'w-full aspect-[1.91] border-b': !isSquare,
'rounded-lg': root,
}"
>
<div p4 px-6 flex flex-col justify-between h-full>
<div flex justify-between items-center gap-6 h-full mb-2>
<div flex flex-col gap-2>
<a flex gap-1 text-3xl flex-wrap :href="card.url">
<template v-if="meta.repo">
<span>{{ meta.user }}</span><span text-secondary-light>/</span><span text-primary font-bold>{{ meta.repo }}</span>
</template>
<span v-else>{{ meta.user }}</span>
</a>
<div flex flex-col>
<p v-if="meta.type === 'issue'" font-bold text-xl text-primary>
Issue #{{ meta.number }}
</p>
<p v-if="meta.type === 'pull'" font-bold text-xl text-primary>
PR #{{ meta.number }}
</p>
<span text-secondary-light leading-tight>{{ meta.details }}</span>
</div>
</div>
<div>
<img w-30 aspect-square width="20" height="20" rounded-2 :src="meta.avatar">
</div>
</div>
<div flex justify-between>
<div v-if="meta.extra" flex gap-2 items-center>
<div>
<img w-6 aspect-square width="20" height="20" rounded-full :src="meta.extra?.author?.avatar">
</div>
<span text-xl text-primary font-bold>@{{ meta.extra?.author?.user }}</span>
</div>
<div v-else />
<div text-2xl i-ri:github-fill text-secondary />
</div>
</div>
</div>
</template>