ਲਾਈਵ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ - MDX ਅਤੇ ਹੋਰ ਫਰੇਮਵਰਕ

ਤੁਹਾਡੇ ਕੋਲ ਸਭ ਤੋਂ ਵਧੀਆ ਓਪਨ ਸੋਰਸ ਪ੍ਰੋਜੈਕਟ ਹੋ ਸਕਦਾ ਹੈ, ਪਰ ਜੇਕਰ ਇਸ ਵਿੱਚ ਚੰਗੇ ਦਸਤਾਵੇਜ਼ ਨਹੀਂ ਹਨ, ਤਾਂ ਸੰਭਾਵਨਾ ਹੈ ਕਿ ਇਹ ਕਦੇ ਵੀ ਬੰਦ ਨਹੀਂ ਹੋਵੇਗਾ। ਦਫਤਰ ਵਿੱਚ, ਚੰਗੇ ਦਸਤਾਵੇਜ਼ ਤੁਹਾਨੂੰ ਉਹੀ ਸਵਾਲਾਂ ਦੇ ਜਵਾਬ ਦੇਣ ਤੋਂ ਰੋਕਣਗੇ। ਦਸਤਾਵੇਜ਼ ਇਹ ਵੀ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਜੇ ਮੁੱਖ ਕਰਮਚਾਰੀ ਕੰਪਨੀ ਛੱਡ ਦਿੰਦੇ ਹਨ ਜਾਂ ਭੂਮਿਕਾਵਾਂ ਬਦਲਦੇ ਹਨ ਤਾਂ ਲੋਕ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਸਮਝ ਸਕਦੇ ਹਨ। ਲਾਈਵ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ ਡੇਟਾ ਦੀ ਇਕਸਾਰਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਨਗੇ।

ਜੇ ਤੁਹਾਨੂੰ ਲੰਮਾ ਟੈਕਸਟ ਲਿਖਣ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਮਾਰਕਡਾਉਨ HTML ਦਾ ਇੱਕ ਵਧੀਆ ਵਿਕਲਪ ਹੈ। ਕਈ ਵਾਰ ਮਾਰਕਡਾਉਨ ਸੰਟੈਕਸ ਕਾਫ਼ੀ ਨਹੀਂ ਹੁੰਦਾ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ ਅਸੀਂ ਇਸਦੇ ਅੰਦਰ HTML ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ। ਉਦਾਹਰਨ ਲਈ, ਕਸਟਮ ਤੱਤ। ਇਸ ਲਈ, ਜੇਕਰ ਤੁਸੀਂ ਮੂਲ ਵੈਬ ਕੰਪੋਨੈਂਟਸ ਦੇ ਨਾਲ ਇੱਕ ਡਿਜ਼ਾਇਨ ਸਿਸਟਮ ਬਣਾ ਰਹੇ ਹੋ, ਤਾਂ ਉਹਨਾਂ ਨੂੰ ਟੈਕਸਟ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਆਸਾਨੀ ਨਾਲ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ React (ਜਾਂ Preact ਜਾਂ Vue ਵਰਗੇ ਕੋਈ ਹੋਰ JSX ਫਰੇਮਵਰਕ) ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ MDX ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉਹੀ ਕੰਮ ਕਰ ਸਕਦੇ ਹੋ।

ਇਹ ਲੇਖ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਲਿਖਣ ਅਤੇ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ ਬਣਾਉਣ ਲਈ ਸਾਧਨਾਂ ਦੀ ਇੱਕ ਵਿਆਪਕ ਸੰਖੇਪ ਜਾਣਕਾਰੀ ਹੈ। ਇੱਥੇ ਸੂਚੀਬੱਧ ਸਾਰੇ ਟੂਲ MDX ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰਦੇ ਹਨ, ਪਰ ਇਹ ਤੇਜ਼ੀ ਨਾਲ ਦਸਤਾਵੇਜ਼ੀ ਸਾਧਨਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤੇ ਜਾ ਰਹੇ ਹਨ।

MDX ਕੀ ਹੈ?

ਫਾਇਲ .mdx ਮਾਰਕਡਾਉਨ ਦੇ ਸਮਾਨ ਸੰਟੈਕਸ ਹੈ, ਪਰ ਤੁਹਾਨੂੰ ਇੰਟਰਐਕਟਿਵ JSX ਭਾਗਾਂ ਨੂੰ ਆਯਾਤ ਕਰਨ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਵਿੱਚ ਏਮਬੈਡ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। Vue ਭਾਗਾਂ ਲਈ ਸਮਰਥਨ ਅਲਫ਼ਾ ਵਿੱਚ ਹੈ। MDX ਨਾਲ ਕੰਮ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰਨ ਲਈ, ਸਿਰਫ਼ “Create React ਐਪ” ਨੂੰ ਸਥਾਪਿਤ ਕਰੋ। Next.js ਅਤੇ Gatsby ਲਈ ਪਲੱਗਇਨ ਹਨ। ਡੌਕਸੌਰਸ ਦੇ ਅਗਲੇ ਸੰਸਕਰਣ (ਵਰਜਨ 2) ਨੂੰ ਵੀ ਮੂਲ ਸਮਰਥਨ ਪ੍ਰਾਪਤ ਹੋਵੇਗਾ।

Docusaurus ਨਾਲ ਦਸਤਾਵੇਜ਼ ਲਿਖਣਾ

Docusaurus ਨੇ ਫੇਸਬੁੱਕ 'ਤੇ ਲਿਖਿਆ। ਉਹ ਇਸਨੂੰ ਪ੍ਰਤੀਕਿਰਿਆ ਨੂੰ ਛੱਡ ਕੇ ਹਰ ਓਪਨ ਸੋਰਸ ਪ੍ਰੋਜੈਕਟ 'ਤੇ ਵਰਤਦੇ ਹਨ। ਕੰਪਨੀ ਦੇ ਬਾਹਰ ਇਸਦੀ ਵਰਤੋਂ Redux, Prettier, Gulp ਅਤੇ Babel ਦੁਆਰਾ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।

ਪ੍ਰੋਜੈਕਟ ਜੋ ਡੌਕਸੌਰਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।

ਡੌਕਸੌਰਸ ਨੂੰ ਲਿਖਣ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ ਕੋਈ ਵੀ ਦਸਤਾਵੇਜ਼, ਨਾ ਸਿਰਫ ਫਰੰਟਐਂਡ ਦਾ ਵਰਣਨ ਕਰਨ ਲਈ। ਇਸ ਵਿੱਚ ਹੁੱਡ ਦੇ ਹੇਠਾਂ ਪ੍ਰਤੀਕਿਰਿਆ ਹੈ, ਪਰ ਤੁਹਾਨੂੰ ਇਸਨੂੰ ਵਰਤਣ ਲਈ ਇਸ ਤੋਂ ਜਾਣੂ ਹੋਣ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਇਹ ਤੁਹਾਡੀਆਂ ਮਾਰਕਡਾਊਨ ਫਾਈਲਾਂ ਨੂੰ ਲੈਂਦੀ ਹੈ, ਇੱਕ ਸੁੰਦਰ ਡਿਜ਼ਾਈਨ ਦੇ ਨਾਲ ਇੱਕ ਚੁਟਕੀ ਜਾਦੂ ਅਤੇ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸਟ੍ਰਕਚਰਡ, ਫਾਰਮੈਟ ਕੀਤੇ ਅਤੇ ਪੜ੍ਹਨਯੋਗ ਦਸਤਾਵੇਜ਼ ਤਿਆਰ ਹਨ।

Redux ਵੈੱਬਸਾਈਟ 'ਤੇ ਤੁਸੀਂ ਸਟੈਂਡਰਡ Docusaurus ਟੈਂਪਲੇਟ ਦੇਖ ਸਕਦੇ ਹੋ

