Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Title + Meta Description and Hackathon List Page Shallow Routing #45

Closed
5 tasks
shubhanshu02 opened this issue Feb 2, 2021 · 9 comments · Fixed by #165
Closed
5 tasks

Title + Meta Description and Hackathon List Page Shallow Routing #45

shubhanshu02 opened this issue Feb 2, 2021 · 9 comments · Fixed by #165
Labels
good first issue Good for newcomers

Comments

@shubhanshu02
Copy link
Member

shubhanshu02 commented Feb 2, 2021 •
edited
Loading

When a webpage is rendered (Let's say a hackathon detail page). It renders with the title hackathon - after the data is fetched from the backend, the hackathon slug is added to this string. Also, the description in meta is showed as undefined.

Update

This issue now deals with the following points:

  • The meta description can be made to vary with the hackathon details like "Register for {hackathon name} at COPS Hackalog, {hackathon tagline}" on hackathon/[slug].
  • On the /submission/[id] page, description meta can be the submission's description and some placeholder while loading.
  • On the /hackathons page, we can change the title as the tabs change. So maybe like "Ongoing Hackathons" instead of "Hackathons" when the ongoing tab is opened.
  • On the /profile page, we can use the "About Me" of the user as the meta description; the current {User's Name}'s Profile on COPS Hackalog, a platform for organising hackathons looks kinda irrelevant.
  • Change the url as the tabs change. Ex - /hackathons/?tab=ongoing. For this, we need a controlled tab component. (ref: here)

To access the url parameters, we'd need router.query, which is already used in some dynamic pages (for reference). Below are the links for documentation:
@shubhanshu02 shubhanshu02 added the good first issue Good for newcomers label May 11, 2021
@ujju20
Copy link
Contributor

ujju20 commented May 21, 2021

I am taking up this issue. Can you explain this briefly?

@shubhanshu02
Copy link
Member Author

This issue needs some discussion since the priorities have changed since the issue was opened. Also, the title part was fixed by some commit earlier. I'll post the relevant parts of this issue in some time today for discussion.

@shubhanshu02
Copy link
Member Author

Here are my findings for this issue.

  1. The meta description can be made to vary with the hackathon details like "Register for {hackathon name} at COPS Hackalog, {hackathon tagline}" on hackathon/[slug].
  2. On the /submission/[id] page, description meta can be the submission's description and some placeholder while loading.
  3. On the /hackathons page, we can change the title as the tabs change. So maybe like "Ongoing Hackathons" instead of "Hackathons" when the ongoing tab is opened.
  4. On the /profile page, we can use the "About Me" of the user as the meta description; the current {User's Name}'s Profile on COPS Hackalog, a platform for organising hackathons looks kinda irrelevant.

@king-11 @subodhk01 @nishantwrp @m-e-l-u-h-a-n, any corrections or suggestions?

@nishantwrp
Copy link
Member

LGTM.

Just one suggestion for point 3. We can also change the url as the tabs change. Ex - /hackathons/?tab=ongoing

@subodhk01
Copy link
Member

Looks good!

@shubhanshu02 shubhanshu02 mentioned this issue May 24, 2021
Open
@ujju20
Copy link
Contributor

ujju20 commented May 24, 2021

For solving this issue I think I need to know about next.js. I know js but don't know about next.js can you tell me from where I can learn about it.

@shubhanshu02
Copy link
Member Author

The first four do not require Next.js knowledge as such. You may view the <Head /> element used in files in the /pages directory and its documentation here.

For the last one, you will require Next.js. IMO the best resource for learning Next.js is the official documentation. Some good courses include Frontend Masters (you may need GitHub Student Plan to access it) and The Net Ninja on YouTube.

@shubhanshu02 shubhanshu02 changed the title Page Header and Meta Issue Title + Meta Description and Hackathon List Page Shallow Routing Sep 6, 2021
@Manan-Rathi
Copy link
Contributor

The first four do not require Next.js knowledge as such. You may view the <Head /> element used in files in the /pages directory and its documentation here.

For the last one, you will require Next.js. IMO the best resource for learning Next.js is the official documentation. Some good courses include Frontend Masters (you may need GitHub Student Plan to access it) and The Net Ninja on YouTube.

Hello @shubhanshu02
I'm facing a common issue in the first four tasks. For ex: In the 3rd one, I guess this should work:
<meta name="title" content={``${hackathon.status} Hackathons``}/> (Single backticks)
However, I am unable to find a straight-forward way to declare a hackathon object that can access the properties of the type HackathonSerializer. Could you please point out some related resource or code?

@shubhanshu02
Copy link
Member Author

For the third part, the fifth one shall be completed first.

@shubhanshu02 shubhanshu02 mentioned this issue Oct 26, 2021
Merged
5 tasks
@shubhanshu02 shubhanshu02 linked a pull request Oct 28, 2021 that will close this issue
added effects on hovering buttons #165
Merged
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

added effects on hovering buttons NerdyLucifer/hackalog-frontend
5 participants
@subodhk01 @nishantwrp @shubhanshu02 @ujju20 @Manan-Rathi