מדריך | שיתוף פרויקט: צג חכם לבית כנסת חינם על ידי GitHub Pages
-
לפני בערך שנה התחלתי לעבוד על פרויקט קטן שכבר מזמן היה לי בראש: לוח זמנים דיגיטלי לבית כנסת, חינמי לגמרי, שכל גבאי יוכל להקים לעצמו,HTML + JS + GitHub Pages, בלי שרתים וללא תשלום ועם מעט ידע טכני.
הגעתי לרמה של שלד בסיסי, זמני היום הבסיסיים, ו־config.js שצריך לערוך ידנית, ושם זה נתקע. הזמן לא הסתדר, והרשימה של הדברים שרציתי והיו חסרים רק התארכה.
לפני כמה ימים החלטתי לנסות משהו אחר, לתת את המושכות לקלוד. פתחתי את המאגר, הסברתי לאן אני רוצה להגיע, ופשוט עברתי לתפקיד של PM, לראות מה הוא בונה, להגיד מה לא מתאים, להוסיף דרישות, לתפוס באגים שהוא מחמיץ. תהליך מוזר אבל לשם שינוי אפקטיבי.
אז מה יש עכשיו (חלקי):
- זמני היום (עלות/משיכיר/הנץ, סו״ז ק״ש מג״א+גר״א, סו״ז תפילה מג״א+גר״א, חצות, מנחה גדולה/קטנה, פלג, שקיעה,צאה״כ) מחושבים בדפדפן דרך @hebcal/core לפי כתובת מוגדרת מראש
- הגדרה של זמנים באופן ידני במקום מהכתובת
- מספר מניינים לכל תפילה, מקובצים על הצג לפי סוג תפילה עם שם חדר תפילה בכל שורה
- הדלקת נרות וצאת השבת מחושבים מהמיקום, מנחה ערב שבת/מוצ״ש כ־offset
- לוח הנצחות שמזהה יארצייטים (תאריך עברי, מעבר בשקיעה)
- אירועים מיוחדים עם תאריך עברי/לועזי + רשימת זמני תפילה; preset dropdown לחגים נפוצים
- שורת איזכורים אוטומטית: משיב הרוח / מוריד הטל, ותן ברכה / ותן טל ומטר, יעלה ויבוא, על הניסים, לפי החודש העברי (לא נבדק במלואו)
- ספירת העומר בנוסח המלא + הספירה של היום
- marquee loop infinite scroll בכרטיסים שגולשים (הכותרת מקובעת, ללא scrollbar)
- אוטו־reload של הצג בכל commit חדש למאגר
הקטע שהכי מעניין טכנית, הוא עמוד הניהול:
דף הניהול הוא סטטי (כיאה ל GitHub Pages) אבל כותב בחזרה למאגר. המשתמש מפעיל workflow_dispatch דרך GitHub API עם fine-grained PAT (הרשאת Actions: RW על המאגר הזה בלבד). ה־workflow מחשב HMAC-SHA256(payload, secrets.ADMIN_PASSWORD) ומשווה לטוקן שהדפדפן שלח. אם תואם — commit ל־data/*.json, אחרת fail. הסיסמה לא יוצאת מהדפדפן, ה־PAT לא יכול לכתוב ישירות,
ה־inputs מוסתרים ב־::add-mask:: בתחילת ה־workflow. auth ב־static GH Pages בלי backend, וזה מרגיש נכון.קישורים:
- קוד: https://github.com/613avi/smart-zmanim
- דמו חי: https://613avi.github.io/smart-zmanim
- README עם הוראות הקמה מלאות (PAT, Secret, Pages) במאגר
(אני לא רוצה לשתף כאן גישה לממשק הניהול כי זה כולל אפשרות של כתיבה לכל המאגר ולא ממש מתחשק לי לשתף את זה פומבי, אבל אפשר לעשות fork ולהגדיר לעצמכם
הפרויקט תחת CC BY-NC-SA 4.0 — שימוש לא־מסחרי בלבד, כולל חלקים מהקוד. אסור לעטוף את זה כמוצר בתשלום או לשלב חלקים בקוד מסחרי. המטרה היא שזה יישאר מחוץ לעולם הכסף.
,Contributions welcome, issues, PRs
דיונים. רעיונות ועוד מוזמנים לבצע תיקונים בעצמך ולהציע PR, לא יהיה לי זמן לבצע שינויים לפי בקשת הציבור,
כמו"כ מי שמעוניין להציע עיצובים שונים, אשמח מאד אם יעלה PR, לא היה לי זמן לעבוד גם על זה.היה חשוב לי להוכיח את הלוגיקה והאפשרות עכשיו שהגרעין קיים הציבור מוזמן לקחת את זה רחוק ככל האפשר.
פרטיות:
כל המידע כולל שמות להנצחה שעות תפילה בכל השנה שמורים בריפו שהוא ציבורי כדי שיהיה GitHub Pages בחינם אלא א"כ אתה מעוניין לשלם מינוי לגיטהאב.
המידע הזה הוא בעצם המידע שמוצג על הצג ככה שהוא לא ממש סודי אבל היה חשוב לי להבהיר. -
לפני בערך שנה התחלתי לעבוד על פרויקט קטן שכבר מזמן היה לי בראש: לוח זמנים דיגיטלי לבית כנסת, חינמי לגמרי, שכל גבאי יוכל להקים לעצמו,HTML + JS + GitHub Pages, בלי שרתים וללא תשלום ועם מעט ידע טכני.
הגעתי לרמה של שלד בסיסי, זמני היום הבסיסיים, ו־config.js שצריך לערוך ידנית, ושם זה נתקע. הזמן לא הסתדר, והרשימה של הדברים שרציתי והיו חסרים רק התארכה.
לפני כמה ימים החלטתי לנסות משהו אחר, לתת את המושכות לקלוד. פתחתי את המאגר, הסברתי לאן אני רוצה להגיע, ופשוט עברתי לתפקיד של PM, לראות מה הוא בונה, להגיד מה לא מתאים, להוסיף דרישות, לתפוס באגים שהוא מחמיץ. תהליך מוזר אבל לשם שינוי אפקטיבי.
אז מה יש עכשיו (חלקי):
- זמני היום (עלות/משיכיר/הנץ, סו״ז ק״ש מג״א+גר״א, סו״ז תפילה מג״א+גר״א, חצות, מנחה גדולה/קטנה, פלג, שקיעה,צאה״כ) מחושבים בדפדפן דרך @hebcal/core לפי כתובת מוגדרת מראש
- הגדרה של זמנים באופן ידני במקום מהכתובת
- מספר מניינים לכל תפילה, מקובצים על הצג לפי סוג תפילה עם שם חדר תפילה בכל שורה
- הדלקת נרות וצאת השבת מחושבים מהמיקום, מנחה ערב שבת/מוצ״ש כ־offset
- לוח הנצחות שמזהה יארצייטים (תאריך עברי, מעבר בשקיעה)
- אירועים מיוחדים עם תאריך עברי/לועזי + רשימת זמני תפילה; preset dropdown לחגים נפוצים
- שורת איזכורים אוטומטית: משיב הרוח / מוריד הטל, ותן ברכה / ותן טל ומטר, יעלה ויבוא, על הניסים, לפי החודש העברי (לא נבדק במלואו)
- ספירת העומר בנוסח המלא + הספירה של היום
- marquee loop infinite scroll בכרטיסים שגולשים (הכותרת מקובעת, ללא scrollbar)
- אוטו־reload של הצג בכל commit חדש למאגר
הקטע שהכי מעניין טכנית, הוא עמוד הניהול:
דף הניהול הוא סטטי (כיאה ל GitHub Pages) אבל כותב בחזרה למאגר. המשתמש מפעיל workflow_dispatch דרך GitHub API עם fine-grained PAT (הרשאת Actions: RW על המאגר הזה בלבד). ה־workflow מחשב HMAC-SHA256(payload, secrets.ADMIN_PASSWORD) ומשווה לטוקן שהדפדפן שלח. אם תואם — commit ל־data/*.json, אחרת fail. הסיסמה לא יוצאת מהדפדפן, ה־PAT לא יכול לכתוב ישירות,
ה־inputs מוסתרים ב־::add-mask:: בתחילת ה־workflow. auth ב־static GH Pages בלי backend, וזה מרגיש נכון.קישורים:
- קוד: https://github.com/613avi/smart-zmanim
- דמו חי: https://613avi.github.io/smart-zmanim
- README עם הוראות הקמה מלאות (PAT, Secret, Pages) במאגר
(אני לא רוצה לשתף כאן גישה לממשק הניהול כי זה כולל אפשרות של כתיבה לכל המאגר ולא ממש מתחשק לי לשתף את זה פומבי, אבל אפשר לעשות fork ולהגדיר לעצמכם
הפרויקט תחת CC BY-NC-SA 4.0 — שימוש לא־מסחרי בלבד, כולל חלקים מהקוד. אסור לעטוף את זה כמוצר בתשלום או לשלב חלקים בקוד מסחרי. המטרה היא שזה יישאר מחוץ לעולם הכסף.
,Contributions welcome, issues, PRs
דיונים. רעיונות ועוד מוזמנים לבצע תיקונים בעצמך ולהציע PR, לא יהיה לי זמן לבצע שינויים לפי בקשת הציבור,
כמו"כ מי שמעוניין להציע עיצובים שונים, אשמח מאד אם יעלה PR, לא היה לי זמן לעבוד גם על זה.היה חשוב לי להוכיח את הלוגיקה והאפשרות עכשיו שהגרעין קיים הציבור מוזמן לקחת את זה רחוק ככל האפשר.
פרטיות:
כל המידע כולל שמות להנצחה שעות תפילה בכל השנה שמורים בריפו שהוא ציבורי כדי שיהיה GitHub Pages בחינם אלא א"כ אתה מעוניין לשלם מינוי לגיטהאב.
המידע הזה הוא בעצם המידע שמוצג על הצג ככה שהוא לא ממש סודי אבל היה חשוב לי להבהיר. -
לפני בערך שנה התחלתי לעבוד על פרויקט קטן שכבר מזמן היה לי בראש: לוח זמנים דיגיטלי לבית כנסת, חינמי לגמרי, שכל גבאי יוכל להקים לעצמו,HTML + JS + GitHub Pages, בלי שרתים וללא תשלום ועם מעט ידע טכני.
הגעתי לרמה של שלד בסיסי, זמני היום הבסיסיים, ו־config.js שצריך לערוך ידנית, ושם זה נתקע. הזמן לא הסתדר, והרשימה של הדברים שרציתי והיו חסרים רק התארכה.
לפני כמה ימים החלטתי לנסות משהו אחר, לתת את המושכות לקלוד. פתחתי את המאגר, הסברתי לאן אני רוצה להגיע, ופשוט עברתי לתפקיד של PM, לראות מה הוא בונה, להגיד מה לא מתאים, להוסיף דרישות, לתפוס באגים שהוא מחמיץ. תהליך מוזר אבל לשם שינוי אפקטיבי.
אז מה יש עכשיו (חלקי):
- זמני היום (עלות/משיכיר/הנץ, סו״ז ק״ש מג״א+גר״א, סו״ז תפילה מג״א+גר״א, חצות, מנחה גדולה/קטנה, פלג, שקיעה,צאה״כ) מחושבים בדפדפן דרך @hebcal/core לפי כתובת מוגדרת מראש
- הגדרה של זמנים באופן ידני במקום מהכתובת
- מספר מניינים לכל תפילה, מקובצים על הצג לפי סוג תפילה עם שם חדר תפילה בכל שורה
- הדלקת נרות וצאת השבת מחושבים מהמיקום, מנחה ערב שבת/מוצ״ש כ־offset
- לוח הנצחות שמזהה יארצייטים (תאריך עברי, מעבר בשקיעה)
- אירועים מיוחדים עם תאריך עברי/לועזי + רשימת זמני תפילה; preset dropdown לחגים נפוצים
- שורת איזכורים אוטומטית: משיב הרוח / מוריד הטל, ותן ברכה / ותן טל ומטר, יעלה ויבוא, על הניסים, לפי החודש העברי (לא נבדק במלואו)
- ספירת העומר בנוסח המלא + הספירה של היום
- marquee loop infinite scroll בכרטיסים שגולשים (הכותרת מקובעת, ללא scrollbar)
- אוטו־reload של הצג בכל commit חדש למאגר
הקטע שהכי מעניין טכנית, הוא עמוד הניהול:
דף הניהול הוא סטטי (כיאה ל GitHub Pages) אבל כותב בחזרה למאגר. המשתמש מפעיל workflow_dispatch דרך GitHub API עם fine-grained PAT (הרשאת Actions: RW על המאגר הזה בלבד). ה־workflow מחשב HMAC-SHA256(payload, secrets.ADMIN_PASSWORD) ומשווה לטוקן שהדפדפן שלח. אם תואם — commit ל־data/*.json, אחרת fail. הסיסמה לא יוצאת מהדפדפן, ה־PAT לא יכול לכתוב ישירות,
ה־inputs מוסתרים ב־::add-mask:: בתחילת ה־workflow. auth ב־static GH Pages בלי backend, וזה מרגיש נכון.קישורים:
- קוד: https://github.com/613avi/smart-zmanim
- דמו חי: https://613avi.github.io/smart-zmanim
- README עם הוראות הקמה מלאות (PAT, Secret, Pages) במאגר
(אני לא רוצה לשתף כאן גישה לממשק הניהול כי זה כולל אפשרות של כתיבה לכל המאגר ולא ממש מתחשק לי לשתף את זה פומבי, אבל אפשר לעשות fork ולהגדיר לעצמכם
הפרויקט תחת CC BY-NC-SA 4.0 — שימוש לא־מסחרי בלבד, כולל חלקים מהקוד. אסור לעטוף את זה כמוצר בתשלום או לשלב חלקים בקוד מסחרי. המטרה היא שזה יישאר מחוץ לעולם הכסף.
,Contributions welcome, issues, PRs
דיונים. רעיונות ועוד מוזמנים לבצע תיקונים בעצמך ולהציע PR, לא יהיה לי זמן לבצע שינויים לפי בקשת הציבור,
כמו"כ מי שמעוניין להציע עיצובים שונים, אשמח מאד אם יעלה PR, לא היה לי זמן לעבוד גם על זה.היה חשוב לי להוכיח את הלוגיקה והאפשרות עכשיו שהגרעין קיים הציבור מוזמן לקחת את זה רחוק ככל האפשר.
פרטיות:
כל המידע כולל שמות להנצחה שעות תפילה בכל השנה שמורים בריפו שהוא ציבורי כדי שיהיה GitHub Pages בחינם אלא א"כ אתה מעוניין לשלם מינוי לגיטהאב.
המידע הזה הוא בעצם המידע שמוצג על הצג ככה שהוא לא ממש סודי אבל היה חשוב לי להבהיר. -
@צדיק-0 עבודה יפה.
כמה רעיונות לשיפור:
תזמון תפילות לפי זמני היום (זריחה/שקיעה/סו"ז ק"ש)
אפשרות לבחירת תמונת רקע.
תמיכה במספר נוסחים.
תמיכה במספר גופנים.
והעיצוב הכללי כמובן... -
-
@צדיק-0
זה מדהים מה שעשית
נראה לי שבמובן מסויים זה יהיה מאד נגיש אם יהיה אפשר לשנות מהאתר עצמו ולא בקודים של גיטהב -
@מיישה יש גם דף ניהול, הוא פשוט מצריך הגדרה חד פעמית כדי לגשת אליו ואז הוא משמש כניהול
אני אעלה אח"כ צילומי מסך
 { 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}