How I publish Nuggets directly from RoamResearch to Dev.to  
Tags: nugget, roamresearch, tutorial, writing
Published: 2021-01-22 18:34:07

---  

title: How I publish Nuggets directly from RoamResearch to Dev.to  

tags: nugget, roamresearch, tutorial, writing  

canonical_url: https://amin.pw/nugget/roam_to_dev_to  

published: true  

cover_image: https://upload.wikimedia.org/wikipedia/commons/8/85/Gold_nuggets_%28placer_gold%29_%28Cache_Creek%2C_near_Granite%2C_Chaffee_County%2C_Colorado%2C_USA%29_1_%2816884410748%29.jpg  

---  

**Fun Fact** This article has been written entirely in RoamResearch in order to test the efficacy of my setup ✌🏻 SO META 🤓   

[RoamResearch](https://roamresearch.com/) is the best tool I have discovered in the last year. Over time, it has been the main driver for improving my productivity (or at least perceived productivity 😅). I use it for note-taking, project management, planning, journaling, habit tracking (still need to figure out a good system for this, suggestions welcome 🙏🏻), and thanks to an awesome chrome extension, I am already tweeting from it 🤩 {% twitter 1346407074922692608 %}

One of my goals in 2021 is to share my knowledge and engage with online communities. Since I am already accumulating knowledge in RoamResearch, and to reduce context switching, whenever I have an idea for a Nugget, I want to write it down immediately. My roam DB is open at all times, so it feels like the most natural and fastest way for me to write my idea down before I get distracted or lose focus. 🤓  

Furthermore, The notes I write in Roam have backlinks, which helps me with discoverability and serendipity. I then have a  SmartBlock that takes advantage of roam42 converter [1] to convert the text to markdown and strip the links from it. For example, for this article, here is how it looks from inside RoamResearch (Again, **SO META** 🤓)  

![](https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2Famin%2FK-T2T7wUEU.png?alt=media&token=e2eaac29-3c1c-4fc3-8818-12018c81faeb)  

Finally, I like carving out my own solutions to already solved problems. ![This Is Cool GIF by MOODMAN](https://media2.giphy.com/media/SVH9y2LQUVVCRcqD7o/giphy.gif?cid=d3ed119esn8pbva38zw9144aah0vs1fxne8uh05r79kj00je&rid=giphy.gif)  

Inspired by [David Bieber](https://twitter.com/Bieber) Snippets [0], I wanted to create a system that allows me to share any bit of knowledge from RoamResearch to dev.to. Why call them Nuggets? Well, I didn't want to also call them Snippets 😈  But most importantly, take a look at the definition of a golden nugget in Wikipedia  

{% wikipedia https://en.wikipedia.org/wiki/Gold_nugget %}  

> For me, a <mark>Nugget</mark> is a **raw piece of knowledge**, rough and unedited. Either newly discovered or formed and synthesised as a residue from my previously collected knowledge   

I chose dev.to for two reasons:   
  - dev.to is a great online community geared towards developers, it is very fitting for the content I want to produce which is going to be mainly technical.  
  - It has an awesome [API](https://docs.dev.to/api/operation/createArticle) that allows me to post articles to the platform. I also have a [personal website](https://amin.pw) that syncs with my published articles in dev.to using a [webhook](https://docs.dev.to/api/tag/webhooks) (still work in progress. I will publish an article about the process once I am done with it ✌🏻)  

Here is now an explanation of how my process works  

### Create a Smart Block to generate a Nugget  

![](https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2Famin%2Fo_QlINAd6U.png?alt=media&token=c5748274-ae71-44f8-a78a-d2839647ce87)  

This is a simple smart block that does the following  
  - Add tag reference to `Nugget` pages. this is important for me in order to keep track of all the published Nuggets inside my graph  
  - Use the `---` separator to create a section for the Front-matter attributes   
  - For the title and the tags, I use the `<%INPUT%>` SmartBlock  
  - I then place the cursor after the separator to signify the start of the Nuggets body  
  - **Note**: because of some limitations and gotchas in the syntax (which I will talk about later), I am not yet confident to directly publish the article so I create it as a draft (`published: false`)  

### Create a SmartBlock to publish my article to dev.to  

![](https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2Famin%2FvEeJQwJ889.png?alt=media&token=8917cf6a-5531-4355-ace4-138f53744126)  

 This SmartBlock is mainly in javascript, it gets the children blocks and takes advantage of roam42 helper functions to convert it to Github markdown  
  - Github flavoured markdown has differences with the syntax dev.to uses, so I had to do the following changes  
    - Change Twitter, Youtube, StackOverflow and StackExchange links from markdown to LiquidTags syntax [2]  
    - I learned that <mark>highlights</mark> denoted by `^^` is not part of markdown syntax [3]  <br/>So I had to change them to HTML  `<mark>`   
  - One other "limitation" I noticed is that If you don't have an empty line at the end of a code block, it will not render properly.  
  - One last thing, dev.to does not allow to publish from the frontend due to CORS issues, you need to create a proxy server to the api. I created a simple node.js server you can see here {% glitch roam-to-dev file=server.js %}  

I have created an issue with the SmartBlock if you want to use it 🙏🏻
{% github https://github.com/roamhacker/SmartBlocks/issues/191 %}  

And that is it, I now have a system that allows me to publish content from RoamResearch to dev.to. Thanks to RoamResearch for being so extensible, and also to the awesome community and especially [RoamHacker](https://twitter.com/roamhacker) for coming up with SmartBlocks (If you want to a deep dive into the internals of SmartBlocks, make sure to watch this awesome, and long 😅, video ;) )  

{% youtube rJZNMZoqwNY %}  

  

### References  

[0] https://davidbieber.com/snippets/2020-12-28-publishing-blog-posts-from-roam-research-quickly-and-automatically/  

[1] https://github.com/roamhacker/roam42/blob/master/ext/formatConverter.js  

[2] https://forem.dev/p/editor_guide  

[3] {% stackoverflow 25104738 %}