Skip to content

Commit 026ee9a

Browse files
OUMIMANDALOUMIMANDAL
committed
refactor: fix layout duplication and styling issues
1 parent caea551 commit 026ee9a

File tree

11 files changed

+477
-839
lines changed

11 files changed

+477
-839
lines changed

‎frontend/package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@
1111
"lint": "eslint . --config eslint.config.mjs --fix --max-warnings=0",
1212
"lint:check": "eslint . --config eslint.config.mjs --max-warnings=0",
1313
"start": "next start",
14-
"test:e2e": "npx playwright test",
15-
"test:unit": "tsc --noEmit && NODE_OPTIONS='--experimental-vm-modules --no-warnings=DEP0040' jest"
14+
"test": "pnpm test:unit",
15+
"test:unit": "tsc --noEmit && cross-env NODE_OPTIONS=--experimental-vm-modules --no-warnings=DEP0040 jest",
16+
"test:e2e": "playwright test",
17+
"test:all": "pnpm test:unit && pnpm test:e2e"
1618
},
1719
"dependencies": {
1820
"@fortawesome/fontawesome-svg-core": "^6.7.2",
@@ -80,6 +82,7 @@
8082
"@typescript-eslint/eslint-plugin": "^8.39.1",
8183
"@typescript-eslint/parser": "^8.39.1",
8284
"autoprefixer": "^10.4.21",
85+
"cross-env": "^10.0.0",
8386
"eslint": "^9.33.0",
8487
"eslint-config-next": "^15.4.6",
8588
"eslint-config-prettier": "^10.1.8",

‎frontend/pnpm-lock.yaml‎

Lines changed: 307 additions & 774 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/pnpm-workspace.yaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
ignoredBuiltDependencies:
2+
- '@heroui/shared-utils'
3+
- '@sentry/cli'
4+
- core-js
5+
- unrs-resolver
6+
onlyBuiltDependencies:
7+
- '@swc/core'
8+
- '@tailwindcss/oxide'
9+
- sharp

‎frontend/src/app/about/layout.tsx‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,3 @@
1-
export default function RootLayout({
2-
children,
3-
}: {
4-
children: React.ReactNode
5-
}) {
6-
return (
7-
<html lang="en">
8-
<body>
9-
<nav style={{ padding: "10px", background: "#eee" }}>
10-
<a href="/">Home</a> | <a href="/about">About</a>
11-
</nav>
12-
<main>{children}</main>
13-
</body>
14-
</html>
15-
)
16-
}
1+
export default function AboutLayout({ children }: { children: React.ReactNode }) {
2+
return children;
3+
}

‎frontend/src/app/about/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
export default function AboutPage() {
22
return (
3-
<div style={{ padding: "2rem", fontFamily: "sans-serif" }}>
4-
<h1>About OWASP Nest</h1>
3+
<div className="p-8 font-sans">
4+
<h1 className="text-3xl font-bold mb-4">About OWASP Nest</h1>
55
<p>
66
OWASP Nest is a platform to discover, engage, and contribute to OWASP
77
projects and initiatives. It serves as a central hub for the community.
88
</p>
99
</div>
1010
);
11-
}
11+
}

‎frontend/src/app/globals.css‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -82,17 +82,7 @@
8282
--chart-5: 340 75% 55%;
8383
}
8484

85-
/* =========================
86-
Base Styles
87-
========================= */
88-
@layer base {
89-
* {
90-
@apply border-border;
91-
}
92-
body {
93-
@apply bg-background text-foreground;
94-
}
95-
}
85+
9686

9787

9888

‎frontend/src/app/layout.tsx‎

Lines changed: 36 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1-
import { GoogleAnalytics } from '@next/third-parties/google'
2-
import type { Metadata } from 'next'
3-
import { Geist, Geist_Mono } from 'next/font/google'
4-
import React from 'react'
5-
import { Providers } from 'wrappers/provider'
6-
import { GTM_ID, IS_GITHUB_AUTH_ENABLED } from 'utils/credentials'
7-
import AutoScrollToTop from 'components/AutoScrollToTop'
8-
import BreadCrumbs from 'components/BreadCrumbs'
9-
import Footer from 'components/Footer'
10-
import Header from 'components/Header'
11-
import ScrollToTop from 'components/ScrollToTop'
1+
import { GoogleAnalytics } from '@next/third-parties/google';
2+
import type { Metadata } from 'next';
3+
import { Geist, Geist_Mono } from 'next/font/google';
4+
import React from 'react';
5+
import { Providers } from 'wrappers/provider';
6+
import { GTM_ID, IS_GITHUB_AUTH_ENABLED } from 'utils/credentials';
7+
import AutoScrollToTop from 'components/AutoScrollToTop';
8+
import BreadCrumbs from 'components/BreadCrumbs';
9+
import Footer from 'components/Footer';
10+
import Header from 'components/Header';
11+
import ScrollToTop from 'components/ScrollToTop';
1212

13-
import 'app/globals.css'
13+
import 'app/globals.css';
1414

1515
const geistSans = Geist({
1616
subsets: ['latin'],
1717
variable: '--font-geist-sans',
18-
})
18+
});
1919

2020
const geistMono = Geist_Mono({
2121
subsets: ['latin'],
2222
variable: '--font-geist-mono',
23-
})
23+
});
2424

2525
export const metadata: Metadata = {
2626
description: 'Your gateway to OWASP. Discover, engage, and help shape the future!',
@@ -54,7 +54,7 @@ export const metadata: Metadata = {
5454
site: '@owasp',
5555
title: 'Home – OWASP Nest',
5656
},
57-
}
57+
};
5858

