@commonpub/layer 0.1.0

package/components/AnnouncementBand.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title: string;
+  body: string;
+  author: string;
+  createdAt: Date;
+  pinned?: boolean;
+}>();
+
+const formattedDate = computed((): string => {
+  return new Date(props.createdAt).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+  });
+});
+</script>
+
+<template>
+  <div :class="['cpub-announcement-band', { 'cpub-announcement-pinned': pinned }]">
+    <div class="cpub-announcement-icon" aria-hidden="true">
+      <i class="fa-solid fa-bullhorn"></i>
+    </div>
+    <div class="cpub-announcement-content">
+      <div class="cpub-announcement-header">
+        <h4 class="cpub-announcement-title">{{ title }}</h4>
+        <span v-if="pinned" class="cpub-announcement-pin" aria-label="Pinned">
+          <i class="fa-solid fa-thumbtack"></i>
+        </span>
+      </div>
+      <p class="cpub-announcement-body">{{ body }}</p>
+      <div class="cpub-announcement-meta">
+        <span class="cpub-announcement-author">{{ author }}</span>
+        <span class="cpub-announcement-sep" aria-hidden="true">&middot;</span>
+        <time class="cpub-announcement-time">{{ formattedDate }}</time>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-announcement-band {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-5);
+  background: var(--accent-bg);
+  border: var(--border-width-default) solid var(--accent-border);
+  border-left: 4px solid var(--accent);
+}
+
+.cpub-announcement-pinned {
+  background: var(--accent-bg);
+}
+
+.cpub-announcement-icon {
+  flex-shrink: 0;
+  color: var(--accent);
+  font-size: var(--text-md);
+  margin-top: 2px;
+}
+
+.cpub-announcement-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.cpub-announcement-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-1);
+}
+
+.cpub-announcement-title {
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text);
+  line-height: var(--leading-tight);
+}
+
+.cpub-announcement-pin {
+  color: var(--accent);
+  font-size: var(--text-xs);
+}
+
+.cpub-announcement-body {
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+  line-height: var(--leading-relaxed);
+  margin-bottom: var(--space-2);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.cpub-announcement-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-xs);
+  color: var(--text-faint);
+}
+
+.cpub-announcement-author {
+  font-weight: var(--font-weight-medium);
+  color: var(--text-dim);
+}
+
+.cpub-announcement-sep {
+  color: var(--text-faint);
+}
+
+.cpub-announcement-time {
+  color: var(--text-faint);
+}
+</style>

