Skip to content

Commit

Permalink
feat(community): add projects section and some projects
Browse files Browse the repository at this point in the history
  • Loading branch information
@MrSunshyne
MrSunshyne committed Aug 26, 2024
1 parent e5a7579 commit 239910e
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 8 deletions.
38 changes: 33 additions & 5 deletions packages/frontendmu-data/data/projects.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,51 @@ interface Project {
title: string
icon: string
project_url: string
description: string
author_github_username: string
categories: string[]
}

const projects: Project[] = [
export const projects: Project[] = [
{
title: 'git-cz',
icon: '',
icon: 'openmoji:windows',
project_url: 'https://github.com/k3ii/git-cz',
author_github_username: 'k3ii',
categories: ['git', 'cli']
categories: ['git', 'cli'],
description: 'A simple git commitizen cli tool'
},
{
title: 'zourer',
icon: '',
icon: 'game-icons:shouting',
project_url: 'https://github.com/nicolasstrands/zourer',
author_github_username: 'nicolasstrands',
categories: ['git', 'cli']
categories: ['dictionary', 'open-data'],
description: 'A dictionary of profanity words in the Mauritian Kreol language'
},
{
title: 'Mauritius Tax Calculator',
icon: 'tdesign:money',
project_url: 'https://github.com/n-d-r-d-g/redesigned/tree/main/mauritius_tax_calculator',
author_github_username: 'n-d-r-d-g',
categories: ['taxation', 'calculator', 'mauritius'],
description: 'A simple tax calculator for Mauritius',
},
{
title: 'CSS Clock',
icon: 'mdi:clock-time-eight',
project_url: 'https://clock-css.netlify.app/',
author_github_username: 'MrSunshyne',
categories: ['css', 'clock'],
description: 'A simple clock made with CSS',
},
{
title: 'Le Pop Quiz',
icon: 'material-symbols-light:question-exchange-rounded',
project_url: 'https://lepopquiz.com/',
author_github_username: 'cedpoilly',
categories: ['quiz', 'game', 'real-time', 'ai'],
description: 'A real-time quiz game with AI',
}

]
2 changes: 1 addition & 1 deletion packages/frontendmu-nuxt/components/community/GithubIssuesSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ function isTabActive(state: IssueState) {
</template>
</div>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="grid md:grid-cols-2 gap-3">
<TransitionGroup name="list">
<template v-for="issue in filteredIssues" :key="issue.number">
<div class="border dark:bg-verse-950 border-verse-400/50 p-3 rounded-md flex gap-2">
Expand Down
93 changes: 93 additions & 0 deletions packages/frontendmu-nuxt/components/community/ProjectsSection.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<script setup lang="ts">
import { projects } from '../../../frontendmu-data/data/projects'
function githubProfileUrl(username: string) {
return `https://github.com/${username}.png`
}
const sortedProjects = projects.sort((a, b) => {
return a.title.localeCompare(b.title)
})
</script>

<template>
<div>
<!-- Filter -->
<!-- <div class="flex mb-2">
<div class="flex gap-2 dark:bg-verse-800/50 p-1 rounded-md">
<template v-for="category in categorys" :key="category">
<div class="flex items-center gap-1 rounded-md px-2 py-1 text-xs cursor-pointer font-medium"
:class="isTabActive(category as ProjectCategory) && 'dark:bg-verse-900 bg-verse-200'"
@click="filteredBy = (category as ProjectCategory)">
<Icon :name="issueIcon(category as ProjectCategory)" :class="issueColor(category as ProjectCategory)" />
{{ category }}
</div>
</template>
</div>
</div> -->
<div class="grid md:grid-cols-3 gap-3">
<TransitionGroup name="list">
<template v-for="project in sortedProjects" :key="project.title">
<div class="border dark:bg-verse-950 border-verse-400/50 p-3 rounded-md flex flex-col gap-2">
<div class="flex gap-2">
<div v-if="project.icon" class="flex items-center">
<Icon :name="project.icon" class="text-verse-400 w-8 h-8 rounded-full" />
</div>
<div class="flex-1">
<div class="flex gap-1.5 items-center">
<a :href="project.project_url" target="_blank"
class="text-verse-600 hover:text-verse-800 dark:hover:text-white no-underline dark:text-verse-300">
{{ project.title }}
</a>
</div>
<div class="text-xs text-verse-400 lowercase flex gap-2">
<div>
by {{ project.author_github_username }}
</div>
</div>
</div>
<div class="flex items-center">
<NuxtImg :src="githubProfileUrl(project.author_github_username)" alt=""
class="bg-red-500 w-8 h-8 rounded-full" />
</div>
</div>
<div class="py-2 text-sm">
{{ project.description }}
</div>

<div class="flex gap-2 flex-wrap">
<template v-for="category in project.categories" :key="category">
<div class="text-xs bg-verse-700 rounded-md px-2">
<!-- <Icon :name="issueIcon(category as ProjectCategory)"
:class="issueColor(category as ProjectCategory)" /> -->
{{ category }}
</div>
</template>
</div>
</div>
</template>
</TransitionGroup>
</div>
</div>
</template>

<style lang="postcss">
.list-move,
/* apply transition to moving elements */
.list-enter-active,
.list-leave-active {
transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}
/* ensure leaving items are taken out of layout flow so that moving
animations can be calculated correctly. */
.list-leave-active {
position: absolute;
}
</style>
5 changes: 3 additions & 2 deletions packages/frontendmu-nuxt/pages/community.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,17 @@
<BaseHeading :level="1">
Community
</BaseHeading>
<div class="text-verse-600 dark:text-verse-300 pt-4 pb-16 text-center md:text-left flex flex-col gap-4">
<div class="text-verse-600 dark:text-verse-300 pt-4 pb-16 text-center md:text-left flex flex-col gap-8">
<div class="text-xl font-bold">
Featured Github Issues
</div>

<CommunityGithubIssuesSection />

<div>
<div class="text-xl font-bold">
Projects
</div>
<CommunityProjectsSection />
</div>
</ContentBlock>
</template>

0 comments on commit 239910e

Please sign in to comment.