שיתוף | WEblok - אתר לבניית בלוקים להטמעה באתרים, הזרקה לדף קיים, מבנים מוכנים, סנכרון גיטאהב ועוד.

נחלס דון

אני שמח להציג בפניכם את פרוייקט בין הזמנים שלי (בשיתוף קלוד החינמי וג'מיני...) -

WEblok - בלוקים חכמים לאתר שלך.

מה זה WEblok?

בגדול, זה אתר חינמי שמאפשר לקחת בלוקים מוכנים לאתר, להתאים אותם איך שרוצים בעורך חי, ולהוציא בסוף קוד שאפשר פשוט להכניס לאתר.

אבל תוך כדי העבודה על זה זה קצת התפתח מעבר ל"ספריית בלוקים", אז יש שם עוד כמה דברים...

יש בלוקים מוכנים כמו כותרת, פוטר, וילון צד, טופס יצירת קשר, פופאפים מסוגים שונים, ועוזר AI לאתר.

לכל בלוק יש עורך עם תצוגה חיה, אפשרות לראות גדלי מסך שונים, מצב כהה/בהיר, אנימציות ועוד הגדרות עיצוב.

אפשר גם להשתמש ב-AI כדי לשפר טקסט או לשנות עיצוב.
ופה ניסיתי לעשות משהו קצת שונה מלתת ל-AI גישה חופשית לקוד, כי אז לפעמים הוא מחליט שצריך "לשפר" עוד כמה דברים שלא ביקשתם...

ב-WEblok ה-AI של העורך מקבל רק את ההגדרות שמותר לו לשנות.

בסוף אפשר להוציא את הבלוק כ-HTML אחד, כ-HTML + CSS + JS נפרדים או כ-JSX.

והרעיון הוא שהקוד המיוצא הוא עצמאי ולא תלוי ב-WEblok בזמן שהאתר רץ.

הזרקה לדף קיים

זה אחד הדברים שהשקעתי בהם הכי הרבה.

אפשר להעלות קובץ HTML קיים ולבחור בלוק שרוצים להוסיף אליו.

אפשר לתת ל-AI להחליט איפה למקם אותו, או לבחור ידנית:

• בראש הדף
• בסוף הדף
• בתחתית
• כאלמנט צף
• לפני/אחרי אלמנט מסוים

ה-AI במקרה הזה לא אמור לערוך לכם את כל הקוד ולהתחיל להמציא דברים, אלא רק להחליט איפה ואיך להכניס את הבלוק.

יש גם "שומר" שמונע ממנו להכניס קוד זר מעבר לקוד של הבלוק עצמו.

מבנים

בנוסף לבלוקים בודדים יש גם "מבנים" - פרוייקטים שלמים שמוכנים לפריסה.

כרגע יש מבנה של אישורי הגעה לאירועים.

מקבלים פרוייקט שלם שכולל הזמנה, טופס אישור הגעה, ניווט ב-Waze ובמפות, קובץ יומן, ודף ניהול עם אפשרות לייצוא הנתונים.

אפשר להוריד את הפרוייקט כ-ZIP או לדחוף אותו לגיטאהב, ואז לפרוס אותו על ה-Vercel וה-Supabase שלכם.

הנתונים של הפרוייקט הזה לא עוברים דרך WEblok.

יש עוד מבנים שאני מתכנן להוסיף בהמשך.

GitHub

יש גם כלי לניהול GitHub ישירות מהדפדפן.

אפשר לטעון repositories, ליצור repositories, להוריד אותם כ-ZIP, לדחוף קבצים או תיקיות וכו'.

ואחרי הרשמה יש גם "פרוייקטים קטנים", ששם אפשר לייבא פרוייקט מגיטאהב, לבצע עליו הזרקות ולהחזיר את השינויים כ-PR.

האזור הזה עדיין בעבודה ולא הכל שם מפותח עד הסוף.

קצת על האבטחה

כיוון שהמערכת מתעסקת בקוד שהמשתמש מעלה ומייצאת, זה היה משהו שהיה לי חשוב במיוחד.

הקוד המיוצא עובר סניטציה, יש CSP, והרשאות המשתמשים נאכפות גם בצד השרת וגם ב-RLS של Supabase.

גם במקומות שבהם ה-AI עובד ניסיתי לא לתת לו פשוט "לכתוב מה שבא לו", אלא לעבוד עם הגבלות ושומרי סף.

מי שרוצה יכול כמובן לעבור על קוד המקור ולבדוק בעצמו — יש גם הערות בעברית בהרבה מקומות.

עוד כמה דברים

האתר עצמו תומך בעברית, אנגלית וספרדית, כולל RTL/LTR ומצב כהה ובהיר.

ה-AI של WEblok עובד עם Gemini, ובחלק מהמקומות אפשר להשתמש גם במפתח אישי בדפדפן.

בבלוק העוזר החכם לאתר יש תמיכה גם ב-Gemini, Anthropic, OpenRouter, Groq ו-Mistral, כך שמי שמטמיע אותו באתר יכול לתת למבקרים להשתמש במפתח שלהם.

שימו לב

ה-AI תלוי במפתח Gemini אישי, ולפעמים גוגל מחזירה שגיאת עומס. אם מופיעה שגיאה יש קוד קטן בסוגריים, אז אם אתם מדווחים לי על תקלה עדיף לצרף צילום מסך של זה.

חלק מהטקסטים הקבועים בתוך הבלוקים המיוצאים עדיין בעברית בלבד, וזה נמצא ברשימת הדברים שאני צריך לסדר.

בכל קוד שמיוצא יש קרדיט קטן ל-WEblok.

ע"כ בקצרה מה שזכרתי, מה שלא - כנסו לאתר ותראו בעצמכם.

אשמח שתנסו, ותגידו לי על באגים, הצעות לשיפור, בעיות תצוגה במכשירים שונים ובעיקר אם מצאתם משהו שלא עובד כמו שצריך.

גם בעיות אבטחה מעניינות אותי מאוד. אם מישהו מוצא דרך להכניס קוד זר דרך אחד השדות או לעקוף אחד מהשומרים, אשמח לדעת.

במובייל אפשר גם להתקין את האתר כאפליקציית קיצור דרך מהדפדפן.

האתר: https://weblok-alpha.vercel.app

המאגר בגיטאהב (קוד פתוח): https://github.com/YSmauas/weblok

מוזמנים להשתמש, לתת בגיטאהב, להציע רעיונות לשיפור, ואם יש לכם תיקונים אפשר גם להציע PR.

תמונות בספויילר(קרדיט ל @מה-זה-משנה-אה )

לשכת הרב

@נחלס-דון כתב:

עם אפשרות הזרקה חכמה עם/בלי AI לדף HTML או לריפו בגיטאהב,

דהיינו אם יש לי קובץ HTML של אתר מוכן, אני יכול להכנס לאתר והוא יזריק במדויק למקום הנכון את מה שאני בוחר ויביא קובץ HTML מלא מוכן?

נחלס דון

@לשכת-הרב בדיוק!
אתה יכול להזריק בלי AI למיקום מוגדר, (יש בדיקה אוטומטית שלא יכסה אלמנטים).
ואתה יכול גם להזריק עם AI שאתה כותב לו בדיוק איפה להזריק

אש התורה

@נחלס-דון כל הכבוד עבודה יפה

נחלס דון

עדכון- הנוסח של הפוסט הראשי עודכן עם gpt, לאחר שהוא לא היה כ״כ מובן.

הנוסח המקורי בספויילר.

אני שמח להציג בפניכם את פרוייקט בין הזמנים שלי (בשיתוף קלוד החינמי וג'מיני...) -

WEblok - בלוקים חכמים לאתר שלך.

מה זה WEblok?
אתר חינמי ומתקדם עם בלוקים מוכנים להטמעה באתרים לאחר התאמה אישית, כמובן, עם אפשרות הזרקה חכמה עם/בלי AI לדף HTML או לריפו בגיטאהב,
וכמו כן יש גם 'מבנים' - פרוייקט שלם ומוכן לפריסה, כמובן גם לאחר התאמה אישית.
וגם 'כלים' - כלי עזר לשימוש באתר ובכללי, כמו הזרקה לדף קיים, וניהול מאגר גיטאהב חכם.

באזור האישי יש 'פרוייקטים קטנים' ששם אתם יכולים להעלות קבצים או לחבר לריפו בגיטאהב ולהוסיף בלוקים וכו' (זה כרגע לא מפותח מספיק - זה בעבודה)

כמובן שהכל מאובטח ברמה גבוהה
ומוגן במיוחד מ- xss, והקוד עובר סניטציה לפני ייצוא, וכן התחברות עם גוגל/גיטאהב, ושמירת מפתחות API (למעוניינים, ולאחר ההתחברות בלבד) מאובטחת לבחירה בשרת או בדפדפן.

וכן מערך השיפור/הזרקה/עיצוב עם AI נבנה במאמץ ובעמל רב כדי שה- AI (שנוטה להמציא דברים מעצמו) לא יהרוס/ישנה וכו' את הקוד הקיים/שהעלתם, אלא זה בנוי בצורה שהוא יכול לשנות רק פרמטרים מאושרים, וכן בהזרקה - הוא לא נוגע לא בקוד שלכם ולא בקוד להזרקה, אלא הוא רק בוחר איפה ואיך להכניס את הקוד החדש בקוד הקיים,
למי שזה מעניין אותו, אפשר לעבור על קוד המקור - יש הערות בעברית על כל קטע.

להלן פירוט -

1. הבלוקים

כותרת אתר
פוטר
וילון צד
טופס יצירת קשר
עוזר AI לאתר
פופאפ אחד שמכסה כמה סוגים: מבצע עם קוד קופון, אישור עוגיות, exit intent (=הודעה שקופצת כשהגולש מתכוון לעזוב את האתר) והודעה כללית.

2. העורך

תצוגה חיה בגדלי מכשיר שונים, מצב כהה ובהיר, וכפתור להפעיל מחדש את האנימציה
הרבה אפשרויות עיצוב לכל בלוק
שיפור טקסט עם AI, ועריכת עיצוב עם AI (כותבים מה רוצים, והוא משנה רק הגדרות עיצוב מותרות)
מורידים כ-HTML אחד, כ-HTML+CSS+JS נפרדים, או כ-JSX

3. בלוק פופאפ - אישור עוגיות
לפופאפ של העוגיות יש מדריך נפרד שמראה איך לגרום לזה לעבוד באמת. למשל לטעון גוגל אנליטיקס רק אחרי אישור ולמחוק את העוגיות שלו אחרי דחייה. הדוגמאות נבדקו בדפדפן.

4. העוזר החכם
מי שגולש באתר שלכם מכניס מפתח AI משלו, והמפתח נשאר אצלו בדפדפן בלבד.
הבלוק תומך גם ג'מיני, Anthropic, OpenRouter, Groq ומיסטרל.
OpenAI לא נתמך כרגע, כי אין להם CORS בשגיאות.

5. הזרקה לדף קיים
מעלים קובץ HTML ובוחרים בלוק. אפשר שה-AI ימקם אותו, או לבחור ידנית (בראש הדף, בסוף, בתחתית, צף, או לפני/אחרי אלמנט). יש בדיקה שהוא לא מכסה כותרת קבועה או כפתורים צפים, ויש 'שומר' שלא נותן ל-AI להוסיף קוד זר חוץ מהבלוק.

6. מבנים
כרגע אחד: אישורי הגעה לאירועים. מקבלים פרוייקט שלם עם הזמנה, טופס אישור הגעה, ניווט בוויז ובמפות, קובץ יומן ודף ניהול מוגן עם ייצוא לאקסל. מורידים זיפ או דוחפים לגיטאהב, ומעלים לוורסל ולסופאבייס שלכם. שום נתון לא עובר דרך WEblok.
בעבודה - מבנה של מכירת מוצרים/הורדה וכו'.

7. כלים וחשבון

ניהול גיטאהב מהדפדפן: טעינת ריפוים, יצירה, הורדה כזיפ ודחיפת קבצים או תיקייה
אחרי הרשמה אפשר לשמור עיצובים ולעבוד עם "פרוייקטים קטנים": ייבוא מגיטאהב, הזרקה ודחיפה חזרה כ-PR

שימו לב

ה-AI תלוי במפתח ג'מיני אישי, ולפעמים גוגל מחזירה שגיאת עומס. כשיש שגיאה מופיע קוד קטן בסוגריים, אז צלמו ושלחו לי.
חלק מהטקסטים בתוך הבלוקים המיוצאים עדיין בעברית בלבד.

בכל קוד מיוצא יש קרדיט קטן ל-WEblok

ע״כ בקצרה מה שזכרתי, מה שלא- כנסו לאתר ותראו בעצמכם.

אשמח שתנסו, ותגידו לי על באגים, הצעות לשיפור, בעיות תצוגה בנגנים ובטלפונים (פחות הגיוני כי האתר קיבל בבדיקה של גוגל ציון של 99% -100% בנגישות ותצוגה...), ובעיות אבטחה. אם מישהו מוצא דרך להכניס קוד זר דרך אחד השדות, אשמח לדעת.

במובייל ניתן להתקין אפליקציית קיצור דרך מהדפדפן.

האתר- https://weblok-alpha.vercel.app

המאגר בגיטאהב (קוד פתוח)- https://github.com/YSmauas/weblok

מוזמנים להשתמש, להציע רעיונות לשיפור, ואפשר גם לתת בגיטאהב...
(מי שיש לו תיקונים ושיפורים יכול גם להציע pr)

תמונות בספויילר (קרדיט ל @מה-זה-משנה-אה )