עדכון- הנוסח של הפוסט הראשי עודכן עם gpt, לאחר שהוא לא היה כ״כ מובן.
הנוסח המקורי בספויילר.
Spoiler
אני שמח להציג בפניכם את פרוייקט בין הזמנים שלי (בשיתוף קלוד החינמי וג'מיני...) -
[image: 1791203077782-logo-light.png]
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)
תמונות בספויילר (קרדיט ל @מה-זה-משנה-אה )
[image: 1791201293777-9fe63953-5bb8-4050-a74e-24038044af9c-image.jpeg] [image: 1791201313365-4e1918a5-904f-43d1-80e6-9877586d0c29-image.jpeg] [image: 1791201324328-e4578ea6-f87d-4d24-a8ce-280496c9b4f9-image.jpeg] [image: 43515387-6e4a-489a-adf6-363d64c74eef-image.jpeg]
 { const baseUrl = "https://www.google.co.il/search?q=site:mitmachim.top"; const m = location.pathname.match(/^\/(topic|category)\/(\d+)/); const type = m ? m[1] : null; const id = m ? m[2] : null; let searchInput; function search(path = "") { const query = searchInput.value.trim(); if (query) { window.open(`${baseUrl}${path}%20${encodeURIComponent(query)}`, "_blank"); } } let buttons = {}; buttons.searchAll = { id: "bb-search-all", label: `חיפוש ${type ? "בכל הפורום" : ""}`, className: type ? "btn-secondary" : "btn-primary", callback: () => search(), }; if (type === "topic") { buttons.searchTopic = { label: "חיפוש בנושא זה", className: "btn-primary", callback: () => search(`/topic/${id}`), }; } else if (type === "category") { buttons.searchCategory = { label: "חיפוש בקטגוריה זו", className: "btn-primary", callback: () => search(`/category/${id}`), }; } buttons.cancel = { label: "ביטול", className: "btn-default", "data-bs-dismiss": "modal" }; const dialog = bootbox.dialog({ title: '<div style="text-align:center;"><img src="/assets/uploads/files/1625950269825-mt-google.png" width="400" alt="חיפוש בגוגל"></div>', message: '<input id="bb-inp" class="bootbox-input bootbox-input-text form-control" placeholder="הקלידו כדי לחפש בגוגל" autocomplete="off"/>', buttons, backdrop: true, show: true, onEscape: true }); dialog.on("shown.bs.modal", function () { searchInput = document.getElementById("bb-inp"); if (searchInput) { searchInput.focus(); searchInput.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); const query = this.value.trim(); if (query) { search(); dialog.modal("hide"); } } else if (e.key === "Escape") { e.preventDefault(); dialog.modal("hide"); } }); } const searchAllButton = document.getElementById("bb-search-all"); if (searchAllButton) { searchAllButton.title = "לחצו על אנטר כדי לחפש"; } }); })(); void 0;){kind=link}