Skip to content

Commit b3968be

Browse files
emlimlfgaspergrom
emlimlf
and
gaspergrom
authored
feat: community voice UI (#1426)
Signed-off-by: Efren Lim <[email protected]> Signed-off-by: Gašper Grom <[email protected]> Co-authored-by: Gašper Grom <[email protected]>
1 parent d0e577c commit b3968be

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+2063
-8
lines changed

‎frontend/app/components/modules/project/components/community/card-displays/default-card.vue‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!--
2+
Copyright (c) 2025 The Linux Foundation and each contributor.
3+
SPDX-License-Identifier: MIT
4+
-->
5+
<!-- Copyright (c) 2025 The Linux Foundation and each contributor. -->
6+
<!-- SPDX-License-Identifier: MIT -->
7+
<template>
8+
<nuxt-link
9+
:to="mention.url"
10+
target="_blank"
11+
rel="noopener noreferrer"
12+
>
13+
<lfx-card
14+
class="border border-neutral-100 rounded-xl overflow-hidden cursor-pointer hover:shadow-lg transition-shadow duration-300"
15+
>
16+
<div class="flex flex-col md:gap-5 gap-3">
17+
<slot>
18+
<!-- Header Section -->
19+
<lfx-community-card-header :mention="mention" />
20+
21+
<!-- Content Section -->
22+
<lfx-community-card-content :mention="mention" />
23+
24+
<!-- Relevance Comment Section -->
25+
<lfx-community-card-footer :mention="mention" />
26+
</slot>
27+
</div>
28+
</lfx-card>
29+
</nuxt-link>
30+
</template>
31+
32+
<script setup lang="ts">
33+
// Default card display component for community mentions
34+
import LfxCommunityCardHeader from '../fragments/card-header.vue';
35+
import LfxCommunityCardContent from '../fragments/card-content.vue';
36+
import LfxCommunityCardFooter from '../fragments/card-footer.vue';
37+
import type { CommunityMentions } from '~~/types/community/community';
38+
import LfxCard from '~/components/uikit/card/card.vue';
39+
40+
defineProps<{
41+
mention: CommunityMentions;
42+
}>();
43+
</script>
44+
45+
<script lang="ts">
46+
export default {
47+
name: 'LfxCommunityDefaultCard',
48+
};
49+
</script>

‎frontend/app/components/modules/project/components/community/card-displays/github-card.vue‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!--
2+
Copyright (c) 2025 The Linux Foundation and each contributor.
3+
SPDX-License-Identifier: MIT
4+
-->
5+
<!-- Copyright (c) 2025 The Linux Foundation and each contributor. -->
6+
<!-- SPDX-License-Identifier: MIT -->
7+
<template>
8+
<lfx-community-default-card :mention="mention">
9+
<div class="flex flex-col gap-5">
10+
<!-- Header Section -->
11+
<lfx-community-card-header :mention="mention">
12+
<template #source-display>
13+
<a
14+
v-if="mention.url"
15+
:href="mention.url"
16+
class="text-xs font-medium text-black hover:underline decoration-dashed"
17+
target="_blank"
18+
rel="noopener noreferrer"
19+
>
20+
{{ githubRepoName }}
21+
</a>
22+
<span
23+
v-else
24+
class="text-xs font-medium text-black"
25+
>
26+
{{ githubRepoName }}
27+
</span>
28+
</template>
29+
</lfx-community-card-header>
30+
31+
<!-- Content Section -->
32+
<lfx-community-card-content :mention="mention" />
33+
34+
<!-- Relevance Comment Section -->
35+
<lfx-community-card-footer :mention="mention" />
36+
</div>
37+
</lfx-community-default-card>
38+
</template>
39+
40+
<script setup lang="ts">
41+
// Default card display component for community mentions
42+
import { computed } from 'vue';
43+
import LfxCommunityCardHeader from '../fragments/card-header.vue';
44+
import LfxCommunityCardContent from '../fragments/card-content.vue';
45+
import LfxCommunityCardFooter from '../fragments/card-footer.vue';
46+
import LfxCommunityDefaultCard from './default-card.vue';
47+
import type { CommunityMentions } from '~~/types/community/community';
48+
49+
const props = defineProps<{
50+
mention: CommunityMentions;
51+
}>();
52+
53+
const githubRepoName = computed(() => {
54+
if (!props.mention.url) {
55+
return 'Github';
56+
}
57+
// Attempt to match GitHub repo URLs, extracting "owner/repo"
58+
// e.g., "https://github.com/org/repo/issues/123..." => "org/repo"
59+
const githubUrlRegex = /^https?:\/\/github\.com\/([^\/]+\/[^\/]+)/i;
60+
const match = props.mention.url.match(githubUrlRegex);
61+
return match ? match[1] : props.mention.url;
62+
});
63+
</script>
64+
65+
<script lang="ts">
66+
export default {
67+
name: 'LfxCommunityGithubCard',
68+
};
69+
</script>

‎frontend/app/components/modules/project/components/community/card-displays/reddit-card.vue‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!--
2+
Copyright (c) 2025 The Linux Foundation and each contributor.
3+
SPDX-License-Identifier: MIT
4+
-->
5+
<!-- Copyright (c) 2025 The Linux Foundation and each contributor. -->
6+
<!-- SPDX-License-Identifier: MIT -->
7+
<template>
8+
<lfx-community-default-card :mention="mention">
9+
<div class="flex flex-col gap-5">
10+
<!-- Header Section -->
11+
<lfx-community-card-header :mention="mention">
12+
<template #source-display>
13+
<a
14+
v-if="mention.url"
15+
:href="mention.url"
16+
class="text-xs font-medium text-black hover:underline decoration-dashed"
17+
target="_blank"
18+
rel="noopener noreferrer"
19+
>
20+
{{ mention.subreddit }}
21+
</a>
22+
<span
23+
v-else
24+
class="text-xs font-medium text-black"
25+
>
26+
{{ mention.subreddit }}
27+
</span>
28+
</template>
29+
</lfx-community-card-header>
30+
31+
<!-- Content Section -->
32+
<lfx-community-card-content :mention="mention" />
33+
34+
<!-- Relevance Comment Section -->
35+
<lfx-community-card-footer :mention="mention" />
36+
</div>
37+
</lfx-community-default-card>
38+
</template>
39+
40+
<script setup lang="ts">
41+
// Default card display component for community mentions
42+
import LfxCommunityCardHeader from '../fragments/card-header.vue';
43+
import LfxCommunityCardContent from '../fragments/card-content.vue';
44+
import LfxCommunityCardFooter from '../fragments/card-footer.vue';
45+
import LfxCommunityDefaultCard from './default-card.vue';
46+
import type { CommunityMentions } from '~~/types/community/community';
47+
48+
defineProps<{
49+
mention: CommunityMentions;
50+
}>();
51+
</script>
52+
53+
<script lang="ts">
54+
export default {
55+
name: 'LfxCommunityRedditCard',
56+
};
57+
</script>

‎frontend/app/components/modules/project/components/community/config/bluesky.config.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Copyright (c) 2025 The Linux Foundation and each contributor.
2+
// SPDX-License-Identifier: MIT
3+
4+
import DefaultCard from '../card-displays/default-card.vue';
5+
import type { CommunityConfig } from './types/community.types';
6+
7+
export const blueskyConfig: CommunityConfig = {
8+
key: 'bluesky',
9+
label: 'Bluesky',
10+
image: '/images/platforms/bluesky.png',
11+
dataDisplay: DefaultCard,
12+
};

‎frontend/app/components/modules/project/components/community/config/devto.config.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Copyright (c) 2025 The Linux Foundation and each contributor.
2+
// SPDX-License-Identifier: MIT
3+
4+
import DefaultCard from '../card-displays/default-card.vue';
5+
import type { CommunityConfig } from './types/community.types';
6+
7+
export const devtoConfig: CommunityConfig = {
8+
key: 'devto',
9+
label: 'Dev.to',
10+
image: '/images/platforms/devto.png',
11+
dataDisplay: DefaultCard,
12+
};

‎frontend/app/components/modules/project/components/community/config/github.config.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Copyright (c) 2025 The Linux Foundation and each contributor.
2+
// SPDX-License-Identifier: MIT
3+
4+
import GithubCard from '../card-displays/github-card.vue';
5+
import type { CommunityConfig } from './types/community.types';
6+
7+
export const githubConfig: CommunityConfig = {
8+
key: 'github',
9+
label: 'GitHub',
10+
image: '/images/platforms/github.png',
11+
dataDisplay: GithubCard,
12+
};

‎frontend/app/components/modules/project/components/community/config/hackernews.config.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Copyright (c) 2025 The Linux Foundation and each contributor.
2+
// SPDX-License-Identifier: MIT
3+
4+
import DefaultCard from '../card-displays/default-card.vue';
5+
import type { CommunityConfig } from './types/community.types';
6+
7+
export const hackernewsConfig: CommunityConfig = {
8+
key: 'hackernews',
9+
label: 'Hacker News',
10+
image: '/images/platforms/hackernews.svg',
11+
dataDisplay: DefaultCard,
12+
};

‎frontend/app/components/modules/project/components/community/config/index.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// Copyright (c) 2025 The Linux Foundation and each contributor.
2+
// SPDX-License-Identifier: MIT
3+
4+
import type { CommunityConfig } from './types/community.types';
5+
import { blueskyConfig } from './bluesky.config';
6+
import { devtoConfig } from './devto.config';
7+
import { githubConfig } from './github.config';
8+
import { hackernewsConfig } from './hackernews.config';
9+
import { linkedinConfig } from './linkedin.config';
10+
import { newsletterConfig } from './newsletter.config';
11+
import { podcastConfig } from './podcast.config';
12+
import { redditConfig } from './reddit.config';
13+
import { stackoverflowConfig } from './stackoverflow.config';
14+
import { xConfig } from './x.config';
15+
import { youtubeConfig } from './youtube.config';
16+
17+
export const communityConfigs: Record<string, CommunityConfig> = {
18+
bluesky: blueskyConfig,
19+
devto: devtoConfig,
20+
github: githubConfig,
21+
hackernews: hackernewsConfig,
22+
linkedin: linkedinConfig,
23+
newsletter: newsletterConfig,
24+
podcasts: podcastConfig,
25+
reddit: redditConfig,
26+
stackoverflow: stackoverflowConfig,
27+
twitter: xConfig,
28+
youtube: youtubeConfig,
29+
};
30+
31+
export default communityConfigs;

‎frontend/app/components/modules/project/components/community/config/linkedin.config.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Copyright (c) 2025 The Linux Foundation and each contributor.
2+
// SPDX-License-Identifier: MIT
3+
4+
import DefaultCard from '../card-displays/default-card.vue';
5+
import type { CommunityConfig } from './types/community.types';
6+
7+
export const linkedinConfig: CommunityConfig = {
8+
key: 'linkedin',
9+
label: 'LinkedIn',
10+
image: '/images/platforms/linkedin.png',
11+
dataDisplay: DefaultCard,
12+
};

‎frontend/app/components/modules/project/components/community/config/newsletter.config.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Copyright (c) 2025 The Linux Foundation and each contributor.
2+
// SPDX-License-Identifier: MIT
3+
4+
import DefaultCard from '../card-displays/default-card.vue';
5+
import type { CommunityConfig } from './types/community.types';
6+
7+
export const newsletterConfig: CommunityConfig = {
8+
key: 'newsletter',
9+
label: 'Newsletter',
10+
image: '/images/platforms/newsletter.png',
11+
dataDisplay: DefaultCard,
12+
};

0 commit comments

Comments
 (0)