In this developer tutorial, we will build a contextual shortcut that will allow you to pre-fill the input textarea of any Github Issue or Pull Request page - using a template that follows the most common best practices.

Developers love Github but learning how to properly write issues and pull-requests is an art, and every company (or individual) has its own way to handle these two major developer activities.

Following best practices is advisable - since there are well-defined templates for writing either and they’re easy to learn but why not automate it - that way you don’t have to learn and remember it

Using this approach will make it easy how to structure them: for example when describing a bug, it’s best to be thorough and when creating a pull-request - it’s great to provide as much context and information as possible!

Although the objective of this tutorial is to write Issues or Pull Request - you can customize the code to handle any other type of writing, including Github wiki pages, comments etc. or maybe on a different git platform!

Let’s get started!

In this tutorial we will be using the following bricks:

First I will navigate to Github.com and open the PixieBrix editor

Let’s start by adding a brick called Context Menu - this means we’re triggering this mod by clicking an entry in the context menu of the browser (basically right-clicking)

We’re going to create a modal with a dropdown so the user can pick which template should be used.

To do this we’re going to add the Show a modal or sidebar form brick:

In this step, we’re going the logic to automatically fill the form at the bottom of the “Issues” page on Github. For example this page here: https://github.com/pixiebrix/pixiebrix-extension/issues/new

To achieve this we’re going to add one brick called “Set Input Value”

We’re going to configure this brick like so:

First, we will press the blue button “Add Item”

We will add one item with the following:

Property name & Value:

selector: textarea

value:

It should look like this

Now if you scroll down a little in the page editor we’re going to set the Advanced Options:

We will set Condition to be this string:

{{ true if @form.template == "Pull Request" }}

I will now add a second item to populate the title of this Github page - that is because

In this second item the property selector is: .input-lg

and the value is: Pull Request Template

What this does, is that it will return true - and hence allow the execution of this brick - ONLY if the chosen value from the dropdown @form.template equals “Pull Request”

We’re going to copy and paste the same block we did above and tweak is slightly

To copy a brick select it and click the blue “Copy Brick” button, as shown in the image below:

Then, paste the copied brick below this brick by clicking the paste button.

This will allow for this brick to be copied and pasted below the 1st Set Input Value brick.

At this point, if you look on the left, you should have two “Set Input Value” bricks Let’s select the second one - the one we just pasted and modify its values like so:

Under inputs where the property is value, we will replace the content of the value box with

Under Advanced Options we will change the Condition to be:

{{ true if @form.template == "Issue" }}

We’re going to copy and paste the same block we did above and tweak is slightly, again!!

Under inputs where the property is value, we will replace the content of the value box with Something else!

Under Advanced Options we will change the Condition to be:

{{ true if @form.template == "Other" }}

At this point your page editor should look like this and you should have the following Bricks - note how we have 3 Set Input Value bricks:

To test this contextual shortcut, let’s navigate a Github repository, create a new issue. https://github.com/pixiebrix/pixiebrix-extension/issues/new

Then right-click anywhere on the page and let’s select the PixieBricks entry we just created.

Select one of the options and click Generate

If everything went well, you should see your chosen template appear in the textarea field on the page!

You can change the number of templates by adding more fields to the modal and then adding the template in markdown - or any other text - directly in the third step.

If it’s not working you can try to do a couple of things: