𝗣𝗼𝗼𝗷𝘆𝗮𝗺 𝗗𝗼𝗹𝗹𝗮𝗿𝗶𝗹 𝗢𝗚 𝗜𝗺𝗮𝗴𝗲𝘀 𝗡𝗶𝗿𝗺𝗺𝗶𝗸𝗸𝗮𝗮𝗺

ഒരു API-ക്ക് പണം നൽകാതെ തന്നെ നൂറുകണക്കിന് ലേഖനങ്ങൾക്ക് വേണ്ടി നിങ്ങൾക്ക് OG ഇമേജുകൾ നിർമ്മിക്കാൻ കഴിയും.

HTML ടെംപ്ലേറ്റുകളുടെ സ്ക്രീൻഷോട്ട് എടുക്കാൻ ഞാൻ Playwright ഉപയോഗിക്കുന്നു. ഇത് നിങ്ങൾക്ക് പൂർണ്ണമായ CSS നിയന്ത്രണം നൽകുന്നു കൂടാതെ ഇതിന് പുറമെ മറ്റ് കീകൾ (keys) ആവശ്യമില്ല.

നിങ്ങൾ ഒരു സ്റ്റാറ്റിക് സൈറ്റ് (static site) ആണ് ഉപയോഗിക്കുന്നതെങ്കിൽ, ബച്ച് ഇമേജ് ജനറേഷൻ (batch image generation) കൈകാര്യം ചെയ്യാനുള്ള ഏറ്റവും മികച്ച മാർഗ്ഗമാണിത്.

എന്റെ രീതിയുടെ വിശദാംശങ്ങൾ താഴെ നൽകുന്നു.

മറ്റ് ഓപ്ഷനുകളേക്കാൾ ഞാൻ എന്തുകൊണ്ട് Playwright തിരഞ്ഞെടുത്തു:

  • Cloudinary: കസ്റ്റം ഫോണ്ടുകൾക്കായി പണം നൽകേണ്ടി വരുന്നു കൂടാതെ ഇതിന് സങ്കീർണ്ണമായ URL സിന്റാക്സ് ആണ് ഉള്ളത്.
  • Vercel OG: ഡൈനാമിക് സൈറ്റുകൾക്ക് ഇത് അനുയോജ്യമാണ്, എന്നാൽ ഞാൻ Cloudflare-ൽ സ്റ്റാറ്റിക് സൈറ്റുകളാണ് ഉപയോഗിക്കുന്നത്.
  • Node-canvas: C++ ഡിപെൻഡൻസികൾ (dependencies) ഉള്ളതിനാൽ CI-യിൽ സെറ്റപ്പ് ചെയ്യാൻ പ്രയാസമാണ്.
  • Pillow: സങ്കീർണ്ണമായ CSS ലേഔട്ടുകൾക്കോ ഫ്ലെക്സ്ബോക്സിനോ (flexbox) വേണ്ടി ഉപയോഗിക്കാൻ പ്രയാസമാണ്.

Playwright രീതി വളരെ ലളിതമാണ്. ഞാൻ CSS ഉപയോഗിച്ച് ഒരു HTML സ്ട്രിംഗ് നിർമ്മിക്കുന്നു. അത് ഒരു ഹെഡ്‌ലെസ്സ് ബ്രൗസറിലേക്ക് (headless browser) നൽകുന്നു. തുടർന്ന് ഒരു സ്ക്രീൻഷോട്ട് എടുക്കുന്നു.

ഫോണ്ടുകൾ, ഗ്രേഡിയന്റുകൾ, ഫ്ലെക്സ്ബോക്സ് എന്നിവയുൾപ്പെടെ എല്ലാം ബ്രൗസർ തന്നെ കൈകാര്യം ചെയ്യുന്നു.

പ്രധാന സാങ്കേതിക വിവരങ്ങൾ:

  • Accent Colors: ലേഖനത്തിലെ ടാഗുകൾ അടിസ്ഥാനമാക്കി നിറങ്ങൾ തിരഞ്ഞെടുക്കാൻ എന്റെ സ്ക്രിപ്റ്റ് regex ഉപയോഗിക്കുന്നു. ഒരു "AI" ടാഗുണ്ടെങ്കിൽ പർപ്പിൾ നിറവും, ഒരു "Webdev" ടാഗുണ്ടെങ്കിൽ ബ്ലൂ നിറവും തിരഞ്ഞെടുക്കുന്നു.
  • Dynamic Sizing: ടെക്സ്റ്റ് പുറത്തേക്ക് വരുന്നത് (overflow) ഒഴിവാക്കാൻ ടൈറ്റിലിന്റെ നീളത്തിനനുസരിച്ച് ഫോണ്ട് സൈസ് സ്ക്രിപ്റ്റ് ക്രമീകരിക്കുന്നു.
  • Avoiding Font Issues: ഞാൻ wait_until="networkidle" ഉപയോഗിക്കുന്നു. സ്ക്രീൻഷോട്ട് എടുക്കുന്നതിന് മുമ്പ് Google Fonts ലോഡ് ആകുന്നുണ്ടെന്ന് ഇത് ഉറപ്പാക്കുന്നു. ഇത് ചെയ്തില്ലെങ്കിൽ, ഇമേജിൽ സാധാരണ സിസ്റ്റം ഫോണ്ട് ഉപയോഗിക്കപ്പെടും.
  • Speed Optimization: ഞാൻ ഒരു ബ്രൗസർ ഇൻസ്റ്റൻസ് മാത്രം തുറക്കുകയും എല്ലാ ലേഖനങ്ങൾക്കും ഒരേ പേജ് ഒബ്‌ജക്റ്റ് തന്നെ വീണ്ടും ഉപയോഗിക്കുകയും ചെയ്യുന്നു. ഇത് CI പൈപ്പ്‌ലൈനിൽ വലിയ തോതിൽ സമയം ലാഭിക്കുന്നു.

പ്രവർത്തന രീതി (Workflow):

  1. സ്ക്രിപ്റ്റ് PNG നിർമ്മിക്കുന്നു.
  2. സ്ക്രിപ്റ്റ് ഇമേജ് URL ലേഖനത്തിന്റെ frontmatter-ൽ രേഖപ്പെടുത്തുന്നു.
  3. CI പൈപ്പ്‌ലൈൻ ഇമേജ് കമിറ്റ് (commit) ചെയ്യുന്നു.
  4. സൈറ്റ് ഡെപ്ലോയ് (deploy) ആകുന്നു.

Dev.to അല്ലെങ്കിൽ Hashnode പോലുള്ള പ്ലാറ്റ്‌ഫോമുകളിൽ ലേഖനം പ്രസിദ്ധീകരിക്കുന്നതിന് മുമ്പ് തന്നെ ഇമേജ് ലഭ്യമാണെന്ന് ഇത് ഉറപ്പാക്കുന്നു.

ഇത് എപ്പോൾ ഒഴിവാക്കണം:

ഓൺ-ഡിമാൻഡ് (on-demand) ജനറേഷനായി ഇത് ഉപയോഗിക്കരുത്. ഓരോ ഇമേജിനും Playwright ഏകദേശം 2 സെക്കൻഡ് എടുക്കും. ഇതിന് വലിയൊരു ബ്രൗസർ ബൈനറി ആവശ്യമാണ്. ലൈവ് റിക്വസ്റ്റുകൾക്ക് ഇത് വളരെ സാവധാനമാണ്.

സമയക്രമം നിങ്ങൾക്ക് നിയന്ത്രിക്കാൻ കഴിയുന്ന ബച്ച് ബിൽഡുകൾക്കായി (batch builds) ഇത് ഉപയോഗിക്കുക.

ഉറവിടം: https://dev.to/morinaga/what-i-learned-generating-og-images-for-articles-with-playwright-and-zero-api-cost-31o4