Creating a website version of this repo

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

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

@Athi223

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!

@Athi223

Hey @Athi223!
Any progress on this?

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

@skully-coder

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

@skully-coder

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

@Athi223

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

@Athi223

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

If the code can be syntax highlighted, it would make the overall feel a lot better.
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.
Do add a list of contributors on the website too.
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.

@skully-coder

@skully-coder

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.

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.

Do add a list of contributors on the website too.

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

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.

@Athi223

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

@Athi223

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

@skully-coder

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

@Athi223

@Athi223 what is the progress??

@skully-coder

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

Okay works

@skully-coder

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

@Athi223

Okay @Athi223 i will let you know

@Athi223

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

@skully-coder

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

@Athi223

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

@skully-coder

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

@Athi223

Okay @Athi223

Navigation Menu

Repository navigation

Creating a website version of this repo #25

24 remaining items

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Creating a website version of this repo #25

Description

Activity

Athi223 commented on Oct 2, 2021

skully-coder commented on Oct 2, 2021

skully-coder commented on Oct 3, 2021

alokmishra70 commented on Oct 3, 2021

Athi223 commented on Oct 3, 2021

Athi223 commented on Oct 3, 2021

skully-coder commented on Oct 3, 2021

skully-coder commented on Oct 3, 2021

Athi223 commented on Oct 3, 2021

skully-coder commented on Oct 3, 2021

skully-coder commented on Oct 3, 2021

24 remaining items

Athi223 commented on Oct 4, 2021

skully-coder commented on Oct 4, 2021

Athi223 commented on Oct 4, 2021

skully-coder commented on Oct 4, 2021

Athi223 commented on Oct 4, 2021

skully-coder commented on Oct 4, 2021

skully-coder commented on Oct 4, 2021

Athi223 commented on Oct 4, 2021

skully-coder commented on Oct 4, 2021

Athi223 commented on Oct 4, 2021

skully-coder commented on Oct 5, 2021

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions