feat!: redesign website

arashsheyda commented 4 months ago

What issue is this referencing?

this PR will closes #311, #139 (with breaking changes)

Description

use pnpm instead of npm (as it is much faster)
latest nuxt with @nuxt/devtools support
@nuxt/content for writing static content in markdwon
@nuxt/eslint for eslint setup with new flat configuration
@nuxtjs/seo for SEO tools like ogImage, SchemaOrg, LinkChecker and ...
new component structure
nuxt-icon for iconify icons
moved the data from store to constants (with auto-import enabled now). maybe we can move it to composables in the future.
improved lighthouse score: (the score is improved but the performance might not always be at 100, jsut a little heads up)

MandyMeindersma commented 4 months ago

the board recruitment page seems to 404 https://deploy-preview-315--dev-edmonton.netlify.app/board_recruiting

MandyMeindersma commented 4 months ago

Okay general thoughts:

This is beautiful and I am so excited. Thank you for all the work you have put into it.
How do we deal with the TODO's? Is your plan to make issues for them and fix later or fix before the pr merges in?
Most important question: when I am confused about something with nuxt content in the next 6 months can I DM you hahahah

MandyMeindersma commented 4 months ago

@MarkBennett You do not have to review but I think you would find this pr really fun. The resdesign is so cool!

deejayjay commented 4 months ago

Okay general thoughts:

This is beautiful and I am so excited. Thank you for all the work you have put into it.

How do we deal with the TODO's? Is your plan to make issues for them and fix later or fix before the pr merges in?

Most important question: when I am confused about something with nuxt content in the next 6 months, can I DM you hahahah

@arashsheyda: I really love how good the redesigned landing page looks. Great job on the redesign and the improved light house scores.

@MandyMeindersma: I was literally thinking the same thing you mentioned in #3. It would be nice to have some support if we end up having issues later on. Also, an FYI, I am helping my brother move today, so I can't review the PR until later this evening.

MarkBennett commented 4 months ago

@MarkBennett You do not have to review but I think you would find this pr really fun. The resdesign is so cool!

Thanks for the heads up @MandyMeindersma! I'm just heading out for a spring break trip with the family but I might lurk on this just to see. Very cool and great work @arashsheyda! 😄

MarkBennett commented 4 months ago

It has a dark theme! So cool @arashsheyda! 🤯

arashsheyda commented 4 months ago

@MandyMeindersma

How do we deal with the TODO's? Is your plan to make issues for them and fix later or fix before the pr merges in?

yes, the TODO's are more like nice to have things in the future, except contact page

Most important question: when I am confused about something with nuxt content in the next 6 months can I DM you hahahah

yes for sure, anytime! I'de be super happy to help with anything related to vue & nuxt :DD

arashsheyda commented 4 months ago

@MarkBennett @deejayjay thanks!

DerrykBoyd commented 4 months ago

I'm not going to go through a whole review due to the quantity of changes, but I do have a few comments after a quick glance.

Great work on these changes by the way.

use pnpm instead of npm (as it is much faster)

I don't necessarily agree with this change. At the very least I think it should be separated into it's own PR.

It looks like our test and format npm commands have been removed, and also removed from the PR guidelines.
It looks like our test setup has been removed entirely. That's a pretty big regression.

I could maybe do a more in depth look later, but these are the things that jumped out for me right away that I thought might merit some discussion.

arashsheyda commented 4 months ago

I don't necessarily agree with this change: pnpm

here is why we sohuld use pnpm pnpm vs npm also in my experience pnpm works better in many ways but if you want we can roll back to npm 😄

At the very least I think it should be separated into it's own PR.

I thought including it here made sense because of all the changes. But if you think it's better separate, we can do that

It looks like our test and format npm commands have been removed, and also removed from the PR guidelines.

format comamnd has been replace with lint (prettier is good but sometimes it can be too strict, and I think we can have what prettier has with eslint) also there is this article about eslint & prettier

It looks like our test setup has been removed entirely. That's a pretty big regression.

the tests were removed as it had 3 basic tests, and I thought starting fresh will help us build better tests later on.

I could maybe do a more in depth look later, but these are the things that jumped out for me right away that I thought might merit some discussion.

thanks @DerrykBoyd

DerrykBoyd commented 4 months ago

I thought including it here made sense because of all the changes.

It's definitely best practice to keep PRs as small as possible and single focus. Otherwise things can get stuck in limbo since now you end up with multiple discussions in the PR trying to work through opinions on each change.

on pnpm vs npm

That's an opinionated change, my main objection here is it's another small hurdle for contributors. But I'm not totally against it.

formatters vs linters

Here are the recommendations from the typescript-eslint project on this topic.

Again, this isn't something I would get behind, but I don't mind if others want to go ahead with it.

on tests

Yes we didn't have many tests, but what we did have was a working test setup, and that's valuable. Before if any contributor wanted to add a test all they had to do was create a x.test.js file and write the test, everything else was handled including running the tests on CI.

Having personally volunteered time to get that setup up and running, it stings a little bit to see it removed without replacement.

Again, overall I don't want these things to detract from the work done here. It's incredible that you volunteered this much time to improve the site! And if this was merged as is, I would still be incredibly pleased.

Suggested action items before merge for me:

Bring back a working test setup (optional - maybe a follow up PR)

Edited - I didn't see the README was already changed in all the files lol

DerrykBoyd commented 4 months ago

@arashsheyda please don't revert the prettier change 😄 I think if others are ok with it it would be good to try the eslint only setup and see how that goes.

It might help with some issues we had recently with contributors editing files directly in github

DerrykBoyd commented 4 months ago

Thanks for doing those other changes! I'm glad the tests are back

Excellent work again @arashsheyda

Feel free to open up a follow up PR for switching to pnpm

DerrykBoyd commented 4 months ago

A couple odd behaviours around scrolling that I noticed in the deploy preview

After a navigation there is a jarring jump to the top of the current page before the next page loads (if there is no cache of that page yet)

https://github.com/devedmonton/DES-Website/assets/24216368/ea11307a-7a43-4905-8ab9-f5b9dbaf6256

Between around 1020px to 1300px something (I assume the slack animation) is causing the horizontal scroll to trigger and move (see the scrollbar at the bottom)
The "As a business" image link appears to be broken (can see in this video as well)

https://github.com/devedmonton/DES-Website/assets/24216368/eb3ab84e-99c7-457d-bd6f-c55f95662436

arashsheyda commented 4 months ago

@DerrykBoyd the navigation thing is because we are getting the content of that page from content directory (@nuxt/content) and that requires a api fetch, we can make the fetch lazy (so the page would load instantly but we have to show some skeleton UI to user while the data loads) or we can prefetch the data (but it might effect the site's performance, edited: the pages are loading faster now with prefetch enabled, the performance is not effected that much) let me know what way you want to approach

yes I'm aware of that 😄 I don't have illustrator at the moment but when we convert the illustrations to svg, we can set their size easier
that must've been a bad build from netlify (it was working before and it works locally)

DerrykBoyd commented 4 months ago

@DerrykBoyd the navigation thing is because we are getting the content of that page from content directory (@nuxt/content) and that requires a api fetch, we can make the fetch lazy (so the page would load instantly but we have to show some skeleton UI to user while the data loads) or we can prefetch the data (but it might effect the site's performance, edited: the pages are loading faster now with prefetch enabled, the performance is not effected that much) let me know what way you want to approach

Ideally the solution would be that the scroll on the page doesn't change while waiting for that transition. But I don't think this is a major problem, could be a follow up issue for someone to look into.

I don't have illustrator at the moment but when we convert the illustrations to svg, we can set their size easier

All good 😄 again, minor issue

must've been a bad build from netlify

Possibly, I'm not convinced though. Probably ok to see after final deploy if it's working. What I did notice is that image is not using our image-kit setup while the others are. Also the image in production points directly to unsplash, where the one on the deploy preview seems to be processed by Netlify now.

At this point I'll defer to @MandyMeindersma to get this over the line.

Thanks for you patience with those comments @arashsheyda much appreciated.

arashsheyda commented 4 months ago

@DerrykBoyd

I modified the router to wait for page to fully load and then scroll to top, should I push it?

https://github.com/devedmonton/DES-Website/assets/38922203/bc2b0941-bd12-4557-a7de-dcbdfce83241

yes the link to image is from unsplash, and maybe netlify is caching it (if that happened in production as well, maybe we can upload it to imagekit)

DerrykBoyd commented 4 months ago

I modified the router to wait for page to fully load and then scroll to top, should I push it?

Sure, that looks much better 😀

MandyMeindersma commented 4 months ago

So I think in one of the recent changes we lost the "randomization" of the meetups and community events.

Like if a refresh the highlighted 5 tiles seem to stay the same?

MandyMeindersma commented 4 months ago

I have a couple more comments but they will probably have to wait until Thursday! Sorry to make you wait @arashsheyda

Thank you again!

arashsheyda commented 4 months ago

@MandyMeindersma we have the same code built on vercel and it's working fine (randomization and the unsplash image https://devedmonton.vercel.app/)

MandyMeindersma commented 4 months ago

new assets in imagekit:

https://ik.imagekit.io/des/meetups/DataScience (updated image version)
https://ik.imagekit.io/des/events/clc.png (updated image version)
https://ik.imagekit.io/des/events/gdgLogo.png (updated image version)
https://ik.imagekit.io/des/weeklydevchat.svg?updatedAt=1711891116380
https://ik.imagekit.io/des/amii.svg?updatedAt=1711891076887
https://ik.imagekit.io/des/python.svg?updatedAt=1711891265404
https://ik.imagekit.io/des/edmontonUnlimited.svg?updatedAt=1711891076630
https://ik.imagekit.io/des/r.svg?updatedAt=1711891284058

Also unsplash seems to not work on your site so I just created an imagekit for that too:

https://ik.imagekit.io/des/homepage/as-a-business.jpg?updatedAt=1711891450346

MandyMeindersma commented 4 months ago

Again amazing work @arashsheyda

Other than answering my random nuxt context questions I think there are only 2 things I am semi blocking this pr for:

Just delete that server/api/contact.post.ts file
the randomization of the meetups and stuff is still not working on netlify and I would love to see that working but it's not a blocker for this pr. Because I know this was deleted: https://github.com/devedmonton/DES-Website/blob/baaec1f05125578e39e89ef6e5037f45cc49e120/store/meetups.js#L111-L113 but I can not find where the replacement code for that? (could be a me problem lol, it might be there, I just can't find it ahahh)

arashsheyda commented 4 months ago

@MandyMeindersma the randomize function is in /utils/index.ts

arashsheyda commented 4 months ago

@MandyMeindersma in order for randomize to work we need SSR. (because we are using server components, I can change it to work only in client-side and we wouldn't need SSR but that's not good for SEO as the items wouldn't show in server-side)

can we make sure the build command is build?