Creating a website version of this repo

[skully-coder]

I need help in creating a website version of this repository. If anyone wants to take up this issue, comment here.

[Athi223]

Hello mate,
I'd like to contribute to this. Could you explain in brief what all is expected on the website?

This is what I could think of:

• A React based website (just a personal preference, also useful if hosting via github pages)
• A homepage containing brief info - Topics covered on repo, languages used in them, etc.
• A category for each folder(topic)
• Formatted code viewer for all problems from each category, along with actual repo link.
• (Maybe) Issue/PR viewer & submission option (or links to github).

[skully-coder]

Hey @Athi223 !
Thanks for taking the initiative! I was thinking of a website hosted on GitHub Pages, and all the rest of the views you have. You can start working on this if you want. Make sure that the website will automatically update itself to adjust for code changes and new issues. I wish you the best of luck!

[skully-coder]

Hey @Athi223!
Any progress on this?

[alokmishra70]

please assign me this issue
I am creating a website using basic HTML, CSS, and javascript

[Athi223]

@skully-coder Yes.

Here's the Homepage. For the solution part, I've currently mentioned it as main.cpp, needs a bit of work so it can handle multiple languages. We also be able to handle any filename, but I just thought having a consistent filename would be better, request you to give your opinion on this.

Here's the Categories page. It lists out all codes in every category (Currently tries to find a file named main.cpp so you might get a Not Found error for some codes as they are named differently.) Has 2 options: displays the code on site itself, and links to to original github page.

Currently working on Issues page:

Please let me know your suggestions and reviews.

[Athi223]

@skully-coder I've included a Dark Mode as well (the tiny button at top-right). Although people would mostly access this on PC, I've still tried to make it mobile responsive.
You can test it my cloning my fork. Just open website folder. Then run npm install and npm start. Will be accessible at localhost:3000

You probably won't find the Issues page since I'm working on it right now so I haven't pushed the changes yet.

[skully-coder]

@Athi223 the website looks awesome! Kudos to you main. I will surely check it out.

[skully-coder]

@Athi223 I checked the website. It looks great! I would like to add some suggestions:

1. If the code can be syntax highlighted, it would make the overall feel a lot better.
2. In the issues tab, the title column of the table looks very wide, so if the text in the title column could be wrapped it would be better, and you could also use the whole label name, instead of the colour tag.
3. Do add a list of contributors on the website too.
4. Also make sure that before merging, you sync your fork with the main repo.
   The rest of the website looks awesome, I can't wait for the merge!
   Great job!
   Do ping me back when the final website is ready.

[Athi223]

@skully-coder

1. If the code can be syntax highlighted, it would make the overall feel a lot better.

Since Github API returns encoded file contents (probably base64), as of now I've just embedded an iframe that displays the contents of github repo (raw file) hence I couldn't manage the syntax part. I'll try to work on it as soon as the basic website is complete.

2. In the issues tab, the title column of the table looks very wide, so if the text in the title column could be wrapped it would be better, and you could also use the whole label name, instead of the colour tag.

Actually I thought adding the whole labels would probably take much of the space, leaving less space for the titles, but I'll try to fix widths for each columns and share the screenshot here. Maybe we could then compare and decide which one looks better.

3. Do add a list of contributors on the website too.

Yes sure, I'll add a page listing Contributors, Collaborators, and Owner.

4. Also make sure that before merging, you sync your fork with the main repo.

Yes I'll do that right before merging, since the repo is probably updated daily due to hacktoberfest.

Also could you just edit the Contribution Guidelines to mention the filename to be main.<lang> maybe? Would make the repo appear better organized. Or if that's not required, I'll try to change the code later so it'll read all filenames from folders.

[skully-coder]

@Athi223 sure i will take your suggestions in mind.
But as for filename many people will keep it according to their own style, so it is better if it read all filenames from folders.

[skully-coder]

@Athi223 if you need collaborator access to this repo, let me know.

[Athi223]

@skully-coder

Added Syntax Highlighting

Added whole label names as you suggested, guess this actually looks better 😆

