feat: community voice UI

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

@@ -0,0 +1,49 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<!-- Copyright (c) 2025 The Linux Foundation and each contributor. -->
+<!-- SPDX-License-Identifier: MIT -->
+<template>
+  <nuxt-link
+    :to="mention.url"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    <lfx-card
+      class="border border-neutral-100 rounded-xl overflow-hidden cursor-pointer hover:shadow-lg transition-shadow duration-300"
+    >
+      <div class="flex flex-col md:gap-5 gap-3">
+        <slot>
+          <!-- Header Section -->
+          <lfx-community-card-header :mention="mention" />
+
+          <!-- Content Section -->
+          <lfx-community-card-content :mention="mention" />
+
+          <!-- Relevance Comment Section -->
+          <lfx-community-card-footer :mention="mention" />
+        </slot>
+      </div>
+    </lfx-card>
+  </nuxt-link>
+</template>
+
+<script setup lang="ts">
+// Default card display component for community mentions
+import LfxCommunityCardHeader from '../fragments/card-header.vue';
+import LfxCommunityCardContent from '../fragments/card-content.vue';
+import LfxCommunityCardFooter from '../fragments/card-footer.vue';
+import type { CommunityMentions } from '~~/types/community/community';
+import LfxCard from '~/components/uikit/card/card.vue';
+
+defineProps<{
+  mention: CommunityMentions;
+}>();
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxCommunityDefaultCard',
+};
+</script>

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

@@ -0,0 +1,69 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<!-- Copyright (c) 2025 The Linux Foundation and each contributor. -->
+<!-- SPDX-License-Identifier: MIT -->
+<template>
+  <lfx-community-default-card :mention="mention">
+    <div class="flex flex-col gap-5">
+      <!-- Header Section -->
+      <lfx-community-card-header :mention="mention">
+        <template #source-display>
+          <a
+            v-if="mention.url"
+            :href="mention.url"
+            class="text-xs font-medium text-black hover:underline decoration-dashed"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {{ githubRepoName }}
+          </a>
+          <span
+            v-else
+            class="text-xs font-medium text-black"
+          >
+            {{ githubRepoName }}
+          </span>
+        </template>
+      </lfx-community-card-header>
+
+      <!-- Content Section -->
+      <lfx-community-card-content :mention="mention" />
+
+      <!-- Relevance Comment Section -->
+      <lfx-community-card-footer :mention="mention" />
+    </div>
+  </lfx-community-default-card>
+</template>
+
+<script setup lang="ts">
+// Default card display component for community mentions
+import { computed } from 'vue';
+import LfxCommunityCardHeader from '../fragments/card-header.vue';
+import LfxCommunityCardContent from '../fragments/card-content.vue';
+import LfxCommunityCardFooter from '../fragments/card-footer.vue';
+import LfxCommunityDefaultCard from './default-card.vue';
+import type { CommunityMentions } from '~~/types/community/community';
+
+const props = defineProps<{
+  mention: CommunityMentions;
+}>();
+
+const githubRepoName = computed(() => {
+  if (!props.mention.url) {
+    return 'Github';
+  }
+  // Attempt to match GitHub repo URLs, extracting "owner/repo"
+  // e.g., "https://github.com/org/repo/issues/123..." => "org/repo"
+  const githubUrlRegex = /^https?:\/\/github\.com\/([^\/]+\/[^\/]+)/i;
+  const match = props.mention.url.match(githubUrlRegex);
+  return match ? match[1] : props.mention.url;
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxCommunityGithubCard',
+};
+</script>

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

@@ -0,0 +1,57 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<!-- Copyright (c) 2025 The Linux Foundation and each contributor. -->
+<!-- SPDX-License-Identifier: MIT -->
+<template>
+  <lfx-community-default-card :mention="mention">
+    <div class="flex flex-col gap-5">
+      <!-- Header Section -->
+      <lfx-community-card-header :mention="mention">
+        <template #source-display>
+          <a
+            v-if="mention.url"
+            :href="mention.url"
+            class="text-xs font-medium text-black hover:underline decoration-dashed"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {{ mention.subreddit }}
+          </a>
+          <span
+            v-else
+            class="text-xs font-medium text-black"
+          >
+            {{ mention.subreddit }}
+          </span>
+        </template>
+      </lfx-community-card-header>
+
+      <!-- Content Section -->
+      <lfx-community-card-content :mention="mention" />
+
+      <!-- Relevance Comment Section -->
+      <lfx-community-card-footer :mention="mention" />
+    </div>
+  </lfx-community-default-card>
+</template>
+
+<script setup lang="ts">
+// Default card display component for community mentions
+import LfxCommunityCardHeader from '../fragments/card-header.vue';
+import LfxCommunityCardContent from '../fragments/card-content.vue';
+import LfxCommunityCardFooter from '../fragments/card-footer.vue';
+import LfxCommunityDefaultCard from './default-card.vue';
+import type { CommunityMentions } from '~~/types/community/community';
+
+defineProps<{
+  mention: CommunityMentions;
+}>();
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxCommunityRedditCard',
+};
+</script>

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

@@ -0,0 +1,12 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import DefaultCard from '../card-displays/default-card.vue';
+import type { CommunityConfig } from './types/community.types';
+
+export const blueskyConfig: CommunityConfig = {
+  key: 'bluesky',
+  label: 'Bluesky',
+  image: '/images/platforms/bluesky.png',
+  dataDisplay: DefaultCard,
+};

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