ਡੌਕਸੌਰਸ ਨਾਲ ਬਣੀਆਂ ਵੈੱਬਸਾਈਟਾਂ ਵਿੱਚ ਮਾਰਕਡਾਊਨ-ਅਧਾਰਿਤ ਬਲੌਗ ਵੀ ਸ਼ਾਮਲ ਹੋ ਸਕਦਾ ਹੈ। Prism.js ਸਿੰਟੈਕਸ ਹਾਈਲਾਈਟਿੰਗ ਲਈ ਤੁਰੰਤ ਜੁੜਿਆ ਹੋਇਆ ਹੈ। ਇਸ ਤੱਥ ਦੇ ਬਾਵਜੂਦ ਕਿ ਡੌਕਸੌਰਸ ਮੁਕਾਬਲਤਨ ਹਾਲ ਹੀ ਵਿੱਚ ਪ੍ਰਗਟ ਹੋਇਆ ਸੀ, ਇਸ ਨੂੰ ਸਟੈਕਸ਼ੇਅਰ 'ਤੇ 2018 ਦੇ ਸਭ ਤੋਂ ਵਧੀਆ ਸਾਧਨ ਵਜੋਂ ਮਾਨਤਾ ਦਿੱਤੀ ਗਈ ਸੀ।

ਹੋਰ ਸਮੱਗਰੀ ਬਣਾਉਣ ਦੇ ਵਿਕਲਪ

Docusaurus ਖਾਸ ਤੌਰ 'ਤੇ ਦਸਤਾਵੇਜ਼ ਬਣਾਉਣ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ. ਬੇਸ਼ੱਕ, ਇੱਕ ਵੈਬਸਾਈਟ ਬਣਾਉਣ ਦੇ ਇੱਕ ਮਿਲੀਅਨ ਅਤੇ ਇੱਕ ਤਰੀਕੇ ਹਨ - ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਭਾਸ਼ਾ, CMS ਵਿੱਚ ਆਪਣਾ ਖੁਦ ਦਾ ਹੱਲ ਤੈਨਾਤ ਕਰ ਸਕਦੇ ਹੋ, ਜਾਂ ਇੱਕ ਸਥਿਰ ਸਾਈਟ ਜਨਰੇਟਰ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।

ਉਦਾਹਰਨ ਲਈ, React, IBM ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ, Apollo ਅਤੇ Ghost CMS ਲਈ ਦਸਤਾਵੇਜ਼ ਗੈਟਸਬੀ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ - ਇੱਕ ਸਥਿਰ ਸਾਈਟ ਜਨਰੇਟਰ ਜੋ ਅਕਸਰ ਬਲੌਗ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ Vue ਨਾਲ ਕੰਮ ਕਰਦੇ ਹੋ, ਤਾਂ VuePress ਤੁਹਾਡੇ ਲਈ ਇੱਕ ਵਧੀਆ ਵਿਕਲਪ ਹੈ। ਇੱਕ ਹੋਰ ਵਿਕਲਪ Python - MkDocs ਵਿੱਚ ਲਿਖੇ ਜਨਰੇਟਰ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਹੈ। ਇਹ ਓਪਨ ਸੋਰਸ ਹੈ ਅਤੇ ਇੱਕ ਸਿੰਗਲ YAML ਫਾਈਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕੌਂਫਿਗਰ ਕੀਤਾ ਗਿਆ ਹੈ। GitBook ਵੀ ਇੱਕ ਚੰਗਾ ਵਿਕਲਪ ਹੈ, ਪਰ ਇਹ ਸਿਰਫ਼ ਜਨਤਕ ਅਤੇ ਗੈਰ-ਵਪਾਰਕ ਟੀਮਾਂ ਲਈ ਮੁਫ਼ਤ ਹੈ। ਤੁਸੀਂ ਗਿੱਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਮਾਰਡਾਊਨ ਫਾਈਲਾਂ ਨੂੰ ਵੀ ਅਪਲੋਡ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਗਿਥਬ ਵਿੱਚ ਉਹਨਾਂ ਨਾਲ ਕੰਮ ਕਰ ਸਕਦੇ ਹੋ।

