Add link-to-github-io feature

[yashshah1]

Thanks for contributing! 🍄

1. LINKED ISSUES:
   Closes Quick hyperlink to visit someone's github.io #3560

2. TEST URLS:
   Repository Lists
   Repository Page

3. SCREENSHOT:
   
   

[yakov116]

@yashshah1 Thanks for the PR. 🎉

There are many list issues, try to disable pettier for this project.

You can fix all list issues with xo --fix
You may need to install xo globally. npm i -g xo
Or you can try npm run lint.

[fregante]

You can fix all list issues with xo --fix
You may need to install xo globally. npm i -g xo
Or you can try npm run lint.

You can also just use npx xo --fix in the current directory instead of installing it globally.

[yakov116]

Can you run npx xo --fix?

[yashshah1]

@yakov116 I did before pushing the changes, but that didn't change the indentation of pageDetect for some reason. Pushed manually right now

[yakov116]

  source/features/link-to-gihub-io.tsx:17:2
  ✖  17:2  Expected space(s) after "for".  @typescript-eslint/keyword-spacing
  ✖  80:2  Missing semicolon.              @typescript-eslint/semi

Both theses should be fixed with xo --fix

[yashshah1]

@yakov116
Sorry for so many of the minor issues, running npx xo --fix or npx xo didn't show any of the errors that come up on the checks at GH. Running npm run lint however shows me the same list of errors, and currently only the ones flagged by indentaion come up (in features.add).

Thank you so much for your patience and reviews.

[yakov116]

We can combined all of these

[yashshah1]

Done!

[yakov116]

@yashshah1 looking great 🎉

You are still missing a screen shot.
You can look at other features how the screenshot is done. It should be zoomed in so we can see content and the new feature that was added should be noted.

[yashshah1]

Phew, finally.
I had a question, how do I include multiple screenshots (given that this affects the UI in two places), do I simply make a collage out of it?

Also, I haven't yet added this into the README yet, will add it into the Repository section

[yakov116]

do I simply make a collage out of it?

If you can do it clearly yes.

Also, I haven't yet added this into the README yet, will add it into the Repository section

Not sure @fregante WDYT? Profiles or Repository?

[fregante]

Not sure @fregante WDYT? Profiles or Repository?

Repository makes more sense because it affects each repository after all, even if it's a list.

do I simply make a collage out of it?

You can do a simple horizontal split-screen with these two:

[fregante]

The space was in the wrong place

[fregante]

Thought: what if we unconditionally add the icon next to the repo name?

So the style is consistent and the link is accessible from any page of the repo.

[yashshah1]

@fregante That does sound like a better idea! I'm assuming this is as a replacement to adding it onto the sidebar.

[yashshah1]

Considering that the UI is fixed, I've added a screenshot and an entry in the README.

[yakov116]

@yashshah1 dont force push it makes it very had to review what changed

[yashshah1]

Sorry for the delay, but I've incorporated the changes you've suggested. Hoping this does it!

[yakov116]

@yashshah1 the last change I made was to use Select-observer over observeElement. This was something that's change on the master branch.

🎉

[yakov116]

@yashshah1 congrats on adding your first refined-github feature!

[yashshah1]

@yakov116 Thank you! This has been quite a source of learning for me, I'm looking forward to contributing more in the days to come :D