Feb 7, 2021

Copii: Ready to use fully functional copy button for GitHub README files

Have you always wanted to add a copy button in your README files in GitHub? Then you have found the right project. With Copii, you can easily add a copy button in your markdown files. There are 3 types of button you can add/use 👇.

UPDATE: Even if it opens in new tab, now it gets closed automatically

  1. copy

  2. copy

  3. copy

You can click on any of the above buttons and don’t worry, you will be redirected back to the same blog post you are reading…

Interesting part comes here, now check your clipboard after clicking any one of the above buttons. You will find hello there.

You can contribute to all the 50 million+ repositories in the world by adding a Copy button to all the code snippets and examples in readme files

The result can be from this

Contributions

to this 👇

Contributions

Read more to find out how to use this and how I made it for the Vercel Hashnode Hackathon.

Demo

View demo here

How to use Copii 👇

demo

  1. GitHub repo
  2. Website homepage

The situation

First of all, thanks a lot for reading my first blog post ever.

This might be the most awkward sub heading here. In this section I would like to give some reasons for the absence of best practices, good comments, meaningful commit messages and other good stuff in Copii’s codebase.

But I will ensure that I will refactor the code in my free time ;D

I first saw the post about this hackathon on 23rd January 2021. At that time I thought I will not be able to participate in this hackathon because of EXAMS 😖. I had exams starting from 25th of January to 5th of February. But yesterday I rolled up my sleeves and started working on this project. This is the first project I have worked on alone. Another one I can call a project is the Netflix clone 😞 that I made. But I would not assume it as a project because I took the help of some YouTube videos to build it. So this is kind of my first project and fortunately it also happened to be my first project for a hackathon 😁. I had this project idea from a long time ( I guess about some 4-5 months ), but I did not find time to start it. This is also the reason for less number of features in the app and “not so clean” code…

Features

Dark Mode

Tech Stack 📚

This might be the most boring tech stack of all time. But I really wanted to use the awesome framework of React - Next.js by Vercel ▲. I also wanted my site to be lightning fast ⚡️. Vercel is also a cherry on top for speed of the website. So I went with -

  1. HTML
  2. CSS
  3. Vanilla Javascript
  4. Vercel ( formerly Zeit ) for hosting ⚠️ Copii app highly relies on query parameters.

My stack requires no maintenance, has perfect Lighthouse scores, will never have any security vulnerability, is based on open standards, is portable, has an instant dev loop, has no build step and… will outlive any other stack.

-by Steren Giannini

Challenges Faced

  1. Special characters
    • Characters such as & and # created a problem because the browser assumed it to be parts of the URL and not a part of the copying text.
    • So I had to convert them to some special characters before appending them to the URL. I used some combination of characters such as ¬, Ω, ß, etc.. Here’s the snippet that does that
Encoding
let convertText = (copyText) => {
  let copyTextArray = copyText.toString().split("");
  if (copyTextArray.indexOf("\n") !== -1) {
    copyText = copyText.replaceAll("\n", "¬ß≈");
  }
  if (copyTextArray.indexOf("&") !== -1) {
    copyText = copyText.replaceAll("&", "¬Ω≈");
  }
  if (copyTextArray.indexOf("=") !== -1) {
    copyText = copyText.replaceAll("=", "¬Ωœ");
  }
  if (copyTextArray.indexOf("\t") !== -1) {
    copyText = copyText.replaceAll("\t", "    ");
  }
  if (copyTextArray.indexOf(" ") !== -1) {
    copyText = copyText.replaceAll(" ", "%20");
  }
  if (copyTextArray.indexOf("#") !== -1) {
    copyText = copyText.replaceAll("#", "[hashtag]");
  }
  return copyText;
};
Decoding
searchParams.ct = searchParams.ct.replaceAll("¬Ω≈", "&");
searchParams.ct = searchParams.ct.replaceAll("¬ß≈", "\n");
searchParams.ct = searchParams.ct.replaceAll("¬Ωœ", "=");
  1. URLSearchParams API
    • URLSearchParams API does not work on Internet Explorer. So I took the help of StackOverflow and found the following code block
decodeURI(window.location.search)
  .replace("?", "")
  .split("&")
  .map((param) => param.split("="))
  .reduce((values, [key, value]) => {
    searchParams[key] = value;
    return values;
  }, {});
  1. Responsiveness
    • From the start(yesterday morning), I wanted to make the website responsive with the least effort and less code. I was almost done with the website, but I had a hard time making the position of blob responsive to screen sizes. Now it looks good on mobiles and laptops

These are some of the major challenges faced 😅

Thanks 🙏

That’s all for now.

PR’s are welcome 👨🏻‍💻

Thanks to Hashnode team for conducting such wonderful hackathon :)