@commonpub/layer 0.1.0

package/pages/hubs/create.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+definePageMeta({ middleware: 'auth' });
+
+useSeoMeta({
+  title: `Create Hub — ${useSiteName()}`,
+  description: 'Create a new maker hub.',
+});
+
+const toast = useToast();
+const { extract: extractError } = useApiError();
+const name = ref('');
+const description = ref('');
+const iconUrl = ref('');
+const bannerUrl = ref('');
+const hubType = ref<'community' | 'product' | 'company'>('community');
+const joinPolicy = ref<'open' | 'approval' | 'invite'>('open');
+const saving = ref(false);
+
+async function handleCreate(): Promise<void> {
+  saving.value = true;
+  try {
+    const result = await $fetch('/api/hubs', {
+      method: 'POST',
+      body: {
+        name: name.value,
+        description: description.value || undefined,
+        iconUrl: iconUrl.value || undefined,
+        bannerUrl: bannerUrl.value || undefined,
+        hubType: hubType.value,
+        joinPolicy: joinPolicy.value,
+      },
+    });
+    await navigateTo(`/hubs/${(result as { slug: string }).slug}`);
+  } catch (err: unknown) {
+    toast.error(extractError(err));
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-create-hub">
+    <div class="cpub-create-header">
+      <NuxtLink to="/explore" class="cpub-back-link">
+        <i class="fa-solid fa-arrow-left"></i> Back
+      </NuxtLink>
+      <h1 class="cpub-create-title">Create Hub</h1>
+      <p class="cpub-create-subtitle">Start a new maker community, product page, or company hub.</p>
+    </div>
+
+    <form class="cpub-create-form" @submit.prevent="handleCreate" aria-label="Create hub form">
+      <div class="cpub-field">
+        <label for="hub-name" class="cpub-field-label">Name</label>
+        <input id="hub-name" v-model="name" type="text" class="cpub-field-input" required placeholder="Hub name" />
+      </div>
+
+      <div class="cpub-field">
+        <label for="hub-desc" class="cpub-field-label">Description</label>
+        <textarea id="hub-desc" v-model="description" class="cpub-field-input cpub-field-textarea" rows="3" placeholder="What is this hub about?" />
+      </div>
+
+      <div class="cpub-field-row cpub-field-row-images">
+        <div class="cpub-field">
+          <ImageUpload v-model="iconUrl" purpose="avatar" label="Icon / Avatar" hint="Square image, at least 256x256px" />
+        </div>
+        <div class="cpub-field">
+          <ImageUpload v-model="bannerUrl" purpose="banner" label="Banner Image" hint="Wide image, at least 1200x300px" />
+        </div>
+      </div>
+
+      <div class="cpub-field-row">
+        <div class="cpub-field">
+          <label for="hub-type" class="cpub-field-label">Hub Type</label>
+          <select id="hub-type" v-model="hubType" class="cpub-field-input">
+            <option value="community">Community — maker group / topic space</option>
+            <option value="product">Product — product or platform page</option>
+            <option value="company">Company — organization page</option>
+          </select>
+        </div>
+
+        <div class="cpub-field">
+          <label for="hub-join" class="cpub-field-label">Join Policy</label>
+          <select id="hub-join" v-model="joinPolicy" class="cpub-field-input">
+            <option value="open">Open — anyone can join</option>
+            <option value="approval">Approval — requests must be approved</option>
+            <option value="invite">Invite Only</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="cpub-form-actions">
+        <button type="submit" class="cpub-btn cpub-btn-primary" :disabled="saving || !name">
+          {{ saving ? 'Creating...' : 'Create Hub' }}
+        </button>
+        <NuxtLink to="/explore" class="cpub-btn">Cancel</NuxtLink>
+      </div>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.cpub-create-hub {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 32px;
+}
+
+.cpub-create-header {
+  margin-bottom: 32px;
+}
+
+.cpub-back-link {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-dim);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 12px;
+}
+
+.cpub-back-link:hover { color: var(--text); }
+
+.cpub-create-title {
+  font-size: 22px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.cpub-create-subtitle {
+  font-size: 13px;
+  color: var(--text-dim);
+}
+
+.cpub-create-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.cpub-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cpub-field-label {
+  font-size: 11px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+}
+
+.cpub-field-input {
+  padding: 8px 12px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  font-size: 13px;
+  font-family: var(--font-sans);
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.cpub-field-input:focus {
+  border-color: var(--accent);
+}
+
+.cpub-field-input::placeholder {
+  color: var(--text-faint);
+}
+
+.cpub-field-textarea {
+  resize: vertical;
+  min-height: 60px;
+  line-height: 1.5;
+}
+
+.cpub-field-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.cpub-form-actions {
+  display: flex;
+  gap: 10px;
+  padding-top: 8px;
+}
+
+select.cpub-field-input { cursor: pointer; }
+
+@media (max-width: 640px) {
+  .cpub-create-hub { padding: 16px; }
+  .cpub-field-row { grid-template-columns: 1fr; }
+}
+</style>

package/pages/hubs/index.vue

@@ -0,0 +1,207 @@
+<script setup lang="ts">
+useSeoMeta({
+  title: `Hubs — ${useSiteName()}`,
+  description: 'Browse and join maker communities.',
+});
+
+const { data } = await useFetch('/api/hubs');
+const { isAuthenticated } = useAuth();
+
+const hubs = computed(() => data.value?.items ?? []);
+
+function isFederated(hub: Record<string, unknown>): boolean {
+  return (hub as { source?: string }).source === 'federated';
+}
+
+function hubLink(hub: Record<string, unknown>): string {
+  if (isFederated(hub)) return `/federated-hubs/${hub.id}`;
+  return `/hubs/${hub.slug}`;
+}
+</script>
+
+<template>
+  <div class="cpub-hubs-page">
+    <div class="cpub-hubs-header">
+      <div>
+        <h1 class="cpub-hubs-title">Hubs</h1>
+        <p class="cpub-hubs-desc">Communities, products, and companies on CommonPub</p>
+      </div>
+      <NuxtLink v-if="isAuthenticated" to="/hubs/create" class="cpub-btn cpub-btn-primary">
+        <i class="fa-solid fa-plus"></i> Create Hub
+      </NuxtLink>
+    </div>
+
+    <div v-if="hubs.length" class="cpub-hubs-grid">
+      <NuxtLink
+        v-for="hub in hubs"
+        :key="hub.id"
+        :to="hubLink(hub as Record<string, unknown>)"
+        class="cpub-hub-card"
+      >
+        <div class="cpub-hub-card-banner" :style="hub.bannerUrl ? { backgroundImage: `url(${hub.bannerUrl})` } : {}">
+          <div class="cpub-hub-card-icon">
+            <img v-if="hub.iconUrl" :src="hub.iconUrl" :alt="hub.name" class="cpub-hub-card-avatar" />
+            <i v-else :class="hub.hubType === 'company' ? 'fa-solid fa-building' : hub.hubType === 'product' ? 'fa-solid fa-microchip' : 'fa-solid fa-users'"></i>
+          </div>
+        </div>
+        <div class="cpub-hub-card-body">
+          <div class="cpub-hub-card-name-row">
+            <h2 class="cpub-hub-card-name">{{ hub.name }}</h2>
+            <span class="cpub-hub-card-type">{{ hub.hubType ?? 'community' }}</span>
+          </div>
+          <p v-if="hub.description" class="cpub-hub-card-desc">{{ hub.description }}</p>
+          <div class="cpub-hub-card-meta">
+            <span class="cpub-hub-card-stat"><i class="fa-solid fa-users"></i> {{ hub.memberCount ?? 0 }} members</span>
+            <span class="cpub-hub-card-stat"><i class="fa-solid fa-message"></i> {{ hub.postCount ?? 0 }} posts</span>
+            <span v-if="isFederated(hub as Record<string, unknown>)" class="cpub-hub-card-origin">
+              <i class="fa-solid fa-globe"></i> {{ (hub as Record<string, unknown>).originDomain }}
+            </span>
+          </div>
+        </div>
+      </NuxtLink>
+    </div>
+    <div v-else class="cpub-empty-state">
+      <div class="cpub-empty-state-icon"><i class="fa-solid fa-users"></i></div>
+      <p class="cpub-empty-state-title">No hubs yet</p>
+      <p class="cpub-empty-state-desc">Be the first to create a community!</p>
+      <NuxtLink v-if="isAuthenticated" to="/hubs/create" class="cpub-btn cpub-btn-primary" style="margin-top: 16px">
+        <i class="fa-solid fa-plus"></i> Create Hub
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-hubs-page {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 40px 24px 64px;
+}
+
+.cpub-hubs-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 28px;
+  gap: 16px;
+}
+
+.cpub-hubs-title { font-size: 22px; font-weight: 700; }
+.cpub-hubs-desc { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
+
+.cpub-hubs-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 16px;
+}
+
+.cpub-hub-card {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+  transition: box-shadow 0.15s, border-color 0.15s;
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-hub-card:hover {
+  box-shadow: var(--shadow-lg);
+  border-color: var(--accent-border);
+}
+
+.cpub-hub-card-banner {
+  height: 80px;
+  background: linear-gradient(135deg, var(--accent), var(--accent-border));
+  background-size: cover;
+  background-position: center;
+  position: relative;
+}
+
+.cpub-hub-card-icon {
+  position: absolute;
+  bottom: -20px;
+  left: 18px;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--surface);
+  color: var(--accent);
+  font-size: 20px;
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+
+.cpub-hub-card-avatar { width: 100%; height: 100%; object-fit: cover; }
+
+.cpub-hub-card-body {
+  padding: 28px 18px 18px;
+}
+
+.cpub-hub-card-name-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.cpub-hub-card-name { font-size: 15px; font-weight: 600; }
+
+.cpub-hub-card-desc {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.5;
+  margin-bottom: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.cpub-hub-card-meta {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.cpub-hub-card-stat {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.cpub-hub-card-stat i { font-size: 10px; }
+
+.cpub-hub-card-type {
+  font-size: 9px;
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: var(--border-width-default) solid var(--accent-border);
+  padding: 2px 6px;
+}
+
+.cpub-hub-card-origin {
+  font-size: 10px;
+  color: var(--text-faint);
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  margin-left: auto;
+}
+.cpub-hub-card-origin i { font-size: 9px; color: var(--accent); }
+
+@media (max-width: 640px) {
+  .cpub-hubs-page { padding: 24px 16px 48px; }
+  .cpub-hubs-grid { grid-template-columns: 1fr; }
+  .cpub-hubs-header { flex-direction: column; }
+}
+</style>