Code Monkey home page Code Monkey logo

roamshowtime's Introduction

Roam ShowTime

  • 🚀 Update 2022. A subset of this functionality is now built-in in Roam. (Hover over a bullet to see the last edited time).
  • ⚠ Update Jan 2021. Another Roam update broke this plugin. I have no plans to update this plugin further. PRs are welcome though.

logo

Browser extension to show block creation & edit times on Roam Research.

What it looks like:

This is useful when reviewing how much time you spent on a topic/thought/task.

Instructions for use

  • Toggle the time display using ctrl-c, ctrl-s.
    • Note that this shortcut changed (it used to be ctrl-c, ctrl-x).
  • The first entry is the creation time, the second the time of last edit.
  • If those are the same (ignoring seconds), only one is displayed
  • For times more than 24 hours in the past, the full date is displayed.

Note that the displayed times concern the block text only (and not any descendant blocks).

⏱ When a lot of blocks are loaded on the page, the app will start to respond slowly. Toggling off the time display while you are interacting with blocks will then help.

🎨 If you use custom CSS on Roam that drastically changes the layout, this plugin might well clash with it. Smaller theming changes should be fine.

Installation

chrome webstore badge

  • Installation from the Chrome webstore auto-updates. (Note however that there's a review delay whenever a new version is uploaded to the webstore).
  • For Firefox, download the XPI file in the dist directory (or on the Releases tab on GitHub). Then install as follows. This installation will not auto update. (There is no auto-updating entry for this plugin on Addons.Mozilla.Org (yet): "Mozilla policy doesn't allow listings for add-ons for Roam Research because the site is limited access").
  • When you want to install directly from source, here are the instructios for Chrome and for Firefox.

How it works

It's based on the feature described in this tweet:

If you hit C-c C-x you'll get an edit icon for every block, with data-create-time and data-edit-time [attributes] – @Conaw (May 26, 2020)

This extension

  • listens for DOM mutations (e.g. collapsing or editing any block);
  • throttles these events (so that the extension code does not run too often);
  • on each (throttled) DOM mutation, checks whether the document contains any divs with a data-edit-time attribute..
  • ..and if so, adds absolutely positioned divs to the left of each bullet, with formatted time strings taken from the data-..-time attributes.
  • When the sidebar is open, some left-padding is added to both the main container and the sidebar, so that the timestamps fit on screen.

roamshowtime's People

Contributors

tfiers avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

2016for

roamshowtime's Issues

Option to change date format

Nice work. Here's a feature request.

Different people like different date formats. E.g., some may prefer a shorter format or some may not want to see the day of the week. Can you add an option so we can change the format to our liking?

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.