@dsbasko/cookbook-engine 0.1.0

package/src/components/HomePage/HomePage.tsx

@@ -0,0 +1,295 @@
+'use client';
+
+import { useMemo } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useGate } from '@/components/GateProvider';
+import { LockIcon } from '@/components/ProgramDrawer/LockIcon';
+import {
+  flattenLessons,
+  getTotalLessons,
+  type Course,
+} from '@/lib/course';
+import {
+  formatDurationHm,
+  formatLessonCount,
+  formatModuleCount,
+  parseDurationMin,
+} from '@/lib/format';
+import { openProgramDrawer } from '@/lib/program-drawer';
+import { lessonKey } from '@/lib/progress';
+import { navigateToFrontierHref } from '@/lib/frontier-link';
+import { useLang, useT } from '@/lib/use-i18n';
+import styles from './HomePage.module.css';
+
+type HomePageProps = {
+  course: Course;
+  level: string;
+};
+
+export function HomePage({ course, level }: HomePageProps) {
+  const totalLessons = getTotalLessons(course);
+  const router = useRouter();
+  const { basePath } = useGate();
+  const t = useT();
+  const lang = useLang();
+  // Hero headline is the most brand-specific surface; prefer course.brand.hero
+  // (already resolved to the active lang by parseCourse) and fall back to the
+  // i18n defaults so an un-branded course still renders the Kafka headline.
+  const hero = course.brand?.hero ?? {
+    lead: t.heroTitleLead,
+    accent: t.heroTitleAccent,
+    tail: t.heroTitleTail,
+  };
+  const totalDurationMin = useMemo(
+    () =>
+      course.modules.reduce(
+        (sum, mod) =>
+          sum + mod.lessons.reduce((s, l) => s + parseDurationMin(l.duration), 0),
+        0,
+      ),
+    [course],
+  );
+
+  // SSR baseline: render the "fresh user" shape — 0% progress, CTA points at
+  // the first lesson, "Начать с первого урока" copy, module rows say "не
+  // начато". The inline gate-paint script reads localStorage before first
+  // paint and rewrites href + textContent + data-* attributes for the real
+  // state, so the user with progress doesn't see this baseline flash.
+  const firstEntry = useMemo(() => flattenLessons(course)[0] ?? null, [course]);
+  const firstHref = firstEntry
+    ? `/${lang}/${firstEntry.moduleId}/${firstEntry.lesson.slug}`
+    : '#';
+
+  return (
+    <div className={styles.page}>
+      <section className={styles.hero}>
+        <div>
+          <h1 className={styles.heroTitle}>
+            {hero.lead}{' '}
+            <span className={styles.heroTitleAccent}>{hero.accent}</span>{' '}
+            {hero.tail}
+          </h1>
+          <p className={styles.heroLead}>{collapseWhitespace(course.description)}</p>
+          <div
+            className={styles.ctaRow}
+            data-cta-frontier="global"
+            data-cta-state="not-started"
+            suppressHydrationWarning
+          >
+            {/* Two CTA variants: gate-paint flips data-cta-state and CSS
+                shows exactly one. Pre-paint baseline = "not-started" so the
+                SSR HTML reads the "start from the first lesson" copy. */}
+            <Link
+              href={firstHref}
+              className={`${styles.btn} ${styles.btnPrimary}`}
+              data-cta-variant="not-started"
+            >
+              {t.startFromFirst}
+              <span className={styles.btnArrow}>→</span>
+            </Link>
+            <Link
+              href={firstHref}
+              className={`${styles.btn} ${styles.btnPrimary}`}
+              data-cta-variant="in-progress"
+              data-cta-frontier-link
+              suppressHydrationWarning
+              onClick={(e) => navigateToFrontierHref(e, router, basePath)}
+            >
+              {t.continueLessonPrefix}{' '}
+              <span data-cta-frontier-num suppressHydrationWarning>
+                1
+              </span>
+              <span className={styles.btnArrow}>→</span>
+            </Link>
+            {/* "Start over" only visible in in-progress state. */}
+            <Link
+              href={firstHref}
+              className={`${styles.btn} ${styles.btnSecondary}`}
+              data-cta-variant="in-progress"
+            >
+              {t.startFromScratch}
+            </Link>
+            <button
+              type="button"
+              className={`${styles.btn} ${styles.btnGhost}`}
+              onClick={openProgramDrawer}
+            >
+              {t.programCourse}
+            </button>
+          </div>
+          {/* Frontier hint — only visible once gate-paint marks the page as
+              having progress. Lesson title is rewritten in-place. */}
+          <div
+            className={styles.nextHint}
+            data-frontier-hint
+            data-hint-state="hidden"
+            suppressHydrationWarning
+          >
+            <span className={styles.nextHintArrow}>↳</span>{' '}
+            <span
+              className={styles.nextHintLesson}
+              data-frontier-hint-lesson
+              suppressHydrationWarning
+            >
+              {firstEntry?.lesson.title ?? ''}
+            </span>
+          </div>
+        </div>
+
+        <aside
+          className={styles.statsCard}
+          aria-label={t.progressSummary}
+          data-progress-scope="global"
+          data-progress-state="not-started"
+          suppressHydrationWarning
+        >
+          <div className={styles.statsProgress}>
+            <div className={styles.statsProgressRow}>
+              <span className={styles.statsPct}>
+                <span data-progress-pct suppressHydrationWarning>
+                  0
+                </span>
+                <span className={styles.statsPctUnit}>%</span>
+              </span>
+              <span className={styles.statsOf}>
+                <span data-progress-count suppressHydrationWarning>
+                  0
+                </span>{' '}
+                / {formatLessonCount(totalLessons, lang)}
+              </span>
+            </div>
+            <div className={styles.statsBar} aria-hidden="true">
+              <span
+                className={styles.statsBarFill}
+                data-progress-bar
+                style={{ width: '0%' }}
+                suppressHydrationWarning
+              />
+            </div>
+          </div>
+          <dl className={styles.statsGrid}>
+            <div>
+              <dt className={styles.statsLabel}>{t.modulesLabel}</dt>
+              <dd className={styles.statsValue}>{course.modules.length}</dd>
+            </div>
+            <div>
+              <dt className={styles.statsLabel}>{t.lessonsLabel}</dt>
+              <dd className={styles.statsValue}>{totalLessons}</dd>
+            </div>
+            <div>
+              <dt className={styles.statsLabel}>{t.durationLabel}</dt>
+              <dd className={styles.statsValue}>{formatDurationHm(totalDurationMin, lang)}</dd>
+            </div>
+            <div>
+              <dt className={styles.statsLabel}>{t.stackLabel}</dt>
+              <dd className={styles.statsValue}>{level}</dd>
+            </div>
+          </dl>
+        </aside>
+      </section>
+
+      <header className={styles.sectionHead}>
+        <div>
+          <div className={styles.sectionEyebrow}>/ contents</div>
+          <h2 className={styles.sectionTitle}>{t.programCourse}</h2>
+        </div>
+        <div className={styles.sectionTools}>
+          {formatModuleCount(course.modules.length, lang)} ·{' '}
+          {formatLessonCount(totalLessons, lang)}
+        </div>
+      </header>
+
+      <ol className={styles.modules}>
+        {course.modules.map((mod, mi) => {
+          const total = mod.lessons.length;
+          const moduleDurationMin = mod.lessons.reduce(
+            (s, l) => s + parseDurationMin(l.duration),
+            0,
+          );
+          // Module is treated as a single gate target via its first lesson.
+          // CSV of lesson keys feeds the gate-paint script so it can paint
+          // per-module count / percent / state in this row.
+          const moduleKey = mod.lessons[0]
+            ? lessonKey(mod.id, mod.lessons[0].slug)
+            : undefined;
+          const moduleKeysCsv = mod.lessons
+            .map((l) => lessonKey(mod.id, l.slug))
+            .join(',');
+
+          return (
+            <li key={mod.id} className={styles.moduleItem}>
+              <Link
+                href={`/${lang}/${mod.id}`}
+                className={styles.moduleRow}
+                data-lesson-key={moduleKey}
+                data-progress-scope="module"
+                data-progress-keys={moduleKeysCsv}
+                data-progress-state="not-started"
+                onClick={(e) => {
+                  if (e.currentTarget.getAttribute('data-locked') === 'true') {
+                    e.preventDefault();
+                  }
+                }}
+                title={t.moduleLockTitle}
+                suppressHydrationWarning
+              >
+                <div className={styles.moduleNum}>
+                  {String(mi + 1).padStart(2, '0')}
+                </div>
+                <div className={styles.moduleText}>
+                  <h3 className={styles.moduleTitle}>{mod.title}</h3>
+                  <p className={styles.moduleDesc}>{collapseWhitespace(mod.description)}</p>
+                </div>
+                <div className={styles.moduleProgress} data-module-progress>
+                  <div className={styles.mpRow}>
+                    {/* All three labels live in the DOM; CSS shows exactly
+                        one based on the row's data-progress-state. Gate-paint
+                        flips that attribute without re-rendering React. */}
+                    <span className={styles.mpStatus}>
+                      <span data-status="not-started">{t.statusNotStarted}</span>
+                      <span data-status="in-progress">{t.statusInProgress}</span>
+                      <span data-status="complete">{t.statusComplete}</span>
+                    </span>
+                    <span className={styles.mpPct}>
+                      <span data-progress-count suppressHydrationWarning>
+                        0
+                      </span>
+                      /{total}
+                    </span>
+                  </div>
+                  <div className={styles.mpBar} aria-hidden="true">
+                    <span
+                      className={styles.mpFill}
+                      data-progress-bar
+                      style={{ width: '0%' }}
+                      suppressHydrationWarning
+                    />
+                  </div>
+                </div>
+                <div className={styles.moduleMeta}>
+                  <span className={styles.mmLessons}>
+                    {formatLessonCount(total, lang)}
+                  </span>
+                  <span className={styles.mmDuration}>
+                    {formatDurationHm(moduleDurationMin, lang)}
+                  </span>
+                </div>
+                <div className={styles.arrowCell} aria-hidden="true">
+                  <span className={styles.arrowOpen}>→</span>
+                  <span className={styles.arrowLocked}>
+                    <LockIcon />
+                  </span>
+                </div>
+              </Link>
+            </li>
+          );
+        })}
+      </ol>
+    </div>
+  );
+}
+
+function collapseWhitespace(text: string): string {
+  return text.replace(/\s+/g, ' ').trim();
+}

package/src/components/HomePage/index.ts

@@ -0,0 +1 @@
+export { HomePage } from './HomePage';

package/src/components/LessonAwareLink/LessonAwareLink.module.css

@@ -0,0 +1,12 @@
+/* Locked-state visuals for cross-lesson MDX links live in globals.css —
+   they target plain attribute selectors and don't fit CSS Modules' "must
+   contain a local class" rule. This file only keeps the local class for
+   the inline lock badge that the global rule reveals. */
+
+.lockBadge {
+  display: none;
+  align-items: center;
+  margin-left: 0.25em;
+  vertical-align: -0.15em;
+  color: currentColor;
+}

package/src/components/LessonAwareLink/LessonAwareLink.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
+import { LockIcon } from '@/components/ProgramDrawer/LockIcon';
+import { stripLangFromPath } from '@/lib/lang';
+import styles from './LessonAwareLink.module.css';
+
+type LessonAwareLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  basePath?: string;
+  children?: ReactNode;
+};
+
+/**
+ * MDX `<a>` replacement that participates in the gate. The rendered shape is
+ * always a plain anchor — the inline gate-mark script flips `data-locked` on
+ * any link whose `data-lesson-key` points at a still-locked lesson, and CSS
+ * dims the row + reveals the inline lock badge from there. Click handler
+ * uses the attribute (not React state) so SSR markup and post-hydration
+ * markup are identical and there's no flash.
+ */
+export function LessonAwareLink({
+  href,
+  children,
+  basePath = '',
+  ...rest
+}: LessonAwareLinkProps) {
+  const target = href ? matchLessonHref(href, basePath) : null;
+  const dataKey = target ? `${target.moduleId}/${target.slug}` : undefined;
+
+  return (
+    <a
+      href={href}
+      data-lesson-key={dataKey}
+      onClick={
+        dataKey
+          ? (e) => {
+              if (e.currentTarget.getAttribute('data-locked') === 'true') {
+                e.preventDefault();
+              }
+            }
+          : undefined
+      }
+      {...rest}
+      // Why: the inline gate-mark script (runs before hydration) stamps
+      // `data-locked` / `aria-disabled` / `tabindex` on any anchor whose
+      // `data-lesson-key` points at a still-locked lesson. React's
+      // hydration would otherwise flag those as "extra attributes from
+      // the server" because the virtual DOM doesn't include them.
+      suppressHydrationWarning
+    >
+      {children}
+      {dataKey && (
+        <span
+          className={styles.lockBadge}
+          data-lock-badge=""
+          aria-hidden="true"
+        >
+          <LockIcon />
+        </span>
+      )}
+    </a>
+  );
+}
+
+function matchLessonHref(
+  href: string,
+  basePath: string,
+): { moduleId: string; slug: string } | null {
+  if (href.length === 0) return null;
+  if (/^[a-z][a-z0-9+.-]*:\/\//i.test(href)) return null;
+  if (/^(?:mailto:|tel:|data:)/i.test(href)) return null;
+  if (href.startsWith('#')) return null;
+
+  let path = href;
+  if (basePath && path.startsWith(`${basePath}/`)) {
+    path = path.slice(basePath.length);
+  }
+  if (!path.startsWith('/')) return null;
+
+  const withoutHash = path.split('#')[0]?.split('?')[0] ?? '';
+  const { rest } = stripLangFromPath(withoutHash);
+  const segments = rest.split('/').filter(Boolean);
+  if (segments.length < 2) return null;
+
+  return { moduleId: segments[0], slug: segments[1] };
+}

package/src/components/LessonAwareLink/index.ts

@@ -0,0 +1 @@
+export { LessonAwareLink } from './LessonAwareLink';

package/src/components/LessonLayout/LessonLayout.module.css

@@ -0,0 +1,35 @@
+.layout {
+  display: grid;
+  grid-template-columns: minmax(0, var(--layout-content-max));
+  gap: var(--space-8);
+  padding: var(--space-8) var(--space-6);
+  max-width: 1280px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.content {
+  min-width: 0;
+}
+
+.title {
+  font-size: var(--font-size-3xl);
+  line-height: var(--line-height-tight);
+  font-weight: var(--font-weight-bold);
+  margin: 0;
+  color: var(--content-primary);
+  letter-spacing: -0.01em;
+}
+
+@media (max-width: 1023px) {
+  .layout {
+    padding: var(--space-6) var(--space-4);
+  }
+}
+
+@media (max-width: 767px) {
+  .layout {
+    padding: var(--space-4);
+    gap: var(--space-4);
+  }
+}

package/src/components/LessonLayout/LessonLayout.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import styles from './LessonLayout.module.css';
+
+type LessonLayoutProps = {
+  children: ReactNode;
+  title?: ReactNode;
+};
+
+export function LessonLayout({ children, title }: LessonLayoutProps) {
+  return (
+    <div className={styles.layout}>
+      <div className={styles.content}>
+        {title && <h1 className={styles.title}>{title}</h1>}
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/LessonLayout/index.ts

@@ -0,0 +1 @@
+export { LessonLayout } from './LessonLayout';