@blogmcp/community 0.1.0 → 0.2.0

package/src/ui/ProfileView.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+/**
+ * `<blogmcp-profile handle>`: a member's public profile (m2-contracts.md §3.2, §3.10) — the name and avatar, since
+ * when they are a member (a month), the bio as text, and the trust level as its label („Nový člen" … „Moderátor"),
+ * never its number. An unknown handle reads one line; a visitor gets the sign-in sentence (profiles are for signed-in
+ * readers, kb-api's rule).
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { signInLink, type CommunityTransport } from '@blogmcp/sdk/community'
+import { communityClientFor, siteBaseFor } from '../core/client'
+import { formatMonth } from '../core/format'
+import { documentLang, pickLang, type Lang } from '../core/i18n'
+import { failureText } from '../core/outcomes'
+import { createProfile, type ProfileController } from '../core/profile'
+import AuthorAvatar from './AuthorAvatar.vue'
+import { provideText, uid } from './context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  /** The member's handle (`jana_n`, an `@` in front is fine). */
+  handle?: string
+  apiBase?: string
+  siteBase?: string
+  lang?: string
+  routes?: string | Record<string, unknown>
+  signInHref?: string
+  transport?: CommunityTransport
+}>()
+
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+const { t } = provideText(lang)
+const id = uid('bcm-profile')
+
+const siteBase = siteBaseFor(props.siteBase)
+const client = siteBase === null ? null : communityClientFor(props.apiBase, props.transport, siteBase)
+const ctl: ProfileController | null = client ? createProfile({ client }) : null
+const state = ctl?.state ?? null
+
+onMounted(() => void ctl?.load(props.handle ?? ''))
+// A host that reuses the element for another member (client-side navigation) reads that one.
+watch(
+  () => props.handle,
+  (next, before) => {
+    if (next !== before) void ctl?.load(next ?? '')
+  },
+)
+onBeforeUnmount(() => ctl?.dispose())
+
+const since = computed(() => (state?.memberSince ? formatMonth(lang.value, state.memberSince) : ''))
+const failure = computed(() => {
+  const f = state?.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+
+function signInHref(): string | null {
+  return signInLink(props.signInHref, typeof location === 'undefined' ? null : location.pathname)
+}
+</script>
+
+<template>
+  <section v-if="ctl && state" class="bcm bcm-profile" :lang="lang" :aria-labelledby="`${id}-title`">
+    <p v-if="state.phase === 'loading' || state.phase === 'idle'" class="bcm-muted" role="status">{{ t('common.loading') }}</p>
+    <p v-else-if="state.phase === 'notFound'" :id="`${id}-title`" class="bcm-note">{{ t('profile.notFound') }}</p>
+    <div v-else-if="state.phase === 'signIn'" class="bcm-row">
+      <p :id="`${id}-title`">{{ t('profile.signIn') }}</p>
+      <a v-if="signInHref()" class="bcm-btn bcm-primary" :href="signInHref() ?? undefined">{{ t('common.signIn') }}</a>
+    </div>
+    <div v-else-if="state.phase === 'failed'" class="bcm-banner" role="alert">
+      <span :id="`${id}-title`">{{ failure }}</span>
+      <button type="button" class="bcm-btn" @click="ctl.load(props.handle ?? '')">{{ t('common.retry') }}</button>
+    </div>
+    <template v-else-if="state.author && state.author.kind === 'member'">
+      <header class="bcm-profile-head">
+        <AuthorAvatar :author="state.author" />
+        <div class="bcm-msg-main">
+          <h2 :id="`${id}-title`">{{ state.author.displayName }}</h2>
+          <span class="bcm-handle">{{ state.author.handle }}</span>
+        </div>
+      </header>
+      <p v-if="state.trustKey"><span class="bcm-badge">{{ t(state.trustKey) }}</span></p>
+      <p v-if="since" class="bcm-muted">{{ t('profile.memberSince', { date: since }) }}</p>
+      <section v-if="state.bio" class="bcm-section" :aria-labelledby="`${id}-bio`">
+        <h3 :id="`${id}-bio`">{{ t('profile.bio') }}</h3>
+        <p class="bcm-text">{{ state.bio }}</p>
+      </section>
+    </template>
+  </section>
+</template>

package/src/ui/WelcomeView.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+/**
+ * `<blogmcp-welcome>`: the welcome page after joining (m2-contracts.md §3.10; the storefront's `/komunita/vitejte`) —
+ * the tenant's rules in summary (as the onboarding shows them, with the link to the rules page) and three links: the
+ * discussions, the settings, the member's own profile. A visitor gets the sign-in link in the profile's place.
+ */
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { profilePath, signInLink, type CommunityTransport } from '@blogmcp/sdk/community'
+import { parseRoutes, routesWithDefaults } from '../core/attrs'
+import { communityClientFor, siteBaseFor } from '../core/client'
+import { documentLang, pickLang, type Lang } from '../core/i18n'
+import { createWelcome, type WelcomeController } from '../core/profile'
+import { provideText, uid } from './context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  apiBase?: string
+  siteBase?: string
+  lang?: string
+  /** JSON (or an object): `rulesPath`, `discussionsPath`, `settingsPath`, `profilePath`. */
+  routes?: string | Record<string, unknown>
+  signInHref?: string
+  transport?: CommunityTransport
+}>()
+
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+const { t } = provideText(lang)
+const id = uid('bcm-welcome')
+
+const siteBase = siteBaseFor(props.siteBase)
+const client = siteBase === null ? null : communityClientFor(props.apiBase, props.transport, siteBase)
+const ctl: WelcomeController | null = client ? createWelcome({ client, lang: lang.value }) : null
+const state = ctl?.state ?? null
+const routes = computed(() => routesWithDefaults(parseRoutes(props.routes), null, siteBase ?? ''))
+const ownProfile = computed(() => (state?.handle ? profilePath(routes.value.profilePath, state.handle) : null))
+
+onMounted(() => void ctl?.load())
+onBeforeUnmount(() => ctl?.dispose())
+
+function signInHref(): string | null {
+  return signInLink(props.signInHref, typeof location === 'undefined' ? null : location.pathname)
+}
+</script>
+
+<template>
+  <section v-if="ctl && state" class="bcm bcm-welcome" :lang="lang" :aria-labelledby="`${id}-title`">
+    <h2 :id="`${id}-title`">{{ t('welcome.title') }}</h2>
+    <p>{{ t('welcome.lede') }}</p>
+
+    <p v-if="state.phase !== 'ready'" class="bcm-muted" role="status">{{ t('common.loading') }}</p>
+    <template v-else>
+      <section class="bcm-section" :aria-labelledby="`${id}-rules`">
+        <h3 :id="`${id}-rules`">{{ t('welcome.rules') }}</h3>
+        <ol v-if="state.rules.length" class="bcm-rules">
+          <li v-for="rule in state.rules" :key="rule.id">
+            <strong>{{ rule.title }}</strong>
+            <span v-if="rule.summary" class="bcm-hint">{{ rule.summary }}</span>
+          </li>
+        </ol>
+        <p><a :href="routes.rulesPath">{{ t('onboarding.rulesLink') }}</a></p>
+      </section>
+
+      <ul class="bcm-links">
+        <li><a class="bcm-btn" :href="routes.discussionsPath">{{ t('welcome.discussions') }}</a></li>
+        <li><a class="bcm-btn" :href="routes.settingsPath">{{ t('welcome.settings') }}</a></li>
+        <li v-if="ownProfile"><a class="bcm-btn" :href="ownProfile">{{ t('welcome.profile') }}</a></li>
+        <li v-else-if="state.visitor && signInHref()"><a class="bcm-btn bcm-primary" :href="signInHref() ?? undefined">{{ t('common.signIn') }}</a></li>
+      </ul>
+    </template>
+  </section>
+</template>

package/src/ui/styles.css

@@ -220,6 +220,22 @@ span.bcm-react { cursor: default; }
 .bcm-receipt { display: flex; flex-direction: column; gap: 8px; }
 .bcm-turnstile { min-height: 0; }
 
+/* ── M2: mentions, the badge, the centre, settings, profiles, the welcome page ── */
+.bcm-mention { color: var(--bcm-accent); font-weight: 600; text-decoration: none; }
+.bcm-mention:hover { text-decoration: underline; }
+:host(blogmcp-badge) { display: inline-block; }
+.bcm-badge-link {
+  display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.5em; padding: 0 6px;
+  border-radius: 999px; background: var(--bcm-accent); color: var(--bcm-accent-fg); font-size: 0.8125em; font-weight: 700;
+  line-height: 1; text-decoration: none; font-variant-numeric: tabular-nums;
+}
+.bcm-switches { list-style: none; display: flex; flex-direction: column; gap: 10px; }
+.bcm-switches li { display: flex; flex-direction: column; gap: 2px; }
+.bcm-profile-head { display: flex; align-items: center; gap: 12px; }
+.bcm-profile-head .bcm-avatar { width: 48px; height: 48px; font-size: 26px; }
+.bcm-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
+.bcm-url { overflow-wrap: anywhere; font-family: ui-monospace, monospace; font-size: 0.875em; }
+
 /* ── dialogs (native <dialog>: the top layer, Esc, focus kept inside) ── */
 .bcm-dialog {
   border: 1px solid var(--bcm-line); border-radius: 14px; padding: 0;

package/src/vue.ts

@@ -1,5 +1,6 @@
 /**
- * `<KbDiscussion>`, `<KbNoticeForm>`, `<KbMyCommunity>` for Vue / Nuxt: each mounts its element on the
+ * `<KbDiscussion>`, `<KbNoticeForm>`, `<KbMyCommunity>` and (M2) `<KbNotificationCentre>`, `<KbBadge>`,
+ * `<KbMemberSettings>`, `<KbProfile>`, `<KbWelcome>` for Vue / Nuxt: each mounts its element on the
  * client, after hydration, and removes it on unmount. Each renders one empty `<div>` as the mount point —
  * nothing else, on the server or the client — so the element sits where the component does and the page's
  * markup is otherwise the site's alone.
@@ -12,7 +13,17 @@
 import { defineComponent, h, onBeforeUnmount, onMounted, ref, watch, type PropType } from 'vue'
 import type { CommunityTransport } from '@blogmcp/sdk/community'
 import type { CommunityRoutes } from './core/attrs'
-import type { MountDiscussionOptions, MountMyCommunityOptions, MountNoticeFormOptions } from './mount'
+import type { DiscussionRealtime } from './core/realtime'
+import type {
+  MountBadgeOptions,
+  MountDiscussionOptions,
+  MountMemberSettingsOptions,
+  MountMyCommunityOptions,
+  MountNoticeFormOptions,
+  MountNotificationCentreOptions,
+  MountProfileOptions,
+  MountWelcomeOptions,
+} from './mount'
 
 type Mounter<O> = (o: O & { container: Element }) => () => void
 
@@ -60,6 +71,8 @@ export const KbDiscussion = defineComponent({
     pollMs: Number,
     nonce: String,
     transport: Function as PropType<CommunityTransport>,
+    /** M2: `createRealtimeSession` of `@blogmcp/sdk/community/realtime`. */
+    realtime: Function as PropType<DiscussionRealtime>,
   },
   setup(props) {
     return useMount<MountDiscussionOptions>(
@@ -113,4 +126,117 @@ export const KbMyCommunity = defineComponent({
   },
 })
 
-export type { MountDiscussionOptions, MountNoticeFormOptions, MountMyCommunityOptions, CommunityRoutes }
+export const KbNotificationCentre = defineComponent({
+  name: 'KbNotificationCentre',
+  props: {
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    signInHref: String,
+    routes: Object as PropType<CommunityRoutes>,
+    nonce: String,
+    transport: Function as PropType<CommunityTransport>,
+  },
+  setup(props) {
+    return useMount<MountNotificationCentreOptions>(
+      'notification-centre',
+      () => defined({ ...props }) as MountNotificationCentreOptions,
+      async () => (await import('./mount')).mountNotificationCentre as Mounter<MountNotificationCentreOptions>,
+    )
+  },
+})
+
+export const KbBadge = defineComponent({
+  name: 'KbBadge',
+  props: {
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    routes: Object as PropType<CommunityRoutes>,
+    pollMs: Number,
+    nonce: String,
+    transport: Function as PropType<CommunityTransport>,
+  },
+  setup(props) {
+    return useMount<MountBadgeOptions>(
+      'badge',
+      () => defined({ ...props }) as MountBadgeOptions,
+      async () => (await import('./mount')).mountBadge as Mounter<MountBadgeOptions>,
+    )
+  },
+})
+
+export const KbMemberSettings = defineComponent({
+  name: 'KbMemberSettings',
+  props: {
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    swPath: String,
+    signInHref: String,
+    routes: Object as PropType<CommunityRoutes>,
+    nonce: String,
+    transport: Function as PropType<CommunityTransport>,
+  },
+  setup(props) {
+    return useMount<MountMemberSettingsOptions>(
+      'member-settings',
+      () => defined({ ...props }) as MountMemberSettingsOptions,
+      async () => (await import('./mount')).mountMemberSettings as Mounter<MountMemberSettingsOptions>,
+    )
+  },
+})
+
+export const KbProfile = defineComponent({
+  name: 'KbProfile',
+  props: {
+    handle: { type: String, required: true },
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    signInHref: String,
+    routes: Object as PropType<CommunityRoutes>,
+    nonce: String,
+    transport: Function as PropType<CommunityTransport>,
+  },
+  setup(props) {
+    return useMount<MountProfileOptions>(
+      'profile',
+      () => defined({ ...props }) as MountProfileOptions,
+      async () => (await import('./mount')).mountProfile as Mounter<MountProfileOptions>,
+    )
+  },
+})
+
+export const KbWelcome = defineComponent({
+  name: 'KbWelcome',
+  props: {
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    signInHref: String,
+    routes: Object as PropType<CommunityRoutes>,
+    nonce: String,
+    transport: Function as PropType<CommunityTransport>,
+  },
+  setup(props) {
+    return useMount<MountWelcomeOptions>(
+      'welcome',
+      () => defined({ ...props }) as MountWelcomeOptions,
+      async () => (await import('./mount')).mountWelcome as Mounter<MountWelcomeOptions>,
+    )
+  },
+})
+
+export type {
+  MountDiscussionOptions,
+  MountNoticeFormOptions,
+  MountMyCommunityOptions,
+  MountNotificationCentreOptions,
+  MountBadgeOptions,
+  MountMemberSettingsOptions,
+  MountProfileOptions,
+  MountWelcomeOptions,
+  CommunityRoutes,
+  DiscussionRealtime,
+}