Daniel nextjs migration #248

danielmarv · 2025-12-22T14:10:47Z

This pull request sets up the foundational layout, global styles, and main page structure for the application, establishing a consistent design system and reusable components. It introduces a custom global stylesheet with theme variables and utility classes, configures the root layout with metadata and global font, and implements the homepage and footer using modular React components.

Global Styles and Theme:

Created globals.css with custom CSS variables for color themes, base typography, responsive container sizing, and utility classes for headings, badges, links, navigation, and footer elements. This ensures a consistent look and feel across the site and matches the previous site's design.

Application Layout and Metadata:

Implemented RootLayout in layout.tsx to wrap all pages with the Navbar and Footer components, apply the Montserrat font globally, and inject site-wide metadata (title, description, Open Graph, favicon, etc.). Also includes the Iconify script for icon support.

Homepage Composition:

Built the main homepage in page.tsx by composing modular section components (HeroSection, OpenKnowledgeSection, etc.), enabling a clear and maintainable page structure.

Footer Component:

Added a responsive Footer component with navigation links, social icons, privacy/legal links, and decorative images. Integrates with mainMenu.json and social.json for dynamic link rendering, and loads the Iubenda privacy script for compliance.

#213

Signed-off-by: Daniel Ntege <danientege785@gmail.com>

Copilot

Pull request overview

This pull request establishes the foundational structure for a Next.js migration, implementing the application's layout, global styles, and homepage with modular components. The PR introduces a comprehensive design system through custom CSS variables and utility classes, sets up the root layout with navigation and footer, and composes the homepage from reusable section components.

Key changes:

Created global stylesheet with theme variables, custom utility classes, and responsive design patterns
Implemented root layout with Navbar, Footer, Montserrat font, and site-wide metadata
Built homepage from modular section components (Hero, Open Knowledge, Open Events, Open Source, Open Doors, Open Office)

Reviewed changes

Copilot reviewed 14 out of 17 changed files in this pull request and generated 20 comments.

Show a summary per file

