feat(docs): align docs styling with main site glassmorphic theme

[anirudhxmishra]

Fixes #150

Summary

This PR aligns the Docusaurus docs site styling with the main Img2Num site by introducing a centralized glassmorphic design system and consistent branding.

Changes

• Centralized theme variables and glassmorphic styles in docs/src/css/custom.css
• Added reusable .glass-card component with accessible fallbacks
• Applied glass styling to homepage hero and cards
• Updated navbar logo, favicon, and social preview image
• Ensured dark mode compatibility
• Updated docs README with local development & styling notes

Checklist

• Docs build locally
• Dark mode supported
• No breaking changes
• Assets reused from docs/static/img

Summary by CodeRabbit

• New Features

  • Glassmorphic design system introduced with glass card components and backdrop blur effects.
  • Dark mode color variants and theme support added.

• Documentation

  • Installation and local development sections reorganized and clarified.
  • Setup instructions and deployment guidance improved.

• Bug Fixes

  • Corrected image alt text for accessibility.

• Style

  • Favicon updated.
  • Prism syntax highlighting theme refreshed.
  • Primary color tokens and dark mode styling enhanced.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Updates the docs site: rewrites README, restructures Docusaurus config, adds a glassmorphic design system in CSS, and wraps homepage content with .glass-card. No runtime application logic changes.

Changes

Cohort / File(s)	Summary
Documentation & Content docs/README.md, docs/src/pages/index.md	Rewrote README (branding, Setup, local dev, deployment); wrapped homepage content in a glass-card container, reformatted <img> and fixed alt text.
Docusaurus Configuration docs/docusaurus.config.js	Restructured config (moved algolia into themeConfig, simplified env checks), updated favicon/logo to img/og-icon.png, switched customCss to require.resolve(), adjusted prism themes and metadata layout.
Styling System docs/src/css/custom.css	Added glassmorphic CSS variables and dark/light tokens; introduced .glass-card component with backdrop-filter fallbacks; applied glass styles to hero/container/card and reorganized theme overrides.

Sequence Diagram(s)

(omitted — changes are configuration and styling only)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

• Refactor: Docs Styling - Match Main Site (Glassmorphic Theme & Branding) #150 — Modifies the same docs files to apply Img2Num branding and glassmorphic styling; appears to be the same objective.

Suggested reviewers

• Ryan-Millard

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately captures the main change: aligning Docusaurus docs styling with the glassmorphic theme from the main site.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (1)

docs/docusaurus.config.js (1)

138-145: Remove unnecessary to property on docSidebar navbar item.

The docSidebar navbar item type automatically links to the first document of the specified sidebar, making the to: '/docs' property redundant. Simplify by removing it.

         {
           type: 'docSidebar',
           sidebarId: 'tutorialSidebar',
           position: 'left',
           label: 'Documentation',
-          to: '/docs',
         },

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9e0e1e1 and 3f9f6ca.

⛔ Files ignored due to path filters (1)

