Skip to content

feat: highlight inactive repositories based on last activity #2643

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
alokranjan89 wants to merge 1 commit into from
Closed

feat: highlight inactive repositories based on last activity #2643

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 60 additions & 12 deletions components/RepoBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,51 +17,89 @@
rel="noopener noreferrer"
class="text-lg font-semibold group-hover:text-juniper"
:class="{ 'text-juniper': isCardOpen }"
>{{ repo.owner }} / {{ repo.name }}</a
>
{{ repo.owner }} / {{ repo.name }}
</a>

<span class="flex-1"></span>

<span
class="hidden md:inline text-sm border px-3 py-1 ml-2 rounded-full font-semibold"
:class="{
'text-ink-400 bg-juniper border-transparent': isCardOpen,
'text-vanilla-200': !isCardOpen
}"
>{{ issuesDisplay }}</span
>
{{ issuesDisplay }}
</span>
</div>

<div class="flex-row flex text-sm py-1 overflow-auto">
{{ repo.description }}
</div>

<div
class="flex-row flex text-sm py-1 font-mono"
:class="{ 'text-honey': isCardOpen, 'text-vanilla-400': !isCardOpen }"
>
<div class="mr-4"><span class="text-vanilla-400">lang: </span>{{ repo.language }}</div>
<div class="mr-4"><span class="text-vanilla-400">stars: </span>{{ repo.stars_display }}</div>
<div class="mr-4">
<span class="text-vanilla-400">last activity: </span><span>{{ lastModifiedDisplay }}</span>
<span class="text-vanilla-400">lang: </span>{{ repo.language }}
</div>

<div class="mr-4">
<span class="text-vanilla-400">stars: </span>{{ repo.stars_display }}
</div>

<div class="mr-4">
<span class="text-vanilla-400">last activity: </span>
<span>{{ lastModifiedDisplay }}</span>

<span
v-if="isInactive"
class="ml-2 text-red-400 font-semibold"
>
Inactive
</span>
</div>
</div>
</div>
<ol v-if="isCardOpen" class="px-5 py-3 text-base leading-loose border-t border-ink-200">
<li v-for="issue in repo.issues" :key="issue.url" class="flex flex-row items-start justify-start py-1">
<span class="text-slate text-right px-2 leading-snug font-mono" style="min-width: 70px">#{{ issue.number }}</span>

<ol
v-if="isCardOpen"
class="px-5 py-3 text-base leading-loose border-t border-ink-200"
>
<li
v-for="issue in repo.issues"
:key="issue.url"
class="flex flex-row items-start justify-start py-1"
>
<span
class="text-slate text-right px-2 leading-snug font-mono"
style="min-width: 70px"
>
#{{ issue.number }}
</span>

<div class="flex items-start flex-row flex-auto">
<a
title="Open issue on GitHub"
:href="issue.url"
target="_blank"
rel="noopener noreferrer"
class="leading-snug font-medium hover:text-juniper text-vanilla-300 block flex-auto"
>{{ issue.title }}</a
>
{{ issue.title }}
</a>

<div
v-if="issue.comments_count > 0"
class="flex flex-row items-center justify-end mt-1 w-10"
:title="getIssueCommentsCounterTooltip(issue)"
>
<ChatBubbleLeftRightIcon class="mt-px w-3.5 h-3.5" />
<span class="ml-1 text-sm leading-snug font-mono">{{ issue.comments_count }}</span>
<span class="ml-1 text-sm leading-snug font-mono">
{{ issue.comments_count }}
</span>
</div>
</div>
</li>
Expand Down Expand Up @@ -94,6 +132,14 @@ const lastModifiedDisplay = computed(() => {
return dayjs(props.repo.last_modified).fromNow()
})

const isInactive = computed(() => {
const lastModified = dayjs(props.repo.last_modified)
const now = dayjs()

const diffYears = now.diff(lastModified, 'year')
return diffYears >= 2
})

const isCardOpen = computed(() => {
return openRepoId.value === props.repo.id
})
Expand All @@ -111,6 +157,8 @@ function getIssueCommentsCounterTooltip(issue) {
if (numComments === 0) {
return `There are no comments on this issue`
}
return numComments > 1 ? `There are ${numComments} comments on this issue` : `There is one comment on this issue`
return numComments > 1
? `There are ${numComments} comments on this issue`
: `There is one comment on this issue`
}
</script>
</script>