@dsbasko/cookbook-engine 0.1.0

package/src/components/LessonNav/LessonNav.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import Link from 'next/link';
+import { useGate } from '@/components/GateProvider';
+import { useProgressMode } from '@/components/ProgressModeProvider';
+import { lessonKey, markCompletedAndAdvance } from '@/lib/progress';
+import { useLang, useT } from '@/lib/use-i18n';
+import styles from './LessonNav.module.css';
+
+export type LessonNavLink = {
+  moduleId: string;
+  slug: string;
+  title: string;
+};
+
+type LessonNavProps = {
+  prev: LessonNavLink | null;
+  next: LessonNavLink | null;
+  currentModuleId: string;
+  currentSlug: string;
+};
+
+export function LessonNav({ prev, next, currentModuleId, currentSlug }: LessonNavProps) {
+  const gate = useGate();
+  const { disabled } = useProgressMode();
+  const t = useT();
+  const lang = useLang();
+  const handleNextClick = () => {
+    // Free-reading mode: the link only navigates, it must not record progress.
+    if (disabled) return;
+    // Single entry point: marks completed, advances the sticky furthest
+    // pointer, dispatches the change event. Keeps gate state internally
+    // consistent so an in-flight read in another tab doesn't see a half-write.
+    markCompletedAndAdvance(gate.course, lessonKey(currentModuleId, currentSlug));
+  };
+
+  return (
+    <nav className={styles.row} aria-label={t.lessonNavLabel}>
+      {prev ? (
+        <Link
+          href={`/${lang}/${prev.moduleId}/${prev.slug}`}
+          className={`${styles.card} ${styles.prev}`}
+        >
+          <span className={styles.label}>{t.prevLesson}</span>
+          <span className={styles.title}>{prev.title}</span>
+        </Link>
+      ) : (
+        <span className={styles.placeholder} aria-hidden="true" />
+      )}
+      {next ? (
+        <Link
+          href={`/${lang}/${next.moduleId}/${next.slug}`}
+          className={`${styles.card} ${styles.next}`}
+          onClick={handleNextClick}
+        >
+          <span className={styles.label}>{t.nextLesson}</span>
+          <span className={styles.title}>{next.title}</span>
+        </Link>
+      ) : (
+        <span className={styles.placeholder} aria-hidden="true" />
+      )}
+    </nav>
+  );
+}

package/src/components/LessonNav/index.ts

@@ -0,0 +1 @@
+export { LessonNav, type LessonNavLink } from './LessonNav';

package/src/components/LessonPageLayout/LessonPageLayout.module.css

@@ -0,0 +1,118 @@
+.page {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 260px;
+  gap: 56px;
+  align-items: start;
+  padding: 56px var(--space-8) 96px;
+  max-width: calc(var(--prose-max-width) + 260px + 56px + var(--space-8) * 2);
+  width: 100%;
+  margin: 0 auto;
+}
+
+.page[data-has-side='false'] {
+  grid-template-columns: minmax(0, 1fr);
+  max-width: calc(var(--prose-max-width) + var(--space-8) * 2);
+}
+
+.content {
+  min-width: 0;
+}
+
+.article {
+  min-width: 0;
+  max-width: var(--prose-max-width);
+}
+
+.hero {
+  padding-bottom: var(--space-8);
+  margin-bottom: var(--space-8);
+  border-bottom: 1px solid var(--bg-stroke);
+}
+
+.title {
+  font-family: var(--prose-font-active), Georgia, 'Source Serif Pro', serif;
+  font-size: calc(var(--prose-font-size) * 4.5);
+  line-height: 1;
+  letter-spacing: -0.03em;
+  font-weight: var(--font-weight-bold);
+  margin: 0;
+  text-wrap: balance;
+}
+
+.prose {
+  font-family: var(--prose-font-active), Georgia, 'Source Serif Pro', serif;
+  font-size: var(--prose-font-size);
+  line-height: 1.7;
+  color: var(--content-primary);
+}
+
+/* Apply serif sizing to markdown body without rewriting markdown.css. */
+.prose :global(.markdown) {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+/* Headings inherit the prose font family so the reading-preferences toggle
+ * (serif/sans/lora) updates body copy and headings together. */
+.prose :global(.markdown h2) {
+  letter-spacing: -0.02em;
+  margin-top: 40px;
+  margin-bottom: var(--space-5);
+  scroll-margin-top: calc(56px + var(--space-4));
+}
+
+.prose :global(.markdown p) {
+  text-wrap: pretty;
+}
+
+.footer {
+  margin-top: 56px;
+  padding-top: var(--space-8);
+  border-top: 1px solid var(--bg-stroke);
+}
+
+/* Right sidebar: sticks within its own grid column. */
+.side {
+  position: sticky;
+  top: calc(56px + var(--space-5));
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+  padding-top: var(--space-2);
+  max-height: calc(100dvh - 56px - var(--space-8));
+  overflow-y: auto;
+}
+
+@media (max-width: 1100px) {
+  .page {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--space-8);
+  }
+
+  .side {
+    display: none;
+  }
+
+  .title {
+    font-size: calc(var(--prose-font-size) * 3.5);
+  }
+}
+
+@media (max-width: 720px) {
+  .page {
+    padding: var(--space-6) var(--space-5) var(--space-10);
+  }
+
+  .title {
+    font-size: calc(var(--prose-font-size) * 2.4);
+  }
+
+  .prose {
+    line-height: 1.65;
+  }
+
+  .prose :global(.markdown h2) {
+    margin-top: var(--space-8);
+  }
+}

package/src/components/LessonPageLayout/LessonPageLayout.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+import { getDict } from '@/lib/i18n';
+import { type Lang } from '@/lib/lang';
+import styles from './LessonPageLayout.module.css';
+
+type LessonPageLayoutProps = {
+  lang: Lang;
+  title: ReactNode;
+  children: ReactNode;
+  footer?: ReactNode;
+  tocSlot?: ReactNode;
+  sideMetaSlot?: ReactNode;
+};
+
+export function LessonPageLayout({
+  lang,
+  title,
+  children,
+  footer,
+  tocSlot,
+  sideMetaSlot,
+}: LessonPageLayoutProps) {
+  const hasSide = Boolean(tocSlot || sideMetaSlot);
+  const t = getDict(lang);
+
+  return (
+    <div className={styles.page} data-has-side={hasSide ? 'true' : 'false'}>
+      <div className={styles.content}>
+        <article className={styles.article} data-reading-target="">
+          <header className={styles.hero}>
+            <h1 className={styles.title}>{title}</h1>
+          </header>
+          <div className={styles.prose}>{children}</div>
+        </article>
+        {footer && <footer className={styles.footer}>{footer}</footer>}
+      </div>
+
+      {hasSide && (
+        <aside className={styles.side} aria-label={t.lessonInfoLabel}>
+          {tocSlot}
+          {sideMetaSlot}
+        </aside>
+      )}
+    </div>
+  );
+}

package/src/components/LessonPageLayout/index.ts

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

package/src/components/LessonSideMeta/LessonSideMeta.module.css

@@ -0,0 +1,68 @@
+.meta {
+  border-top: 1px solid var(--bg-stroke);
+  padding-top: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  font-size: 13px;
+}
+
+.row {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.key {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 12px;
+  color: var(--content-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.value {
+  color: var(--content-primary);
+  text-decoration: none;
+  font-weight: var(--font-weight-medium);
+}
+
+a.value:hover {
+  color: var(--accent-main);
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.tag {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 12px;
+  padding: 1px 6px;
+  background: var(--bg-surface);
+  border: 1px solid var(--bg-stroke);
+  border-radius: var(--radius-sm);
+  color: var(--content-secondary);
+  font-weight: var(--font-weight-regular);
+}
+
+.markButton {
+  composes: btn btnPrimary from '../HomePage/HomePage.module.css';
+  margin-top: var(--space-3);
+  border-radius: 4px;
+  justify-content: center;
+}
+
+/* The "Пометить непрочитанным" button is always in the DOM (so SSR markup
+   matches every hydration), but only visible when the wrapper carries
+   data-completed='true'. The gate-paint inline script stamps that
+   attribute synchronously before first paint based on localStorage. */
+.meta [data-show-when-completed] {
+  display: none;
+}
+
+.meta[data-completed='true'] [data-show-when-completed] {
+  display: inline-flex;
+}

package/src/components/LessonSideMeta/LessonSideMeta.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import Link from 'next/link';
+import { useProgressMode } from '@/components/ProgressModeProvider';
+import {
+  lessonKey,
+  PROGRESS_CHANGE_EVENT,
+  unmarkCompleted,
+} from '@/lib/progress';
+import { useLang, useT } from '@/lib/use-i18n';
+import styles from './LessonSideMeta.module.css';
+
+type LessonSideMetaProps = {
+  moduleId: string;
+  moduleTitle: string;
+  moduleIndex: number;
+  slug: string;
+  duration: string;
+  tags: string[];
+};
+
+export function LessonSideMeta({
+  moduleId,
+  moduleTitle,
+  moduleIndex,
+  slug,
+  duration,
+  tags,
+}: LessonSideMetaProps) {
+  const key = lessonKey(moduleId, slug);
+  const moduleNum = String(moduleIndex).padStart(2, '0');
+  const t = useT();
+  const lang = useLang();
+  const { disabled } = useProgressMode();
+
+  const handleUnmark = () => {
+    // Defence in depth: in free-reading mode the GateProvider strips
+    // `data-completed`, so CSS already hides this button. Guard the write too in
+    // case the handler is reached directly — free-reading mode must never touch
+    // progress storage.
+    if (disabled) return;
+    unmarkCompleted(key);
+    window.dispatchEvent(new Event(PROGRESS_CHANGE_EVENT));
+  };
+
+  return (
+    <div
+      className={styles.meta}
+      data-lesson-key={key}
+      // Gate-mark inline script flips data-completed / data-locked on every
+      // [data-lesson-key] before hydration. Without this hint React warns
+      // about "extra attributes from the server" on this div.
+      suppressHydrationWarning
+    >
+      <div className={styles.row}>
+        <span className={styles.key}>{t.moduleMetaKey}</span>
+        <Link href={`/${lang}/${moduleId}`} className={styles.value}>
+          {moduleNum} · {moduleTitle}
+        </Link>
+      </div>
+      <div className={styles.row}>
+        <span className={styles.key}>{t.readingTimeMetaKey}</span>
+        <span className={styles.value}>{duration}</span>
+      </div>
+      {tags.length > 0 && (
+        <div className={styles.row}>
+          <span className={styles.key}>{t.tagsMetaKey}</span>
+          <span className={styles.tags}>
+            {tags.map((tag) => (
+              <span key={tag} className={styles.tag}>
+                #{tag}
+              </span>
+            ))}
+          </span>
+        </div>
+      )}
+      <button
+        type="button"
+        className={styles.markButton}
+        data-show-when-completed
+        onClick={handleUnmark}
+      >
+        {t.markUnread}
+      </button>
+    </div>
+  );
+}

package/src/components/LessonSideMeta/index.ts

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