5959
export default function RootLayout({
6060
children,
@@ -64,24 +64,36 @@ export default function RootLayout({
6464
return (
6565
<html lang="en" suppressHydrationWarning>
6666
<body
67-
className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen flex flex-col`}
67+
className={`
68+
${geistSans.variable} ${geistMono.variable} antialiased
69+
flex flex-col min-h-screen
70+
supports-[min-height:100dvh]:min-h-[100dvh]
71+
overflow-x-hidden
72+
`}
6873
>
74+
{/* Visually hidden but keyboard-focusable skip link for accessibility */}
75+
<a
76+
href="#main-content"
77+
className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 bg-white p-2 z-50"
78+
>
79+
Skip to content
80+
</a>
6981
<Providers>
7082
<AutoScrollToTop />
7183
<Header isGitHubAuthEnabled={IS_GITHUB_AUTH_ENABLED} />
7284
<BreadCrumbs />
73-
74-
{/* Wrap content in a flex-1 container to always push footer down */}
75-
<main className="flex-1 flex flex-col">
76-
{children }
77-
85+
{/* Single document-wide main landmark for a11y; no nested mains */}
86+
<main
87+
id="main-content"
88+
className="flex-1 flex flex-col min-w-0"
89+
>
90+
{children}
7891
</main>
79-
80-
<Footer />
92+
<Footer className="mt-auto" />
8193
<ScrollToTop />
8294
</Providers>
8395
</body>
8496
<GoogleAnalytics gaId={GTM_ID} />
8597
</html>
86-
)
98+
);
8799
}

‎frontend/src/app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// src/app/page.tsx
22
export default function HomePage() {
33
return (
4-
<div className="min-h-screen bg-background text-foreground flex flex-col items-center justify-center p-8">
4+
<div className="flex-1 bg-background text-foreground flex flex-col items-center justify-center p-8">
55
<h1 className="text-4xl font-bold mb-4">Welcome to OWASP Nest</h1>
66
<p className="text-lg text-muted-foreground">
77
This is the Home Page built with Next.js 15 (App Router).

‎frontend/tailwind.config.cjs‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
/** @type {import('tailwindcss').Config} */
2-
const { heroui } = require('@heroui/react')
1+
import type { Config } from "tailwindcss";
2+
import { heroui } from "@heroui/react";
3+
import animate from "tailwindcss-animate";
34

4-
module.exports = {
5+
const config: Config = {
56
content: [
67
"./src/**/*.{js,ts,jsx,tsx,mdx}",
78
"./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
@@ -69,8 +70,7 @@ module.exports = {
6970
},
7071
},
7172
},
72-
plugins: [
73-
heroui(),
74-
require("tailwindcss-animate"),
75-
],
76-
}
73+
plugins: [heroui(), animate],
74+
};
75+
76+
export default config;

‎frontend/tailwind.config.ts‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import type { Config } from "tailwindcss";
2+
import { heroui } from "@heroui/react";
3+
import animate from "tailwindcss-animate";
4+
5+
const config: Config = {
6+
content: [
7+
"./src/**/*.{js,ts,jsx,tsx,mdx}",
8+
"./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
9+
],
10+
darkMode: "class",
11+
theme: {
12+
extend: {
13+
colors: {
14+
background: "hsl(var(--background))",
15+
foreground: "hsl(var(--foreground))",
16+
border: "hsl(var(--border))",
17+
text: "hsl(var(--text))",
18+
"owasp-blue": "#98AFC7",
19+
card: {
20+
DEFAULT: "hsl(var(--card))",
21+
foreground: "hsl(var(--card-foreground))",
22+
},
23+
popover: {
24+
DEFAULT: "hsl(var(--popover))",
25+
foreground: "hsl(var(--popover-foreground))",
26+
},
27+
primary: {
28+
DEFAULT: "hsl(var(--primary))",
29+
foreground: "hsl(var(--primary-foreground))",
30+
},
31+
secondary: {
32+
DEFAULT: "hsl(var(--secondary))",
33+
foreground: "hsl(var(--secondary-foreground))",
34+
},
35+
muted: {
36+
DEFAULT: "hsl(var(--muted))",
37+
foreground: "hsl(var(--muted-foreground))",
38+
},
39+
accent: {
40+
DEFAULT: "hsl(var(--accent))",
41+
foreground: "hsl(var(--accent-foreground))",
42+
},
43+
destructive: {
44+
DEFAULT: "hsl(var(--destructive))",
45+
foreground: "hsl(var(--destructive-foreground))",
46+
},
47+
input: "hsl(var(--input))",
48+
ring: "hsl(var(--ring))",
49+
chart: {
50+
1: "hsl(var(--chart-1))",
51+
2: "hsl(var(--chart-2))",
52+
3: "hsl(var(--chart-3))",
53+
4: "hsl(var(--chart-4))",
54+
5: "hsl(var(--chart-5))",
55+
},
56+
},
57+
borderRadius: {
58+
lg: "var(--radius)",
59+
md: "calc(var(--radius) - 2px)",
60+
sm: "calc(var(--radius) - 4px)",
61+
},
62+
keyframes: {
63+
scroll: {
64+
"0%": { transform: "translateX(0)" },
65+
"100%": { transform: "translateX(-500%)" },
66+
},
67+
},
68+
animation: {
69+
scroll: "scroll 0.5s linear infinite",
70+
},
71+
},
72+
},
73+
plugins: [heroui(), animate],
74+
};
75+
76+
export default config;

0 commit comments

Comments
 (0)