@fayz-ai/plugin-linkinbio 0.10.0 → 0.10.2

package/src/public/blocks/BioSection.tsx

@@ -1,66 +0,0 @@
-import type { BioSection as BioSectionType } from '../../types';
-import { renderMarkdown } from '../utils';
-
-interface Props {
-  section: BioSectionType;
-}
-
-export default function BioSection({ section }: Props) {
-  const hasImage = section.imageUrl && section.imagePosition !== 'none';
-  const isTop = section.imagePosition === 'top';
-  const isSide = section.imagePosition === 'left' || section.imagePosition === 'right';
-  const isRight = section.imagePosition === 'right';
-
-  return (
-    <section className="py-16 md:py-24 px-6" id={section.id}>
-      <div className="max-w-4xl mx-auto">
-        {section.title && (
-          <h2
-            className="text-3xl md:text-4xl font-bold mb-8"
-            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-          >
-            {section.title}
-          </h2>
-        )}
-
-        <div className={isSide && hasImage ? `grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-start` : ''}>
-          {hasImage && isTop && (
-            <img
-              src={section.imageUrl}
-              alt=""
-              className="w-full max-h-96 object-cover mb-8"
-              style={{ borderRadius: 'var(--pk-radius)' }}
-              loading="lazy"
-            />
-          )}
-
-          {hasImage && isSide && !isRight && (
-            <img
-              src={section.imageUrl}
-              alt=""
-              className="w-full aspect-[3/4] object-cover"
-              style={{ borderRadius: 'var(--pk-radius)' }}
-              loading="lazy"
-            />
-          )}
-
-          <div
-            className="prose prose-invert max-w-none text-base md:text-lg leading-relaxed [&_p]:mb-4 [&_strong]:font-semibold [&_a]:underline [&_a]:decoration-[var(--pk-primary)]"
-            style={{ color: 'var(--pk-muted)' }}
-            dangerouslySetInnerHTML={{ __html: renderMarkdown(section.content) }}
-          />
-
-          {hasImage && isSide && isRight && (
-            <img
-              src={section.imageUrl}
-              alt=""
-              className="w-full aspect-[3/4] object-cover"
-              style={{ borderRadius: 'var(--pk-radius)' }}
-              loading="lazy"
-            />
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/CTASection.tsx

@@ -1,56 +0,0 @@
-import type { CTASection as CTASectionType } from '../../types';
-import { renderMarkdown } from '../utils';
-
-interface Props {
-  section: CTASectionType;
-}
-
-export default function CTASection({ section }: Props) {
-  return (
-    <section className="py-24 md:py-36 px-6 text-center" id={section.id}>
-      <div className="max-w-2xl mx-auto">
-        {section.title && (
-          <h2
-            className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6"
-            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-          >
-            {section.title}
-          </h2>
-        )}
-
-        {section.content && (
-          <div
-            className="text-base md:text-lg mb-10 [&_p]:mb-2"
-            style={{ color: 'var(--pk-muted)' }}
-            dangerouslySetInnerHTML={{ __html: renderMarkdown(section.content) }}
-          />
-        )}
-
-        <div className="flex flex-col sm:flex-row items-center justify-center gap-5">
-          {section.ctaButtons.map((btn) => {
-            const isPrimary = btn.variant === 'primary';
-            const isOutline = btn.variant === 'outline';
-            return (
-              <a
-                key={btn.url}
-                href={btn.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center justify-center px-10 py-4 text-base font-bold tracking-[0.1em] uppercase transition-all duration-300 hover:scale-105 min-w-[200px]"
-                style={{
-                  backgroundColor: isPrimary ? 'var(--pk-primary)' : isOutline ? 'transparent' : 'var(--pk-secondary)',
-                  color: isPrimary ? 'var(--pk-bg)' : 'var(--pk-text)',
-                  border: isOutline ? '2px solid rgba(255,255,255,0.2)' : 'none',
-                  borderRadius: '9999px',
-                  boxShadow: isPrimary ? '0 8px 32px rgba(0,0,0,0.3)' : 'none',
-                }}
-              >
-                {btn.label}
-              </a>
-            );
-          })}
-        </div>
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/EmbedSection.tsx

@@ -1,53 +0,0 @@
-import type { EmbedSection as EmbedSectionType } from '../../types';
-
-interface Props {
-  section: EmbedSectionType;
-}
-
-export default function EmbedSection({ section }: Props) {
-  const isVideo = section.aspectRatio === '16:9' || section.embedType === 'youtube';
-  const height = section.height ?? (isVideo ? undefined : 352);
-
-  return (
-    <section className="py-16 md:py-24 px-6" id={section.id}>
-      <div className="max-w-4xl mx-auto">
-        {section.title && (
-          <h2
-            className="text-3xl md:text-4xl font-bold mb-8"
-            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-          >
-            {section.title}
-          </h2>
-        )}
-
-        {section.embedHtml && section.embedType === 'custom' ? (
-          <div
-            className="overflow-hidden"
-            style={{ borderRadius: 'var(--pk-radius)' }}
-            dangerouslySetInnerHTML={{ __html: section.embedHtml }}
-          />
-        ) : isVideo ? (
-          <div className="aspect-video overflow-hidden" style={{ borderRadius: 'var(--pk-radius)' }}>
-            <iframe
-              src={section.embedUrl}
-              className="h-full w-full"
-              allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
-              loading="lazy"
-              title={section.title ?? 'Embed'}
-            />
-          </div>
-        ) : (
-          <div className="overflow-hidden" style={{ borderRadius: 'var(--pk-radius)', height }}>
-            <iframe
-              src={section.embedUrl}
-              className="w-full h-full"
-              allow="autoplay; clipboard-write; encrypted-media; fullscreen"
-              loading="lazy"
-              title={section.title ?? 'Embed'}
-            />
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/FeaturedBlock.tsx

@@ -1,70 +0,0 @@
-import { ArrowUpRight } from 'lucide-react';
-import type { FeaturedSection } from '../../types';
-
-interface Props {
-  section: FeaturedSection;
-}
-
-export default function FeaturedBlock({ section }: Props) {
-  return (
-    <section className="py-6" id={section.id}>
-      {section.title && (
-        <h2
-          className="text-xl md:text-2xl font-bold mb-4 px-1"
-          style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-        >
-          {section.title}
-        </h2>
-      )}
-      <a
-        href={section.url}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="group flex items-center gap-4 p-4 overflow-hidden transition-all duration-300 hover:scale-[1.01]"
-        style={{
-          borderRadius: 'var(--pk-radius)',
-          border: '1px solid rgba(255,255,255,0.09)',
-          background:
-            'linear-gradient(135deg, color-mix(in srgb, var(--pk-primary) 14%, transparent), rgba(255,255,255,0.03) 55%)',
-        }}
-      >
-        {section.imageUrl && (
-          <div
-            className="shrink-0 w-20 h-20 overflow-hidden"
-            style={{ borderRadius: 'calc(var(--pk-radius) - 4px)' }}
-          >
-            <img
-              src={section.imageUrl}
-              alt={section.headline}
-              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
-              loading="lazy"
-            />
-          </div>
-        )}
-        <div className="min-w-0 flex-1">
-          <p className="text-base font-bold leading-tight" style={{ color: 'var(--pk-text)', fontFamily: 'var(--pk-font-heading)' }}>
-            {section.headline}
-          </p>
-          {section.subtitle && (
-            <p className="text-xs mt-1 line-clamp-2" style={{ color: 'var(--pk-muted)' }}>
-              {section.subtitle}
-            </p>
-          )}
-          {section.ctaLabel && (
-            <span
-              className="inline-flex items-center gap-1 mt-2 px-3 py-1 text-xs font-semibold rounded-full"
-              style={{ backgroundColor: 'var(--pk-primary)', color: 'var(--pk-bg)' }}
-            >
-              {section.ctaLabel}
-            </span>
-          )}
-        </div>
-        <ArrowUpRight
-          size={20}
-          className="shrink-0 opacity-50 group-hover:opacity-90 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all"
-          style={{ color: 'var(--pk-text)' }}
-        />
-      </a>
-    </section>
-  );
-}

package/src/public/blocks/GallerySection.tsx

@@ -1,148 +0,0 @@
-import { useState } from 'react';
-import type { GallerySection as GallerySectionType, BioMediaItem } from '../../types';
-
-interface Props {
-  section: GallerySectionType;
-}
-
-function isInstagramEmbed(item: BioMediaItem) {
-  return item.url.includes('instagram.com');
-}
-
-function getInstagramEmbedUrl(url: string) {
-  // Convert instagram reel/post URL to embed URL
-  const match = url.match(/instagram\.com\/(reel|p)\/([^/?]+)/);
-  if (match) return `https://www.instagram.com/${match[1]}/${match[2]}/embed`;
-  return url;
-}
-
-function MediaItem({ item, index, cols, isFeatured, onImageClick }: {
-  item: BioMediaItem;
-  index: number;
-  cols: number;
-  isFeatured: boolean;
-  onImageClick: (i: number) => void;
-}) {
-  if (isInstagramEmbed(item)) {
-    return (
-      <div
-        className={`overflow-hidden ${isFeatured && index === 0 ? 'col-span-2' : ''}`}
-        style={{ borderRadius: 'var(--pk-radius)' }}
-      >
-        <iframe
-          src={getInstagramEmbedUrl(item.url)}
-          className="w-full border-0"
-          style={{ minHeight: cols <= 2 ? '500px' : '420px' }}
-          loading="lazy"
-          // @ts-expect-error React wants lowercase for custom DOM attributes
-          allowtransparency="true"
-          allow="encrypted-media"
-          title={item.alt ?? 'Instagram'}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <img
-      src={item.url}
-      alt={item.alt ?? ''}
-      className={`w-full object-cover cursor-pointer hover:opacity-90 transition-opacity ${
-        isFeatured && index === 0 ? 'col-span-2 aspect-[16/9]' : 'aspect-square'
-      }`}
-      style={{ borderRadius: 'var(--pk-radius)' }}
-      loading="lazy"
-      onClick={() => onImageClick(index)}
-    />
-  );
-}
-
-export default function GallerySection({ section }: Props) {
-  const [lightboxIdx, setLightboxIdx] = useState<number | null>(null);
-  const cols = section.columns ?? 3;
-  const isFeatured = section.layout === 'featured-grid';
-  const isCarousel = section.layout === 'carousel';
-
-  // Only images for lightbox navigation
-  const imageItems = section.media.filter((m) => !isInstagramEmbed(m));
-
-  return (
-    <section className="py-16 md:py-24 px-6" id={section.id}>
-      <div className="max-w-5xl mx-auto">
-        {section.title && (
-          <h2
-            className="text-3xl md:text-4xl font-bold mb-8"
-            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-          >
-            {section.title}
-          </h2>
-        )}
-
-        {isCarousel ? (
-          <div className="flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4 -mx-6 px-6 scrollbar-hide">
-            {section.media.map((item, i) => (
-              <div key={i} className="flex-none w-72 md:w-96 snap-center">
-                <MediaItem item={item} index={i} cols={cols} isFeatured={false} onImageClick={setLightboxIdx} />
-              </div>
-            ))}
-          </div>
-        ) : (
-          <div
-            className={`grid gap-3 md:gap-4 ${
-              isFeatured
-                ? 'grid-cols-2'
-                : cols === 2
-                  ? 'grid-cols-1 sm:grid-cols-2'
-                  : cols === 4
-                    ? 'grid-cols-2 md:grid-cols-4'
-                    : 'grid-cols-2 md:grid-cols-3'
-            }`}
-          >
-            {section.media.map((item, i) => (
-              <MediaItem key={i} item={item} index={i} cols={cols} isFeatured={isFeatured} onImageClick={setLightboxIdx} />
-            ))}
-          </div>
-        )}
-
-        {/* Lightbox — images only */}
-        {lightboxIdx !== null && imageItems[lightboxIdx] && (
-          <div
-            className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4"
-            onClick={() => setLightboxIdx(null)}
-          >
-            <button
-              className="absolute top-4 right-4 text-white text-3xl font-light hover:opacity-70 z-10"
-              onClick={() => setLightboxIdx(null)}
-            >
-              &times;
-            </button>
-            <button
-              className="absolute left-4 top-1/2 -translate-y-1/2 text-white text-4xl font-light hover:opacity-70 z-10"
-              onClick={(e) => {
-                e.stopPropagation();
-                setLightboxIdx((lightboxIdx - 1 + imageItems.length) % imageItems.length);
-              }}
-            >
-              &#8249;
-            </button>
-            <button
-              className="absolute right-4 top-1/2 -translate-y-1/2 text-white text-4xl font-light hover:opacity-70 z-10"
-              onClick={(e) => {
-                e.stopPropagation();
-                setLightboxIdx((lightboxIdx + 1) % imageItems.length);
-              }}
-            >
-              &#8250;
-            </button>
-            <img
-              src={imageItems[lightboxIdx].url}
-              alt={imageItems[lightboxIdx].alt ?? ''}
-              className="max-h-[85vh] max-w-[90vw] object-contain"
-              onClick={(e) => e.stopPropagation()}
-            />
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/HeroSection.tsx

@@ -1,107 +0,0 @@
-import type { HeroSection as HeroSectionType, BioIdentity, BioBranding } from '../../types';
-
-interface Props {
-  section: HeroSectionType;
-  identity: BioIdentity;
-  branding: BioBranding;
-}
-
-export default function HeroSection({ section, identity, branding }: Props) {
-  const hasLogo = section.showLogo && branding.logoUrl;
-
-  return (
-    <section
-      className="relative flex flex-col items-center justify-center min-h-screen overflow-hidden"
-      id={section.id}
-    >
-      {/* Background image (skipped when no image — overlay carries the visual) */}
-      <div className="absolute inset-0">
-        {section.backgroundImageUrl && (
-          <img
-            src={section.backgroundImageUrl}
-            alt={identity.name}
-            className="h-full w-full object-cover"
-          />
-        )}
-        {section.overlayGradient && (
-          <div className="absolute inset-0" style={{ background: section.overlayGradient }} />
-        )}
-      </div>
-
-      {/* Content — always centered */}
-      <div className="relative z-10 flex flex-col items-center text-center px-6 pt-20 pb-24">
-        {hasLogo ? (
-          <img
-            src={branding.logoUrl}
-            alt={`${identity.name} logo`}
-            className="mb-6 h-48 w-auto md:h-64 lg:h-80 object-contain drop-shadow-2xl"
-          />
-        ) : (
-          <h1
-            className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight mb-4 drop-shadow-lg"
-            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-          >
-            {identity.name}
-          </h1>
-        )}
-
-        {identity.tagline && (
-          <p
-            className="text-lg md:text-xl mb-6 max-w-lg opacity-70"
-            style={{ color: 'var(--pk-text)' }}
-          >
-            {identity.tagline}
-          </p>
-        )}
-
-        {section.showGenres && identity.genres.length > 0 && (
-          <div className="flex flex-wrap justify-center gap-2 mb-4">
-            {identity.genres.map((genre) => (
-              <span
-                key={genre}
-                className="px-4 py-1.5 text-sm font-semibold backdrop-blur-sm"
-                style={{
-                  backgroundColor: 'rgba(255,255,255,0.08)',
-                  color: 'var(--pk-primary)',
-                  border: '1px solid rgba(255,255,255,0.12)',
-                  borderRadius: '9999px',
-                }}
-              >
-                {genre}
-              </span>
-            ))}
-          </div>
-        )}
-
-        {section.showLocation && identity.location && (
-          <p className="text-sm mt-2 opacity-50" style={{ color: 'var(--pk-text)' }}>
-            {identity.location}
-          </p>
-        )}
-
-        {section.ctaText && section.ctaUrl && (
-          <a
-            href={section.ctaUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="mt-8 inline-block px-10 py-4 font-bold text-lg tracking-wider transition-transform hover:scale-105"
-            style={{
-              backgroundColor: 'var(--pk-primary)',
-              color: 'var(--pk-bg)',
-              borderRadius: '9999px',
-            }}
-          >
-            {section.ctaText}
-          </a>
-        )}
-      </div>
-
-      {/* Scroll hint */}
-      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 animate-bounce opacity-40">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--pk-text)' }}>
-          <path d="M12 5v14M5 12l7 7 7-7" />
-        </svg>
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/LinksBlock.tsx

@@ -1,80 +0,0 @@
-import { ChevronRight } from 'lucide-react';
-import type { LinksSection, LinkCardItem } from '../../types';
-import { PlatformIcon } from '../components/PlatformIcon';
-
-interface Props {
-  section: LinksSection;
-}
-
-function LinkCard({ item }: { item: LinkCardItem }) {
-  return (
-    <a
-      href={item.url}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="group flex items-center gap-4 p-3 transition-all duration-200 hover:scale-[1.015] active:scale-[0.99]"
-      style={{
-        backgroundColor: 'rgba(255,255,255,0.05)',
-        border: '1px solid rgba(255,255,255,0.07)',
-        borderRadius: 'var(--pk-radius)',
-      }}
-    >
-      <div
-        className="shrink-0 flex items-center justify-center w-12 h-12 overflow-hidden"
-        style={{ borderRadius: 'calc(var(--pk-radius) - 4px)', backgroundColor: 'rgba(255,255,255,0.06)' }}
-      >
-        {item.thumbnailUrl ? (
-          <img src={item.thumbnailUrl} alt="" className="w-full h-full object-cover" loading="lazy" />
-        ) : (
-          <PlatformIcon platform={item.icon ?? 'custom'} size={20} style={{ color: 'var(--pk-primary)' }} />
-        )}
-      </div>
-      <div className="min-w-0 flex-1">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-semibold truncate" style={{ color: 'var(--pk-text)' }}>
-            {item.title}
-          </span>
-          {item.badge && (
-            <span
-              className="text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full shrink-0"
-              style={{ backgroundColor: 'var(--pk-primary)', color: 'var(--pk-bg)' }}
-            >
-              {item.badge}
-            </span>
-          )}
-        </div>
-        {item.subtitle && (
-          <p className="text-xs truncate mt-0.5" style={{ color: 'var(--pk-muted)' }}>
-            {item.subtitle}
-          </p>
-        )}
-      </div>
-      <ChevronRight
-        size={18}
-        className="shrink-0 opacity-40 group-hover:opacity-80 group-hover:translate-x-0.5 transition-all"
-        style={{ color: 'var(--pk-text)' }}
-      />
-    </a>
-  );
-}
-
-export default function LinksBlock({ section }: Props) {
-  const isGrid = section.layout === 'grid';
-  return (
-    <section className="py-6" id={section.id}>
-      {section.title && (
-        <h2
-          className="text-xl md:text-2xl font-bold mb-4 px-1"
-          style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-        >
-          {section.title}
-        </h2>
-      )}
-      <div className={isGrid ? 'grid grid-cols-2 gap-3' : 'flex flex-col gap-3'}>
-        {section.links.map((item, i) => (
-          <LinkCard key={item.url + i} item={item} />
-        ))}
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/MusicReleasesBlock.tsx

@@ -1,83 +0,0 @@
-import { Play } from 'lucide-react';
-import type { MusicReleasesSection, MusicReleaseItem } from '../../types';
-import { Carousel } from '../components/Carousel';
-
-interface Props {
-  section: MusicReleasesSection;
-}
-
-function ReleaseCard({ item, cta, wide }: { item: MusicReleaseItem; cta: string; wide?: boolean }) {
-  return (
-    <a
-      href={item.url}
-      target="_blank"
-      rel="noopener noreferrer"
-      className={`group ${wide ? 'flex-none w-40 snap-start' : ''} flex flex-col transition-transform hover:scale-[1.02]`}
-    >
-      <div
-        className="relative w-full aspect-square overflow-hidden"
-        style={{ borderRadius: 'var(--pk-radius)', backgroundColor: 'rgba(255,255,255,0.05)' }}
-      >
-        <img src={item.artworkUrl} alt={item.title} className="w-full h-full object-cover" loading="lazy" />
-        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
-          style={{ background: 'rgba(0,0,0,0.35)' }}
-        >
-          <span
-            className="flex items-center justify-center w-11 h-11 rounded-full"
-            style={{ backgroundColor: 'var(--pk-primary)', color: 'var(--pk-bg)' }}
-          >
-            <Play size={20} fill="currentColor" />
-          </span>
-        </div>
-      </div>
-      <div className="mt-2 px-0.5">
-        <p className="text-sm font-semibold truncate" style={{ color: 'var(--pk-text)' }}>
-          {item.title}
-        </p>
-        {item.artist && (
-          <p className="text-xs truncate" style={{ color: 'var(--pk-muted)' }}>
-            {item.artist}
-          </p>
-        )}
-        <span
-          className="inline-flex items-center gap-1 mt-1.5 px-3 py-1 text-xs font-semibold rounded-full"
-          style={{ backgroundColor: 'rgba(255,255,255,0.08)', color: 'var(--pk-text)' }}
-        >
-          <Play size={11} fill="currentColor" /> {cta}
-        </span>
-      </div>
-    </a>
-  );
-}
-
-export default function MusicReleasesBlock({ section }: Props) {
-  const cta = section.ctaLabel ?? 'Ouvir';
-  if (section.layout === 'grid') {
-    return (
-      <section className="py-6" id={section.id}>
-        {section.title && (
-          <h2
-            className="text-xl md:text-2xl font-bold mb-4 px-1"
-            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-          >
-            {section.title}
-          </h2>
-        )}
-        <div className="grid grid-cols-2 gap-4">
-          {section.releases.map((item, i) => (
-            <ReleaseCard key={item.url + i} item={item} cta={cta} />
-          ))}
-        </div>
-      </section>
-    );
-  }
-  return (
-    <section className="py-6" id={section.id}>
-      <Carousel title={section.title}>
-        {section.releases.map((item, i) => (
-          <ReleaseCard key={item.url + i} item={item} cta={cta} wide />
-        ))}
-      </Carousel>
-    </section>
-  );
-}