Skip to content

W
www
Commit e903cb57 by PLN (Algolia)
Options

refactor: remove Bootstrap, fix Tailwind v4 in production 

Bootstrap's CSS was overriding all Tailwind utility classes in production,
making parvagues render as raw unstyled HTML. Root cause: _app.js imported
bootstrap.css globally before globals.css (Tailwind v4).

- Remove bootstrap dependency and import from _app.js
- Remove stale tailwind.config.js (v3 format, ignored by v4)
- Remove @tailwindcss/aspect-ratio (v3 plugin, built-in in v4)
- Replace 3 Bootstrap `container` usages with Tailwind equivalents
- Scope main.css legacy element styles with :not(:has(.parvagues-root))
  to prevent link colors, section margins, footer styles from bleeding
  into parvagues pages
- Add .parvagues-root class to parvagues Layout for scoping
parent e49dc245
Showing with 11 additions and 85 deletions
next/.pnp.cjs
......@@ -27,7 +27,6 @@ const RAW_RUNTIME_STATE =
"packageLocation": "./",\
"packageDependencies": [\
["@playwright/test", "npm:1.57.0"],\
["@tailwindcss/aspect-ratio", "virtual:599f9545309f05166d506895056809d0f5971d8f55d13475681739816b4bb6745eb725b53ed2108e22ea4ce46b8a2c491882d38a9948455117b545da3880eea7#npm:0.4.2"],\
["@tailwindcss/postcss", "npm:4.1.17"],\
["@testing-library/dom", "npm:10.4.1"],\
["@testing-library/jest-dom", "npm:6.9.1"],\
......@@ -37,7 +36,6 @@ const RAW_RUNTIME_STATE =
["@types/node", "npm:24.4.0"],\
["@types/react", "npm:18.3.27"],\
["autoprefixer", "virtual:599f9545309f05166d506895056809d0f5971d8f55d13475681739816b4bb6745eb725b53ed2108e22ea4ce46b8a2c491882d38a9948455117b545da3880eea7#npm:10.4.22"],\
["bootstrap", "virtual:599f9545309f05166d506895056809d0f5971d8f55d13475681739816b4bb6745eb725b53ed2108e22ea4ce46b8a2c491882d38a9948455117b545da3880eea7#npm:5.3.8"],\
["classnames", "npm:2.5.1"],\
["d3-force", "npm:3.0.0"],\
["d3-zoom", "npm:3.0.0"],\
......@@ -2294,28 +2292,6 @@ const RAW_RUNTIME_STATE =
"linkType": "HARD"\
}]\
]],\
["@tailwindcss/aspect-ratio", [\
["npm:0.4.2", {\
"packageLocation": "../../../../.yarn/berry/cache/@tailwindcss-aspect-ratio-npm-0.4.2-f690711eea-10c0.zip/node_modules/@tailwindcss/aspect-ratio/",\
"packageDependencies": [\
["@tailwindcss/aspect-ratio", "npm:0.4.2"]\
],\
"linkType": "SOFT"\
}],\
["virtual:599f9545309f05166d506895056809d0f5971d8f55d13475681739816b4bb6745eb725b53ed2108e22ea4ce46b8a2c491882d38a9948455117b545da3880eea7#npm:0.4.2", {\
"packageLocation": "./.yarn/__virtual__/@tailwindcss-aspect-ratio-virtual-82a3764de6/5/.yarn/berry/cache/@tailwindcss-aspect-ratio-npm-0.4.2-f690711eea-10c0.zip/node_modules/@tailwindcss/aspect-ratio/",\
"packageDependencies": [\
["@tailwindcss/aspect-ratio", "virtual:599f9545309f05166d506895056809d0f5971d8f55d13475681739816b4bb6745eb725b53ed2108e22ea4ce46b8a2c491882d38a9948455117b545da3880eea7#npm:0.4.2"],\
["@types/tailwindcss", null],\
["tailwindcss", "npm:4.1.17"]\
],\
"packagePeers": [\
"@types/tailwindcss",\
"tailwindcss"\
],\
"linkType": "HARD"\
}]\
]],\
["@tailwindcss/node", [\
["npm:4.1.17", {\
"packageLocation": "../../../../.yarn/berry/cache/@tailwindcss-node-npm-4.1.17-e51ba6d766-10c0.zip/node_modules/@tailwindcss/node/",\
......@@ -3979,28 +3955,6 @@ const RAW_RUNTIME_STATE =
"linkType": "HARD"\
}]\
]],\
["bootstrap", [\
["npm:5.3.8", {\
"packageLocation": "../../../../.yarn/berry/cache/bootstrap-npm-5.3.8-b7bef82d06-10c0.zip/node_modules/bootstrap/",\
"packageDependencies": [\
["bootstrap", "npm:5.3.8"]\
],\
"linkType": "SOFT"\
}],\
["virtual:599f9545309f05166d506895056809d0f5971d8f55d13475681739816b4bb6745eb725b53ed2108e22ea4ce46b8a2c491882d38a9948455117b545da3880eea7#npm:5.3.8", {\
"packageLocation": "./.yarn/__virtual__/bootstrap-virtual-54f2fafa22/5/.yarn/berry/cache/bootstrap-npm-5.3.8-b7bef82d06-10c0.zip/node_modules/bootstrap/",\
"packageDependencies": [\
["bootstrap", "virtual:599f9545309f05166d506895056809d0f5971d8f55d13475681739816b4bb6745eb725b53ed2108e22ea4ce46b8a2c491882d38a9948455117b545da3880eea7#npm:5.3.8"],\
["@popperjs/core", null],\
["@types/popperjs__core", null]\
],\
"packagePeers": [\
"@popperjs/core",\
"@types/popperjs__core"\
],\
"linkType": "HARD"\
}]\
]],\
["brace-expansion", [\
["npm:1.1.12", {\
"packageLocation": "../../../../.yarn/berry/cache/brace-expansion-npm-1.1.12-329e9ad7a1-10c0.zip/node_modules/brace-expansion/",\
......@@ -9462,7 +9416,6 @@ const RAW_RUNTIME_STATE =
"packageDependencies": [\
["pln-www", "workspace:."],\
["@playwright/test", "npm:1.57.0"],\
["@tailwindcss/aspect-ratio", "virtual:599f9545309f05166d506895056809d0f5971d8f55d13475681739816b4bb6745eb725b53ed2108e22ea4ce46b8a2c491882d38a9948455117b545da3880eea7#npm:0.4.2"],\
["@tailwindcss/postcss", "npm:4.1.17"],\
["@testing-library/dom", "npm:10.4.1"],\
["@testing-library/jest-dom", "npm:6.9.1"],\
......@@ -9472,7 +9425,6 @@ const RAW_RUNTIME_STATE =
["@types/node", "npm:24.4.0"],\
["@types/react", "npm:18.3.27"],\
["autoprefixer", "virtual:599f9545309f05166d506895056809d0f5971d8f55d13475681739816b4bb6745eb725b53ed2108e22ea4ce46b8a2c491882d38a9948455117b545da3880eea7#npm:10.4.22"],\
["bootstrap", "virtual:599f9545309f05166d506895056809d0f5971d8f55d13475681739816b4bb6745eb725b53ed2108e22ea4ce46b8a2c491882d38a9948455117b545da3880eea7#npm:5.3.8"],\
["classnames", "npm:2.5.1"],\
["d3-force", "npm:3.0.0"],\
["d3-zoom", "npm:3.0.0"],\
......
next/components/parvagues/Layout.js
......@@ -51,7 +51,7 @@ export default function Layout({ children, title = 'ParVagues' }) {
}, []);
return (
<div className={`${syne.variable} noise-overlay min-h-screen bg-[var(--surface)] text-[var(--text-primary)] selection:bg-[var(--neon-high)]/30 selection:text-white`}>
<div className={`parvagues-root ${syne.variable} noise-overlay min-h-screen bg-[var(--surface)] text-[var(--text-primary)] selection:bg-[var(--neon-high)]/30 selection:text-white`}>
<Head>
<title>{title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
......
next/package.json
......@@ -20,8 +20,6 @@
"node": ">=18.17.0"
},
"dependencies": {
"@tailwindcss/aspect-ratio": "^0.4.2",
"bootstrap": "^5.3.3",
"classnames": "^2.5.1",
"d3-force": "^3.0.0",
"d3-zoom": "^3.0.0",
......
next/pages/_app.js
import 'bootstrap/dist/css/bootstrap.css'
import '../styles/globals.css'
import '../styles/main.css'
import '../styles/masonry.css'
......
next/pages/dunbar/[[...rest]].js
......@@ -16,7 +16,7 @@ import DunbarApp from '@/components/dunbar/DunbarApp';
*/
export default function DunbarCatchAllPage() {
return (
<div className="container">
<div className="max-w-7xl mx-auto px-4">
<Layout>
<Head>
<title>Dunbar</title>
......
next/pages/dunbar/event/[slug].js
......@@ -8,7 +8,7 @@ export default function DunbarEventPage() {
'Dunbar — Event details in the privacy-first relationship navigator prototype. Local-only data, networks, events, and orbits.';
return (
<div className="container">
<div className="max-w-7xl mx-auto px-4">
<Layout>
<Head>
<title>Dunbar — Event</title>
......
next/pages/index.js
......@@ -22,7 +22,7 @@ export async function getStaticProps() {
export default function Home({ posts, talks }) {
return (
<div className="container">
<div className="max-w-7xl mx-auto px-4">
<Layout home>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
......
next/styles/main.css
......@@ -12,12 +12,13 @@ body {
box-sizing: border-box;
}
a {
/* Scope legacy element styles to non-parvagues pages */
body:not(:has(.parvagues-root)) a {
color: #0070f3;
text-decoration: none;
}
a:hover {
body:not(:has(.parvagues-root)) a:hover {
text-decoration: underline;
}
......@@ -26,18 +27,14 @@ img {
display: block;
}
header {
body:not(:has(.parvagues-root)) header {
margin-bottom: 2em;
}
main h2 {
body:not(:has(.parvagues-root)) main h2 {
margin-bottom: 1em;
}
main h3 {
/* margin: 1em 0; */
}
h4 {
font-size: 1.2rem;
}
......@@ -50,7 +47,7 @@ p.code {
font-family: monospace;
}
section {
body:not(:has(.parvagues-root)) section {
margin-bottom: 3em;
}
......@@ -58,7 +55,7 @@ small {
font-size: 1rem;
}
footer {
body:not(:has(.parvagues-root)) footer {
margin-top: 4em;
text-align: center;
color: #228;
......
next/yarn.lock
......@@ -1535,15 +1535,6 @@ __metadata:
languageName: node
linkType: hard
"@tailwindcss/aspect-ratio@npm:^0.4.2":
version: 0.4.2
resolution: "@tailwindcss/aspect-ratio@npm:0.4.2"
peerDependencies:
tailwindcss: ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
checksum: 10c0/c821a8061f80200b20db26f9cf2a711ffb17814adf847a72d4d4632804d1cabf6671df8e99e06cedfb2ba97b968d7843cd435d1201519c86acdde702efca418b
languageName: node
linkType: hard
"@tailwindcss/node@npm:4.1.17":
version: 4.1.17
resolution: "@tailwindcss/node@npm:4.1.17"
......@@ -2892,15 +2883,6 @@ __metadata:
languageName: node
linkType: hard
"bootstrap@npm:^5.3.3":
version: 5.3.8
resolution: "bootstrap@npm:5.3.8"
peerDependencies:
"@popperjs/core": ^2.11.8
checksum: 10c0/0039a9df2c3e7bfa04f1abca199c299ff3b75869d578c0cb1721c6f1f203c91531788a5631ecbee01513481979314d0e4ba0d90c2011e6ce18fc2e0bc93e18d9
languageName: node
linkType: hard
"brace-expansion@npm:^1.1.7":
version: 1.1.12
resolution: "brace-expansion@npm:1.1.12"
......@@ -7757,7 +7739,6 @@ __metadata:
resolution: "pln-www@workspace:."
dependencies:
"@playwright/test": "npm:^1.55.0"
"@tailwindcss/aspect-ratio": "npm:^0.4.2"
"@tailwindcss/postcss": "npm:^4.1.17"
"@testing-library/dom": "npm:^10.4.1"
"@testing-library/jest-dom": "npm:^6.8.0"
......@@ -7767,7 +7748,6 @@ __metadata:
"@types/node": "npm:24.4.0"
"@types/react": "npm:^18.2.61"
autoprefixer: "npm:^10.4.22"
bootstrap: "npm:^5.3.3"
classnames: "npm:^2.5.1"
d3-force: "npm:^3.0.0"
d3-zoom: "npm:^3.0.0"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment