कंटेंट पर जाएँ
charmotion
शुरू करें

ओपन-सोर्स README मैस्कॉट GIF: साइज़, डार्क मोड और लाइसेंसिंग

Charmotion टीम द्वारा · अपडेट:

गाइड का कवर इलस्ट्रेशन: ओपन-सोर्स README मैस्कॉट GIF: साइज़, डार्क मोड और लाइसेंसिंग, Charmotion के डेमो कैरेक्टर के साथ

README मैस्कॉट के लिए दो छोटी GIF commit करें, एक लाइट बैकग्राउंड पर और एक डार्क बैकग्राउंड पर, और उन्हें picture element में रखें ताकि GitHub हर थीम के लिए सही GIF दिखाए। GitHub के editor से जोड़ी गई इमेज की सीमा 10 MB है, लेकिन इससे काफ़ी छोटी फ़ाइल रखें। alt text जोड़ें, और मैस्कॉट का लाइसेंस कोड से अलग रखें।

मुख्य बातें

  • GitHub अगस्त 2022 से Markdown में prefers-color-scheme के साथ picture element को सपोर्ट करता है।
  • ठोस बैकग्राउंड वाली GIF के लिए हर थीम का अलग एक्सपोर्ट चाहिए, क्योंकि GIF में साफ़ आंशिक ट्रांसपेरेंसी नहीं होती।
  • Editor से अपलोड की गई इमेज और GIF की सीमा 10 MB है; 50 MiB से बड़ी फ़ाइलों पर Git चेतावनी देता है और 100 MiB से बड़ी फ़ाइलों को GitHub ब्लॉक करता है।
  • GitHub यूज़र्स को GIF का ऑटोप्ले रोकने देता है, और डिफ़ॉल्ट रूप से सिस्टम की मोशन कम करें सेटिंग को फ़ॉलो करता है।
  • कोड लाइसेंस आर्टवर्क के बारे में बहुत कम कहते हैं; उदाहरण के लिए, Go gopher CC BY 4.0 के तहत है, जो Go के कोड लाइसेंस से अलग है।

पहले से कोई कैरेक्टर या लोगो है? अपने कैरेक्टर को असली ऐप स्क्रीन में देखें: स्प्लैश, ऑनबोर्डिंग, लोडिंग और एम्प्टी स्टेट स्क्रीन। यह फ़्री है, आपके ब्राउज़र में चलता है और कुछ भी अपलोड नहीं होता।

GitHub पर README GIF कितनी बड़ी हो सकती है?

यह इस पर निर्भर करता है कि आप उसे कैसे जोड़ते हैं।

  • Issue, PR या web editor में ड्रैग करके: GitHub की सीमा इमेज और GIF के लिए 10 MB है, वीडियो के लिए फ़्री प्लान पर 10 MB और पेड प्लान पर 100 MB (GitHub Docs)।
  • Repository में commit करके: 50 MiB से बड़ी फ़ाइलों पर Git चेतावनी देता है, GitHub 100 MiB से बड़ी फ़ाइलों को ब्लॉक करता है, और ब्राउज़र से अपलोड की सीमा 25 MiB है (GitHub Docs)।

ये अधिकतम सीमाएँ हैं, लक्ष्य नहीं। जो भी repo clone करता है, वह आपकी commit की गई GIF का हर वर्ज़न डाउनलोड करता है, और README हर विज़िट पर उसे लोड करता है। जिस साइज़ में GIF दिखती है, उसी साइज़ का एक छोटा लूप काफ़ी है। यह palette-आधारित command क्लिप का साइज़ और रंग बदलता है; इसे ffmpeg 7.1.1 के साथ एक डेमो MP4 पर चलाया गया था:

ffmpeg -i wave.mp4 -vf "fps=15,scale=240:-1:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" mascot.gif

फ़ाइलों को .github/assets/ या docs/ जैसे किसी फ़ोल्डर में रखें, ताकि प्रोजेक्ट रूट में भीड़ न हो।

GitHub डार्क मोड में अलग GIF कैसे दिखाएँ?

HTML picture element को prefers-color-scheme के साथ इस्तेमाल करें। GitHub ने 2022 में Markdown में इसके सपोर्ट की घोषणा की (GitHub Changelog), और GitHub Blog यही पैटर्न दिखाता है (GitHub Blog):

<picture>
  <source media="(prefers-color-scheme: dark)" srcset=".github/assets/mascot-dark.gif">
  <source media="(prefers-color-scheme: light)" srcset=".github/assets/mascot-light.gif">
  <img alt="Kiko, the project mascot, waving" src=".github/assets/mascot-light.gif" width="240">
</picture>

जब कोई source मैच न करे या कोई renderer picture को अनदेखा करे, तब img fallback का काम करता है, और alt text उसी में होता है। पुराने README #gh-dark-mode-only और #gh-light-mode-only URL fragments इस्तेमाल करते हैं; अब GitHub का अपना ब्लॉग picture element वाला तरीका दिखाता है।

