Skip to content

Instantly share code, notes, and snippets.

@MoOx

MoOx/index.js

Last active Jul 22, 2021
Embed
What would you like to do?
Export/import github labels
// go on you labels pages
// eg https://github.com/cssnext/cssnext/labels
// paste this script in your console
// copy the output and now you can import it using https://github.com/popomore/github-labels !
var labels = [];
[].slice.call(document.querySelectorAll(".label-link"))
.forEach(function(element) {
labels.push({
name: element.textContent.trim(),
// using style.backgroundColor might returns "rgb(...)"
color: element.getAttribute("style")
.replace("background-color:", "")
.replace(/color:.*/,"")
.trim()
// github wants hex code only without # or ;
.replace(/^#/, "")
.replace(/;$/, "")
.trim(),
})
})
console.log(JSON.stringify(labels, null, 2))
@apotek

This comment has been minimized.

Copy link

@apotek apotek commented Feb 5, 2016

Useful! Thank you.

@vincentaudebert

This comment has been minimized.

Copy link

@vincentaudebert vincentaudebert commented Apr 15, 2016

Awesome! Saved me a lot of time :)

@Isaddo

This comment has been minimized.

Copy link

@Isaddo Isaddo commented May 6, 2016

Another approach to import github labels via console command

https://gist.github.com/Isaddo/7efebcb673a0957b9c6f07cd14826ea4

@wo0dyn

This comment has been minimized.

Copy link

@wo0dyn wo0dyn commented Oct 13, 2016

@MoOx: Thank you so much mate! ❤️

@jpike88

This comment has been minimized.

Copy link

@jpike88 jpike88 commented Jun 21, 2017

This script doesn't work on Safari

@oguennec

This comment has been minimized.

Copy link

@oguennec oguennec commented Jul 4, 2017

Great, thank you !

@ntwb

This comment has been minimized.

Copy link

@ntwb ntwb commented Jul 12, 2017

I just used the following which was quick and easy https://github.com/jvandemo/copy-github-labels-cli

(I was linked to this after the fact)

@martindafonte

This comment has been minimized.

Copy link

@martindafonte martindafonte commented Jun 22, 2018

Hi, you can add one line and also get the description:

