𝗚𝗲𝗻𝗲𝗿𝗮𝘁𝗶𝗻𝗴 𝗢𝗚 𝗜𝗺𝗮𝗴𝗲𝘀 𝗳𝗼𝗿 𝗭𝗲𝗿𝗼 𝗗𝗼𝗹𝗹𝗮𝗿𝘀

మీరు API కోసం డబ్బు చెల్లించకుండా వందలాది ఆర్టికల్స్ కోసం OG ఇమేజ్‌లను రూపొందించవచ్చు.

HTML టెంప్లేట్‌లను స్క్రీన్‌షాట్ చేయడానికి నేను Playwrightని ఉపయోగిస్తాను. ఇది మీకు పూర్తి CSS నియంత్రణను ఇస్తుంది మరియు దీనికి ఎటువంటి ఎక్స్‌టర్నల్ కీలు అవసరం లేదు.

మీరు ఒక స్టాటిక్ సైట్‌ను నడుపుతుంటే, బ్యాచ్ ఇమేజ్ జనరేషన్‌ను నిర్వహించడానికి ఇది ఉత్తమమైన మార్గం.

నా విధానం యొక్క వివరణ ఇక్కడ ఉంది.

ఇతర ఆప్షన్ల కంటే నేను Playwrightని ఎందుకు ఎంచుకున్నానంటే:

  • Cloudinary: కస్టమ్ ఫాంట్‌ల కోసం డబ్బు చెల్లించాల్సి ఉంటుంది మరియు దీని URL సింటాక్స్ సంక్లిష్టంగా ఉంటుంది.
  • Vercel OG: ఇది డైనమిక్ సైట్‌లకు పనిచేస్తుంది, కానీ నేను Cloudflareలో స్టాటిక్ సైట్‌లను ఉపయోగిస్తాను.
  • Node-canvas: C++ డిపెండెన్సీల వల్ల CIలో సెటప్ చేయడం కష్టం.
  • Pillow: సంక్లిష్టమైన CSS లేఅవుట్‌లు లేదా flexbox కోసం దీనిని ఉపయోగించడం కష్టం.

Playwright పద్ధతి చాలా సరళమైనది. నేను CSSతో ఒక HTML స్ట్రింగ్‌ను నిర్మిస్తాను. దానిని ఒక headless browserకి పంపిస్తాను. ఆపై స్క్రీన్‌షాట్ తీసుకుంటాను.

బ్రౌజర్ అన్నింటినీ హ్యాండిల్ చేస్తుంది: fonts, gradients, మరియు flexbox.

ముఖ్యమైన సాంకేతిక వివరాలు:

  • Accent Colors: ఆర్టికల్ ట్యాగ్‌ల ఆధారంగా రంగులను ఎంచుకోవడానికి నా స్క్రిప్ట్ regexని ఉపయోగిస్తుంది. "AI" ట్యాగ్ ఉంటే పర్పుల్ రంగును, "Webdev" ట్యాగ్ ఉంటే బ్లూ రంగును ఎంచుకుంటుంది.
  • Dynamic Sizing: ఓవర్‌ఫ్లో కాకుండా ఉండటానికి, టైటిల్ పొడవును బట్టి స్క్రిప్ట్ ఫాంట్ సైజును సర్దుబాటు చేస్తుంది.
  • Avoiding Font Issues: నేను wait_until="networkidle"ని ఉపయోగిస్తాను. దీనివల్ల స్క్రీన్‌షాట్ తీయడానికి ముందే Google Fonts లోడ్ అయ్యేలా చూడవచ్చు. ఇది లేకపోతే, ఇమేజ్ ఒక సాధారణ సిస్టమ్ ఫాంట్‌ను ఉపయోగిస్తుంది.
  • Speed Optimization: నేను ఒకే బ్రౌజర్ ఇన్‌స్టన్స్‌ను ఓపెన్ చేసి, అన్ని ఆర్టికల్స్ కోసం అదే page objectని మళ్లీ ఉపయోగిస్తాను. ఇది CI పైప్‌లైన్‌లో గణనీయమైన సమయాన్ని ఆదా చేస్తుంది.

వర్క్‌ఫ్లో:

  1. స్క్రిప్ట్ PNGని జనరేట్ చేస్తుంది.
  2. స్క్రిప్ట్ ఇమేజ్ URLని తిరిగి ఆర్టికల్ frontmatterలో రాస్తుంది.
  3. CI పైప్‌లైన్ ఇమేజ్‌ను కమిట్ చేస్తుంది.
  4. సైట్ డిప్లాయ్ అవుతుంది.

దీనివల్ల ఆర్టికల్ Dev.to లేదా Hashnode వంటి ప్లాట్‌ఫారమ్‌లలో ప్రచురించబడకముందే ఇమేజ్ లైవ్‌లోకి వస్తుంది.

దీనిని ఎప్పుడు నివారించాలి:

దీనిని on-demand జనరేషన్ కోసం ఉపయోగించకండి. Playwright ప్రతి ఇమేజ్‌కు సుమారు 2 సెకన్ల సమయం తీసుకుంటుంది. దీనికి భారీ బ్రౌజర్ బైనరీ అవసరం. లైవ్ రిక్వెస్ట్‌లకు ఇది చాలా నెమ్మదిగా ఉంటుంది.

మీరు సమయాన్ని నియంత్రించగలిగే బ్యాచ్ బిల్డ్‌ల కోసం దీనిని ఉపయోగించండి.

Source: https://dev.to/morinaga/what-i-learned-generating-og-images-for-articles-with-playwright-and-zero-api-cost-31o4