@@ -0,0 +1,12 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import DefaultCard from '../card-displays/default-card.vue';
+import type { CommunityConfig } from './types/community.types';
+
+export const devtoConfig: CommunityConfig = {
+  key: 'devto',
+  label: 'Dev.to',
+  image: '/images/platforms/devto.png',
+  dataDisplay: DefaultCard,
+};

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

@@ -0,0 +1,12 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import GithubCard from '../card-displays/github-card.vue';
+import type { CommunityConfig } from './types/community.types';
+
+export const githubConfig: CommunityConfig = {
+  key: 'github',
+  label: 'GitHub',
+  image: '/images/platforms/github.png',
+  dataDisplay: GithubCard,
+};

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

@@ -0,0 +1,12 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import DefaultCard from '../card-displays/default-card.vue';
+import type { CommunityConfig } from './types/community.types';
+
+export const hackernewsConfig: CommunityConfig = {
+  key: 'hackernews',
+  label: 'Hacker News',
+  image: '/images/platforms/hackernews.svg',
+  dataDisplay: DefaultCard,
+};

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

@@ -0,0 +1,31 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import type { CommunityConfig } from './types/community.types';
+import { blueskyConfig } from './bluesky.config';
+import { devtoConfig } from './devto.config';
+import { githubConfig } from './github.config';
+import { hackernewsConfig } from './hackernews.config';
+import { linkedinConfig } from './linkedin.config';
+import { newsletterConfig } from './newsletter.config';
+import { podcastConfig } from './podcast.config';
+import { redditConfig } from './reddit.config';
+import { stackoverflowConfig } from './stackoverflow.config';
+import { xConfig } from './x.config';
+import { youtubeConfig } from './youtube.config';
+
+export const communityConfigs: Record<string, CommunityConfig> = {
+  bluesky: blueskyConfig,
+  devto: devtoConfig,
+  github: githubConfig,
+  hackernews: hackernewsConfig,
+  linkedin: linkedinConfig,
+  newsletter: newsletterConfig,
+  podcasts: podcastConfig,
+  reddit: redditConfig,
+  stackoverflow: stackoverflowConfig,
+  twitter: xConfig,
+  youtube: youtubeConfig,
+};
+
+export default communityConfigs;

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

@@ -0,0 +1,12 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import DefaultCard from '../card-displays/default-card.vue';
+import type { CommunityConfig } from './types/community.types';
+
+export const linkedinConfig: CommunityConfig = {
+  key: 'linkedin',
+  label: 'LinkedIn',
+  image: '/images/platforms/linkedin.png',
+  dataDisplay: DefaultCard,
+};

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

@@ -0,0 +1,12 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import DefaultCard from '../card-displays/default-card.vue';
+import type { CommunityConfig } from './types/community.types';
+
+export const newsletterConfig: CommunityConfig = {
+  key: 'newsletter',
+  label: 'Newsletter',
+  image: '/images/platforms/newsletter.png',
+  dataDisplay: DefaultCard,
+};

frontend/app/components/modules/project/components/community/config/podcast.config.ts

@@ -0,0 +1,12 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import DefaultCard from '../card-displays/default-card.vue';
+import type { CommunityConfig } from './types/community.types';
+
+export const podcastConfig: CommunityConfig = {
+  key: 'podcasts',
+  label: 'Podcasts',
+  image: '/images/platforms/podcast.png',
+  dataDisplay: DefaultCard,
+};

frontend/app/components/modules/project/components/community/config/reddit.config.ts

@@ -0,0 +1,12 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import RedditCard from '../card-displays/reddit-card.vue';
+import type { CommunityConfig } from './types/community.types';
+
+export const redditConfig: CommunityConfig = {
+  key: 'reddit',
+  label: 'Reddit',
+  image: '/images/platforms/reddit.svg',
+  dataDisplay: RedditCard,
+};

frontend/app/components/modules/project/components/community/config/stackoverflow.config.ts

@@ -0,0 +1,12 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import DefaultCard from '../card-displays/default-card.vue';
+import type { CommunityConfig } from './types/community.types';
+
+export const stackoverflowConfig: CommunityConfig = {
+  key: 'stackoverflow',
+  label: 'Stack Overflow',
+  image: '/images/platforms/stackoverflow.png',
+  dataDisplay: DefaultCard,
+};

frontend/app/components/modules/project/components/community/config/types/community.types.ts

@@ -0,0 +1,9 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+import type { Component } from 'vue';
+export interface CommunityConfig {
+  key: string;
+  label: string;
+  image: string;
+  dataDisplay: Component;
+}

frontend/app/components/modules/project/components/community/config/x.config.ts

@@ -0,0 +1,12 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import DefaultCard from '../card-displays/default-card.vue';
+import type { CommunityConfig } from './types/community.types';
+
+export const xConfig: CommunityConfig = {
+  key: 'twitter',
+  label: 'X/Twitter',
+  image: '/images/platforms/x.png',
+  dataDisplay: DefaultCard,
+};

frontend/app/components/modules/project/components/community/config/youtube.config.ts

@@ -0,0 +1,12 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+
+import DefaultCard from '../card-displays/default-card.vue';
+import type { CommunityConfig } from './types/community.types';
+
+export const youtubeConfig: CommunityConfig = {
+  key: 'youtube',
+  label: 'YouTube',
+  image: '/images/platforms/youtube.png',
+  dataDisplay: DefaultCard,
+};