Skip to content

Modernization: retire react-slick & axios, adopt Tailwind brand tokens #1264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 10 commits into
base: main
Choose a base branch
from
Draft

Modernization: retire react-slick & axios, adopt Tailwind brand tokens #1264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
33a9e25
Initial plan
Copilot Aug 7, 2026
52585c4
Plan: modernization tracker areas
Copilot Aug 7, 2026
418d5f0
tailwind-4-brand-tokens: replace raw hex arbitrary classes with seman…
Copilot Aug 7, 2026
8d4f467
react-slick-replace: migrate Logos carousel to Swiper; drop react-sli…
Copilot Aug 7, 2026
b4150a0
axios-to-fetch: replace axios GET calls with native fetch; drop axios…
Copilot Aug 7, 2026
91b6a58
next-intl: convert pure useTranslations client components to Server C…
invalid-email-address Aug 8, 2026
b75b753
prismjs-to-sugar-high: replace PrismJS with sugar-high; drop prismjs,…
invalid-email-address Aug 8, 2026
2f57a66
AuthorList: remove leftover 'use client' from converted Server Component
invalid-email-address Aug 8, 2026
43dc6f2
Address review feedback: no-store cache, prettier formatting, restore…
Copilot Aug 8, 2026
94e0a70
Fix CSS linter (duplicate selector) and restore code block spacing/ba…
Copilot Aug 8, 2026
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
338 changes: 11 additions & 327 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 0 additions & 8 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@
"@highcharts/react": "^5.2.2",
"@next/third-parties": "16.3.0",
"@opennextjs/cloudflare": "^1.20.2",
"axios": "^1.19.0",
"gray-matter": "^4.0.3",
"gsap": "^3.15.0",
"html-entities": "^2.6.0",
Expand All @@ -36,13 +35,10 @@
"next-intl": "^4.13.4",
"next-mdx-remote": "^6.0.0",
"openapi-fetch": "^0.17.0",
"prism-themes": "^1.9.0",
"prismjs": "^1.30.0",
"react": "^19.2.8",
"react-dom": "^19.2.8",
"react-icons": "^5.7.0",
"react-share": "^5.3.0",
"react-slick": "^0.31.0",
"react-tabs": "^6.1.1",
"react-world-flags": "^1.6.0",
"reading-time": "^1.5.0",
Expand All @@ -54,7 +50,6 @@
"remark-rehype": "^11.1.2",
"rss": "^1.2.2",
"schema-dts": "^2.0.0",
"slick-carousel": "^1.8.1",
"sugar-high": "^1.2.1",
"swiper": "^14.0.7",
"unified": "^11.0.5"
Expand All @@ -69,15 +64,12 @@
"@testing-library/user-event": "^14.6.3",
"@types/lodash": "^4.17.25",
"@types/node": "^26.1.2",
"@types/prismjs": "^1.26.6",
"@types/react": "19.2.18",
"@types/react-dom": "19.2.4",
"@types/react-slick": "^0.23.13",
"@types/react-world-flags": "^1.6.0",
"@types/rss": "^0.0.32",
"@vitejs/plugin-react": "^6.0.5",
"@vitest/coverage-v8": "^4.1.10",
"axios-mock-adapter": "^2.1.0",
"babel-plugin-react-compiler": "^1.0.0",
"eslint": "^10.8.0",
"eslint-config-next": "16.3.0",
Expand Down
84 changes: 6 additions & 78 deletions src/app/[locale]/[...slug]/__tests__/__snapshots__/page.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,32 +356,8 @@ exports[`AsciidocPage > renders correctly for installation page 1`] = `
</a>
</div>
<div
class="mt-10 flex-col justify-center items-start gap-4"
>
<div
class="doc-authors-title self-stretch text-white my-5 text-lg font-semibold leading-normal"
>
Text
</div>
<div
class="flex flex-wrap justify-start items-center space-x-[-12px]"
>
<a
aria-label="Author"
href="https://github.com/Author"
rel="noopener noreferrer"
target="_blank"
>
<img
alt="Author"
class="doc-author-avatar rounded-full border-solid border-4 border-purple mb-6"
height="55"
src="https://github.com/Author.png?size=55"
width="55"
/>
</a>
</div>
</div>
data-testid="author-list"
/>
<div
class="doc-community-banner inline-flex items-center gap-3 flex-wrap pt-4"
>
Expand Down Expand Up @@ -660,32 +636,8 @@ exports[`AsciidocPage > renders correctly with English locale 1`] = `
</a>
</div>
<div
class="mt-10 flex-col justify-center items-start gap-4"
>
<div
class="doc-authors-title self-stretch text-white my-5 text-lg font-semibold leading-normal"
>
Text
</div>
<div
class="flex flex-wrap justify-start items-center space-x-[-12px]"
>
<a
aria-label="Author"
href="https://github.com/Author"
rel="noopener noreferrer"
target="_blank"
>
<img
alt="Author"
class="doc-author-avatar rounded-full border-solid border-4 border-purple mb-6"
height="55"
src="https://github.com/Author.png?size=55"
width="55"
/>
</a>
</div>
</div>
data-testid="author-list"
/>
<div
class="doc-community-banner inline-flex items-center gap-3 flex-wrap pt-4"
>
Expand Down Expand Up @@ -999,32 +951,8 @@ exports[`AsciidocPage > renders correctly with non-English locale 1`] = `
</a>
</div>
<div
class="mt-10 flex-col justify-center items-start gap-4"
>
<div
class="doc-authors-title self-stretch text-white my-5 text-lg font-semibold leading-normal"
>
Text
</div>
<div
class="flex flex-wrap justify-start items-center space-x-[-12px]"
>
<a
aria-label="Author"
href="https://github.com/Author"
rel="noopener noreferrer"
target="_blank"
>
<img
alt="Author"
class="doc-author-avatar rounded-full border-solid border-4 border-purple mb-6"
height="55"
src="https://github.com/Author.png?size=55"
width="55"
/>
</a>
</div>
</div>
data-testid="author-list"
/>
<div
class="doc-community-banner inline-flex items-center gap-3 flex-wrap pt-4"
>
Expand Down
6 changes: 6 additions & 0 deletions src/app/[locale]/[...slug]/__tests__/page.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,12 @@ vi.mock("next/navigation", () => ({
notFound: vi.fn(),
}));

// AuthorList is an async Server Component; stub it so the page tree renders
// synchronously under react-dom (which cannot render async children).
vi.mock("@/components/Content/Asciidoc/AuthorList", () => ({
default: () => <div data-testid="author-list" />,
}));

vi.mock("next-intl/server", () => ({
getTranslations: vi.fn().mockResolvedValue({
rich: vi.fn(() => <div>Translated warning</div>),
Expand Down
65 changes: 34 additions & 31 deletions src/app/[locale]/__tests__/__snapshots__/page.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@

exports[`Index page > renders correctly 1`] = `
<div
class="bg-[#14003c]"
class="bg-purple"
>
<section
class="relative min-h-screen flex flex-col items-center justify-center overflow-hidden bg-[#14003c] pt-20 pb-10"
class="relative min-h-screen flex flex-col items-center justify-center overflow-hidden bg-purple pt-20 pb-10"
>
<div
class="absolute inset-0 z-0"
>
<div
class="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] bg-[#ff1365] rounded-full blur-[120px] opacity-10 animate-pulse"
class="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] bg-pink rounded-full blur-[120px] opacity-10 animate-pulse"
/>
<div
class="absolute bottom-[-20%] right-[-10%] w-[50%] h-[50%] bg-[#7026b9] rounded-full blur-[120px] opacity-10 animate-pulse delay-1000"
Expand Down Expand Up @@ -47,7 +47,7 @@ exports[`Index page > renders correctly 1`] = `
Text
</span>
<span
class="text-[#ff1365]"
class="text-pink"
>
.
</span>
Expand Down Expand Up @@ -82,7 +82,7 @@ exports[`Index page > renders correctly 1`] = `
</a>
</div>
<a
class="text-sm text-gray-400 hover:text-[#ff1365] transition-colors duration-300 flex items-center gap-2 group"
class="text-sm text-gray-400 hover:text-pink transition-colors duration-300 flex items-center gap-2 group"
href="/temurin/releases"
>
Text
Expand All @@ -107,28 +107,31 @@ exports[`Index page > renders correctly 1`] = `
Text
</h2>
<div
class="mt-6"
data-testid="react-slick-mock"
data-testid="Swiper"
>
<div
class="!flex items-center justify-center h-[100px] px-4"
data-testid="SwiperSlide"
>
<img
alt="Mock Adopter"
class="w-auto h-auto object-contain mx-auto max-h-[100px]"
height="100"
src="/images/adopters/mock-adopter-white.svg"
style="padding: 1em;"
width="200"
/>
<div
class="flex items-center justify-center h-[100px] px-4"
>
<img
alt="Mock Adopter"
class="w-auto h-auto object-contain mx-auto max-h-[100px]"
height="100"
src="/images/adopters/mock-adopter-white.svg"
style="padding: 1em;"
width="200"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section
class="w-full bg-[#14003c] py-12 relative z-20"
class="w-full bg-purple py-12 relative z-20"
>
<div
class="container mx-auto px-4"
Expand All @@ -137,7 +140,7 @@ exports[`Index page > renders correctly 1`] = `
class="relative overflow-hidden rounded-3xl bg-white/5 border border-white/10 p-8 md:p-12 shadow-2xl backdrop-blur-sm"
>
<div
class="absolute top-0 right-0 -mt-20 -mr-20 w-64 h-64 bg-[#ff1365] rounded-full blur-[100px] opacity-10"
class="absolute top-0 right-0 -mt-20 -mr-20 w-64 h-64 bg-pink rounded-full blur-[100px] opacity-10"
/>
<div
class="absolute bottom-0 left-0 -mb-20 -ml-20 w-64 h-64 bg-[#7026b9] rounded-full blur-[100px] opacity-10"
Expand All @@ -163,7 +166,7 @@ exports[`Index page > renders correctly 1`] = `
class="flex-shrink-0 pt-2 md:pt-0"
>
<a
class="inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white transition-all duration-300 bg-[#ff1365] rounded-full hover:bg-[#ff1365]/90 hover:scale-105 shadow-lg hover:shadow-[#ff1365]/25 group"
class="inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white transition-all duration-300 bg-pink rounded-full hover:bg-pink/90 hover:scale-105 shadow-lg hover:shadow-pink/25 group"
href="https://example.com"
rel="noopener noreferrer"
target="_blank"
Expand Down Expand Up @@ -474,7 +477,7 @@ exports[`Index page > renders correctly 1`] = `
</div>
</div>
<section
class="py-24 bg-[#14003c] text-white"
class="py-24 bg-purple text-white"
>
<div
class="container mx-auto px-4"
Expand Down Expand Up @@ -529,11 +532,11 @@ exports[`Index page > renders correctly 1`] = `
</div>
</div>
<div
class="absolute -bottom-20 -right-20 w-64 h-64 bg-[#ff1365] rounded-full blur-[100px] opacity-0 group-hover:opacity-20 transition-opacity duration-500"
class="absolute -bottom-20 -right-20 w-64 h-64 bg-pink rounded-full blur-[100px] opacity-0 group-hover:opacity-20 transition-opacity duration-500"
/>
</div>
<div
class="md:col-span-1 bg-[#0d002a] rounded-3xl p-8 relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 border border-white/5"
class="md:col-span-1 bg-blue rounded-3xl p-8 relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 border border-white/5"
>
<div
class="relative z-10 h-full flex flex-col justify-between"
Expand Down Expand Up @@ -565,11 +568,11 @@ exports[`Index page > renders correctly 1`] = `
</div>
</div>
<div
class="absolute -bottom-20 -right-20 w-64 h-64 bg-[#ff1365] rounded-full blur-[100px] opacity-0 group-hover:opacity-20 transition-opacity duration-500"
class="absolute -bottom-20 -right-20 w-64 h-64 bg-pink rounded-full blur-[100px] opacity-0 group-hover:opacity-20 transition-opacity duration-500"
/>
</div>
<div
class="md:col-span-1 bg-[#0d002a] rounded-3xl p-8 relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 border border-white/5"
class="md:col-span-1 bg-blue rounded-3xl p-8 relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 border border-white/5"
>
<div
class="relative z-10 h-full flex flex-col justify-between"
Expand Down Expand Up @@ -601,7 +604,7 @@ exports[`Index page > renders correctly 1`] = `
</div>
</div>
<div
class="absolute -bottom-20 -right-20 w-64 h-64 bg-[#ff1365] rounded-full blur-[100px] opacity-0 group-hover:opacity-20 transition-opacity duration-500"
class="absolute -bottom-20 -right-20 w-64 h-64 bg-pink rounded-full blur-[100px] opacity-0 group-hover:opacity-20 transition-opacity duration-500"
/>
</div>
<div
Expand Down Expand Up @@ -637,11 +640,11 @@ exports[`Index page > renders correctly 1`] = `
</div>
</div>
<div
class="absolute -bottom-20 -right-20 w-64 h-64 bg-[#ff1365] rounded-full blur-[100px] opacity-0 group-hover:opacity-20 transition-opacity duration-500"
class="absolute -bottom-20 -right-20 w-64 h-64 bg-pink rounded-full blur-[100px] opacity-0 group-hover:opacity-20 transition-opacity duration-500"
/>
</div>
<div
class="md:col-span-1 bg-[#0d002a] rounded-3xl p-8 relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 border border-white/5"
class="md:col-span-1 bg-blue rounded-3xl p-8 relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 border border-white/5"
>
<div
class="relative z-10 h-full flex flex-col justify-between"
Expand Down Expand Up @@ -673,11 +676,11 @@ exports[`Index page > renders correctly 1`] = `
</div>
</div>
<div
class="absolute -bottom-20 -right-20 w-64 h-64 bg-[#ff1365] rounded-full blur-[100px] opacity-0 group-hover:opacity-20 transition-opacity duration-500"
class="absolute -bottom-20 -right-20 w-64 h-64 bg-pink rounded-full blur-[100px] opacity-0 group-hover:opacity-20 transition-opacity duration-500"
/>
</div>
<div
class="md:col-span-1 bg-[#0d002a] rounded-3xl p-8 relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 border border-white/5"
class="md:col-span-1 bg-blue rounded-3xl p-8 relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 border border-white/5"
>
<div
class="relative z-10 h-full flex flex-col justify-between"
Expand Down Expand Up @@ -709,14 +712,14 @@ exports[`Index page > renders correctly 1`] = `
</div>
</div>
<div
class="absolute -bottom-20 -right-20 w-64 h-64 bg-[#ff1365] rounded-full blur-[100px] opacity-0 group-hover:opacity-20 transition-opacity duration-500"
class="absolute -bottom-20 -right-20 w-64 h-64 bg-pink rounded-full blur-[100px] opacity-0 group-hover:opacity-20 transition-opacity duration-500"
/>
</div>
</div>
</div>
</section>
<div
class="bg-[#0d002a] py-24 sm:py-28"
class="bg-blue py-24 sm:py-28"
>
<div
class="mx-auto max-w-3xl md:max-w-7xl w-full px-6 xl:px-0"
Expand Down
Loading