var labels = [];
[].slice.call(document.querySelectorAll(".label-link"))
.forEach(function(element) {
  labels.push({
    name: element.textContent.trim(),
    description: element.getAttribute("aria-label"),
    // using style.backgroundColor might returns "rgb(...)"
    color: element.getAttribute("style")
      .replace("background-color:", "")
      .replace(/color:.*/,"")
      .trim()
      // github wants hex code only without # or ;
      .replace(/^#/, "")
      .replace(/;$/, "")
      .trim(),
  })
})
console.log(JSON.stringify(labels, null, 2))
@micalevisk

This comment has been minimized.

Copy link

@micalevisk micalevisk commented Jul 27, 2018

and this function to download labels as file directly

function saveJSON(data, filename) {
  const blob = new Blob([JSON.stringify(data, undefined, 4)], { type: 'text/json' });
  const e = document.createEvent('MouseEvents');
  const a = document.createElement('a');

  a.download = filename;
  a.href = window.URL.createObjectURL(blob);
  a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
  e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  a.dispatchEvent(e);
}

example

saveJSON(labels, 'labels.json')
@TreONeill

This comment has been minimized.

Copy link

@TreONeill TreONeill commented Oct 10, 2018

Thanks for this! Very helpful

@vict0rsch

This comment has been minimized.

Copy link

@vict0rsch vict0rsch commented Apr 11, 2019

Adding support for description (aria-label does not work for me):

description: element.parentElement.nextElementSibling.textContent.trim()

Support for settings.yml:

function saveYML(text, filename) {
  const blob = new Blob([text], { type: 'text/plain' });
  const e = document.createEvent('MouseEvents');
  const a = document.createElement('a');

  a.download = filename;
  a.href = window.URL.createObjectURL(blob);
  a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
  e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  a.dispatchEvent(e);
}
let out = "labels:\n";
for (const l of labels){
    out += `  - name: ${l.name}\n    color: ${l.color}\n    description: ${l.description || '""'}\n`;
}
console.log(out) // or saveYML(out, "labels.yml")
@m-lukas

This comment has been minimized.

Copy link

@m-lukas m-lukas commented Oct 18, 2019

The HTML of the /labels site changed and the querySelector in the code of the gist doesn't find any elements.
To fix it, edit the script and replace:

[].slice.call(document.querySelectorAll(".label-link"))

with:

[].slice.call(document.querySelectorAll(".js-label-link")) (e.g.: .js- label-link)

@jamesperrin

This comment has been minimized.

Copy link

@jamesperrin jamesperrin commented Oct 29, 2019

Here my code example that includes changes to CSS classname and captures the label's description.

var labels = [];
[].slice.call(document.querySelectorAll(".js-label-link"))
.forEach(function(element) {
  labels.push({
    name: element.textContent.trim(),
    description: element.getAttribute("title"),
    // using style.backgroundColor might returns "rgb(...)"
    color: element.getAttribute("style")
      .replace("background-color:", "")
      .replace(/color:.*/,"")
      .trim()
      // github wants hex code only without # or ;
      .replace(/^#/, "")
      .replace(/;$/, "")
      .trim(),
  })
})

console.log(JSON.stringify(labels, null, 2))
@hannakim91

This comment has been minimized.

Copy link

@hannakim91 hannakim91 commented Oct 16, 2020

Thanks for the original script and thanks @jamesperrin for the update!!

@dademaru

This comment has been minimized.

Copy link

@dademaru dademaru commented Jan 28, 2021

Thanks, very helpful!

Unfortunately seems that GitHub (recently?) changed the color output in style:

<a href="bug" title="Something isn't working" data-name="bug" style="--label-r:215;--label-g:58;--label-b:74;--label-h:353;--label-s:66;--label-l:53;" class="IssueLabel hx_IssueLabel IssueLabel--big lh-condensed js-label-link d-inline-block v-align-top">
<span>bug</span>
</a>

so in JSON you get:

{
    "name": "bug",
    "description": "Something isn't working",
    "color": "--label-r:215;--label-g:58;--label-b:74;--label-h:353;--label-s:66;--label-l:53"
  }

and import fails throwing:
An invalid form control with name='label[color]' is not focusable.
with an error on color input required format.

@NibrasAbuAyyash

This comment has been minimized.

Copy link

@NibrasAbuAyyash NibrasAbuAyyash commented Feb 11, 2021

Hi all,
I updated the code, to solve the color output problem (RGBA to Hex). (@dademaru)
I also changed the attribute from which the description will be pulled.

var labels = [];
function hex(x) {
    return ("0" + parseInt(x).toString(16)).slice(-2);
}
function rgba2hex(rgba) {
    rgba = rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(,\s*\d+\.*\d+)?\)$/);
    return hex(rgba[1]) + hex(rgba[2]) + hex(rgba[3]);
}
[].slice.call(document.querySelectorAll(".js-label-link"))
    .forEach(function (element) {
        labels.push({
            name: element.textContent.trim(),
            description: element.getAttribute("title"),
            color: rgba2hex(window.getComputedStyle(element).getPropertyValue("background-color")),
        })
    })
console.log(JSON.stringify(labels, null, 2))
@trentm

This comment has been minimized.

Copy link

@trentm trentm commented Mar 31, 2021

One can also use: gh api /repos/elastic/$repo/labels to list a repo's label data, e.g.:

% gh api /repos/elastic/apm-agent-nodejs/labels
[
  {
    "id": 2510059555,
    "node_id": "MDU6TGFiZWwyNTEwMDU5NTU1",
    "url": "https://api.github.com/repos/elastic/apm-agent-nodejs/labels/agent-nodejs",
    "name": "agent-nodejs",
    "color": "2c4bba",
    "default": false,
    "description": "Make available for APM Agents project planning."
  },
  {
    "id": 2411255376,
    "node_id": "MDU6TGFiZWwyNDExMjU1Mzc2",
    "url": "https://api.github.com/repos/elastic/apm-agent-nodejs/labels/agent-spec",
    "name": "agent-spec",
    "color": "d8136f",
    "default": false,
    "description": "Related to a cross agent functionality spec."
  },
  {
    "id": 1151180629,
    "node_id": "MDU6TGFiZWwxMTUxMTgwNjI5",
    "url": "https://api.github.com/repos/elastic/apm-agent-nodejs/labels/automation",
    "name": "automation",
    "color": "81a2ef",
    "default": false,
    "description": null
  },
  {
    "id": 1322034517,
    "node_id": "MDU6TGFiZWwxMzIyMDM0NTE3",
    "url": "https://api.github.com/repos/elastic/apm-agent-nodejs/labels/awaiting%20reply",
    "name": "awaiting reply",
    "color": "f3a0f7",
    "default": false,
    "description": ""
  },
...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment