Skip to content

Commit 9a16bf1

Browse files
bjohansebasbjohansebas
authored
add section on download page
1 parent ed3f839 commit 9a16bf1

10 files changed

Lines changed: 80 additions & 27 deletions

File tree

‎apps/site/components/Common/Partners/PartnerIcon/index.module.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@reference "../../../../styles/index.css";
2+
3+
.partnerIcon {
4+
@apply p-2;
5+
6+
svg {
7+
@apply size-6;
8+
}
9+
}

‎apps/site/components/Common/Partners/PartnerIcon/index.tsx‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,33 @@ import Skeleton from '@node-core/ui-components/Common/Skeleton';
22
import type { ComponentProps, FC } from 'react';
33
import { cloneElement } from 'react';
44

5-
import Link from '#site/components/Link';
65
import type { Partners } from '#site/types';
76

7+
// import Link from '#site/components/Link';
8+
import style from './index.module.css';
9+
import Button from '../../Button';
10+
811
type ParnetsIconProps = Partners & ComponentProps<typeof Skeleton>;
912

1013
const PartnersIcon: FC<ParnetsIconProps> = ({ href, logo, loading }) => {
1114
return (
15+
// <Skeleton loading={loading} className="h-12 w-12 p-1">
16+
// <Link
17+
// kind="secondary"
18+
// href={href}
19+
// className="flex h-12 w-auto min-w-12 items-center justify-center rounded-lg p-1 hover:bg-neutral-800"
20+
// >
21+
// {cloneElement(logo, {
22+
// className: 'h-12 w-12',
23+
// })}
24+
// </Link>
25+
// </Skeleton>
1226
<Skeleton loading={loading} className="h-12 w-12 p-1">
13-
<Link
14-
kind="secondary"
15-
href={href}
16-
className="flex h-12 w-auto min-w-12 items-center justify-center rounded-lg p-1 hover:bg-neutral-800"
17-
>
27+
<Button kind="secondary" href={href} className={style.partnerIcon}>
1828
{cloneElement(logo, {
1929
className: 'h-12 w-12',
2030
})}
21-
</Link>
31+
</Button>
2232
</Skeleton>
2333
);
2434
};

‎apps/site/components/Common/Partners/PartnersIconList/index.module.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,5 @@
55
flex-row
66
flex-wrap
77
items-center
8-
justify-center
98
gap-4;
109
}

‎apps/site/components/Common/Partners/PartnersIconList/index.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,31 @@
33
import { useEffect, useRef, useState, type FC } from 'react';
44

55
import PARTNERS from '#site/next.partners.constants';
6-
import type { Partners } from '#site/types';
6+
import type { PartnerCategory, Partners } from '#site/types';
77

88
import PartnerIcon from '../PartnerIcon';
99
import style from './index.module.css';
1010
import { randomPartnerList } from '../utils';
1111

1212
type PartnersIconListProps = {
1313
maxLength?: number;
14+
categories?: PartnerCategory;
1415
};
1516

