{"id":34791,"date":"2019-10-31T22:00:25","date_gmt":"2019-10-31T19:00:25","guid":{"rendered":"https:\/\/prohoster.info\/blog\/zhivye-gajdlajny-mdx-i-drugie-frejmvorki\/"},"modified":"2019-10-31T22:00:25","modified_gmt":"2019-10-31T19:00:25","slug":"zhivye-gajdlajny-mdx-i-drugie-frejmvorki","status":"publish","type":"post","link":"https:\/\/prohoster.info\/sq\/blog\/administrirovanie\/zhivye-gajdlajny-mdx-i-drugie-frejmvorki","title":{"rendered":"Udh\u00ebzime t\u00eb drejtp\u00ebrdrejta \u2014 MDX dhe framework t\u00eb tjer\u00eb","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Ju mund t\u00eb keni projektin m\u00eb t\u00eb mir\u00eb me kod t\u00eb hapur, por n\u00ebse nuk ka dokumentacion t\u00eb mir\u00eb, ka nj\u00eb mund\u00ebsi q\u00eb kurr\u00eb nuk do t\u00eb arrij\u00eb sukses. Nj\u00eb dokumentacion i mir\u00eb n\u00eb zyr\u00eb do t'ju ndihmoj\u00eb t\u00eb shmangni p\u00ebrgjigjen e t\u00eb nj\u00ebjt\u00ebve pyetje. Dokumentacioni gjithashtu garanton q\u00eb njer\u00ebzit mund t\u00eb kuptojn\u00eb projektin, n\u00ebse punonj\u00ebsit ky\u00e7 ikin ose rolet ndryshojn\u00eb. Udh\u00ebzimet e gjalla ndihmojn\u00eb p\u00ebr t\u00eb siguruar integritetin e t\u00eb dh\u00ebnave. <\/p>\n

<\/a><\/noindex><\/p>\n

N\u00ebse duhet t\u00eb shkruani nj\u00eb tekst t\u00eb gjat\u00eb, Markdown \u00ebsht\u00eb nj\u00eb alternativ\u00eb e shk\u00eblqyer p\u00ebr HTML. Ndonj\u00ebher\u00eb sintaksa e Markdown-it nuk \u00ebsht\u00eb e mjaftueshme. N\u00eb k\u00ebt\u00eb rast ne mund t\u00eb p\u00ebrdorim HTML brenda tij. P\u00ebr shembull, elemente t\u00eb personalizuara. Prandaj, n\u00ebse po nd\u00ebrtoni nj\u00eb sistem dizajni me komponente t\u00eb reja t\u00eb uebit, \u00ebsht\u00eb e leht\u00eb t'i p\u00ebrfshini ato n\u00eb dokumentacionin tekstual. N\u00ebse po p\u00ebrdorni React (ose ndonj\u00eb korniz\u00eb tjet\u00ebr JSX, si Preact ose Vue), mund t\u00eb b\u00ebni t\u00eb nj\u00ebjt\u00ebn gj\u00eb duke p\u00ebrdorur MDX. <\/p>\n

<\/p>\n

Ky artikull \u00ebsht\u00eb nj\u00eb p\u00ebrmbledhje e gjer\u00eb e mjeteve p\u00ebr shkruar dokumentacion dhe krijimin e udh\u00ebzimeve. Jo t\u00eb gjitha mjetet e listuara k\u00ebtu p\u00ebrdorin MDX, por ai po p\u00ebrfshihet gjithnj\u00eb e m\u00eb shum\u00eb n\u00eb mjetet e dokumentimit.<\/p>\n

<\/p>\n

\u00c7far\u00eb \u00ebsht\u00eb MDX?<\/h2>\n

<\/p>\n

Skedari .mdx<\/code> \u0438\u043c\u0435\u0435\u0442 \u0442\u043e\u0442 \u0436\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0447\u0442\u043e \u0438 Markdown, \u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b JSX \u0438 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u0432\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u043d\u0442. \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Vue \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0430\u043b\u044c\u0444\u0435. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 MDX, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c «Create React App». \u0415\u0441\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f Next.js \u0438 Gatsby. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f Docusaurus (\u0432\u0435\u0440\u0441\u0438\u044f 2) \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443.<\/p>\n

<\/p>\n

Shkrimi i dokumentacionit me Docusaurus<\/h2>\n

<\/p>\n

Docusaurus \u00ebsht\u00eb shkruar nga Facebook. Ata e p\u00ebrdorin n\u00eb \u00e7do projekt me kod t\u00eb hapur, p\u00ebrve\u00e7 React. Jasht\u00eb kompanis\u00eb, p\u00ebrdoret nga Redux, Prettier, Gulp dhe Babel.<\/p>\n

<\/p>\n

\"Udh\u00ebzimeProjekte q\u00eb p\u00ebrdorin Docusaurus.<\/em><\/p>\n

<\/p>\n

Docusaurus mund t\u00eb p\u00ebrdoret p\u00ebr t\u00eb shkruar \u043b\u044e\u0431\u043e\u0439<\/em> dokumentacion, jo vet\u00ebm p\u00ebr t\u00eb p\u00ebrshkruar frontendin. Ai ka React n\u00ebn kapak, por p\u00ebr t'u p\u00ebrdorur me t\u00eb, nuk \u00ebsht\u00eb e nevojshme t\u00eb jeni t\u00eb njohur me t\u00eb. Ai merr skedar\u00ebt tuaj Markdown, nj\u00eb gll\u00ebnjk\u00eb magjie dhe dokumentacioni i strukturuar, i formatuar dhe i lexuesh\u00ebm me nj\u00eb dizajn t\u00eb bukur \u00ebsht\u00eb gati. <\/p>\n

<\/p>\n

\"Udh\u00ebzime
\nN\u00eb faqen e Redux mund t\u00eb shihni nj\u00eb model standard t\u00eb Docusaurus<\/em><\/p>\n

<\/p>\n

Faqet e krijuara me Docusaurus mund t\u00eb p\u00ebrfshijn\u00eb gjithashtu nj\u00eb blog t\u00eb bazuar n\u00eb Markdown. P\u00ebr theksimin e sintaks\u00ebs, Prism.js \u00ebsht\u00eb i p\u00ebrfshir\u00eb menj\u00ebher\u00eb. Pavar\u00ebsisht se Docusaurus ka dal\u00eb relativisht rishtazi, ai \u00ebsht\u00eb shpallur mjeti m\u00eb i mir\u00eb i vitit 2018 n\u00eb StackShare. <\/p>\n

<\/p>\n

Opsione t\u00eb tjera p\u00ebr krijimin e p\u00ebrmbajtjes<\/h2>\n

<\/p>\n

Docusaurus \u00ebsht\u00eb projektuar posa\u00e7\u00ebrisht p\u00ebr krijimin e dokumentacionit. Natyrisht, ka nj\u00eb milion e nj\u00eb m\u00ebnyra p\u00ebr t\u00eb krijuar nj\u00eb faqe \u2014 mund t\u00eb vendosni zgjidhjen tuaj n\u00eb \u00e7do gjuh\u00eb, CMS ose p\u00ebrdorni nj\u00eb gjenerator faqesh statike.<\/p>\n

<\/p>\n

P\u00ebr shembull, dokumentacioni p\u00ebr React, sistemi dizajni i IBM, Apollo dhe Ghost CMS p\u00ebrdorin Gatsby \u2014 kjo \u00ebsht\u00eb nj\u00eb gjenerator faqesh statike q\u00eb shpesh p\u00ebrdoret p\u00ebr blogje. N\u00ebse po punoni me Vue, VuePress do t'ju sh\u00ebrbej\u00eb si nj\u00eb mund\u00ebsi e mir\u00eb. Nj\u00eb alternativ\u00eb tjet\u00ebr \u00ebsht\u00eb t\u00eb p\u00ebrdorni nj\u00eb gjenerator t\u00eb shkruar n\u00eb Python \u2014 MkDocs. Ai \u00ebsht\u00eb i hapur dhe konfigurohet me nj\u00eb sked\u00eb YAML. GitBook gjithashtu \u00ebsht\u00eb nj\u00eb alternativ\u00eb e mir\u00eb, por \u00ebsht\u00eb falas vet\u00ebm p\u00ebr ekipet me kod t\u00eb hapur dhe jo fitimprur\u00ebse. Gjithashtu mund t\u00eb ngarkoni skedar\u00eb Markdown, duke p\u00ebrdorur git, dhe t\u00eb punoni me ta n\u00eb Github. <\/p>\n

<\/p>\n

Dokumentimi i komponenteve: Docz, Storybook dhe Styleguidist<\/h2>\n

<\/p>\n

Udh\u00ebzimet, sistemet e dizajnit, bibliotekat e komponent\u00ebve \u2014 si\u00e7 i quani, ato jan\u00eb b\u00ebr\u00eb shum\u00eb t\u00eb njohura koh\u00ebt e fundit. Pavar\u00ebsisht nga shfaqja e kornizave komponent\u00ebsh, si React dhe mjetet e p\u00ebrmendura k\u00ebtu \u2014 kan\u00eb b\u00ebr\u00eb q\u00eb ato t\u00eb kalojn\u00eb nga projekte t\u00eb kota n\u00eb mjete t\u00eb dobishme. <\/p>\n

<\/p>\n

Storybook, Docz dhe Styleguidist b\u00ebjn\u00eb t\u00eb nj\u00ebjt\u00ebn gj\u00eb: shfaqin elemente interaktive dhe dokumentojn\u00eb API-n\u00eb e tyre. Nj\u00eb projekt mund t\u00eb ket\u00eb dhjet\u00ebra ose madje qindra komponente \u2014 t\u00eb gjitha me gjendje dhe stile t\u00eb ndryshme. N\u00ebse d\u00ebshironi q\u00eb komponent\u00ebt t\u00eb p\u00ebrdoren p\u00ebrs\u00ebri, njer\u00ebzit duhet t\u00eb din\u00eb se ekzistojn\u00eb. P\u00ebr k\u00ebt\u00eb, mjafton t\u00eb katalogizoni komponent\u00ebt. Udh\u00ebzimet ofrojn\u00eb nj\u00eb p\u00ebrmbledhje t\u00eb leht\u00eb p\u00ebr t'u k\u00ebrkuar t\u00eb gjitha komponent\u00ebt tuaj. Kjo ndihmon n\u00eb ruajtjen e q\u00ebndrueshm\u00ebris\u00eb vizuale dhe shmangjen e pun\u00ebs s\u00eb p\u00ebrs\u00ebritur.<\/p>\n

<\/p>\n

K\u00ebto mjete ofrojn\u00eb nj\u00eb m\u00ebnyr\u00eb t\u00eb p\u00ebrshtatshme p\u00ebr t\u00eb par\u00eb gjendjet e ndryshme. Mund t\u00eb jet\u00eb e v\u00ebshtir\u00eb t\u00eb riprodhoni \u00e7do gjendje t\u00eb komponentit n\u00eb kontekstin e nj\u00eb aplikacioni real. N\u00eb vend q\u00eb t\u00eb klikoni n\u00eb nj\u00eb aplikacion t\u00eb v\u00ebrtet\u00eb, ia vlen t\u00eb zhvilloni nj\u00eb komponent t\u00eb ve\u00e7ant\u00eb. Mund t\u00eb simuloni gjendje t\u00eb pakta t\u00eb arritshme (p\u00ebr shembull, gjendja e ngarkes\u00ebs). <\/p>\n

<\/p>\n

S\u00eb bashku me demonstrimin vizual t\u00eb ndryshimeve dhe list\u00ebn e ve\u00e7orive, shpesh \u00ebsht\u00eb e nevojshme t\u00eb shkruhet nj\u00eb p\u00ebrshkrim i p\u00ebrgjithsh\u00ebm i p\u00ebrmbajtjes \u2014 arsyetimi i dizajnit, rastet e p\u00ebrdorimit ose p\u00ebrshkrimi i rezultateve t\u00eb testimeve p\u00ebr p\u00ebrdoruesit. Markdown \u00ebsht\u00eb shum\u00eb i leht\u00eb p\u00ebr t'u m\u00ebsuar \u2014 idealisht, udh\u00ebzuesit duhet t\u00eb jen\u00eb nj\u00eb burim i p\u00ebrbashk\u00ebt p\u00ebr dizajner\u00ebt dhe zhvilluesit. Docz, Styleguidist dhe Storybook ofrojn\u00eb nj\u00eb m\u00ebnyr\u00eb t\u00eb leht\u00eb p\u00ebr t\u00eb kombinuar Markdown me komponente.<\/p>\n

<\/p>\n

Docz<\/h2>\n

<\/p>\n

Aktualisht Docz funksionon vet\u00ebm me React, por \u00ebsht\u00eb duke u punuar aktivisht p\u00ebr mb\u00ebshtetje p\u00ebr Preact, Vue dhe komponent\u00eb web. Docz \u00ebsht\u00eb m\u00eb i fresk\u00ebt nga tre mjetet, por n\u00eb Github ka grumbulluar m\u00eb shum\u00eb se 14,000 yje. Docz paraqet dy componente \u2014 <Playground><\/code> dhe < Props ><\/code>. Ato importohen dhe p\u00ebrdoren n\u00eb skedar\u00ebt .mdx<\/code>. <\/p>\n

<\/p>\n

import { Playground, Props } from \"docz\";\nimport Button from \"..\/src\/Button\";\n\n## Mund t\u00eb _shkruani_ **markdown**\n### Mund t\u00eb importoni dhe p\u00ebrdorni komponente\n\n