Navbar #2

Create a Navbar and add it to _app.tsx to apply it to all pages.

Implement the dropdown for the Navbar as well.

It might be a good idea to use CSS position sticky for the Navbar

changed the description

Whoever is implementing this should build out both:

Desktop view:

Mobile view:

assigned to @a258wang

changed the description

Let's not change this yet.

requested review from @a3thakra

This should be in _app.css, and should be applied to all elements.

* {
  font-family: Poppins;
}

🤔 hmm....

The style element must be in the <head> tag. @a258wang is working on using fonts correctly for everyone #23

We should use the <article> tag over here, instead of a <div> because it's semantically better.

This is a heading, and we should be using semantic html tags. This looks like an h3 (Page heading (h1) -> News (h2) -> Date (h3)

Wrap this with a time tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time

Use the <address> tag to wrap author: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address

Use named exports instead.

Benefits:

Reduce typos while importing (eg: it's totally valid to do import NewsCrad from 'components/NewsCard', but notice that we accidentally misspelled NewsCard)
Tools can provide auto import suggestions

How to use named exports?

export const NewsCard .... on line 12. (preferred)
export {NewsCard}

The mobile version does not have a white background. Let's only change the background color in a media query.

Resources:

https://css-tricks.com/a-complete-guide-to-css-media-queries/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ (you don't need to add a media query for each and every device, so feel free to fix and match)

Use rem (and not px) for font size and spacing. 16px = 1rem.

This might work when props.children is a string, but let's not do this if props.children is a ReactElement.

#23 @a258wang is doing this.

Most of the comments are for using semantic html over generic elements. Good job overall!

added 5 commits

abf75af4 - 1 commit from branch main
5118b4b6 - Created NewsCard component w/ font/colour styling
6c6a126b - Style NewsCard + index.mdx
2f96f9dc - Change component to use props.children
73eb475b - Change component to use props.children

Compare with previous version

changed this line in version 3 of the diff

added 7 commits

73eb475b...efd9eecd - 3 commits from branch main
941e9103 - Created NewsCard component w/ font/colour styling
36ccadcf - Style NewsCard + index.mdx
18a4034b - Change component to use props.children
22b2a245 - Resolve Adi's comments

Compare with previous version

added 1 commit

aee54dc2 - Add news demo

Compare with previous version

added 1 commit

6da88cf7 - Fix module declarations

Compare with previous version

The address tag automatically changes the font-style to italic. We should change this back to normal to match design. font-style: normal;

  color: var(--purple-1);
  font-style: normal;

delete this entire file, it's not needed right now :)

LOL 😂

We're getting very close! I think we can merge it tomorrow/soon. 🎉

1 more thing: Make sure that the basename for the files ending with .module.css and .tsx is the exactly the same. It's more or a convention, than an error. (So you would name the files NewsCard.module.css and NewsCard.tsx - they are case sensitive)

git checkout main -- package.json package-lock.json to restore these two files.

changed this line in version 6 of the diff

added 1 commit

4b8de4e3 - Fix date error + clean code

Compare with previous version

added 1 commit

174a2802 - Apply 1 suggestion(s) to 1 file(s)

Compare with previous version

changed this line in version 8 of the diff

added 1 commit

20c23b95 - Apply 1 suggestion(s) to 1 file(s)

Compare with previous version

added 1 commit

121defb3 - Delete index.module.css + follow naming convention

Compare with previous version

changed this line in version 10 of the diff

added 1 commit

54026a4a - Rename newscard.module.css

Compare with previous version

        <time className={styles.date} datetime={date.toISOString()}>

From the usage notes:

If the element does not have a datetime attribute, it must not have any element descendants, and the datetime value is the element’s child text content.

changed this line in version 11 of the diff

added 1 commit

66c87fea - Apply 1 suggestion(s) to 1 file(s)

Compare with previous version

approved this merge request

added 1 commit

618e0239 - Fix attribute name on <time>

Compare with previous version

enabled an automatic merge when the pipeline for 618e02392b succeeds

marked this issue as related to #30

mentioned in merge request !32