רכיבי SDK ועיצוב

הרכיבים מקבלים content (זמין גם בשם values), ‏data, ‏assets, ‏settings, ‏design, ‏preview ו־mode. ה־SDK מייצא את הממשק SiteProps; הטיפוסים שנוצרים בפרויקט מתארים את השדות בפועל. המצבים הם fixture, ‏preview ו־published.

תמונות רספונסיביות

הדוגמה משתמשת בהגדרת Studio ובקישור הנכס hero.image שלה. מזהה הנכס שנבחר מגיע מהתוכן, כך ששינוי של בעל האתר מתבטא גם בתמונה:

---
import Picture from '@shoplifter/presentation-sdk/Picture.astro';
const { content, assets } = Astro.props;
const heroImage = content.hero.image ? assets[content.hero.image] : undefined;
---
<section>
  <h1>{content.hero.title}</h1>
  {heroImage && <Picture asset={heroImage} alt={heroImage.alt ?? ''} sizes="100vw" />}
</section>

השתמשו ב־Picture לתמונות רסטר. בפרסום, התמונות חייבות להיות נכסים של הערוץ. תמונות מקומיות משמשות לנתוני דמה. ל־SVG דקורטיבי תחת /assets/ השתמשו ב־@shoplifter/presentation-sdk/Decorative.astro; אסור להטמיע תמונות רסטר ב־SVG. מותר להשתמש גם בגופנים מקומיים.

תמונות YouTube ותמונות חיצוניות (SDK 0.3.0)

---
import YouTubeThumbnail from '@shoplifter/presentation-sdk/YouTubeThumbnail.astro';
import ExternalImage from '@shoplifter/presentation-sdk/ExternalImage.astro';
---
<YouTubeThumbnail url="https://youtu.be/dQw4w9WgXcQ?t=90" alt="Video" />
<ExternalImage src="https://images.example/photo.jpg" alt="Photo" width={640} height={480} />

YouTubeThumbnail מקבל קישורי צפייה, קישורים מקוצרים, Shorts, שידורים חיים והטמעה, כולל כתובות ללא קידומת פרוטוקול. הרכיב יוצר את כתובת התמונה בעצמו, במידות ברירת מחדל של 480×360. שני הרכיבים דורשים alt (מחרוזת ריקה מותרת לתמונה דקורטיבית), משתמשים כברירת מחדל בטעינה עצלה ובפענוח אסינכרוני, ומקבלים מאפייני עיצוב וטעינה. אי אפשר לדרוס את הכתובת, המידות או סימוני ה־SDK באמצעות מאפיינים נוספים.

שימוש ב־ExternalImage מהווה הסכמה מפורשת: הדפדפן של המבקר פונה לשרת חיצוני, והתמונה עלולה להשתנות או להיעלם. ה־CLI, הבנייה ויומן הפרסום מציגים אזהרה שאינה חוסמת. אין מתג בלוח הבקרה או רשימת דומיינים מאושרים. נדרשים כתובת HTTPS מוחלטת ללא פרטי הזדהות ורוחב וגובה מספריים חיוביים. ה־SDK אינו מוריד, מתווך או ממטב את התמונה. תמונות YouTube מותרות ישירות ללא האזהרה. תגיות תמונה גולמיות, תמונות CSS חיצוניות וחלופות רספונסיביות (srcset או עטיפת picture) נשארות מוגבלות לרכיבים אלה.

ייבאו את parseYouTubeUrl, ‏youtubeThumbnailUrl ו־youtubeEmbedUrl מתוך @shoplifter/presentation-sdk/youtube. הפענוח מחזיר { videoId, startSeconds? } או null. קדימות חותמת הזמן היא t, אחריו start ואז #t; חותמת לא תקינה נזנחת. העבירו את התוצאה ל־youtubeEmbedUrl, עם { autoplay: true } לפי הצורך, כדי לשמר את זמן ההתחלה. הפריסה, המעבר האוטומטי וחלונית הנגן נשארים בקוד המצגת.

ייבוא ציבורי

ייבוא	שימוש
@shoplifter/presentation-sdk	פונקציות זמן ריצה וממשקי TypeScript
@shoplifter/presentation-sdk/integration	האינטגרציה המנוהלת ל־Astro
@shoplifter/presentation-sdk/Picture.astro	תמונות רספונסיביות
@shoplifter/presentation-sdk/Decorative.astro	וקטורים דקורטיביים
@shoplifter/presentation-sdk/YouTubeThumbnail.astro	תמונות YouTube מאומתות
@shoplifter/presentation-sdk/ExternalImage.astro	תמונות HTTPS חיצוניות בהסכמה מפורשת
@shoplifter/presentation-sdk/youtube	פונקציות משותפות לכתובות YouTube
@shoplifter/presentation-sdk/InquiryForm.astro	רכיב פנייה
@shoplifter/presentation-sdk/leads	טפסי פניות בעלי טיפוסים ושליחה
@shoplifter/presentation-sdk/links	telephoneHref ו־publicWebUrl
@shoplifter/presentation-sdk/theme	פונקציות עזר קיימות לעיצוב

שמרו על הגדרות Astro המנוהלות. כתבו CSS ברכיבי הפרויקט ובקובצי העיצוב במקום להחליף תבניות מסמך ונתיבים של ה־SDK. ה־SDK מנהל את שפת המסמך וכיוונו; השתמשו במאפייני CSS לוגיים ובבידוד כתובות וקוד בטקסט דו־כיווני.

נקודת הכניסה /live מיועדת לשרת מהימן בלבד ואסור לייבא אותה לדפדפן. ממשקי הרינדור הפרטיים אינם חלק מפיתוח אתר רגיל.