Git Product home page Git Product logo

gifs-for-github's Introduction

GIFs for GitHub

A Browser extension that makes it easy to search GIPHY and add a GIF into any GitHub comment box.

Example image


Install

Chrome

Firefox


Contributing

git clone https://github.com/N1ck/gifs-for-github
cd gifs-for-github
yarn install
npm run watch # Listen to file changes and automatically rebuild

Once built, load it in the browser of your choice with web-ext:

npx web-ext run --target=chromium # Open extension in Chrome
npx web-ext run # Open extension in Firefox

Or you can load it manually in Chrome or Firefox.


If you want to read about why I built this extension, and some of the challenges I faced, check out my blog post.

gifs-for-github's People

Contributors

dependabot[bot] avatar fregante avatar jamsinclair avatar jmeridth avatar leereilly avatar minhphu0304 avatar n1ck avatar ritikbheda 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  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  avatar  avatar

gifs-for-github's Issues

GIF Button missing on release new/edit page

With the version 23.10.31, the GIF button is missing in the release new/edit page.

Here is a screenshot of two browser windows, release edit on the left and comment box on the right.

Screenshot 2023-11-02 at 12 12 49

I blame Github who shouldn't ever change anything in the UI. :-)

Great extension BTW. You can see how long I've used it for with every release.

Rendering is off in PR reviews

When trying to add a gif to a PR review, the following is rendered:

Initial state:
image

After clicking GIF button:
image

Browser version: Version 120.0.6099.199 (Official Build) (arm64)
Extension version: 24.1.6.1944

Possibly related to the same underlying problem as #68?

Add more GIF providers

I would like to get GIFs from other providers, like Tenor.
I actually made a fork and made it work, just would like to know if I should open a PR, or if it is out of scope for this project.

image

image

GIF button appears below toolbar and makes toolbar unclickable

Problem encountered with version 24.1.16 (latest at time of issue).

Problem

Screenshot 2024-01-18 at 10 14 29 am

(this image inspector shows elements in the toolbar, and then the final <details> element is what this addon inserts (I assume). The content extends over the entire toolbar.)

The GIF button renders below the toolbar and makes the rest of the toolbar unclickable. I can click the GIF button, but only in the upper parts which don't intersect the text box.

Looking at inspector in the above image, it seems like the <details> element is growing to cover the entire toolbar area.

Potential Fix

Adding float: left; to the <details> style fixes the issue. This matches styling applied to all the <div class="ActionBar-item">
elements.

A better fix might be to stick the <details> element into its own <div class="ActionBar-item">. I tested this in console and it seemed to work (I moved the item to first in the toolbar to show more inspector hierarchy).

Screenshot 2024-01-18 at 10 18 46 am

Thank you for a great extension!

GIF button appears below toolbar in certain breakpoints

Hi @N1ck . Thanks for the lovely tool. The problem was encountered on version 24.1.18 in both chrome (121.0.6167.185) and firefox (122.0.1).

Current Behavior

image

The GIF button renders below the toolbar at certain breakpoints. Specifically, when there is no more whitespace for the toolbar buttons, it gets rendered below.

Expected behavior

The GIF button gets moved to the menu (triple dot) items, or is placed within the toolbar.

Steps to reproduce

  1. Create a new issue on github.
  2. Resize browser horizontally until toolbar shrinks to displace GIF button.

Bug: funding.yml/FUNDING.yml collision after clone

When you fork and then clone the repo you get notified of colliding [F|f]unding.yml files.

➜  code git clone [email protected]:jmeridth/gifs-for-github.git
Cloning into 'gifs-for-github'...
...
warning: the following paths have collided (e.g. case-sensitive paths
on a case-insensitive filesystem) and only one from the same
colliding group is in the working tree:

  '.github/FUNDING.yml'
  '.github/funding.yml'
➜  cd gifs-for-github
➜  gifs-for-github git:(master) ls .github
total 4.0K
-rw-r--r-- 1 jmeridth staff  13 Mar 15 00:24 funding.yml
drwxr-xr-x 5 jmeridth staff 160 Mar 15 00:24 workflows

I believe you may have to delete them from the UI or some other way.

Thank you again for this wonderful project.

Does not work any more (5th January 2024)

Hello. I downloaded this extension from the Firefox addons page months ago, and have been happily using it all along.

Today it stopped working. I was using it a couple of days ago, it only started failing now.

The Javascript console shows a bunch of errors "Content-Security-Policy: The page’s settings blocked the loading of a resource at ...".

I have not updated Firefox in weeks, and this just started happening now, so probably the Github people just changed something that broke the extension. Hopefully you can figure a workaround to make it work again. This awesome addon is missed.

Not sure if it matters:
Firefox version 119.0 (64-bit)
Gifs For Github version 23.11.6

Stopped working on "Files changed" (review) tab

Hi, first of all thanks for a great add on!

I'm not sure when, or if it's just me, but recently the "GIF" button has only been appearing on the "Conversation"-tab editor, and is no longer available on the code-review editor :(
It would be really nice if this functionality could be restored :)

Inquiry: <img> tag instead of markdown style

Hey N1ck, thanks for providing this awesome plugin

I wanted to ask if you'd be open for a PR that replaces the insertion of

![](https://media0.giphy.com/media/l4FGCdurj53YWZYYg/giphy.gif)

with

<img src="https://media0.giphy.com/media/l4FGCdurj53YWZYYg/giphy.gif"/>

This way you can easily change the size of the gif with:

<img src="https://media0.giphy.com/media/l4FGCdurj53YWZYYg/giphy.gif" width="100px"/>

What do you think? 🙂

[Feature Request] Make gifs collapsible, but open, by default

This should just be a matter of editing gif output to something like:

<details open>
	<summary><i>make it so</i></summary>
	<img src="https://media3.giphy.com/media/bKnEnd65zqxfq/giphy.gif"/>
</details>

Ideally, the summary would include, by default, what the user input into the text field when searching for a gif.

For the example above, I typed in "make it so" so that's why the summary has "make it so" in it. Here's the actual output as an example:

make it so

[Feature request] Support for Github Enterprise

Lot's of companies are using Github enterprise on locally hosted domains.
For instance, we also have the same fun "convention" in mine, to add a gif to our PRs, and I am sure this extension would take off if it had an option to configure the domain.

Github Dark theme extension does it great, a simplified similar interface could be used:
image

I could be interested to contribute for that if you are interested, keep in touch. Cheers

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.