Introduction

This repository contains a set of JavaScript plugin/extensions (and their related CSS) for Roam Research. I call them enhancements because they improve my daily interaction with Roam. I will gradually add more extensions that I develop for my needs here and update the old ones.

Here is the general installation guideline for all of the JavaScript and CSS codes.

JavaScript Installation

To install, do the same thing you do for any roam/js script.

1. Create page in Roam (if not already present) called [[roam/js]]

2. Create a block in the [[roam/js]] page and enter {{[[roam/js]]}}

3. Create a new block under the {{[[roam/js]]}} block and enter: ```

4. This ``` create a code block for which you can select a language.

5. Make sure the code language is set as JavaScript

6. Paste the JavaScript code into the code block. Usually it looks something like this:

javascript window.parameters = { //Parameters that you can customize }; var s = document.createElement("script"); s.type = "text/javascript"; s.src = "https://c3founder.github.io/Roam-Enhancement/enhancedX.js"; document.getElementsByTagName("head")[0].appendChild(s);

1. A red warning box shows up asking you to review the risks of using roam/js.

2. Once you have reviewed the warning and understand/accept the risk, click Yes.

3. Refresh Roam and the script should now be installed!

CSS Installation

To install the CSS put this line in a CSS code block on you [[roam/css]] page. Make sure the code language is set to CSS

@import url('https://c3founder.github.io/Roam-Enhancement/enhancedX.css');

Demo Videos

I usually make YouTube demo video(s) for each extension to explain functionalities and known issues. The main purpose of videos is to prevent confusion and ultimately reduce the number of questions I receive. So please watch them before sending in your questions!

Reporting Issues and Feature Request

You can report bugs and suggest new features through GitHub:

https://github.com/c3founder/Roam-Enhancement/issues

Each extension has its own label that you can use when reporting issues.

I'll post community wetted solutions to issues here over time.

Enhancements

Math and Multi Language OCR

Time and Habit Tracking

This is an ongoing effort to build a time+habit+goal tracker in roam. Timer and counter are done, stay tuned for statistics and habit tracker.

JavaScript

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "https://c3founder.github.io/Roam-Enhancement/enhancedTimer.js";
document.getElementsByTagName("head")[0].appendChild(s);

CSS

@import url('https://c3founder.github.io/Roam-Enhancement/enhancedTimer.css');

Functionalities

Timer

{{[[c3-timer]]}} makes a stopwatch to track time spend on each block and its children. You can have multiple timers running but on each branch only one timer can be active. In other words, when you start a timer it will stop any other running timer on the same branch to prevent double counting.

Mixed Text Direction

This extension detects right-to-left and left-to-right characters at the beginning of each block and changes the block direction. You can infinitely nest rtl and ltr blocks with no issue. You can also have different font for each of rtl and ltr languages.

JavaScript

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "https://c3founder.github.io/Roam-Enhancement/enhancedLanguage.js";
document.getElementsByTagName("head")[0].appendChild(s);

CSS

@import url('https://c3founder.github.io/Roam-Enhancement/enhancedLanguage.css');
/* More fonts here: https://fonts.google.com/?subset=arabic 
For example for 'Markazi Text', import the following: */
@import url('https://fonts.googleapis.com/css?family=Markazi+Text'); 
@import url(//fonts.googleapis.com/earlyaccess/notonaskharabic.css);
@import url(//fonts.googleapis.com/earlyaccess/notonaskharabicui.css);

:root {  
  --rm-block-sep-min-width: 0px;
  /*****RTL Variables*****/ 
  --rtl-margin-right: 31px;
  --rtl-margin-left: 31px; 
  --rtl-bullet-margin-top: 5px;
  --rtl-control-margin-top: 4px;
  --rtl-generic-font: sans-serif;
  --rtl-font: 'Noto Naskh Arabic'; /*'Markazi Text'*/ /*Make sure you select the generic font first*/
  --rtl-font-size: 1em;
  --rtl-textarea-background-color: rgba(253,253,168,0.53);
  --rtl-textarea-font-size: 1em;
  --rtl-textarea-line-height: 1.75em;
  /*****LTR Variables*****/ 
  --ltr-margin-right: 31px; 
  --ltr-margin-left: 31px; 
  --ltr-bullet-margin-top: unset;
  --ltr-control-margin-top: unset;
  --ltr-generic-font: unset; /*san-serif;*/
  --ltr-font: unset; /*'Lato';*/ /*Make sure you select the generic font first*/
  --ltr-font-size: unset; /*1em;*/
  --ltr-textarea-background-color: rgba(253,253,168,0.53); /*unset;*/
  --ltr-textarea-font-size: unset; /*1em;*/
  --ltr-textarea-line-height: unset; /*1.5em*/
}

Functionalities

PDF Highlighter

Enhanced YouTube Player

JavaScript

To install, do the same thing you do for any roam/js script.

window.ytParams = {
  //Player
  //Shortcuts
  grabTitleKey : 'alt+a t',
  grabTimeKey : 'alt+a n',  
  ////Speed Controls
  normalSpeedKey : 'alt+a 0',
  speedUpKey: 'alt+a =',
  speedDownKey: 'alt+a -',
  ////Volume Controls
  muteKey: 'alt+a m',
  volUpKey: 'alt+a i',
  volDownKey: 'alt+a k',
  ////Playback Controls
  playPauseKey : 'alt+a p', 
  backwardKey: 'alt+a j',
  forwardKey: 'alt+a l'
}; 

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "https://c3founder.github.io/Roam-Enhancement/enhancedYouTube.js";
document.getElementsByTagName("head")[0].appendChild(s);

CSS

@import url('https://c3founder.github.io/Roam-Enhancement/enhancedYouTube.css');

Functionalities

Responsive/Resizable Player

You can set the original iframe size here in the code plus the border style.