JEDI Page #235

mattxwang · 2021-08-11T00:48:29Z

This PR implements three pages from Helia's wireframe:

Outside of directly implementing the pages, we:

add an "initiatives" section to the footer
imports more font weights for Open Sans, includes semi-bold, bold, and bold italic

Technical to-do tracker:

general
- SEO
- mobile responsiveness
- screenreader audit
- implement nav?
- add to footer
- <a> and button CSS
- resolving standardize images to next/image #188
- homepage above-the-fold image
- adding more color/holograph effect
- implement contact feature
allyship spaces page
- move data to its own file
- move allyship card to its own component
- scope module css to just the allyship card
- decide on impl. method for links
- ~~icons for link buttons!~~ going to punt this as out of scope unless Design requires it for QA
- ~~programmatic dates~~ going to punt this as out of scope
- ~~location links?~~ going to punt this as out of scope
meet the jedis page
- move data to its own file
- move jedi card to its own component
- scope module css to just the jedi card
- proper styling of pronouns
- font size check
- stretch goal: center orphaned grid elements
- stretch goal: change gutter spacing to be fixed-gutter, variable image

mattxwang · 2021-08-11T01:21:01Z

cc: @evanzhong as he was interested

evanzhong · 2021-08-16T22:11:11Z

Took a look at this today, love the way the skeleton is shaping up!

Do you need any help with ideas for the nav? Lot of content for the JEDI pages and I like what you're doing with the sub nav bar. It took me a while to figure out how to use it, mainly b/c the nav is on the left for the home page, but then shifts up to top of the main body for the other pages

mattxwang · 2021-08-19T03:46:33Z

Do you need any help with ideas for the nav? Lot of content for the JEDI pages and I like what you're doing with the sub nav bar. It took me a while to figure out how to use it, mainly b/c the nav is on the left for the home page, but then shifts up to top of the main body for the other pages

Yeah, that's a good point! I had initially implemented it this way since that's what Helia asked for in the mockup/ what she wanted from the call we had, but I agree that the transition from the home page -> not the home page is a bit jarring.

Definitely welcoming any ideas, I guess what I have in mind is:

maybe include both?
have some sort of transition on scroll from the left to the right
a new nav component in its entirety

Also will eventually QA review this through Design (once some of the content is done), and they might be able to provide some more input too!