package/components/AppToast.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+const { toasts, dismiss } = useToast();
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="toasts.length" class="cpub-toast-container" aria-live="polite">
+      <div
+        v-for="toast in toasts"
+        :key="toast.id"
+        class="cpub-toast"
+        :class="`cpub-toast--${toast.type}`"
+        role="status"
+      >
+        <i
+          :class="{
+            'fa-solid fa-check': toast.type === 'success',
+            'fa-solid fa-xmark': toast.type === 'error',
+            'fa-solid fa-info': toast.type === 'info',
+          }"
+          class="cpub-toast-icon"
+        />
+        <span class="cpub-toast-msg">{{ toast.message }}</span>
+        <button class="cpub-toast-close" aria-label="Dismiss" @click="dismiss(toast.id)">
+          <i class="fa-solid fa-xmark" />
+        </button>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.cpub-toast-container {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.cpub-toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  font-size: 12px;
+  font-family: var(--font-mono);
+  box-shadow: var(--shadow-md);
+  min-width: 240px;
+  max-width: 400px;
+  animation: cpub-toast-in 0.2s ease-out;
+}
+
+@keyframes cpub-toast-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.cpub-toast--success {
+  border-color: var(--green);
+  background: var(--green-bg);
+  color: var(--green);
+}
+
+.cpub-toast--error {
+  border-color: var(--red);
+  background: var(--red-bg);
+  color: var(--red);
+}
+
+.cpub-toast--info {
+  border-color: var(--accent);
+  background: var(--accent-bg);
+  color: var(--accent);
+}
+
+.cpub-toast-icon {
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+.cpub-toast-msg {
+  flex: 1;
+  line-height: 1.4;
+}
+
+.cpub-toast-close {
+  background: none;
+  border: none;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  font-size: 10px;
+  padding: 2px;
+  flex-shrink: 0;
+}
+
+.cpub-toast-close:hover {
+  opacity: 1;
+}
+</style>

package/components/AuthorCard.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { ContentDetailAuthor } from '@commonpub/server';
+
+defineProps<{
+  author: ContentDetailAuthor & { contentCount?: number };
+}>();
+</script>
+
+<template>
+  <div class="cpub-author-card">
+    <div class="cpub-author-card-top">
+      <NuxtLink :to="`/u/${author.username}`" class="cpub-author-card-avatar">
+        <img v-if="author.avatarUrl" :src="author.avatarUrl" :alt="author.displayName || author.username" />
+        <span v-else class="cpub-author-card-initials">{{ (author.displayName || author.username).charAt(0).toUpperCase() }}</span>
+      </NuxtLink>
+      <div>
+        <NuxtLink :to="`/u/${author.username}`" class="cpub-author-card-name">
+          {{ author.displayName || author.username }}
+        </NuxtLink>
+        <p class="cpub-author-card-handle">@{{ author.username }}</p>
+      </div>
+    </div>
+    <p v-if="author.bio" class="cpub-author-card-bio">{{ author.bio }}</p>
+    <div class="cpub-author-card-stats">
+      <span v-if="author.followerCount !== undefined">{{ author.followerCount }} followers</span>
+      <span v-if="author.contentCount !== undefined">{{ author.contentCount }} posts</span>
+    </div>
+    <NuxtLink :to="`/u/${author.username}`" class="cpub-author-card-btn" aria-label="View profile">
+      View Profile
+    </NuxtLink>
+  </div>
+</template>
+
+<style scoped>
+.cpub-author-card {
+  padding: var(--space-5);
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-author-card-top {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  margin-bottom: var(--space-3);
+}
+
+.cpub-author-card-avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-full);
+  background: var(--surface3);
+  border: var(--border-width-default) solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex-shrink: 0;
+  text-decoration: none;
+}
+
+.cpub-author-card-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cpub-author-card-initials {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-dim);
+}
+
+.cpub-author-card-name {
+  font-weight: var(--font-weight-semibold);
+  color: var(--text);
+  text-decoration: none;
+}
+
+.cpub-author-card-name:hover {
+  color: var(--accent);
+}
+
+.cpub-author-card-handle {
+  font-size: var(--text-xs);
+  color: var(--text-faint);
+}
+
+.cpub-author-card-bio {
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+  line-height: var(--leading-relaxed);
+  margin-bottom: var(--space-3);
+}
+
+.cpub-author-card-stats {
+  display: flex;
+  gap: var(--space-4);
+  font-size: var(--text-xs);
+  color: var(--text-faint);
+  margin-bottom: var(--space-3);
+}
+
+.cpub-author-card-btn {
+  display: inline-block;
+  padding: var(--space-2) var(--space-4);
+  border: var(--border-width-default) solid var(--border);
+  font-size: var(--text-sm);
+  color: var(--text);
+  text-decoration: none;
+  text-align: center;
+}
+
+.cpub-author-card-btn:hover {
+  background: var(--surface2);
+}
+</style>

package/components/AuthorRow.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { UserRef } from '@commonpub/server';
+
+defineProps<{
+  author: UserRef;
+  date: string;
+  readTime?: string;
+}>();
+</script>
+
+<template>
+  <div class="cpub-author-row">
+    <NuxtLink :to="`/u/${author.username}`" class="cpub-author-avatar">
+      <img v-if="author.avatarUrl" :src="author.avatarUrl" :alt="author.displayName || author.username" />
+      <span v-else class="cpub-author-initials">{{ (author.displayName || author.username).charAt(0).toUpperCase() }}</span>
+    </NuxtLink>
+    <div class="cpub-author-info">
+      <NuxtLink :to="`/u/${author.username}`" class="cpub-author-name">
+        {{ author.displayName || author.username }}
+      </NuxtLink>
+      <div class="cpub-author-meta">
+        <time>{{ new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) }}</time>
+        <span v-if="readTime" class="cpub-meta-sep" aria-hidden="true">&middot;</span>
+        <span v-if="readTime">{{ readTime }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-author-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.cpub-author-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-full);
+  background: var(--surface3);
+  border: var(--border-width-default) solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex-shrink: 0;
+  text-decoration: none;
+}
+
+.cpub-author-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cpub-author-initials {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-dim);
+}
+
+.cpub-author-name {
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--text);
+  text-decoration: none;
+}
+
+.cpub-author-name:hover {
+  color: var(--accent);
+}
+
+.cpub-author-meta {
+  display: flex;
+  gap: var(--space-2);
+  font-size: var(--text-xs);
+  color: var(--text-faint);
+}
+</style>