• docs/static/img/og-icon.png is excluded by !**/*.png

📒 Files selected for processing (4)

• docs/README.md
• docs/docusaurus.config.js
• docs/src/css/custom.css
• docs/src/pages/index.md

🧰 Additional context used

🧠 Learnings (3)

📚 Learning: 2025-12-20T20:11:28.389Z

Learnt from: Ryan-Millard
Repo: Ryan-Millard/Img2Num PR: 0
File: :0-0
Timestamp: 2025-12-20T20:11:28.389Z
Learning: In the Img2Num repository, all documentation should be properly organized in the docs/docs/ folder structure following the Docusaurus conventions, either as a dedicated category or integrated into existing categories like project-scripts.

Applied to files:

• docs/README.md

📚 Learning: 2025-12-17T22:39:25.704Z

Learnt from: Ryan-Millard
Repo: Ryan-Millard/Img2Num PR: 0
File: :0-0
Timestamp: 2025-12-17T22:39:25.704Z
Learning: In the Img2Num repository, do not create multiple markdown files at the repository root. The README.md at root should remain brief and point to the Docusaurus site.

Applied to files:

• docs/README.md
• docs/docusaurus.config.js

📚 Learning: 2025-12-17T22:39:25.704Z

Learnt from: Ryan-Millard
Repo: Ryan-Millard/Img2Num PR: 0
File: :0-0
Timestamp: 2025-12-17T22:39:25.704Z
Learning: In the Img2Num repository, all documentation must be placed in the docs/docs/ folder following the Docusaurus structure, not at the repository root.

Applied to files:

• docs/README.md

🔇 Additional comments (6)

docs/src/pages/index.md (1)

9-10: Glass-card wrapper looks good.

The wrapper div with className="glass-card" correctly applies the new glassmorphic styling defined in custom.css. The structure is clean and properly opened/closed.

Also applies to: 37-38

docs/src/css/custom.css (1)

50-77: Well-structured glassmorphic component with progressive enhancement.

Good approach using @supports queries to progressively enhance with backdrop-filter while providing solid fallback backgrounds. The -webkit-backdrop-filter prefix ensures Safari compatibility. Dark mode is properly handled for the base .glass-card class.

docs/README.md (1)

23-28: Good addition of styling notes.

The new styling notes section clearly documents where key files live, making it easier for contributors to understand the codebase structure. This aligns well with the repository's documentation practices.

docs/docusaurus.config.js (3)

14-26: Good defensive handling for Algolia configuration.

The conditional check for all three Algolia environment variables before creating the config object is a clean pattern. This prevents runtime errors when the search credentials aren't available (e.g., in local development or CI without secrets).

---

40-42: Note: future.v4: true enables Docusaurus v4 compatibility mode.

This flag opts into upcoming v4 breaking changes early, which is good for forward compatibility. Ensure the team is aware this may introduce subtle behavioral changes as Docusaurus prepares for v4.

---

121-130: Algolia config is optional in Docusaurus v3.9.2 and handles undefined gracefully.

When algolia env vars are missing, passing algolia: undefined is safe. The algolia field in themeConfig is optional, and Docusaurus has already fixed historical issues where undefined algolia would break the searchbar. The theme simply omits search functionality when algolia is not configured, without generating warnings or errors.

[anirudhxmishra]

Thanks! All suggested fixes have been applied in the latest commit.

[anirudhxmishra]

Thanks! I’ve resolved the rebase conflict in docs/docusaurus.config.js,
completed the rebase onto main, and force-pushed the updated branch.

[anirudhxmishra]

Thanks! All requested changes are addressed.
The branch is rebased onto main and ready for review.
Happy to make any further tweaks if needed.
@Ryan-Millard

[Ryan-Millard]

Hi. Please will you style the entire site in the same way that the main app has been styled.

There is a dark mode coming soon (see #121 for reference), so it may be worthwhile to copy the current light mode styles from there, then wait for it to be merged before using the dark mode styles (since they may change after the review I just left on it).

What I'd like from this PR:

1. All images updated - social, logo, etc. (Docusaurus included defaults that have not yet been updated to Img2Num's)
2. Background updated to match the setup in #121 (background image with transparent background and a dynamic background that updates when the user clicks on the theme switch button)
3. Glassmorphic styles from the main app being ported over into the Docusaurus app so we can maintain consistency. For example, the table below on the Introduction to FFTs page needs to look like the table example below it from the Credits page:

[Ryan-Millard]

Hi @anirudhxmishra! I'm just checking in to see if you're still interested in this pull request.

Do you need any help or would you like someone else to take over from you in this PR?

[anirudhxmishra]

@Ryan-Millard I ll work on it been busy due to some work.
can you please once again tell me what i have to do ?

[Ryan-Millard]

@Ryan-Millard I ll work on it been busy due to some work. can you please once again tell me what i have to do ?

Thanks for the update!

#157 requires the Docusaurus app to be styled in the same way as the main React app is - that means reusing the global CSS code and glassmorphic styles. For example, the background needs to be changed to the pink color that the main app uses in light mode and the plum/purple color that it uses in dark mode.

[anirudhxmishra]

@Ryan-Millard, due to unforeseen work commitments, I am unable to proceed. Would it be possible to have someone else take over?

[Ryan-Millard]

@Ryan-Millard, due to unforeseen work commitments, I am unable to proceed. Would it be possible to have someone else take over?

@anirudhxmishra, thank you for the update. Please will you comment /untake on #150 to free it up for someone else to work on.

I'm going to close this pull request since it is incomplete and won't be fixing #150.

[anirudhxmishra]

/untake on #150