@commonpub/layer 0.24.0 → 0.25.0

package/components/sections/SectionImage.vue

@@ -1,104 +0,0 @@
-<script setup lang="ts">
-/**
- * Built-in section: image — single image with optional caption + link.
- *
- * Phase 1c starter. Author-provided `src` is rendered as-is; aspect-ratio
- * keeps cards uniform. Lazy-loaded by default for below-fold sections.
- *
- * Phase 3e inspector will swap the `src` text input for an ImageUpload
- * picker via `.describe('image')` Zod metadata.
- *
- * `var(--*)` only.
- */
-import type { SectionRenderProps } from '@commonpub/ui';
-
-interface ImageConfig extends Record<string, unknown> {
-  src: string;
-  alt: string;
-  caption: string;
-  href: string;
-  fit: 'contain' | 'cover';
-  aspectRatio: '16/9' | '4/3' | '1/1' | 'auto';
-}
-
-defineProps<SectionRenderProps<ImageConfig>>();
-</script>
-
-<template>
-  <figure
-    class="cpub-section-image"
-    :data-aspect="config.aspectRatio"
-    :data-fit="config.fit"
-  >
-    <!-- The `href` field is optional — link only when truthy so screen
-         readers don't announce a non-interactive image as a link. -->
-    <component
-      :is="config.href ? 'a' : 'div'"
-      :href="config.href || undefined"
-      class="cpub-section-image-frame"
-    >
-      <img
-        v-if="config.src"
-        :src="config.src"
-        :alt="config.alt"
-        loading="lazy"
-        decoding="async"
-        class="cpub-section-image-img"
-      />
-      <div v-else class="cpub-section-image-placeholder" aria-hidden="true">
-        <i class="fa-regular fa-image" />
-      </div>
-    </component>
-    <figcaption v-if="config.caption" class="cpub-section-image-caption">
-      {{ config.caption }}
-    </figcaption>
-  </figure>
-</template>
-
-<style scoped>
-.cpub-section-image {
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-.cpub-section-image-frame {
-  display: block;
-  width: 100%;
-  background: var(--surface2);
-  border: var(--border-width-default) solid var(--border);
-  overflow: hidden;
-  text-decoration: none;
-  color: inherit;
-}
-.cpub-section-image[data-aspect='16/9'] .cpub-section-image-frame { aspect-ratio: 16 / 9; }
-.cpub-section-image[data-aspect='4/3']  .cpub-section-image-frame { aspect-ratio: 4 / 3; }
-.cpub-section-image[data-aspect='1/1']  .cpub-section-image-frame { aspect-ratio: 1 / 1; }
-
-.cpub-section-image-img {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-.cpub-section-image[data-fit='cover']   .cpub-section-image-img { object-fit: cover; }
-.cpub-section-image[data-fit='contain'] .cpub-section-image-img { object-fit: contain; }
-/* Aspect=auto + no explicit ratio: let the image dictate height */
-.cpub-section-image[data-aspect='auto'] .cpub-section-image-img {
-  height: auto;
-}
-
-.cpub-section-image-placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  min-height: 120px;
-  color: var(--text-faint);
-  font-size: var(--text-xl);
-}
-.cpub-section-image-caption {
-  font-size: var(--text-sm);
-  color: var(--text-dim);
-  line-height: 1.5;
-}
-</style>

package/components/sections/SectionParagraph.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-/**
- * Built-in section: paragraph — plain prose body.
- *
- * Phase 1c starter. Stores `text: string` and splits on blank lines into
- * paragraphs at render time. The auto-form inspector (Phase 3e) will
- * upgrade this to a TipTap subset via the `.describe('rich')` Zod
- * metadata — at which point `schemaVersion` bumps to 2 with a migration
- * that converts plain text → block tuples.
- *
- * `var(--*)` only.
- */
-import { computed } from 'vue';
-import type { SectionRenderProps } from '@commonpub/ui';
-
-interface ParagraphConfig extends Record<string, unknown> {
-  text: string;
-  align: 'left' | 'center';
-}
-
-const props = defineProps<SectionRenderProps<ParagraphConfig>>();
-
-// Blank-line split — preserves authored paragraph breaks without needing
-// a rich-text editor. Empty paragraphs are dropped (defensive).
-const paragraphs = computed<string[]>(() =>
-  (props.config.text ?? '')
-    .split(/\n{2,}/)
-    .map((p) => p.trim())
-    .filter((p) => p.length > 0),
-);
-</script>
-
-<template>
-  <div class="cpub-section-paragraph" :data-align="config.align">
-    <p v-for="(p, i) in paragraphs" :key="i">{{ p }}</p>
-  </div>
-</template>
-
-<style scoped>
-.cpub-section-paragraph {
-  margin-block: var(--space-3);
-  color: var(--text);
-  font-size: var(--text-md);
-  line-height: 1.7;
-}
-.cpub-section-paragraph[data-align='center'] {
-  text-align: center;
-}
-.cpub-section-paragraph p {
-  margin: 0 0 var(--space-3);
-}
-.cpub-section-paragraph p:last-child {
-  margin-bottom: 0;
-}
-</style>

package/components/sections/SectionStats.vue

@@ -1,151 +0,0 @@
-<script setup lang="ts">
-/**
- * Built-in section: stats — a numeric grid of platform totals.
- *
- * Fetches `/api/stats` (returns PlatformStats), renders 2x2 grid of
- * Projects / Posts / Members / Hubs. Hubs cell hides when the `hubs`
- * feature flag is off — same logic as the legacy `StatsSection.vue`.
- *
- * Non-await useFetch per session-158 pattern; pending state surfaced
- * via the template. SSR-friendly: useFetch includes the payload in the
- * hydration snapshot.
- *
- * `var(--*)` only.
- */
-import { computed } from 'vue';
-import type { SectionRenderProps } from '@commonpub/ui';
-
-// Avoid `import type { PlatformStats }` at the call site so the runtime
-// stub used in component tests doesn't need to satisfy the full server
-// type. Loose shape with optional + numeric primitives mirrors what the
-// endpoint actually emits.
-interface StatsResponse {
-  content?: {
-    byType?: {
-      project?: number;
-      blog?: number;
-      article?: number;
-    };
-  };
-  users?: { total?: number };
-  hubs?: { total?: number };
-}
-
-interface StatsConfig extends Record<string, unknown> {
-  heading: string;
-}
-
-const props = defineProps<SectionRenderProps<StatsConfig>>();
-
-const features = useFeatures();
-const hubsEnabled = computed(() => features.hubs.value);
-
-const { data: stats, pending } = useFetch<StatsResponse>(
-  '/api/stats',
-  {
-    key: `section-stats:${props.meta.sectionId}`,
-    // Lazy — sidebar metric tile, not above-the-fold content. Matches the
-    // legacy StatsSection.vue pattern and keeps homepage SSR fast.
-    lazy: true,
-  },
-);
-
-const projectCount = computed(() => stats.value?.content?.byType?.project ?? 0);
-const postCount = computed(
-  () => (stats.value?.content?.byType?.blog ?? 0)
-       + (stats.value?.content?.byType?.article ?? 0),
-);
-const memberCount = computed(() => stats.value?.users?.total ?? 0);
-const hubCount = computed(() => stats.value?.hubs?.total ?? 0);
-</script>
-
-<template>
-  <section
-    class="cpub-section-stats"
-    :aria-labelledby="config.heading ? `section-stats-${meta.sectionId}` : undefined"
-  >
-    <h2
-      v-if="config.heading"
-      :id="`section-stats-${meta.sectionId}`"
-      class="cpub-section-stats-heading"
-    >
-      {{ config.heading }}
-    </h2>
-
-    <div v-if="pending" class="cpub-section-stats-loading">
-      <i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true" />
-    </div>
-
-    <dl v-else class="cpub-section-stats-grid" :data-with-hubs="hubsEnabled ? 'yes' : 'no'">
-      <div class="cpub-section-stats-block">
-        <dt>Projects</dt>
-        <dd>{{ projectCount }}</dd>
-      </div>
-      <div class="cpub-section-stats-block">
-        <dt>Posts</dt>
-        <dd>{{ postCount }}</dd>
-      </div>
-      <div class="cpub-section-stats-block">
-        <dt>Members</dt>
-        <dd>{{ memberCount }}</dd>
-      </div>
-      <div v-if="hubsEnabled" class="cpub-section-stats-block">
-        <dt>Hubs</dt>
-        <dd>{{ hubCount }}</dd>
-      </div>
-    </dl>
-  </section>
-</template>
-
-<style scoped>
-.cpub-section-stats {
-  background: var(--surface);
-  border: var(--border-width-default) solid var(--border);
-  padding: var(--space-4);
-}
-.cpub-section-stats-heading {
-  font-family: var(--font-mono);
-  font-size: var(--text-xxs);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-faint);
-  margin: 0 0 var(--space-3) 0;
-  padding-bottom: var(--space-2);
-  border-bottom: var(--border-width-default) solid var(--border-soft);
-}
-.cpub-section-stats-loading {
-  display: flex;
-  justify-content: center;
-  padding: var(--space-4);
-  color: var(--text-faint);
-}
-.cpub-section-stats-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space-2);
-  margin: 0;
-}
-.cpub-section-stats-block {
-  text-align: center;
-  padding: var(--space-2) 0;
-}
-.cpub-section-stats-block dt {
-  display: block;
-  font-family: var(--font-mono);
-  font-size: var(--text-xxs);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--text-faint);
-  order: 2;  /* number above label */
-}
-.cpub-section-stats-block dd {
-  display: block;
-  font-family: var(--font-mono);
-  font-size: var(--text-lg);
-  font-weight: 700;
-  color: var(--text);
-  margin: 0;
-  order: 1;
-}
-</style>