ਦਸਤਾਵੇਜ਼ੀ ਭਾਗ: ਡੌਕਜ਼, ਸਟੋਰੀਬੁੱਕ ਅਤੇ ਸਟਾਈਲਗਾਈਡਿਸਟ

ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼, ਸਿਸਟਮ ਡਿਜ਼ਾਈਨ, ਕੰਪੋਨੈਂਟ ਲਾਇਬ੍ਰੇਰੀਆਂ - ਜੋ ਵੀ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਕਹਿੰਦੇ ਹੋ, ਇਹ ਹਾਲ ਹੀ ਵਿੱਚ ਬਹੁਤ ਮਸ਼ਹੂਰ ਹੋ ਗਿਆ ਹੈ। ਰਿਐਕਟ ਵਰਗੇ ਕੰਪੋਨੈਂਟ ਫਰੇਮਵਰਕ ਅਤੇ ਇੱਥੇ ਦੱਸੇ ਗਏ ਟੂਲਸ ਦੇ ਆਗਮਨ ਨੇ ਉਹਨਾਂ ਨੂੰ ਵਿਅਰਥ ਪ੍ਰੋਜੈਕਟਾਂ ਤੋਂ ਉਪਯੋਗੀ ਸਾਧਨਾਂ ਵਿੱਚ ਬਦਲ ਦਿੱਤਾ ਹੈ।

ਸਟੋਰੀਬੁੱਕ, ਡੌਕਜ਼ ਅਤੇ ਸਟਾਈਲਗਾਈਡਿਸਟ ਸਾਰੇ ਇੱਕੋ ਕੰਮ ਕਰਦੇ ਹਨ: ਇੰਟਰਐਕਟਿਵ ਐਲੀਮੈਂਟਸ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੋ ਅਤੇ ਉਹਨਾਂ ਦੇ API ਨੂੰ ਦਸਤਾਵੇਜ਼ ਦਿਓ। ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਦਰਜਨਾਂ ਜਾਂ ਸੈਂਕੜੇ ਭਾਗ ਹੋ ਸਕਦੇ ਹਨ - ਸਾਰੇ ਵੱਖ-ਵੱਖ ਰਾਜਾਂ ਅਤੇ ਸ਼ੈਲੀਆਂ ਦੇ ਨਾਲ। ਜੇਕਰ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਕੰਪੋਨੈਂਟ ਦੁਬਾਰਾ ਵਰਤੇ ਜਾਣ, ਤਾਂ ਲੋਕਾਂ ਨੂੰ ਇਹ ਜਾਣਨ ਦੀ ਲੋੜ ਹੈ ਕਿ ਉਹ ਮੌਜੂਦ ਹਨ। ਅਜਿਹਾ ਕਰਨ ਲਈ, ਬਸ ਭਾਗਾਂ ਨੂੰ ਸੂਚੀਬੱਧ ਕਰੋ. ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ ਤੁਹਾਡੇ ਸਾਰੇ ਭਾਗਾਂ ਦੀ ਇੱਕ ਆਸਾਨ-ਲੱਭਣ ਵਾਲੀ ਸੰਖੇਪ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਇਹ ਵਿਜ਼ੂਅਲ ਇਕਸਾਰਤਾ ਨੂੰ ਬਣਾਈ ਰੱਖਣ ਅਤੇ ਦੁਹਰਾਉਣ ਵਾਲੇ ਕੰਮ ਤੋਂ ਬਚਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।

