@commonpub/layer 0.1.0

package/pages/tags/[slug].vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type { Serialized, ContentListItem, PaginatedResponse } from '@commonpub/server';
+
+const route = useRoute();
+const tagSlug = computed(() => route.params.slug as string);
+
+useSeoMeta({
+  title: () => `#${tagSlug.value} — ${useSiteName()}`,
+  description: () => `Content tagged with "${tagSlug.value}" on CommonPub`,
+});
+
+const page = ref(0);
+const { data: results, refresh } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
+  query: computed(() => ({
+    tag: tagSlug.value,
+    status: 'published',
+    limit: 20,
+    offset: page.value * 20,
+  })),
+});
+
+const items = computed(() => results.value?.items ?? []);
+const total = computed(() => results.value?.total ?? 0);
+const hasMore = computed(() => items.value.length < total.value);
+
+async function loadMore(): Promise<void> {
+  page.value++;
+  await refresh();
+}
+</script>
+
+<template>
+  <div class="cpub-tag-page">
+    <div class="cpub-tag-header">
+      <div class="cpub-tag-badge"><i class="fa-solid fa-hashtag"></i></div>
+      <div>
+        <h1 class="cpub-tag-title">{{ tagSlug }}</h1>
+        <p class="cpub-tag-count">{{ total }} {{ total === 1 ? 'post' : 'posts' }}</p>
+      </div>
+    </div>
+
+    <div v-if="items.length" class="cpub-tag-grid">
+      <ContentCard
+        v-for="item in items"
+        :key="item.id"
+        :item="item"
+      />
+    </div>
+
+    <div v-else class="cpub-empty-state">
+      <div class="cpub-empty-state-icon"><i class="fa-solid fa-tag"></i></div>
+      <p class="cpub-empty-state-title">No content with this tag</p>
+    </div>
+
+    <div v-if="hasMore" class="cpub-tag-more">
+      <button class="cpub-btn" @click="loadMore">Load more</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-tag-page {
+  max-width: 960px;
+}
+
+.cpub-tag-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 24px;
+}
+
+.cpub-tag-badge {
+  width: 48px;
+  height: 48px;
+  background: var(--accent-bg);
+  border: var(--border-width-default) solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  color: var(--accent);
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-tag-title {
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.cpub-tag-count {
+  font-size: 12px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+}
+
+.cpub-tag-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.cpub-tag-more {
+  text-align: center;
+  padding: 24px 0;
+}
+
+@media (max-width: 768px) {
+  .cpub-tag-grid { grid-template-columns: 1fr; }
+}
+</style>

package/pages/tags/index.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+useSeoMeta({ title: `Tags — ${useSiteName()}`, description: 'Browse content by tags.' });
+
+const { data: trending } = await useFetch<any>('/api/search/trending');
+
+// Extract unique tags from trending content
+const tags = computed(() => {
+  if (!trending.value) return [];
+  const items = Array.isArray(trending.value) ? trending.value : (trending.value as { items?: Array<{ tags?: Array<{ name: string }> }> }).items ?? [];
+  const tagMap = new Map<string, number>();
+  for (const item of items) {
+    if (item.tags) {
+      for (const tag of item.tags) {
+        const name = typeof tag === 'string' ? tag : tag.name;
+        if (name) tagMap.set(name, (tagMap.get(name) ?? 0) + 1);
+      }
+    }
+  }
+  return Array.from(tagMap.entries())
+    .sort((a, b) => b[1] - a[1])
+    .map(([name, count]) => ({ name, count }));
+});
+</script>
+
+<template>
+  <div class="tags-page">
+    <h1 class="tags-title">Tags</h1>
+    <p class="tags-subtitle">Browse content by topic.</p>
+
+    <div v-if="tags.length" class="tags-cloud">
+      <NuxtLink
+        v-for="tag in tags"
+        :key="tag.name"
+        :to="`/tags/${tag.name}`"
+        class="tag-chip"
+      >
+        <span class="tag-hash">#</span>{{ tag.name }}
+        <span class="tag-count">{{ tag.count }}</span>
+      </NuxtLink>
+    </div>
+    <div v-else class="tags-empty">
+      <div class="tags-empty-icon"><i class="fa-solid fa-tags"></i></div>
+      <p>No tags yet. Tags will appear as content is published.</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tags-page { max-width: 800px; margin: 0 auto; padding: 32px; }
+.tags-title { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
+.tags-subtitle { font-size: 13px; color: var(--text-dim); margin-bottom: 24px; }
+
+.tags-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
+
+.tag-chip {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 8px 14px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  text-decoration: none;
+  font-size: 13px;
+  box-shadow: var(--shadow-md);
+  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
+}
+
+.tag-chip:hover { box-shadow: var(--shadow-sm); transform: translate(1px, 1px); border-color: var(--accent); color: var(--accent); }
+.tag-hash { color: var(--accent); font-weight: 700; }
+.tag-count { font-size: 10px; font-family: var(--font-mono); color: var(--text-faint); background: var(--surface2); padding: 1px 6px; margin-left: 4px; }
+
+.tags-empty { text-align: center; padding: 48px 0; color: var(--text-faint); }
+.tags-empty-icon { font-size: 32px; margin-bottom: 12px; }
+</style>

package/pages/u/[username]/followers.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+const route = useRoute();
+const username = route.params.username as string;
+
+useSeoMeta({ title: `Followers — @${username} — ${useSiteName()}` });
+
+const { data: followers } = useLazyFetch<Array<{ id: string; username: string; displayName: string | null; avatarUrl: string | null }>>(`/api/users/${username}/followers`);
+const { isAuthenticated, user } = useAuth();
+const toast = useToast();
+
+const followingState = ref<Record<string, boolean>>({});
+
+async function toggleFollow(targetUsername: string, isFollowing: boolean): Promise<void> {
+  try {
+    if (isFollowing) {
+      await $fetch(`/api/users/${targetUsername}/follow`, { method: 'DELETE' });
+      followingState.value[targetUsername] = false;
+    } else {
+      await $fetch(`/api/users/${targetUsername}/follow`, { method: 'POST' });
+      followingState.value[targetUsername] = true;
+    }
+  } catch {
+    toast.error('Failed to update follow');
+  }
+}
+</script>
+
+<template>
+  <div class="follow-page">
+    <div class="follow-header">
+      <NuxtLink :to="`/u/${username}`" class="follow-back"><i class="fa-solid fa-arrow-left"></i> @{{ username }}</NuxtLink>
+      <h1 class="follow-title">Followers</h1>
+    </div>
+
+    <div v-if="followers?.length" class="follow-list">
+      <div v-for="f in (followers as Array<{ id: string; username: string; displayName: string | null; avatarUrl: string | null }>)" :key="f.id" class="follow-item">
+        <NuxtLink :to="`/u/${f.username}`" class="follow-user">
+          <div class="follow-avatar">
+            <img v-if="f.avatarUrl" :src="f.avatarUrl" :alt="f.displayName || f.username" class="follow-avatar-img" />
+            <span v-else>{{ (f.displayName || f.username).charAt(0).toUpperCase() }}</span>
+          </div>
+          <div>
+            <div class="follow-name">{{ f.displayName || f.username }}</div>
+            <div class="follow-handle">@{{ f.username }}</div>
+          </div>
+        </NuxtLink>
+        <button
+          v-if="isAuthenticated && f.username !== user?.username"
+          class="cpub-btn cpub-btn-sm"
+          :class="{ 'cpub-btn-primary': !followingState[f.username] }"
+          @click="toggleFollow(f.username, !!followingState[f.username])"
+        >
+          {{ followingState[f.username] ? 'Following' : 'Follow' }}
+        </button>
+      </div>
+    </div>
+    <div v-else class="follow-empty">
+      <p>No followers yet.</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.follow-page { max-width: 600px; margin: 0 auto; padding: 32px; }
+.follow-header { margin-bottom: 24px; }
+.follow-back { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; }
+.follow-back:hover { color: var(--accent); }
+.follow-title { font-size: 22px; font-weight: 700; }
+
+.follow-list { display: flex; flex-direction: column; }
+.follow-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: var(--border-width-default) solid var(--border2); }
+.follow-item:last-child { border-bottom: none; }
+.follow-user { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
+.follow-user:hover .follow-name { color: var(--accent); }
+.follow-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--surface3); border: var(--border-width-default) solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); overflow: hidden; }
+.follow-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+.follow-name { font-size: 14px; font-weight: 600; }
+.follow-handle { font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); }
+
+.follow-empty { text-align: center; padding: 48px 0; color: var(--text-faint); }
+
+@media (max-width: 768px) {
+  .follow-page { padding: var(--space-4); }
+  .follow-title { font-size: var(--text-lg); }
+}
+</style>

package/pages/u/[username]/following.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+const route = useRoute();
+const username = route.params.username as string;
+
+useSeoMeta({ title: `Following — @${username} — ${useSiteName()}` });
+
+const { data: following } = useLazyFetch<Array<{ id: string; username: string; displayName: string | null; avatarUrl: string | null }>>(`/api/users/${username}/following`);
+const { isAuthenticated, user } = useAuth();
+const toast = useToast();
+
+const followingState = ref<Record<string, boolean>>({});
+
+// Initialize all as "following" since they appear in this user's following list
+watch(following, (f) => {
+  if (!f) return;
+  for (const u of (f as Array<{ username: string }>)) {
+    followingState.value[u.username] = true;
+  }
+}, { immediate: true });
+
+async function toggleFollow(targetUsername: string, isFollowing: boolean): Promise<void> {
+  try {
+    if (isFollowing) {
+      await $fetch(`/api/users/${targetUsername}/follow`, { method: 'DELETE' });
+      followingState.value[targetUsername] = false;
+    } else {
+      await $fetch(`/api/users/${targetUsername}/follow`, { method: 'POST' });
+      followingState.value[targetUsername] = true;
+    }
+  } catch {
+    toast.error('Failed to update follow');
+  }
+}
+</script>
+
+<template>
+  <div class="follow-page">
+    <div class="follow-header">
+      <NuxtLink :to="`/u/${username}`" class="follow-back"><i class="fa-solid fa-arrow-left"></i> @{{ username }}</NuxtLink>
+      <h1 class="follow-title">Following</h1>
+    </div>
+
+    <div v-if="following?.length" class="follow-list">
+      <div v-for="f in (following as Array<{ id: string; username: string; displayName: string | null; avatarUrl: string | null }>)" :key="f.id" class="follow-item">
+        <NuxtLink :to="`/u/${f.username}`" class="follow-user">
+          <div class="follow-avatar">
+            <img v-if="f.avatarUrl" :src="f.avatarUrl" :alt="f.displayName || f.username" class="follow-avatar-img" />
+            <span v-else>{{ (f.displayName || f.username).charAt(0).toUpperCase() }}</span>
+          </div>
+          <div>
+            <div class="follow-name">{{ f.displayName || f.username }}</div>
+            <div class="follow-handle">@{{ f.username }}</div>
+          </div>
+        </NuxtLink>
+        <button
+          v-if="isAuthenticated && f.username !== user?.username"
+          class="cpub-btn cpub-btn-sm"
+          :class="{ 'cpub-btn-primary': !followingState[f.username] }"
+          @click="toggleFollow(f.username, !!followingState[f.username])"
+        >
+          {{ followingState[f.username] ? 'Following' : 'Follow' }}
+        </button>
+      </div>
+    </div>
+    <div v-else class="follow-empty">
+      <p>Not following anyone yet.</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.follow-page { max-width: 600px; margin: 0 auto; padding: 32px; }
+.follow-header { margin-bottom: 24px; }
+.follow-back { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; }
+.follow-back:hover { color: var(--accent); }
+.follow-title { font-size: 22px; font-weight: 700; }
+
+.follow-list { display: flex; flex-direction: column; }
+.follow-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: var(--border-width-default) solid var(--border2); }
+.follow-item:last-child { border-bottom: none; }
+.follow-user { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
+.follow-user:hover .follow-name { color: var(--accent); }
+.follow-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--surface3); border: var(--border-width-default) solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); overflow: hidden; }
+.follow-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+.follow-name { font-size: 14px; font-weight: 600; }
+.follow-handle { font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); }
+
+.follow-empty { text-align: center; padding: 48px 0; color: var(--text-faint); }
+
+@media (max-width: 768px) {
+  .follow-page { padding: var(--space-4); }
+  .follow-title { font-size: var(--text-lg); }
+}
+</style>