@commonpub/layer 0.1.0

package/components/CommentSection.vue

@@ -0,0 +1,330 @@
+<script setup lang="ts">
+interface CommentAuthor {
+  id: string;
+  username: string;
+  displayName: string | null;
+  avatarUrl: string | null;
+}
+
+interface Comment {
+  id: string;
+  content: string;
+  createdAt: string;
+  author: CommentAuthor | null;
+}
+
+const props = defineProps<{
+  targetType: string;
+  targetId: string;
+  /** When set, comments federate as replies to the remote content */
+  federatedContentId?: string;
+}>();
+
+const { user } = useAuth();
+
+const isFederated = computed(() => !!props.federatedContentId);
+const commentLimit = 20;
+
+const queryParams = computed(() => ({
+  targetType: props.targetType,
+  targetId: props.targetId,
+  limit: commentLimit,
+}));
+
+// Skip comment fetch for federated content — local comments table has no record for remote IDs
+const { data: comments, refresh } = await useFetch<Comment[]>('/api/social/comments', {
+  query: queryParams,
+  lazy: true,
+  immediate: !props.federatedContentId,
+});
+
+const allCommentsLoaded = ref(false);
+const hasMore = computed(() => !allCommentsLoaded.value && (comments.value?.length ?? 0) >= commentLimit);
+const loadingMore = ref(false);
+
+async function loadMoreComments(): Promise<void> {
+  loadingMore.value = true;
+  try {
+    const more = await $fetch<Comment[]>('/api/social/comments', {
+      query: {
+        targetType: props.targetType,
+        targetId: props.targetId,
+        limit: commentLimit,
+        offset: comments.value?.length ?? 0,
+      },
+    });
+    if (more?.length && comments.value) {
+      comments.value.push(...more);
+    }
+    if (!more?.length || more.length < commentLimit) {
+      allCommentsLoaded.value = true;
+    }
+  } finally {
+    loadingMore.value = false;
+  }
+}
+
+const newComment = ref('');
+const submitting = ref(false);
+
+async function submitComment(): Promise<void> {
+  if (!newComment.value.trim()) return;
+  submitting.value = true;
+  try {
+    if (props.federatedContentId) {
+      // Federate reply to remote content
+      await $fetch('/api/federation/reply', {
+        method: 'POST',
+        body: {
+          federatedContentId: props.federatedContentId,
+          content: newComment.value,
+        },
+      });
+    } else {
+      await $fetch('/api/social/comments', {
+        method: 'POST',
+        body: {
+          targetType: props.targetType,
+          targetId: props.targetId,
+          content: newComment.value,
+        },
+      });
+    }
+    newComment.value = '';
+    if (!props.federatedContentId) {
+      await refresh();
+    }
+  } finally {
+    submitting.value = false;
+  }
+}
+
+async function deleteComment(id: string): Promise<void> {
+  await $fetch(`/api/social/comments/${id}`, { method: 'DELETE' });
+  await refresh();
+}
+</script>
+
+<template>
+  <section class="cpub-comments" aria-label="Comments">
+    <h3 class="cpub-comments-title">
+      Comments
+      <span v-if="comments?.length" class="cpub-comments-count">{{ comments.length }}</span>
+    </h3>
+
+    <!-- Federation notice -->
+    <p v-if="isFederated" class="cpub-comment-fed-notice">
+      <i class="fa-solid fa-globe"></i> Replies to this content are sent to the original instance.
+    </p>
+
+    <!-- New comment form -->
+    <div v-if="user" class="cpub-comment-form">
+      <textarea
+        v-model="newComment"
+        class="cpub-textarea"
+        :placeholder="isFederated ? 'Write a reply (will be sent to the original instance)...' : 'Write a comment...'"
+        rows="3"
+        aria-label="Write a comment"
+      ></textarea>
+      <button
+        class="cpub-btn cpub-btn-primary cpub-btn-sm"
+        :disabled="!newComment.trim() || submitting"
+        @click="submitComment"
+      >
+        {{ submitting ? 'Posting...' : isFederated ? 'Send Reply' : 'Post Comment' }}
+      </button>
+    </div>
+    <p v-else class="cpub-comment-login">
+      <NuxtLink to="/auth/login" class="cpub-link">Log in</NuxtLink> to comment.
+    </p>
+
+    <!-- Comments list -->
+    <div class="cpub-comment-list">
+      <div v-for="comment in (comments || [])" :key="comment.id" class="cpub-comment">
+        <div class="cpub-comment-avatar">
+          <img v-if="comment.author?.avatarUrl" :src="comment.author.avatarUrl" :alt="comment.author?.displayName || comment.author?.username" class="cpub-comment-avatar-img" />
+          <span v-else>{{ (comment.author?.displayName || comment.author?.username || 'U').charAt(0).toUpperCase() }}</span>
+        </div>
+        <div class="cpub-comment-body">
+          <div class="cpub-comment-header">
+            <NuxtLink :to="`/u/${comment.author?.username}`" class="cpub-comment-author">
+              {{ comment.author?.displayName || comment.author?.username }}
+            </NuxtLink>
+            <time class="cpub-comment-time">
+              {{ new Date(comment.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}
+            </time>
+          </div>
+          <p class="cpub-comment-text">{{ comment.content }}</p>
+          <button
+            v-if="user?.id === comment.author?.id"
+            class="cpub-comment-delete"
+            @click="deleteComment(comment.id)"
+            aria-label="Delete comment"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+      <p v-if="!comments?.length" class="cpub-comments-empty">No comments yet. Be the first!</p>
+      <div v-if="hasMore" class="cpub-comments-more">
+        <button class="cpub-btn cpub-btn-sm" :disabled="loadingMore" @click="loadMoreComments">
+          {{ loadingMore ? 'Loading...' : 'Load more comments' }}
+        </button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.cpub-comments {
+  margin-top: var(--space-8);
+  padding-top: var(--space-6);
+  border-top: var(--border-width-default) solid var(--border);
+}
+
+.cpub-comments-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: var(--space-4);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cpub-comments-count {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-faint);
+  background: var(--surface2);
+  padding: 1px 6px;
+  border: 1px solid var(--border2);
+}
+
+.cpub-comment-form {
+  margin-bottom: var(--space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  align-items: flex-end;
+}
+
+.cpub-comment-form .cpub-textarea {
+  width: 100%;
+}
+
+.cpub-comment-fed-notice {
+  font-size: 12px;
+  color: var(--text-dim);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  background: var(--accent-bg);
+  border: 1px solid var(--accent-border);
+  border-radius: 8px;
+}
+.cpub-comment-fed-notice i { color: var(--accent); font-size: 11px; }
+
+.cpub-comment-login {
+  font-size: 13px;
+  color: var(--text-dim);
+  margin-bottom: var(--space-6);
+}
+
+.cpub-comment-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.cpub-comment {
+  display: flex;
+  gap: 10px;
+}
+
+.cpub-comment-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--surface3);
+  border: var(--border-width-default) solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-dim);
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.cpub-comment-avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.cpub-comment-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.cpub-comment-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.cpub-comment-author {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+  text-decoration: none;
+}
+
+.cpub-comment-author:hover {
+  color: var(--accent);
+}
+
+.cpub-comment-time {
+  font-size: 10px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+}
+
+.cpub-comment-text {
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.6;
+}
+
+.cpub-comment-delete {
+  font-size: 10px;
+  color: var(--text-faint);
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin-top: 4px;
+  padding: 0;
+}
+
+.cpub-comment-delete:hover {
+  color: var(--red);
+}
+
+.cpub-comments-empty {
+  color: var(--text-faint);
+  font-size: 13px;
+  text-align: center;
+  padding: var(--space-6) 0;
+}
+
+.cpub-comments-more {
+  text-align: center;
+  padding: var(--space-4) 0;
+}
+</style>

