@commonpub/layer 0.11.0 → 0.13.0

package/components/EventCard.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { EventListItem } from '@commonpub/server';
+
+const props = defineProps<{
+  event: EventListItem;
+}>();
+
+const statusClass = computed(() => {
+  const map: Record<string, string> = {
+    published: 'cpub-badge-accent',
+    active: 'cpub-badge-green',
+    completed: 'cpub-badge-dim',
+    cancelled: 'cpub-badge-red',
+    draft: 'cpub-badge-yellow',
+  };
+  return map[props.event.status] ?? 'cpub-badge-dim';
+});
+
+const typeIcon = computed(() => {
+  const map: Record<string, string> = {
+    'in-person': 'fa-solid fa-location-dot',
+    'online': 'fa-solid fa-video',
+    'hybrid': 'fa-solid fa-arrows-split-up-and-left',
+  };
+  return map[props.event.eventType] ?? 'fa-solid fa-calendar';
+});
+
+function formatDate(date: string | Date): string {
+  return new Date(date).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+function formatTime(date: string | Date): string {
+  return new Date(date).toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+}
+</script>
+
+<template>
+  <NuxtLink :to="`/events/${event.slug}`" class="cpub-event-card">
+    <div v-if="event.coverImage" class="cpub-event-cover">
+      <img :src="event.coverImage" :alt="event.title" />
+    </div>
+    <div class="cpub-event-body">
+      <div class="cpub-event-header">
+        <span class="cpub-badge" :class="statusClass">{{ event.status }}</span>
+        <span v-if="event.isFeatured" class="cpub-badge cpub-badge-accent"><i class="fa-solid fa-star"></i> Featured</span>
+      </div>
+      <div class="cpub-event-date">
+        <i class="fa-solid fa-calendar"></i>
+        {{ formatDate(event.startDate) }} at {{ formatTime(event.startDate) }}
+      </div>
+      <h3 class="cpub-event-title">{{ event.title }}</h3>
+      <p v-if="event.description" class="cpub-event-desc">{{ event.description }}</p>
+      <div class="cpub-event-meta">
+        <span><i :class="typeIcon"></i> {{ event.eventType }}</span>
+        <span v-if="event.location"><i class="fa-solid fa-map-pin"></i> {{ event.location }}</span>
+        <span><i class="fa-solid fa-users"></i> {{ event.attendeeCount }}{{ event.capacity ? ` / ${event.capacity}` : '' }}</span>
+      </div>
+    </div>
+  </NuxtLink>
+</template>
+
+<style scoped>
+.cpub-event-card {
+  display: flex;
+  flex-direction: column;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  text-decoration: none;
+  color: var(--text);
+  transition: box-shadow 0.15s, transform 0.15s;
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+.cpub-event-card:hover { box-shadow: var(--shadow-lg); transform: translate(-1px, -1px); }
+
+.cpub-event-cover { height: 140px; overflow: hidden; }
+.cpub-event-cover img { width: 100%; height: 100%; object-fit: cover; }
+
+.cpub-event-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
+
+.cpub-event-header { display: flex; gap: 6px; flex-wrap: wrap; }
+
+.cpub-event-date {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--accent);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.cpub-event-date i { font-size: 10px; }
+
+.cpub-event-title { font-size: 15px; font-weight: 600; margin: 0; }
+
+.cpub-event-desc {
+  font-size: 12px;
+  color: var(--text-dim);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.cpub-event-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  font-size: 11px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+  margin-top: 4px;
+}
+.cpub-event-meta i { font-size: 10px; margin-right: 3px; }
+</style>

package/components/PollDisplay.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { PollOptionResult } from '@commonpub/server';
+
+const props = defineProps<{
+  hubSlug: string;
+  postId: string;
+}>();
+
+const { isAuthenticated } = useAuth();
+const toast = useToast();
+const loading = ref(false);
+
+const { data, refresh } = await useFetch<{ options: PollOptionResult[]; userVote: string | null }>(
+  `/api/hubs/${props.hubSlug}/posts/${props.postId}/poll-options`,
+);
+
+const totalVotes = computed(() => {
+  if (!data.value) return 0;
+  return data.value.options.reduce((sum, opt) => sum + opt.voteCount, 0);
+});
+
+const hasVoted = computed(() => !!data.value?.userVote);
+
+function percentage(count: number): number {
+  if (totalVotes.value === 0) return 0;
+  return Math.round((count / totalVotes.value) * 100);
+}
+
+async function vote(optionId: string): Promise<void> {
+  if (!isAuthenticated.value || loading.value || hasVoted.value) return;
+  loading.value = true;
+  try {
+    await $fetch(`/api/hubs/${props.hubSlug}/posts/${props.postId}/poll-vote`, {
+      method: 'POST',
+      body: { optionId },
+    });
+    await refresh();
+  } catch {
+    toast.error('Failed to submit vote');
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div v-if="data?.options?.length" class="cpub-poll" role="group" aria-label="Poll">
+    <button
+      v-for="option in data.options"
+      :key="option.id"
+      type="button"
+      class="cpub-poll-option"
+      :class="{ voted: data.userVote === option.id, clickable: !hasVoted && isAuthenticated }"
+      :disabled="hasVoted || !isAuthenticated"
+      :aria-pressed="data.userVote === option.id"
+      :aria-label="`${option.label}${hasVoted ? ` — ${percentage(option.voteCount)}%` : ''}`"
+      @click="vote(option.id)"
+    >
+      <div class="cpub-poll-bar" :style="{ width: hasVoted || !isAuthenticated ? `${percentage(option.voteCount)}%` : '0%' }" />
+      <span class="cpub-poll-label">{{ option.label }}</span>
+      <span v-if="hasVoted || !isAuthenticated" class="cpub-poll-pct">{{ percentage(option.voteCount) }}%</span>
+    </button>
+    <div class="cpub-poll-meta">
+      {{ totalVotes }} vote{{ totalVotes !== 1 ? 's' : '' }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-poll { display: flex; flex-direction: column; gap: 6px; }
+
+.cpub-poll-option {
+  position: relative;
+  padding: 8px 12px;
+  border: var(--border-width-default) solid var(--border);
+  background: transparent;
+  font-size: 13px;
+  font-family: inherit;
+  color: var(--text);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+  transition: border-color 0.12s;
+  text-align: left;
+  width: 100%;
+}
+.cpub-poll-option.clickable { cursor: pointer; }
+.cpub-poll-option.clickable:hover { border-color: var(--accent); }
+.cpub-poll-option:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.cpub-poll-option.voted { border-color: var(--accent); font-weight: 600; }
+.cpub-poll-option:disabled:not(.voted) { opacity: 0.7; cursor: default; }
+
+.cpub-poll-bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  background: var(--accent-bg);
+  transition: width 0.3s ease;
+  z-index: 0;
+}
+
+.cpub-poll-label { position: relative; z-index: 1; flex: 1; }
+.cpub-poll-pct { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
+
+.cpub-poll-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-top: 2px; }
+</style>

package/components/PostVoteButtons.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { VoteDirection } from '@commonpub/server';
+
+const props = defineProps<{
+  hubSlug: string;
+  postId: string;
+  voteScore: number;
+  userVote?: VoteDirection | null;
+}>();
+
+const emit = defineEmits<{
+  voted: [result: { voteScore: number; direction: VoteDirection | null }];
+}>();
+
+const { isAuthenticated } = useAuth();
+const toast = useToast();
+const loading = ref(false);
+const currentScore = ref(props.voteScore);
+const currentVote = ref<VoteDirection | null>(props.userVote ?? null);
+
+watch(() => props.voteScore, (v) => { currentScore.value = v; });
+watch(() => props.userVote, (v) => { currentVote.value = v ?? null; });
+
+async function vote(direction: VoteDirection): Promise<void> {
+  if (!isAuthenticated.value || loading.value) return;
+  loading.value = true;
+  try {
+    const result = await $fetch<{ voted: boolean; direction: VoteDirection | null; voteScore: number }>(
+      `/api/hubs/${props.hubSlug}/posts/${props.postId}/vote`,
+      { method: 'POST', body: { direction } },
+    );
+    currentScore.value = result.voteScore;
+    currentVote.value = result.direction;
+    emit('voted', { voteScore: result.voteScore, direction: result.direction });
+  } catch {
+    toast.error('Vote failed');
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-vote-buttons">
+    <button
+      class="cpub-vote-btn cpub-vote-up"
+      :class="{ active: currentVote === 'up' }"
+      :disabled="!isAuthenticated || loading"
+      :aria-pressed="currentVote === 'up'"
+      aria-label="Upvote"
+      @click="vote('up')"
+    >
+      <i class="fa-solid fa-chevron-up"></i>
+    </button>
+    <span class="cpub-vote-score" :class="{ positive: currentScore > 0, negative: currentScore < 0 }">
+      {{ currentScore }}
+    </span>
+    <button
+      class="cpub-vote-btn cpub-vote-down"
+      :class="{ active: currentVote === 'down' }"
+      :disabled="!isAuthenticated || loading"
+      :aria-pressed="currentVote === 'down'"
+      aria-label="Downvote"
+      @click="vote('down')"
+    >
+      <i class="fa-solid fa-chevron-down"></i>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.cpub-vote-buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.cpub-vote-btn {
+  width: 28px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: var(--border-width-default) solid transparent;
+  color: var(--text-faint);
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.12s;
+}
+.cpub-vote-btn:hover:not(:disabled) { color: var(--text); background: var(--surface2); }
+.cpub-vote-btn:disabled { opacity: 0.3; cursor: default; }
+.cpub-vote-btn.active { color: var(--accent); }
+.cpub-vote-up.active { color: var(--green, var(--accent)); }
+.cpub-vote-down.active { color: var(--red, var(--accent)); }
+
+.cpub-vote-score {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-dim);
+  min-width: 20px;
+  text-align: center;
+}
+.cpub-vote-score.positive { color: var(--green, var(--accent)); }
+.cpub-vote-score.negative { color: var(--red); }
+</style>

package/components/contest/ContestJudgeManager.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import type { ContestJudgeItem } from '@commonpub/server';
+
+const props = defineProps<{
+  contestSlug: string;
+  isOwner: boolean;
+}>();
+
+const toast = useToast();
+const { data: judges, refresh } = await useFetch<ContestJudgeItem[]>(
+  `/api/contests/${props.contestSlug}/judges`,
+);
+
+const newJudgeId = ref('');
+const newJudgeRole = ref<'lead' | 'judge' | 'guest'>('judge');
+const adding = ref(false);
+
+async function addJudge(): Promise<void> {
+  if (!newJudgeId.value) return;
+  adding.value = true;
+  try {
+    await $fetch(`/api/contests/${props.contestSlug}/judges`, {
+      method: 'POST',
+      body: { userId: newJudgeId.value, role: newJudgeRole.value },
+    });
+    toast.success('Judge added');
+    newJudgeId.value = '';
+    await refresh();
+  } catch {
+    toast.error('Failed to add judge');
+  } finally {
+    adding.value = false;
+  }
+}
+
+async function removeJudge(userId: string): Promise<void> {
+  if (!confirm('Remove this judge?')) return;
+  try {
+    await $fetch(`/api/contests/${props.contestSlug}/judges/${userId}`, { method: 'DELETE' });
+    toast.success('Judge removed');
+    await refresh();
+  } catch {
+    toast.error('Failed to remove judge');
+  }
+}
+
+const roleLabels: Record<string, string> = {
+  lead: 'Lead Judge',
+  judge: 'Judge',
+  guest: 'Guest Judge',
+};
+</script>
+
+<template>
+  <div class="cpub-contest-judges">
+    <h3 class="cpub-judges-title">Judges</h3>
+
+    <div v-if="judges?.length" class="cpub-judges-list">
+      <div v-for="judge in judges" :key="judge.id" class="cpub-judge-row">
+        <NuxtLink :to="`/u/${judge.userUsername}`" class="cpub-judge-link">
+          <span class="cpub-judge-avatar">
+            <img v-if="judge.userAvatar" :src="judge.userAvatar" :alt="judge.userName" />
+            <span v-else>{{ judge.userName.charAt(0) }}</span>
+          </span>
+          <span class="cpub-judge-name">{{ judge.userName }}</span>
+        </NuxtLink>
+        <span class="cpub-judge-role">{{ roleLabels[judge.role] || judge.role }}</span>
+        <span v-if="!judge.acceptedAt" class="cpub-judge-pending">Pending</span>
+        <button v-if="isOwner" class="cpub-judge-remove" :aria-label="`Remove ${judge.userName} from judges`" @click="removeJudge(judge.userId)">
+          <i class="fa-solid fa-xmark"></i>
+        </button>
+      </div>
+    </div>
+    <p v-else class="cpub-judges-empty">No judges assigned yet.</p>
+
+    <div v-if="isOwner" class="cpub-judges-add">
+      <input v-model="newJudgeId" class="cpub-judges-input" placeholder="User ID" />
+      <select v-model="newJudgeRole" class="cpub-judges-input cpub-judges-select">
+        <option value="lead">Lead</option>
+        <option value="judge">Judge</option>
+        <option value="guest">Guest</option>
+      </select>
+      <button class="cpub-btn cpub-btn-sm" :disabled="adding || !newJudgeId" @click="addJudge">
+        <i class="fa-solid fa-plus"></i> Add
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-judges-title { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); margin: 0 0 12px; }
+
+.cpub-judges-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
+.cpub-judge-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
+.cpub-judge-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); flex: 1; min-width: 0; }
+.cpub-judge-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--surface2); border: var(--border-width-default) solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; overflow: hidden; flex-shrink: 0; }
+.cpub-judge-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.cpub-judge-name { font-size: 12px; font-weight: 600; }
+.cpub-judge-role { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; color: var(--text-faint); }
+.cpub-judge-pending { font-family: var(--font-mono); font-size: 9px; color: var(--yellow, var(--text-faint)); }
+.cpub-judge-remove { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 10px; padding: 4px; }
+.cpub-judge-remove:hover { color: var(--red); }
+
+.cpub-judges-empty { font-size: 12px; color: var(--text-faint); font-style: italic; margin-bottom: 12px; }
+
+.cpub-judges-add { display: flex; gap: 6px; align-items: center; }
+.cpub-judges-input { font-size: 12px; padding: 4px 8px; border: var(--border-width-default) solid var(--border); background: var(--bg); color: var(--text); outline: none; }
+.cpub-judges-input:focus { border-color: var(--accent); }
+.cpub-judges-select { max-width: 100px; }
+</style>

