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

introduce several fixes within the nodejs.dev (styles, links, caching, functionality) #2654

Merged
ovflowd merged 12 commits into from
Aug 22, 2022
Merged

introduce several fixes within the nodejs.dev (styles, links, caching, functionality) #2654

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
fae3a2e
refactor(styles): massive updated styles to figmas and some functiona…
ovflowd Aug 18, 2022
1f08ce6
refactor(scroll): removed scroll-to as with togglable sections this i…
ovflowd Aug 18, 2022
321f764
chore(styles): more style fixes
ovflowd Aug 18, 2022
7dd2d21
fix(links-caching): fixed links and precaching
ovflowd Aug 18, 2022
914055e
refactor(redesing): updated blog styles, links, side nav bar and more
ovflowd Aug 19, 2022
fcaf4f1
chore(test): updated tests
ovflowd Aug 19, 2022
b9fd65c
fix(a11y): fixed role for tab
ovflowd Aug 21, 2022
0ad5bae
chore(tests): updated snapshots and relinted files
ovflowd Aug 21, 2022
b915b66
Merge branch 'main' into refactor/styles
benhalverson Aug 21, 2022
0ca85f2
fix(design): finished design changes and bug fixes
ovflowd Aug 22, 2022
eb8d4c3
fix(design): minor nav mobile fixes
ovflowd Aug 22, 2022
085b999
fix(prettier): forgot to run prettier
ovflowd Aug 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 1 addition & 13 deletions gatsby-browser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,7 @@ import ReactIntlProvider from './src/containers/ReactIntl';
import { defaultLanguage, defaultMessages } from './util-node/locales';
import type { WrapPageElementBrowser } from './src/types';

declare global {
interface Window {
locations: string[];
previousPath: string;
}
}

export const onRouteUpdate = () => {
window.locations = window.locations || [document.referrer];
window.locations.push(window.location.href);
window.previousPath = window.locations[window.locations.length - 1];
};

// eslint-disable-next-line import/prefer-default-export
export const wrapPageElement: WrapPageElementBrowser = ({ element, props }) => {
const { locale = defaultLanguage, intlMessages = defaultMessages } =
props.pageContext;
Expand Down
34 changes: 25 additions & 9 deletions gatsby-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ require('dotenv').config();
const config = require('./src/config.json');
const { localesAsString, defaultLanguage } = require('./util-node/locales');

module.exports = {
const gatsbyConfig = {
pathPrefix: process.env.PATH_PREFIX,
siteMetadata: {
title: config.title,
Expand Down Expand Up @@ -169,13 +169,29 @@ module.exports = {
},
'gatsby-plugin-sitemap',
'gatsby-plugin-meta-redirect',
{
// This is a temporary solution until (https://github.com/gatsbyjs/gatsby/pull/31542) gets merged
// So we are able to use the official service worker again. This service worker supports latest Workbox
resolve: 'gatsby-plugin-offline-next',
options: {
globPatterns: ['**/icon-path*'],
},
},
],
};

// Note.: This implementation doesn't work with pathPrefixes (eg.: our staging pages)
// Which means, that the staging pages will not benefit from a SW
// It also makes sense to not use SW on Staging Pages as we want to keep testing them from time-to-time
// This will still work when building & serving gatsby locally
if (!gatsbyConfig.pathPrefix) {
gatsbyConfig.plugins.push({
// This is a temporary solution until (https://github.com/gatsbyjs/gatsby/pull/31542) gets merged
// So we are able to use the official service worker again. This service worker supports latest Workbox
resolve: 'gatsby-plugin-offline-next',
options: {
precachePages: [
'/',
'/*/learn/*',
'/*/about/*',
'/*/download/*',
'/*/blog/*',
],
globPatterns: ['**/icon-path*'],
},
});
}

module.exports = gatsbyConfig;
81 changes: 0 additions & 81 deletions src/components/Article/__tests__/__snapshots__/article.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,33 +10,6 @@ exports[`Article component renders correctly 1`] = `
>
test-title
</h1>
<details
class="toc"
>
<summary>
<h6>
TABLE OF CONTENTS
</h6>
</summary>
<ul
class="tableOfContents"
>
<li>
<a
href="#mock-title"
>
mock-title
</a>
</li>
<li>
<a
href="#mock-title-2"
>
mock-title-2
</a>
</li>
</ul>
</details>
<div>
<p>
Node.js can be installed in different ways. This post highlights the most common and convenient ones.
Expand Down Expand Up @@ -255,33 +228,6 @@ exports[`Article component renders correctly in case body ref is null 1`] = `
>
test-title
</h1>
<details
class="toc"
>
<summary>
<h6>
TABLE OF CONTENTS
</h6>
</summary>
<ul
class="tableOfContents"
>
<li>
<a
href="#mock-title"
>
mock-title
</a>
</li>
<li>
<a
href="#mock-title-2"
>
mock-title-2
</a>
</li>
</ul>
</details>
<div>
<p>
Node.js can be installed in different ways. This post highlights the most common and convenient ones.
Expand Down Expand Up @@ -428,33 +374,6 @@ exports[`Article component should accept and render child components 1`] = `
>
test-title
</h1>
<details
class="toc"
>
<summary>
<h6>
TABLE OF CONTENTS
</h6>
</summary>
<ul
class="tableOfContents"
>
<li>
<a
href="#mock-title"
>
mock-title
</a>
</li>
<li>
<a
href="#mock-title-2"
>
mock-title-2
</a>
</li>
</ul>
</details>
<div>
<p>
Node.js can be installed in different ways. This post highlights the most common and convenient ones.
Expand Down
10 changes: 4 additions & 6 deletions src/components/Article/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useRef } from 'react';
import { throttle } from 'throttle-debounce';
import { MDXRenderer } from 'gatsby-plugin-mdx';
import { MDXProvider } from '@mdx-js/react';
Expand Down Expand Up @@ -43,15 +43,13 @@ const Article = ({
date,
children,
}: Props): JSX.Element => {
const element = React.useRef<HTMLDivElement>(null);
const element = useRef<HTMLDivElement>(null);

React.useEffect((): (() => void) => {
useEffect((): (() => void) => {
const currentElementRef = element;

if (window.history.state && window.history.state.articleScrollTo) {
window.scrollTo({
top: window.history.state.articleScrollTo,
});
window.scrollTo({ top: window.history.state.articleScrollTo });
}

const handleObserverThrottled = throttle(
Expand Down
2 changes: 1 addition & 1 deletion src/components/BlogCard/BlogCard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.blog-card {
display: flex;
flex-direction: column;
padding: 40px 30px;
padding: 40px 30px 40px 0;

.title {
background-color: var(--color-blog-card-background);
Expand Down
4 changes: 2 additions & 2 deletions src/components/DownloadAdditional/DownloadAdditional.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ $downloadable-item-height: 40px;
width: 100%;

&__header {
align-items: center;
display: flex;
justify-content: space-between;

Expand All @@ -15,8 +16,7 @@ $downloadable-item-height: 40px;
}

&__title {
font-size: var(--font-size-display5);
line-height: var(--line-height-display4);
margin: 0;
}

&__body {
Expand Down
6 changes: 0 additions & 6 deletions src/components/DownloadReleases/DownloadReleases.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,3 @@
line-height: var(--line-height-display4);
margin: 126px 0 50px;
}

.lts__text {
font-size: var(--font-size-display5);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-body1);
}
2 changes: 1 addition & 1 deletion src/components/Footer/__tests__/__snapshots__/footer.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ exports[`Tests for Footer component renders correctly 1`] = `
<li>
<a
class="footer__link"
href="https://nodejs.org/en/blog/"
href="/blog"
>
Blog
</a>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Footer/footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.footer {
display: flex;
flex-wrap: wrap;
justify-content: center;
justify-content: space-between;
margin: 0;
margin-top: auto;

Expand Down Expand Up @@ -60,7 +60,7 @@
> li:first-of-type {
border-right: none;
margin-right: 0;
padding-right: 0;
padding: 6px 0;
}
}

Expand Down
5 changes: 2 additions & 3 deletions src/components/Footer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,9 @@ const Footer = (): JSX.Element => {
</Link>
</li>
<li>
{/* @TODO: Once our Blog components are completely read, move this link to our Blog page */}
<a className="footer__link" href="https://nodejs.org/en/blog/">
<Link className="footer__link" to="/blog">
Blog
</a>
</Link>
</li>
</ul>
<ul className="footer__right">
Expand Down
67 changes: 61 additions & 6 deletions src/components/Header/__tests__/__snapshots__/header.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,12 +90,11 @@ exports[`Tests for Header component Theme color switcher skips rendering in case
</span>
<div
class="searchBarContainer"
style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
>
<div
class="searchInputContainer"
role="button"
tabindex="0"
role="presentation"
>
<i
class="material-icons searchIcon"
Expand Down Expand Up @@ -144,6 +143,25 @@ exports[`Tests for Header component Theme color switcher skips rendering in case
</i>
</button>
</li>
<li
class="nav__tabs"
>
<a
href="https://github.com/nodejs/nodejs.dev"
rel="noopener noreferrer"
target="_blank"
>
<span
class="sr-only"
>
GitHub
</span>
<svg
fill="var(--color-text-accent)"
style="padding: 1rem; width: 2rem; height: 2rem;"
/>
</a>
</li>
</ul>
</div>
</div>
Expand Down Expand Up @@ -241,12 +259,11 @@ exports[`Tests for Header component renders correctly 1`] = `
</span>
<div
class="searchBarContainer"
style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
>
<div
class="searchInputContainer"
role="button"
tabindex="0"
role="presentation"
>
<i
class="material-icons searchIcon"
Expand Down Expand Up @@ -295,6 +312,25 @@ exports[`Tests for Header component renders correctly 1`] = `
</i>
</button>
</li>
<li
class="nav__tabs"
>
<a
href="https://github.com/nodejs/nodejs.dev"
rel="noopener noreferrer"
target="_blank"
>
<span
class="sr-only"
>
GitHub
</span>
<svg
fill="var(--color-text-accent)"
style="padding: 1rem; width: 2rem; height: 2rem;"
/>
</a>
</li>
</ul>
</div>
</div>
Expand Down Expand Up @@ -406,6 +442,25 @@ exports[`Tests for Header component renders shorter menu items for mobile 1`] =
</i>
</button>
</li>
<li
class="nav__tabs"
>
<a
href="https://github.com/nodejs/nodejs.dev"
rel="noopener noreferrer"
target="_blank"
>
<span
class="sr-only"
>
GitHub
</span>
<svg
fill="var(--color-text-accent)"
style="padding: 1rem; width: 2rem; height: 2rem;"
/>
</a>
</li>
</ul>
</div>
</div>
Expand Down
Loading