Code Monkey home page Code Monkey logo

wp-roam-block's Introduction

This WordPress plugin lets you search and embed Roam Research blocks inside WordPress block editor.

WordPress Block editor and Roam are a match made in heaven - they both use blocks as their core concepts. A detailed walkthrough, including a video is published on deliber.at

Why use WordPress if I have Roam?

Roam is fantastic for drafting, connecting, and downloading concepts from your brain. The way you would usually work is to build knowledge over time, connecting ideas to each other. But not all ideas are ready for distrubution.

  • Some of them have parts that are ready to see the light of day
  • Many others will evolve over time as your understanding of the underlying concepts does

WordPress on the other hand is the most popular tool for publishing on the market. You can ensure your content is presented in the best possible way on a variety of devices and to people who should see it.

Combining the two plays to each other's strengths. Using WordPress with Roam is possible without this plugin as well, but is tedious:

  • You have to copy-paste
  • It makes it especially hard for evergreen content (AKA mind gardens). You have to remember to update them on your site periodically. This plugin fixes this.

Feature rundown

The blocks are embedded

Once you insert a block into your post, it stays connected to the source Roam block. If you upload a new Roam export, all the blocks will update on your site. For example - if you have a few "evergreen" pages in Roam, you can embed them in WordPress as your "mind garden" and they will stay updated whenever you upload a new copy of your Roam graph.

If you delete a block in Roam and update Roam export in WordPress, the blocks you inserted will use a cached copy created at the time of writing the post for the first time. So you don't have to worry about empty pages.

WordPress embed functionality

You can also paste links like https://roamresearch.com/#/app/graph/page/ratars73 into a WordPress post and they will resolve into an embed of the block

Cleans up your Roam markup

The block with strip [[]]. In the future I hope it will link them properly.

How to start

Find this plugin in your WordPress plugins section, install it

  1. Activate the plugin through the 'Plugins' screen in WordPress
  2. Now you can use "Roam Block" in your posts in the block editor
  3. The first time you use the block, you will have to upload your Roam Graph to WordPress.
    • Click ( ... ) in the right-top corner of Roam
    • Click Export All
    • Choose JSON
    • Unzip the file
    • Insert "Roam Block" into Gutenberg in WordPress
    • Click "Upload" in sidebar
    • Choose the unzipped json
    • Observe magic
  4. Now you can search your Roam graph directly from the "Roam Block" block or paste embed URLs.

Automatically updating your Roam Graph in WordPress

Roam does not have a REST API on the web you can hook into. To easily automate using Roam, I have built Roam Private API. This tool runs an invisible browser and copies your Roam database, so it's unfortunately impossible to bundle as a WP plugin. You have to run it on a host that can run node and npm.

Here is how you could use it to keep your WP copy of the Roam Graph updated:

  • Insert block to the post, open sidebar and copy "Secret Upload URL". Do not share this with anybody.
  • Install Roam-Research-Private-API via npm install -g roam-research-private-api
  • Running command roam-api export ~/Desktop http://your-wordpress.com.wp-json/roam/upload-graph?token=secret_token. will copy the Roam graph content and upload it to your WordPress. You can put that in cron for example.

wp-roam-block's People

Contributors

artpi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

wp-roam-block's Issues

Can't get it working at all

Here's a screenshot of what url paste (first block) and manual "new roam research block" (second block) result in.

image

I'm running WordPress 5.5.3 on malcolmocean.com.

Not sure if another plugin is disrupting it! I don't have very many active plugins that have anything to do with the block editor.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.