Adding a feature to Telescope

My last Hacktoberfest contribution was to Telescope, the awesome web app used to aggregate blog feeds from the Seneca College open source community.

New Feature

I worked on a way to easily display all of the Github repos, issues and pull requests links from a blog post into the sidebar.

After a few days of writing the initial work for the issue, I opened a PR as a draft. Things were far from over! 😄 I received a lot of great feedback and kept adding commits to fix bugs and improve the code. The PR accumulated a total of 73 comments with multiple reviewers involved. I also received help from Andrew Nguyen for the filterGitHubUrls() function in the form of a PR in my own telescope fork.

The basic idea was to receive an array of Github links, filter them by repos, issues, pullRequests, and finally display those in their own individual react component.

const GitHubInfo = ({ ghUrls }: Props) => {
  const classes = useStyles();
  const { repos, issues, pullRequests } = filterGitHubUrls(ghUrls);

  return (
    <ListSubheader className={classes.root}>
      <div className={classes.GitHubInfoContainer}>
        {!!repos.length && <Repos repoUrls={repos} />}
        {!!issues.length && <Issues issueUrls={issues} />}
        {!!pullRequests.length && <PullRequests prUrls={pullRequests} />}
      </div>
    </ListSubheader>
  );
};

Final Result

The sidebar used to show only the Author and the blog post's date. Now it shows a more complete overview on the post using the Github data:

I loved seeing the excitement for this feature on the Telescope slack channel and I am really happy with the result. It should be released with the next version of Telescope very soon!