בפוסט הקודם הסברתי איך לייבא את התגובות הישנות מ Wordpress ל-11ty. בפוסט הזה, אראה איך להתקין שרת Staticman, ואיך לחבר אליו את טופס התגובות באתר.

Staticman logo by Erlen Masson

גם הפעם הסתמכתי על מדריך קיים שחיבר Travis Downs עבור שילוב Staticman בבלוג מבוסס Jekyll. בסופו של דבר, ביצעתי את השלבים הבאים:

1. יצירת חשבון בוט ב GitHub (לגמרי לפי המדריך הנ"ל)
2. הגדרות staticman.yml (גם כן לפי המדריך)
3. הגדרות staticman בתוך src/globals/site.json. כאן יש הבדל לעומת המדריך, מכוון שקובץ זה יחודי ל 11ty, ובמדריך ההתיחסות היא לסביבת Jekyll. בכל מקרה, העקרונות דומים, וכאן תוכלו לראות את ההגדרות שלי.
4. הקמת שרת staticman. אחרי יצירת המפתחות, בחרתי בדרך שונה מהמומלץ (הקמה דרך Heroku), ובמקום זה העלתי שרת עצמאי שרץ דרך docker. בניגוד למוסבר בדקומנטציה, כאן יש חוסר בתיעוד המקורי, ויש לזכור להגדיר את מפתחות ההצפנה בקובץ docker-compose.yml
5. הזמנת הבוט להשתתף ב repo (ע"פ המדריך)
6. הפעלת reCAPCHA - בעיקר על פי המדריך. יש לשים לב שבחלק המתייחס ל ‎_config.yml יש לבצע את השינויים במקום זאת ב src/globals/site.json
7. שילוב התגובות באתר. כאן ההבדלים מעט יותר משמעותיים, הן בגלל ההבדלים בין Jekyll ל-11ty, והן בגלל הרצון שלי לתמוך בקינון מעבר לרמה אחת. בנוסף, לא אהבתי את ה JS של הפוסט המקורי שמשתש במעורב ב jQuery ו-Vanilla JS. במקום זה השתמשתי בספריה רזה יותר בשם cash, שמאפשרת סינטקס דמוי jQuery במחיר של תמיכה בפחות פיצ'רים ופחות דפדפנים ישנים (אבל עדיין תומכת ב IE11). על הצגת התגובות כתבתי בפוסט הקודם. העבודה על טופס התגובות החדשות מסתכמת בסופו של דבר בקבצי ה HTML, CSS, ו-JS אותם תוכלו לראות ב repo הסופי.

מוזמנים להגיב למטה ולראות איך כל ה flow עובד. עד לאישור, תוכלו לצפות בתגובות שלכם באזור ה Pull Requests של הבלוג.

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

בשלב הראשון של המעבר יש צורך ליצא את כל התוכן מוורדפרס ל-Markdown. לטובת זה השתמשתי בפלאגאין לוורדפרס שפותח דווקא עבור Gatsby ונקרא: WP Gatsby Markdown Exporter. בקישור ניתן לקרוא כיצד להפעיל אותו. אני השתמשתי באופציית ה WP-CLI. משום מה הייתה לו בעיה ליצא את התמונות, ולכן הפעלתי את האופציות שמנטרלות את החלק הזה. הפקודה הסופית הייתה:

wp gatsby-markdown-export --skip_copy_uploads --skip_original_images --directory=/var/www/html/md-export

זה מייצר אוסף של קבצי Markdown, שנראה בערך ככה:

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

בשלב הבא בחרתי ב starter project מתוך דף התבניות של Eleventy. המבחר די דל, ואין עדיין אף תבנית מותאמת עברית. לבסוף, בחרתי בתבנית 11r. זוהי תבנית dark mode, ומבוססת Tailwind CSS, ורוב היפוכי הכוון הגיעו out of the box, ברגע שהוספתי dir=rtl לתגית הראשית של הדף. את התוצאה אחרי הגיור תוכלו למזלג מהריפו שלי. את הפוסטים בהיררכיה המקורית מעלים לתיקיית src/posts, ואחרי מעקב אחרי ההוראות בREADME, אפשר לראות את התוצאה.

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

האפשרות שאני בחרתי בה היא שימוש ב Staticman. הרעיון כאן הוא שכל תגובה היא בעצם קובץ שנשמר גם כן בgit, ומנגנון אישור התגובה נעשה באופן דומה לאישור Pull Request. המנוע של Staticman דואג לייצר את ה PR-ים, כך שמבחינת המשתמשים באתר שליחת התגובה מתבצעת באמצעות טופס על הדף, בדומה לוורדפרס.

בנוסף לזה, יש צורך לייבא ולשמר את התגובות מהבלוג הישן. כאן השתמשתי בכלי שבמקור נכתב לטובת העברת תגובות לאתרים סטטים מבוססי Jekyll. נדרשו שינויים קלים, אבל בסופו של דבר גם כאן זה מסתכם בהרצה לפי ה README, והוספה של כל קבצי התגובות תחת התיקיה src/globals/comments כך שכל התגובות לפוסט מסויים מרוכזות תחת תיקיה לפי ה slag של הפוסט. מי שמעוניין יכול לקרוא עוד על מודל הנתונים של Eleventy.

התוספת האחרונה היא מעט קוד שידע לשלוף את התגובות המתאימות לכל פוסט ולהציג אותן לפי ההיררכיה המקורית. הקוד הזה מחולק בין קוד JS, שאותו ניתן למצוא ב /filters/comments-tree.js ונראה כך:

module.exports = (obj) => {
  const allComments = obj ? Object.values(obj) : [];
  const commentsById = {};
  allComments.forEach(c => {
    c.id = c.id || c._id;
    commentsById[c.id] = c;
  });
  const rootComments = [];
  allComments.forEach(c => {
    if (c.parentId && c.parentId !== "0") {
      const parent = commentsById[c.parentId];
      if (parent) {
        parent.replies = parent.replies || [];
        parent.replies.push(c);
      } else {
        console.error(`can't find parentID: ${c.parentId} for ID: ${c.id}`);
      }
    } else {
      rootComments.push(c);
    }

  });
  return rootComments;
};

והחלק המשלים שנמצא בתבנית התגובות src/includes/comments.njk. על ריקורסיה ב nunjucks למדתי מהissue הזה. עכשיו ניתן לראות גם את התגובות בהתאם לדו-שיח שנוהל בזמנו:

בפוסט הבא ארחיב על הכנת הטופס לתגובות והאינטגרציה עם הבוט של Staticman.

המעבר לשרת חדש גרם לי לחשוב שוב על WordPress והאם הוא עדיין מתאים לבלוגים ב-2020. כאשר התחלתי את האתר, PHP הייתה אחת משתי שפות התכנות המובילות לווב (יחד עם העולה החדש דאז Ruby on Rails). מאוחר יותר זו גם הייתה שפת התכנות בה עבדתי, וזה נראה לי טבעי להמשיך איתה. מאז עברתי לסביבה חדשה מבוססת NodeJS, ו-PHP נראית לי כמו עוף מוזר (שלא לאמר דינוזאור).

אחרי בחינה של מספר אפשרויות, הגעתי למסקנה שהנתיב הטבעי להמשך הוא Static Site Generators (SSG). הרעיון כאן הוא ליצר את קבצי ה HTML של האתר מתוך התכנים הדינמיים, ומכאן והלאה ההגשה לדפדפן נעשית של קבצים סטטיים בלבד. מתוך המגוון הגדול של האפשרויות, בחרתי את Eleventy (או בקיצור 11ty). הוא מבוסס NodeJS, ויחסית לאחיו הוותיק יותר (Gatsby), הוא פחות אפליקציה ויותר SSG טהור.

ייצור האתר נעשה ע"י הגדרת תבניות והפעלה שלהן על תוכן האתר שהוא קבצי Markdown. את קבצי התוכן שומרים ב git יחד עם הקוד של האתר, כך שנוצר סוג של בלבול בינהם. כדי לבצע את ההפרדה בצורה טובה יותר וגם בגלל התמיכה הבעייתית של Markdown בעברית, בחרתי להשתמש ב Headless CMS: מערכת ניהול תוכן, שבה כתיבה התכנים מנותקת מההצגה שלהן (בניגוד ל WordPress שבה העריכה והתצוגה נעשים באותה מערכת). הרעיון כאן הוא לאפשר לכותבי תוכן שאינם מכירים קוד או אפילו Markdown לערוך את התוכן דרך עורך יעודי (סטייל WordPress), כאשר הקבצים נשלחים מהעורך אל ה git-repo. יתרון משמעותי ליושבים בציון (ובשאר המזרח התיכון) הוא האפשרות לתמיכה הרבה יותר טובה בעריכה ב-RTL.

ל Headless CMS בחרתי את Forestry (ישנן אלטרנטיבות נוספות כמו: Contentful, Netlify CMS), שנראית לי הנקייה ביותר לשימוש. בניגוד ל Contentful, אין לה תמיכה מובנית ב-RTL, אבל באמצעות תפריט "הפוך כוון כתיבה" של Firefox, אפשר לערוך את התוכן בקלות. ל Forestry יש גם תמיכה נוחה בעריכת ה meta-data של הפוסטים (כותרת, קטגוריות וכד'), כך שמקבלים כמעט חוויה מלאה של עורך תוכן משולב, כמו שניתן לראות כאן:

לצורך השוואה, כך נראה ה Markdown של אותו הפוסט ב GitHub:

אז איך עושים את המעבר? על כך בפוסט הבא.