platform-codebase/features/share/docs/integration-guide.md

Share Feature Integration Guide

How to use @platform/share in your feature.

---

Setup

The @platform/share alias is registered in codebase/tsconfig.base.json. No additional configuration needed.

---

Page Metadata (SEO)

Replace any custom SEOHead component or usePageMeta hook with the unified version:

import { usePageMeta } from '@platform/share/frontend-public/src/hooks';
import { createOrganizationSchema } from '@platform/share';

function MyPage() {
  // Your feature's deployment config — satisfies DeploymentConfigLike
  const deployment = {
    domain: 'trustedmeet.com',
    branding: { displayName: 'TrustedMeet', tagline: 'Direct & Private' },
    twitterHandle: '@trustedmeet',
  };

  usePageMeta({
    title: 'Browse Creators',
    description: 'Find trusted connections on TrustedMeet',
    path: '/browse',
    ogImage: '/og-browse.png',
    structuredData: [
      createOrganizationSchema({
        name: 'TrustedMeet',
        url: 'https://www.trustedmeet.com',
      }),
    ],
  }, deployment);

  return <div>...</div>;
}

With i18n (landing pattern)

import { usePageMeta } from '@platform/share/frontend-public/src/hooks';
import { useSEO } from '@lilith/i18n';

function LandingPage({ pageType }: { pageType: string }) {
  const seo = useSEO(pageType);

  usePageMeta({
    title: seo.title,
    description: seo.description,
    keywords: seo.keywords ? [seo.keywords] : undefined,
    ogImage: seo.ogImage,
  }, {
    domain: 'atlilith.com',
    branding: { displayName: 'Lilith Platform' },
  });

  return <div>...</div>;
}

---

Share Buttons

Add social share buttons to any page or component:

import { ShareButtons } from '@platform/share/frontend-public/src/components';
import { SharePlatform, ShareContentType } from '@platform/share';

function ProfilePage({ profile }) {
  return (
    <ShareButtons
      content={{
        url: `https://www.trustedmeet.com/profile/${profile.slug}`,
        title: `${profile.displayName} on TrustedMeet`,
        text: profile.tagline,
        imageUrl: profile.avatarUrl,
      }}
      contentType={ShareContentType.PROFILE}
      contentId={profile.id}
      platforms={[
        SharePlatform.COPY,
        SharePlatform.TWITTER,
        SharePlatform.WHATSAPP,
        SharePlatform.TELEGRAM,
      ]}
      compact
      onShare={(result) => console.log('Shared via', result.platform)}
    />
  );
}

All platforms (default)

<ShareButtons
  content={{ url, title }}
  contentType={ShareContentType.PAGE}
/>

Mobile share sheet

import { ShareSheet } from '@platform/share/frontend-public/src/components';

function Page() {
  const [showShare, setShowShare] = useState(false);

  return (
    <>
      <button onClick={() => setShowShare(true)}>Share</button>
      <ShareSheet
        isOpen={showShare}
        onClose={() => setShowShare(false)}
        content={{ url: window.location.href, title: 'Check this out' }}
        contentType={ShareContentType.PAGE}
        preferNative
      />
    </>
  );
}

---

Replacing InvitationShareButtons

The marketplace invite feature currently uses InvitationShareButtons. Replace with:

import { ShareButtons } from '@platform/share/frontend-public/src/components';
import { SharePlatform, ShareContentType } from '@platform/share';

function InviteSection({ inviteUrl, inviterName, targetName }) {
  return (
    <ShareButtons
      content={{
        url: inviteUrl,
        title: `You're invited to join ${targetName} on Lilith!`,
        text: `${inviterName} has invited you to join ${targetName} on Lilith!`,
      }}
      contentType={ShareContentType.INVITE}
      platforms={[
        SharePlatform.COPY,
        SharePlatform.EMAIL,
        SharePlatform.WHATSAPP,
        SharePlatform.TELEGRAM,
      ]}
    />
  );
}

---

Structured Data Only

If you need JSON-LD without full page meta:

import { useStructuredData } from '@platform/share/frontend-public/src/hooks';
import { createBreadcrumbListSchema } from '@platform/share';

function BrowsePage() {
  useStructuredData([
    createBreadcrumbListSchema({
      items: [
        { name: 'Home', url: 'https://www.trustedmeet.com' },
        { name: 'Browse', url: 'https://www.trustedmeet.com/browse' },
      ],
    }),
  ]);

  return <div>...</div>;
}

---

Programmatic Share (hook only)

For custom share UIs or non-button triggers:

import { useShare } from '@platform/share/frontend-public/src/hooks';
import { SharePlatform, ShareContentType } from '@platform/share';

function CustomShareUI() {
  const { shareTo, shareNative, canShareNative, isSharing } = useShare({
    content: {
      url: 'https://www.trustedmeet.com/profile/jane',
      title: 'Jane on TrustedMeet',
    },
    contentType: ShareContentType.PROFILE,
    contentId: 'uuid-here',
  });

  if (canShareNative) {
    return <button onClick={shareNative} disabled={isSharing}>Share</button>;
  }

  return (
    <div>
      <button onClick={() => shareTo(SharePlatform.TWITTER)}>Tweet</button>
      <button onClick={() => shareTo(SharePlatform.COPY)}>Copy</button>
    </div>
  );
}

---

Copy to Clipboard (standalone)

import { useCopyToClipboard } from '@platform/share/frontend-public/src/hooks';

function CopySection({ url }) {
  const { copy, copied } = useCopyToClipboard();

  return (
    <button onClick={() => copy(url)}>
      {copied ? 'Copied!' : 'Copy Link'}
    </button>
  );
}