@commonpub/layer 0.1.0

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

@@ -0,0 +1,313 @@
+<script setup lang="ts">
+import type { BlockTuple } from '@commonpub/editor';
+import type { Serialized, ContentDetail, ContentListItem, PaginatedResponse } from '@commonpub/server';
+
+const route = useRoute();
+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)
+const reqHeaders = import.meta.server ? useRequestHeaders(['cookie']) : {};
+const { data: content, pending: contentPending } = useLazyFetch<Serialized<ContentDetail>>(() => `/api/content/${slug.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 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 };
+});
+
+// Map content types to specialized view components
+const viewComponent = computed(() => {
+  switch (contentType.value) {
+    case 'article': return resolveComponent('ViewsArticleView');
+    case 'blog': return resolveComponent('ViewsBlogView');
+    case 'explainer': return resolveComponent('ViewsExplainerView');
+    case 'project': return resolveComponent('ViewsProjectView');
+    default: return null;
+  }
+});
+
+// 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="`/${enrichedContent.type}/${enrichedContent.slug}/edit`" class="cpub-edit-btn" aria-label="Edit">
+        <i class="fa-solid fa-pen"></i> Edit
+      </NuxtLink>
+    </div>
+
+    <!-- Specialized view -->
+    <component
+      v-if="viewComponent && typeof viewComponent !== 'string'"
+      :is="viewComponent"
+      :content="enrichedContent"
+    />
+
+    <!-- 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/pages/[type]/index.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import type { Serialized, ContentListItem, PaginatedResponse } from '@commonpub/server';
+
+const route = useRoute();
+const contentType = computed(() => route.params.type as string);
+
+useSeoMeta({
+  title: () => `${contentType.value} — ${useSiteName()}`,
+  description: () => `Browse ${contentType.value} on CommonPub.`,
+});
+
+const sortBy = ref('recent');
+const sortOptions = ['recent', 'popular'] as const;
+
+const { data } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
+  query: computed(() => ({
+    status: 'published',
+    type: contentType.value,
+    sort: sortBy.value,
+    limit: 20,
+  })),
+});
+</script>
+
+<template>
+  <div class="cpub-listing">
+    <div class="cpub-listing-header">
+      <h1 class="cpub-listing-title">{{ contentType }}s</h1>
+      <div class="cpub-listing-controls">
+        <select v-model="sortBy" class="cpub-listing-sort" aria-label="Sort by">
+          <option v-for="opt in sortOptions" :key="opt" :value="opt">{{ opt }}</option>
+        </select>
+        <NuxtLink :to="`/${contentType}/new/edit`" class="cpub-listing-create">
+          + New {{ contentType }}
+        </NuxtLink>
+      </div>
+    </div>
+
+    <div class="cpub-listing-grid" v-if="data?.items?.length">
+      <ContentCard v-for="item in data.items" :key="item.id" :item="item" />
+    </div>
+    <p class="cpub-listing-empty" v-else>No {{ contentType }}s published yet.</p>
+  </div>
+</template>
+
+<style scoped>
+.cpub-listing {
+  max-width: var(--content-max-width);
+}
+
+.cpub-listing-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-6);
+}
+
+.cpub-listing-title {
+  font-size: var(--text-xl);
+  font-weight: var(--font-weight-bold);
+  text-transform: capitalize;
+}
+
+.cpub-listing-controls {
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
+}
+
+.cpub-listing-sort {
+  padding: var(--space-1) var(--space-2);
+  border: var(--border-width-default) solid var(--border2);
+  background: var(--surface);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: capitalize;
+  color: var(--text-dim);
+  cursor: pointer;
+}
+
+.cpub-listing-create {
+  padding: var(--space-2) var(--space-3);
+  background: var(--accent);
+  color: var(--color-text-inverse);
+  border: var(--border-width-default) solid var(--border);
+  font-size: var(--text-xs);
+  text-decoration: none;
+  font-weight: var(--font-weight-medium);
+}
+
+.cpub-listing-create:hover {
+  opacity: 0.85;
+}
+
+.cpub-listing-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--space-4);
+}
+
+.cpub-listing-empty {
+  color: var(--text-faint);
+  font-size: var(--text-sm);
+  text-align: center;
+  padding: var(--space-10) 0;
+  text-transform: capitalize;
+}
+
+@media (max-width: 768px) {
+  .cpub-listing { padding: 0 12px; }
+  .cpub-listing-header { flex-wrap: wrap; gap: 8px; }
+  .cpub-listing-title { font-size: 1.125rem; }
+  .cpub-listing-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
+}
+@media (max-width: 480px) {
+  .cpub-listing-grid { grid-template-columns: 1fr; }
+}
+</style>

package/pages/about.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+useSeoMeta({
+  title: `About — ${useSiteName()}`,
+  description: 'CommonPub is an open-source, federated platform for maker communities.',
+});
+
+const { hubs: hubsEnabled, learning: learningEnabled, contests: contestsEnabled, federation: federationEnabled, docs: docsEnabled } = useFeatures();
+</script>
+
+<template>
+  <div class="cpub-about">
+    <div class="cpub-about-hero">
+      <div class="cpub-about-hero-grid" />
+      <div class="cpub-about-hero-inner">
+        <span class="cpub-about-badge"><i class="fa-solid fa-code-branch"></i> Open Source</span>
+        <h1 class="cpub-about-title">CommonPub</h1>
+        <p class="cpub-about-subtitle">An open ActivityPub federation protocol and platform for self-hosted maker communities.</p>
+      </div>
+    </div>
+
+    <div class="cpub-about-body">
+      <div class="cpub-about-grid">
+        <div class="cpub-about-card">
+          <div class="cpub-about-card-icon"><i class="fa-solid fa-microchip"></i></div>
+          <h3>For Makers</h3>
+          <p>Document your builds with rich block editors. Parts lists, wiring diagrams, build steps, and code blocks — everything you need to share how you built it.</p>
+        </div>
+        <div v-if="hubsEnabled" class="cpub-about-card">
+          <div class="cpub-about-card-icon"><i class="fa-solid fa-users"></i></div>
+          <h3>Community Hubs</h3>
+          <p>Create spaces for your community, product, or company. Discussions, content galleries, learning paths, and contests — all in one place.</p>
+        </div>
+        <div v-if="federationEnabled" class="cpub-about-card">
+          <div class="cpub-about-card-icon"><i class="fa-solid fa-globe"></i></div>
+          <h3>Federated</h3>
+          <p>Built on ActivityPub. Your instance, your data. Follow makers across instances. No single point of failure, no platform lock-in.</p>
+        </div>
+        <div v-if="learningEnabled" class="cpub-about-card">
+          <div class="cpub-about-card-icon"><i class="fa-solid fa-graduation-cap"></i></div>
+          <h3>Learning Paths</h3>
+          <p>Structured learning with modules, lessons, quizzes, and certificates. Track your progress and earn credentials.</p>
+        </div>
+        <div v-if="contestsEnabled" class="cpub-about-card">
+          <div class="cpub-about-card-icon"><i class="fa-solid fa-trophy"></i></div>
+          <h3>Contests</h3>
+          <p>Run build contests with prizes, judges, and community voting. From small jams to sponsored competitions.</p>
+        </div>
+        <div class="cpub-about-card">
+          <div class="cpub-about-card-icon"><i class="fa-solid fa-server"></i></div>
+          <h3>Self-Hosted</h3>
+          <p>Deploy with Docker. PostgreSQL, Redis, and your choice of S3-compatible storage. Full control over your data.</p>
+        </div>
+      </div>
+
+      <div class="cpub-about-cta">
+        <h2>Start Building</h2>
+        <p>CommonPub is free and open source. Set up your own instance or join an existing one.</p>
+        <div class="cpub-about-cta-actions">
+          <NuxtLink to="/auth/register" class="cpub-btn cpub-btn-primary"><i class="fa-solid fa-user-plus"></i> Create Account</NuxtLink>
+          <NuxtLink v-if="docsEnabled" to="/docs" class="cpub-btn"><i class="fa-solid fa-book"></i> Documentation</NuxtLink>
+          <a href="https://github.com/commonpub" target="_blank" rel="noopener" class="cpub-btn"><i class="fa-brands fa-github"></i> GitHub</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-about-hero {
+  position: relative;
+  background: var(--surface2);
+  border-bottom: var(--border-width-default) solid var(--border);
+  padding: 64px 32px;
+  text-align: center;
+  overflow: hidden;
+}
+.cpub-about-hero-grid {
+  position: absolute; inset: 0;
+  background-image: linear-gradient(var(--border2) 1px, transparent 1px), linear-gradient(90deg, var(--border2) 1px, transparent 1px);
+  background-size: 32px 32px; opacity: 0.2;
+}
+.cpub-about-hero-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
+.cpub-about-badge { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 12px; border: var(--border-width-default) solid var(--green); background: var(--green-bg); color: var(--green); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; }
+.cpub-about-title { font-size: 36px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.02em; }
+.cpub-about-subtitle { font-size: 15px; color: var(--text-dim); line-height: 1.6; }
+
+.cpub-about-body { max-width: 1000px; margin: 0 auto; padding: 48px 32px; }
+.cpub-about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 48px; }
+.cpub-about-card { background: var(--surface); border: var(--border-width-default) solid var(--border); padding: 24px; box-shadow: var(--shadow-md); }
+.cpub-about-card-icon { font-size: 24px; color: var(--accent); margin-bottom: 12px; }
+.cpub-about-card h3 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
+.cpub-about-card p { font-size: 12px; color: var(--text-dim); line-height: 1.6; }
+
+.cpub-about-cta { text-align: center; padding: 32px; background: var(--surface2); border: var(--border-width-default) solid var(--border); }
+.cpub-about-cta h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
+.cpub-about-cta p { font-size: 13px; color: var(--text-dim); margin-bottom: 20px; }
+.cpub-about-cta-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
+
+@media (max-width: 768px) { .cpub-about-grid { grid-template-columns: 1fr; } }
+</style>

package/pages/admin/audit.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'admin', middleware: 'auth' });
+
+useSeoMeta({ title: `Audit Log — Admin — ${useSiteName()}` });
+
+const { data: logsData } = await useFetch('/api/admin/audit');
+
+interface AuditEntry {
+  id: string;
+  action: string;
+  actorId: string;
+  targetId: string | null;
+  metadata: Record<string, unknown> | null;
+  createdAt: string;
+}
+
+const logs = computed<AuditEntry[]>(() => {
+  if (!logsData.value) return [];
+  // Handle both { items, total } and array responses
+  if (Array.isArray(logsData.value)) return logsData.value as unknown as AuditEntry[];
+  const data = logsData.value as unknown as { items?: AuditEntry[] };
+  return data.items ?? [];
+});
+</script>
+
+<template>
+  <div class="admin-audit">
+    <h1 class="admin-page-title">Audit Log</h1>
+
+    <table class="admin-table" v-if="logs.length">
+      <thead>
+        <tr>
+          <th>Action</th>
+          <th>Actor</th>
+          <th>Target</th>
+          <th>Time</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="log in logs" :key="log.id">
+          <td class="audit-action">{{ log.action }}</td>
+          <td class="audit-id">{{ log.actorId }}</td>
+          <td class="audit-id">{{ log.targetId || '—' }}</td>
+          <td>{{ new Date(log.createdAt).toLocaleString() }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <p class="admin-empty" v-else>No audit log entries.</p>
+  </div>
+</template>
+
+<style scoped>
+.admin-page-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-6); }
+.admin-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
+.admin-table th { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: var(--border-width-default) solid var(--border); font-weight: var(--font-weight-semibold); color: var(--text-dim); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
+.admin-table td { padding: var(--space-2) var(--space-3); border-bottom: var(--border-width-default) solid var(--border); }
+.audit-action { font-weight: var(--font-weight-medium); }
+.audit-id { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
+.admin-empty { color: var(--text-faint); text-align: center; padding: var(--space-8) 0; }
+
+@media (max-width: 768px) {
+  .admin-page-title { font-size: var(--text-lg); }
+  .admin-table { font-size: var(--text-xs); display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  .admin-table th, .admin-table td { padding: var(--space-1) var(--space-2); white-space: nowrap; }
+}
+</style>