Publish Roam page to dev.to

Open aminbenselim opened this issue 4 years ago • 0 comments

✂️ Copy of your #42SmartBlock from Roam

#42SmartBlock Publish Nugget

<%JAVASCRIPTASYNC:```javascript
// Get the page block uid 
const pageUid = window.location.href.split('/').reverse()[0];
// Walk the blocks tree and generate markdown using roam42 helper functions
let md = await roam42.formatConverter.iterateThroughTree(pageUid, roam42.formatConverter.formatter.markdownGithub);
// Modify generated markdown to be conform with dev.to 
md = md
  // convert links to liquid tags https://forem.dev/p/editor_guide
  .replaceAll(/https:\/\/twitter\.com\/.+\/status\/(\d+)[?]?.*/gmi, "{% twitter $1 %}" )
  .replaceAll(/https:\/\/stackoverflow\.com\/questions\/(\d+)\/.*[?]?.*/gmi, "{% stackoverflow $1 %}")
  .replaceAll(/https:\/\/stackoverflow\.com\/a\/(\d+)\/.*[?]?.*/gmi, "{% stackoverflow $1 %}")
  .replaceAll(/https:\/\/(.*).stackexchange\.com\/questions\/(\d+)\/.*[?]?.*/gmi, "{% stackexchange $2 $1 %}")
  .replaceAll(/(https:\/\/[\w\.]+wikipedia.org\/wiki\/[\w]+)/gmi, "{% wikipedia $1 %}")
  .replaceAll(/https:\/\/github.com\/([\w-]+\/[\w-]+)\/?/gmi, "{% github $1 %}")
  .replaceAll(/(https:\/\/github.com\/[\w-]+\/[\w-]+\/issues\/\d+)/gmi, "{% github $1 %}")
  .replaceAll(/https:\/\/glitch.com\/edit\/#!\/([\w-]+)[?]?(?:path=)?([\w.]+)?/gmi, "{% glitch $1 file=$2 %}")
  .replaceAll(/https:\/\/glitch.com\/edit\/#!\/([\w-]+)/gmi, "{% glitch $1 %}")
  .replaceAll(/{{video: (.+)}}/gmi, (v, url) => {
    // Neat trick to get the id of youtube video
    const id = new URL(url).searchParams.get('v');
    return "{% youtube " + id + " %}";
  })
  .replaceAll(/\^\^(.*)\^\^\s/gmi, "<mark>$1</mark> ");
// Delete the text from markdown that is above the frontmatter marker
md = md.split('---');
md.splice(0, 1, ' ');
md = md.join('---').trim();

// Make a post request with the markdown to glitch reverse proxy server 
await fetch('https://roam-to-dev.glitch.me/', {
    method: 'POST',
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(
      {"markdown": md})
});

return "#published";```%>

📋 Describe the SmartBlock

SmartBlock to convert page content to markdown and format it to conform with dev.to article syntax and then publish it.

✅ Describe any prerequisites or dependencies that are required for this SmartBlock

You need two things: 1. a certain page structure, I have a simple SmartBlock that helps me create this structure

#42SmartBlock Nugget

#Nugget {{Publish:42smartblock:Publish Nugget}}

```
---
```
```
title: <%INPUT:title of the nugget%>
```
```
tags: nugget, <%INPUT:add max 3 tags%>
```
```
published: false
```

canonical_url: <%CONCAT:https,://,amin.pw/nugget/,<%INPUT:enter slug%>%>

```
cover_image:
```
```
---
```
```
<%CURSOR%>
```

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 personally use a simple node.js server in glitch.com you can copy from here https://glitch.com/edit/#!/roam-to-dev?path=server.js

📷 Screenshot of your #42SmartBlock workflow/template from Roam

💡 Additional Info

Jan 22 '21 18:01 aminbenselim