package/components/nav/MobileNavRenderer.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { NavItem } from '@commonpub/server';
+
+defineProps<{
+  items: NavItem[];
+}>();
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const { isAuthenticated, isAdmin } = useAuth();
+const features = useFeatures();
+
+const featureMap = computed(() => {
+  const map: Record<string, boolean> = {};
+  for (const [key, val] of Object.entries(features)) {
+    if (typeof val === 'object' && val !== null && 'value' in val) {
+      map[key] = (val as { value: boolean }).value;
+    }
+  }
+  return map;
+});
+
+function isVisible(item: NavItem): boolean {
+  if (item.featureGate && !featureMap.value[item.featureGate]) return false;
+  if (item.visibleTo === 'authenticated' && !isAuthenticated.value) return false;
+  if (item.visibleTo === 'admin' && !isAdmin.value) return false;
+  return true;
+}
+
+function visibleChildren(item: NavItem): NavItem[] {
+  return (item.children ?? []).filter(c => isVisible(c));
+}
+</script>
+
+<template>
+  <nav class="cpub-mobile-nav" aria-label="Mobile navigation">
+    <template v-for="item in items" :key="item.id">
+      <!-- Dropdown → section label + indented children -->
+      <template v-if="item.type === 'dropdown' && isVisible(item) && visibleChildren(item).length > 0">
+        <div class="cpub-mobile-section-label">{{ item.label }}</div>
+        <template v-for="child in visibleChildren(item)" :key="child.id">
+          <span
+            v-if="child.disabled"
+            class="cpub-mobile-link cpub-mobile-link--indent cpub-mobile-link--disabled"
+          >
+            <i v-if="child.icon" :class="child.icon"></i> {{ child.label }}
+          </span>
+          <a
+            v-else-if="child.type === 'external' && child.href"
+            :href="child.href"
+            target="_blank"
+            rel="noopener"
+            class="cpub-mobile-link cpub-mobile-link--indent"
+            @click="emit('close')"
+          >
+            <i v-if="child.icon" :class="child.icon"></i> {{ child.label }}
+          </a>
+          <NuxtLink
+            v-else-if="child.route"
+            :to="child.route"
+            class="cpub-mobile-link cpub-mobile-link--indent"
+            @click="emit('close')"
+          >
+            <i v-if="child.icon" :class="child.icon"></i> {{ child.label }}
+          </NuxtLink>
+        </template>
+      </template>
+
+      <!-- Regular link -->
+      <template v-else-if="isVisible(item) && item.type !== 'dropdown'">
+        <a
+          v-if="item.type === 'external' && item.href"
+          :href="item.href"
+          target="_blank"
+          rel="noopener"
+          class="cpub-mobile-link"
+          @click="emit('close')"
+        >
+          <i v-if="item.icon" :class="item.icon"></i> {{ item.label }}
+        </a>
+        <NuxtLink
+          v-else-if="item.route"
+          :to="item.route"
+          class="cpub-mobile-link"
+          @click="emit('close')"
+        >
+          <i v-if="item.icon" :class="item.icon"></i> {{ item.label }}
+        </NuxtLink>
+      </template>
+    </template>
+  </nav>
+</template>

package/components/nav/NavDropdown.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { NavItem } from '@commonpub/server';
+
+const props = defineProps<{
+  item: NavItem;
+  open: boolean;
+}>();
+
+const emit = defineEmits<{
+  toggle: [];
+  close: [];
+}>();
+
+const { isAuthenticated, isAdmin } = useAuth();
+const features = useFeatures();
+const featureMap = computed(() => {
+  const map: Record<string, boolean> = {};
+  for (const [key, val] of Object.entries(features)) {
+    if (typeof val === 'object' && val !== null && 'value' in val) {
+      map[key] = (val as { value: boolean }).value;
+    }
+  }
+  return map;
+});
+
+function isChildVisible(child: NavItem): boolean {
+  if (child.featureGate && !featureMap.value[child.featureGate]) return false;
+  if (child.visibleTo === 'authenticated' && !isAuthenticated.value) return false;
+  if (child.visibleTo === 'admin' && !isAdmin.value) return false;
+  return true;
+}
+
+const visibleChildren = computed(() =>
+  (props.item.children ?? []).filter(c => isChildVisible(c)),
+);
+
+function handleKeydown(e: KeyboardEvent): void {
+  if (e.key === 'Escape' && props.open) {
+    emit('close');
+  }
+}
+</script>
+
+<template>
+  <div v-if="visibleChildren.length > 0" class="cpub-nav-dropdown" @keydown="handleKeydown">
+    <button
+      class="cpub-nav-link cpub-nav-trigger"
+      :class="{ 'cpub-nav-trigger--open': open }"
+      :aria-label="`${item.label} menu`"
+      aria-haspopup="true"
+      :aria-expanded="open"
+      @click.stop="emit('toggle')"
+      @keydown.enter.stop="emit('toggle')"
+      @keydown.space.prevent.stop="emit('toggle')"
+    >
+      <i v-if="item.icon" :class="item.icon"></i> {{ item.label }}
+      <i class="fa-solid fa-chevron-down cpub-nav-caret" />
+    </button>
+    <div v-if="open" class="cpub-nav-panel" role="menu">
+      <template v-for="child in visibleChildren" :key="child.id">
+        <span
+          v-if="child.disabled"
+          class="cpub-nav-panel-item cpub-nav-panel-item--disabled"
+          role="menuitem"
+          aria-disabled="true"
+        >
+          <i v-if="child.icon" :class="child.icon"></i> {{ child.label }}
+        </span>
+        <a
+          v-else-if="child.type === 'external' && child.href"
+          :href="child.href"
+          target="_blank"
+          rel="noopener"
+          class="cpub-nav-panel-item"
+          role="menuitem"
+          @click="emit('close')"
+        >
+          <i v-if="child.icon" :class="child.icon"></i> {{ child.label }}
+          <i class="fa-solid fa-arrow-up-right-from-square cpub-nav-external-icon"></i>
+        </a>
+        <NuxtLink
+          v-else-if="child.route"
+          :to="child.route"
+          class="cpub-nav-panel-item"
+          role="menuitem"
+          @click="emit('close')"
+        >
+          <i v-if="child.icon" :class="child.icon"></i> {{ child.label }}
+        </NuxtLink>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-nav-external-icon {
+  font-size: 8px;
+  color: var(--text-faint);
+  margin-left: 2px;
+}
+</style>

package/components/nav/NavLink.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { NavItem } from '@commonpub/server';
+
+const props = defineProps<{
+  item: NavItem;
+}>();
+
+const isExternal = computed(() => props.item.type === 'external' && props.item.href);
+</script>
+
+<template>
+  <span v-if="item.disabled" class="cpub-nav-link cpub-nav-panel-item--disabled">
+    <i v-if="item.icon" :class="item.icon"></i> {{ item.label }}
+  </span>
+  <a
+    v-else-if="isExternal"
+    :href="item.href"
+    target="_blank"
+    rel="noopener"
+    class="cpub-nav-link"
+  >
+    <i v-if="item.icon" :class="item.icon"></i> {{ item.label }}
+    <i class="fa-solid fa-arrow-up-right-from-square cpub-nav-external-icon"></i>
+  </a>
+  <NuxtLink
+    v-else-if="item.route"
+    :to="item.route"
+    class="cpub-nav-link"
+  >
+    <i v-if="item.icon" :class="item.icon"></i> {{ item.label }}
+  </NuxtLink>
+</template>
+
+<style scoped>
+.cpub-nav-external-icon {
+  font-size: 8px;
+  opacity: 0.5;
+  margin-left: 2px;
+}
+</style>