package/components/ContentCard.vue

@@ -0,0 +1,340 @@
+<script setup lang="ts">
+import type { Serialized, ContentListItem } from '@commonpub/server';
+
+/**
+ * ContentCard — the primary card used across homepage, search, profile, hubs.
+ * Matches the project card from mockup 01-homepage:
+ * - Cover image or icon placeholder with grid pattern
+ * - Type + featured badges on thumbnail
+ * - Difficulty dots (for projects)
+ * - Title, description (2-line clamp)
+ * - Author avatar + name + date row
+ * - Stats: hearts, views, comments
+ */
+const props = defineProps<{
+  item: Serialized<ContentListItem> & { isFeatured?: boolean };
+}>();
+
+const cover = computed(() => {
+  const url = props.item.coverImageUrl;
+  if (!url) return null;
+  // Proxy remote images through our server for faster loading + caching
+  const config = useRuntimeConfig();
+  const siteDomain = (config.public?.domain as string) || '';
+  try {
+    const imgHost = new URL(url).hostname;
+    if (siteDomain && !url.includes(siteDomain)) {
+      return `/api/image-proxy?url=${encodeURIComponent(url)}&w=600`;
+    }
+  } catch { /* invalid URL, use as-is */ }
+  return url;
+});
+
+const thumbIcons: Record<string, { icon: string; color: string }> = {
+  project: { icon: 'fa-solid fa-microchip', color: 'var(--accent)' },
+  article: { icon: 'fa-solid fa-file-lines', color: 'var(--teal)' },
+  blog: { icon: 'fa-solid fa-pen-nib', color: 'var(--pink)' },
+  explainer: { icon: 'fa-solid fa-lightbulb', color: 'var(--yellow)' },
+};
+
+const diffDots = computed(() => {
+  const d = props.item.difficulty;
+  if (!d) return 0;
+  if (d === 'beginner') return 1;
+  if (d === 'intermediate') return 2;
+  return 3;
+});
+
+const isFederated = computed(() => props.item.source === 'federated');
+
+const cardLink = computed(() => {
+  if (isFederated.value && props.item.federatedContentId) {
+    return `/mirror/${props.item.federatedContentId}`;
+  }
+  return `/${props.item.type}/${props.item.slug}`;
+});
+
+const authorInitial = computed(() => {
+  const name = props.item.author?.displayName || props.item.author?.username || '?';
+  return name.charAt(0).toUpperCase();
+});
+
+const dateStr = computed(() => {
+  const d = props.item.publishedAt || props.item.createdAt;
+  return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+});
+
+function formatCount(n: number | undefined): string {
+  if (!n) return '0';
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
+  return String(n);
+}
+</script>
+
+<template>
+  <article class="cpub-cc">
+    <NuxtLink :to="cardLink" class="cpub-cc-link">
+      <!-- Thumbnail -->
+      <div class="cpub-cc-thumb">
+        <img v-if="cover" :src="cover" :alt="item.title" class="cpub-cc-cover" loading="lazy" />
+        <template v-else>
+          <div class="cpub-cc-grid-bg" />
+          <i :class="[thumbIcons[item.type]?.icon || 'fa-solid fa-file']" class="cpub-cc-icon" :style="{ color: thumbIcons[item.type]?.color || 'var(--accent)' }" />
+        </template>
+
+        <!-- Badges overlay -->
+        <div class="cpub-cc-badges">
+          <span v-if="item.isFeatured" class="cpub-cc-badge cpub-cc-badge--featured">
+            <i class="fa-solid fa-star"></i> Featured
+          </span>
+          <span v-if="isFederated && item.sourceDomain" class="cpub-cc-badge cpub-cc-badge--federated">
+            <i class="fa-solid fa-globe" /> {{ item.sourceDomain }}
+          </span>
+          <ContentTypeBadge :type="item.type" />
+        </div>
+
+        <!-- Difficulty dots (projects only) -->
+        <div v-if="diffDots > 0" class="cpub-cc-diff">
+          <span v-for="i in 3" :key="i" class="cpub-cc-dot" :class="{ filled: i <= diffDots }" />
+        </div>
+      </div>
+
+      <!-- Body -->
+      <div class="cpub-cc-body">
+        <h3 class="cpub-cc-title">{{ item.title }}</h3>
+        <p v-if="item.description" class="cpub-cc-desc">{{ item.description }}</p>
+
+        <!-- Footer: author + stats -->
+        <div class="cpub-cc-footer">
+          <div v-if="item.author" class="cpub-cc-author">
+            <img v-if="item.author.avatarUrl" :src="item.author.avatarUrl" :alt="item.author.displayName || item.author.username" class="cpub-cc-av cpub-cc-av--img" />
+            <span v-else class="cpub-cc-av">{{ authorInitial }}</span>
+            <span class="cpub-cc-aname">{{ item.author.displayName || item.author.username }}</span>
+            <span class="cpub-cc-sep">&middot;</span>
+            <time class="cpub-cc-date">{{ dateStr }}</time>
+          </div>
+          <div class="cpub-cc-stats">
+            <span class="cpub-cc-stat"><i class="fa-solid fa-heart"></i> {{ formatCount(item.likeCount) }}</span>
+            <span class="cpub-cc-stat"><i class="fa-solid fa-eye"></i> {{ formatCount(item.viewCount) }}</span>
+          </div>
+        </div>
+      </div>
+    </NuxtLink>
+  </article>
+</template>
+
+<style scoped>
+.cpub-cc {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  overflow: hidden;
+  transition: transform 0.15s, box-shadow 0.15s;
+}
+
+.cpub-cc:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-cc-link {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+}
+
+/* Thumbnail */
+.cpub-cc-thumb {
+  position: relative;
+  aspect-ratio: 4 / 3;
+  background: var(--surface2);
+  border-bottom: var(--border-width-default) solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.cpub-cc-cover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cpub-cc-grid-bg {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(var(--border2) 1px, transparent 1px),
+    linear-gradient(90deg, var(--border2) 1px, transparent 1px);
+  background-size: 20px 20px;
+  opacity: 0.25;
+}
+
+.cpub-cc-icon {
+  position: relative;
+  z-index: 1;
+  font-size: 36px;
+  opacity: 0.2;
+}
+
+/* Badges */
+.cpub-cc-badges {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  display: flex;
+  gap: 4px;
+  z-index: 2;
+}
+
+.cpub-cc-badge {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 2px 7px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--color-badge-overlay, rgba(0, 0, 0, 0.75));
+  color: #fff;
+  backdrop-filter: blur(4px);
+}
+
+.cpub-cc-badge--featured {
+  color: var(--yellow);
+}
+
+.cpub-cc-badge--federated {
+  color: var(--teal);
+}
+.cpub-cc-badge--federated i {
+  font-size: 8px;
+}
+
+/* Difficulty dots */
+.cpub-cc-diff {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  display: flex;
+  gap: 3px;
+  z-index: 2;
+}
+
+.cpub-cc-dot {
+  width: 8px;
+  height: 8px;
+  border: var(--border-width-default) solid var(--surface);
+  background: transparent;
+}
+
+.cpub-cc-dot.filled {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+/* Body */
+.cpub-cc-body {
+  padding: 12px 14px 10px;
+}
+
+.cpub-cc-title {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.35;
+  margin-bottom: 4px;
+  color: var(--text);
+}
+
+.cpub-cc:hover .cpub-cc-title {
+  color: var(--accent);
+}
+
+.cpub-cc-desc {
+  font-size: 11px;
+  color: var(--text-dim);
+  line-height: 1.5;
+  margin-bottom: 8px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Footer */
+.cpub-cc-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: var(--border-width-default) solid var(--border2);
+}
+
+.cpub-cc-author {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  color: var(--text-faint);
+  min-width: 0;
+}
+
+.cpub-cc-av {
+  width: 18px;
+  height: 18px;
+  background: var(--accent-bg);
+  border: var(--border-width-default) solid var(--accent-border);
+  color: var(--accent);
+  font-size: 8px;
+  font-weight: 700;
+  font-family: var(--font-mono);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 50%;
+}
+
+.cpub-cc-av--img {
+  object-fit: cover;
+}
+
+.cpub-cc-aname {
+  color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cpub-cc-sep {
+  color: var(--border2);
+}
+
+.cpub-cc-date {
+  white-space: nowrap;
+  font-family: var(--font-mono);
+  font-size: 10px;
+}
+
+.cpub-cc-stats {
+  display: flex;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.cpub-cc-stat {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-faint);
+}
+
+.cpub-cc-stat i {
+  font-size: 9px;
+}
+</style>