[nodebb-plugin-github-embed] GitHub Issue Embedding

julian

This plugin will allow you to reference issues on a GitHub issue tracker simply by providing its repository name and issue number. Optionally, the plugin can be configured so that a default repository is assumed, and just the issue number preceded by a hash/pound sign will produce the following:

Screenshot

Installation

npm install nodebb-plugin-github-embed

Requirements

NodeBB v0.4.0 or greater

Version History

v0.1.0 - Release
v0.1.1
- Fixed issue ordering (mixing both shorthand & long form in one post won't mess around with the ordering)
v0.1.2
- Updated element generation to use templates.js, changed styling to show two issues per line (except on smaller devices)
v0.1.3
- Removed debug noticed
v0.1.4
- New plugin settings:
  - Cache timeout in hours
  - OAuth ID/Secret pair for authenticated requests (increases rate limit)
- Dashed repositories (and those with numbers in the name) now work properly
- Issue numbers in blockquoted text won't match any longer.
v0.1.5
- User images no longer massive in post previews
v0.2.0
- Short-form syntax has changed to be gh#{num}, so that it does not conflict with user experience (accidental false positive) and markdown # as header.
  - Long-form syntax is unchanged.
v0.3.0
- Raised compatibility to v0.5.0
v0.4.0
- Raised compatibility to v0.6.0
v0.5.0
- Compatibility tag updated, confirmed working in NodeBB v0.7.x
- Full urls (https://github.com...) for issues now match as well as the short form
- Fixed hanging if defaultRepo was not defined in the ACP
- Updated ACP frontend.
v0.6.0
- Added parsing of commit hashes as well as issue numbers.
- Fixed hanging if a non-existant issue was referenced

julian

This plugin is currently running on this forum. I am referencing an issue in its full form, followed by its pre-configured shorthand form:

Long form: designcreateplay/NodeBB#1370
Short form: #1328

frissdiegurke

In your example the #1370 is named first and #1328 after it, but the issues shown below are in reverse order... Otherwise nice done

Are you planning to integrate textcomplete into this?

frissdiegurke

And maybe you should add some styles that reduce the user-image size within "Recent Posts" widget, there is a giant julian-image laughing about me

julian

@frissdiegurke said:

And maybe you should add some styles that reduce the user-image size within "Recent Posts" widget, there is a giant julian-image laughing about me

LOL you know, I noticed that too, but I wasn't sure whether it was a problem with core (since it auto adds img-responsive class to all images), or whether the problem was the plugin. I know we get around it in our emoji plugins with an !important style, but I often wonder if there's a better way...

As for the issues being the wrong way around, that's a good point (leave it for my debut post a bug to show up, eh?). It's because I use two separate regular expressions to find matches. The shorthand regex is run first (hence why it showed up first). Perhaps they can be merged into one regular expression...

Text completion would be possible... didn't really think of it yet

frissdiegurke

@julian said:

LOL you know, I noticed that too, but I wasn't sure whether it was a problem with core (since it auto adds img-responsive class to all images), or whether the problem was the plugin. I know we get around it in our emoji plugins with an !important style, but I often wonder if there's a better way...

Isn't the reason that the divs .github-issue and .meta are missing and because of this the selector .github-issue .meta img doesn't match any more?
If you add

.author-picture {
  float: left;
  width: 16px;
  margin-right: .5em;
}

it should be better, shouldn't it (just tested temporarily addition within browser)?
And a clear: left; should separate multiple embeds at least a bit

julian

@frissdiegurke Yeah, the surrounding tags are removed because they're not in the whitelist, but <img> is. I'll add the necessary styles to .author-picture

frissdiegurke

@julian lol, got the last 3 notifications (1h ago) delivered with this one ^^ no clue why

frissdiegurke

@julian And I get 502 on accessing https://community.nodebb.org/notifications may there be some kind of bug?

julian

For this wondering, it turns out it was a bug in NodeBB, which has since been patched Thanks @frissdiegurke !

frissdiegurke

@julian You're welcome it's always nice to look into other peoples code, if it's well-structured
And to test your plugin once more: #1413

julian

Released v0.1.1 -- fixed the issue ordering @frissdiegurke

julian

v0.1.2, a bit better styling, two per line now.

julian

v0.1.4, fixed lots of issues that @frissdiegurke found

julian

v0.2.0

Short-form syntax has changed to be gh#{num}, so that it does not conflict with user experience (accidental false positive) and markdown # as header.
- Long-form syntax is unchanged.

Testing new syntax: gh#1413

trevor

gh#1337

Just testing this.

<baris>

Wouldn't it make sense to replace gh#123 with the rendered output instead of adding it to the end like other markdown stuff?

julian

It's mostly a aesthetic choice. I'm not a fan of plugins that replace certain keywords with an inline object (take for example, youtube videos). That example is less of a problem, but I like being able to reference an issue in the middle of a sentence... a la:

Take a look at gh#256, that's where we solved that bug

^ No interruption of flow, and the referenced issue is at the bottom for you to check out if you want.

psychobunny

I'll disagree with both of you and suggest that the output be a popup similar to @Schamper's plugin. On mobile, just links to the actual issue. When I mention gh#123 it should be a link, at the very least. Just some ideas

EDIT: Scratch all of the above, you guys just gave me a great idea for a hook. Will get back to this later

a_5mith

@psychobunny reading the title of the issue you used in your example took 4 attempts to make any sense... kept thinking I was reading words over and over again like a child that reads the same line twice.