For Wire in the Wild, I needed a simple way to fetch the favicon or avatar of the creator link. Whenever you add a creator to a project on Wire in the Wild, you can add a website, twitter or Github profile/organization page and in the background the favicon or avatar is fetched for you. To keep the submission form a simple as possible, I'm using the wonderful favicon-fetcher package created and maintained by Ash Allen.
Favicon fetcher ships with a few different drivers out of the box. In order to fetch the twitter or Github profile avatar, I needed a custom driver. Luckily the package is extensible.
What are we building?
To get the best possible avatars or favicon, we will be using the unavatar service. Favicon fetcher already ships with a driver for unavatar, but it's limited to websites. We need:
- A way to fetch from
/twitter/<username>and - Github personal and organization profiles using
/github/<profile> - and still get the favicon, if a website url is the creator link
Let's build a custom driver
The favicon fetcher docs have a section on how to build your own driver. Let's add UnavatarServices.php in FaviconFetcher/Drivers in the app directory of our Laravel app:
As you can see, we take and check the url if it contains github, x or twitter in order to choose the proper unavatar endpoint.
Registering our custom driver
In order to let our app and specifically the favicon fetcher package know that there is a new driver in town, we need to add it in the register method of our AppServiceProvider like this:
How to use the custom favicon driver
Now that our app knows about the new driver, we can start using it. You can play around with it using php artisan tinker or in Tinkerwell:
These will return Favicon objects that you can use. For example you can use the store('avatars', 'public') method to save the avatar. Don't forget to save the path to a model property too.
Example: Fetch the favicon on saving
For Wire in the Wild, I wanted to fetch the favicon whenever a Creator model is saved. Here is a shortened example:
That's it. Feel free to send improvements or questions how to implement it in your case, I can't wait to see what you are building.