@commonpub/layer 0.5.7 → 0.6.0

package/pages/u/[username]/[type]/[slug]/index.vue

@@ -0,0 +1,309 @@
+<script setup lang="ts">
+import type { BlockTuple } from '@commonpub/editor';
+import type { Serialized, ContentDetail, ContentListItem, PaginatedResponse } from '@commonpub/server';
+
+const route = useRoute();
+const username = computed(() => route.params.username as string);
+const contentType = computed(() => route.params.type as string);
+const slug = computed(() => route.params.slug as string);
+
+// Pass cookies so SSR can resolve auth (needed to view own drafts)
+// Include author param to disambiguate user-scoped slugs
+const reqHeaders = import.meta.server ? useRequestHeaders(['cookie']) : {};
+const { data: content, pending: contentPending } = useLazyFetch<Serialized<ContentDetail>>(
+  () => `/api/content/${slug.value}?author=${encodeURIComponent(username.value)}`,
+  { headers: reqHeaders },
+);
+
+// Explainer view uses its own topbar + full-height layout — disable the default layout
+// to avoid double-topbar and layout conflicts. Must also reset when navigating away
+// from an explainer (same page component is reused for all content types).
+watch(() => content.value?.type, (type) => {
+  if (type === 'explainer') {
+    setPageLayout('default');
+  } else if (type) {
+    setPageLayout('default');
+  }
+}, { immediate: true });
+
+useSeoMeta({
+  title: () => content.value?.title ? `${content.value.title} — ${useSiteName()}` : useSiteName(),
+  description: () => content.value?.seoDescription || content.value?.description || '',
+  ogImage: () => content.value?.coverImageUrl || '/og-default.png',
+  ogTitle: () => content.value?.title || useSiteName(),
+  ogDescription: () => content.value?.seoDescription || content.value?.description || '',
+});
+
+const { user } = useAuth();
+const { contentEditPath } = useContentUrl();
+const isOwner = computed(() => user.value?.id === content.value?.author?.id);
+
+// Estimate reading time (~200 words per minute)
+const readTime = computed(() => {
+  if (!content.value?.content) return undefined;
+  const blocks = content.value.content as BlockTuple[];
+  let words = 0;
+  for (const [type, data] of blocks) {
+    // Extract text from any string field in the block data
+    for (const val of Object.values(data)) {
+      if (typeof val === 'string' && val.trim()) {
+        // Strip HTML tags before counting
+        const text = val.replace(/<[^>]*>/g, '').trim();
+        if (text) words += text.split(/\s+/).length;
+      }
+    }
+  }
+  const minutes = Math.max(1, Math.round(words / 200));
+  return `${minutes} min read`;
+});
+
+// Enrich content with computed readTime
+const enrichedContent = computed(() => {
+  if (!content.value) return null;
+  return { ...content.value, readTime: readTime.value };
+});
+
+// Content type used for conditional view component rendering in template
+
+// Related content
+const { data: related } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
+  query: { status: 'published', type: contentType.value, limit: 3, sort: 'recent' },
+});
+
+// Track view
+onMounted(() => {
+  if (content.value?.id) {
+    $fetch(`/api/content/${content.value.id}/view`, { method: 'POST' }).catch(() => {});
+  }
+});
+</script>
+
+<template>
+  <div v-if="contentPending" class="cpub-loading" aria-live="polite">Loading content...</div>
+  <div v-else-if="enrichedContent">
+    <!-- Edit button overlay -->
+    <div v-if="isOwner && enrichedContent.type !== 'explainer'" class="cpub-view-edit-bar">
+      <NuxtLink :to="contentEditPath(username, enrichedContent.type, enrichedContent.slug)" class="cpub-edit-btn" aria-label="Edit">
+        <i class="fa-solid fa-pen"></i> Edit
+      </NuxtLink>
+    </div>
+
+    <!-- Specialized view by content type -->
+    <ViewsProjectView v-if="contentType === 'project'" :content="(enrichedContent as any)" />
+    <ViewsArticleView v-else-if="contentType === 'article'" :content="(enrichedContent as any)" />
+    <ViewsBlogView v-else-if="contentType === 'blog'" :content="(enrichedContent as any)" />
+    <ViewsExplainerView v-else-if="contentType === 'explainer'" :content="(enrichedContent as any)" />
+
+    <!-- Fallback: generic view for unknown types -->
+    <article v-else class="cpub-view">
+      <div class="cpub-cover" v-if="enrichedContent.coverImageUrl">
+        <img :src="enrichedContent.coverImageUrl" :alt="enrichedContent.title" />
+      </div>
+      <div class="cpub-cover cpub-cover-placeholder" v-else>
+        <span class="cpub-cover-label">{{ contentType }}</span>
+      </div>
+
+      <div class="cpub-view-container">
+        <header class="cpub-view-header">
+          <ContentTypeBadge :type="enrichedContent.type" />
+          <h1 class="cpub-view-title">{{ enrichedContent.title }}</h1>
+          <p class="cpub-view-subtitle" v-if="enrichedContent.subtitle || enrichedContent.description">
+            {{ enrichedContent.subtitle || enrichedContent.description }}
+          </p>
+          <AuthorRow
+            :author="enrichedContent.author"
+            :date="enrichedContent.publishedAt || enrichedContent.createdAt"
+            :read-time="readTime"
+          />
+          <EngagementBar
+            :target-type="enrichedContent.type"
+            :target-id="enrichedContent.id"
+            :like-count="enrichedContent.likeCount ?? 0"
+            :comment-count="enrichedContent.commentCount ?? 0"
+          />
+        </header>
+
+        <div class="cpub-view-body">
+          <template v-if="enrichedContent.content && Array.isArray(enrichedContent.content) && (enrichedContent.content as unknown[]).length > 0">
+            <BlocksBlockContentRenderer :blocks="(enrichedContent.content as [string, Record<string, unknown>][])" />
+          </template>
+          <p v-else class="cpub-view-empty">No content body yet.</p>
+        </div>
+
+        <div class="cpub-view-tags" v-if="enrichedContent.tags?.length">
+          <span class="cpub-view-tag" v-for="tag in enrichedContent.tags" :key="tag.id || tag.name">{{ tag.name || tag }}</span>
+        </div>
+
+        <AuthorCard :author="enrichedContent.author" />
+        <CommentSection :target-type="enrichedContent.type" :target-id="enrichedContent.id" />
+      </div>
+    </article>
+
+    <!-- Related content (shown for all types) -->
+    <section class="cpub-view-related" v-if="related?.items?.length">
+      <div class="cpub-view-related-inner">
+        <h2 class="cpub-view-related-title">Related {{ contentType }}s</h2>
+        <div class="cpub-view-related-grid">
+          <ContentCard
+            v-for="item in related.items.filter((i: Record<string, unknown>) => i.id !== enrichedContent?.id).slice(0, 3)"
+            :key="item.id"
+            :item="item"
+          />
+        </div>
+      </div>
+    </section>
+  </div>
+  <div v-else class="cpub-not-found">
+    <h1>Content not found</h1>
+    <p>The requested content could not be found.</p>
+  </div>
+</template>
+
+<style scoped>
+.cpub-view-edit-bar {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--space-2) var(--space-6);
+  border-bottom: var(--border-width-default) solid var(--border2);
+}
+
+.cpub-edit-btn {
+  padding: var(--space-1) var(--space-3);
+  border: var(--border-width-default) solid var(--border);
+  font-size: var(--text-xs);
+  color: var(--text);
+  text-decoration: none;
+}
+
+.cpub-edit-btn:hover {
+  background: var(--surface2);
+}
+
+.cpub-view {
+  max-width: 100%;
+}
+
+.cpub-cover {
+  width: 100%;
+  height: 300px;
+  position: relative;
+  overflow: hidden;
+  border-bottom: var(--border-width-default) solid var(--border);
+}
+
+.cpub-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cpub-cover-placeholder {
+  background: var(--surface2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-image:
+    linear-gradient(var(--border2) 1px, transparent 1px),
+    linear-gradient(90deg, var(--border2) 1px, transparent 1px);
+  background-size: 40px 40px;
+}
+
+.cpub-cover-label {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-widest);
+  color: var(--text-faint);
+  background: var(--surface);
+  padding: var(--space-2) var(--space-4);
+  border: var(--border-width-default) solid var(--border);
+}
+
+.cpub-view-container {
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+  padding: var(--space-8) var(--space-6);
+}
+
+.cpub-view-header {
+  margin-bottom: var(--space-6);
+}
+
+.cpub-view-title {
+  font-size: var(--text-2xl);
+  font-weight: var(--font-weight-bold);
+  margin-top: var(--space-3);
+  margin-bottom: var(--space-2);
+  line-height: var(--leading-tight);
+}
+
+.cpub-view-subtitle {
+  font-size: var(--text-md);
+  color: var(--text-dim);
+  margin-bottom: var(--space-4);
+  line-height: var(--leading-relaxed);
+}
+
+.cpub-view-body {
+  margin-bottom: var(--space-8);
+}
+
+.cpub-view-empty {
+  color: var(--text-faint);
+  font-style: italic;
+  padding: var(--space-10) 0;
+  text-align: center;
+}
+
+.cpub-view-tags {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  margin-bottom: var(--space-8);
+}
+
+.cpub-view-tag {
+  padding: var(--space-1) var(--space-3);
+  background: var(--surface2);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: var(--font-weight-medium);
+  color: var(--text-dim);
+  text-transform: lowercase;
+}
+
+.cpub-view-related {
+  border-top: var(--border-width-default) solid var(--border2);
+}
+
+.cpub-view-related-inner {
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+  padding: var(--space-8) var(--space-6);
+}
+
+.cpub-view-related-title {
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-bold);
+  margin-bottom: var(--space-5);
+  text-transform: capitalize;
+}
+
+.cpub-view-related-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-4);
+}
+
+.cpub-not-found {
+  text-align: center;
+  padding: var(--space-16) 0;
+  color: var(--text-dim);
+}
+
+@media (max-width: 768px) {
+  .cpub-view-related-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

package/server/api/content/[id]/index.get.ts

@@ -6,8 +6,11 @@ export default defineEventHandler(async (event): Promise<ContentDetail> => {
   // Param is named 'id' (directory name) but the value is a slug for GET requests
   const { id: slugOrId } = parseParams(event, { id: 'string' });
   const user = getOptionalUser(event);
+  // Optional author query param for disambiguating user-scoped slugs
+  const query = getQuery(event);
+  const authorUsername = typeof query.author === 'string' ? query.author : undefined;
 
-  const content = await getContentBySlug(db, slugOrId, user?.id);
+  const content = await getContentBySlug(db, slugOrId, user?.id, authorUsername);
   if (!content) {
     throw createError({ statusCode: 404, statusMessage: 'Content not found' });
   }

package/server/api/hubs/[slug]/feed.xml.get.ts

@@ -28,7 +28,7 @@ export default defineEventHandler(async (event) => {
     : new Date().toUTCString();
 
   const rssItems = items.map((item) => {
-    const link = `${siteUrl}/${item.type}/${item.slug}`;
+    const link = `${siteUrl}/u/${item.author.username}/${item.type}/${item.slug}`;
     const pubDate = item.publishedAt ? new Date(item.publishedAt).toUTCString() : new Date().toUTCString();
     return `    <item>
       <title>${escapeXml(item.title)}</title>

package/server/api/hubs/[slug]/share.post.ts

@@ -1,4 +1,4 @@
-import { shareContent, getHubBySlug, getFederatedContent, createPost, federateHubShare, getContentSlugById, buildContentUri } from '@commonpub/server';
+import { shareContent, getHubBySlug, getFederatedContent, createPost, federateHubShare, resolveContentObjectUri } from '@commonpub/server';
 import type { HubPostItem } from '@commonpub/server';
 import { z } from 'zod';
 
@@ -28,9 +28,8 @@ export default defineEventHandler(async (event): Promise<HubPostItem> => {
 
     // Federate the shared content as Announce from the hub Group actor
     if (config.features.federation && config.features.federateHubs) {
-      getContentSlugById(db, input.contentId).then((contentSlug) => {
-        if (contentSlug) {
-          const contentUri = buildContentUri(config.instance.domain, contentSlug);
+      resolveContentObjectUri(db, input.contentId, config.instance.domain).then((contentUri) => {
+        if (contentUri) {
           return federateHubShare(db, contentUri, hub.id, config.instance.domain);
         }
       }).catch((err) => {

package/server/api/social/like.post.ts

@@ -1,4 +1,4 @@
-import { toggleLike, onContentLiked, onContentUnliked, getContentSlugById, buildContentUri } from '@commonpub/server';
+import { toggleLike, onContentLiked, onContentUnliked, resolveContentObjectUri } from '@commonpub/server';
 import { likeTargetTypeSchema } from '@commonpub/schema';
 import { z } from 'zod';
 
@@ -20,9 +20,8 @@ export default defineEventHandler(async (event): Promise<{ liked: boolean }> =>
 
   // Federate likes on content items (not posts/comments)
   if (FEDERABLE_LIKE_TYPES.has(input.targetType)) {
-    const slug = await getContentSlugById(db, input.targetId);
-    if (slug) {
-      const contentUri = buildContentUri(config.instance.domain, slug);
+    const contentUri = await resolveContentObjectUri(db, input.targetId, config.instance.domain);
+    if (contentUri) {
       if (result.liked) {
         await onContentLiked(db, user.id, contentUri, config);
       } else {

package/server/api/users/[username]/feed.xml.get.ts

@@ -34,7 +34,7 @@ export default defineEventHandler(async (event) => {
     : new Date().toUTCString();
 
   const rssItems = items.map((item) => {
-    const link = `${siteUrl}/${item.type}/${item.slug}`;
+    const link = `${siteUrl}/u/${item.author.username}/${item.type}/${item.slug}`;
     const pubDate = new Date(item.publishedAt ?? item.createdAt).toUTCString();
     return `    <item>
       <title>${escapeXml(item.title)}</title>
@@ -50,7 +50,7 @@ export default defineEventHandler(async (event) => {
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
   <channel>
     <title>${escapeXml(displayName)} — CommonPub</title>
-    <link>${escapeXml(siteUrl)}/profile/${escapeXml(username)}</link>
+    <link>${escapeXml(siteUrl)}/u/${escapeXml(username)}</link>
     <description>Content by ${escapeXml(displayName)}</description>
     <language>en</language>
     <lastBuildDate>${lastBuildDate}</lastBuildDate>

package/server/routes/feed.xml.ts

@@ -27,7 +27,7 @@ export default defineEventHandler(async (event) => {
     : new Date().toUTCString();
 
   const rssItems = items.map((item) => {
-    const link = `${siteUrl}/${item.type}/${item.slug}`;
+    const link = `${siteUrl}/u/${item.author.username}/${item.type}/${item.slug}`;
     const pubDate = new Date(item.publishedAt ?? item.createdAt).toUTCString();
     return `    <item>
       <title>${escapeXml(item.title)}</title>

package/server/routes/hubs/[slug]/posts/[postId].ts

@@ -63,9 +63,9 @@ export default defineEventHandler(async (event) => {
         title: shared.title ?? '',
         summary: shared.description ?? null,
         coverImageUrl: shared.coverImageUrl ?? null,
-        originUrl: shared.slug
-          ? `https://${domain}/${shared.type}/${shared.slug}`
-          : null,
+        originUrl: shared.slug && shared.authorUsername
+          ? `https://${domain}/u/${shared.authorUsername}/${shared.type}/${shared.slug}`
+          : shared.slug ? `https://${domain}/${shared.type}/${shared.slug}` : null,
         originDomain: domain,
       };
       const displayName = post.authorDisplayName ?? post.authorUsername;

package/server/routes/sitemap.xml.ts

@@ -22,8 +22,10 @@ export default defineEventHandler(async (event) => {
       type: contentItems.type,
       slug: contentItems.slug,
       updatedAt: contentItems.updatedAt,
+      authorUsername: users.username,
     })
     .from(contentItems)
+    .innerJoin(users, eq(contentItems.authorId, users.id))
     .where(eq(contentItems.status, 'published'));
 
   // Users with public profiles
@@ -50,7 +52,7 @@ export default defineEventHandler(async (event) => {
   // Content pages
   for (const item of publishedContent) {
     urls.push({
-      loc: `${siteUrl}/${item.type}/${item.slug}`,
+      loc: `${siteUrl}/u/${item.authorUsername}/${item.type}/${item.slug}`,
       lastmod: new Date(item.updatedAt).toISOString(),
       priority: '0.8',
       changefreq: 'weekly',

package/server/routes/u/[username]/[type]/[slug].ts

@@ -0,0 +1,73 @@
+import { contentToArticle } from '@commonpub/protocol';
+import { contentItems, users } from '@commonpub/schema';
+import { eq, and, isNull } from 'drizzle-orm';
+
+/**
+ * New-format content AP Article endpoint.
+ * URI: /u/{username}/{type}/{slug}
+ *
+ * Serves Article JSON-LD when requested with AP Accept header.
+ * Browsers see the Nuxt page instead (this handler returns nothing for non-AP requests).
+ */
+export default defineEventHandler(async (event) => {
+  const accept = getRequestHeader(event, 'accept') ?? '';
+  const isAPRequest =
+    accept.includes('application/activity+json') ||
+    accept.includes('application/ld+json');
+
+  if (!isAPRequest) return;
+
+  const config = useConfig();
+  if (!config.features.federation) return;
+
+  const username = getRouterParam(event, 'username');
+  const type = getRouterParam(event, 'type');
+  const slug = getRouterParam(event, 'slug');
+  if (!username || !type || !slug) return;
+
+  const db = useDB();
+  const domain = config.instance.domain;
+
+  const [row] = await db
+    .select({
+      content: contentItems,
+      author: {
+        username: users.username,
+        displayName: users.displayName,
+      },
+    })
+    .from(contentItems)
+    .innerJoin(users, eq(contentItems.authorId, users.id))
+    .where(and(
+      eq(users.username, username),
+      eq(contentItems.type, type as 'project' | 'article' | 'blog' | 'explainer'),
+      eq(contentItems.slug, slug),
+      eq(contentItems.status, 'published'),
+      isNull(contentItems.deletedAt),
+    ))
+    .limit(1);
+
+  if (!row) return;
+
+  setResponseHeader(event, 'content-type', 'application/activity+json');
+
+  const article = contentToArticle(
+    {
+      id: row.content.id,
+      type: row.content.type,
+      title: row.content.title,
+      slug: row.content.slug,
+      description: row.content.description,
+      content: typeof row.content.content === 'string'
+        ? row.content.content
+        : JSON.stringify(row.content.content),
+      coverImageUrl: row.content.coverImageUrl,
+      publishedAt: row.content.publishedAt,
+      updatedAt: row.content.updatedAt,
+    },
+    { username: row.author.username, displayName: row.author.displayName ?? row.author.username },
+    domain,
+  );
+
+  return article;
+});