Added Contributors Page, with Name, Avatar & Contribution count (Only Collaborators wasn't possible thru public API so I guess its better to skip that, Contributors has everything included anyway.)

Working on the filenames stuff now, I guess the website will be ready after that.

@Athi223 if you need collaborator access to this repo, let me know.

Yeah I anyway wanted to request you to add me if it was possible for you, just to have a good project on my profile 😆. I guess you could add me when the whole thing is complete, so as to avoid any accidental push to your original repo.

[skully-coder]

@Athi223 can also do something where it displays the content of the README.md file when the user clicks on the problem? Like it either redirects to a new page with README at the left and code at right, or something like that, if possible. It would be really cool!

[Athi223]

@Athi223 can also do something where it displays the content of the README.md file when the user clicks on the problem? Like it either redirects to a new page with README at the left and code at right, or something like that, if possible. It would be really cool!

Okay I'll try to see if your "two-pane" idea could be implemented, or else I'll at least add another column for "View README" button

[skully-coder]

@Athi223 can also do something where it displays the content of the README.md file when the user clicks on the problem? Like it either redirects to a new page with README at the left and code at right, or something like that, if possible. It would be really cool!

Okay I'll try to see if your "two-pane" idea could be implemented, or else I'll at least add another column for "View README" button

Yeah that works too

[skully-coder]

@Athi223 sent invite

[Athi223]

@skully-coder Accepted, thanks

[Athi223]

@skully-coder Final version of the website is ready. I've also fetched the latest version from your repo. Opening a Pull Request to your main, please check and test anything that you wish to, and merge it.

Main addition is the support for Multiple Codes on Categories page, along with some restructuring of pages.

Let me know once you review and merge it, then I'll clone your version and finalize the deployment.

[skully-coder]

@Athi223 what is the progress??

[Athi223]

@skully-coder Actually it I tried on your repo but it seems we need the owner to deploy it, I'll tell you the steps in a moment, I just need to test the paths & routings to make sure everything is working when hosted on GH Pages. Testing it on my repo and then I'll tell you the steps when everything is set up perfectly.

[skully-coder]

Okay works

[Athi223]

@skully-coder Everything should be fine now.

I want you to do the following steps:

• Make a fresh Clone of your repository (just to avoid unnecessary issues)
• Go to website directory
• Run npm install
• Run npm run deploy
• Let the process complete, then head over to your repo. Check if we have environment present there.

Let me know when you're done with it.

[skully-coder]

Okay @Athi223 i will let you know

[skully-coder]

@Athi223 , the publish was successful, now what do I have to do?

[Athi223]

@skully-coder Nothing else is needed, the site is up!

Check it here: https://skully-coder.github.io/hacktoberfest-competitiveprogramming

You may want to add it to the README & About section of repo

I guess I missed a small change that needs to be done for the categories page. The site is fully working, it'll just give a 404 if we refresh/enter a category URL manually. Sorry about that. I'll just test it once on my repo and will push the changes to your repo if everything goes fine. You'll just have to repeat the above steps once again after that. Really sorry for that.

[skully-coder]

That's alright! @Athi223 The site looks great!

[Athi223]

@skully-coder Thanks!

I've pushed the changes. Just pull once and run npm run deploy (assuming other things are already done) whenever you get time and the site will be updated.

[skully-coder]

Okay @Athi223

[skully-coder]

@Athi223 I have closed the issue, and converted it to a discussion, if you want to communicate anything, just comment here.

[Athi223]

@skully-coder Sure thing. You could also report any bugs or changes if needed.

[skully-coder]

I'm sorry man, the repo has been banned from Hacktoberfest, you worked so much for this repo man, I don't know how to thank you. I hope you have a great hacktoberfest!

[Athi223]

@skully-coder Oh! That's alright, nonetheless, I got some new stuff to work with. Anyway the repo will be helpful to everyone regardless of its eligibility for hacktoberfest.

Did they specify any reason though?

[skully-coder]

Yeah I have opened an issue regarding this