דילוג לתוכן הראשי
Engine|Skills|Checks & scripts|Image Generator|
Patterns

webiny_course

קורס קצר בפרקים, לפי webiny.com/learn/course. בין בלוג (שטוח) לדוקס (עץ): רמה אחת, פרק → שיעור, 3 עד 4 שיעורים בפרק. סיידבר, התקדמות, הקודם/הבא, בלוקים לטקסט ארוך. אפס פלטה משלו.

המקור

#live

Live

המדריך לאתר של העסק

הסטודיו. דף ציבורי ב-sitemap, בניווט, בפוטר ובחיפוש.

data/guide-data.ts

app/guides/build-a-website/_content/

פומבי (GUIDE_PUBLIC): בפוטר תחת "מדריכים", ב-sitemap ובחיפוש, לא בניווט העליון. המתג: GUIDE_PUBLIC ב-data/guide-data.ts.

למדריך

המדריך להתחדשות עירונית

עורכי הדין, אותו רכיב באותם טוקנים של הדמו. משותף לכל דפי הבית (§10).

app/demos/lawyer_18_09/_shared/guide-data.ts

app/demos/lawyer_18_09/_shared/guide-content/

לשיעור לדוגמה

#instance

מופע חדש

שלושה דברים. ה-root תמיד פרמטר (לדמו עם כמה דפי בית: `${variant.root}/guide`). הגופים מחוץ לדאטה כי הסיידבר הוא client ומייבא אותה.

// 1. data/<x>-data.ts  (CourseData, webiny-course.ts)
export const guide: CourseData = {
  id: 'studio-guide',            // the localStorage key
  title, description,
  chapters: [{ slug, title, description, icon?: LucideIcon, image?: {src, alt},
    lessons: [{ slug, title, seoTitle?, description, query?, minutes?, image? }] }],
  labels?: Partial<CourseLabels>  // Hebrew defaults, strings with {n} {total} {pct} {done}
};

// 2. _content/index.ts  →  Record<'chapter/lesson', ComponentType>
//    one file per lesson, written with the blocks (CourseLead, CourseInThisLesson, …)

// 3. routes
<root>/page.tsx                      → <WebinyCourseIndex course root />
<root>/[chapter]/page.tsx            → <WebinyCourseChapter course root chapter />   generateStaticParams: chapterParams(course)
<root>/[chapter]/[lesson]/page.tsx   → <WebinyCourse course root chapter lesson foot?>  lessonParams(course)
                                         <Body /></WebinyCourse>
// sitemap: coursePaths(root, course)   breadcrumb: the site's UkBreadcrumb (microdata), crumbLabel + home props

#parts

החלקים

WebinyCourse

דף השיעור: סיידבר | פס עליון + ראש השיעור (מספר דהוי, "שיעור N", h1, זמן קריאה, תמונה) + הגוף + הקודם/הבא. Server; שני איים בלבד.

WebinyCourseSidebar

client. רשימת הפרקים, רק הפרק הפתוח מציג את השיעורים שלו (webiny.com), לחיצה על פרק פותחת את השיעור הראשון שלו, ✓ מ-localStorage אחרי mount. במובייל פס עם +/− שמעליו התוכן. מנגנון הפתיחה הוא העניין של הקובץ הזה בלבד.

UkLenisOff (uikit)

client. בדפי שיעור Lenis מכובה: lenis_destroy במאונט, lenis_init ביציאה. לסייד-בר גלילה פנימית ו-Lenis גולל את העמוד במקומה. הסימון data-lenis-off מונע מ-lenis_init להידלק שוב בניווט ואחרי פופאפ.

WebinyCourseTopbar

client. חזרה לפרק, שם השיעור, "N% הושלם", sticky מתחת ל-navbar (--uk-sticky-top). גם Alt+חץ: קדימה בכיוון הקריאה.

WebinyCourseIndex

כרטיס לכל פרק (עם התקדמות) + כל השיעורים. uk-grid לפי מספר הפרקים.

WebinyCourseChapter

דף פרק: שורות שיעורים, כפתור התחלה, לפרק הבא.

WebinyCourseBlocks

CourseLead, CourseInThisLesson, CourseCallout (note|tip|warn, אייקון בלבד), CourseSteps, CourseFigure, CourseLinks (קריאה נוספת: קישורים רשמיים בחלון חדש, המדריך מצביע ולא מסביר). גוף שיעור לא נוגע ב-class.

use-course-progress

מפתח webiny_course:<id>, Set של "פרק/שיעור". שיעור נספר כשמסמנים "סמן כהושלם" בסוף השיעור (WebinyCourseComplete), לא בפתיחה. ללא שרת, ללא hydration mismatch.

#rules

כללים

  • צבעים ורדיוס רק מטוקנים של האתר המארח: --background, --foreground, --muted, --muted-foreground, --border, --primary, --uk-global-border-radius. הקובץ webiny-course.css לא מכיר שום צבע.
  • משטחים, לא קווים: סיידבר, כרטיסים, callouts ו-pager הם פאנלים מוטים (--muted).
  • הבא משמאל (RTL): ה-pager הוא grid של שתי עמודות, prev ראשון ב-DOM. .wbc-dir-icon הופך חצים תחת dir=ltr.
  • ה-h1 של השיעור והכותרות בגוף הם של האתר; רק הטוקנים --h1-size / --h2-size מכוונים לרוחב קריאה ב-.wbc-article.
  • רמה אחת בלבד. אם צריך קינון, זה אתר דוקס, לא הרכיב הזה.
  • פתוח: מנגנון הפתיחה במובייל (+/− מעל התוכן כרגע, לפי Motion; ב-Webiny מגירה מהצד). החלפה = WebinyCourseSidebar בלבד.