Instant Hosting of Open Source Projects with GitHub-style Ribbons

Mapping Applications with PostGIS and Nodejs screenshot
In this post I’ll show you how to create your own GitHub-style ribbons for launching open source projects on OpenShift.

The popular “Fork me on GitHub” ribbons provide a great way to raise awareness for your favorite open source projects. Now, the same technique can be used to instantly launch clones of your application, helping to rapidly grow your community!

Take advantage of OpenShift’s web-based app creation workflow – streamlining installation, hosting, and management of instances – by crafting a workflow URL that contains information about your project.

Ribbons allow Open Source projects to quickly go viral on OpenShift

After crafting your project’s OpenShift app creation workflow URL, make the process easy to find by including an open source ribbon in copies of your application code.

Just add the following HTML code to your application, substituting in your own workflow URL:

<span id="fossribbon">
    <a href="https://openshift.redhat.com/app/console/application_types/custom?name=parks&initial_git_url=https%3A%2F%2Fgithub.com/ryanj/restify-postGIS.git&cartridges[]=nodejs-0.10&cartridges[]=postgresql-9.2">Run me on OpenShift</a>
</span>

Insert the above code just before the close of your page’s </body> tag.

Then, include the following CSS styles to make the ribbon look nice:

#fossribbon {
  z-index:10;
}
#fossribbon a{
  background:red;
  color:#fff;
  text-decoration:none;
  font-family:arial, sans-serif;
  text-align:center;
  font-weight:bold;
  padding:5px 40px;
  font-size:1rem;
  line-height:2rem;
  position:relative;
  transition:0.5s;
}
#fossribbon a:hover{
  background:black;
  color:#fff;
}
#fossribbon a::before,#fossribbon a::after{
  content:"";
  width:100%;
  display:block;
  position:absolute;
  top:1px;
  left:0;
  height:1px;
  background:#fff;
}
#fossribbon a::after{
  bottom:1px;top:auto;
}
@media screen and (min-width:800px){
  #fossribbon{
    position:absolute;
    display:block;
    top:0;
    right:0;
    width:200px;
    overflow:hidden;
    height:200px;
  }
  #fossribbon a{
    width:200px;
    position:absolute;
    top:60px;
    right:-60px;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    box-shadow:4px 4px 10px rgba(0,0,0,0.8);
  }
}

Thats it! Now be ready to have your application go viral!

Click here to see a live example of the ribbon in action

Note: The ribbon is automatically hidden on mobile, and other small-screen devices

Next Steps

Categories
MongoDB, Node.js, OpenShift Online, PHP, Ruby
Tags
, , ,
Comments are closed.