From 1a74c9b9eb924dc368c70288cd7de54d0172da12 Mon Sep 17 00:00:00 2001 From: monizb <46259712+monizb@users.noreply.github.com> Date: Thu, 19 Dec 2019 19:54:14 +0530 Subject: [PATCH 01/13] Update index.md --- docs/tutorial/part-eight/index.md | 167 +++++++++++++++--------------- 1 file changed, 83 insertions(+), 84 deletions(-) diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index 33b8977..62feeec 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -1,94 +1,93 @@ --- -title: Preparing a Site to Go Live +title: साइट को लाइव लेजाने की तैयारी typora-copy-images-to: ./ disableTableOfContents: true --- -Wow! You've come a long way! You've learned how to: +वाह! आप बहुत दूर आ चुके है! आपने सीख लिया है की कैसे: -- create new Gatsby sites -- create pages and components -- style components -- add plugins to a site -- source & transform data -- use GraphQL to query data for pages -- programmatically create pages from your data +- एक नया Gatsby साइट बनाया जाए +- पेजेज और कंपोनेंट्स बनाया जाए +- कंपोनेंट्स को स्टाइल किया जाए +- साइट मे प्लगिन्स ऐड किया जाए +- डाटा को सोर्स और ट्रांसफॉर्म किया जाए +- GraphQL द्वारा पेजेज के लिए डाटा को क्वेरी किया जाए +- प्रोग्राम द्वारा अपने डाटा के लिए पेजेज बनाया जाए -In this final section, you're going to walk through some common steps for preparing a site to go live by introducing a powerful site diagnostic tool called [Lighthouse](https://developers.google.com/web/tools/lighthouse/). Along the way, we'll introduce a few more plugins you'll often want to use in your Gatsby sites. +इस आखरी भाग में, आप साइट को तैयार करने के लिए कुछ सामान्य चरणों से गुजरने जा रहे हैं ,आपको एक शक्तिशाली साइट डायग्नोस्टिक टूल से इंट्रोड्यूस करवाया जायेगा जिसका नाम [Lighthouse](https://developers.google.com/web/tools/lighthouse/) है| रास्ते में हम आपको कुछ और प्लगिन्स के साथ परिचित करवाएंगे जिनका आप अपने Gatsby साइट में कई बार इस्तेमाल करना चाहेंगे| ## Audit with Lighthouse -Quoting from the [Lighthouse website](https://developers.google.com/web/tools/lighthouse/): +[Lighthouse वेबसाइट](https://developers.google.com/web/tools/lighthouse/) से उद्धृत करते हुए: -> Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps (PWAs), and more. +> Lighthouse एक ओपन-सोर्स, ऑटोमेटेड टूल है जो आपको वेब पेजेज की गुणवत्ता बढ़ाने मैं मदद करती है| आप इसे किसी भी वेब पेज, पब्लिक या रिक्वायर्ड ऑथेंटिकेशन पर चला सकते हैं| इसमें प्रदर्शन, पहुँच या प्रोग्रेसिव वेब अप्प्स (PWAs), आदि के लिए ऑडिट्स है| -Lighthouse is included in Chrome DevTools. Running its audit -- and then addressing the errors it finds and implementing the improvements it suggests -- is a great way to prepare your site to go live. It helps give you confidence that your site is as fast and accessible as possible. +Lighthouse, Chrome DevTools मे शामिल है| इसकी ऑडिट चलाना -- और फिर इसके द्वारा पहचाने हुए त्रुटियों को ठीक करना और इसके द्वारा सुझाये गए सुधार को लागू करना -- एक बहुत सटीक तरीका है आपके साइट को लाइव लेजाने की तैयारी करने में| यह आपको यह विश्वास दिलाने में मदद करता है कि आपकी साइट यथासंभव तेज और सुलभ है| -Try it out! +इसको आज़माइये! -First, you need to create a production build of your Gatsby site. The Gatsby development server is optimized for making development fast; But the site that it generates, while closely resembling a production version of the site, isn't as optimized. +सबसे पहले, आपको अपने Gatsby साइट के लिए एक प्रोडक्शन बिल्ड बनाना पड़ेगा| Gatsby डेवलपमेंट सर्वर को आपका डेवलपमेंट तेज़ बनाने के लिए अनुकूलित किया गया है|; लेकिन जो साइट वह उत्पन्न करता है, जबकि वह साइट का प्रोडक्शन वर्शन जैसा लगता है, परन्तु वह उतना अनुकूलित नहीं हैं| -### ✋ Create a production build +### ✋ एक प्रोडक्शन बिल्ड बनाइये -1. Stop the development server (if it's still running) and run the following command: +1. डेवलपमेंट सर्वर को रोक दीजिये (अगर वह अब भी चल रहा है) फिर यह कमांड्स चलाइये: ```shell gatsby build ``` -> 💡 As you learned in [part 1](/tutorial/part-one/), this does a production build of your site and outputs the built static files into the `public` directory. +> 💡 जैसा की आपने [भाग १](/tutorial/part-one/) मे सीखा, यह आपके साइट का प्रोडक्शन बिल्ड करता है और `public` डायरेक्टरी के अंदर बिल्ड स्टैटिक फाइल्स की आउटपुट डालता है| -2. View the production site locally. Run: +2. स्थानीय स्तर पर प्रोडक्शन को देखने के लिए, चलाइये: ```shell gatsby serve ``` -Once this starts, you can view your site at [`localhost:9000`](http://localhost:9000). +एक बार यह शुरू हो जाये, आप अपना साइट [`localhost:9000`](http://localhost:9000) पर देख सकते है| -### Run a Lighthouse audit +### एक Ligthouse ऑडिट रन करना: -Now you're going to run your first Lighthouse test. +अब आप अपना पहला Lighthouse टेस्ट करेंगे| -1. If you haven't already done so, open the site in Chrome Incognito Mode so no extensions interfere with the test. Then, open up the Chrome DevTools. +1. अगर आपने यह पहले ही नहीं कर लिया है तोह, साइट को Chrome Incognito Mode मे खोलिये ताकि कोई भी एक्सटेंशन, टेस्ट मे दखल न दे| फिर, Chrome DevTools को खोलिये| -2. Click on the "Audits" tab where you'll see a screen that looks like: +2. "Audits" टैब पर क्लिक कीजिये जहाँ पर आपको एक स्क्रीन दिखाई देगा जो ऐसा दिखेगा: -![Lighthouse audit start](./lighthouse-audit.png) +![Lighthouse ऑडिट स्टार्ट](./lighthouse-audit.png) -3. Click "Perform an audit..." (All available audit types should be selected by default). Then click "Run audit". (It'll then take a minute or so to run the audit). Once the audit is complete, you should see results that look like this: +3. "Perform an audit..." पर क्लिक करें (सभी उपलब्ध ऑडिट प्रकारों को डिफ़ॉल्ट रूप से चुना गया होगा). उसके बाद "Run audit" पर क्लिक करें| (उसके बाद इसे २ से ३ मिनट लगेंगे ऑडिट को चलाने में)| एक बार ऑडिट पूर्ण हो जाये, आपके परिणाम इस तरह के दिखने चाहिए: +![Lighthouse ऑडिट परिणाम](./lighthouse-audit-results.png) -![Lighthouse audit results](./lighthouse-audit-results.png) +जैसा की आप देख सकते हैं, का प्रदर्शन अति उत्कृष्ट और सहरानीय है लेकिन आप PWA, सरल उपयोग, सर्वोत्तम प्रथाएं, और SEO के लिए कुछ चीज़े भूल रहे हैं जो आपके स्कोर को बेहतर बनाएँगे (और इस प्रक्रिया में आपकी साइट आगंतुकों और खोज इंजनों के लिए बहुत अधिक अनुकूल बनाएंगे)| -As you can see, Gatsby's performance is excellent out of the box but you're missing some things for PWA, Accessibility, Best Practices, and SEO that will improve your scores (and in the process make your site much more friendly to visitors and search engines). +## मैनिफेस्ट फाइल ऐड करना -## Add a manifest file +लगता है "Progressive Web App" केटेगरी में आपका स्कोर बहुत मंदा है| आइये उसके बारे बात करें| -Looks like you have a pretty lackluster score in the "Progressive Web App" category. Let's address that. +लेकिन पहले, PWAs है क्या चीज़? -But first, what exactly _are_ PWAs? +यह मामूली वेबसाइट्स है जो आधुनिक ब्राउज़र की कार्यक्षमता का फायदा उठाकर वेब अनुभव को अप्प-लाइक विशेषतायें एवं फायदों के साथ ऑग्मेंट करता है| [Google का अवलोकन](https://developers.google.com/web/progressive-web-apps/) को देखिये जो यह दिखाता है की एक सही PWA अनुभव को क्या परिभाषित करता है| -They are regular websites that take advantage of modern browser functionality to augment the web experience with app-like features and benefits. Check out [Google's overview](https://developers.google.com/web/progressive-web-apps/) of what defines a PWA experience. +एक वेब ऐप मैनिफ़ेस्ट का शामिल होना आम तौर पर स्वीकृत तीन [PWA की आधारभूत आवश्यकताओं](https://alistapart.com/article/yes-that-web-project-should-be-a-pwa#section1) में से एक है| -Inclusion of a web app manifest is one of the three generally accepted [baseline requirements for a PWA](https://alistapart.com/article/yes-that-web-project-should-be-a-pwa#section1). +[Google](https://developers.google.com/web/fundamentals/web-app-manifest/) का उद्धरण करते हुए: -Quoting [Google](https://developers.google.com/web/fundamentals/web-app-manifest/): +> वेब अप्प मैनिफेस्ट एक सरल JSON फाइल है जो ब्राउज़र को आपके वेब एप्लीकेशन के बारे में बताता है और यह भी बताता है की उसका व्यवहार कैसा होना चाहिए जब वह यूजर के मोबाइल डिवाइस या डेस्कटॉप पर इन्सटाल्ड हो| -> The web app manifest is a simple JSON file that tells the browser about your web application and how it should behave when 'installed' on the user's mobile device or desktop. +[Gatsby की मैनिफेस्ट प्लगइन](/packages/gatsby-plugin-manifest/) हर साइट बिल्ड में Gatsby को कॉन्फ़िगर करके एक `manifest.webmanifest` फाइल बनाती है| -[Gatsby's manifest plugin](/packages/gatsby-plugin-manifest/) configures Gatsby to create a `manifest.webmanifest` file on every site build. +### ✋ `gatsby-plugin-manifest`का इस्तेमाल -### ✋ Using `gatsby-plugin-manifest` - -1. Install the plugin: +1. प्लगइन तो इनस्टॉल कीजिये: ```shell npm install --save gatsby-plugin-manifest ``` -2. Add a favicon for your app under `src/images/icon.png`. For the purposes of this tutorial you can use [this example icon](https://raw.githubusercontent.com/gatsbyjs/gatsby/master/docs/tutorial/part-eight/icon.png), should you not have one available. The icon is necessary to build all images for the manifest. For more information, look at the docs for [`gatsby-plugin-manifest`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/README.md). +2. `src/images/icon.png` के नीचे अपने अप्प के लिए एक फ़ेविकॉन डाले| इस ट्यूटोरियल के खातिर आप [यह उदहारण आइकॉन](https://raw.githubusercontent.com/gatsbyjs/gatsby/master/docs/tutorial/part-eight/icon.png) का इस्तेमाल कर सकते है, अगर आपके पास एक नहीं है तोह| यह आइकॉन मैनिफेस्ट के लिए सारे इमेजेज बनाने के लिए ज़रूरी है| और जानकारी के लिए, यह डॉक्स देखिये [`gatsby-plugin-manifest`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/README.md)| -3. Add the plugin to the `plugins` array in your `gatsby-config.js` file. +3. इस प्लगइन को `gatsby-config.js` फाइल के `plugins` array में दाल दीजिये| ```javascript:title=gatsby-config.js { @@ -111,24 +110,23 @@ npm install --save gatsby-plugin-manifest } ``` -That's all you need to get started with adding a web manifest to a Gatsby site. The example given reflects a base configuration -- Check out the [plugin reference](/packages/gatsby-plugin-manifest/?=gatsby-plugin-manifest#automatic-mode) for more options. +बस आपको इतना ही चाहिए वेब मैनिफेस्ट को Gatsby साइट में डालने की शुरुआत करने के लिए| दिया गया उदाहरण एक बेस कॉन्फ़िगरेशन को दर्शाता हैं -- और विकल्पों के लिए [प्लगइन रेफरेन्स](/packages/gatsby-plugin-manifest/?=gatsby-plugin-manifest#automatic-mode) को देखें| -## Add offline support +## ऑफलाइन सपोर्ट ऐड करना -Another requirement for a website to qualify as a PWA is the use of a [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API). A service worker runs in the background, deciding to serve network or cached content based on connectivity, allowing for a seamless, managed offline experience. +एक वेबसाइट को PWA के रूप में अर्हता प्राप्त करने के लिए और एक आवश्यकता की ज़रूरत है, जो है [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) का इस्तेमाल| एक सर्विस वर्कर पृष्ठभूमि मे चलता है , और कनेक्टिविटी के आधार पर यह निश्चित करता है की वह नेटवर्क या कैश्ड कंटेंट की सेवा करे, जो निर्बाध, मैनेज्ड ऑफलाइन अनुभव की अनुमति देता है| -[Gatsby's offline plugin](/packages/gatsby-plugin-offline/) makes a Gatsby site work offline and more resistant to bad network conditions by creating a service worker for your site. +[Gatsby की ऑफलाइन प्लगइन](/packages/gatsby-plugin-offline/) एक साइट को ऑफलाइन काम करने में और एक सर्विस वर्कर बनाकर उसे खराब नेटवर्क के खिलाफ प्रतिरोधित करता है| -### ✋ Using `gatsby-plugin-offline` +### ✋`gatsby-plugin-offline` का इस्तेमाल -1. Install the plugin: +1. प्लगइन को इनस्टॉल कीजिये: ```shell npm install --save gatsby-plugin-offline ``` -2. Add the plugin to the `plugins` array in your `gatsby-config.js` file. - +2. प्लगइन को `gatsby-config.js` फाइल के `plugins` ऐरे में ऐड कीजिये: ```javascript:title=gatsby-config.js { plugins: [ @@ -152,27 +150,27 @@ npm install --save gatsby-plugin-offline } ``` -That's all you need to get started with service workers with Gatsby. +Gatsby के सर्विस वर्कर्स से शुरुआत करने के लिए बस इतना ही चाहिए| -> 💡 The offline plugin should be listed _after_ the manifest plugin so that the offline plugin can cache the created `manifest.webmanifest`. +> 💡 ऑफलाइन प्लगइन को मैनिफेस्ट प्लगइन के बाद अंकित किया जाना चाहिए ताकि ऑफलाइन प्लगइन बनाये गए `manifest.webmanifest` को कैश कर पाए. -## Add page metadata +## पेज मेटाडाटा ऐड करना -Adding metadata to pages (such as a title or description) is key in helping search engines like Google understand your content and decide when to surface it in search results. +पेजेज मे मेटाडाटा डालना (जैसे एक शीर्षक या विवरण) जिससे Google जैसे सर्च इंजिन्स को आपका कंटेंट समझने मे और यह सुनिश्चित करने मे की उसे सर्च रिजल्ट्स मे कब दिखाया जाये मे एक कुंजी है| -[React Helmet](https://github.com/nfl/react-helmet) is a package that provides a React component interface for you to manage your [document head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head). +[React Helmet](https://github.com/nfl/react-helmet) एक पैकेज है जो आपको React कॉम्पोनेन्ट इंटरफ़ेस प्रदान करता है जो आपको अपने [document head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) को सँभालने मे मदद करता है| -Gatsby's [react helmet plugin](/packages/gatsby-plugin-react-helmet/) provides drop-in support for server rendering data added with React Helmet. Using the plugin, attributes you add to React Helmet will be added to the static HTML pages that Gatsby builds. +Gatsby की [React Helmet प्लगइन](/packages/gatsby-plugin-react-helmet/) आपको React Helmet द्वारा ऐड की हुई ड्राप इन सपोर्ट प्रदान करती है ताकि आप सर्वर डाटा रेंडरिंग कर सकें| इस प्लगइन का इस्तेमाल करके, जो एट्रिब्यूट आप React Helmet मे डालते है वह Gatsby बिल्ड द्वारा बनाये जाने वाले स्टैटिक पेजेज मे भी दाल दिया जाता है| -### ✋ Using `React Helmet` and `gatsby-plugin-react-helmet` +### ✋ `React Helmet` और `gatsby-plugin-react-helmet` का इस्तेमाल -1. Install both packages: +1. बूथ पैकेजेस इनस्टॉल करना: ```shell npm install --save gatsby-plugin-react-helmet react-helmet ``` -2. Make sure you have a `description` and an `author` configured inside your `siteMetadata` object. Also, add the `gatsby-plugin-react-helmet` plugin to the `plugins` array in your `gatsby-config.js` file. +2. सुनिश्चित कीजिये की आपके `siteMetadata` ऑब्जेक्ट के अंदर एक `description` और एक `author` कॉन्फ़िगर कर दिया गया है| और, आपके `gatsby-config.js` फाइल के अंदर `gatsby-plugin-react-helmet` प्लगइन को `plugins` ऐरे के अंदर ऐड कीजिये| ```javascript:title=gatsby-config.js module.exports = { @@ -205,7 +203,7 @@ module.exports = { } ``` -3. In the `src/components` directory, create a file called `seo.js` and add the following: +3. डायरेक्टरी के अंदर, `seo.js` नामक फाइल क्रिएट कीजिये और उसमे यह डालिये: ```jsx:title=src/components/seo.js import React from "react" @@ -291,9 +289,9 @@ SEO.propTypes = { export default SEO ``` -The above code sets up defaults for your most common metadata tags and provides you an `` component to work with in the rest of your project. Pretty cool, right? +उपयुर्क्त कोड आपके सबसे आम मेटाडाटा टैग्स के लिए डिफॉल्ट्स सेट उप करता है और आपको एक `` कॉम्पोनेन्ट प्रदान करता है जो आपको बचे हुए प्रोजेक्ट मे काम करने मे मदद करेगी| बहुत अच्छा, हैना? -4. Now, you can use the `` component in your templates and pages and pass props to it. For example, add it to your `blog-post.js` template like so: +4. अब, आप अपने टेम्पलेट्स और पेजेज मैं `` कॉम्पोनेन्ट यूस कर सकते है और उसमे प्रॉप्स पास कर सकते है|. उदाहरण के लिए, अपने `blog-post.js` टेम्पलेट मे ऐड कीजिये इस तरह से: ```jsx:title=src/templates/blog-post.js import React from "react" @@ -331,44 +329,45 @@ export const query = graphql` ` ``` -The above example is based off the [Gatsby Starter Blog](/starters/gatsbyjs/gatsby-starter-blog/). By passing props to the `` component, you can dynamically change the metadata for a post. In this case, the blog post `title` and `excerpt` (if it exists in the blog post markdown file) will be used instead of the default `siteMetadata` properties in your `gatsby-config.js` file. +उपयुर्क्त उदहारण [Gatsby स्टार्टर ब्लॉग](/starters/gatsbyjs/gatsby-starter-blog/) पर आधारित है| अगर आप `` कॉम्पोनेन्ट मे प्रॉप्स पास करते है, तो आप डाईनामिकली एक पोस्ट की मेटाडाटा बदल सकते हैं|. इस मामले में, `gatsby-config.js` फाइल मे डिफ़ॉल्ट `siteMetadata` प्रॉपर्टी के बदले ब्लॉग पोस्ट के `title` और `excerpt` का इस्तेमाल किया जायेगा (अगर वह ब्लॉग पोस्ट के अंदर मौजूद है तोह)| -Now, if you run the Lighthouse audit again as laid out above, you should get close to--if not a perfect-- 100 score! +अब, अगर आप उपयुर्क्त तरीके से Lighthouse ऑडिट को फिर से चलाते है, तो आपको १०० स्कोर या १०० स्कोर के बेहद करीब मिलेंगे! -> 💡 For further reading and examples, check out [Adding an SEO Component](/docs/add-seo-component/) and the [React Helmet docs](https://github.com/nfl/react-helmet#example)! +> 💡 आगे पढ़ने के लिए और उदाहरणों के लिए, [SEO कॉम्पोनेन्ट ऐड करना](/docs/add-seo-component/) और [React Helmet डॉक्स](https://github.com/nfl/react-helmet#example) को देखिये! -## Keep making it better +## इसको बेहतर बनाते जाइये -In this section, we've shown you a few Gatsby-specific tools to improve your site's performance and prepare to go live. +इस भाग मे, हमने आपको कुछ Gatsby-स्पेसिफिक टूल्स दिखाए जो आपके साइट की प्रदर्शन को बढ़ाता है और आपके साइट को लाइव लेजाने मे आपकी मदद करता है| -Lighthouse is a great tool for site improvements and learning -- Continue looking through the detailed feedback it provides and keep making your site better! +साइट मे सुधार लाने के लिए और सीखने के लिए Lighthouse एक बहुत उपयोगी साधन है -- इसमें बताये गए विस्तृत प्रतिक्रिया को देखना जारी रखिये और अपने साइट को बेहतर बनाते जाइये! -## Next Steps +## अगले कदम -### Official Documentation +### आधिकारिक डॉक्यूमेंटेशन -- [Official Documentation](https://www.gatsbyjs.org/docs/): View our Official Documentation for _[Quick Start](https://www.gatsbyjs.org/docs/quick-start/)_, _[Detailed Guides](https://www.gatsbyjs.org/docs/preparing-your-environment/)_, _[API References](https://www.gatsbyjs.org/docs/gatsby-link/)_, and much more. +- [आधिकारिक डॉक्यूमेंटेशन](https://www.gatsbyjs.org/docs/): हमारे आधिकारिक डॉक्यूमेंटेशन को देखिये _[जल्द शुरुआत](https://www.gatsbyjs.org/docs/quick-start/)_, _[विस्तृत गाइड्स](https://www.gatsbyjs.org/docs/preparing-your-environment/)_, _[API संधर्बे](https://www.gatsbyjs.org/docs/gatsby-link/)_, और बहुत कुछ चीज़ो के लिए| -### Official Plugins +### आधिकारिक प्लगिन्स -- [Official Plugins](https://github.com/gatsbyjs/gatsby/tree/master/packages): The complete list of all the Official Plugins maintained by Gatsby. +- [आधिकारिक प्लगिन्स](https://github.com/gatsbyjs/gatsby/tree/master/packages): सारे आधिकारिक प्लगिन्स की पूरी सूची जो की Gatsby द्वारा बनाये रखे गए है| -### Official Starters +### आधिकारिक स्टार्टर्स -1. [Gatsby's Default Starter](https://github.com/gatsbyjs/gatsby-starter-default): Kick off your project with this default boilerplate. This barebones starter ships with the main Gatsby configuration files you might need. _[working example](http://gatsbyjs.github.io/gatsby-starter-default/)_ -2. [Gatsby's Blog Starter](https://github.com/gatsbyjs/gatsby-starter-blog): Gatsby starter for creating an awesome and blazing-fast blog. _[working example](http://gatsbyjs.github.io/gatsby-starter-blog/)_ -3. [Gatsby's Hello-World Starter](https://github.com/gatsbyjs/gatsby-starter-hello-world): Gatsby Starter with the bare essentials needed for a Gatsby site. _[working example](https://gatsby-starter-hello-world-demo.netlify.com/)_ +1. [Gatsby की ब्लॉग स्टार्टर](https://github.com/gatsbyjs/gatsby-starter-default): इस बॉयलरप्लेट के साथ अपने प्रोजेक्ट की शुरुआत कीजिये| +यह बारबोनेस स्टार्टर, Gatsby के मुख्य कॉन्फ़िगरेशन फाइल्स के साथ शिप किया जाता है जिसकी आपको ज़रूरत पड़ सकती है| _[काम करता हुआ उदाहरण](http://gatsbyjs.github.io/gatsby-starter-default/)_ +2. [Gatsby की ब्लॉग स्टार्टर](https://github.com/gatsbyjs/gatsby-starter-blog): मस्त और अधिक तेज़ ब्लॉग बनाने के लिए Gatsby की स्टार्टर| _[चलता हुआ उदाहरण](http://gatsbyjs.github.io/gatsby-starter-blog/)_ +3. [Gatsby की हेलो वर्ल्ड स्टार्टर](https://github.com/gatsbyjs/gatsby-starter-hello-world): Gatsby साइट बनाने के लिए अधिकतम काम ज़रूरतों वाला Gatsby ब्लॉग स्टार्टर _[चलता हुआ उदाहरण](https://gatsby-starter-hello-world-demo.netlify.com/)_ -## That's all, folks +## बस इतना ही, दोस्तों -Well, not quite; just for this tutorial. There are [Additional Tutorials](/tutorial/additional-tutorials/) to check out for more guided use cases. +लेकिन बस इस ही टुटोरिअल के लिए| और भी गाइडेड यूस केसेस देखने के लिए [अतिरिक्त ट्यूटोरियल](/tutorial/additional-tutorials/) को चेक कीजिये| -This is just the beginning. Keep going! +यह तो बस शुरुआत है. बढ़ते जाइये! -- Did you build something cool? Share it on Twitter, tag [#buildwithgatsby](https://twitter.com/search?q=%23buildwithgatsby), and [@mention us](https://twitter.com/gatsbyjs)! -- Did you write a cool blog post about what you learned? Share that, too! -- Contribute! Take a stroll through [open issues](https://github.com/gatsbyjs/gatsby/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) on the gatsby repo and [become a contributor](/contributing/how-to-contribute/). +- क्या आपने कुछ मस्त बनाया है? ट्विटर पर शेयर कीजिये, टैग कीजिये [#buildwithgatsby](https://twitter.com/search?q=%23buildwithgatsby), और [@mention us](https://twitter.com/gatsbyjs)! +- क्या आपने जो सीखा उसके बारे में एक मस्त ब्लॉग पोस्ट लिखा है? उसको भी शेयर कीजिये! +- सहयोग दीजिये! Gatsby रेपो पर यह देखिये [खुले हुए मुद्दे ](https://github.com/gatsbyjs/gatsby/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) और [सहयोगी बनिए](/contributing/how-to-contribute/)| -Check out the ["how to contribute"](/contributing/how-to-contribute/) docs for even more ideas. +और भी आइडियाज के लिए ["सहयोग कैसे दे"](/contributing/how-to-contribute/) चेक कीजिये| -We can't wait to see what you do 😄. +हम बेताब है यह देखने के लिए की आप क्या करने वाले है 😄| From b85cffb4e13eee1ec64eca6d5613f5f6eeb6724e Mon Sep 17 00:00:00 2001 From: Monish Basaniwal <46259712+monizb@users.noreply.github.com> Date: Thu, 19 Dec 2019 20:25:17 +0530 Subject: [PATCH 02/13] Update index.md --- docs/tutorial/part-eight/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index 62feeec..0a9a23a 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -16,7 +16,7 @@ disableTableOfContents: true इस आखरी भाग में, आप साइट को तैयार करने के लिए कुछ सामान्य चरणों से गुजरने जा रहे हैं ,आपको एक शक्तिशाली साइट डायग्नोस्टिक टूल से इंट्रोड्यूस करवाया जायेगा जिसका नाम [Lighthouse](https://developers.google.com/web/tools/lighthouse/) है| रास्ते में हम आपको कुछ और प्लगिन्स के साथ परिचित करवाएंगे जिनका आप अपने Gatsby साइट में कई बार इस्तेमाल करना चाहेंगे| -## Audit with Lighthouse +## Lighthouse के साथ ऑडिट करना [Lighthouse वेबसाइट](https://developers.google.com/web/tools/lighthouse/) से उद्धृत करते हुए: From 91bcc02019d0da99344c7c13933f45442e30e047 Mon Sep 17 00:00:00 2001 From: Monish Basaniwal <46259712+monizb@users.noreply.github.com> Date: Fri, 20 Dec 2019 14:41:46 +0530 Subject: [PATCH 03/13] Update index.md --- docs/tutorial/part-eight/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index 0a9a23a..d6e37bc 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -1,5 +1,5 @@ --- -title: साइट को लाइव लेजाने की तैयारी +title: Preparing a Site to Go Live typora-copy-images-to: ./ disableTableOfContents: true --- From 56c1bb72783bb7a6579913fe789472d9f1a88789 Mon Sep 17 00:00:00 2001 From: Monish Basaniwal <46259712+monizb@users.noreply.github.com> Date: Sat, 21 Dec 2019 20:14:02 +0530 Subject: [PATCH 04/13] Update index.md --- docs/tutorial/part-eight/index.md | 84 +++++++++++++++---------------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index d6e37bc..579059f 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -1,5 +1,5 @@ --- -title: Preparing a Site to Go Live +title: साइट को लाइव करने के लिए तैयार करना typora-copy-images-to: ./ disableTableOfContents: true --- @@ -7,26 +7,26 @@ disableTableOfContents: true वाह! आप बहुत दूर आ चुके है! आपने सीख लिया है की कैसे: - एक नया Gatsby साइट बनाया जाए -- पेजेज और कंपोनेंट्स बनाया जाए -- कंपोनेंट्स को स्टाइल किया जाए +- पेजेज और कौम्पोनॅन्टस बनाया जाए +- कौम्पोनॅन्टस को स्टाइल किया जाए - साइट मे प्लगिन्स ऐड किया जाए - डाटा को सोर्स और ट्रांसफॉर्म किया जाए - GraphQL द्वारा पेजेज के लिए डाटा को क्वेरी किया जाए - प्रोग्राम द्वारा अपने डाटा के लिए पेजेज बनाया जाए -इस आखरी भाग में, आप साइट को तैयार करने के लिए कुछ सामान्य चरणों से गुजरने जा रहे हैं ,आपको एक शक्तिशाली साइट डायग्नोस्टिक टूल से इंट्रोड्यूस करवाया जायेगा जिसका नाम [Lighthouse](https://developers.google.com/web/tools/lighthouse/) है| रास्ते में हम आपको कुछ और प्लगिन्स के साथ परिचित करवाएंगे जिनका आप अपने Gatsby साइट में कई बार इस्तेमाल करना चाहेंगे| +इस आखरी भाग में, आप साइट को तैयार करने के लिए कुछ सामान्य चरणों से गुजरने जा रहे हैं, आपको एक शक्तिशाली साइट डायग्नोस्टिक टूल से इंट्रोड्यूस करवाया जायेगा जिसका नाम [Lighthouse](https://developers.google.com/web/tools/lighthouse/) है। रास्ते में हम आपको कुछ और प्लगिन्स के साथ परिचित करवाएंगे जिनका आप अपने Gatsby साइट में कई बार इस्तेमाल करना चाहेंगे। ## Lighthouse के साथ ऑडिट करना -[Lighthouse वेबसाइट](https://developers.google.com/web/tools/lighthouse/) से उद्धृत करते हुए: +[Lighthouse वेबसाइट](https://developers.google.com/web/tools/lighthouse/) से कोट करते हुए: -> Lighthouse एक ओपन-सोर्स, ऑटोमेटेड टूल है जो आपको वेब पेजेज की गुणवत्ता बढ़ाने मैं मदद करती है| आप इसे किसी भी वेब पेज, पब्लिक या रिक्वायर्ड ऑथेंटिकेशन पर चला सकते हैं| इसमें प्रदर्शन, पहुँच या प्रोग्रेसिव वेब अप्प्स (PWAs), आदि के लिए ऑडिट्स है| +> Lighthouse एक ओपन-सोर्स, ऑटोमेटेड टूल है जो आपको वेब पेजेज की गुणवत्ता बढ़ाने मैं मदद करती है। आप इसे किसी भी वेब पेज, पब्लिक या रिक्वायर्ड ऑथेंटिकेशन पर चला सकते हैं। इसमें परफॉरमेंस, अक्सेसिब्लिटी, प्रोग्रेसिव वेब अप्प्सस (PWAs), आदि के लिए ऑडिट्स है। -Lighthouse, Chrome DevTools मे शामिल है| इसकी ऑडिट चलाना -- और फिर इसके द्वारा पहचाने हुए त्रुटियों को ठीक करना और इसके द्वारा सुझाये गए सुधार को लागू करना -- एक बहुत सटीक तरीका है आपके साइट को लाइव लेजाने की तैयारी करने में| यह आपको यह विश्वास दिलाने में मदद करता है कि आपकी साइट यथासंभव तेज और सुलभ है| +Lighthouse, Chrome DevTools मे शामिल है। इसकी ऑडिट चलाना -- और फिर इसके द्वारा पहचाने हुए त्रुटियों को ठीक करना और इसके द्वारा सुझाये गए सुधार को लागू करना -- एक बहुत सटीक तरीका है आपके साइट को लाइव लेजाने की तैयारी करने में। यह आपको यह विश्वास दिलाने में मदद करता है कि आपकी साइट यथासंभव तेज और सुलभ है। इसको आज़माइये! -सबसे पहले, आपको अपने Gatsby साइट के लिए एक प्रोडक्शन बिल्ड बनाना पड़ेगा| Gatsby डेवलपमेंट सर्वर को आपका डेवलपमेंट तेज़ बनाने के लिए अनुकूलित किया गया है|; लेकिन जो साइट वह उत्पन्न करता है, जबकि वह साइट का प्रोडक्शन वर्शन जैसा लगता है, परन्तु वह उतना अनुकूलित नहीं हैं| +सबसे पहले, आपको अपने Gatsby साइट के लिए एक प्रोडक्शन बिल्ड बनाना पड़ेगा। Gatsby डेवलपमेंट सर्वर को आपका डेवलपमेंट तेज़ बनाने के लिए अनुकूलित किया गया है।; लेकिन जो साइट वह उत्पन्न करता है, जबकि वह साइट का प्रोडक्शन वर्शन जैसा लगता है, परन्तु वह उतना अनुकूलित नहीं हैं। ### ✋ एक प्रोडक्शन बिल्ड बनाइये @@ -36,7 +36,7 @@ Lighthouse, Chrome DevTools मे शामिल है| इसकी ऑड gatsby build ``` -> 💡 जैसा की आपने [भाग १](/tutorial/part-one/) मे सीखा, यह आपके साइट का प्रोडक्शन बिल्ड करता है और `public` डायरेक्टरी के अंदर बिल्ड स्टैटिक फाइल्स की आउटपुट डालता है| +> 💡 जैसा की आपने [भाग १](/tutorial/part-one/) मे सीखा, यह आपके साइट का प्रोडक्शन बिल्ड करता है और `public` डायरेक्टरी के अंदर बिल्ड स्टैटिक फाइल्स की आउटपुट डालता है। 2. स्थानीय स्तर पर प्रोडक्शन को देखने के लिए, चलाइये: @@ -44,38 +44,38 @@ gatsby build gatsby serve ``` -एक बार यह शुरू हो जाये, आप अपना साइट [`localhost:9000`](http://localhost:9000) पर देख सकते है| +एक बार यह शुरू हो जाये, आप अपना साइट [`localhost:9000`](http://localhost:9000) पर देख सकते है। ### एक Ligthouse ऑडिट रन करना: -अब आप अपना पहला Lighthouse टेस्ट करेंगे| +अब आप अपना पहला Lighthouse टेस्ट करेंगे। -1. अगर आपने यह पहले ही नहीं कर लिया है तोह, साइट को Chrome Incognito Mode मे खोलिये ताकि कोई भी एक्सटेंशन, टेस्ट मे दखल न दे| फिर, Chrome DevTools को खोलिये| +1. अगर आपने यह पहले ही नहीं कर लिया है तोह, साइट को Chrome Incognito Mode मे खोलिये ताकि कोई भी एक्सटेंशन, टेस्ट मे दखल न दे। फिर, Chrome DevTools को खोलिये। 2. "Audits" टैब पर क्लिक कीजिये जहाँ पर आपको एक स्क्रीन दिखाई देगा जो ऐसा दिखेगा: ![Lighthouse ऑडिट स्टार्ट](./lighthouse-audit.png) -3. "Perform an audit..." पर क्लिक करें (सभी उपलब्ध ऑडिट प्रकारों को डिफ़ॉल्ट रूप से चुना गया होगा). उसके बाद "Run audit" पर क्लिक करें| (उसके बाद इसे २ से ३ मिनट लगेंगे ऑडिट को चलाने में)| एक बार ऑडिट पूर्ण हो जाये, आपके परिणाम इस तरह के दिखने चाहिए: +3. "Perform an audit..." पर क्लिक करें (सभी उपलब्ध ऑडिट प्रकारों को डिफ़ॉल्ट रूप से चुना गया होगा). उसके बाद "Run audit" पर क्लिक करें। (उसके बाद इसे २ से ३ मिनट लगेंगे ऑडिट को चलाने में)। एक बार ऑडिट पूर्ण हो जाये, आपके परिणाम इस तरह के दिखने चाहिए: ![Lighthouse ऑडिट परिणाम](./lighthouse-audit-results.png) -जैसा की आप देख सकते हैं, का प्रदर्शन अति उत्कृष्ट और सहरानीय है लेकिन आप PWA, सरल उपयोग, सर्वोत्तम प्रथाएं, और SEO के लिए कुछ चीज़े भूल रहे हैं जो आपके स्कोर को बेहतर बनाएँगे (और इस प्रक्रिया में आपकी साइट आगंतुकों और खोज इंजनों के लिए बहुत अधिक अनुकूल बनाएंगे)| +जैसा की आप देख सकते हैं, का प्रदर्शन अति उत्कृष्ट और सहरानीय है लेकिन आप PWA, सरल उपयोग, सर्वोत्तम प्रथाएं, और SEO के लिए कुछ चीज़े भूल रहे हैं जो आपके स्कोर को बेहतर बनाएँगे (और इस प्रक्रिया में आपकी साइट आगंतुकों और खोज इंजनों के लिए बहुत अधिक अनुकूल बनाएंगे)। ## मैनिफेस्ट फाइल ऐड करना -लगता है "Progressive Web App" केटेगरी में आपका स्कोर बहुत मंदा है| आइये उसके बारे बात करें| +लगता है "Progressive Web App" केटेगरी में आपका स्कोर बहुत मंदा है। आइये उसके बारे बात करें। लेकिन पहले, PWAs है क्या चीज़? -यह मामूली वेबसाइट्स है जो आधुनिक ब्राउज़र की कार्यक्षमता का फायदा उठाकर वेब अनुभव को अप्प-लाइक विशेषतायें एवं फायदों के साथ ऑग्मेंट करता है| [Google का अवलोकन](https://developers.google.com/web/progressive-web-apps/) को देखिये जो यह दिखाता है की एक सही PWA अनुभव को क्या परिभाषित करता है| +यह मामूली वेबसाइट्स है जो आधुनिक ब्राउज़र की कार्यक्षमता का फायदा उठाकर वेब अनुभव को अप्प-लाइक विशेषतायें एवं फायदों के साथ ऑग्मेंट करता है। [Google का अवलोकन](https://developers.google.com/web/progressive-web-apps/) को देखिये जो यह दिखाता है की एक सही PWA अनुभव को क्या परिभाषित करता है। -एक वेब ऐप मैनिफ़ेस्ट का शामिल होना आम तौर पर स्वीकृत तीन [PWA की आधारभूत आवश्यकताओं](https://alistapart.com/article/yes-that-web-project-should-be-a-pwa#section1) में से एक है| +एक वेब ऐप मैनिफ़ेस्ट का शामिल होना आम तौर पर स्वीकृत तीन [PWA की आधारभूत आवश्यकताओं](https://alistapart.com/article/yes-that-web-project-should-be-a-pwa#section1) में से एक है। [Google](https://developers.google.com/web/fundamentals/web-app-manifest/) का उद्धरण करते हुए: -> वेब अप्प मैनिफेस्ट एक सरल JSON फाइल है जो ब्राउज़र को आपके वेब एप्लीकेशन के बारे में बताता है और यह भी बताता है की उसका व्यवहार कैसा होना चाहिए जब वह यूजर के मोबाइल डिवाइस या डेस्कटॉप पर इन्सटाल्ड हो| +> वेब अप्प मैनिफेस्ट एक सरल JSON फाइल है जो ब्राउज़र को आपके वेब एप्लीकेशन के बारे में बताता है और यह भी बताता है की उसका व्यवहार कैसा होना चाहिए जब वह यूजर के मोबाइल डिवाइस या डेस्कटॉप पर इन्सटाल्ड हो। -[Gatsby की मैनिफेस्ट प्लगइन](/packages/gatsby-plugin-manifest/) हर साइट बिल्ड में Gatsby को कॉन्फ़िगर करके एक `manifest.webmanifest` फाइल बनाती है| +[Gatsby की मैनिफेस्ट प्लगइन](/packages/gatsby-plugin-manifest/) हर साइट बिल्ड में Gatsby को कॉन्फ़िगर करके एक `manifest.webmanifest` फाइल बनाती है। ### ✋ `gatsby-plugin-manifest`का इस्तेमाल @@ -85,9 +85,9 @@ gatsby serve npm install --save gatsby-plugin-manifest ``` -2. `src/images/icon.png` के नीचे अपने अप्प के लिए एक फ़ेविकॉन डाले| इस ट्यूटोरियल के खातिर आप [यह उदहारण आइकॉन](https://raw.githubusercontent.com/gatsbyjs/gatsby/master/docs/tutorial/part-eight/icon.png) का इस्तेमाल कर सकते है, अगर आपके पास एक नहीं है तोह| यह आइकॉन मैनिफेस्ट के लिए सारे इमेजेज बनाने के लिए ज़रूरी है| और जानकारी के लिए, यह डॉक्स देखिये [`gatsby-plugin-manifest`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/README.md)| +2. `src/images/icon.png` के नीचे अपने अप्प के लिए एक फ़ेविकॉन डाले। इस ट्यूटोरियल के खातिर आप [यह उदहारण आइकॉन](https://raw.githubusercontent.com/gatsbyjs/gatsby/master/docs/tutorial/part-eight/icon.png) का इस्तेमाल कर सकते है, अगर आपके पास एक नहीं है तोह। यह आइकॉन मैनिफेस्ट के लिए सारे इमेजेज बनाने के लिए ज़रूरी है। और जानकारी के लिए, यह डॉक्स देखिये [`gatsby-plugin-manifest`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/README.md)। -3. इस प्लगइन को `gatsby-config.js` फाइल के `plugins` array में दाल दीजिये| +3. इस प्लगइन को `gatsby-config.js` फाइल के `plugins` array में दाल दीजिये। ```javascript:title=gatsby-config.js { @@ -110,13 +110,13 @@ npm install --save gatsby-plugin-manifest } ``` -बस आपको इतना ही चाहिए वेब मैनिफेस्ट को Gatsby साइट में डालने की शुरुआत करने के लिए| दिया गया उदाहरण एक बेस कॉन्फ़िगरेशन को दर्शाता हैं -- और विकल्पों के लिए [प्लगइन रेफरेन्स](/packages/gatsby-plugin-manifest/?=gatsby-plugin-manifest#automatic-mode) को देखें| +बस आपको इतना ही चाहिए वेब मैनिफेस्ट को Gatsby साइट में डालने की शुरुआत करने के लिए। दिया गया उदाहरण एक बेस कॉन्फ़िगरेशन को दर्शाता हैं -- और विकल्पों के लिए [प्लगइन रेफरेन्स](/packages/gatsby-plugin-manifest/?=gatsby-plugin-manifest#automatic-mode) को देखें। ## ऑफलाइन सपोर्ट ऐड करना -एक वेबसाइट को PWA के रूप में अर्हता प्राप्त करने के लिए और एक आवश्यकता की ज़रूरत है, जो है [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) का इस्तेमाल| एक सर्विस वर्कर पृष्ठभूमि मे चलता है , और कनेक्टिविटी के आधार पर यह निश्चित करता है की वह नेटवर्क या कैश्ड कंटेंट की सेवा करे, जो निर्बाध, मैनेज्ड ऑफलाइन अनुभव की अनुमति देता है| +एक वेबसाइट को PWA के रूप में अर्हता प्राप्त करने के लिए और एक आवश्यकता की ज़रूरत है, जो है [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) का इस्तेमाल। एक सर्विस वर्कर पृष्ठभूमि मे चलता है , और कनेक्टिविटी के आधार पर यह निश्चित करता है की वह नेटवर्क या कैश्ड कंटेंट की सेवा करे, जो निर्बाध, मैनेज्ड ऑफलाइन अनुभव की अनुमति देता है। -[Gatsby की ऑफलाइन प्लगइन](/packages/gatsby-plugin-offline/) एक साइट को ऑफलाइन काम करने में और एक सर्विस वर्कर बनाकर उसे खराब नेटवर्क के खिलाफ प्रतिरोधित करता है| +[Gatsby की ऑफलाइन प्लगइन](/packages/gatsby-plugin-offline/) एक साइट को ऑफलाइन काम करने में और एक सर्विस वर्कर बनाकर उसे खराब नेटवर्क के खिलाफ प्रतिरोधित करता है। ### ✋`gatsby-plugin-offline` का इस्तेमाल @@ -150,17 +150,17 @@ npm install --save gatsby-plugin-offline } ``` -Gatsby के सर्विस वर्कर्स से शुरुआत करने के लिए बस इतना ही चाहिए| +Gatsby के सर्विस वर्कर्स से शुरुआत करने के लिए बस इतना ही चाहिए। > 💡 ऑफलाइन प्लगइन को मैनिफेस्ट प्लगइन के बाद अंकित किया जाना चाहिए ताकि ऑफलाइन प्लगइन बनाये गए `manifest.webmanifest` को कैश कर पाए. ## पेज मेटाडाटा ऐड करना -पेजेज मे मेटाडाटा डालना (जैसे एक शीर्षक या विवरण) जिससे Google जैसे सर्च इंजिन्स को आपका कंटेंट समझने मे और यह सुनिश्चित करने मे की उसे सर्च रिजल्ट्स मे कब दिखाया जाये मे एक कुंजी है| +पेजेज मे मेटाडाटा डालना (जैसे एक शीर्षक या विवरण) जिससे Google जैसे सर्च इंजिन्स को आपका कंटेंट समझने मे और यह सुनिश्चित करने मे की उसे सर्च रिजल्ट्स मे कब दिखाया जाये मे एक कुंजी है। -[React Helmet](https://github.com/nfl/react-helmet) एक पैकेज है जो आपको React कॉम्पोनेन्ट इंटरफ़ेस प्रदान करता है जो आपको अपने [document head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) को सँभालने मे मदद करता है| +[React Helmet](https://github.com/nfl/react-helmet) एक पैकेज है जो आपको React कॉम्पोनेन्ट इंटरफ़ेस प्रदान करता है जो आपको अपने [document head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) को सँभालने मे मदद करता है। -Gatsby की [React Helmet प्लगइन](/packages/gatsby-plugin-react-helmet/) आपको React Helmet द्वारा ऐड की हुई ड्राप इन सपोर्ट प्रदान करती है ताकि आप सर्वर डाटा रेंडरिंग कर सकें| इस प्लगइन का इस्तेमाल करके, जो एट्रिब्यूट आप React Helmet मे डालते है वह Gatsby बिल्ड द्वारा बनाये जाने वाले स्टैटिक पेजेज मे भी दाल दिया जाता है| +Gatsby की [React Helmet प्लगइन](/packages/gatsby-plugin-react-helmet/) आपको React Helmet द्वारा ऐड की हुई ड्राप इन सपोर्ट प्रदान करती है ताकि आप सर्वर डाटा रेंडरिंग कर सकें। इस प्लगइन का इस्तेमाल करके, जो एट्रिब्यूट आप React Helmet मे डालते है वह Gatsby बिल्ड द्वारा बनाये जाने वाले स्टैटिक पेजेज मे भी दाल दिया जाता है। ### ✋ `React Helmet` और `gatsby-plugin-react-helmet` का इस्तेमाल @@ -170,7 +170,7 @@ Gatsby की [React Helmet प्लगइन](/packages/gatsby-plugin-react-he npm install --save gatsby-plugin-react-helmet react-helmet ``` -2. सुनिश्चित कीजिये की आपके `siteMetadata` ऑब्जेक्ट के अंदर एक `description` और एक `author` कॉन्फ़िगर कर दिया गया है| और, आपके `gatsby-config.js` फाइल के अंदर `gatsby-plugin-react-helmet` प्लगइन को `plugins` ऐरे के अंदर ऐड कीजिये| +2. सुनिश्चित कीजिये की आपके `siteMetadata` ऑब्जेक्ट के अंदर एक `description` और एक `author` कॉन्फ़िगर कर दिया गया है। और, आपके `gatsby-config.js` फाइल के अंदर `gatsby-plugin-react-helmet` प्लगइन को `plugins` ऐरे के अंदर ऐड कीजिये। ```javascript:title=gatsby-config.js module.exports = { @@ -289,9 +289,9 @@ SEO.propTypes = { export default SEO ``` -उपयुर्क्त कोड आपके सबसे आम मेटाडाटा टैग्स के लिए डिफॉल्ट्स सेट उप करता है और आपको एक `` कॉम्पोनेन्ट प्रदान करता है जो आपको बचे हुए प्रोजेक्ट मे काम करने मे मदद करेगी| बहुत अच्छा, हैना? +उपयुर्क्त कोड आपके सबसे आम मेटाडाटा टैग्स के लिए डिफॉल्ट्स सेट उप करता है और आपको एक `` कॉम्पोनेन्ट प्रदान करता है जो आपको बचे हुए प्रोजेक्ट मे काम करने मे मदद करेगी। बहुत अच्छा, हैना? -4. अब, आप अपने टेम्पलेट्स और पेजेज मैं `` कॉम्पोनेन्ट यूस कर सकते है और उसमे प्रॉप्स पास कर सकते है|. उदाहरण के लिए, अपने `blog-post.js` टेम्पलेट मे ऐड कीजिये इस तरह से: +4. अब, आप अपने टेम्पलेट्स और पेजेज मैं `` कॉम्पोनेन्ट यूस कर सकते है और उसमे प्रॉप्स पास कर सकते है। उदाहरण के लिए, अपने `blog-post.js` टेम्पलेट मे ऐड कीजिये इस तरह से: ```jsx:title=src/templates/blog-post.js import React from "react" @@ -329,7 +329,7 @@ export const query = graphql` ` ``` -उपयुर्क्त उदहारण [Gatsby स्टार्टर ब्लॉग](/starters/gatsbyjs/gatsby-starter-blog/) पर आधारित है| अगर आप `` कॉम्पोनेन्ट मे प्रॉप्स पास करते है, तो आप डाईनामिकली एक पोस्ट की मेटाडाटा बदल सकते हैं|. इस मामले में, `gatsby-config.js` फाइल मे डिफ़ॉल्ट `siteMetadata` प्रॉपर्टी के बदले ब्लॉग पोस्ट के `title` और `excerpt` का इस्तेमाल किया जायेगा (अगर वह ब्लॉग पोस्ट के अंदर मौजूद है तोह)| +उपयुर्क्त उदहारण [Gatsby स्टार्टर ब्लॉग](/starters/gatsbyjs/gatsby-starter-blog/) पर आधारित है। अगर आप `` कॉम्पोनेन्ट मे प्रॉप्स पास करते है, तो आप डाईनामिकली एक पोस्ट की मेटाडाटा बदल सकते हैं। इस मामले में, `gatsby-config.js` फाइल मे डिफ़ॉल्ट `siteMetadata` प्रॉपर्टी के बदले ब्लॉग पोस्ट के `title` और `excerpt` का इस्तेमाल किया जायेगा (अगर वह ब्लॉग पोस्ट के अंदर मौजूद है तोह)। अब, अगर आप उपयुर्क्त तरीके से Lighthouse ऑडिट को फिर से चलाते है, तो आपको १०० स्कोर या १०० स्कोर के बेहद करीब मिलेंगे! @@ -337,7 +337,7 @@ export const query = graphql` ## इसको बेहतर बनाते जाइये -इस भाग मे, हमने आपको कुछ Gatsby-स्पेसिफिक टूल्स दिखाए जो आपके साइट की प्रदर्शन को बढ़ाता है और आपके साइट को लाइव लेजाने मे आपकी मदद करता है| +इस भाग मे, हमने आपको कुछ Gatsby-स्पेसिफिक टूल्स दिखाए जो आपके साइट की प्रदर्शन को बढ़ाता है और आपके साइट को लाइव लेजाने मे आपकी मदद करता है। साइट मे सुधार लाने के लिए और सीखने के लिए Lighthouse एक बहुत उपयोगी साधन है -- इसमें बताये गए विस्तृत प्रतिक्रिया को देखना जारी रखिये और अपने साइट को बेहतर बनाते जाइये! @@ -345,29 +345,29 @@ export const query = graphql` ### आधिकारिक डॉक्यूमेंटेशन -- [आधिकारिक डॉक्यूमेंटेशन](https://www.gatsbyjs.org/docs/): हमारे आधिकारिक डॉक्यूमेंटेशन को देखिये _[जल्द शुरुआत](https://www.gatsbyjs.org/docs/quick-start/)_, _[विस्तृत गाइड्स](https://www.gatsbyjs.org/docs/preparing-your-environment/)_, _[API संधर्बे](https://www.gatsbyjs.org/docs/gatsby-link/)_, और बहुत कुछ चीज़ो के लिए| +- [आधिकारिक डॉक्यूमेंटेशन](https://www.gatsbyjs.org/docs/): हमारे आधिकारिक डॉक्यूमेंटेशन को देखिये _[जल्द शुरुआत](https://www.gatsbyjs.org/docs/quick-start/)_, _[विस्तृत गाइड्स](https://www.gatsbyjs.org/docs/preparing-your-environment/)_, _[API संधर्बे](https://www.gatsbyjs.org/docs/gatsby-link/)_, और बहुत कुछ चीज़ो के लिए। ### आधिकारिक प्लगिन्स -- [आधिकारिक प्लगिन्स](https://github.com/gatsbyjs/gatsby/tree/master/packages): सारे आधिकारिक प्लगिन्स की पूरी सूची जो की Gatsby द्वारा बनाये रखे गए है| +- [आधिकारिक प्लगिन्स](https://github.com/gatsbyjs/gatsby/tree/master/packages): सारे आधिकारिक प्लगिन्स की पूरी सूची जो की Gatsby द्वारा बनाये रखे गए है। ### आधिकारिक स्टार्टर्स -1. [Gatsby की ब्लॉग स्टार्टर](https://github.com/gatsbyjs/gatsby-starter-default): इस बॉयलरप्लेट के साथ अपने प्रोजेक्ट की शुरुआत कीजिये| -यह बारबोनेस स्टार्टर, Gatsby के मुख्य कॉन्फ़िगरेशन फाइल्स के साथ शिप किया जाता है जिसकी आपको ज़रूरत पड़ सकती है| _[काम करता हुआ उदाहरण](http://gatsbyjs.github.io/gatsby-starter-default/)_ -2. [Gatsby की ब्लॉग स्टार्टर](https://github.com/gatsbyjs/gatsby-starter-blog): मस्त और अधिक तेज़ ब्लॉग बनाने के लिए Gatsby की स्टार्टर| _[चलता हुआ उदाहरण](http://gatsbyjs.github.io/gatsby-starter-blog/)_ +1. [Gatsby की ब्लॉग स्टार्टर](https://github.com/gatsbyjs/gatsby-starter-default): इस बॉयलरप्लेट के साथ अपने प्रोजेक्ट की शुरुआत कीजिये। +यह बारबोनेस स्टार्टर, Gatsby के मुख्य कॉन्फ़िगरेशन फाइल्स के साथ शिप किया जाता है जिसकी आपको ज़रूरत पड़ सकती है। _[काम करता हुआ उदाहरण](http://gatsbyjs.github.io/gatsby-starter-default/)_ +2. [Gatsby की ब्लॉग स्टार्टर](https://github.com/gatsbyjs/gatsby-starter-blog): मस्त और अधिक तेज़ ब्लॉग बनाने के लिए Gatsby की स्टार्टर। _[चलता हुआ उदाहरण](http://gatsbyjs.github.io/gatsby-starter-blog/)_ 3. [Gatsby की हेलो वर्ल्ड स्टार्टर](https://github.com/gatsbyjs/gatsby-starter-hello-world): Gatsby साइट बनाने के लिए अधिकतम काम ज़रूरतों वाला Gatsby ब्लॉग स्टार्टर _[चलता हुआ उदाहरण](https://gatsby-starter-hello-world-demo.netlify.com/)_ ## बस इतना ही, दोस्तों -लेकिन बस इस ही टुटोरिअल के लिए| और भी गाइडेड यूस केसेस देखने के लिए [अतिरिक्त ट्यूटोरियल](/tutorial/additional-tutorials/) को चेक कीजिये| +लेकिन बस इस ही टुटोरिअल के लिए। और भी गाइडेड यूस केसेस देखने के लिए [अतिरिक्त ट्यूटोरियल](/tutorial/additional-tutorials/) को चेक कीजिये। यह तो बस शुरुआत है. बढ़ते जाइये! - क्या आपने कुछ मस्त बनाया है? ट्विटर पर शेयर कीजिये, टैग कीजिये [#buildwithgatsby](https://twitter.com/search?q=%23buildwithgatsby), और [@mention us](https://twitter.com/gatsbyjs)! - क्या आपने जो सीखा उसके बारे में एक मस्त ब्लॉग पोस्ट लिखा है? उसको भी शेयर कीजिये! -- सहयोग दीजिये! Gatsby रेपो पर यह देखिये [खुले हुए मुद्दे ](https://github.com/gatsbyjs/gatsby/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) और [सहयोगी बनिए](/contributing/how-to-contribute/)| +- सहयोग दीजिये! Gatsby रेपो पर यह देखिये [खुले हुए मुद्दे ](https://github.com/gatsbyjs/gatsby/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) और [सहयोगी बनिए](/contributing/how-to-contribute/)। -और भी आइडियाज के लिए ["सहयोग कैसे दे"](/contributing/how-to-contribute/) चेक कीजिये| +और भी आइडियाज के लिए ["सहयोग कैसे दे"](/contributing/how-to-contribute/) चेक कीजिये। -हम बेताब है यह देखने के लिए की आप क्या करने वाले है 😄| +हम बेताब है यह देखने के लिए की आप क्या करने वाले है 😄। From b9896631ee49463c151d656bfc2eab5cbbc25d65 Mon Sep 17 00:00:00 2001 From: Monish Basaniwal <46259712+monizb@users.noreply.github.com> Date: Wed, 25 Dec 2019 10:53:22 +0530 Subject: [PATCH 05/13] Update index.md --- docs/tutorial/part-eight/index.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index 579059f..2295182 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -22,11 +22,11 @@ disableTableOfContents: true > Lighthouse एक ओपन-सोर्स, ऑटोमेटेड टूल है जो आपको वेब पेजेज की गुणवत्ता बढ़ाने मैं मदद करती है। आप इसे किसी भी वेब पेज, पब्लिक या रिक्वायर्ड ऑथेंटिकेशन पर चला सकते हैं। इसमें परफॉरमेंस, अक्सेसिब्लिटी, प्रोग्रेसिव वेब अप्प्सस (PWAs), आदि के लिए ऑडिट्स है। -Lighthouse, Chrome DevTools मे शामिल है। इसकी ऑडिट चलाना -- और फिर इसके द्वारा पहचाने हुए त्रुटियों को ठीक करना और इसके द्वारा सुझाये गए सुधार को लागू करना -- एक बहुत सटीक तरीका है आपके साइट को लाइव लेजाने की तैयारी करने में। यह आपको यह विश्वास दिलाने में मदद करता है कि आपकी साइट यथासंभव तेज और सुलभ है। +Lighthouse, Chrome DevTools मे शामिल है। इसकी ऑडिट चलाना -- और फिर इसके द्वारा पहचाने हुए एररस को ठीक करना और इसके द्वारा सुझाये गए सुधार को लागू करना -- एक बहुत सटीक तरीका है आपके साइट को लाइव लेजाने की तैयारी करने में। यह आपको यह विश्वास दिलाने में मदद करता है कि आपकी साइट जितना संभव हो उतना तेज़ और सुलभ है। -इसको आज़माइये! +इसको इस्तेमाल करके देखें! -सबसे पहले, आपको अपने Gatsby साइट के लिए एक प्रोडक्शन बिल्ड बनाना पड़ेगा। Gatsby डेवलपमेंट सर्वर को आपका डेवलपमेंट तेज़ बनाने के लिए अनुकूलित किया गया है।; लेकिन जो साइट वह उत्पन्न करता है, जबकि वह साइट का प्रोडक्शन वर्शन जैसा लगता है, परन्तु वह उतना अनुकूलित नहीं हैं। +सबसे पहले, आपको अपने Gatsby साइट के लिए एक प्रोडक्शन बिल्ड बनाना पड़ेगा। Gatsby डेवलपमेंट सर्वर को आपका डेवलपमेंट तेज़ बनाने के लिए अनुकूलित किया गया है; लेकिन जो साइट ये जेनरेट करता है, वो बारीकी से एक प्रोडक्शन वर्शन जैसा दिखता है, पर उतना ऑप्टीमाइज़्ड नहीं होता है। ### ✋ एक प्रोडक्शन बिल्ड बनाइये @@ -36,30 +36,31 @@ Lighthouse, Chrome DevTools मे शामिल है। इसकी ऑड gatsby build ``` -> 💡 जैसा की आपने [भाग १](/tutorial/part-one/) मे सीखा, यह आपके साइट का प्रोडक्शन बिल्ड करता है और `public` डायरेक्टरी के अंदर बिल्ड स्टैटिक फाइल्स की आउटपुट डालता है। +> 💡 जैसा की आपने [भाग १](/tutorial/part-one/) मे सीखा, यह आपके साइट का प्रोडक्शन बिल्ड करता है और `public` डायरेक्टरी के अंदर बिल्ड स्टैटिक फाइल्स को आउटपुट करताा है। -2. स्थानीय स्तर पर प्रोडक्शन को देखने के लिए, चलाइये: +2. लोकल्ली प्रोडक्शन साइट को देखने के लिए, चलाइये: ```shell gatsby serve ``` -एक बार यह शुरू हो जाये, आप अपना साइट [`localhost:9000`](http://localhost:9000) पर देख सकते है। +इसके शुरू होने के बाद, आप अपनी साइट [`localhost:9000`](http://localhost:9000) पर देख सकते है। ### एक Ligthouse ऑडिट रन करना: अब आप अपना पहला Lighthouse टेस्ट करेंगे। -1. अगर आपने यह पहले ही नहीं कर लिया है तोह, साइट को Chrome Incognito Mode मे खोलिये ताकि कोई भी एक्सटेंशन, टेस्ट मे दखल न दे। फिर, Chrome DevTools को खोलिये। +1. अगर आपने यह पहले ही नहीं कर लिया है तोह, साइट को Chrome Incognito Mode मे खोलिये ताकि कोई भी एक्सटेंशन टेस्ट मे दखल न दे। फिर, Chrome DevTools को खोलिये। 2. "Audits" टैब पर क्लिक कीजिये जहाँ पर आपको एक स्क्रीन दिखाई देगा जो ऐसा दिखेगा: ![Lighthouse ऑडिट स्टार्ट](./lighthouse-audit.png) -3. "Perform an audit..." पर क्लिक करें (सभी उपलब्ध ऑडिट प्रकारों को डिफ़ॉल्ट रूप से चुना गया होगा). उसके बाद "Run audit" पर क्लिक करें। (उसके बाद इसे २ से ३ मिनट लगेंगे ऑडिट को चलाने में)। एक बार ऑडिट पूर्ण हो जाये, आपके परिणाम इस तरह के दिखने चाहिए: +3. "Perform an audit..." पर क्लिक करें (सभी उपलब्ध ऑडिट प्रकारों को डिफ़ॉल्ट रूप से चुना गया होगा)। उसके बाद "Run audit" पर क्लिक करें। (उसके बाद इसे २ से ३ मिनट लगेंगे ऑडिट को चलाने में)। एक बार ऑडिट पूरा हो जाये, आपके परिणाम कुछ ऐसा दिखना चाहिए: + ![Lighthouse ऑडिट परिणाम](./lighthouse-audit-results.png) -जैसा की आप देख सकते हैं, का प्रदर्शन अति उत्कृष्ट और सहरानीय है लेकिन आप PWA, सरल उपयोग, सर्वोत्तम प्रथाएं, और SEO के लिए कुछ चीज़े भूल रहे हैं जो आपके स्कोर को बेहतर बनाएँगे (और इस प्रक्रिया में आपकी साइट आगंतुकों और खोज इंजनों के लिए बहुत अधिक अनुकूल बनाएंगे)। +जैसा की आप देख सकते हैं, Gatsby का परफॉरमेंस आउट ऑफ़ दी बॉक्स बहुत अच्छा है, लेकिन इसमें आप PWA, एक्सेसिबिलिटी, बेस्ट प्रैक्टिसेज और SEO को मिस कर रहे होंगे जो स्कोर्स को अच्छा करता है (और इस प्रक्रिया में आपकी साइट विज़िटर्स और सर्च इंजनों के लिए बहुत अधिक फ्रेंडली बनाएंगे)। ## मैनिफेस्ट फाइल ऐड करना From 1c918aa8c830b75888b97832a9e6fea4f7bac76c Mon Sep 17 00:00:00 2001 From: Monish Basaniwal <46259712+monizb@users.noreply.github.com> Date: Fri, 27 Dec 2019 20:10:33 +0530 Subject: [PATCH 06/13] Update index.md --- docs/tutorial/part-eight/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index 2295182..b3289b0 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -36,7 +36,7 @@ Lighthouse, Chrome DevTools मे शामिल है। इसकी ऑड gatsby build ``` -> 💡 जैसा की आपने [भाग १](/tutorial/part-one/) मे सीखा, यह आपके साइट का प्रोडक्शन बिल्ड करता है और `public` डायरेक्टरी के अंदर बिल्ड स्टैटिक फाइल्स को आउटपुट करताा है। +> 💡 जैसा की आपने [भाग १](/tutorial/part-one/) मे सीखा, यह आपके साइट का प्रोडक्शन बिल्ड करता है और `public` डायरेक्टरी के अंदर बिल्ड स्टैटिक फाइल्स को आउटपुट करता है। 2. लोकल्ली प्रोडक्शन साइट को देखने के लिए, चलाइये: From f64a604fa7a9b7ed20d70f0b4dbdae8b63be1f45 Mon Sep 17 00:00:00 2001 From: Monish Basaniwal <46259712+monizb@users.noreply.github.com> Date: Sun, 5 Jan 2020 22:23:50 +0530 Subject: [PATCH 07/13] Update index.md --- docs/tutorial/part-eight/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index b3289b0..39a7eb2 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -66,7 +66,7 @@ gatsby serve लगता है "Progressive Web App" केटेगरी में आपका स्कोर बहुत मंदा है। आइये उसके बारे बात करें। -लेकिन पहले, PWAs है क्या चीज़? +लेकिन पहले, PWAs _है_ क्या चीज़? यह मामूली वेबसाइट्स है जो आधुनिक ब्राउज़र की कार्यक्षमता का फायदा उठाकर वेब अनुभव को अप्प-लाइक विशेषतायें एवं फायदों के साथ ऑग्मेंट करता है। [Google का अवलोकन](https://developers.google.com/web/progressive-web-apps/) को देखिये जो यह दिखाता है की एक सही PWA अनुभव को क्या परिभाषित करता है। @@ -78,7 +78,7 @@ gatsby serve [Gatsby की मैनिफेस्ट प्लगइन](/packages/gatsby-plugin-manifest/) हर साइट बिल्ड में Gatsby को कॉन्फ़िगर करके एक `manifest.webmanifest` फाइल बनाती है। -### ✋ `gatsby-plugin-manifest`का इस्तेमाल +### ✋ `gatsby-plugin-manifest` का इस्तेमाल 1. प्लगइन तो इनस्टॉल कीजिये: @@ -115,7 +115,7 @@ npm install --save gatsby-plugin-manifest ## ऑफलाइन सपोर्ट ऐड करना -एक वेबसाइट को PWA के रूप में अर्हता प्राप्त करने के लिए और एक आवश्यकता की ज़रूरत है, जो है [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) का इस्तेमाल। एक सर्विस वर्कर पृष्ठभूमि मे चलता है , और कनेक्टिविटी के आधार पर यह निश्चित करता है की वह नेटवर्क या कैश्ड कंटेंट की सेवा करे, जो निर्बाध, मैनेज्ड ऑफलाइन अनुभव की अनुमति देता है। +एक वेबसाइट को PWA के रूप में अर्हता प्राप्त करने के लिए और एक आवश्यकता की ज़रूरत है, जो है [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) का इस्तेमाल। एक सर्विस वर्कर पृष्ठभूमि मे चलता है, और कनेक्टिविटी के आधार पर यह निश्चित करता है की वह नेटवर्क या कैश्ड कंटेंट की सेवा करे, जो निर्बाध, मैनेज्ड ऑफलाइन अनुभव की अनुमति देता है। [Gatsby की ऑफलाइन प्लगइन](/packages/gatsby-plugin-offline/) एक साइट को ऑफलाइन काम करने में और एक सर्विस वर्कर बनाकर उसे खराब नेटवर्क के खिलाफ प्रतिरोधित करता है। From 7d44f01e0e2ec646e3461091f2b2db49ddd913ca Mon Sep 17 00:00:00 2001 From: Monish Basaniwal <46259712+monizb@users.noreply.github.com> Date: Mon, 6 Jan 2020 12:39:14 +0530 Subject: [PATCH 08/13] Update index.md --- docs/tutorial/part-eight/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index 39a7eb2..344aa90 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -76,7 +76,7 @@ gatsby serve > वेब अप्प मैनिफेस्ट एक सरल JSON फाइल है जो ब्राउज़र को आपके वेब एप्लीकेशन के बारे में बताता है और यह भी बताता है की उसका व्यवहार कैसा होना चाहिए जब वह यूजर के मोबाइल डिवाइस या डेस्कटॉप पर इन्सटाल्ड हो। -[Gatsby की मैनिफेस्ट प्लगइन](/packages/gatsby-plugin-manifest/) हर साइट बिल्ड में Gatsby को कॉन्फ़िगर करके एक `manifest.webmanifest` फाइल बनाती है। +[Gatsby की मैनिफेस्ट प्लगइन](/packages/gatsby-plugin-manifest/) हर साइट बिल्ड में Gatsby को कॉन्फ़िगर करके एक `manifest.webmanifest` फाइल बनाती है। ### ✋ `gatsby-plugin-manifest` का इस्तेमाल From 5ef51b8221898edb2483bf638909ba4ae3118b15 Mon Sep 17 00:00:00 2001 From: Monish Basaniwal <46259712+monizb@users.noreply.github.com> Date: Wed, 8 Jan 2020 10:23:47 +0530 Subject: [PATCH 09/13] Update index.md --- docs/tutorial/part-eight/index.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index 344aa90..84c0f92 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -117,7 +117,7 @@ npm install --save gatsby-plugin-manifest एक वेबसाइट को PWA के रूप में अर्हता प्राप्त करने के लिए और एक आवश्यकता की ज़रूरत है, जो है [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) का इस्तेमाल। एक सर्विस वर्कर पृष्ठभूमि मे चलता है, और कनेक्टिविटी के आधार पर यह निश्चित करता है की वह नेटवर्क या कैश्ड कंटेंट की सेवा करे, जो निर्बाध, मैनेज्ड ऑफलाइन अनुभव की अनुमति देता है। -[Gatsby की ऑफलाइन प्लगइन](/packages/gatsby-plugin-offline/) एक साइट को ऑफलाइन काम करने में और एक सर्विस वर्कर बनाकर उसे खराब नेटवर्क के खिलाफ प्रतिरोधित करता है। +[Gatsby की ऑफलाइन प्लगइन](/packages/gatsby-plugin-offline/) एक साइट को ऑफलाइन काम करने में और एक सर्विस वर्कर बनाकर उसे खराब नेटवर्क के खिलाफ प्रतिरोधित करता है। ### ✋`gatsby-plugin-offline` का इस्तेमाल @@ -153,15 +153,15 @@ npm install --save gatsby-plugin-offline Gatsby के सर्विस वर्कर्स से शुरुआत करने के लिए बस इतना ही चाहिए। -> 💡 ऑफलाइन प्लगइन को मैनिफेस्ट प्लगइन के बाद अंकित किया जाना चाहिए ताकि ऑफलाइन प्लगइन बनाये गए `manifest.webmanifest` को कैश कर पाए. +> 💡 ऑफलाइन प्लगइन को मैनिफेस्ट प्लगइन के बाद अंकित किया जाना चाहिए ताकि ऑफलाइन प्लगइन बनाये गए `manifest.webmanifest` को cache कर पाए। ## पेज मेटाडाटा ऐड करना -पेजेज मे मेटाडाटा डालना (जैसे एक शीर्षक या विवरण) जिससे Google जैसे सर्च इंजिन्स को आपका कंटेंट समझने मे और यह सुनिश्चित करने मे की उसे सर्च रिजल्ट्स मे कब दिखाया जाये मे एक कुंजी है। +पेजेज मे मेटाडाटा डालना (जैसे एक शीर्षक या विवरण) जिससे Google जैसे सर्च इंजिन्स को आपका कंटेंट समझने मे और यह सुनिश्चित करने मे की उसे सर्च रिजल्ट्स मे कब दिखाया जाये। -[React Helmet](https://github.com/nfl/react-helmet) एक पैकेज है जो आपको React कॉम्पोनेन्ट इंटरफ़ेस प्रदान करता है जो आपको अपने [document head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) को सँभालने मे मदद करता है। +[React Helmet](https://github.com/nfl/react-helmet) एक पैकेज है जो आपको React कौम्पोनॅन्ट इंटरफ़ेस प्रदान करता है जो आपको अपने [document head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) को सँभालने मे मदद करता है। -Gatsby की [React Helmet प्लगइन](/packages/gatsby-plugin-react-helmet/) आपको React Helmet द्वारा ऐड की हुई ड्राप इन सपोर्ट प्रदान करती है ताकि आप सर्वर डाटा रेंडरिंग कर सकें। इस प्लगइन का इस्तेमाल करके, जो एट्रिब्यूट आप React Helmet मे डालते है वह Gatsby बिल्ड द्वारा बनाये जाने वाले स्टैटिक पेजेज मे भी दाल दिया जाता है। +Gatsby की [React Helmet प्लगइन](/packages/gatsby-plugin-react-helmet/) आपको React Helmet द्वारा ऐड की हुई ड्राप-इन सपोर्ट प्रदान करती है ताकि आप सर्वर डेटा रेंडरिंग कर सकें। इस प्लगइन का इस्तेमाल करके, जो एट्रिब्यूट आप React Helmet मे डालते है वह Gatsby बिल्ड द्वारा बनाये जाने वाले स्टैटिक पेजेज मे भी दाल दिया जाता है। ### ✋ `React Helmet` और `gatsby-plugin-react-helmet` का इस्तेमाल @@ -171,7 +171,7 @@ Gatsby की [React Helmet प्लगइन](/packages/gatsby-plugin-react-he npm install --save gatsby-plugin-react-helmet react-helmet ``` -2. सुनिश्चित कीजिये की आपके `siteMetadata` ऑब्जेक्ट के अंदर एक `description` और एक `author` कॉन्फ़िगर कर दिया गया है। और, आपके `gatsby-config.js` फाइल के अंदर `gatsby-plugin-react-helmet` प्लगइन को `plugins` ऐरे के अंदर ऐड कीजिये। +2. सुनिश्चित कीजिये की आपके `siteMetadata` ऑब्जेक्ट के अंदर एक `description` और एक `author` कॉन्फ़िगर कर दिया गया है। साथ ही, आपके `gatsby-config.js` फाइल के अंदर `gatsby-plugin-react-helmet` प्लगइन को `plugins` ऐरे के अंदर ऐड कीजिये। ```javascript:title=gatsby-config.js module.exports = { @@ -204,7 +204,7 @@ module.exports = { } ``` -3. डायरेक्टरी के अंदर, `seo.js` नामक फाइल क्रिएट कीजिये और उसमे यह डालिये: +3. `src/components` डायरेक्टरी के अंदर, `seo.js` नामक फाइल क्रिएट कीजिये और उसमे निचे दिया गया कोड डालिये: ```jsx:title=src/components/seo.js import React from "react" @@ -290,9 +290,9 @@ SEO.propTypes = { export default SEO ``` -उपयुर्क्त कोड आपके सबसे आम मेटाडाटा टैग्स के लिए डिफॉल्ट्स सेट उप करता है और आपको एक `` कॉम्पोनेन्ट प्रदान करता है जो आपको बचे हुए प्रोजेक्ट मे काम करने मे मदद करेगी। बहुत अच्छा, हैना? +उपयुर्क्त कोड आपके सबसे आम मेटाडाटा टैग्स के लिए डिफॉल्ट्स सेट अप करता है और आपको एक `` ककौम्पोनॅन्ट प्रदान करता है जो आपको बचे हुए प्रोजेक्ट मे काम करने मे मदद करेगी। बहुत अच्छा, हैना? -4. अब, आप अपने टेम्पलेट्स और पेजेज मैं `` कॉम्पोनेन्ट यूस कर सकते है और उसमे प्रॉप्स पास कर सकते है। उदाहरण के लिए, अपने `blog-post.js` टेम्पलेट मे ऐड कीजिये इस तरह से: +4. अब, आप अपने टेम्पलेट्स और पेजेज मैं `` ककौम्पोनॅन्ट यूस कर सकते है और उसमे props पास कर सकते है। उदाहरण के लिए, अपने `blog-post.js` टेम्पलेट मे ऐड कीजिये इस तरह से: ```jsx:title=src/templates/blog-post.js import React from "react" @@ -330,11 +330,11 @@ export const query = graphql` ` ``` -उपयुर्क्त उदहारण [Gatsby स्टार्टर ब्लॉग](/starters/gatsbyjs/gatsby-starter-blog/) पर आधारित है। अगर आप `` कॉम्पोनेन्ट मे प्रॉप्स पास करते है, तो आप डाईनामिकली एक पोस्ट की मेटाडाटा बदल सकते हैं। इस मामले में, `gatsby-config.js` फाइल मे डिफ़ॉल्ट `siteMetadata` प्रॉपर्टी के बदले ब्लॉग पोस्ट के `title` और `excerpt` का इस्तेमाल किया जायेगा (अगर वह ब्लॉग पोस्ट के अंदर मौजूद है तोह)। +उपयुर्क्त उदहारण [Gatsby स्टार्टर ब्लॉग](/starters/gatsbyjs/gatsby-starter-blog/) पर आधारित है। अगर आप `` ककौम्पोनॅन्ट मे प्रॉप्स पास करते है, तो आप डाईनामिकली एक पोस्ट की मेटाडाटा बदल सकते हैं। इस मामले में, `gatsby-config.js` फाइल मे डिफ़ॉल्ट `siteMetadata` प्रॉपर्टी के बदले ब्लॉग पोस्ट के `title` और `excerpt` का इस्तेमाल किया जायेगा (अगर वह ब्लॉग पोस्ट के अंदर मौजूद है तोह)। अब, अगर आप उपयुर्क्त तरीके से Lighthouse ऑडिट को फिर से चलाते है, तो आपको १०० स्कोर या १०० स्कोर के बेहद करीब मिलेंगे! -> 💡 आगे पढ़ने के लिए और उदाहरणों के लिए, [SEO कॉम्पोनेन्ट ऐड करना](/docs/add-seo-component/) और [React Helmet डॉक्स](https://github.com/nfl/react-helmet#example) को देखिये! +> 💡 आगे पढ़ने के लिए और उदाहरणों के लिए, [SEO कौम्पोनॅन्ट ऐड करना](/docs/add-seo-component/) और [React Helmet डॉक्स](https://github.com/nfl/react-helmet#example) को देखिये! ## इसको बेहतर बनाते जाइये From f21d892c4c5dceb16c1751d2c3a527edbc8e95bc Mon Sep 17 00:00:00 2001 From: Monish Basaniwal <46259712+monizb@users.noreply.github.com> Date: Fri, 10 Jan 2020 19:24:45 +0530 Subject: [PATCH 10/13] Update index.md --- docs/tutorial/part-eight/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index 84c0f92..15cab22 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -290,9 +290,9 @@ SEO.propTypes = { export default SEO ``` -उपयुर्क्त कोड आपके सबसे आम मेटाडाटा टैग्स के लिए डिफॉल्ट्स सेट अप करता है और आपको एक `` ककौम्पोनॅन्ट प्रदान करता है जो आपको बचे हुए प्रोजेक्ट मे काम करने मे मदद करेगी। बहुत अच्छा, हैना? +उपयुर्क्त कोड आपके सबसे आम मेटाडाटा टैग्स के लिए डिफॉल्ट्स सेट अप करता है और आपको एक `` कौम्पोनॅन्ट प्रदान करता है जो आपको बचे हुए प्रोजेक्ट मे काम करने मे मदद करेगी। बहुत अच्छा, हैना? -4. अब, आप अपने टेम्पलेट्स और पेजेज मैं `` ककौम्पोनॅन्ट यूस कर सकते है और उसमे props पास कर सकते है। उदाहरण के लिए, अपने `blog-post.js` टेम्पलेट मे ऐड कीजिये इस तरह से: +4. अब, आप अपने टेम्पलेट्स और पेजेज मैं `` कौम्पोनॅन्ट यूस कर सकते है और उसमे props पास कर सकते है। उदाहरण के लिए, अपने `blog-post.js` टेम्पलेट मे ऐड कीजिये इस तरह से: ```jsx:title=src/templates/blog-post.js import React from "react" From 3a0bfcf3cbc33ccdc3ed1b332f83e371c15b6252 Mon Sep 17 00:00:00 2001 From: Monish Basaniwal <46259712+monizb@users.noreply.github.com> Date: Sun, 12 Jan 2020 19:21:30 +0530 Subject: [PATCH 11/13] Update index.md --- docs/tutorial/part-eight/index.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index 15cab22..ffba2de 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -330,15 +330,15 @@ export const query = graphql` ` ``` -उपयुर्क्त उदहारण [Gatsby स्टार्टर ब्लॉग](/starters/gatsbyjs/gatsby-starter-blog/) पर आधारित है। अगर आप `` ककौम्पोनॅन्ट मे प्रॉप्स पास करते है, तो आप डाईनामिकली एक पोस्ट की मेटाडाटा बदल सकते हैं। इस मामले में, `gatsby-config.js` फाइल मे डिफ़ॉल्ट `siteMetadata` प्रॉपर्टी के बदले ब्लॉग पोस्ट के `title` और `excerpt` का इस्तेमाल किया जायेगा (अगर वह ब्लॉग पोस्ट के अंदर मौजूद है तोह)। +उपयुर्क्त उदहारण [Gatsby स्टार्टर ब्लॉग](/starters/gatsbyjs/gatsby-starter-blog/) पर आधारित है। अगर आप `` कौम्पोनॅन्ट मे props पास करते है, तो आप डाईनामिकली एक पोस्ट की मेटाडाट कोा बदल सकते हैं। इस मामले में, `gatsby-config.js` फाइल मे डिफ़ॉल्ट `siteMetadata` प्रॉपर्टी के बदले ब्लॉग पोस्ट के `title` और `excerpt` का इस्तेमाल किया जायेगा (अगर वह ब्लॉग पोस्ट के अंदर मौजूद है तोह)। -अब, अगर आप उपयुर्क्त तरीके से Lighthouse ऑडिट को फिर से चलाते है, तो आपको १०० स्कोर या १०० स्कोर के बेहद करीब मिलेंगे! +अब, अगर आप उपयुर्क्त तरीके से Lighthouse ऑडिट को फिर से चलाते है, तो आपको 100 स्कोर या १०० स्कोर के बेहद करीब मिलेंगे! > 💡 आगे पढ़ने के लिए और उदाहरणों के लिए, [SEO कौम्पोनॅन्ट ऐड करना](/docs/add-seo-component/) और [React Helmet डॉक्स](https://github.com/nfl/react-helmet#example) को देखिये! ## इसको बेहतर बनाते जाइये -इस भाग मे, हमने आपको कुछ Gatsby-स्पेसिफिक टूल्स दिखाए जो आपके साइट की प्रदर्शन को बढ़ाता है और आपके साइट को लाइव लेजाने मे आपकी मदद करता है। +इस भाग मे, हमने आपको कुछ Gatsby-स्पेसिफिक टूल्स दिखाए जो आपकी साइट की प्रदर्शन को बढ़ाता है और आपके साइट को लाइव लेजाने मे आपकी मदद करता है। साइट मे सुधार लाने के लिए और सीखने के लिए Lighthouse एक बहुत उपयोगी साधन है -- इसमें बताये गए विस्तृत प्रतिक्रिया को देखना जारी रखिये और अपने साइट को बेहतर बनाते जाइये! @@ -346,29 +346,29 @@ export const query = graphql` ### आधिकारिक डॉक्यूमेंटेशन -- [आधिकारिक डॉक्यूमेंटेशन](https://www.gatsbyjs.org/docs/): हमारे आधिकारिक डॉक्यूमेंटेशन को देखिये _[जल्द शुरुआत](https://www.gatsbyjs.org/docs/quick-start/)_, _[विस्तृत गाइड्स](https://www.gatsbyjs.org/docs/preparing-your-environment/)_, _[API संधर्बे](https://www.gatsbyjs.org/docs/gatsby-link/)_, और बहुत कुछ चीज़ो के लिए। +- [आधिकारिक डॉक्यूमेंटेशन](https://www.gatsbyjs.org/docs/): हमारे आधिकारिक डॉक्यूमेंटेशन को देखिये _[जल्द शुरुआत](https://www.gatsbyjs.org/docs/quick-start/)_, _[विस्तृत गाइड्स](https://www.gatsbyjs.org/docs/preparing-your-environment/)_, _[API संधर्बे](https://www.gatsbyjs.org/docs/gatsby-link/)_, और बहुत कुछ। ### आधिकारिक प्लगिन्स -- [आधिकारिक प्लगिन्स](https://github.com/gatsbyjs/gatsby/tree/master/packages): सारे आधिकारिक प्लगिन्स की पूरी सूची जो की Gatsby द्वारा बनाये रखे गए है। +- [आधिकारिक प्लगिन्स](https://github.com/gatsbyjs/gatsby/tree/master/packages): Gatsby द्वारा मेन्टेन किये हुए सारे आधिकारिक प्लगिन्स की पूरी सूचि। ### आधिकारिक स्टार्टर्स -1. [Gatsby की ब्लॉग स्टार्टर](https://github.com/gatsbyjs/gatsby-starter-default): इस बॉयलरप्लेट के साथ अपने प्रोजेक्ट की शुरुआत कीजिये। +1. [Gatsby का डिफ़ॉल्ट स्टार्टर](https://github.com/gatsbyjs/gatsby-starter-default): इस बॉयलरप्लेट के साथ अपने प्रोजेक्ट की शुरुआत कीजिये। यह बारबोनेस स्टार्टर, Gatsby के मुख्य कॉन्फ़िगरेशन फाइल्स के साथ शिप किया जाता है जिसकी आपको ज़रूरत पड़ सकती है। _[काम करता हुआ उदाहरण](http://gatsbyjs.github.io/gatsby-starter-default/)_ -2. [Gatsby की ब्लॉग स्टार्टर](https://github.com/gatsbyjs/gatsby-starter-blog): मस्त और अधिक तेज़ ब्लॉग बनाने के लिए Gatsby की स्टार्टर। _[चलता हुआ उदाहरण](http://gatsbyjs.github.io/gatsby-starter-blog/)_ -3. [Gatsby की हेलो वर्ल्ड स्टार्टर](https://github.com/gatsbyjs/gatsby-starter-hello-world): Gatsby साइट बनाने के लिए अधिकतम काम ज़रूरतों वाला Gatsby ब्लॉग स्टार्टर _[चलता हुआ उदाहरण](https://gatsby-starter-hello-world-demo.netlify.com/)_ +2. [Gatsby का ब्लॉग स्टार्टर](https://github.com/gatsbyjs/gatsby-starter-blog): मस्त और अधिक तेज़ ब्लॉग बनाने के लिए Gatsby का स्टार्टर। _[चलता हुआ उदाहरण](http://gatsbyjs.github.io/gatsby-starter-blog/)_ +3. [Gatsby का हेलो वर्ल्ड स्टार्टर](https://github.com/gatsbyjs/gatsby-starter-hello-world): Gatsby साइट बनाने के लिए अधिकतम काम ज़रूरतों वाला Gatsby का स्टार्टर।_[चलता हुआ उदाहरण](https://gatsby-starter-hello-world-demo.netlify.com/)_ ## बस इतना ही, दोस्तों -लेकिन बस इस ही टुटोरिअल के लिए। और भी गाइडेड यूस केसेस देखने के लिए [अतिरिक्त ट्यूटोरियल](/tutorial/additional-tutorials/) को चेक कीजिये। +लेकिन बस इस ही टुटोरिअल के लिए। और भी गाइडेड यूस केसेस देखने के लिए [अतिरिक्त ट्यूटोरियल](/tutorial/additional-tutorials/) को देखिये। -यह तो बस शुरुआत है. बढ़ते जाइये! +यह तो बस शुरुआत है। बढ़ते जाइये! -- क्या आपने कुछ मस्त बनाया है? ट्विटर पर शेयर कीजिये, टैग कीजिये [#buildwithgatsby](https://twitter.com/search?q=%23buildwithgatsby), और [@mention us](https://twitter.com/gatsbyjs)! +- क्या आपने कुछ मस्त बनाया है? Twitter पर शेयर कीजिये, टैग [#buildwithgatsby](https://twitter.com/search?q=%23buildwithgatsby), और [@mention us](https://twitter.com/gatsbyjs) के साथ! - क्या आपने जो सीखा उसके बारे में एक मस्त ब्लॉग पोस्ट लिखा है? उसको भी शेयर कीजिये! -- सहयोग दीजिये! Gatsby रेपो पर यह देखिये [खुले हुए मुद्दे ](https://github.com/gatsbyjs/gatsby/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) और [सहयोगी बनिए](/contributing/how-to-contribute/)। +- सहयोग दीजिये! Gatsby रेपो पर यह देखिये [खुले हुए मुद्दे](https://github.com/gatsbyjs/gatsby/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) और [सहयोगी बनिए](/contributing/how-to-contribute/)। -और भी आइडियाज के लिए ["सहयोग कैसे दे"](/contributing/how-to-contribute/) चेक कीजिये। +और भी आइडियाज के लिए ["सहयोग कैसे दे"](/contributing/how-to-contribute/) देखिये। हम बेताब है यह देखने के लिए की आप क्या करने वाले है 😄। From 186d7284bd2d9aca64c2cccef52d3fd0839ca8d0 Mon Sep 17 00:00:00 2001 From: Monish Basaniwal <46259712+monizb@users.noreply.github.com> Date: Mon, 13 Jan 2020 16:06:07 +0530 Subject: [PATCH 12/13] Update index.md --- docs/tutorial/part-eight/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index ffba2de..48c551c 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -330,9 +330,9 @@ export const query = graphql` ` ``` -उपयुर्क्त उदहारण [Gatsby स्टार्टर ब्लॉग](/starters/gatsbyjs/gatsby-starter-blog/) पर आधारित है। अगर आप `` कौम्पोनॅन्ट मे props पास करते है, तो आप डाईनामिकली एक पोस्ट की मेटाडाट कोा बदल सकते हैं। इस मामले में, `gatsby-config.js` फाइल मे डिफ़ॉल्ट `siteMetadata` प्रॉपर्टी के बदले ब्लॉग पोस्ट के `title` और `excerpt` का इस्तेमाल किया जायेगा (अगर वह ब्लॉग पोस्ट के अंदर मौजूद है तोह)। +उपयुर्क्त उदहारण [Gatsby स्टार्टर ब्लॉग](/starters/gatsbyjs/gatsby-starter-blog/) पर आधारित है। अगर आप `` कौम्पोनॅन्ट मे props पास करते है, तो आप डाईनामिकली एक पोस्ट की मेटाडाट को बदल सकते हैं। इस मामले में, `gatsby-config.js` फाइल मे डिफ़ॉल्ट `siteMetadata` प्रॉपर्टी के बदले ब्लॉग पोस्ट के `title` और `excerpt` का इस्तेमाल किया जायेगा (अगर वह ब्लॉग पोस्ट के अंदर मौजूद है तोह)। -अब, अगर आप उपयुर्क्त तरीके से Lighthouse ऑडिट को फिर से चलाते है, तो आपको 100 स्कोर या १०० स्कोर के बेहद करीब मिलेंगे! +अब, अगर आप उपयुर्क्त तरीके से Lighthouse ऑडिट को फिर से चलाते है, तो आपको 100 स्कोर या 100 स्कोर के बेहद करीब मिलेंगे! > 💡 आगे पढ़ने के लिए और उदाहरणों के लिए, [SEO कौम्पोनॅन्ट ऐड करना](/docs/add-seo-component/) और [React Helmet डॉक्स](https://github.com/nfl/react-helmet#example) को देखिये! From 72419027ad4aabbe4d7454b88eded2303bb32fd7 Mon Sep 17 00:00:00 2001 From: Monish Basaniwal <46259712+monizb@users.noreply.github.com> Date: Tue, 14 Jan 2020 17:16:38 +0530 Subject: [PATCH 13/13] Update index.md --- docs/tutorial/part-eight/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index 48c551c..909fe45 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -338,7 +338,7 @@ export const query = graphql` ## इसको बेहतर बनाते जाइये -इस भाग मे, हमने आपको कुछ Gatsby-स्पेसिफिक टूल्स दिखाए जो आपकी साइट की प्रदर्शन को बढ़ाता है और आपके साइट को लाइव लेजाने मे आपकी मदद करता है। +इस भाग मे, हमने आपको कुछ Gatsby-स्पेसिफिक टूल्स दिखाए जो आपकी साइट की प्रदर्शन को बढ़ाता है और आपकी साइट को लाइव लेजाने मे आपकी मदद करता है। साइट मे सुधार लाने के लिए और सीखने के लिए Lighthouse एक बहुत उपयोगी साधन है -- इसमें बताये गए विस्तृत प्रतिक्रिया को देखना जारी रखिये और अपने साइट को बेहतर बनाते जाइये! @@ -355,7 +355,7 @@ export const query = graphql` ### आधिकारिक स्टार्टर्स 1. [Gatsby का डिफ़ॉल्ट स्टार्टर](https://github.com/gatsbyjs/gatsby-starter-default): इस बॉयलरप्लेट के साथ अपने प्रोजेक्ट की शुरुआत कीजिये। -यह बारबोनेस स्टार्टर, Gatsby के मुख्य कॉन्फ़िगरेशन फाइल्स के साथ शिप किया जाता है जिसकी आपको ज़रूरत पड़ सकती है। _[काम करता हुआ उदाहरण](http://gatsbyjs.github.io/gatsby-starter-default/)_ +यह बैरबोनस स्टार्टर, Gatsby के मुख्य कॉन्फ़िगरेशन फाइल्स के साथ शिप किया जाता है जिसकी आपको ज़रूरत पड़ सकती है। _[काम करता हुआ उदाहरण](http://gatsbyjs.github.io/gatsby-starter-default/)_ 2. [Gatsby का ब्लॉग स्टार्टर](https://github.com/gatsbyjs/gatsby-starter-blog): मस्त और अधिक तेज़ ब्लॉग बनाने के लिए Gatsby का स्टार्टर। _[चलता हुआ उदाहरण](http://gatsbyjs.github.io/gatsby-starter-blog/)_ 3. [Gatsby का हेलो वर्ल्ड स्टार्टर](https://github.com/gatsbyjs/gatsby-starter-hello-world): Gatsby साइट बनाने के लिए अधिकतम काम ज़रूरतों वाला Gatsby का स्टार्टर।_[चलता हुआ उदाहरण](https://gatsby-starter-hello-world-demo.netlify.com/)_