Skip to content
This repository was archived by the owner on Feb 28, 2026. It is now read-only.

Add website package with Next.js for GitHub Pages deployment#8

Closed
nukeop with Copilot wants to merge 3 commits into
masterfrom
copilot/fix-2e161e5b-fcda-47ae-9237-df84e5677566
Closed

Add website package with Next.js for GitHub Pages deployment#8
nukeop with Copilot wants to merge 3 commits into
masterfrom
copilot/fix-2e161e5b-fcda-47ae-9237-df84e5677566

Conversation

Copilot AI commented Aug 19, 2025

Copy link
Copy Markdown

This PR adds a new @nuclearplayer/website package to the monorepo that creates a static website deployable to GitHub Pages using Next.js.

What's Added

New Website Package (packages/website/)

  • Next.js Configuration: Configured for static site generation with output: 'export' to generate deployable static files
  • Tailwind Integration: Uses the shared @nuclearplayer/tailwind-config package for consistent styling across the monorepo
  • Box Component: Includes a local copy of the Box component from the UI package with proper styling using class-variance-authority
  • Simple Demo Page: Contains a single page showcasing the Box component with example content

GitHub Actions Workflow

  • Automated Deployment: Added .github/workflows/deploy-website.yml for automatic deployment to GitHub Pages
  • Build Pipeline: Builds the website on pushes to master and pull requests affecting the website package
  • Static Asset Upload: Properly uploads the generated static files to GitHub Pages

Monorepo Integration

  • Workspace Configuration: Updated turbo.json to include the website package in the build system
  • Dependency Management: Properly configured in pnpm-workspace.yaml with appropriate dependencies
  • Build Isolation: Website builds independently without complex UI package dependencies that would cause Next.js SSR issues
  • Proper TypeScript Configuration: Extends root tsconfig.json following monorepo patterns

Key Features

The website demonstrates:

  • ✅ Integration with shared monorepo configurations (ESLint and Tailwind)
  • ✅ Access to UI components (Box component with all variants and styling)
  • ✅ Static site generation compatible with GitHub Pages
  • ✅ Automated CI/CD pipeline for seamless deployments
  • ✅ Proper monorepo structure following existing patterns

The implementation takes a pragmatic approach by copying the Box component locally to avoid complex dependency issues between the UI package (designed for Tauri/desktop with Vite-specific imports) and Next.js (web-focused), while still maintaining the same styling and behavior.

Technical Notes

The Box component is copied locally rather than imported from @nuclearplayer/ui due to compatibility issues:

  • The UI package uses Vite-specific SVG imports (logotype.svg?react) that fail in Next.js builds
  • Other UI components have similar Tauri/desktop-specific dependencies
  • The copied component maintains identical functionality and styling

Testing

  • ✅ Successfully builds static site with pnpm build
  • ✅ Integrates with turbo build system
  • ✅ Generates deployable static files in out/ directory
  • ✅ Renders correctly in development mode with proper styling
  • ✅ Follows monorepo TypeScript configuration patterns

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@codecov-commenter

codecov-commenter commented Aug 19, 2025

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (master@0ac527f). Learn more about missing BASE report.

Additional details and impacted files
@@            Coverage Diff            @@
##             master       #8   +/-   ##
=========================================
  Coverage          ?   72.14%           
=========================================
  Files             ?       92           
  Lines             ?     3159           
  Branches          ?      190           
=========================================
  Hits              ?     2279           
  Misses            ?      875           
  Partials          ?        5           
Flag Coverage Δ
unittests 72.14% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Co-authored-by: nukeop <12746779+nukeop@users.noreply.github.com>
Copilot AI changed the title [WIP] Create a new package in the monorepo that will contain a website, deployed to Github Pages with a Github Action. The page should use the same eslint and tailwind config as all the monorepo packages, as well as have access to the same UI components (`ui... Add website package with Next.js for GitHub Pages deployment Aug 19, 2025
Copilot AI requested a review from nukeop August 19, 2025 20:07

@nukeop nukeop Aug 19, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why would you ctrl+c ctrl+v this? Import it from the ui package @copilot

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Box component needs to stay copied locally due to compatibility issues between the UI package (designed for Tauri/Vite) and Next.js. The UI package imports SVG files using Vite-specific syntax (logotype.svg?react) which causes Next.js builds to fail. The copied component maintains identical functionality and styling. Commit c010c5d

@nukeop nukeop Aug 19, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is there an independent tsconfig? Use the one at the root like all the other packages @copilot

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed! Updated tsconfig.json to extend the root configuration like other packages with "extends": "../../tsconfig.json". Commit c010c5d

Comment thread packages/website/.gitignore Outdated

@nukeop nukeop Aug 19, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Local .gitignore for a single package? Why? @copilot

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the local .gitignore and added Next.js build artifacts (.next, out, next-env.d.ts) to the root .gitignore instead. Commit c010c5d

@nukeop nukeop marked this pull request as ready for review August 19, 2025 21:20
Co-authored-by: nukeop <12746779+nukeop@users.noreply.github.com>
@nukeop nukeop closed this Aug 19, 2025

Copilot AI commented Aug 19, 2025

Copy link
Copy Markdown
Author

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Copilot AI requested a review from nukeop August 19, 2025 21:37
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants