Skip to content

Commit 4f2e905

Browse files
auxfixauxfix
committed
feat(website/nodejs#7443): add simple static layout
1 parent 0f2d52c commit 4f2e905

File tree

8 files changed

+506
-6
lines changed

8 files changed

+506
-6
lines changed

Diff for: ‎apps/site/components/withLayout.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import ArticlePageLayout from '@/layouts/ArticlePage';
55
import BlogLayout from '@/layouts/Blog';
66
import DefaultLayout from '@/layouts/Default';
77
import DownloadLayout from '@/layouts/Download';
8+
import DownloadSimpleLayout from '@/layouts/DownloadSimple';
9+
import DownloadSimpleStaticLayout from '@/layouts/DownloadSimpleStatic';
810
import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
911
import LearnLayout from '@/layouts/Learn';
1012
import PostLayout from '@/layouts/Post';
@@ -18,6 +20,8 @@ const layouts = {
1820
'blog-post': PostLayout,
1921
'blog-category': BlogLayout,
2022
download: DownloadLayout,
23+
'download-simple': DownloadSimpleLayout,
24+
'download-simple-static': DownloadSimpleStaticLayout,
2125
article: ArticlePageLayout,
2226
} satisfies Record<Layouts, FC>;
2327

Diff for: ‎apps/site/layouts/DownloadSimple.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import type { FC, PropsWithChildren } from 'react';
2+
3+
import { getClientContext } from '@/client-context';
4+
import WithFooter from '@/components/withFooter';
5+
import WithNavBar from '@/components/withNavBar';
6+
7+
import styles from './layouts.module.css';
8+
import '@/styles/simplified-download.css';
9+
10+
/**
11+
* This layout is designed to be completely static after build
12+
* It should not depend on client-side JavaScript to render
13+
* All data is fetched and rendered at build time only
14+
*/
15+
const DownloadSimpleLayout: FC<PropsWithChildren> = async ({ children }) => {
16+
// Get frontmatter data at build time only
17+
const { frontmatter } = getClientContext();
18+
19+
return (
20+
<>
21+
{/* These components should be static after the build */}
22+
<WithNavBar />
23+
24+
<div className={styles.downloadLayout}>
25+
<main>
26+
<h1>{frontmatter.title}</h1>
27+
{/* No client-side hydration needed for this content */}
28+
<div>{children}</div>
29+
</main>
30+
</div>
31+
32+
<WithFooter />
33+
</>
34+
);
35+
};
36+
37+
export default DownloadSimpleLayout;

Diff for: ‎apps/site/layouts/DownloadSimpleStatic.tsx

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import Link from 'next/link';
2+
import type { FC, PropsWithChildren } from 'react';
3+
4+
import { getClientContext } from '@/client-context';
5+
import '@/styles/simplified-download-static.css';
6+
7+
/**
8+
* This layout is designed to be completely static after build
9+
* It uses no client-side JavaScript components
10+
* All data is fetched and rendered at build time only
11+
*
12+
* Note: We're using Next.js Link components instead of HTML <a> tags
13+
* to satisfy the linter, but they'll be rendered as static links in the build
14+
*/
15+
const DownloadSimpleStaticLayout: FC<PropsWithChildren> = async ({
16+
children,
17+
}) => {
18+
// Get frontmatter data at build time only
19+
const { frontmatter } = getClientContext();
20+
21+
return (
22+
<div>
23+
{/* Static header with Next.js Link components */}
24+
<header>
25+
<div className="staticHeader">
26+
<h1 className="siteLogo">
27+
{/* Using Next.js Link to satisfy linter */}
28+
<Link href="/en">Node.js</Link>
29+
</h1>
30+
<nav>
31+
<ul>
32+
{/* Using Next.js Link components to satisfy linter */}
33+
<li>
34+
<Link href="/en/learn">Learn</Link>
35+
</li>
36+
<li>
37+
<Link href="/en/download">Download</Link>
38+
</li>
39+
<li>
40+
<Link href="/en/docs">Documentation</Link>
41+
</li>
42+
<li>
43+
<Link href="/en/community">Community</Link>
44+
</li>
45+
</ul>
46+
</nav>
47+
</div>
48+
</header>
49+
50+
<div className="staticMainContent">
51+
<main>
52+
<h1>{frontmatter.title}</h1>
53+
{/* No client-side hydration needed for this content */}
54+
<div>{children}</div>
55+
</main>
56+
</div>
57+
58+
{/* Static footer with Next.js Link components */}
59+
<footer className="staticFooter">
60+
<div>
61+
<p>© OpenJS Foundation. All Rights Reserved.</p>
62+
<ul>
63+
{/* Using Next.js Link components to satisfy linter */}
64+
<li>
65+
<Link href="/en/about/trademark">Trademark Policy</Link>
66+
</li>
67+
<li>
68+
<Link href="/en/about/privacy">Privacy Policy</Link>
69+
</li>
70+
<li>
71+
<a href="https://github.com/nodejs/node">GitHub</a>
72+
</li>
73+
</ul>
74+
</div>
75+
</footer>
76+
</div>
77+
);
78+
};
79+
80+
export default DownloadSimpleStaticLayout;

Diff for: ‎apps/site/next.dynamic.constants.mjs

+1-3
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,6 @@ export const IGNORED_ROUTES = [
2121
locale !== defaultLocale.code && /^blog/.test(pathname),
2222
// This is used to ignore all pathnames that are empty
2323
({ locale, pathname }) => locale.length && !pathname.length,
24-
// This is used to ignore the simplified downloads page from static generation
25-
({ pathname }) => pathname.endsWith('/download/simplified'),
2624
];
2725

2826
/**
@@ -47,7 +45,7 @@ export const DYNAMIC_ROUTES = new Map([
4745
// flattens the array since we have a .map inside another .map
4846
.flat(),
4947
// Provides Routes for all Node.js major version download pages
50-
['en/download/simplified', 'download-simple'],
48+
['en/download/simplified', 'download-simple-static'],
5149
// Add dynamic routes for each major version
5250
...provideReleaseData().map(release => [
5351
`en/download/${release.major}`,

Diff for: ‎apps/site/pages/en/download/simplified.mdx

+117-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,124 @@
11
---
2-
layout: download-simple
2+
layout: download-simple-static
33
title: Download Node.js
44
---
55

6-
<section>
6+
{/* This page is fully static - all dynamic content is rendered at build time */}
77

8-
Test simplified version(no context)
8+
<section className="simplifiedDownload">
9+
<h2>Download Node.js</h2>
910

11+
<div className="downloadSimpleContainer">
12+
<div className="downloadSimpleItem">
13+
{/* LTS version information rendered at build time */}
14+
<h3>LTS Version: <WithNodeRelease status={['LTS']}>{({ release }) => release.versionWithPrefix}</WithNodeRelease></h3>
15+
<p>Recommended for most users</p>
16+
<WithNodeRelease status={['LTS']}>
17+
{({ release }) => (
18+
<div className="downloadMatrix">
19+
<div className="downloadMatrixItem">
20+
<h4>Windows Installer</h4>
21+
<div className="downloadLinks">
22+
<Release.DownloadLink release={release} platform="win" arch="x86">32-bit</Release.DownloadLink>
23+
<Release.DownloadLink release={release} platform="win" arch="x64">64-bit</Release.DownloadLink>
24+
</div>
25+
</div>
26+
27+
<div className="downloadMatrixItem">
28+
<h4>macOS Installer</h4>
29+
<div className="downloadLinks">
30+
<Release.DownloadLink release={release} platform="osx" arch="x64">64-bit</Release.DownloadLink>
31+
<Release.DownloadLink release={release} platform="osx" arch="arm64">Apple Silicon</Release.DownloadLink>
32+
</div>
33+
</div>
34+
35+
<div className="downloadMatrixItem">
36+
<h4>Linux Binaries</h4>
37+
<div className="downloadLinks">
38+
<Release.DownloadLink release={release} platform="linux" arch="x64">64-bit</Release.DownloadLink>
39+
<Release.DownloadLink release={release} platform="linux" arch="arm64">ARM64</Release.DownloadLink>
40+
</div>
41+
</div>
42+
43+
<div className="downloadMatrixItem">
44+
<h4>Source Code</h4>
45+
<div className="downloadLinks">
46+
<Release.DownloadLink release={release} kind="source">Source Code</Release.DownloadLink>
47+
</div>
48+
</div>
49+
</div>
50+
)}
51+
</WithNodeRelease>
52+
</div>
53+
54+
<div className="downloadSimpleItem">
55+
{/* Current version information rendered at build time */}
56+
<h3>Current Version: <WithNodeRelease status={['Current']}>{({ release }) => release.versionWithPrefix}</WithNodeRelease></h3>
57+
<p>Latest features</p>
58+
<WithNodeRelease status={['Current']}>
59+
{({ release }) => (
60+
<div className="downloadMatrix">
61+
<div className="downloadMatrixItem">
62+
<h4>Windows Installer</h4>
63+
<div className="downloadLinks">
64+
<Release.DownloadLink release={release} platform="win" arch="x86">32-bit</Release.DownloadLink>
65+
<Release.DownloadLink release={release} platform="win" arch="x64">64-bit</Release.DownloadLink>
66+
</div>
67+
</div>
68+
69+
<div className="downloadMatrixItem">
70+
<h4>macOS Installer</h4>
71+
<div className="downloadLinks">
72+
<Release.DownloadLink release={release} platform="osx" arch="x64">64-bit</Release.DownloadLink>
73+
<Release.DownloadLink release={release} platform="osx" arch="arm64">Apple Silicon</Release.DownloadLink>
74+
</div>
75+
</div>
76+
77+
<div className="downloadMatrixItem">
78+
<h4>Linux Binaries</h4>
79+
<div className="downloadLinks">
80+
<Release.DownloadLink release={release} platform="linux" arch="x64">64-bit</Release.DownloadLink>
81+
<Release.DownloadLink release={release} platform="linux" arch="arm64">ARM64</Release.DownloadLink>
82+
</div>
83+
</div>
84+
85+
<div className="downloadMatrixItem">
86+
<h4>Source Code</h4>
87+
<div className="downloadLinks">
88+
<Release.DownloadLink release={release} kind="source">Source Code</Release.DownloadLink>
89+
</div>
90+
</div>
91+
</div>
92+
)}
93+
</WithNodeRelease>
94+
</div>
95+
96+
</div>
97+
</section>
98+
99+
<section className="simplifiedDownload">
100+
<h2>Additional Resources</h2>
101+
<ul>
102+
<li>
103+
<a href="https://nodejs.org/download/nightly/">Nightly builds</a>
104+
</li>
105+
<li>
106+
<a href="https://nodejs.org/download/release/">Previous releases</a>
107+
</li>
108+
<li>
109+
<a href="https://nodejs.org/download/package-manager/">
110+
Installing Node.js via package manager
111+
</a>
112+
</li>
113+
<li>
114+
<a href="https://github.com/nodejs/node#verifying-binaries">
115+
Verifying Binaries
116+
</a>
117+
</li>
118+
<li>
119+
<a href="https://unofficial-builds.nodejs.org/download/">
120+
Unofficial builds
121+
</a>
122+
</li>
123+
</ul>
10124
</section>

0 commit comments

Comments
 (0)