Coder Social home page Coder Social logo

producthunt / sharemeow Goto Github PK

View Code? Open in Web Editor NEW
187.0 31.0 18.0 10.93 MB

:heart_eyes_cat: text shots service

Home Page: https://www.producthunt.com

License: MIT License

Ruby 38.03% HTML 43.06% CSS 17.47% Dockerfile 1.17% Shell 0.19% Procfile 0.08%
ruby emoji twitter image tweet sharing

sharemeow's Introduction

ShareMeow

Build Status Code Climate Test Coverage Dependency Status

ShareMeow is a Ruby microservice (ooh ahh) for creating super shareable, tweetable, facebook-able images from your content ๐Ÿ˜ป. You define a template (using HTML/CSS), pass it some parameters, and it will generate an image to you.

It's what we use at Product Hunt for making beautiful tweets like this:

ShareMeow Preview Image

Features:

  • Supports Emoji ๐Ÿ’ฏ๐Ÿ˜ปโœจ
  • Custom fonts
  • Cachable images (throw cloudflare infront of it & you're good to go)
  • signed URLs via hmac digest

Getting Started

For a quick introduction to how to use ShareMeow, take a look at this excellent screencast by GoRails.

ShareMeow Screencast

The API

GET /v1/:encoded_params/:encoded_hmac_digest/image.jpg

This generates and returns a jpg.

Required params are determined by the image template you're using.

If you're using Ruby, you can use the ShareMeow Ruby Client for generating URLs easily.

If you'd rather not use the client. Here is an example of how to generate the URL in Ruby.

require 'base64'
require 'json'
require 'openssl'

json_params = { template: 'HelloWorld', message: 'Hello' }.to_json

encoded_params = Base64.urlsafe_encode64(json_params)
hmac = OpenSSL::HMAC.hexdigest(OpenSSL::Digest.new('sha1'), 'your_secret_key', encoded_params)
hmac_digest = Base64.urlsafe_encode64([hmac].pack('H*'))

image_url = "https://your-share-meow.herokuapp.com/v1/#{ encoded_params }/#{ hmac_digest }/image.jpg"


# => "https://your-share-meow.herokuapp.com/v1/eyJ0ZW1wbGF0ZSI6IkhlbGxvV29ybGQiLCJtZXNzYWdlIjoiSGVsbG8ifQ==/-lgitNQmEs9NaiWyOCHeV137D80=/image.jpg"

Deploy

Deploy

Authentication ๐Ÿ”

ShareMeow uses URLs signed with an HMAC signature to ensure that only people with a secret key are able to generate URLs with your service.

It works like this:

Convert your parameters to JSON. Then Base64 URL Safe encode them. There are libraries available to do this in all major languages.

# Ruby
params = { template: 'HelloWorld', message: 'Hello, World' }
json_params = params.to_json

encoded_params = Base64.urlsafe_encode64(json_params)

Then create the HMAC signature from the encoded params and your secret key. Finish by packing and base64 encoding the signature (we do this to keep the URL shorter)

hmac_signature = OpenSSL::HMAC.hexdigest(OpenSSL::Digest.new('sha1'), 'your_secret_key', encoded_params)
encoded_hmac = Base64.urlsafe_encode64([hmac_signature].pack('H*'))

When ShareMeow gets your request, it will recreate the HMAC signature using the encoded params/secret key. If it matches the signature you provided, it will generate the image. โญ

Templates

Take a look here for example templates: https://github.com/producthunt/ShareMeow/tree/master/app/image_templates.

Custom Fonts

Here is example css using a font from Google Fonts.

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Regular'), local('Roboto-Regular'), url(https://themes.googleusercontent.com/static/fonts/roboto/v10/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}

Emoji โœจ

If you'd like to render emoji, you can use the EmojiHelper in your templates. It converts both unicode emoji and GitHub/Slack (:smile:) style emoji to images. Can do this by overriding render_options.

# images_templates/your_template.rb
require 'app/emoji_helper'

module ImageTemplates
  class YourTemplate < Base
    def render_options
      @options[:content] = EmojiHelper.emojify(@options[:content])
      super
    end
  end
end

Development

After checking out the repo, run bundle install to install dependencies. Then, run rspec to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment.

Start the server: $ puma

Contributing โค๏ธ

Want to make this better? Great! ๐Ÿ˜„

Bug reports and pull requests are welcome on GitHub at https://github.com/producthunt/ShareMeow. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The gem is available as open source under the terms of the MIT License.

sharemeow's People

Contributors

andreasklinger avatar andrew avatar ayrton avatar dependabot[bot] avatar deppbot avatar devladinci avatar korbin avatar kristianfreeman avatar mscoutermarsh avatar rstankov avatar trendy 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  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

sharemeow's Issues

Load in latest emoji

image

That blank space should be a ๐Ÿค–

I haven't upgraded to macOS Sierra yet. So I can't pull in the newest emojis.

Can someone with Sierra run bundle exec gemoji extract public/images/emoji and open a PR?

See gemoji docs here: https://github.com/github/gemoji

This will load in new emoji.

URL's over 2048 chars are failing

Puma limits URI's to 2048 characters.

example: https://sharemeow.producthunt.com/v1/eyJjb250ZW50IjoiSGkgQWxsLCAgSSdkIGxpa2UgdG8gdGhhbmsgYWxsIHRoZSBncmVhdCBwZW9wbGUgdGhhdCBoZWxwZWQgZ2V0IG1lIGhlcmUuIDxicj48YSBocmVmPVwiaHR0cHM6Ly93d3cucHJvZHVjdGh1bnQuY29tL0Bycmhvb3ZlclwiIHRhcmdldD1cIl9ibGFua1wiIHJlbD1cIm5vZm9sbG93XCI-QHJyaG9vdmVyPC9hPiB0byBzdGFydCAjQmxhbWVSeWFuSG9vdmVyIC0gaGUga25vd3Mgd2hhdCBoZSBkaWQuPGJyPjxhIGhyZWY9XCJodHRwczovL3d3dy5wcm9kdWN0aHVudC5jb20vQG1zY2NjY1wiIHRhcmdldD1cIl9ibGFua1wiIHJlbD1cIm5vZm9sbG93XCI-QG1zY2NjYzwvYT4gJmFtcDsgPGEgaHJlZj1cImh0dHBzOi8vd3d3LnByb2R1Y3RodW50LmNvbS9AY29ybGV5aFwiIHRhcmdldD1cIl9ibGFua1wiIHJlbD1cIm5vZm9sbG93XCI-QGNvcmxleWg8L2E-ICNUZWFtQ29yZG9nZyAtIGZvciB0aGVpciBhd2Vzb21lIGNvLW1ha2luZyBza2lsbHo8YnI-PGEgaHJlZj1cImh0dHBzOi8vd3d3LnByb2R1Y3RodW50LmNvbS9Abml2bzBvMFwiIHRhcmdldD1cIl9ibGFua1wiIHJlbD1cIm5vZm9sbG93XCI-QG5pdm8wbzA8L2E-IGZvciBzb21lIGZ1biBlbW9qaSBhY2Nlc3Nvcml6aW5nIPCfmYzwn5i78J-Rjzxicj5USEUgRU5USVJFIE1FRVJLQVQgVEVBTSAtIFlvdSBwcGwgYXJlIGFtYXppbmcuIDxicj48YnI-SGVyZSBhcmUgc29tZSBvZiB0aGUgYXdlc29tZSB0aGluZ3MgSSd2ZSBtYWRlIHRoaXMgeWVhcjogPGJyPiAgLSA8YSBocmVmPVwiaHR0cHM6Ly93d3cucHJvZHVjdGh1bnQuY29tL3RlY2gvbWVlcmthdC1zdGF0c1wiIHRhcmdldD1cIl9ibGFua1wiIHJlbD1cIm5vZm9sbG93XCI-TWVlcmthdCBTdGF0czwvYT4gPGJyPiAtIDxhIGhyZWY9XCJodHRwczovL3d3dy5wcm9kdWN0aHVudC5jb20vdGVjaC90b3AtaHVudFwiIHRhcmdldD1cIl9ibGFua1wiIHJlbD1cIm5vZm9sbG93XCI-VG9wIEh1bnQ8L2E-IDxicj4gLSA8YSBocmVmPVwiaHR0cHM6Ly93d3cucHJvZHVjdGh1bnQuY29tL3RlY2gvbWVlcmthdC1lbWJlZFwiIHRhcmdldD1cIl9ibGFua1wiIHJlbD1cIm5vZm9sbG93XCI-TWVlcmthdCBFbWJlZDwvYT4gPGJyPiAtIDxhIGhyZWY9XCJodHRwczovL3d3dy5wcm9kdWN0aHVudC5jb20vdGVjaC9waGFuLWZpbmRlclwiIHRhcmdldD1cIl9ibGFua1wiIHJlbD1cIm5vZm9sbG93XCI-UGhhbkZpbmRlcjwvYT4gPGJyPiAtIDxhIGhyZWY9XCJodHRwczovL3d3dy5wcm9kdWN0aHVudC5jb20vdGVjaC9tZWVya2F0LWNhbWVvXCIgdGFyZ2V0PVwiX2JsYW5rXCIgcmVsPVwibm9mb2xsb3dcIj5NZWVya2F0IENhbWVvPC9hPiA8YnI-IC0gPGEgaHJlZj1cImh0dHBzOi8vd3d3LnByb2R1Y3RodW50LmNvbS90ZWNoL3Byb2R1Y3QtaHVudC1saXZlLWNhbGVuZGFyXCIgdGFyZ2V0PVwiX2JsYW5rXCIgcmVsPVwibm9mb2xsb3dcIj5Qcm9kdWN0IEh1bnQgTGl2ZSBDYWxlbmRhcjwvYT4gICIsIm5hbWUiOiJKZWZmIE5lZWRsZXMiLCJzdWJqZWN0X25hbWUiOiJKZWZmIE5lZWRsZXMiLCJ1c2VyX2lkIjoxMDA5OSwidGVtcGxhdGUiOiJDb21tZW50In0=/Jc7XorVgIsBbIdXSQbGJUqSVmw4=/image.jpg

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.