web/src/layouts/ModuleLayout.astro - main - AlexandrNarbaev/ThePath

web/src/layouts/ModuleLayout.astro
84 строки4 KB
AlexandrNarbaev
feat(social): add Reactions, ShareButtons, Comments to module pages
04 июн 2026, 23:51
04 июн 2026, 23:512c9aada
---
import BaseLayout from './BaseLayout.astro';
import Sidebar from '../components/Sidebar.astro';
import ModuleMeta from '../components/module/ModuleMeta.astro';
import ModuleBreadcrumb from '../components/module/ModuleBreadcrumb.astro';
import ProgressBar from '../components/progress/ProgressBar';
import BookmarkButton from '../components/progress/BookmarkButton';
import ModuleNav from '../components/module/ModuleNav.astro';
import TableOfContents from '../components/module/TableOfContents.astro';
import { t, type Lang } from '../i18n/ui';
import Reactions from '../components/social/Reactions';
import ShareButtons from '../components/social/ShareButtons.astro';
import Comments from '../components/social/Comments.astro';

interface Props {
  lang: Lang;
  title: string;
  subtitle?: string;
  moduleNumber: number;
  version?: string;
  headings?: { depth: number; text: string; slug: string }[];
}

const { lang, title, subtitle, moduleNumber, version, headings = [] } = Astro.props;
const base = '/ThePath';
---

<BaseLayout lang={lang} title={title} ogType="article">
  <div class="page-layout">
    <Sidebar lang={lang} currentModule={moduleNumber} />
    <article class="content">
      <ProgressBar module_number={moduleNumber} lang={lang} client:load />
      <ModuleMeta lang={lang} number={moduleNumber} version={version} />
      <ModuleBreadcrumb lang={lang} title={title} />
      <div class="module-header">
        <h1>{title}</h1>
        {subtitle && <p class="module-subtitle">{subtitle}</p>}
      </div>
      <BookmarkButton module_number={moduleNumber} lang={lang} client:load />
      <TableOfContents headings={headings} lang={lang} />
      <div class="prose">
        <slot />
      </div>
      <ModuleNav lang={lang} current={moduleNumber} />
      <script type="application/ld+json" set:html={JSON.stringify([
        {
          '@context': 'https://schema.org',
          '@type': 'BreadcrumbList',
          itemListElement: [
            { '@type': 'ListItem', position: 1, name: t('nav.home', lang), item: `${base}/${lang}/` },
            { '@type': 'ListItem', position: 2, name: title },
          ],
        },
        {
          '@context': 'https://schema.org',
          '@type': 'Article',
          headline: title,
          description: subtitle || '',
          inLanguage: lang,
        },
      ])} />
      <Reactions lang={lang} pageId={`module-${moduleNumber}`} client:load />
      <ShareButtons lang={lang} title={title} />
      <Comments lang={lang} />
    </article>
  </div>
</BaseLayout>

<style>
  .module-header { margin-bottom: 1.5rem; }
  .module-subtitle { font-size: 1.1rem; color: var(--color-text-secondary); }
  .prose { margin-top: 1rem; }
  .prose :global(h1) { font-size: 2rem; }
  .prose :global(h2) { border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; }
  .prose :global(img) { max-width: 100%; border-radius: 8px; }
  .prose :global(blockquote) { background: var(--color-bg-secondary); border-radius: 0 8px 8px 0; }
  .prose :global(table) { font-size: 0.9rem; }
  .prose :global(th) { font-size: 0.85rem; }
  .reactions { display: flex; align-items: center; gap: 0.25rem; padding: 1rem 0; border-top: 1px solid var(--color-border); margin-top: 1rem; }
  .reactions-title { font-size: 0.8rem; font-weight: 600; color: var(--color-text-secondary); margin-right: 0.5rem; }
  .reaction-btn { background: none; border: 1px solid var(--color-border); border-radius: 8px; padding: 0.3rem 0.6rem; cursor: pointer; font-size: 1.1rem; transition: all 0.2s; }
  .reaction-btn:hover { border-color: var(--color-accent); }
  .reaction-btn.active { border-color: var(--color-gold); background: rgba(230, 193, 123, 0.1); }
</style>