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.