दो GIF क्यों? GIF में आंशिक ट्रांसपेरेंसी नहीं होती: हर पिक्सेल या तो पूरी तरह दिखता है या पूरी तरह ट्रांसपेरेंट होता है, इसलिए जिस बैकग्राउंड के लिए GIF नहीं बनी, उस पर किनारे खुरदुरे और halo वाले दिखते हैं। ठोस बैकग्राउंड वाली GIF में halo नहीं आता, लेकिन दूसरी थीम पर एक बॉक्स दिखता है। GitHub कई डार्क थीम देता है, इसलिए किसी एक रंग से मैच करने की कोशिश न करें: मैस्कॉट को ऐसे rounded card रंग पर रखें जो सभी थीम पर सोच-समझकर चुना हुआ लगे।

ग्रेडिएंट पर अल्फ़ा चैनल वाले स्मूथ किनारे और one-bit GIF के टेढ़े-मेढ़े किनारे की ज़ूम की गई तुलना

ट्रांसपेरेंट WebM से डार्क वर्ज़न बनाने के लिए उसे किसी रंग पर composite करें और palette एक ही पास में बनाएँ। इसे ffmpeg 7.1.1 के साथ टेस्ट किया गया था; color का साइज़ WebM के बराबर रखें (यहाँ 1080×1080):

ffmpeg -c:v libvpx-vp9 -i wave.webm -f lavfi -i color=c=0x22272e:s=1080x1080   -filter_complex "[1:v][0:v]overlay=shortest=1,fps=15,scale=240:-1:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse"   mascot-dark.gif

क्या picture वाला तरीका GitHub के बाहर भी काम करता है?

हर उस जगह टेस्ट करें जहाँ आपका README दिखता है। GitHub के ब्लॉग के अनुसार यह तरीका repository README, GitHub पर होस्ट किए गए documentation और GitHub.com पर रेंडर होने वाले दूसरे Markdown में काम करता है। Package registries, दूसरे code hosts और editor प्रीव्यू अपने Markdown renderer इस्तेमाल करते हैं और सिर्फ़ fallback img दिखा सकते हैं, या HTML पूरी तरह हटा सकते हैं।

दो आदतें मैस्कॉट को हर जगह सही दिखाती हैं:

  • ऐसा fallback चुनें जो दोनों थीम पर ठीक लगे। Rounded card पर लाइट GIF, या एक स्थिर PNG, डार्क GIF से ज़्यादा सुरक्षित है।
  • जहाँ README दोबारा पब्लिश होता है, वहाँ absolute URL इस्तेमाल करें। Relative paths GitHub पर तो काम करते हैं, लेकिन जब कोई registry README कॉपी करती है तो टूट सकते हैं; raw file URL या release asset से यह समस्या नहीं होती।

क्या ऑटोप्ले होने वाली README GIF एक्सेसिबिलिटी की समस्या है?

हो सकती है, इसलिए इसे छोटा और शांत रखें। GIF डिफ़ॉल्ट रूप से हमेशा लूप होती हैं। WCAG 2.2.2 के अनुसार, जो चलता हुआ कंटेंट अपने आप शुरू होता है, पाँच सेकंड से ज़्यादा चलता है और दूसरे कंटेंट के साथ दिखता है, उसे रोका जा सकना चाहिए (W3C)।

यहाँ GitHub मदद करता है: 2022 से इसमें एनिमेटेड इमेज को अपने आप चलने से रोकने की सेटिंग है, जो डिफ़ॉल्ट रूप से ऑपरेटिंग सिस्टम की मोशन कम करें सेटिंग को फ़ॉलो करती है और ऑटोप्ले बंद होने पर play और pause कंट्रोल जोड़ देती है (GitHub Changelog)। आप भी अपनी ओर से ये कर सकते हैं:

  • उछलते रिएक्शन के बजाय idle या wave जैसा हल्का लूप चुनें,
  • या इसे एक बार चलने वाला बनाएँ: ffmpeg का GIF muxer बिना लूप के लिए -loop -1 लेता है,
  • हमेशा ऐसा alt text लिखें जिसमें मैस्कॉट का नाम और वह क्या कर रहा है, दोनों हों।

Docs साइट पर Rive फ़ाइल कैसे इस्तेमाल करें?

React पर बनी docs साइटें GIF की जगह लाइव कैरेक्टर दिखा सकती हैं। उदाहरण के लिए, Docusaurus आपको MDX पेजों में अपने components या npm packages import करने देता है (Docusaurus)। Rive के React रनटाइम के साथ (Rive):

// src/components/Mascot.jsx
import { useRive } from "@rive-app/react-canvas";

export default function Mascot() {
  const { RiveComponent } = useRive({
    src: "/mascot.riv",
    stateMachine: "CharacterStateMachine",
    autoplay: true,
  });
  return <RiveComponent style={{ width: 160, height: 160 }} aria-hidden="true" />;
}

