Moraru Daniela-Andreea and Anastasiya Uraleva

View on GitHub →

Rubicon 📝👾⌚

Rubicon is a VScode extension that allows developers to make the time-consuming task of writing documentation easier by allowing them to write code right in their code editor.


Documentation is often overlooked because it takes time to write it and if not done fast the developers often procrastinate doing it. Aside from being time-consuming and expensive, it is challenging to maintain. Lastly, because of different styles and processes for writing documentation, it is often hard to read especially for bigger projects. After discovering Jinja's capabilities of rendering templates, we wanted to use Jinja to help convert users' documentation input, into exportable or saved files.

User Stories (What it does)✨

  • User can access Rubicon through VScode editor
  • User can write title and description for the project
  • User can attach files and copy/paste code
  • User can go to the landing page and learn more about the extension
  • Jinja renders user input and renders it into a formated documentation template
  • Jinja's templates can be exported to HTML or Github README file

Example of documentation styles 🎀

Jinja template example 1

Jinja template example 2

How we built it💻

To create the templates for the documentation, we used Jinja and Flask on the backend. The template can be exported locally as an HTML or README file using a node.js request to Jinja's rendered template.

For the VSCode extension, we used Webviews API from VSCode to create the sidebar and the webview. The typescript was used to write the functionality and it was converted to JavaScript by using Webpack. For the front end of the extension, we used Svelte to create the UI.

Challenges we ran into🐢

  • One of the most time-consuming challenges was building out the VSCode extension. Neither of us has built extensions before yet because the whole point of our project is to give users the ability to write documentation while they code, we couldn't give up. Most of all it was challenging to work with Typescript + Webpack since none of us used Typescript & Svelte before as well as the VSCode Webviews API which has many functionalities that have to be researched & configured.
  • Converting users' input into Jinja's templates that can be exported was something we had to think through for some time yet we managed to make it work with static data.

Accomplishments that we're proud of 🥳

  1. Despite the time zone differences, we were able to collaborate together and complete a challenging yet exciting MVP!
  2. We are proud that we didn't give up and tried our best to have the basic features done.

What we learned🌱

  • Not to underestimate the " simplicity" of code extensions especially if building them for the first time since there is a lot of functionalities involved
  • Backend with databases is something we got stuck in and want to learn more about so that next time both of us are experienced with it

What's next for Rubicon🚀

For our next steps, we want to enhance and add the following elements to Rubicon:

  1. Add GitHub authentication - this will add a layer of security as well as help to save the user's input
  2. Connect Rubicon to a database so that all the files are saved - this will allow the user to access previous or current templates
  3. Allow the user to access saved templates through Rubicon's website
  4. Allow users to pick a variety of Jinja templates - developers have different purposes when writing documentation, we want to tailor documentation to their goals
  5. Publish the extension in the VSCode marketplace

How to run this extension locally:

  1. git clone "paste the link of the repo"
  2. Open VSCode and type "npm install"
  3. After installation is done, press F5 to get a local VScode environment up & running ( the rubrics cube icon is on the left)