Rebuild website with Next.js and enhance layout components#274
Closed
danielmarv wants to merge 10 commits intohiero-ledger:mainfrom
Closed
Rebuild website with Next.js and enhance layout components#274danielmarv wants to merge 10 commits intohiero-ledger:mainfrom
danielmarv wants to merge 10 commits intohiero-ledger:mainfrom
Conversation
…folder Signed-off-by: Daniel Ntege <danientege785@gmail.com>
…folder Signed-off-by: Daniel Ntege <danientege785@gmail.com>
…folder Signed-off-by: Daniel Ntege <danientege785@gmail.com>
Signed-off-by: Daniel Ntege <danientege785@gmail.com>
Signed-off-by: Daniel Ntege <danientege785@gmail.com>
chore: initialization of the website rebuild to nextjs in the nextjs folder
…bility Signed-off-by: Daniel Ntege <danientege785@gmail.com>
…layout Signed-off-by: Daniel Ntege <danientege785@gmail.com>
Signed-off-by: Daniel Ntege <danientege785@gmail.com>
✅ Deploy Preview for hiero-open-source ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (97)
📒 Files selected for processing (20)
📝 WalkthroughWalkthroughThis pull request introduces a new Next.js project scaffold within the repository. It adds configuration files, component structures, global styling with Tailwind CSS v4, a responsive navigation menu, static data files, and updates root-level ignore patterns to accommodate the new Next.js subdirectory while excluding its lockfile from analysis. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR bootstraps a new nextjs/ Next.js + TypeScript + Tailwind v4 application to begin migrating the Hiero website from Hugo, adding initial layout components and static site data alongside deployment/linting configuration.
Changes:
- Adds a new Next.js app structure (
app/,components/, configs) with Tailwind v4 styling and shared layout (Header/Footer/Menu). - Introduces static JSON data for repository stats and the Technical Steering Committee.
- Adds a large set of public assets (logos/icons/images) and deployment/tooling config (ESLint, Nixpacks, Codacy, gitignore adjustments).
Reviewed changes
Copilot reviewed 18 out of 117 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| nextjs/tsconfig.json | TypeScript configuration for the Next.js app (incl. path alias). |
| nextjs/postcss.config.mjs | PostCSS config for Tailwind v4 integration. |
| nextjs/package.json | App dependencies/scripts for Next.js + Tailwind + tooling. |
| nextjs/nixpacks.toml | Nixpacks build/install/start pipeline for deployment. |
| nextjs/next.config.ts | Next.js configuration (image remote patterns). |
| nextjs/eslint.config.mjs | Flat ESLint config using Next.js presets and ignores. |
| nextjs/global.d.ts | Global TS module declaration for CSS imports. |
| nextjs/README.md | Initial Next.js project README. |
| nextjs/.gitignore | Next.js-scoped gitignore for build artifacts and env files. |
| nextjs/app/layout.tsx | Root layout with fonts, metadata, header/footer scaffolding. |
| nextjs/app/page.tsx | Initial homepage migration notice and links. |
| nextjs/app/globals.css | Tailwind v4 theme tokens and global styles ported from Hugo. |
| nextjs/components/Container.tsx | Shared layout container wrapper. |
| nextjs/components/Header.tsx | Fixed header with logo + menu. |
| nextjs/components/Menu.tsx | Responsive navigation menu (mobile overlay + desktop nav). |
| nextjs/components/Footer.tsx | Global footer with LF Projects policy link. |
| nextjs/data/repository_stats.json | Static repository stats seed data. |
| nextjs/data/technical_steering_committee.json | Static TSC member seed data. |
| .gitignore | Adjusts root ignore rules to ignore root /public/ but allow nextjs/public/. |
| .codacy.yaml | Excludes nextjs/pnpm-lock.yaml from Codacy analysis. |
| nextjs/public/next.svg | Adds Next.js default public asset. |
| nextjs/public/vercel.svg | Adds Vercel default public asset. |
| nextjs/public/window.svg | Adds default public icon asset. |
| nextjs/public/file.svg | Adds default public icon asset. |
| nextjs/public/globe.svg | Adds default public icon asset. |
| nextjs/public/images/profile-hiero.png | Adds Hiero profile image asset. |
| nextjs/public/images/members/exploreriii.png | Adds member image asset. |
| nextjs/public/images/members/Mounil2005.png | Adds member image asset. |
| nextjs/public/images/Hiero-fair-cover.png | Adds cover image asset. |
| nextjs/public/images/Hiero-Logo-ioBuilders.png | Adds logo asset. |
| nextjs/public/images/Hiero-Logo-Sentx.png | Adds logo asset. |
| nextjs/public/images/Hiero-Logo-Outline.svg | Adds outline logo asset. |
| nextjs/public/images/Hiero-Logo-IBM.png | Adds logo asset. |
| nextjs/public/images/Hiero-Logo-Hgraph.png | Adds logo asset. |
| nextjs/public/images/Hiero-Logo-Hedera.png | Adds logo asset. |
| nextjs/public/images/Hiero-Logo-Hashgraph.png | Adds logo asset. |
| nextjs/public/images/Hiero-Logo-HashPack.png | Adds logo asset. |
| nextjs/public/images/Hiero-Logo-DiamondStandard.svg | Adds logo asset. |
| nextjs/public/images/Hiero-Logo-Calaxy.png | Adds logo asset. |
| nextjs/public/images/Hiero-Icon.svg | Adds icon asset. |
| nextjs/public/images/Hiero-Icon-wLogo.svg | Adds icon+wordmark asset. |
| nextjs/public/images/Hiero-Icon-wLogo-white-text.svg | Adds icon+wordmark (white text) asset. |
| nextjs/public/images/Hiero-Icon-Timeline-1.svg | Adds timeline icon asset. |
| nextjs/public/images/Hiero-Icon-Timeline-2.svg | Adds timeline icon asset. |
| nextjs/public/images/Hiero-Icon-Timeline-3.svg | Adds timeline icon asset. |
| nextjs/public/images/Hiero-Icon-Timeline-4.svg | Adds timeline icon asset. |
| nextjs/public/images/Hiero-Icon-Timeline-5.svg | Adds timeline icon asset. |
| nextjs/public/images/Hiero-Icon-Timeline-6.svg | Adds timeline icon asset. |
| nextjs/public/images/Hiero-Icon-Secure.svg | Adds feature icon asset. |
| nextjs/public/images/Hiero-Icon-Quote-Right.svg | Adds quote icon asset. |
| nextjs/public/images/Hiero-Icon-Quote-Left.svg | Adds quote icon asset. |
| nextjs/public/images/Hiero-Icon-OpenSource.svg | Adds feature icon asset. |
| nextjs/public/images/Hiero-Icon-Open.svg | Adds feature icon asset. |
| nextjs/public/images/Hiero-Icon-Nav-Menu.svg | Adds navigation icon asset. |
| nextjs/public/images/Hiero-Icon-ModalClose.svg | Adds modal close icon asset. |
| nextjs/public/images/Hiero-Icon-Leaderless.svg | Adds feature icon asset. |
| nextjs/public/images/Hiero-Icon-Heart.svg | Adds icon asset. |
| nextjs/public/images/Hiero-Icon-Github.svg | Adds GitHub icon asset. |
| nextjs/public/images/Hiero-Icon-Fast.svg | Adds feature icon asset. |
| nextjs/public/images/Hiero-Icon-Fair.svg | Adds feature icon asset. |
| nextjs/public/images/Hiero-Icon-Decentralized.svg | Adds feature icon asset. |
| nextjs/public/images/Hiero-Favicon.svg | Adds favicon asset for Next.js metadata. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
Comment on lines
+21
to
+26
| <a | ||
| href="/blog" | ||
| className="w-full rounded-full border border-white px-6 py-3 text-center font-medium text-white no-underline transition-colors hover:bg-white hover:text-charcoal sm:w-auto sm:min-w-[12rem]" | ||
| > | ||
| Blog (Next.js) | ||
| </a> |
There was a problem hiding this comment.
This is an internal navigation to /blog, but it's implemented as a plain <a href> which will trigger a full page reload. Prefer next/link for internal routes to preserve client-side navigation and prefetch behavior.
| "firstName": "Richard", | ||
| "lastName":"Bair", | ||
| "gitHubAccount": "https://github.com/rbair23", | ||
| "photo": "richard.jpg", |
There was a problem hiding this comment.
This entry references photo: "richard.jpg", but there is no corresponding file in nextjs/public/images/ (or nextjs/public/images/members/) in this PR. If/when this JSON is rendered, it will produce broken images. Either add the referenced photo assets, or update photo to the correct existing path/filename.
Suggested change
| "photo": "richard.jpg", |
|
|
||
| <nav | ||
| id="navigation" | ||
| className={`${isOpen ? "active-navigation" : "hidden"} fixed inset-0 z-50 flex-col items-center justify-start overflow-y-auto bg-black px-6 pt-24 pb-10 text-white sm:relative sm:inset-auto sm:z-auto sm:h-auto sm:w-9/12 sm:max-w-xl sm:flex sm:flex-row sm:items-center sm:justify-end sm:overflow-visible sm:bg-transparent sm:px-0 sm:pt-0 sm:pb-0 sm:text-inherit`} |
There was a problem hiding this comment.
nav uses flex-col, items-center, etc. but does not include the flex display utility when isOpen is true. Since active-navigation isn't defined anywhere in the codebase, the opened mobile menu will render as a non-flex block and the layout rules won't apply. Consider replacing active-navigation with flex (and optionally using hidden when closed) so the menu opens with the intended flex layout.
Suggested change
| className={`${isOpen ? "active-navigation" : "hidden"} fixed inset-0 z-50 flex-col items-center justify-start overflow-y-auto bg-black px-6 pt-24 pb-10 text-white sm:relative sm:inset-auto sm:z-auto sm:h-auto sm:w-9/12 sm:max-w-xl sm:flex sm:flex-row sm:items-center sm:justify-end sm:overflow-visible sm:bg-transparent sm:px-0 sm:pt-0 sm:pb-0 sm:text-inherit`} | |
| className={`${isOpen ? "flex" : "hidden"} fixed inset-0 z-50 flex-col items-center justify-start overflow-y-auto bg-black px-6 pt-24 pb-10 text-white sm:relative sm:inset-auto sm:z-auto sm:h-auto sm:w-9/12 sm:max-w-xl sm:flex sm:flex-row sm:items-center sm:justify-end sm:overflow-visible sm:bg-transparent sm:px-0 sm:pt-0 sm:pb-0 sm:text-inherit`} |
| <nav | ||
| id="navigation" | ||
| className={`${isOpen ? "active-navigation" : "hidden"} fixed inset-0 z-50 flex-col items-center justify-start overflow-y-auto bg-black px-6 pt-24 pb-10 text-white sm:relative sm:inset-auto sm:z-auto sm:h-auto sm:w-9/12 sm:max-w-xl sm:flex sm:flex-row sm:items-center sm:justify-end sm:overflow-visible sm:bg-transparent sm:px-0 sm:pt-0 sm:pb-0 sm:text-inherit`} | ||
| aria-hidden={!isOpen && pathname !== undefined} |
There was a problem hiding this comment.
aria-hidden is set to true whenever isOpen is false, but the nav is still visible on sm+ due to sm:flex overriding hidden. This makes the desktop navigation visible but hidden from assistive technologies. Either remove aria-hidden (CSS display:none already removes hidden content), or compute it so it's only true when the nav is actually hidden (mobile closed state).
Suggested change
| aria-hidden={!isOpen && pathname !== undefined} |
| return ( | ||
| <html lang="en"> | ||
| <body className={`${spaceGrotesk.className} ${spaceGrotesk.variable} ${ibmPlexMono.variable}`}> | ||
| <header className="relative h-22.5"> |
There was a problem hiding this comment.
h-22.5 is not a default Tailwind height token, and there is no custom spacing token defined in globals.css to back it. If this class doesn't compile, the wrapper header won't reserve space for the fixed Header, causing page content to sit underneath it. Use an arbitrary height (e.g. h-[90px]) or define the spacing token in the Tailwind theme.
Suggested change
| <header className="relative h-22.5"> | |
| <header className="relative h-[90px]"> |
Comment on lines
+21
to
+25
| ], | ||
| "paths": { | ||
| "@/*": ["./*"] | ||
| } | ||
| }, |
There was a problem hiding this comment.
paths is configured for the @/* alias, but compilerOptions.baseUrl is missing. TypeScript only applies paths mapping when a baseUrl is set, so imports like @/components/... may fail type-checking/build. Add "baseUrl": "." (or the appropriate base directory) alongside paths.
| "dev": "next dev", | ||
| "build": "next build", | ||
| "start": "next start", | ||
| "lint": "eslint" |
There was a problem hiding this comment.
The lint script is set to eslint without any file/directory arguments. With ESLint v9 this typically exits with a usage error (no target files) and will fail CI. Consider switching to next lint (recommended for Next.js) or eslint . / eslint "**/*.{ts,tsx,js,jsx}".
Suggested change
| "lint": "eslint" | |
| "lint": "next lint" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This pull request sets up the initial structure for a new Next.js-based Hiero website, migrating from the previous Hugo site. It introduces a modern React/Next.js application with TypeScript, Tailwind CSS, and essential project configuration files. The PR adds foundational components, layout, and static data for the site, along with configuration for development, linting, deployment, and code quality.
The most important changes are:
1. Next.js Application Bootstrapping
tsconfig.json,package.json,next.config.ts, andpostcss.config.mjs. Tailwind CSS and other dependencies are configured for styling and markdown support. [1] [2] [3] [4]2. Core Application Layout and Components
app/layout.tsx, including global font configuration, metadata, and structure for header, footer, and main content.Header,Footer,Menu, andContainer, providing navigation, branding, and consistent page structure. [1] [2] [3] [4]app/page.tsxwith a migration notice and links to the repository and blog.3. Static Data for Site Content
4. Development, Linting, and Deployment Configuration
.gitignorewith standard Node/Next.js exclusions. [1] [2]nixpacks.tomlfile to support reproducible builds and deployment with Nixpacks.5. Code Quality and Tooling
.codacy.yamlto exclude lock files from analysis, improving code quality checks.These changes provide a solid, modern foundation for further development of the Hiero website on Next.js.
Changes Made
Related Issues
Screenshots (if applicable)
Checklist
Deployment Notes
Summary by CodeRabbit
New Features
Chores