Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

Commit 769f8be

Browse files
NikolasMeluiNikolasMelui
authored
Merge branch 'master' into master
2 parents bf280ea + 067fa7a commit 769f8be

6 files changed

Lines changed: 167 additions & 78 deletions

File tree

‎README.md‎

Lines changed: 48 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<br>
2323
</p>
2424

25-
**You can find the latest [Figma design protype here](https://www.figma.com/proto/lOxAGGg5KXb6nwie7zXkz6/NJ---Design-System?node-id=3546%3A12092&viewport=-232%2C-1378%2C0.21998274326324463&scaling=min-zoom).**
25+
**You can find the latest [Figma design protype here](https://www.figma.com/file/lOxAGGg5KXb6nwie7zXkz6/NJ---Design-System?node-id=22%3A6086).**
2626

2727
## 🚀 Get Started
2828

@@ -137,24 +137,53 @@ Our current focus is on site development. Development is happening in the [nodej
137137

138138
### Team
139139

140-
**[@nodejs/website-redesign](https://github.com/nodejs/website-redesign)**
141-
142140
Any person who wants to contribute to the initiative is welcome! Please read
143141
[Contributing Guidelines][] and join the effort 🙌.
144142

145-
Any member of the website-redesign initiative attached to the current phase of
146-
the project will be added to a future phase as the project moves forward.
147-
148-
Any member of the website-redesign initiative who prefers to begin contributing
149-
at a specific future phase is welcome to make a PR adding their handle to that
150-
phase.
151-
152-
- [@amiller-gh](https://github.com/amiller-gh) - **Adam Miller**, CommComm
153-
Co-champion
154-
- [@chowdhurian](https://github.com/chowdhurian) - **Manil Chowdhury**, CommComm
155-
Co-champion
156-
157-
#### Information Gathering
143+
This repo is managed by the nodejs.dev. Members of the nodejs website team
144+
also have commiter rights on the repo.
145+
146+
#### The nodejs.dev team
147+
148+
<!-- ncu-team-sync.team(nodejs/nodejs-dev) -->
149+
150+
- [@ahmadawais](https://github.com/ahmadawais) - Ahmad Awais ⚡️
151+
- [@alexandrtovmach](https://github.com/alexandrtovmach) - Alexandr Tovmach
152+
- [@amiller-gh](https://github.com/amiller-gh) - Adam Miller
153+
- [@argyleink](https://github.com/argyleink) - Adam Argyle
154+
- [@benhalverson](https://github.com/benhalverson) - Ben Halverson
155+
- [@BeniCheni](https://github.com/BeniCheni) - Benjamin Chen
156+
- [@codeekage](https://github.com/codeekage) - Abraham Jr. Agiri
157+
- [@darcyclarke](https://github.com/darcyclarke) - Darcy Clarke
158+
- [@designMoreWeb](https://github.com/designMoreWeb) - Divy Tolia
159+
- [@imbhargav5](https://github.com/imbhargav5) - Bhargav Ponnapalli
160+
- [@jonchurch](https://github.com/jonchurch) - Jonathan Church
161+
- [@kasicka](https://github.com/kasicka) - Zuzana Svetlíková
162+
- [@keywordnew](https://github.com/keywordnew) - Manil Chowdhury
163+
- [@LaRuaNa](https://github.com/LaRuaNa) - Onur Laru
164+
- [@maddhruv](https://github.com/maddhruv) - Dhruv Jain
165+
- [@mbj36](https://github.com/mbj36) - Mohit kumar Bajoria
166+
- [@MylesBorins](https://github.com/MylesBorins) - Myles Borins
167+
- [@ogonzal87](https://github.com/ogonzal87) - Oscar Gonzalez
168+
- [@ollelauribostrom](https://github.com/ollelauribostrom) - Olle Lauri Boström
169+
- [@pierreneter](https://github.com/pierreneter)
170+
- [@sagirk](https://github.com/sagirk) - Sagir Khan
171+
- [@saulonunesdev](https://github.com/saulonunesdev) - Saulo Nunes
172+
- [@skllcrn](https://github.com/skllcrn) - Christopher
173+
- [@SMotaal](https://github.com/SMotaal) - Saleh Abdel Motaal
174+
- [@timothyis](https://github.com/timothyis) - Timothy
175+
- [@tstreamDOTh](https://github.com/tstreamDOTh) - T Thiyagaraj
176+
- [@ZYSzys](https://github.com/ZYSzys) - ZYSzys
177+
178+
<!-- ncu-team-sync end -->
179+
180+
#### The Website Redesign Teams
181+
182+
This repo originated as "The Website Redesign" strategic initiative under
183+
the Node.js Community Community. Below are various teams and people that
184+
participated in that process.
185+
186+
##### Information Gathering
158187

159188
- [@amiller-gh](https://github.com/amiller-gh) - **Adam Miller**
160189
- [@codeekage](https://github.com/codeekage) - **Agiri Abraham JNR**
@@ -167,7 +196,7 @@ phase.
167196
- [@bnb](https://github.com/bnb) - **Tierney Cyren**
168197
- [@timothyis](https://github.com/timothyis) - **Timothy**
169198

170-
#### IA / UX Planning
199+
##### IA / UX Planning
171200

172201
- [@oe](https://github.com/oe) - **Olivia Hugger**
173202
- [@fhemberger](https://github.com/fhemberger) - **Frederic Hemberger**
@@ -187,7 +216,7 @@ phase.
187216
- [@milapbhojak](https://github.com/milapbhojak) - **Milap Bhojak**
188217
- [@devamaz](https://github.com/devamaz) - **Ahmad Abdul-Aziz**
189218

190-
#### UI Design and Content Creation
219+
##### UI Design and Content Creation
191220

192221
- [@amiller-gh](https://github.com/amiller-gh) - **Adam Miller**
193222
- [@bnb](https://github.com/bnb) - **Tierney Cyren**
@@ -201,7 +230,7 @@ phase.
201230
- [@AliObaji](https://github.com/AliObaji) - **Ali Obaji**
202231
- [@AhmadAwais](https://github.com/AhmadAwais) - **AhmadAwais**
203232

204-
#### Site Development _<-- current phase_
233+
##### Site Development
205234

206235
- [@abiclub23](https://github.com/abiclub23) - **Abhi Tondepu**
207236
- [@ajay2507](https://github.com/ajay2507) - **Ajaykumar**

‎src/components/ReleaseTable/index.tsx‎

Lines changed: 46 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -7,51 +7,53 @@ interface Props {
77

88
const ReleaseTable = ({ releases }: Props): JSX.Element => {
99
return (
10-
<table>
11-
<thead>
12-
<tr>
13-
<td>Version</td>
14-
<td>LTS</td>
15-
<td>Date</td>
16-
<td>V8</td>
17-
<td>NPM</td>
18-
<td>ABI</td>
19-
<td>SHASUM</td>
20-
</tr>
21-
</thead>
22-
<tbody>
23-
{releases.map(
24-
({ version, date, npm, v8, lts }: ReleaseData): JSX.Element => {
25-
const majorVersion = version.substring(1).split('.')[0];
10+
<div className="overflow-horizontal-scroll">
11+
<table>
12+
<thead>
13+
<tr>
14+
<th>Version</th>
15+
<th>LTS</th>
16+
<th>Date</th>
17+
<th>V8</th>
18+
<th>NPM</th>
19+
<th>ABI</th>
20+
<th>SHASUM</th>
21+
</tr>
22+
</thead>
23+
<tbody>
24+
{releases.map(
25+
({ version, date, npm, v8, lts }: ReleaseData): JSX.Element => {
26+
const majorVersion = version.substring(1).split('.')[0];
2627

27-
return (
28-
<tr key={version}>
29-
<td>{version}</td>
30-
<td>{lts || ''}</td>
31-
<td>{date}</td>
32-
<td>{v8}</td>
33-
<td>{npm}</td>
34-
<td>ABI?</td>
35-
<td>
36-
<a
37-
href={`https://github.com/nodejs/node/blob/master/doc/changelogs/CHANGELOG_V${majorVersion}.md#${version.substring(
38-
1
39-
)}`}
40-
>
41-
Changelog
42-
</a>
43-
</td>
44-
<td>
45-
<a href={`https://nodejs.org/download/release/${version}/`}>
46-
Download
47-
</a>
48-
</td>
49-
</tr>
50-
);
51-
}
52-
)}
53-
</tbody>
54-
</table>
28+
return (
29+
<tr key={version}>
30+
<td>{version}</td>
31+
<td>{lts || ''}</td>
32+
<td>{date}</td>
33+
<td>{v8}</td>
34+
<td>{npm}</td>
35+
<td>ABI?</td>
36+
<td>
37+
<a
38+
href={`https://github.com/nodejs/node/blob/master/doc/changelogs/CHANGELOG_V${majorVersion}.md#${version.substring(
39+
1
40+
)}`}
41+
>
42+
Changelog
43+
</a>
44+
</td>
45+
<td>
46+
<a href={`https://nodejs.org/download/release/${version}/`}>
47+
Download
48+
</a>
49+
</td>
50+
</tr>
51+
);
52+
}
53+
)}
54+
</tbody>
55+
</table>
56+
</div>
5557
);
5658
};
5759

‎src/containers/Navigation/index.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState, useRef } from 'react';
22
import NavigationSection from '../../components/NavigationSection';
33
import { NavigationSectionData, NavigationSectionItem } from '../../types';
4-
import { isSmallScreen } from '../../util/isScreenWithinWidth';
4+
import { isMobileScreen } from '../../util/isScreenWithinWidth';
55
import { scrollTo, calcNavScrollParams } from '../../util/scrollTo';
66

77
interface Props {
@@ -16,12 +16,13 @@ const Navigation = ({ sections, currentSlug, label }: Props): JSX.Element => {
1616
const navElement = useRef<HTMLElement | null>(null);
1717
const toggle = (): void => setIsOpen(!isOpen);
1818
const onItemClick = (): void => {
19-
if (isSmallScreen()) {
19+
if (isMobileScreen()) {
2020
toggle();
2121
}
2222
};
23+
2324
const autoScroll = async (height: number): Promise<void> => {
24-
if (isOpen && !hasScrolled && navElement.current) {
25+
if ((isOpen || !isMobileScreen()) && !hasScrolled && navElement.current) {
2526
const { newScrollPos, scrollWindow, scrollTime } = calcNavScrollParams(
2627
height,
2728
navElement.current
@@ -61,17 +62,19 @@ const Navigation = ({ sections, currentSlug, label }: Props): JSX.Element => {
6162
<button type="button" className="side-nav__open" onClick={toggle}>
6263
Menu
6364
</button>
64-
{Object.keys(sections).map((sectionKey: string): JSX.Element[] => (
65-
<NavigationSection
66-
key={sectionKey}
67-
title={sectionKey}
68-
section={sections[sectionKey]}
69-
currentSlug={currentSlug}
70-
onItemClick={onItemClick}
71-
readSections={readSections}
72-
autoScroll={autoScroll}
73-
/>
74-
))}
65+
{Object.keys(sections).map(
66+
(sectionKey: string): JSX.Element => (
67+
<NavigationSection
68+
key={sectionKey}
69+
title={sectionKey}
70+
section={sections[sectionKey]}
71+
currentSlug={currentSlug}
72+
onItemClick={onItemClick}
73+
readSections={readSections}
74+
autoScroll={autoScroll}
75+
/>
76+
)
77+
)}
7578
</nav>
7679
);
7780
};

‎src/styles/article-reader.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,3 +109,6 @@
109109
margin: 4.2rem 0 0;
110110
}
111111
}
112+
.gatsby-highlight {
113+
display: grid;
114+
}

‎src/styles/layout.scss‎

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,39 @@ pre[class*='language-'] > code[class*='language-'] + h2 {
202202

203203
/* End: Syntax Highlight Overrides */
204204

205+
.overflow-horizontal-scroll {
206+
overflow-x: auto;
207+
}
208+
209+
table {
210+
border-collapse: collapse;
211+
width: 100%;
212+
}
213+
214+
thead {
215+
tr {
216+
th {
217+
padding: var(--space-32) var(--space-14) var(--space-16);
218+
}
219+
}
220+
}
221+
222+
tbody {
223+
tr {
224+
background-color: var(--black0);
225+
border-bottom: 1px solid #e2e3e7;
226+
227+
.dark-mode & {
228+
background: var(--color-fill-app);
229+
border-bottom: 1px solid var(--color-border-primary);
230+
}
231+
232+
td {
233+
padding: var(--space-32) var(--space-14) var(--space-16);
234+
}
235+
}
236+
}
237+
205238
select {
206239
appearance: none;
207240
padding: 0.4rem 2.4rem 0.4rem 0.8rem;
@@ -227,7 +260,9 @@ select {
227260

228261
.grid-container {
229262
display: grid;
230-
grid-template-columns: 28.8rem auto;
263+
@media (min-width: 800px) {
264+
grid-template-columns: 28.8rem auto;
265+
}
231266
}
232267

233268
:focus {
@@ -423,6 +458,22 @@ details {
423458
flex-flow: column;
424459
}
425460

461+
thead {
462+
tr {
463+
th {
464+
padding: var(--space-14) var(--space-12) var(--space-14);
465+
}
466+
}
467+
}
468+
469+
tbody {
470+
tr {
471+
td {
472+
padding: var(--space-14) var(--space-12) var(--space-14);
473+
}
474+
}
475+
}
476+
426477
.article-reader {
427478
margin-top: 100px;
428479
padding: 0 3rem;

‎src/styles/tokens.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ body {
124124
--space-08: 0.8rem;
125125
--space-10: 1rem;
126126
--space-12: 1.2rem;
127+
--space-14: 1.4rem;
127128
--space-16: 1.6rem;
128129
--space-20: 2rem;
129130
--space-24: 2.4rem;

0 commit comments

Comments
 (0)