16-
const PartnersIconList: FC<PartnersIconListProps> = ({ maxLength = 4 }) => {
17+
const PartnersIconList: FC<PartnersIconListProps> = ({
18+
maxLength = 6,
19+
categories,
20+
}) => {
1721
const initialRenderer = useRef(true);
1822

1923
const [seedList, setSeedList] = useState<Array<Partners>>(
2024
PARTNERS.slice(0, maxLength)
2125
);
2226

27+
// Depediendo del ancho que tiene el componente tiene que renderizar un número diferente de sponsors, tiene que se dinamico cada sponsor tiene un ancho de 24x24 pixeles
28+
// crear una función que reciba el ancho del componente y retorne un número de sponsors a renderizar
29+
// const getSponsorsToRender = (width: number) => {
30+
2331
useEffect(() => {
2432
// We intentionally render the initial default "mock" list of sponsors
2533
// to have the Skeletons loading, and then we render the actual list
@@ -33,7 +41,7 @@ const PartnersIconList: FC<PartnersIconListProps> = ({ maxLength = 4 }) => {
3341
const renderSponsorsAnimation = setTimeout(() => {
3442
initialRenderer.current = false;
3543

36-
setSeedList(randomPartnerList(PARTNERS, maxLength));
44+
setSeedList(randomPartnerList(PARTNERS, maxLength, 1, categories));
3745
}, 0);
3846

3947
return () => clearTimeout(renderSponsorsAnimation);

‎apps/site/components/Common/Partners/utils.ts‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1-
import type { Partners } from '#site/types/partners.js';
2-
3-
function randomPartnerList(partners: Array<Partners>, pick = 4, dateSeed = 5) {
1+
import type { PartnerCategory, Partners } from '#site/types/partners.js';
2+
3+
function randomPartnerList(
4+
partners: Array<Partners>,
5+
pick = 4,
6+
dateSeed = 5,
7+
category?: PartnerCategory
8+
) {
49
const now = new Date();
510
const minutes = Math.floor(now.getUTCMinutes() / dateSeed) * dateSeed;
611

@@ -21,7 +26,10 @@ function randomPartnerList(partners: Array<Partners>, pick = 4, dateSeed = 5) {
2126
const rng = mulberry32(seed);
2227

2328
// Create a copy of the array to avoid modifying the original
24-
const shuffled = partners.slice().sort(() => rng() - 0.5);
29+
const shuffled = partners
30+
.filter(partner => !category || partner.categories.includes(category))
31+
.slice()
32+
.sort(() => rng() - 0.5);
2533

2634
return shuffled.slice(0, pick);
2735
}

‎apps/site/pages/en/download/current.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,7 @@ all <LinkWithArrow href="https://nodejs.org/download/release/">previous releases
3434
or the <LinkWithArrow href="https://unofficial-builds.nodejs.org/download/">unofficial</LinkWithArrow> binaries for other platforms.
3535

3636
</section>
37+
38+
We are able to serve Node.js downloads thank to our <Link href="/about/partners">partners</Link>.
39+
40+
<PartnersIconList maxLength={6} />

‎apps/site/pages/en/download/index.mdx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,15 @@ all <LinkWithArrow href="https://nodejs.org/download/release/">previous releases
3434
or the <LinkWithArrow href="https://unofficial-builds.nodejs.org/download/">unofficial</LinkWithArrow> binaries for other platforms.
3535

3636
</section>
37+
38+
<section>
39+
<h2 className='text-center'>Powered by Our Partners</h2>
40+
41+
<span className="text-center">
42+
We are able to serve Node.js downloads and maintain our infrastructure thanks
43+
to our amazing <Link href="/about/partners">partners</Link>.
44+
</span>
45+
<div className='mt-4'>
46+
<PartnersIconList maxLength={6} />
47+
</div>
48+
</section>

‎apps/site/pages/en/index.mdx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,6 @@ layout: home
2727
<small className="!text-xs">for Node.js 18 and below</small>
2828
</Button>
2929

30-
<span className='xs:mt-4'>Sponsored by:</span>
31-
<div className='flex flex-row gap-4 items-center'>
32-
<PartnersIconList />
33-
<Link href="/about/partners">and more...</Link>
34-
</div>
35-
3630
<div className="flex flex-col xs:flex-row gap-2 justify-center xs:mt-6">
3731
<WithNodeRelease status="Active LTS">
3832
{({ release }) =>
@@ -143,4 +137,13 @@ layout: home
143137
144138
</div>
145139
Learn more what Node.js is able to offer with our [Learning materials](/learn).
140+
<div className='w-full flex flex-col gap-2 xs:mt-3'>
141+
<div className="flex flex-row items-center justify-center gap-4">
142+
<PartnersIconList />
143+
<Link href="/about/partners">and more...</Link>
144+
</div>
145+
<span className="xs:mt-1 text-center">
146+
Node.js is proudly supported by our partners above
147+
</span>
148+
</div>
146149
</section>

‎packages/ui-components/src/Icons/PartnerLogos/HeroDevs.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@ const HeroDevs: FC<SVGProps<SVGSVGElement>> = props => (
3232
y2="259.733"
3333
gradientUnits="userSpaceOnUse"
3434
>
35-
<stop stop-color="#F926E1" />
35+
<stop stopColor="#F926E1" />
3636

37-
<stop offset="1" stop-color="#2AB5FB" />
37+
<stop offset="1" stopColor="#2AB5FB" />
3838
</linearGradient>
3939

4040
<linearGradient
@@ -45,9 +45,9 @@ const HeroDevs: FC<SVGProps<SVGSVGElement>> = props => (
4545
y2="267.011"
4646
gradientUnits="userSpaceOnUse"
4747
>
48-
<stop stop-color="#F926E1" />
48+
<stop stopColor="#F926E1" />
4949

50-
<stop offset="1" stop-color="#2AB5FB" />
50+
<stop offset="1" stopColor="#2AB5FB" />
5151
</linearGradient>
5252
</defs>
5353
</svg>

‎packages/ui-components/src/Icons/PartnerLogos/Sentry.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ const Sentry: FC<SVGProps<SVGSVGElement>> = props => (
44
<svg
55
xmlns="http://www.w3.org/2000/svg"
66
viewBox="0 0 72 66"
7-
width="400"
8-
height="367"
7+
width="72"
8+
height="66"
99
{...props}
1010
>
1111
<path

0 commit comments

Comments
 (0)