introduce several fixes within the nodejs.dev (styles, links, caching, functionality) by ovflowd · Pull Request #2654 · nodejs/nodejs.dev

ovflowd · 2022-08-18T19:30:29Z

Check List

I have read the Contributing Guidelines and made commit messages that follow the guideline.
I have run npm run lint:js -- --fix and/or npm run lint:md -- --fix for my JavaScript and/or Markdown changes.
- This is important as most of the cases your code changes might not be correctly linted
I have run npm run test to check if all tests are passing, and/or npm run test -- -u to update snapshots if I created and/or updated React Components.
I have checked that the build works locally and that npm run build work fine.
I've covered new added functionality with unit tests if necessary.

Description

This PR updates several styles to match the Figmas, and fixes several design and functionality related bugs.

Fix the height and styling of the primary and secondary Navigation
Made the Learn menu to look like the Figmas
Made the Footer look like in the Figmas
Fixed Footer and Navigation styles on Mobile
Fixed Paddings of several components according to Figmas
Simplified logic for scrolling on Learn
Added feature for toggling menu sections from Learn
Fixed Download page designs on mobile and Desktop
Fixed scrollbars for light/dark theme
Removed hacky window reliant previousSlug and scrollTo utility
Created more Learn categories (Temporary ones, that can be tidied afterwards)
Fix the height of the main navigation bar being too big
Fixes the Search Input links being broken
Fixes some Learn pages being broken due to createMarkdownPages relativePath utility using endsWith instead of includes
Adds preaching configuration for the pages
Introduced Side Navigation for Blogs
Redesigned Blog Page and Category Page
Fixed the Homepage Node Demo colours
Conditional Service Worker based on if it is not a Staging Page

Screenshots

Related Issues

Closes https://github.com/nodejs/nodejs.dev/issues/854
Relates to https://github.com/nodejs/nodejs.dev/issues/950
Closes https://github.com/nodejs/nodejs.dev/issues/2661

github-actions · 2022-08-18T19:43:22Z

Please find a preview at: https://staging.nodejs.dev/2654/

github-actions · 2022-08-18T20:48:32Z

Please find a preview at: https://staging.nodejs.dev/2654/

codecov-commenter · 2022-08-18T22:15:36Z

Codecov Report

Merging #2654 (085b999) into main (f22e637) will increase coverage by 2.90%.
The diff coverage is 94.11%.

@@            Coverage Diff             @@
##             main    #2654      +/-   ##
==========================================
+ Coverage   83.46%   86.37%   +2.90%     
==========================================
  Files         103      102       -1     
  Lines        1113     1064      -49     
  Branches      310      293      -17     
==========================================
- Hits          929      919      -10     
+ Misses        178      139      -39     
  Partials        6        6

Impacted Files	Coverage Δ
src/components/Footer/index.tsx	`100.00% <ø> (ø)`
src/components/SearchBar/SearchInput.tsx	`57.14% <ø> (ø)`
src/pages/style-guide.tsx	`100.00% <ø> (ø)`
src/templates/blogCategory.tsx	`0.00% <0.00%> (ø)`
src/components/Article/index.tsx	`92.10% <100.00%> (ø)`
src/components/Header/index.tsx	`95.65% <100.00%> (+0.65%)`	⬆️
src/components/Layout/article.tsx	`100.00% <100.00%> (ø)`
src/components/NavigationSection/index.tsx	`100.00% <100.00%> (ø)`
src/components/SideNavBar/index.tsx	`100.00% <100.00%> (ø)`
src/components/Toc/index.tsx	`100.00% <100.00%> (ø)`
... and 4 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

github-actions · 2022-08-18T22:17:33Z

Please find a preview at: https://staging.nodejs.dev/2654/

github-actions · 2022-08-19T21:25:30Z

Please find a preview at: https://staging.nodejs.dev/2654/

…lity changes

…s not needed anymore

ovflowd · 2022-08-21T10:51:48Z

@benhalverson could I get a review here? This PR also fixes the failure on your PR (#2650)

ovflowd · 2022-08-21T11:21:07Z

@nodejs/nodejs-dev could I pretty please get a review here?

ovflowd · 2022-08-21T11:29:30Z

    }
  };