ਇਹ ਸਾਧਨ ਵੱਖ-ਵੱਖ ਰਾਜਾਂ ਨੂੰ ਦੇਖਣ ਦਾ ਇੱਕ ਸੁਵਿਧਾਜਨਕ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਇੱਕ ਅਸਲ ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਸੰਦਰਭ ਵਿੱਚ ਇੱਕ ਹਿੱਸੇ ਦੀ ਹਰੇਕ ਸਥਿਤੀ ਨੂੰ ਦੁਬਾਰਾ ਤਿਆਰ ਕਰਨਾ ਮੁਸ਼ਕਲ ਹੋ ਸਕਦਾ ਹੈ। ਅਸਲ ਐਪਲੀਕੇਸ਼ਨ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਦੀ ਬਜਾਏ, ਇਹ ਇੱਕ ਵੱਖਰੇ ਹਿੱਸੇ ਨੂੰ ਵਿਕਸਤ ਕਰਨ ਦੇ ਯੋਗ ਹੈ. ਹਾਰਡ-ਟੂ-ਪਹੁੰਚ ਅਵਸਥਾਵਾਂ (ਜਿਵੇਂ ਕਿ ਲੋਡ ਹੋਣ ਵਾਲੀਆਂ ਸਥਿਤੀਆਂ) ਨੂੰ ਸਿਮੂਲੇਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਵੱਖ-ਵੱਖ ਰਾਜਾਂ ਦੇ ਵਿਜ਼ੂਅਲ ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਇੱਕ ਸੂਚੀ ਦੇ ਨਾਲ, ਸਮੱਗਰੀ ਦਾ ਇੱਕ ਆਮ ਵਰਣਨ ਲਿਖਣਾ ਅਕਸਰ ਜ਼ਰੂਰੀ ਹੁੰਦਾ ਹੈ - ਡਿਜ਼ਾਈਨ ਤਰਕਸੰਗਤ, ਵਰਤੋਂ ਦੇ ਕੇਸ, ਜਾਂ ਉਪਭੋਗਤਾ ਟੈਸਟਿੰਗ ਨਤੀਜਿਆਂ ਦੇ ਵਰਣਨ। ਮਾਰਕਡਾਊਨ ਸਿੱਖਣਾ ਬਹੁਤ ਆਸਾਨ ਹੈ - ਆਦਰਸ਼ਕ ਤੌਰ 'ਤੇ, ਦਿਸ਼ਾ ਨਿਰਦੇਸ਼ ਡਿਜ਼ਾਈਨਰਾਂ ਅਤੇ ਡਿਵੈਲਪਰਾਂ ਲਈ ਸਾਂਝਾ ਸਰੋਤ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ। Docz, Styleguidist, ਅਤੇ Storybook ਮਾਰਕਡਾਊਨ ਨੂੰ ਭਾਗਾਂ ਨਾਲ ਆਸਾਨੀ ਨਾਲ ਮਿਲਾਉਣ ਦਾ ਤਰੀਕਾ ਪੇਸ਼ ਕਰਦੇ ਹਨ।

ਡੌਕਜ਼

ਵਰਤਮਾਨ ਵਿੱਚ Docz ਸਿਰਫ਼ React ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ, ਪਰ Preact, Vue ਅਤੇ ਵੈਬ ਕੰਪੋਨੈਂਟਸ ਦਾ ਸਮਰਥਨ ਕਰਨ ਲਈ ਸਰਗਰਮ ਕੰਮ ਚੱਲ ਰਿਹਾ ਹੈ। Docz ਤਿੰਨਾਂ ਵਿੱਚੋਂ ਸਭ ਤੋਂ ਤਾਜ਼ਾ ਟੂਲ ਹੈ, ਪਰ ਇਹ ਗਿਥਬ 'ਤੇ 14 ਤੋਂ ਵੱਧ ਤਾਰੇ ਇਕੱਠੇ ਕਰਨ ਵਿੱਚ ਕਾਮਯਾਬ ਰਿਹਾ ਹੈ। Docz ਦੋ ਭਾਗ ਪੇਸ਼ ਕਰਦਾ ਹੈ - <Playground> и < Props >. ਉਹ ਆਯਾਤ ਅਤੇ ਫਾਈਲਾਂ ਵਿੱਚ ਵਰਤੇ ਜਾਂਦੇ ਹਨ .mdx.

