Creating a website version of this repo about competitiveprogramming HOT 45 CLOSED

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!

from competitiveprogramming.

@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.

from competitiveprogramming.

@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.

from competitiveprogramming.

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

from competitiveprogramming.

@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.

from competitiveprogramming.

@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.

from competitiveprogramming.

@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

from competitiveprogramming.

@Athi223 new features look great too!

from competitiveprogramming.

Okay @Athi223
I will test the changes in the morning!
The website screenshots really look great!

from competitiveprogramming.

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

from competitiveprogramming.

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).

from competitiveprogramming.

Hey @Athi223!
Any progress on this?

from competitiveprogramming.

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

from competitiveprogramming.

@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.

from competitiveprogramming.

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

from competitiveprogramming.

@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.

from competitiveprogramming.

@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!

from competitiveprogramming.

@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

from competitiveprogramming.

@skully-coder

Added the View README option, as the "two-pane" version was too tedious to implement & it would've been useless on mobile devices.

Also added an Error Page, just incase if needed (For eg. Github API has limited requests per hour, and while testing I reached the limit a few times, which crashed the whole website. So added an Error Page to inform the user as well as handled the crash)

Also handled the filenames issue, now it can access files with any name.

Only part left is the multiple files support (incase of multiple solutions/languages). Will do it tomorrow and then hopefully the website will be ready.

I've pushed all the latest changes to my repo, you may want to test it.

from competitiveprogramming.

Hey @Athi223
The website looks great!
It's time we go live with it. What do you think?
Also, can you make me a collaborator in your fork? I need to push some changes to the API link name, as the name of the repository has changed

from competitiveprogramming.

@skully-coder

It's time we go live with it. What do you think?

I'll just try to implement the case where there are multiple solutions available (eg. solutions in different languages), because as of now it'll just pick the last solution in such case. Then we can go live

I'll update the API link, it anyway gets linked to the appropriate one so that's not an issue as such. Also are you going to keep this repo name even after hactoberfest? Or will you change it later?

from competitiveprogramming.

@Athi223 I tested the code and it required the API link to be changed, which is why I suggested it, I might change the repo name later on too.
Also, did you add me as a collaborator?

from competitiveprogramming.

@skully-coder Oh okay. Nah actually I was working on some stuff, I'll do that in a moment.

from competitiveprogramming.

Cool @Athi223

from competitiveprogramming.

@skully-coder Done, please check

from competitiveprogramming.

Yes accepted @Athi223

from competitiveprogramming.

@Athi223 I have create a PR for the changes, please check

from competitiveprogramming.

@skully-coder Done
Guess I'll try to search for some env option to set the base URL so we could just reuse it.

from competitiveprogramming.

Yes @Athi223, that can be done.
By when can you complete the last feature?

from competitiveprogramming.

@skully-coder If everything goes well, probably in a couple of hours. At max till today evening.

from competitiveprogramming.

Okay great!
What will be the deployment method? Will this work with GitHub pages? Or do you want to use something else?

from competitiveprogramming.

Yes it works on Github Pages as long as there is no backend requirement (which isn't, in our case). All we need to do is install a npm package and make small configurations and its done. I'll need collaborator access for deployment...

from competitiveprogramming.

Okay @Athi223 , I am giving you collaborator access to the repo!

from competitiveprogramming.

@Athi223 sent invite

from competitiveprogramming.

@skully-coder Accepted, thanks

from competitiveprogramming.

@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.

from competitiveprogramming.

@Athi223 what is the progress??

from competitiveprogramming.

@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.

from competitiveprogramming.

Okay works

from competitiveprogramming.

@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.

from competitiveprogramming.

Okay @Athi223 i will let you know

from competitiveprogramming.

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

from competitiveprogramming.

@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.

from competitiveprogramming.

@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.

from competitiveprogramming.

Okay @Athi223

from competitiveprogramming.