-  useEffect(() => {


There's no need to scroll anymore as the Navigation items are togglable now, and this logic was not 100% functional and hacky.

ovflowd · 2022-08-21T11:30:01Z


  const [theme, toggleTheme] = useTheme();

+  useEffect(() => {


This is used to make the scroll-bar colors match with the current applied theme

ovflowd · 2022-08-21T11:30:28Z


      &--selected {
-        background: var(--black9);
+        background: var(--black10);


This reverts the changes done on the Install Node.js demo on the Homepage to how it was supposed to be (Figmas).

ovflowd · 2022-08-21T11:31:50Z

 };

-const Blog = ({ data: { posts } }: Props): JSX.Element => (
+export const getNavigationData = (


This transforms the blog categories into data that the SideNavBar Component can use. It could also reside in a different file, like utils but I have no strong opinions here.

ovflowd · 2022-08-21T11:32:07Z


 .article-reader {
-  padding: var(--space-24);
+  padding: var(--space-80) 0 0 var(--space-128);


This makes the paddings respect the Figma designs.

ovflowd · 2022-08-21T11:32:31Z

-  }
-}
-
-@media (max-width: 800px) {


Moved all mobile styles to mobile.scss to ensure "uniformity"

ovflowd · 2022-08-21T11:32:54Z

    }

    &--done::before {
-      content: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ0OC44IDQ0OC44IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NDguOCA0NDguODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnIGlkPSJjaGVjayI+CgkJPHBvbHlnb24gcG9pbnRzPSIxNDIuOCwzMjMuODUgMzUuNywyMTYuNzUgMCwyNTIuNDUgMTQyLjgsMzk1LjI1IDQ0OC44LDg5LjI1IDQxMy4xLDUzLjU1ICAgIiBmaWxsPSIjZjVmNmY3Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==');


Use Material Icons instead of a huge inline SVG

github-actions · 2022-08-21T23:40:25Z

Please find a preview at: https://staging.nodejs.dev/2654/

benhalverson · 2022-08-21T23:42:44Z

I like it. My only ask is you bring back the github icon in the top right corner with the link going back directly to this github repo. The one at the bottom goes to nodejs/node

ovflowd · 2022-08-21T23:47:08Z

I like it. My only ask is you bring back the github icon in the top right corner with the link going back directly to this github repo.

Gotcha, I removed it because the Figmas don't have it, and Material Icons also don't have any GitHub Icon, and I thought that (maybe it makes sense) to just use Material Icons.

I would actually (honestly) expect for Node.js the GitHub link to go to either nodejs/node or just the nodejs org. WDYT?

benhalverson · 2022-08-21T23:55:30Z

The design was never set in stone so we don't have to make it exactly like the figma. I thought the same when I first joined. 👍🏻
I think the top right should go here nodejs/nodejs.dev and the bottom right can goto nodejs/node.

If I wanted to contribute to this site and it sent me to the nodejs.org repo I'd be confused about why the code and what I'm looking at don't match.

ovflowd · 2022-08-21T23:58:55Z

If I wanted to contribute to this site and it sent me to the nodejs.org repo I'd be confused about why the code and what I'm looking at don't match.

The thing is that the nodejs website should be about node.js, no? Any of the actual document (docs, learn) pages have the "edit this page in github" whose would redirect you there.

The design was never set in stone so we don't have to make it exactly like the figma.

True thing.

Well, I'm okay with reading the GitHub icon, but that one was low-res. Gonna grab one from here

ovflowd requested review from benhalverson and rodion-arr August 18, 2022 19:30

ovflowd added enhancement New feature or request docs create-preview Generate preview on staging.nodejs.dev labels Aug 18, 2022

github-actions Bot removed the create-preview Generate preview on staging.nodejs.dev label Aug 18, 2022

ovflowd added the create-preview Generate preview on staging.nodejs.dev label Aug 18, 2022

github-actions Bot removed the create-preview Generate preview on staging.nodejs.dev label Aug 18, 2022

ovflowd changed the title ~~refactor(styles): massive updated styles to figmas and some functionality changes~~ introduce several fixes within the nodejs.dev (styles, links, caching, functionality) Aug 18, 2022

ovflowd added the create-preview Generate preview on staging.nodejs.dev label Aug 18, 2022

github-actions Bot removed the create-preview Generate preview on staging.nodejs.dev label Aug 18, 2022

ovflowd added the blog Issues & Discussions regarding the Blog part of the Website label Aug 19, 2022

miffili mentioned this pull request Aug 19, 2022

Fix/broken links in learn quick start #2657

Merged

5 tasks

ovflowd added the create-preview Generate preview on staging.nodejs.dev label Aug 19, 2022

github-actions Bot removed the create-preview Generate preview on staging.nodejs.dev label Aug 19, 2022

ovflowd added 7 commits August 21, 2022 12:49

refactor(styles): massive updated styles to figmas and some functiona…

fae3a2e

…lity changes

refactor(scroll): removed scroll-to as with togglable sections this i…

1f08ce6

…s not needed anymore

chore(styles): more style fixes

321f764

fix(links-caching): fixed links and precaching

7dd2d21

refactor(redesing): updated blog styles, links, side nav bar and more

914055e

chore(test): updated tests

fcaf4f1

fix(a11y): fixed role for tab

b9fd65c

ovflowd force-pushed the refactor/styles branch from d9ca829 to b9fd65c Compare August 21, 2022 10:51

ovflowd mentioned this pull request Aug 21, 2022

feat(react-intl): added localization keys for all entries #2634

Merged

5 tasks

chore(tests): updated snapshots and relinted files

0ad5bae

ovflowd commented Aug 21, 2022

View reviewed changes

Merge branch 'main' into refactor/styles

b915b66

benhalverson added the create-preview Generate preview on staging.nodejs.dev label Aug 21, 2022

github-actions Bot removed the create-preview Generate preview on staging.nodejs.dev label Aug 21, 2022

benhalverson approved these changes Aug 21, 2022

View reviewed changes

ovflowd added 3 commits August 22, 2022 14:57

fix(design): finished design changes and bug fixes

0ca85f2

fix(design): minor nav mobile fixes

eb8d4c3

fix(prettier): forgot to run prettier

085b999

ovflowd merged commit 8f2e959 into nodejs:main Aug 22, 2022

ovflowd deleted the refactor/styles branch August 22, 2022 13:21

ovflowd mentioned this pull request Aug 22, 2022

fix(search-bar): fixed search bar styling and made it exclusive to search-bar #2665

Merged

5 tasks

Conversation

ovflowd commented Aug 18, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Check List

Description

Screenshots

Related Issues

Uh oh!

github-actions Bot commented Aug 18, 2022

Uh oh!

github-actions Bot commented Aug 18, 2022

Uh oh!

codecov-commenter commented Aug 18, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions Bot commented Aug 18, 2022

Uh oh!

github-actions Bot commented Aug 19, 2022

Uh oh!

ovflowd commented Aug 21, 2022

Uh oh!

ovflowd commented Aug 21, 2022

Uh oh!

ovflowd Aug 21, 2022

Choose a reason for hiding this comment

Uh oh!

ovflowd Aug 21, 2022

Choose a reason for hiding this comment

Uh oh!

ovflowd Aug 21, 2022

Choose a reason for hiding this comment

Uh oh!

ovflowd Aug 21, 2022

Choose a reason for hiding this comment

Uh oh!

ovflowd Aug 21, 2022

Choose a reason for hiding this comment

Uh oh!

ovflowd Aug 21, 2022

Choose a reason for hiding this comment

Uh oh!

ovflowd Aug 21, 2022

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Aug 21, 2022

Uh oh!

benhalverson commented Aug 21, 2022

Uh oh!

ovflowd commented Aug 21, 2022

Uh oh!

benhalverson commented Aug 21, 2022

Uh oh!

ovflowd commented Aug 21, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ovflowd commented Aug 18, 2022 •

edited

Loading

codecov-commenter commented Aug 18, 2022 •

edited

Loading