import { Playground, Props } from "docz";
import Button from "../src/Button";

## You can _write_ **markdown**
### You can import and use components

<Button>click</Button>

ਤੁਸੀਂ ਇਸਦੇ ਨਾਲ ਆਪਣੇ ਖੁਦ ਦੇ ਪ੍ਰਤੀਕਰਮ ਦੇ ਭਾਗਾਂ ਨੂੰ ਸਮੇਟ ਸਕਦੇ ਹੋ <Playground>ਬਿਲਟ-ਇਨ ਕੋਡਪੈਨ ਜਾਂ ਕੋਡਸੈਂਡਬੌਕਸ ਦਾ ਐਨਾਲਾਗ ਬਣਾਉਣ ਲਈ - ਭਾਵ, ਤੁਸੀਂ ਆਪਣਾ ਕੰਪੋਨੈਂਟ ਦੇਖਦੇ ਹੋ ਅਤੇ ਇਸਨੂੰ ਸੰਪਾਦਿਤ ਕਰ ਸਕਦੇ ਹੋ।

<Playground>
  <Button>click</Button>
</Playground>

<Props> ਦਿੱਤੇ ਗਏ React ਕੰਪੋਨੈਂਟ, ਪੂਰਵ-ਨਿਰਧਾਰਤ ਮੁੱਲਾਂ, ਅਤੇ ਕੀ ਸੰਪਤੀ ਦੀ ਲੋੜ ਹੈ, ਲਈ ਸਾਰੀਆਂ ਉਪਲਬਧ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦਿਖਾਏਗਾ।

<Props of={Button} />

ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ, ਮੈਨੂੰ ਇਹ MDX ਆਧਾਰਿਤ ਪਹੁੰਚ ਸਮਝਣ ਲਈ ਸਭ ਤੋਂ ਆਸਾਨ ਅਤੇ ਕੰਮ ਕਰਨ ਲਈ ਸਭ ਤੋਂ ਆਸਾਨ ਲੱਗਦਾ ਹੈ।

ਜੇਕਰ ਤੁਸੀਂ ਗੈਟਸਬੀ ਸਟੈਟਿਕ ਸਾਈਟ ਜਨਰੇਟਰ ਦੇ ਪ੍ਰਸ਼ੰਸਕ ਹੋ, ਤਾਂ ਡੌਕਜ਼ ਇੱਕ ਵਧੀਆ ਏਕੀਕਰਣ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦਾ ਹੈ।

ਸ਼ੈਲੀ ਗਾਈਡ

Docz ਵਾਂਗ, ਮਾਰਕਡਾਊਨ ਸਿੰਟੈਕਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉਦਾਹਰਨਾਂ ਲਿਖੀਆਂ ਜਾਂਦੀਆਂ ਹਨ। ਸਟਾਈਲਗਾਈਡਿਸਟ ਨਿਯਮਤ ਫਾਈਲਾਂ ਵਿੱਚ ਮਾਰਕਡਾਊਨ ਕੋਡ ਬਲਾਕਸ (ਤਿਹਰੀ ਕੋਟਸ) ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ .md ਫਾਈਲਾਂ, MDX ਨਹੀਂ।

```js
<Button onClick={() => console.log('clicked')>Push Me</Button>

ਮਾਰਕਡਾਊਨ ਵਿੱਚ ਕੋਡ ਬਲਾਕ ਆਮ ਤੌਰ 'ਤੇ ਸਿਰਫ਼ ਕੋਡ ਦਿਖਾਉਂਦੇ ਹਨ। ਸਟਾਈਲਗਾਈਡਿਸਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, ਭਾਸ਼ਾ ਟੈਗ ਵਾਲੇ ਕੋਡ ਦਾ ਕੋਈ ਵੀ ਬਲਾਕ js, jsx ਜ javascript React ਕੰਪੋਨੈਂਟ ਦੇ ਤੌਰ 'ਤੇ ਪੇਸ਼ ਕੀਤਾ ਜਾਵੇਗਾ। Docz ਵਾਂਗ, ਕੋਡ ਸੰਪਾਦਨਯੋਗ ਹੈ - ਤੁਸੀਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ ਅਤੇ ਤੁਰੰਤ ਨਤੀਜਾ ਦੇਖ ਸਕਦੇ ਹੋ।

ਸਟਾਈਲਗਾਈਡਿਸਟ ਆਪਣੇ ਆਪ ਹੀ ਪ੍ਰੋਪਟਾਈਪ, ਫਲੋ ਜਾਂ ਟਾਈਪਸਕ੍ਰਿਪਟ ਘੋਸ਼ਣਾਵਾਂ ਤੋਂ ਇੱਕ ਪ੍ਰਾਪਰਟੀ ਟੇਬਲ ਬਣਾਏਗਾ।

ਸਟਾਈਲਗਾਈਡਿਸਟ ਵਰਤਮਾਨ ਵਿੱਚ React ਅਤੇ Vue ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ।

ਕਹਾਣੀ ਕਿਤਾਬ

ਸਟੋਰੀਬੁੱਕ ਆਪਣੇ ਆਪ ਨੂੰ "UI ਕੰਪੋਨੈਂਟ ਡਿਵੈਲਪਮੈਂਟ ਵਾਤਾਵਰਨ" ਦੇ ਤੌਰ 'ਤੇ ਰੱਖਦੀ ਹੈ। ਮਾਰਕਡਾਊਨ ਜਾਂ MDX ਫਾਈਲਾਂ ਦੇ ਅੰਦਰ ਉਦਾਹਰਨ ਭਾਗਾਂ ਨੂੰ ਲਿਖਣ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਲਿਖਦੇ ਹੋ ਕਹਾਣੀਆਂ Javascript ਫਾਈਲਾਂ ਦੇ ਅੰਦਰ. История ਇੱਕ ਹਿੱਸੇ ਦੀ ਖਾਸ ਸਥਿਤੀ ਦਾ ਦਸਤਾਵੇਜ਼. ਉਦਾਹਰਨ ਲਈ, ਇੱਕ ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਇੱਕ ਲੋਡ ਕੀਤੀ ਸਥਿਤੀ ਅਤੇ ਇੱਕ ਅਪਾਹਜ ਅਵਸਥਾ ਲਈ ਇਤਿਹਾਸ ਹੋ ਸਕਦਾ ਹੈ (ਅਯੋਗ).

storiesOf('Button', module)
  .add('disabled', () => (
    <Button disabled>lorem ipsum</Button>
  ))

ਸਟੋਰੀਬੁੱਕ ਸਟਾਈਲਗਾਈਡਿਸਟ ਅਤੇ ਡੌਕਜ਼ ਨਾਲੋਂ ਬਹੁਤ ਜ਼ਿਆਦਾ ਗੁੰਝਲਦਾਰ ਹੈ। ਪਰ ਉਸੇ ਸਮੇਂ, ਇਹ ਸਭ ਤੋਂ ਪ੍ਰਸਿੱਧ ਵਿਕਲਪ ਹੈ; ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਗਿਥਬ 'ਤੇ 36 ਤੋਂ ਵੱਧ ਤਾਰੇ ਹਨ. ਇਹ 000 ਯੋਗਦਾਨੀਆਂ ਅਤੇ ਫੁੱਲ-ਟਾਈਮ ਸਟਾਫ ਦੇ ਨਾਲ ਇੱਕ ਓਪਨ ਸੋਰਸ ਪ੍ਰੋਜੈਕਟ ਹੈ। ਇਸਦੀ ਵਰਤੋਂ Airbnb, Algolia, Atlassian, Lyft ਅਤੇ Salesforce ਦੁਆਰਾ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਸਟੋਰੀਬੁੱਕ ਮੁਕਾਬਲੇਬਾਜ਼ਾਂ ਨਾਲੋਂ ਵਧੇਰੇ ਫਰੇਮਵਰਕ ਦਾ ਸਮਰਥਨ ਕਰਦੀ ਹੈ - ਰੀਐਕਟ, ਰੀਐਕਟ ਨੇਟਿਵ, ਵਿਊ, ਐਂਗੁਲਰ, ਮਿਥ੍ਰਿਲ, ਐਂਬਰ, ਰਾਇਟ, ਸਵੇਲਟ ਅਤੇ ਨਿਯਮਤ HTML।

ਭਵਿੱਖ ਵਿੱਚ ਰੀਲੀਜ਼ ਵਿੱਚ Docz ਅਤੇ MDX ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਪੇਸ਼ ਕੀਤੀਆਂ ਜਾਣਗੀਆਂ।

# Button

Some _notes_ about your button written with **markdown syntax**.

<Story name="disabled">
  <Button disabled>lorem ipsum</Button>
</Story>

ਸਟੋਰੀਬੁੱਕ ਦੀਆਂ ਨਵੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਗਲੇ ਕੁਝ ਮਹੀਨਿਆਂ ਵਿੱਚ ਹੌਲੀ ਹੌਲੀ ਰੋਲ ਆਊਟ ਹੋ ਜਾਣਗੀਆਂ ਅਤੇ ਅਜਿਹਾ ਲਗਦਾ ਹੈ ਕਿ ਇਹ ਇੱਕ ਵੱਡਾ ਕਦਮ ਹੋਵੇਗਾ।

ਨਤੀਜੇ

ਪੈਟਰਨ ਲਾਇਬ੍ਰੇਰੀ ਦੇ ਲਾਭ ਮੀਡੀਅਮ 'ਤੇ ਲੱਖਾਂ ਲੇਖਾਂ ਵਿੱਚ ਵਡਿਆਏ ਗਏ ਹਨ। ਜਦੋਂ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਉਹ ਸੰਬੰਧਿਤ ਉਤਪਾਦਾਂ ਨੂੰ ਬਣਾਉਣਾ ਅਤੇ ਪਛਾਣ ਬਣਾਈ ਰੱਖਣਾ ਆਸਾਨ ਬਣਾਉਂਦੇ ਹਨ। ਬੇਸ਼ੱਕ, ਇਹਨਾਂ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਸਾਧਨ ਜਾਦੂਈ ਢੰਗ ਨਾਲ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਨਹੀਂ ਬਣਾਏਗਾ। ਇਸ ਲਈ ਸਾਵਧਾਨ ਡਿਜ਼ਾਈਨ ਅਤੇ CSS ਦੀ ਲੋੜ ਹੈ। ਪਰ ਜਦੋਂ ਇਹ ਪੂਰੀ ਕੰਪਨੀ ਲਈ ਇੱਕ ਡਿਜ਼ਾਇਨ ਸਿਸਟਮ ਨੂੰ ਪਹੁੰਚਯੋਗ ਬਣਾਉਣ ਦਾ ਸਮਾਂ ਆਉਂਦਾ ਹੈ, ਤਾਂ Docz, Storybook ਅਤੇ Styleguidist ਵਧੀਆ ਵਿਕਲਪ ਹਨ।

ਅਨੁਵਾਦਕ ਤੋਂ। ਹੈਬਰੇ 'ਤੇ ਇਹ ਮੇਰਾ ਪਹਿਲਾ ਅਨੁਭਵ ਹੈ। ਜੇ ਤੁਹਾਨੂੰ ਕੋਈ ਅਸ਼ੁੱਧੀਆਂ ਮਿਲਦੀਆਂ ਹਨ, ਜਾਂ ਲੇਖ ਨੂੰ ਸੁਧਾਰਨ ਲਈ ਸੁਝਾਅ ਹਨ, ਤਾਂ ਮੈਨੂੰ ਇੱਕ ਨਿੱਜੀ ਸੰਦੇਸ਼ ਵਿੱਚ ਲਿਖੋ।

ਸਰੋਤ: www.habr.com