Magento 2 is one of the most popular e-commerce platforms, and it’s probably the most difficult to use for developers. One of the things you will use a lot while developing in Magento 2 is the XML layouts, which can be confusing in the beginning.
I will include some quick tips you might need in developing and modifying existing layouts.
Move Elements
If you want to move a block or container from one place to another in a page, you can use the following:
<move element=\"element.to.move\" destination=\"new.parent\" />Here, we have the element attribute which should be the name of the block or container you want to move, and the destination attribute which should be the name of the block or container you want to move the element to.
You can also use before or after attributes to specify where the element should go inside the parent like this:<move element=\"element.to.move\" destination=\"new.parent\" after=\"new.sibling\" />
where new.sibling is another child in new.parent
Remove Element
To remove a block from a page, use the following:
<referenceBlock name=\"element.to.remove\" remove=\"true\" />You can also do the same for containers:
<referenceContainer name=\"element.to.remove\" remove=\"true\" />Note: When Magento applies layout changes, move rules are applied before remove . This means if you move an element to a parent, and remove then the parent, the element you moved into it will be removed as well.
Change a Block’s Template
To change a block’s template, you can do the following:
<referenceBlock name=\"block.to.change\">\n\t<action method=\"setTemplate\">\n <argument name=\"template\" xsi:type=\"string\">VENDOR_MODULE::path/to/template</argument>\n </action>\n</referenceBlock>Where VENDOR_MODULE::path/to/template should be the path to the new template you want to use for the block.
Change Block’s Visibility Based on Configuration
If you want a block to be visible based on configuration’s value that is set by the admin, you can do it this way:
<block class=\"...\" name=\"...\" ifconfig=\"my/yesno/field\">Where my/yesno/field can be any path to a field in the system settings.
Remove CSS or JS files
To remove a css, javascript or any static file present in <head> , use the following:
<head>\n\t<remove src=\"src/to/file\" />\n</head>Set Attributes of Body
To set attributes of the body of a page, like class, use the following:
<body>\n\t<attribute name=\"class\" value=\"class-name\"/>\n</body>You can also set style , class and other attributes.
Conclusion
Those were just some quick tips you will probably use a lot if you’re developing a store with Magento 2. You can read more about this, as well as other helpful information, see here.
","url":"https://backend.shahednasser.com/tips-for-magento-2-layouts/","canonical_url":null,"uuid":"994e98e7-7823-464d-aab9-225d82809696","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5fa594edbc1317001e675bc8","reading_time":2,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"Magento 2 is one of the most popular e-commerce platforms, and it’s probably the most difficult to use for developers. One of the things you will use a lot while developing in Magento 2 is the XML layouts, which can be confusing in the beginning.
I will include some quick tips you might need in developing and modifying existing layouts.
Move Elements
If you want to move a block or container from one place to another in a page, you can use the following:
<move element=\"element.to.move\" destination=\"new.parent\" />Here, we have the element attribute which should be the name of the block or container you want to move, and the destination attribute which should be the name of the block or container you want to move the element to.
You can also use before or after attributes to specify where the element should go inside the parent like this:<move element=\"element.to.move\" destination=\"new.parent\" after=\"new.sibling\" />
where new.sibling is another child in new.parent
Remove Element
To remove a block from a page, use the following:
<referenceBlock name=\"element.to.remove\" remove=\"true\" />You can also do the same for containers:
<referenceContainer name=\"element.to.remove\" remove=\"true\" />Note: When Magento applies layout changes, move rules are applied before remove . This means if you move an element to a parent, and remove then the parent, the element you moved into it will be removed as well.
Change a Block’s Template
To change a block’s template, you can do the following:
<referenceBlock name=\"block.to.change\">\n\t<action method=\"setTemplate\">\n <argument name=\"template\" xsi:type=\"string\">VENDOR_MODULE::path/to/template</argument>\n </action>\n</referenceBlock>Where VENDOR_MODULE::path/to/template should be the path to the new template you want to use for the block.
Change Block’s Visibility Based on Configuration
If you want a block to be visible based on configuration’s value that is set by the admin, you can do it this way:
<block class=\"...\" name=\"...\" ifconfig=\"my/yesno/field\">Where my/yesno/field can be any path to a field in the system settings.
Remove CSS or JS files
To remove a css, javascript or any static file present in <head> , use the following:
<head>\n\t<remove src=\"src/to/file\" />\n</head>Set Attributes of Body
To set attributes of the body of a page, like class, use the following:
<body>\n\t<attribute name=\"class\" value=\"class-name\"/>\n</body>You can also set style , class and other attributes.
Conclusion
Those were just some quick tips you will probably use a lot if you’re developing a store with Magento 2. You can read more about this, as well as other helpful information, see here.
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Magento 2 is one of the most popular e-commerce platforms, and it’s probably the most difficult to use for developers. One of the things you will use a lot while developing in Magento 2 is the XML layouts, which can be confusing in the beginning."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I will include some quick tips you might need in developing and modifying existing layouts."}]},{"type":"element","tagName":"h1","properties":{"id":"move-elements"},"children":[{"type":"text","value":"Move Elements"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want to move a block or container from one place to another in a page, you can use the following: "}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"xml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-xml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"move"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"element"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"element.to.move"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"destination"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"new.parent"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here, we have the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"element"}]},{"type":"text","value":" attribute which should be the name of the block or container you want to move, and the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"destination"}]},{"type":"text","value":" attribute which should be the name of the block or container you want to move the element to."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"before"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"after"}]},{"type":"text","value":" attributes to specify where the element should go inside the parent like this:Perhaps one of the hardest tasks is finding free resources for your projects. This list will hold websites that offer freebies. I will try to keep the list updated along the way.
Some of the websites may have a different license for each resource they offer, so you might need to look out for that.
General
- Freebie Supply: Free icons, vectors, fonts, templates, themes and more.
- Freebiesbug: Another website that has a wide collection of icons, vectors, templates, and more.
- Neede: It’s aimed more towards designers, but developers might find some useful stuff like templates, colors, illustrations and more.
Fonts
Icons
Website Templates
- Free CSS: Free CSS templates, layouts, and menus.
- Free Web Templates
- Free Website Templates
- One Page HTML templates
- BootstrapMade: Free website templates (requires attribution)
- HTML5 UP!: Free responsive HTML5 templates (requires attribution)
- TEMPLATD: Free HTML templates (requires attribution)
Illustrations
- unDraw: Free illustrations for any project you can think of.
- Lukasz Adam’s Free Illustrations: Free unique illustrations.
- DrawKit: Free wide range of illustrations.
Images
- Unsplash: Free images with no attribution required.
- Pexels: Free stock images with no attribution required.
Gradients and Colors
- WebGradients: Free gradients that you can either copy as CSS rules or download them as .sketch or .psd
- uiGradients: Free gradients that you can either copy as CSS rules or download them as .jpg images.
- Gradient Hunt: Free gradients that you can either copy as CSS rules or download them as .png images. They also offer a Chrome extension.
- Color Hunt: Free color schemas. Also offers a Chrome extension.
Other
- Pattern Cooler: Free background patterns.
- The Pattern Library: Free background patterns.
- hatchful: Free logo generator.
Perhaps one of the hardest tasks is finding free resources for your projects. This list will hold websites that offer freebies. I will try to keep the list updated along the way.
Some of the websites may have a different license for each resource they offer, so you might need to look out for that.
General
- Freebie Supply: Free icons, vectors, fonts, templates, themes and more.
- Freebiesbug: Another website that has a wide collection of icons, vectors, templates, and more.
- Neede: It’s aimed more towards designers, but developers might find some useful stuff like templates, colors, illustrations and more.
Fonts
Icons
Website Templates
- Free CSS: Free CSS templates, layouts, and menus.
- Free Web Templates
- Free Website Templates
- One Page HTML templates
- BootstrapMade: Free website templates (requires attribution)
- HTML5 UP!: Free responsive HTML5 templates (requires attribution)
- TEMPLATD: Free HTML templates (requires attribution)
Illustrations
- unDraw: Free illustrations for any project you can think of.
- Lukasz Adam’s Free Illustrations: Free unique illustrations.
- DrawKit: Free wide range of illustrations.
Images
- Unsplash: Free images with no attribution required.
- Pexels: Free stock images with no attribution required.
Gradients and Colors
- WebGradients: Free gradients that you can either copy as CSS rules or download them as .sketch or .psd
- uiGradients: Free gradients that you can either copy as CSS rules or download them as .jpg images.
- Gradient Hunt: Free gradients that you can either copy as CSS rules or download them as .png images. They also offer a Chrome extension.
- Color Hunt: Free color schemas. Also offers a Chrome extension.
Other
- Pattern Cooler: Free background patterns.
- The Pattern Library: Free background patterns.
- hatchful: Free logo generator.
Almost a year ago, I wrote about how I created a CLI tool to cross-post articles to Dev.to, Hashnode, and Medium. I created the tool because it made the process easier for me, but I also received a lot of feedback from other writers about how it was helpful for them.
Since then, I haven't been able to maintain it much due to my busy schedule. Now, I'm taking more time to commit to it and improve it with the help of the community.
On Monday, the 28th of February, I pushed out a new release of cross-post-blog with the version 1.3.0. I'll be sharing some of the features and fixes it includes. You can also check out the GitHub repository for more information about the library.
If you're reading this article on Dev.to, Hashnode, or Medium, then it is reposted from my own blog using the Cross-Post CLI tool!
Posting From Local Files
Based on demand from some of the developers using this library, I've now added the ability to post directly from a local file instead of a public URL. To do that, you simply need to add the -l or --local option to your command.
For example:
cross-post run /path/to/test.md -lThis will post a local file test.md to all of the platforms.
You can also use it with all of the options you previously used.
Changed Markdown Converter
Each of the platforms requires you to send the content of your article to post in Markdown format. So, when you pass a URL to the command, the content of the article on that page is converted to Markdown before submitting it to the platform you want to post on.
I previously was using node-html-markdown. It worked fine in terms of functionality. However, there were some issues related to how it parsed code blocks.
The new version is now using turndown instead, which does a better job of parsing code blocks. Your articles should now be posted to the different platforms almost exactly as you have it posted on your own blog.
Added Title Selector
Previously, you could set a default article and image selectors in the configuration. You could also override those configurations in the run command.
N0w, you can also set the default title selector in your configuration:
cross-post config titleConfigOr, pass it as an option -ts or --title-selector to the run command:
cross-post run <url> -ts .post-full-titleUpcoming Features
I'll be working from now on to improve the tool and add new features, either from the request of developers using this tool or from my own experience using it. For example, a feature that has been requested is the ability to update posts.
I'm also going to look into adding new platforms to enable posting to. If you have any platform in mind that you think would be good to add please do let me know!
How to Install or Update
If you want to install and start using Cross-Post or update your version you can install it with NPM:
npm i -g cross-post-blogPlease check the README for more information on installing and using this tool.
Contribution
At the moment, there's no contribution guideline added in the repository (I'm working on that). However, if you would like to contribute to any of the existing issues or add new features, then please don't hesitate!
","url":"https://backend.shahednasser.com/cross-post-cli-tool-new-features-and-fixes/","canonical_url":null,"uuid":"0a1d38d3-80a7-479b-94f7-bc16b2f8de06","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"621c858deb81df0613580535","reading_time":2,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"Almost a year ago, I wrote about how I created a CLI tool to cross-post articles to Dev.to, Hashnode, and Medium. I created the tool because it made the process easier for me, but I also received a lot of feedback from other writers about how it was helpful for them.
Since then, I haven't been able to maintain it much due to my busy schedule. Now, I'm taking more time to commit to it and improve it with the help of the community.
On Monday, the 28th of February, I pushed out a new release of cross-post-blog with the version 1.3.0. I'll be sharing some of the features and fixes it includes. You can also check out the GitHub repository for more information about the library.
If you're reading this article on Dev.to, Hashnode, or Medium, then it is reposted from my own blog using the Cross-Post CLI tool!
Posting From Local Files
Based on demand from some of the developers using this library, I've now added the ability to post directly from a local file instead of a public URL. To do that, you simply need to add the -l or --local option to your command.
For example:
cross-post run /path/to/test.md -lThis will post a local file test.md to all of the platforms.
You can also use it with all of the options you previously used.
Changed Markdown Converter
Each of the platforms requires you to send the content of your article to post in Markdown format. So, when you pass a URL to the command, the content of the article on that page is converted to Markdown before submitting it to the platform you want to post on.
I previously was using node-html-markdown. It worked fine in terms of functionality. However, there were some issues related to how it parsed code blocks.
The new version is now using turndown instead, which does a better job of parsing code blocks. Your articles should now be posted to the different platforms almost exactly as you have it posted on your own blog.
Added Title Selector
Previously, you could set a default article and image selectors in the configuration. You could also override those configurations in the run command.
N0w, you can also set the default title selector in your configuration:
cross-post config titleConfigOr, pass it as an option -ts or --title-selector to the run command:
cross-post run <url> -ts .post-full-titleUpcoming Features
I'll be working from now on to improve the tool and add new features, either from the request of developers using this tool or from my own experience using it. For example, a feature that has been requested is the ability to update posts.
I'm also going to look into adding new platforms to enable posting to. If you have any platform in mind that you think would be good to add please do let me know!
How to Install or Update
If you want to install and start using Cross-Post or update your version you can install it with NPM:
npm i -g cross-post-blogPlease check the README for more information on installing and using this tool.
Contribution
At the moment, there's no contribution guideline added in the repository (I'm working on that). However, if you would like to contribute to any of the existing issues or add new features, then please don't hesitate!
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Almost a year ago, I wrote about how "},{"type":"element","tagName":"a","properties":{"href":"https://blog.shahednasser.com/i-created-a-cli-to-cross-post-your-articles-on-dev-hashnode-and-medium"},"children":[{"type":"text","value":"I created a CLI tool"}]},{"type":"text","value":" to "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/shahednasser/cross-post"},"children":[{"type":"text","value":"cross-post"}]},{"type":"text","value":" articles to Dev.to, Hashnode, and Medium. I created the tool because it made the process easier for me, but I also received a lot of feedback from other writers about how it was helpful for them."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Since then, I haven't been able to maintain it much due to my busy schedule. Now, I'm taking more time to commit to it and improve it with the help of the community."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On Monday, the 28th of February, I pushed out a new release of "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"cross-post-blog"}]},{"type":"text","value":" with the version "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"1.3.0"}]},{"type":"text","value":". I'll be sharing some of the features and fixes it includes. You can also check out the "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/shahednasser/cross-post"},"children":[{"type":"text","value":"GitHub repository"}]},{"type":"text","value":" for more information about the library."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're reading this article on Dev.to, Hashnode, or Medium, then it is reposted from "},{"type":"element","tagName":"a","properties":{"href":"https://blog.shahednasser.com/cross-post-cli-tool-new-features-and-fixes/"},"children":[{"type":"text","value":"my own blog"}]},{"type":"text","value":" using the Cross-Post CLI tool!"}]},{"type":"element","tagName":"h2","properties":{"id":"posting-from-local-files"},"children":[{"type":"text","value":"Posting From Local Files"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Based on demand from some of the developers using this library, I've now added the ability to post directly from a local file instead of a public URL. To do that, you simply need to add the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"-l"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--local"}]},{"type":"text","value":" option to your command."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"text","value":"cross-post run /path/to/test.md -l"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This will post a local file "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"test.md"}]},{"type":"text","value":" to all of the platforms."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also use it with all of the "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/shahednasser/cross-post#cross-posting-your-articles"},"children":[{"type":"text","value":"options you previously used"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"changed-markdown-converter"},"children":[{"type":"text","value":"Changed Markdown Converter"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Each of the platforms requires you to send the content of your article to post in Markdown format. So, when you pass a URL to the command, the content of the article on that page is converted to Markdown before submitting it to the platform you want to post on."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I previously was using "},{"type":"element","tagName":"a","properties":{"href":"https://www.npmjs.com/package/node-html-markdown"},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"node-html-markdown"}]}]},{"type":"text","value":". It worked fine in terms of functionality. However, there were some issues related to how it "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/shahednasser/cross-post/issues/14"},"children":[{"type":"text","value":"parsed code blocks"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The new version is now using "},{"type":"element","tagName":"a","properties":{"href":"https://www.npmjs.com/package/turndown"},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"turndown"}]}]},{"type":"text","value":" instead, which does a better job of parsing code blocks. Your articles should now be posted to the different platforms almost exactly as you have it posted on your own blog."}]},{"type":"element","tagName":"h2","properties":{"id":"added-title-selector"},"children":[{"type":"text","value":"Added Title Selector"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Previously, you could set a default article and image selectors in the configuration. You could also override those configurations in the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"run"}]},{"type":"text","value":" command."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"N0w, you can also set the default title selector in your configuration:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"text","value":"cross-post config titleConfig"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Or, pass it as an option "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"-ts"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"--title-selector"}]},{"type":"text","value":" to the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"run"}]},{"type":"text","value":" command:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"text","value":"cross-post run "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"url"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":" -ts .post-full-title"}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"upcoming-features"},"children":[{"type":"text","value":"Upcoming Features"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I'll be working from now on to improve the tool and add new features, either from the request of developers using this tool or from my own experience using it. For example, a feature that has been requested is the ability to "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/shahednasser/cross-post/issues/20"},"children":[{"type":"text","value":"update posts"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I'm also going to look into adding new platforms to enable posting to. If you have any platform in mind that you think would be good to add please do let me know!"}]},{"type":"element","tagName":"h2","properties":{"id":"how-to-install-or-update"},"children":[{"type":"text","value":"How to Install or Update"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want to install and start using Cross-Post or update your version you can install it with NPM:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":" i -g cross-post-blog"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Please check the "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/shahednasser/cross-post"},"children":[{"type":"text","value":"README"}]},{"type":"text","value":" for more information on installing and using this tool."}]},{"type":"element","tagName":"h2","properties":{"id":"contribution"},"children":[{"type":"text","value":"Contribution"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"At the moment, there's no contribution guideline added in the repository (I'm working on that). However, if you would like to contribute to any of the "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/shahednasser/cross-post/issues"},"children":[{"type":"text","value":"existing issues"}]},{"type":"text","value":" or add new features, then please don't hesitate!"}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"posting-from-local-files","heading":"Posting From Local Files"},{"id":"changed-markdown-converter","heading":"Changed Markdown Converter"},{"id":"added-title-selector","heading":"Added Title Selector"},{"id":"upcoming-features","heading":"Upcoming Features"},{"id":"how-to-install-or-update","heading":"How to Install or Update"},{"id":"contribution","heading":"Contribution"}]},"featureImageSharp":{"base":"Cross-Post-CLI-Tool-New-Features-and-Fixes.webp","publicURL":"/static/3992c44a6f85cbb0e7f336ddf13d9f6e/Cross-Post-CLI-Tool-New-Features-and-Fixes.webp","imageMeta":{"width":1000,"height":420},"childImageSharp":{"fluid":{"base64":"data:image/webp;base64,UklGRkoAAABXRUJQVlA4ID4AAAAwAwCdASoUAAgAPtFWo0uoJKMhsAgBABoJaQAAW+FdmqtQAP7yO9S/h6sU4d2KDtkqIR0EW+vogSm7QAAAAA==","aspectRatio":2.364864864864865,"src":"/static/3992c44a6f85cbb0e7f336ddf13d9f6e/89afa/Cross-Post-CLI-Tool-New-Features-and-Fixes.webp","srcSet":"/static/3992c44a6f85cbb0e7f336ddf13d9f6e/9fca7/Cross-Post-CLI-Tool-New-Features-and-Fixes.webp 175w,\n/static/3992c44a6f85cbb0e7f336ddf13d9f6e/37a4e/Cross-Post-CLI-Tool-New-Features-and-Fixes.webp 350w,\n/static/3992c44a6f85cbb0e7f336ddf13d9f6e/89afa/Cross-Post-CLI-Tool-New-Features-and-Fixes.webp 700w,\n/static/3992c44a6f85cbb0e7f336ddf13d9f6e/47f67/Cross-Post-CLI-Tool-New-Features-and-Fixes.webp 1000w","srcWebp":"/static/3992c44a6f85cbb0e7f336ddf13d9f6e/89afa/Cross-Post-CLI-Tool-New-Features-and-Fixes.webp","srcSetWebp":"/static/3992c44a6f85cbb0e7f336ddf13d9f6e/9fca7/Cross-Post-CLI-Tool-New-Features-and-Fixes.webp 175w,\n/static/3992c44a6f85cbb0e7f336ddf13d9f6e/37a4e/Cross-Post-CLI-Tool-New-Features-and-Fixes.webp 350w,\n/static/3992c44a6f85cbb0e7f336ddf13d9f6e/89afa/Cross-Post-CLI-Tool-New-Features-and-Fixes.webp 700w,\n/static/3992c44a6f85cbb0e7f336ddf13d9f6e/47f67/Cross-Post-CLI-Tool-New-Features-and-Fixes.webp 1000w","sizes":"(max-width: 700px) 100vw, 700px"}}}}},{"node":{"id":"Ghost__Post__6127ba1b3ed159214d382e9a","title":"I Created a CLI to Cross-Post Your Articles On Dev, Hashnode, and Medium","slug":"i-created-a-cli-to-cross-post-your-articles-on-dev-hashnode-and-medium","featured":false,"feature_image":"https://res-2.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/photo-1567361808960-dec9cb578182.jpg","excerpt":"If you own a blog like me, but also cross-post your articles on other platforms, it gets tedious. So I created a simple CLI to do it easily.","custom_excerpt":"If you own a blog like me, but also cross-post your articles on other platforms, it gets tedious. So I created a simple CLI to do it easily.","visibility":"public","created_at_pretty":"26 Mar 2021","published_at_pretty":"26 Mar 2021","updated_at_pretty":"26 Aug 2021","created_at":"2021-03-26T21:20:31.000+00:00","published_at":"2021-03-26T21:32:49.000+00:00","updated_at":"2021-08-26T17:42:48.000+00:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"shahed","url":"https://backend.shahednasser.com/author/shahed/","name":"Shahed Nasser","bio":null,"cover_image":null,"profile_image":"https://backend.shahednasser.com/content/images/2022/03/IMG_0591.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"IMG_0591.jpg","publicURL":"/static/ceb49c3c631485453e71e00d7f84b069/IMG_0591.jpg","imageMeta":{"width":1182,"height":1179},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMEAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAADBAL/2gAMAwEAAhADEAAAAdXiFM6i0CohUWXoKn//xAAcEAACAgIDAAAAAAAAAAAAAAACAwESBBEhM0H/2gAIAQEAAQUCWySE3WEr7SzbXjAj4iKty+sOQ//EABYRAQEBAAAAAAAAAAAAAAAAAAERIP/aAAgBAwEBPwEhj//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB4QAAIBBAMBAAAAAAAAAAAAAAABIRESMUECECJx/9oACAEBAAY/ApVGWvOjzgtUwLlTZA0sdL4f/8QAHBAAAwACAwEAAAAAAAAAAAAAAAERITFBkbHB/9oACAEBAAE/IahkCy+N2GwZpjQiJHJCspUFY0QrSi+HqiW2rgf/2gAMAwEAAgADAAAAEPw3/wD/xAAYEQEBAAMAAAAAAAAAAAAAAAAAARExQf/aAAgBAwEBPxCtjDqP/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQAxEf/aAAgBAgEBPxBFus6Tt//EAB8QAQEAAgIBBQAAAAAAAAAAAAERACExQWFRcYGR0f/aAAgBAQABPxAuaBPPzkO1wyX7F4wkwXanfZrFQgeqE9JgS14vVOvrERIJomVBKwt2jebAeP0yVa8h1n//2Q==","aspectRatio":1,"src":"/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg","srcSet":"/static/ceb49c3c631485453e71e00d7f84b069/f340b/IMG_0591.jpg 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/22d64/IMG_0591.jpg 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/31709/IMG_0591.jpg 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/aa249/IMG_0591.jpg 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/0dc33/IMG_0591.jpg 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/d8257/IMG_0591.jpg 1182w","srcWebp":"/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp","srcSetWebp":"/static/ceb49c3c631485453e71e00d7f84b069/59cda/IMG_0591.webp 28w,\n/static/ceb49c3c631485453e71e00d7f84b069/7da75/IMG_0591.webp 55w,\n/static/ceb49c3c631485453e71e00d7f84b069/8678c/IMG_0591.webp 110w,\n/static/ceb49c3c631485453e71e00d7f84b069/f282e/IMG_0591.webp 165w,\n/static/ceb49c3c631485453e71e00d7f84b069/a7b21/IMG_0591.webp 220w,\n/static/ceb49c3c631485453e71e00d7f84b069/63099/IMG_0591.webp 1182w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"open-source","url":"https://backend.shahednasser.com/tag/open-source/","name":"Open Source","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},"tags":[{"slug":"open-source","url":"https://backend.shahednasser.com/tag/open-source/","name":"Open Source","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"my-experience","url":"https://backend.shahednasser.com/tag/my-experience/","name":"My Experience","visibility":"public","feature_image":"https://backend.shahednasser.com/content/images/2022/01/photo-1493612276216-ee3925520721-2-1.jpeg","description":"Sharing my experience in or opinions regarding programming, work, or other concepts.","meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"projects","url":"https://backend.shahednasser.com/tag/projects/","name":"Projects","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":"If you own a blog like me, but also cross-post your articles on platforms like\nDev, Hashnode, and Medium, it gets tedious to post your articles in different\nplaces.\n\nSo, I created a simple CLI to cross-post my articles on these platforms easily.\nYou can find it on NPM [https://www.npmjs.com/package/cross-post-blog] and check\nthe code on GitHub [https://github.com/shahednasser/cross-post#readme].\n\n\n--------------------------------------------------------------------------------\n\nInstallation\nIn your terminal:\n\nnpm i -g cross-post-blog\n\n\n\n--------------------------------------------------------------------------------\n\nUsage\nSet Configuration\nFor the simplicity of the CLI, and considering most of the APIs of each of the\nplatforms do not allow or provide endpoints for user authentication, you will\nneed to get your access tokens, API keys, or integration tokens from your own\nprofile before using cross-post. This will just need to be done the first time\nor if you want to change the tokens.\n\nThe tokens are all stored on your local machine.\n\nHere's a guide on how to do this for each of the platforms:\n\ndev.to\nAfter logging into your account on dev.to, click on your profile image and then\nclick on Settings\n\nThen, click on the Accounts tab in the sidebar\n\nScroll down to the \"DEV Community API Keys\" section. You need to generate a new\nkey. Enter \"Cross Post\" in the description text box or any name you want then\nclick \"Generate API key\"\n\nCopy the generated API key, then in your terminal:\n\ncross-post config dev\n\n\nYou'll be prompted to enter the API key. Paste the API key you copied earlier\nand hit enter. The API key will be saved.\n\nHashnode\nAfter logging into your account on Hashnode, click on your profile image and\nthen click on \"Account Settings\"\n\nIn the sidebar click on \"Developer\"\n\nClick the \"Generate\" button and then copy the generated access token.\n\nRun the following in your terminal:\n\ncross-post config hashnode\n\n\nFirst, you'll be prompted to enter your access token. Then, you need to enter\nyour Hashnode username. The reason behind that is that when later posting on\nhashnode your publication id is required, so your username will be used here to\nretrieve the publication id. Once you do and everything goes well, the\nconfiguration will be saved successfully.\n\nMedium\nAfter logging into Medium, click on your profile image and then click on\n\"Settings\"\n\nThen click on \"Integration Tokens\" in the sidebar\n\nYou have to enter the description of the token then click \"Get integration\ntoken\" and copy the generated token.\n\nIn your terminal run:\n\ncross-post config medium\n\n\nThen enter the integration token you copied. A request will also be sent to\nMedium to get your authorId as it will be used later to post your article on\nMedium. Once that is done successfully, your configuration will be saved.\n\n\n--------------------------------------------------------------------------------\n\nCross-Posting Your Articles\nTo cross-post your articles, you will use the following command:\n\ncross-post runIf you own a blog like me, but also cross-post your articles on platforms like Dev, Hashnode, and Medium, it gets tedious to post your articles in different places.
So, I created a simple CLI to cross-post my articles on these platforms easily. You can find it on NPM and check the code on GitHub.
Installation
In your terminal:
npm i -g cross-post-blog\nUsage
Set Configuration
For the simplicity of the CLI, and considering most of the APIs of each of the platforms do not allow or provide endpoints for user authentication, you will need to get your access tokens, API keys, or integration tokens from your own profile before using cross-post. This will just need to be done the first time or if you want to change the tokens.
The tokens are all stored on your local machine.
Here's a guide on how to do this for each of the platforms:
dev.to
After logging into your account on dev.to, click on your profile image and then click on Settings
![\"Settings\"](\"https://github.com/shahednasser/cross-post/raw/master/assets/dev-1.png\")
Then, click on the Accounts tab in the sidebar
![\"Accounts\"](\"https://github.com/shahednasser/cross-post/raw/master/assets/dev-2.png\")
Scroll down to the \"DEV Community API Keys\" section. You need to generate a new key. Enter \"Cross Post\" in the description text box or any name you want then click \"Generate API key\"
![\"Generate](\"https://github.com/shahednasser/cross-post/raw/master/assets/dev-3.png\")
Copy the generated API key, then in your terminal:
cross-post config dev\nYou'll be prompted to enter the API key. Paste the API key you copied earlier and hit enter. The API key will be saved.
Hashnode
After logging into your account on Hashnode, click on your profile image and then click on \"Account Settings\"
![\"Settings\"](\"https://github.com/shahednasser/cross-post/raw/master/assets/Hashnode-1.png\")
In the sidebar click on \"Developer\"
![\"Developer\"](\"https://github.com/shahednasser/cross-post/raw/master/assets/Hashnode-2.png\")
Click the \"Generate\" button and then copy the generated access token.
![\"Generate\"](\"https://github.com/shahednasser/cross-post/raw/master/assets/Hashnode-3.png\")
Run the following in your terminal:
cross-post config hashnode\nFirst, you'll be prompted to enter your access token. Then, you need to enter your Hashnode username. The reason behind that is that when later posting on hashnode your publication id is required, so your username will be used here to retrieve the publication id. Once you do and everything goes well, the configuration will be saved successfully.
Medium
After logging into Medium, click on your profile image and then click on \"Settings\"
![\"Settings\"](\"https://github.com/shahednasser/cross-post/raw/master/assets/Medium-1.png\")
Then click on \"Integration Tokens\" in the sidebar
![\"Integration](\"https://github.com/shahednasser/cross-post/raw/master/assets/Medium-2.png\")
You have to enter the description of the token then click \"Get integration token\" and copy the generated token.
![\"Generate](\"https://github.com/shahednasser/cross-post/raw/master/assets/Medium-3.png\")
In your terminal run:
cross-post config medium\nThen enter the integration token you copied. A request will also be sent to Medium to get your authorId as it will be used later to post your article on Medium. Once that is done successfully, your configuration will be saved.
Cross-Posting Your Articles
To cross-post your articles, you will use the following command:
cross-post run <url> [options]\nWhere url is the URL of your article that you want to cross-post. options can be:
-p, --platforms [platforms...]The platform(s) you want to post the article on. By default, if this option is not included, it will be posted on all the platforms. An example of its usage:
cross-post run <url> -p dev hashnode\n-t, --title [title]The title by default will be taken from the URL you supplied, however, if you want to use a different title you can supply it in this option.-s, --selector [selector]by default, thearticleselector will be used to find your article in the URL you pass as an argument. However, if you need a different selector to be used to find the article, you can pass it here.
This command will find the HTML element in the URL page you pass as an argument and if found, it will extract the title (if no title is passed in the arguments) and cover the image.
It should be noted that on all platforms the article will be posted as a draft, however, due to the limitations of the Hashnode API, it will be posted as \"hidden from Hashnode\" but it will be public in your publication.
UPDATE: In the latest version of this library, you can now pass the option -pu, --public to publish the article publicly.
Conclusion
If you find any bugs or have any ideas you would like to contribute, please do so on the issues tab in the GitHub Repository!
","url":"https://backend.shahednasser.com/i-created-a-cli-to-cross-post-your-articles-on-dev-hashnode-and-medium/","canonical_url":null,"uuid":"810d1589-151e-4878-8e94-b564b4ea0d85","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"605e501fe52227001e518c28","reading_time":4,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"If you own a blog like me, but also cross-post your articles on platforms like Dev, Hashnode, and Medium, it gets tedious to post your articles in different places.
So, I created a simple CLI to cross-post my articles on these platforms easily. You can find it on NPM and check the code on GitHub.
Installation
In your terminal:
npm i -g cross-post-blog\nUsage
Set Configuration
For the simplicity of the CLI, and considering most of the APIs of each of the platforms do not allow or provide endpoints for user authentication, you will need to get your access tokens, API keys, or integration tokens from your own profile before using cross-post. This will just need to be done the first time or if you want to change the tokens.
The tokens are all stored on your local machine.
Here's a guide on how to do this for each of the platforms:
dev.to
After logging into your account on dev.to, click on your profile image and then click on Settings
Then, click on the Accounts tab in the sidebar
Scroll down to the \"DEV Community API Keys\" section. You need to generate a new key. Enter \"Cross Post\" in the description text box or any name you want then click \"Generate API key\"
Copy the generated API key, then in your terminal:
cross-post config dev\nYou'll be prompted to enter the API key. Paste the API key you copied earlier and hit enter. The API key will be saved.
Hashnode
After logging into your account on Hashnode, click on your profile image and then click on \"Account Settings\"
In the sidebar click on \"Developer\"
Click the \"Generate\" button and then copy the generated access token.
Run the following in your terminal:
cross-post config hashnode\nFirst, you'll be prompted to enter your access token. Then, you need to enter your Hashnode username. The reason behind that is that when later posting on hashnode your publication id is required, so your username will be used here to retrieve the publication id. Once you do and everything goes well, the configuration will be saved successfully.
Medium
After logging into Medium, click on your profile image and then click on \"Settings\"
Then click on \"Integration Tokens\" in the sidebar
You have to enter the description of the token then click \"Get integration token\" and copy the generated token.
In your terminal run:
cross-post config medium\nThen enter the integration token you copied. A request will also be sent to Medium to get your authorId as it will be used later to post your article on Medium. Once that is done successfully, your configuration will be saved.
Cross-Posting Your Articles
To cross-post your articles, you will use the following command:
cross-post run <url> [options]\nWhere url is the URL of your article that you want to cross-post. options can be:
-p, --platforms [platforms...]The platform(s) you want to post the article on. By default, if this option is not included, it will be posted on all the platforms. An example of its usage:
cross-post run <url> -p dev hashnode\n-t, --title [title]The title by default will be taken from the URL you supplied, however, if you want to use a different title you can supply it in this option.-s, --selector [selector]by default, thearticleselector will be used to find your article in the URL you pass as an argument. However, if you need a different selector to be used to find the article, you can pass it here.
This command will find the HTML element in the URL page you pass as an argument and if found, it will extract the title (if no title is passed in the arguments) and cover the image.
It should be noted that on all platforms the article will be posted as a draft, however, due to the limitations of the Hashnode API, it will be posted as \"hidden from Hashnode\" but it will be public in your publication.
UPDATE: In the latest version of this library, you can now pass the option -pu, --public to publish the article publicly.
Conclusion
If you find any bugs or have any ideas you would like to contribute, please do so on the issues tab in the GitHub Repository!
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you own a blog like me, but also cross-post your articles on platforms like Dev, Hashnode, and Medium, it gets tedious to post your articles in different places."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So, I created a simple CLI to cross-post my articles on these platforms easily. You can find it on "},{"type":"element","tagName":"a","properties":{"href":"https://www.npmjs.com/package/cross-post-blog"},"children":[{"type":"text","value":"NPM"}]},{"type":"text","value":" and check the code on "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/shahednasser/cross-post#readme"},"children":[{"type":"text","value":"GitHub"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"installation"},"children":[{"type":"text","value":"Installation"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In your terminal:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"npm i -g cross-post-blog\n"}]}]}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tagName":"h3","properties":{"id":"set-configuration"},"children":[{"type":"text","value":"Set Configuration"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For the simplicity of the CLI, and considering most of the APIs of each of the platforms do not allow or provide endpoints for user authentication, you will need to get your access tokens, API keys, or integration tokens from your own profile before using cross-post. This will just need to be done the first time or if you want to change the tokens."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"The tokens are all stored on your local machine."}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here's a guide on how to do this for each of the platforms:"}]},{"type":"element","tagName":"h3","properties":{"id":"dev-to"},"children":[{"type":"text","value":"dev.to"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After logging into your account on dev.to, click on your profile image and then click on Settings"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://github.com/shahednasser/cross-post/raw/master/assets/dev-1.png","className":["kg-image"],"alt":"Settings","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, click on the Accounts tab in the sidebar"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://github.com/shahednasser/cross-post/raw/master/assets/dev-2.png","className":["kg-image"],"alt":"Accounts","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Scroll down to the \"DEV Community API Keys\" section. You need to generate a new key. Enter \"Cross Post\" in the description text box or any name you want then click \"Generate API key\""}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://github.com/shahednasser/cross-post/raw/master/assets/dev-3.png","className":["kg-image"],"alt":"Generate API Key","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Copy the generated API key, then in your terminal:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"cross-post config dev\n"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You'll be prompted to enter the API key. Paste the API key you copied earlier and hit enter. The API key will be saved."}]},{"type":"element","tagName":"h3","properties":{"id":"hashnode"},"children":[{"type":"text","value":"Hashnode"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After logging into your account on Hashnode, click on your profile image and then click on \"Account Settings\""}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://github.com/shahednasser/cross-post/raw/master/assets/Hashnode-1.png","className":["kg-image"],"alt":"Settings","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the sidebar click on \"Developer\""}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://github.com/shahednasser/cross-post/raw/master/assets/Hashnode-2.png","className":["kg-image"],"alt":"Developer","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Click the \"Generate\" button and then copy the generated access token."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://github.com/shahednasser/cross-post/raw/master/assets/Hashnode-3.png","className":["kg-image"],"alt":"Generate","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Run the following in your terminal:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"cross-post config hashnode\n"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First, you'll be prompted to enter your access token. Then, you need to enter your Hashnode username. The reason behind that is that when later posting on hashnode your publication id is required, so your username will be used here to retrieve the publication id. Once you do and everything goes well, the configuration will be saved successfully."}]},{"type":"element","tagName":"h3","properties":{"id":"medium"},"children":[{"type":"text","value":"Medium"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After logging into Medium, click on your profile image and then click on \"Settings\""}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://github.com/shahednasser/cross-post/raw/master/assets/Medium-1.png","className":["kg-image"],"alt":"Settings","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then click on \"Integration Tokens\" in the sidebar"}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://github.com/shahednasser/cross-post/raw/master/assets/Medium-2.png","className":["kg-image"],"alt":"Integration Tokens","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You have to enter the description of the token then click \"Get integration token\" and copy the generated token."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://github.com/shahednasser/cross-post/raw/master/assets/Medium-3.png","className":["kg-image"],"alt":"Generate token","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In your terminal run:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"cross-post config medium\n"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then enter the integration token you copied. A request will also be sent to Medium to get your authorId as it will be used later to post your article on Medium. Once that is done successfully, your configuration will be saved."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"cross-posting-your-articles"},"children":[{"type":"text","value":"Cross-Posting Your Articles"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To cross-post your articles, you will use the following command:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"cross-post runI have created a new library called use-dark-mode-hook. It's a simple library that allows you to easily add dark mode to your React projects.
This library provides a custom hook useDarkMode and a button toggler component DarkModeToggler. You can use them together or separately. However, this library does not provide any styling regarding dark and light modes. You have to do that yourself.
Purpose
As I was trying to add Dark mode in my react project, I noticed that there are packages out there that do provide this, however, either they don't work with the latest React version or they only provide the functionality or UI. Thus, I decided to create a simple hook that adds the dark mode functionality to the website, and a component that provides a toggling button.
Installation
To install the package:
npm i use-dark-mode-hookUsage
useDarkMode + DarkModeToggler
To use both the functionality and UI (more details about the options of each in below sections):
import useDarkMode, { DarkModeToggler } from 'use-dark-mode-hook'\n\nfunction MyComponent () {\n const [isDarkMode, toggleDarkMode] = useDarkMode()\n\n return (\n <DarkModeToggler \n isDarkMode={isDarkMode} \n toggleDarkMode={toggleDarkMode}\n buttonClassName=\"some-classes\"\n />\n )\n}That's it! useDarkMode will manage the state and logic while DarkModeToggler provides a toggle button for the user to toggle dark mode.
![](\"https://res-5.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/demo.gif\")
By default, useDarkMode will apply either dark or light class to the body of the document based on the choice of the user. You can change the names of the classes by passing darkModeClass and lightModeClass to useDarkMode, and change the element the class will be applied to by passing its selector in element to useDarkMode. You can check out the all the options here.
useDarkMode hook
You can use the hook separately with your own toggler:
import useDarkMode from 'use-dark-mode-hook'\n\nfunction myComponent (props) {\n const [isDarkMode, toggleDarkMode] = useDarkMode()\n\n //do something with it\n}You'll have to use isDarkMode as the current state of dark mode, and toggleDarkMode to toggle dark mode. toggleDarkMode takes a boolean specifying whether dark mode is enabled or disabled.
DarkModeToggler
You can use the toggler separately with your own logic:
import { DarkModeToggler } from 'use-dark-mode-hook'\n\nfunction MyComponent () {\n //some code\n\n function toggleDarkMode (checked) {\n //logic to toggle dark mode\n }\n\n return (\n <DarkModeToggler isDarkMode={value} toggleDarkMode={toggleDarkMode} />\n )\n}For isDarkMode you have to pass the current value of whether dark mode is enabled or not, and for toggleDarkMode it should be a function that takes a boolean for whether dark mode is enabled or not.
Contribution
If you find any issues or bugs, or would like to contribute to this library, please check out the GitHub repository.
","url":"https://backend.shahednasser.com/use-dark-mode-hook-a-simple-library/","canonical_url":null,"uuid":"15e5e947-5963-434e-be89-f9c5b492259c","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"60426de4996660001e874264","reading_time":2,"send_email_when_published":null,"email_subject":null,"childHtmlRehype":{"html":"I have created a new library called use-dark-mode-hook. It's a simple library that allows you to easily add dark mode to your React projects.
This library provides a custom hook useDarkMode and a button toggler component DarkModeToggler. You can use them together or separately. However, this library does not provide any styling regarding dark and light modes. You have to do that yourself.
Purpose
As I was trying to add Dark mode in my react project, I noticed that there are packages out there that do provide this, however, either they don't work with the latest React version or they only provide the functionality or UI. Thus, I decided to create a simple hook that adds the dark mode functionality to the website, and a component that provides a toggling button.
Installation
To install the package:
npm i use-dark-mode-hookUsage
useDarkMode + DarkModeToggler
To use both the functionality and UI (more details about the options of each in below sections):
import useDarkMode, { DarkModeToggler } from 'use-dark-mode-hook'\n\nfunction MyComponent () {\n const [isDarkMode, toggleDarkMode] = useDarkMode()\n\n return (\n <DarkModeToggler \n isDarkMode={isDarkMode} \n toggleDarkMode={toggleDarkMode}\n buttonClassName=\"some-classes\"\n />\n )\n}That's it! useDarkMode will manage the state and logic while DarkModeToggler provides a toggle button for the user to toggle dark mode.
By default, useDarkMode will apply either dark or light class to the body of the document based on the choice of the user. You can change the names of the classes by passing darkModeClass and lightModeClass to useDarkMode, and change the element the class will be applied to by passing its selector in element to useDarkMode. You can check out the all the options here.
useDarkMode hook
You can use the hook separately with your own toggler:
import useDarkMode from 'use-dark-mode-hook'\n\nfunction myComponent (props) {\n const [isDarkMode, toggleDarkMode] = useDarkMode()\n\n //do something with it\n}You'll have to use isDarkMode as the current state of dark mode, and toggleDarkMode to toggle dark mode. toggleDarkMode takes a boolean specifying whether dark mode is enabled or disabled.
DarkModeToggler
You can use the toggler separately with your own logic:
import { DarkModeToggler } from 'use-dark-mode-hook'\n\nfunction MyComponent () {\n //some code\n\n function toggleDarkMode (checked) {\n //logic to toggle dark mode\n }\n\n return (\n <DarkModeToggler isDarkMode={value} toggleDarkMode={toggleDarkMode} />\n )\n}For isDarkMode you have to pass the current value of whether dark mode is enabled or not, and for toggleDarkMode it should be a function that takes a boolean for whether dark mode is enabled or not.
Contribution
If you find any issues or bugs, or would like to contribute to this library, please check out the GitHub repository.
","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"I have created a new library called "},{"type":"element","tagName":"a","properties":{"href":"https://www.npmjs.com/package/use-dark-mode-hook"},"children":[{"type":"text","value":"use-dark-mode-hook"}]},{"type":"text","value":". It's a simple library that allows you to easily add dark mode to your React projects."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This library provides a custom hook "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"useDarkMode"}]},{"type":"text","value":" and a button toggler component "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"DarkModeToggler"}]},{"type":"text","value":". You can use them together or separately. However, this library does "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" provide any styling regarding dark and light modes. You have to do that yourself."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"purpose"},"children":[{"type":"text","value":"Purpose"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As I was trying to add Dark mode in my react project, I noticed that there are packages out there that do provide this, however, either they don't work with the latest React version or they only provide the functionality or UI. Thus, I decided to create a simple hook that adds the dark mode functionality to the website, and a component that provides a toggling button."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"installation"},"children":[{"type":"text","value":"Installation"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To install the package:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":" i use-dark-mode-hook"}]}]}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h2","properties":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tagName":"h3","properties":{"id":"usedarkmode-darkmodetoggler"},"children":[{"type":"text","value":"useDarkMode + DarkModeToggler"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To use both the functionality and UI (more details about the options of each in below sections):"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" useDarkMode"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" DarkModeToggler "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'use-dark-mode-hook'"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"MyComponent"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"isDarkMode"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" toggleDarkMode"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"useDarkMode"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"DarkModeToggler \n isDarkMode"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"isDarkMode"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" \n toggleDarkMode"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"toggleDarkMode"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n buttonClassName"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"some-classes\""}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"That's it! "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"useDarkMode"}]},{"type":"text","value":" will manage the state and logic while "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"DarkModeToggler"}]},{"type":"text","value":" provides a toggle button for the user to toggle dark mode."}]},{"type":"element","tagName":"figure","properties":{"className":["kg-card","kg-image-card"]},"children":[{"type":"element","tagName":"img","properties":{"src":"https://res-5.cloudinary.com/hbqmf3mbz/image/upload/q_auto/v1/ghost-blog-images/demo.gif","className":["kg-image"],"alt":"","loading":"lazy"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default, "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"useDarkMode"}]},{"type":"text","value":" will apply either "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"dark"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"light"}]},{"type":"text","value":" class to the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"body"}]},{"type":"text","value":" of the document based on the choice of the user. You can change the names of the classes by passing "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"darkModeClass"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"lightModeClass"}]},{"type":"text","value":" to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"useDarkMode"}]},{"type":"text","value":", and change the element the class will be applied to by passing its selector in "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"element"}]},{"type":"text","value":" to "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"useDarkMode"}]},{"type":"text","value":". You can check out the all the options "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/shahednasser/use-dark-mode-hook#options"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h3","properties":{"id":"usedarkmode-hook"},"children":[{"type":"text","value":"useDarkMode hook"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can use the hook separately with your own toggler:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" useDarkMode "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'use-dark-mode-hook'"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"myComponent"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"props"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"isDarkMode"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" toggleDarkMode"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"useDarkMode"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//do something with it"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You'll have to use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"isDarkMode"}]},{"type":"text","value":" as the current state of dark mode, and "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"toggleDarkMode"}]},{"type":"text","value":" to toggle dark mode. "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"toggleDarkMode"}]},{"type":"text","value":" takes a boolean specifying whether dark mode is enabled or disabled."}]},{"type":"element","tagName":"h3","properties":{"id":"darkmodetoggler"},"children":[{"type":"text","value":"DarkModeToggler"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can use the toggler separately with your own logic:"}]},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" DarkModeToggler "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'use-dark-mode-hook'"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"MyComponent"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//some code"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"toggleDarkMode"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"checked"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//logic to toggle dark mode"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"DarkModeToggler isDarkMode"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"value"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" toggleDarkMode"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"toggleDarkMode"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"isDarkMode"}]},{"type":"text","value":" you have to pass the current value of whether dark mode is enabled or not, and for "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"toggleDarkMode"}]},{"type":"text","value":" it should be a function that takes a boolean for whether dark mode is enabled or not."}]},{"type":"element","tagName":"hr","properties":{},"children":[]},{"type":"element","tagName":"h3","properties":{"id":"contribution"},"children":[{"type":"text","value":"Contribution"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you find any issues or bugs, or would like to contribute to this library, please check out the "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/shahednasser/use-dark-mode-hook"},"children":[{"type":"text","value":"GitHub repository"}]},{"type":"text","value":"."}]}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"purpose","heading":"Purpose"},{"id":"installation","heading":"Installation"},{"id":"usage","heading":"Usage","items":[{"id":"usedarkmode-darkmodetoggler","heading":"useDarkMode + DarkModeToggler"},{"id":"usedarkmode-hook","heading":"useDarkMode hook"},{"id":"darkmodetoggler","heading":"DarkModeToggler"},{"id":"contribution","heading":"Contribution"}]}]},"featureImageSharp":{"base":"photo-1607027340685-3e1ae9a54a93.jpg","publicURL":"/static/a31f23226ff9e49e40d6b5dd3887a562/photo-1607027340685-3e1ae9a54a93.jpg","imageMeta":{"width":2000,"height":1502},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAcK5Q0IH/8QAFhABAQEAAAAAAAAAAAAAAAAAEQAQ/9oACAEBAAEFAsIxv//EABYRAQEBAAAAAAAAAAAAAAAAAAARIf/aAAgBAwEBPwGsf//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAECAQE/AYf/xAAWEAEBAQAAAAAAAAAAAAAAAAAQASH/2gAIAQEABj8Cdr//xAAaEAACAgMAAAAAAAAAAAAAAAAAAREhEFGx/9oACAEBAAE/IUIaNihw2TdYf//aAAwDAQACAAMAAAAQ8x//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAwEBPxAh/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEh/9oACAECAQE/EKa//8QAGhABAAIDAQAAAAAAAAAAAAAAAQARITFBUf/aAAgBAQABPxAYiCXioGQHlF2ib6HJef/Z","aspectRatio":1.3358778625954197,"src":"/static/a31f23226ff9e49e40d6b5dd3887a562/ea4ab/photo-1607027340685-3e1ae9a54a93.jpg","srcSet":"/static/a31f23226ff9e49e40d6b5dd3887a562/477ba/photo-1607027340685-3e1ae9a54a93.jpg 175w,\n/static/a31f23226ff9e49e40d6b5dd3887a562/06776/photo-1607027340685-3e1ae9a54a93.jpg 350w,\n/static/a31f23226ff9e49e40d6b5dd3887a562/ea4ab/photo-1607027340685-3e1ae9a54a93.jpg 700w,\n/static/a31f23226ff9e49e40d6b5dd3887a562/3055e/photo-1607027340685-3e1ae9a54a93.jpg 1050w,\n/static/a31f23226ff9e49e40d6b5dd3887a562/eff08/photo-1607027340685-3e1ae9a54a93.jpg 1400w,\n/static/a31f23226ff9e49e40d6b5dd3887a562/4e5f3/photo-1607027340685-3e1ae9a54a93.jpg 2000w","srcWebp":"/static/a31f23226ff9e49e40d6b5dd3887a562/89afa/photo-1607027340685-3e1ae9a54a93.webp","srcSetWebp":"/static/a31f23226ff9e49e40d6b5dd3887a562/9fca7/photo-1607027340685-3e1ae9a54a93.webp 175w,\n/static/a31f23226ff9e49e40d6b5dd3887a562/37a4e/photo-1607027340685-3e1ae9a54a93.webp 350w,\n/static/a31f23226ff9e49e40d6b5dd3887a562/89afa/photo-1607027340685-3e1ae9a54a93.webp 700w,\n/static/a31f23226ff9e49e40d6b5dd3887a562/78e7a/photo-1607027340685-3e1ae9a54a93.webp 1050w,\n/static/a31f23226ff9e49e40d6b5dd3887a562/03d34/photo-1607027340685-3e1ae9a54a93.webp 1400w,\n/static/a31f23226ff9e49e40d6b5dd3887a562/49d6b/photo-1607027340685-3e1ae9a54a93.webp 2000w","sizes":"(max-width: 700px) 100vw, 700px"}}}}}]}},"pageContext":{"slug":"quran-in-new-tab-chrome-extension","prev":"tips-for-magento-2-layouts","next":"best-websites-to-find-free-resources-for-frontend-web-developers-and-designers","tag":"projects","limit":3,"skip":0,"primaryTagCount":7,"collectionPaths":{}}},"staticQueryHashes":["1272700106","1676991999","2138873178","2546165603","2681841279","2938721187","293880488","3052966952","4156497161"]}