फिर किसी MDX पेज में import Mascot from "@site/src/components/Mascot"; लिखें। अगर server rendering के दौरान build फ़ेल हो, तो component को Docusaurus के BrowserOnly में रैप करें।

  • Rive canvas ट्रांसपेरेंट होता है, इसलिए एक ही फ़ाइल लाइट और डार्क दोनों docs थीम पर काम करती है।
  • Rive का canvas-lite web runtime 2.44.0 brotli से कंप्रेस करने पर लगभग 373 KB का है, और बाकी builds इससे बड़े हैं (Rive); इसे हर पेज पर नहीं, बल्कि docs होम या welcome पेज पर लोड करें।
  • जब prefers-reduced-motion सेट हो, तो स्थिर इमेज दिखाएँ।

प्रोजेक्ट के मैस्कॉट का लाइसेंस कैसे तय करें?

कोड से अलग, और लिखित रूप में। MIT या Apache 2.0 जैसा software license कोड के लिए लिखा जाता है; यह साफ़ नहीं बताता कि लोग आपके मैस्कॉट को स्टिकर पर छाप सकते हैं, fan art में remix कर सकते हैं या किसी fork के प्रमोशन में इस्तेमाल कर सकते हैं या नहीं।

Go gopher एक जाना-माना उदाहरण है: "The gopher images are Creative Commons Attribution 4.0 licensed", और श्रेय डिज़ाइनर Renee French को दिया गया है (The Go Blog)। कोई भी श्रेय देकर इसे बदल सकता है, जबकि Go प्रोजेक्ट के कोड का अपना अलग लाइसेंस है।

आपके प्रोजेक्ट के लिए एक आसान सेटअप:

  • एक छोटी ARTWORK.md फ़ाइल या README में एक सेक्शन, जिसमें मालिक, लाइसेंस (जैसे CC BY 4.0) और श्रेय की लाइन लिखी हो,
  • एक नोट कि लाइसेंस किन चीज़ों को कवर नहीं करता, जैसे मैस्कॉट का ऐसा इस्तेमाल जिससे आधिकारिक समर्थन का आभास हो,
  • अगर किसी और ने आपके लिए मैस्कॉट बनाया है, तो पहले उनसे लिखित असाइनमेंट या लाइसेंस; इसके बिना कॉपीराइट शायद अब भी उन्हीं के पास है।

Charmotion की शर्तें आपको आपकी अपनी आर्टवर्क से बनी एनिमेशन फ़ाइलों का इस्तेमाल किसी भी वैध उद्देश्य के लिए करने देती हैं, इसलिए एनिमेटेड वर्ज़न का लाइसेंस वही रहता है जो आप मूल के लिए तय करते हैं। एक सेट आपको मैस्कॉट के 17 एनिमेशन एक .riv के रूप में और सॉलिड बैकग्राउंड पर MP4 और 480 px GIF के रूप में देता है (पेड प्लान, $20/माह से); दूसरी थीम वाला GIF पेड प्लान के ट्रांसपेरेंट WebM से, या अपनी आर्टवर्क से बनाएँ। यह नए पोज़ नहीं बनाता, जैसे आपका लोगो या लैपटॉप पकड़े मैस्कॉट, या हर रिलीज़ के लिए एक वर्ज़न।

अक्सर पूछे जाने वाले सवाल

README में एनिमेटेड GIF इस्तेमाल करूँ या वीडियो?

छोटे मैस्कॉट लूप के लिए GIF, क्योंकि यह इमेज की तरह inline चलता है और थीम के लिए picture एलिमेंट में काम करता है। GitHub फ़्री प्लान पर 10 MB तक के MP4, MOV और WebM अपलोड भी स्वीकार करता है, जो उन लंबे डेमो के लिए ठीक हैं जिन्हें दर्शक खुद चलाते हैं।

क्या gh-dark-mode-only वाली ट्रिक अब भी काम करती है?

पुराने README में इमेज URL पर #gh-dark-mode-only और #gh-light-mode-only फ़्रैगमेंट इस्तेमाल होते हैं। GitHub का अपना ब्लॉग अब prefers-color-scheme के साथ picture एलिमेंट दिखाता है, जो स्टैंडर्ड HTML है और दूसरी जगहों पर सामान्य img fallback पर आ जाता है, इसलिए नए README में इसी का इस्तेमाल करें।

क्या मैं अपने प्रोजेक्ट के मैस्कॉट के लिए MIT लाइसेंस इस्तेमाल कर सकता हूँ?

कर सकते हैं, लेकिन यह आर्टवर्क के लिए ठीक से फ़िट नहीं होता, क्योंकि यह मर्चेंडाइज़, फ़ैन आर्ट या एंडोर्समेंट के बारे में कुछ साफ़ नहीं कहता। कई प्रोजेक्ट इसकी जगह मैस्कॉट को Creative Commons के तहत लाइसेंस करते हैं; Go gopher CC BY 4.0 के तहत है। आर्टवर्क का लाइसेंस कोड के लाइसेंस से अलग लिखकर रखें।

इस गाइड से झटपट जवाब

स्रोत

संबंधित गाइड