File	Description
tsconfig.json	Updated TypeScript configuration with Next.js plugin support and JSX settings
tailwind.config.js	Extended content paths to include Next.js app and components directories
src/data-temp/*.json	Added configuration files for navigation menus, social links, and landing page visibility controls
src/app/globals.css	Created comprehensive global stylesheet with custom CSS variables, theme colors, and utility classes
src/app/layout.tsx	Implemented root layout with metadata, Montserrat font, and wrapping components
src/app/page.tsx	Composed homepage from modular section components
src/components/Navbar.tsx	Built responsive navigation with mobile menu, dropdowns, and language switching
src/components/Footer.tsx	Created footer with navigation links, social icons, and privacy policy integration
src/components/home/*.tsx	Implemented six modular homepage sections with responsive layouts and images
next-env.d.ts	Added Next.js TypeScript definitions file

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/components/home/HeroSection.tsx

Copilot · 2025-12-22T14:17:40Z

src/components/Navbar.tsx

+import Image from 'next/image'
+import { useState } from 'react'
+import mainMenu from '@/data/mainMenu.json'
+import social from '@/data/social.json'


The import path should be @/data-temp/social.json to match the actual file location shown in the PR, not @/data/social.json. This will cause a module not found error at runtime.

Suggested change

import social from '@/data/social.json'

import social from '@/data-temp/social.json'

Copilot · 2025-12-22T14:17:40Z

src/components/Footer.tsx

@@ -0,0 +1,165 @@
+import Link from 'next/link'
+import Image from 'next/image'
+import mainMenu from '@/data/mainMenu.json'


The import path should be @/data-temp/mainMenu.json to match the actual file location shown in the PR, not @/data/mainMenu.json. This will cause a module not found error at runtime.

Suggested change

import mainMenu from '@/data/mainMenu.json'

import mainMenu from '@/data-temp/mainMenu.json'

Copilot · 2025-12-22T14:17:40Z

src/data-temp/mainMenu.json

+    "name": "Support & Care",
+    "i18nKey": "supportAndCare",
+    "altI18nKey": "supportAndCareDescription",
+    "link": "#",


The link href="#" for the "Support & Care" parent menu item is a non-functional placeholder. This creates a poor user experience as clicking it won't navigate anywhere. Consider using a button element instead if this is meant to be a dropdown trigger only, or provide a valid fallback URL.

Suggested change

"link": "#",

"link": "/support-care-maven/",

Copilot · 2025-12-22T14:17:41Z

src/components/Footer.tsx

+import Link from 'next/link'
+import Image from 'next/image'
+import mainMenu from '@/data/mainMenu.json'
+import social from '@/data/social.json'


The import path should be @/data-temp/social.json to match the actual file location shown in the PR, not @/data/social.json. This will cause a module not found error at runtime.

Suggested change

import social from '@/data/social.json'

import social from '@/data-temp/social.json'

Copilot · 2025-12-22T14:17:44Z

src/app/layout.tsx

+export const metadata: Metadata = {
+  title: 'Open Elements - Open Source made right',
+  description: 'Open Source made right - Open Elements is a modern company with a clear focus on Open Source and Java',
+  keywords: ['open source', 'Java', 'OSS', 'open source Support', 'Java Support'],
+  openGraph: {
+    type: 'website',
+    url: 'https://open-elements.com/',
+    title: 'Open Elements - Open Source made right',
+    description: 'Open Source made right - Open Elements is a modern company with a clear focus on Open Source and Java',
+    siteName: 'Open Elements',
+    images: [
+      {
+        url: '/open-graph/open-elements.png',
+        width: 1200,
+        height: 630,
+        alt: 'OpenElements Logo',
+      },
+    ],
+    locale: 'en_US',
+  },
+}


The metadata only includes English content without considering internationalization. Since the site has language switching functionality (EN/DE), consider setting up Next.js internationalized routing and providing metadata for both languages to improve SEO and user experience.

Copilot · 2025-12-22T14:17:44Z

src/components/Navbar.tsx

+import Link from 'next/link'
+import Image from 'next/image'
+import { useState } from 'react'
+import mainMenu from '@/data/mainMenu.json'


The import path should be @/data-temp/mainMenu.json to match the actual file location shown in the PR, not @/data/mainMenu.json. This will cause a module not found error at runtime.

Suggested change

import mainMenu from '@/data/mainMenu.json'

import mainMenu from '@/data-temp/mainMenu.json'

Copilot · 2025-12-22T14:17:45Z

src/components/Footer.tsx

+      <script dangerouslySetInnerHTML={{
+        __html: `
+          (function (w,d) {
+            var loader = function () {
+              var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; 
+              s.src="https://cdn.iubenda.com/iubenda.js"; 
+              tag.parentNode.insertBefore(s,tag);
+            }; 
+            if(w.addEventListener){
+              w.addEventListener("load", loader, false);
+            }else if(w.attachEvent){
+              w.attachEvent("onload", loader);
+            }else{
+              w.onload = loader;
+            }
+          })(window, document);
+        `
+      }} />


Using dangerouslySetInnerHTML to inject scripts poses a security risk. If the script content or any variables within it can be influenced by user input, this could lead to XSS vulnerabilities. Consider using the Next.js Script component instead, which provides a safer way to load external scripts.

Copilot · 2025-12-22T14:17:45Z

src/app/globals.css

+  /* Container matching old site */
+  .container {
+    @apply w-full mx-auto px-6;
+  }
+
+  @media (min-width: 640px) {
+    .container {
+      @apply max-w-[640px] px-8;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .container {
+      @apply max-w-[768px] px-12;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .container {
+      @apply max-w-[1024px];
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .container {
+      @apply max-w-[1280px] px-16;
+    }
+  }


The container class uses fixed max-width values instead of Tailwind's built-in responsive container utilities. This custom implementation may lead to maintenance issues. Consider using Tailwind's container utility with appropriate configuration in tailwind.config.js instead of redefining container behavior in CSS.

Suggested change

/* Container matching old site */

.container {

@apply w-full mx-auto px-6;

}

@media (min-width: 640px) {

.container {

@apply max-w-[640px] px-8;

}

}

@media (min-width: 768px) {

.container {

@apply max-w-[768px] px-12;

}

}

@media (min-width: 1024px) {

.container {

@apply max-w-[1024px];

}

}

@media (min-width: 1280px) {

.container {

@apply max-w-[1280px] px-16;

}

}

/* Container using Tailwind's responsive container utility */

.container {

@apply container mx-auto w-full px-6 sm:px-8 md:px-12 xl:px-16;

}

Copilot · 2025-12-22T14:17:46Z

src/components/home/HeroSection.tsx

@@ -0,0 +1,142 @@
+import Image from 'next/image'
+import Link from 'next/link'


Unused import Link.

Suggested change

import Link from 'next/link'

Signed-off-by: Daniel Ntege <danientege785@gmail.com>

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot AI review requested due to automatic review settings December 22, 2025 14:10

danielmarv added this to Migration to NextJS Dec 22, 2025

github-project-automation bot moved this to Backlog in Migration to NextJS Dec 22, 2025

danielmarv moved this from Backlog to In review in Migration to NextJS Dec 22, 2025

Copilot started reviewing on behalf of danielmarv December 22, 2025 14:11 View session

feat: Implement new layout and homepage structure

cf01931

Signed-off-by: Daniel Ntege <danientege785@gmail.com>

danielmarv force-pushed the Daniel-nextjs-migration branch from 9bfe048 to 873184a Compare December 22, 2025 14:13

danielmarv requested a review from Jexsie December 22, 2025 14:13

Copilot AI reviewed Dec 22, 2025

View reviewed changes

feat: Implement new layout and homepage structure and the favicon

c845dcc

Signed-off-by: Daniel Ntege <danientege785@gmail.com>

danielmarv force-pushed the Daniel-nextjs-migration branch from 43e49fe to 3b8933b Compare December 22, 2025 19:13

danielmarv added 2 commits December 23, 2025 12:45

feat: Implement new layout and homepage structure and the favicon

2a2986a

Signed-off-by: Daniel Ntege <danientege785@gmail.com>

feat: Implement new layout and homepage structure and the favicon

7054cbc

Signed-off-by: Daniel Ntege <danientege785@gmail.com>

danielmarv force-pushed the Daniel-nextjs-migration branch from 3b8933b to 7054cbc Compare December 23, 2025 09:45

Update src/components/home/HeroSection.tsx

248e977

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Daniel nextjs migration #248

Daniel nextjs migration #248

Uh oh!

danielmarv commented Dec 22, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Dec 22, 2025

Uh oh!

Copilot AI Dec 22, 2025

Uh oh!

Copilot AI Dec 22, 2025

Uh oh!

Copilot AI Dec 22, 2025

Uh oh!

Copilot AI Dec 22, 2025

Uh oh!

Copilot AI Dec 22, 2025

Uh oh!

Copilot AI Dec 22, 2025

Uh oh!

Copilot AI Dec 22, 2025

Uh oh!

Copilot AI Dec 22, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	import social from '@/data/social.json'
	import social from '@/data-temp/social.json'

	import mainMenu from '@/data/mainMenu.json'
	import mainMenu from '@/data-temp/mainMenu.json'

		@@ -0,0 +1,142 @@
		import Image from 'next/image'
		import Link from 'next/link'

Daniel nextjs migration #248

Are you sure you want to change the base?

Daniel nextjs migration #248

Uh oh!

Conversation

danielmarv commented Dec 22, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants