@commonpub/layer 0.1.0

package/components/ContentPicker.vue

@@ -0,0 +1,240 @@
+<script setup lang="ts">
+const props = defineProps<{
+  open: boolean;
+  types?: string[];
+}>();
+
+const emit = defineEmits<{
+  'update:open': [value: boolean];
+  select: [item: { id: string; title: string; slug: string; type: string }];
+}>();
+
+const { user } = useAuth();
+const search = ref('');
+
+const query = computed(() => ({
+  status: 'published',
+  authorId: user.value?.id,
+  search: search.value || undefined,
+  type: props.types?.length === 1 ? props.types[0] : undefined,
+  limit: 50,
+}));
+
+const { data, pending, refresh: refreshContent } = useLazyFetch('/api/content', {
+  query,
+  watch: [query],
+  immediate: false,
+});
+
+const items = computed(() => {
+  const all = data.value?.items ?? [];
+  if (props.types && props.types.length > 1) {
+    return all.filter((i: { type: string }) => props.types!.includes(i.type));
+  }
+  return all;
+});
+
+function pick(item: { id: string; title: string; slug: string; type: string }): void {
+  emit('select', item);
+  emit('update:open', false);
+}
+
+function close(): void {
+  emit('update:open', false);
+}
+
+const searchRef = ref<HTMLInputElement>();
+
+// Fetch data and focus search when picker opens
+watch(() => props.open, (v) => {
+  if (v) {
+    if (user.value?.id) refreshContent();
+    nextTick(() => searchRef.value?.focus());
+    search.value = '';
+  }
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="open" class="cpub-picker-overlay" @click.self="close">
+      <div class="cpub-picker-dialog" role="dialog" aria-label="Select content" @keydown.escape="close">
+        <div class="cpub-picker-header">
+          <h2 class="cpub-picker-title"><i class="fa-solid fa-link"></i> Link Existing Content</h2>
+          <button class="cpub-picker-close" aria-label="Close" @click="close"><i class="fa-solid fa-xmark"></i></button>
+        </div>
+        <div class="cpub-picker-search">
+          <input
+            ref="searchRef"
+            v-model="search"
+            class="cpub-picker-input"
+            type="text"
+            placeholder="Search your published content..."
+            aria-label="Search content"
+          />
+        </div>
+        <div class="cpub-picker-body">
+          <div v-if="pending" class="cpub-picker-loading">Loading...</div>
+          <div v-else-if="!items.length" class="cpub-picker-empty">
+            <p>No published content found.</p>
+          </div>
+          <button
+            v-for="item in items"
+            :key="item.id"
+            class="cpub-picker-item"
+            @click="pick(item)"
+          >
+            <span class="cpub-picker-type-badge">{{ item.type }}</span>
+            <span class="cpub-picker-item-title">{{ item.title }}</span>
+            <span v-if="item.publishedAt" class="cpub-picker-item-date">
+              {{ new Date(item.publishedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.cpub-picker-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  background: var(--color-surface-overlay-light);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cpub-picker-dialog {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  box-shadow: var(--shadow-xl);
+  width: 520px;
+  max-width: 90vw;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.cpub-picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border-bottom: var(--border-width-default) solid var(--border);
+}
+
+.cpub-picker-title {
+  font-size: 14px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cpub-picker-title i {
+  color: var(--accent);
+  font-size: 12px;
+}
+
+.cpub-picker-close {
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 4px;
+}
+
+.cpub-picker-close:hover {
+  color: var(--text);
+}
+
+.cpub-picker-search {
+  padding: 12px 16px;
+  border-bottom: var(--border-width-default) solid var(--border);
+}
+
+.cpub-picker-input {
+  width: 100%;
+  padding: 8px 10px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  font-size: 13px;
+  font-family: var(--font-mono);
+}
+
+.cpub-picker-input:focus {
+  border-color: var(--accent);
+  outline: none;
+}
+
+.cpub-picker-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.cpub-picker-loading,
+.cpub-picker-empty {
+  padding: 32px 16px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-faint);
+}
+
+.cpub-picker-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 16px;
+  background: none;
+  border: none;
+  color: var(--text);
+  cursor: pointer;
+  text-align: left;
+  font-size: 13px;
+}
+
+.cpub-picker-item:hover {
+  background: var(--surface2);
+}
+
+.cpub-picker-item:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.cpub-picker-type-badge {
+  font-size: 9px;
+  font-family: var(--font-mono);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 2px 7px;
+  border: var(--border-width-default) solid var(--accent-border);
+  background: var(--accent-bg);
+  color: var(--accent);
+  flex-shrink: 0;
+}
+
+.cpub-picker-item-title {
+  flex: 1;
+  font-weight: 500;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cpub-picker-item-date {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+  flex-shrink: 0;
+}
+</style>

package/components/ContentStarterForm.vue

@@ -0,0 +1,214 @@
+<script setup lang="ts">
+/**
+ * Starter form shown when creating new content.
+ * Collects title, description, and cover image before entering the editor.
+ * Creates a draft on submit so autosave works immediately.
+ */
+const props = defineProps<{
+  contentType: string;
+  /** v-model for title */
+  title: string;
+  /** v-model for metadata */
+  metadata: Record<string, unknown>;
+  saving: boolean;
+  error: string;
+}>();
+
+const emit = defineEmits<{
+  'update:title': [value: string];
+  'update:metadata': [value: Record<string, unknown>];
+  submit: [];
+}>();
+
+function updateField(key: string, value: unknown): void {
+  emit('update:metadata', { ...props.metadata, [key]: value });
+}
+</script>
+
+<template>
+  <div class="cpub-starter-overlay">
+    <div class="cpub-starter-card">
+      <div class="cpub-starter-header">
+        <NuxtLink to="/create" class="cpub-starter-back">
+          <i class="fa-solid fa-arrow-left" /> Back
+        </NuxtLink>
+        <h1 class="cpub-starter-title">New {{ contentType }}</h1>
+        <p class="cpub-starter-subtitle">Fill in the basics to get started. You can change these later.</p>
+      </div>
+
+      <div v-if="error" class="cpub-starter-error" role="alert">{{ error }}</div>
+
+      <form class="cpub-starter-form" @submit.prevent="emit('submit')">
+        <div class="cpub-starter-field">
+          <label for="starter-title" class="cpub-starter-label">
+            Title <span class="cpub-starter-required">*</span>
+          </label>
+          <input
+            id="starter-title"
+            :value="title"
+            @input="emit('update:title', ($event.target as HTMLInputElement).value)"
+            type="text"
+            class="cpub-starter-input"
+            :placeholder="`My awesome ${contentType}...`"
+            required
+            autofocus
+          />
+        </div>
+
+        <div class="cpub-starter-field">
+          <label for="starter-desc" class="cpub-starter-label">Description</label>
+          <textarea
+            id="starter-desc"
+            :value="(metadata.description as string) || ''"
+            @input="updateField('description', ($event.target as HTMLTextAreaElement).value)"
+            class="cpub-starter-input cpub-starter-textarea"
+            rows="3"
+            placeholder="A brief summary of what this is about..."
+          />
+        </div>
+
+        <div class="cpub-starter-field">
+          <label class="cpub-starter-label">Cover Image</label>
+          <ImageUpload
+            :model-value="(metadata.coverImageUrl as string) || ''"
+            @update:model-value="updateField('coverImageUrl', $event)"
+            purpose="cover"
+            hint="Recommended: 1200x630px or wider"
+          />
+        </div>
+
+        <div class="cpub-starter-actions">
+          <button type="submit" class="cpub-starter-submit" :disabled="saving || !title.trim()">
+            {{ saving ? 'Creating...' : 'Start Writing' }}
+          </button>
+          <NuxtLink to="/create" class="cpub-starter-cancel">Cancel</NuxtLink>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-starter-overlay {
+  min-height: 100vh;
+  background: var(--bg);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 48px 24px 64px;
+}
+
+.cpub-starter-card {
+  width: 100%;
+  max-width: 600px;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  padding: 36px 32px;
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-starter-header { margin-bottom: 28px; }
+
+.cpub-starter-back {
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  color: var(--text-dim);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 16px;
+  letter-spacing: 0.04em;
+}
+.cpub-starter-back:hover { color: var(--text); }
+
+.cpub-starter-title {
+  font-size: 1.5rem;
+  font-weight: 800;
+  margin-bottom: 6px;
+  text-transform: capitalize;
+  color: var(--accent);
+}
+
+.cpub-starter-subtitle { font-size: 0.9375rem; color: var(--text-dim); }
+
+.cpub-starter-error {
+  padding: 10px 14px;
+  background: var(--red-bg);
+  color: var(--red);
+  border: var(--border-width-default) solid var(--red);
+  font-size: 0.8125rem;
+  font-family: var(--font-mono);
+  margin-bottom: 16px;
+}
+
+.cpub-starter-form { display: flex; flex-direction: column; gap: 20px; }
+.cpub-starter-field { display: flex; flex-direction: column; gap: 6px; }
+
+.cpub-starter-label {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.cpub-starter-required { color: var(--red); }
+
+.cpub-starter-input {
+  padding: 10px 14px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  font-size: 0.875rem;
+  font-family: var(--font-sans, system-ui);
+  outline: none;
+  transition: border-color 0.15s;
+}
+.cpub-starter-input:focus { border-color: var(--accent); }
+.cpub-starter-input::placeholder { color: var(--text-faint); }
+.cpub-starter-textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
+
+.cpub-starter-actions {
+  display: flex;
+  gap: 12px;
+  padding-top: 8px;
+}
+
+.cpub-starter-submit {
+  font-family: var(--font-mono);
+  padding: 10px 24px;
+  background: var(--accent);
+  color: var(--color-text-inverse);
+  border: var(--border-width-default) solid var(--accent);
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow 0.15s, transform 0.15s;
+}
+.cpub-starter-submit:hover {
+  box-shadow: none;
+  transform: translate(2px, 2px);
+}
+.cpub-starter-submit:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.cpub-starter-cancel {
+  display: inline-flex;
+  align-items: center;
+  padding: 10px 20px;
+  background: transparent;
+  border: var(--border-width-default) solid var(--border);
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  transition: background 0.15s;
+}
+.cpub-starter-cancel:hover { background: var(--surface2); }
+</style>

package/components/ContentTypeBadge.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+defineProps<{
+  type: string;
+}>();
+
+const iconMap: Record<string, string> = {
+  project: 'fa-solid fa-microchip',
+  article: 'fa-solid fa-file-lines',
+  guide: 'fa-solid fa-book',
+  blog: 'fa-solid fa-pen-nib',
+  explainer: 'fa-solid fa-lightbulb',
+};
+</script>
+
+<template>
+  <span class="cpub-type-badge" :data-content-type="type">
+    <i :class="iconMap[type] || 'fa-solid fa-file'" class="cpub-badge-icon"></i>
+    {{ type }}
+  </span>
+</template>
+
+<style scoped>
+.cpub-type-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 3px 10px;
+  background: var(--color-badge-overlay, rgba(0, 0, 0, 0.75));
+  color: var(--badge-color, #fff);
+  backdrop-filter: blur(4px);
+}
+
+.cpub-badge-icon {
+  font-size: 9px;
+}
+
+[data-content-type="project"] { color: var(--badge-color-project, #93c5fd); }
+[data-content-type="article"] { color: var(--badge-color-article, #5eead4); }
+[data-content-type="blog"] { color: var(--badge-color-blog, #86efac); }
+[data-content-type="explainer"] { color: var(--badge-color-explainer, #fde68a); }
+</style>

package/components/CountdownTimer.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const props = defineProps<{
+  targetDate: string;
+}>();
+
+const timeLeft = ref({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+
+function update(): void {
+  const diff = new Date(props.targetDate).getTime() - Date.now();
+  if (diff <= 0) {
+    timeLeft.value = { days: 0, hours: 0, minutes: 0, seconds: 0 };
+    return;
+  }
+  timeLeft.value = {
+    days: Math.floor(diff / 86400000),
+    hours: Math.floor((diff % 86400000) / 3600000),
+    minutes: Math.floor((diff % 3600000) / 60000),
+    seconds: Math.floor((diff % 60000) / 1000),
+  };
+}
+
+let timer: ReturnType<typeof setInterval>;
+onMounted(() => { update(); timer = setInterval(update, 1000); });
+onUnmounted(() => clearInterval(timer));
+</script>
+
+<template>
+  <div class="cpub-countdown">
+    <div v-for="(val, key) in timeLeft" :key="key" class="cpub-countdown-unit">
+      <span class="cpub-countdown-num">{{ String(val).padStart(2, '0') }}</span>
+      <span class="cpub-countdown-label">{{ key }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-countdown {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+
+.cpub-countdown-unit {
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border);
+  padding: 10px 4px;
+  text-align: center;
+}
+
+.cpub-countdown-num {
+  font-size: 22px;
+  font-weight: 700;
+  font-family: var(--font-mono);
+  color: var(--text);
+  line-height: 1;
+  display: block;
+}
+
+.cpub-countdown-label {
+  font-size: 9px;
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  display: block;
+  margin-top: 4px;
+}
+</style>

package/components/CpubEditor.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { createCommonPubEditor, docToBlockTuples } from '@commonpub/editor';
+import type { BlockTuple } from '@commonpub/editor';
+import type { Editor } from '@tiptap/core';
+
+const props = withDefaults(defineProps<{
+  modelValue: BlockTuple[];
+  editable?: boolean;
+  placeholder?: string;
+  blockTypes?: string[];
+}>(), {
+  editable: true,
+  placeholder: 'Start writing...',
+  blockTypes: () => [],
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [blocks: BlockTuple[]];
+  selectionChange: [node: { type: string; attrs: Record<string, unknown> } | null];
+}>();
+
+const editorElement = ref<HTMLElement | null>(null);
+const editor = ref<Editor | null>(null);
+
+onMounted(() => {
+  if (!editorElement.value) return;
+
+  editor.value = createCommonPubEditor({
+    content: props.modelValue.length > 0 ? props.modelValue : undefined,
+    editable: props.editable,
+    placeholder: props.placeholder,
+    element: editorElement.value,
+    onUpdate: (blocks: BlockTuple[]) => {
+      emit('update:modelValue', blocks);
+    },
+  });
+
+  editor.value.on('selectionUpdate', ({ editor: e }) => {
+    const { $anchor } = e.state.selection;
+    const node = $anchor.parent;
+    if (node && node.type.name !== 'doc') {
+      emit('selectionChange', { type: node.type.name, attrs: { ...node.attrs } });
+    } else {
+      emit('selectionChange', null);
+    }
+  });
+});
+
+watch(() => props.editable, (val) => {
+  editor.value?.setEditable(val);
+});
+
+onBeforeUnmount(() => {
+  editor.value?.destroy();
+  editor.value = null;
+});
+
+defineExpose({ editor });
+</script>
+
+<template>
+  <div ref="editorElement" class="cpub-editor cpub-prose" />
+</template>
+
+<style scoped>
+.cpub-editor {
+  min-height: 300px;
+  outline: none;
+}
+
+.cpub-editor :deep(.tiptap) {
+  outline: none;
+  min-height: 300px;
+}
+
+.cpub-editor :deep(.tiptap p.is-editor-empty:first-child::before) {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--text-faint);
+  pointer-events: none;
+  height: 0;
+}
+
+.cpub-editor :deep(.tiptap:focus) {
+  outline: none;
+}
+</style>