This PR implements per-page SEO tags via [`next-seo`](https://github.com/garmeeh/next-seo). Under-the-hood, the package handles basic meta tags, and OpenGraph URLs; according to the documentation, Twitter now also parses OG data, and thus doesn't generate twitter-specific metadata. I then manually write and apply copy for each page: the home page, about, committees, events, sponsors, and tech gala. We'll have to backport this to other new pages, like the ones introduced in #238 and #235. I chose not to add any default templating or abstract this to a component, since I think the copy differs enough where boilerplate doesn't help us too much. For reviewers - it would be great if you could test this on a variety of social media platforms (Facebook, Twitter, Discord, Instagram. etc.). I've done Discord testing in the #test3 moderator channel of the server, as well as DMing myself on FB messenger. Closes #116, (hopefully) closes #194.

mattxwang · 2021-08-29T06:43:13Z

Submitted design QA: https://trello.com/c/9fU9NGn0/372-qa-approval-acm-jedi-website-pages

mattxwang · 2021-09-04T20:54:55Z

Looking to get a general review on what we have here right now. I'd err more on reviewing the coding style / separation of components, rather than tinier elements of the design - Design will be handling that portion in their QA.

Things that aren't done yet:

general design QA request
front banner image from Design - currently waiting on design req
list of JEDIs
list of JEDI events
putting this into the navbar; going to use Vincent & Tanaya's changes as a blueprint for this

evanzhong

Looking good! Most of my review left as comments as usual.

Will do another pass after QA comes back and changes made for that, but barring that looks good to ship.

evanzhong · 2021-09-05T04:26:31Z

components/JEDI/AllyshipSpaceCard.js

+ * creates an allyship space card from input parameters, using
+ * next/image and next/link
+ */
+function AllyshipSpaceCard({ title, date, location, description, pic, alt, rsvp, slides }) {


IIRC we have a component that's similar to this created for the techgala page called ProjectCard.

I know these two components are functionally different, but thoughts on if they're similar enough to warrant creating an "EventCard" component (like a super class of these two). Might be a good thing to do in preparation for the events page, which I imagine will leverage a similar layout as these.

I see what you're saying, though the styles are quite different on each card. On my end, I'm happy to keep them separate, but also interested to explore creating a generic Card that has a few configurable options (in this case, which side the image goes on, etc.). Just worried that then we'll get way too much required customization. What do you think?

I think what we can do here is leverage the children prop to get the customization we need. Then for the super class we'd just need to specify and image and where the text should flow (left, right, or below).

The hope is that we can have some generic css that will format the height and width of the children (usually just text) to flow with the image.

Sounds good to me, let's see if I can get that in relatively quickly for this change.

components/JEDI/JEDICard.js

components/JEDI/JEDINav.js

data/jedi.js

components/JEDI/JEDINav.js

evanzhong · 2021-09-06T20:55:41Z

Replied to comments.

One small thing I noticed is that we don't really have a way to nav to this page other than

Direct linking
Footer

Assuming we're going to have to get #246 in sometime so that we have navigation to all these new pages (#260, #222, plus dev team page) that are in flight.

mattxwang · 2021-09-07T02:25:46Z

Assuming we're going to have to get #246 in sometime so that we have navigation to all these new pages (#260, #222, plus dev team page) that are in flight.

Yup, I think I'll just open a separate PR for that once Vincent's approach (#253) get merged in! Tanaya had a neat addition to get the impact page to slot in nicely to the nav.

…i0SusGvfvPrKNUuAMjFd/JEDI-Website-Screenshot-Mockups\?node-id\=0%3A1

mattxwang · 2021-09-13T00:04:39Z

Just did the first pass of design QA suggestions; you can follow the conversation in the trello card. Still waiting on:

jedi banner image
officers info
index "what jedi does" info

Going to re-req a code review with a bias towards maintainability and design feedback. The generalized card is still in the back of my mind, though I may ask to punt it just due to the sheer number of tickets I need to work on right now.

evanzhong

Took a quick pass at the new commits since my last review, everything looks good to me.

Does design have anything specifically to say about the nav bar? (i.e. how it shifts from the left sidebar to the top)

evanzhong · 2021-09-14T22:53:02Z

pages/jedi/index.js

          <h1 className={styles['hero-title']}>ACM | JEDI</h1>
-          <p>justice, equity, diversity, inclusion</p>
+          <p className={styles['hero-subtitle']}>justice, equity, diversity, inclusion</p>


What does hero mean

Common SEO / marketing term for above-the-fold images & headers! Here's a spammy-ish article about it.

evanzhong · 2021-09-14T22:53:27Z

pages/jedi/meet.js

+import {
+  faDiscord,
+  faSlack,
+} from '@fortawesome/free-brands-svg-icons';


Have we ported over all the other icons we use in the website to use font awesome?

mattxwang · 2021-09-14T23:29:45Z

Does design have anything specifically to say about the nav bar? (i.e. how it shifts from the left sidebar to the top)

As-is, Amy was satisfied with it - she did want me to increase the spacing and consider adding an image!

mattxwang · 2021-09-16T00:20:24Z

Going to merge now; Crystal is hitting us with QA after-the-fact.

skeletoning out wireframe

1d70eb8

mattxwang marked this pull request as draft August 11, 2021 00:51

mattxwang added 5 commits August 14, 2021 19:00

implements minor style changes following call w/ helia

ad26f65

moves data and components to their own files

5b54fac

implements horizontal nav, moves blog to data constant

085b61e

moves email to const

7b8bccf

adds temp jedi banner

b2d289f

mattxwang mentioned this pull request Aug 18, 2021

per-page SEO (meta tags, opengraph) via next-seo #244

Merged

mattxwang added 4 commits August 25, 2021 23:56

Merge branch 'main' into jedi-page

b57eef3

implements first draft of content

822d2eb

Merge branch 'main' into jedi-page

b0a9e00

adds SEO to JEDI pages

c1abb93

mattxwang added 5 commits August 28, 2021 23:46

impl. contact

b5bd8b3

axe passthrough

d005760

Merge branch 'main' into jedi-page

124b8b1

adds JEDI to the new Initiatives category in Footer

07cd39f

mobile spacing passover

c89c030

mattxwang added the high-priority needs to get done relatively quickly; blocks other work label Sep 4, 2021

mattxwang marked this pull request as ready for review September 4, 2021 20:53

mattxwang requested a review from a team September 4, 2021 20:53

evanzhong reviewed Sep 5, 2021

View reviewed changes

mattxwang added 2 commits September 6, 2021 19:28

explicitly sets ext: false for JEDINav.js

b28b2e2

opens JEDI blog in new tab on index nav

defc68e

mattxwang mentioned this pull request Sep 7, 2021

Create a unified "Officer" card #264

Closed

mattxwang added 4 commits September 8, 2021 00:58

adds past allyship spaces, adds presenter field, loads some images

b1076cb

adds the rest of images + alt text!

6f2e714

styling tweaks from amy's feedback; see https://www.figma.com/file/D4…

5293e3b

…i0SusGvfvPrKNUuAMjFd/JEDI-Website-Screenshot-Mockups\?node-id\=0%3A1

fixes google fonts tuple ordering

476b45c

mattxwang requested a review from evanzhong September 13, 2021 00:04

evanzhong approved these changes Sep 14, 2021

View reviewed changes

mattxwang added 5 commits September 15, 2021 16:16

template team names

79edce0

change link behaviour to hover-underline, and use on allyship cards

be4b121

adds spacing

d5c9607

adds final events, adjusts spacing

6b51a2f

adds image priority to above the fold

65c0df1

mattxwang merged commit 76e86ff into main Sep 16, 2021

mattxwang deleted the jedi-page branch September 16, 2021 00:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JEDI Page #235

JEDI Page #235

mattxwang commented Aug 11, 2021 •

edited by ArvinDing

Loading

mattxwang commented Aug 11, 2021

evanzhong commented Aug 16, 2021

mattxwang commented Aug 19, 2021 •

edited

Loading

mattxwang commented Aug 29, 2021

mattxwang commented Sep 4, 2021

evanzhong left a comment

evanzhong Sep 5, 2021

mattxwang Sep 6, 2021

evanzhong Sep 6, 2021

mattxwang Sep 7, 2021

evanzhong commented Sep 6, 2021

mattxwang commented Sep 7, 2021

mattxwang commented Sep 13, 2021

evanzhong left a comment

evanzhong Sep 14, 2021

mattxwang Sep 14, 2021

evanzhong Sep 14, 2021

mattxwang Sep 14, 2021

mattxwang commented Sep 14, 2021

mattxwang commented Sep 16, 2021

JEDI Page #235

JEDI Page #235

Conversation

mattxwang commented Aug 11, 2021 • edited by ArvinDing Loading

mattxwang commented Aug 11, 2021

evanzhong commented Aug 16, 2021

mattxwang commented Aug 19, 2021 • edited Loading

mattxwang commented Aug 29, 2021

mattxwang commented Sep 4, 2021

evanzhong left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

evanzhong commented Sep 6, 2021

mattxwang commented Sep 7, 2021

mattxwang commented Sep 13, 2021

evanzhong left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mattxwang commented Sep 14, 2021

mattxwang commented Sep 16, 2021

mattxwang commented Aug 11, 2021 •

edited by ArvinDing

Loading

mattxwang commented Aug 19, 2021 •

edited

Loading