Merge branch 'main' into feat/heatmap-background-user-card

.gitignore

@@ -10,6 +10,7 @@ __pycache__
 .mypy_cache
 .pytest_cache
 .python_history
+.python-version
 .ruff_cache
 .vscode
 *.code-workspace

CONTRIBUTING.md

@@ -159,6 +159,10 @@ If you plan to fetch GitHub OWASP data locally, follow these additional steps:
 
 #### NestBot Development
 
+:exclamation: **Never install your development Slack application in the OWASP Slack workspace.
+:exclamation: Doing so will interfere with OWASP Nest functionality and trigger unnecessary notifications to Slack admins.
+:exclamation: Always use a different workspace (create your own if needed).**
+
 To setup NestBot development environment, follow these steps:
 
 1. **Set Up ngrok**:
@@ -289,6 +293,18 @@ git checkout -b feature/my-feature-name
 - Address feedback from maintainers during code review.
 - Once approved, your PR will be merged into the main branch.
 
+## Troubleshooting
+
+- **"Unexpected character" error during application execution or Docker image building**
+  This error is usually caused by incorrect encoding of `.env` files.
+
+  - Open the `.env` files in a text editor (e.g., VS Code) and save them as "UTF-8 without BOM."
+  - Restart the application with `make run` and verify the error is resolved.
+
+  Tips:
+  - Ensure consistent file encoding using a code editor or linter.
+  - If the issue persists, check the project's documentation or issue tracker.
+
 ## Code of Conduct
 
 Please follow the [Code of Conduct](https://github.com/OWASP/Nest/blob/main/CODE_OF_CONDUCT.md) when interacting with other contributors.

backend/pyproject.toml

@@ -34,7 +34,7 @@ gunicorn = "^23.0.0"
 humanize = "^4.11.0"
 lxml = "^5.3.0"
 markdown = "^3.7"
-openai = "^1.59.7"
+openai = "^1.59.9"
 psycopg = "^3.2.4"
 pygithub = "^2.5.0"
 python = "^3.13"
@@ -47,7 +47,7 @@ slack-bolt = "^1.22.0"
 [tool.poetry.group.dev.dependencies]
 djlint = "^1.36.4"
 isort = "^5.13.2"
-pre-commit = "^4.0.0"
+pre-commit = "^4.1.0"
 ruff = "^0.9.2"
 
 [tool.poetry.group.test.dependencies]

frontend/__tests__/src/pages/ProjectDetails.test.tsx

@@ -38,7 +38,7 @@ describe('ProjectDetailsPage Component', () => {
     await waitFor(() => {
       expect(screen.getByText('Contributor 1')).toBeInTheDocument()
     })
-    expect(screen.queryByText('Contributor 6')).not.toBeInTheDocument()
+    expect(screen.queryByText('Contributor 7')).not.toBeInTheDocument()
   })
 
   test('handles contributors with missing names gracefully', async () => {

frontend/package.json

@@ -68,8 +68,8 @@
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
     "@types/react-gtm-module": "^2.0.4",
-    "@typescript-eslint/eslint-plugin": "^8.18.0",
-    "@typescript-eslint/parser": "^8.20.0",
+    "@typescript-eslint/eslint-plugin": "^8.21.0",
+    "@typescript-eslint/parser": "^8.21.0",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "babel-plugin-transform-import-meta": "^2.3.2",
@@ -94,9 +94,9 @@
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "typescript": "~5.7.3",
-    "typescript-eslint": "^8.19.1",
+    "typescript-eslint": "^8.21.0",
     "util": "^0.12.5",
-    "vite": "^6.0.7",
+    "vite": "^6.0.11",
     "vite-plugin-environment": "^1.1.3"
   },
   "engines": {

frontend/src/components/Card.tsx

@@ -56,7 +56,12 @@ const Card = ({
           )}
           {/* Project title and link */}
           <a href={url} target="_blank" rel="noopener noreferrer" className="flex-1">
-            <h1 className="max-w-full break-words text-base font-semibold dark:text-sky-600 sm:break-normal sm:text-lg lg:text-2xl">
+            <h1
+              className="max-w-full break-words text-base font-semibold dark:text-sky-600 sm:break-normal sm:text-lg lg:text-2xl"
+              style={{
+                transition: 'color 0.3s ease',
+              }}
+            >
               {title}
             </h1>
           </a>

frontend/src/components/Footer.tsx

@@ -23,7 +23,7 @@ export default function Footer() {
             <div key={section.title} className="space-y-4">
               <button
                 onClick={() => toggleSection(section.title)}
-                className="flex w-full items-center justify-between text-left text-lg font-semibold focus:outline-none focus:ring-2 focus:ring-slate-400 lg:cursor-default lg:focus:ring-0"
+                className="flex w-full items-center justify-between text-left text-lg font-semibold focus:outline-none focus:ring-slate-400 lg:cursor-default"
                 aria-expanded={openSection === section.title}
                 aria-controls={`footer-section-${section.title}`}
               >

frontend/src/components/ModeToggle.tsx

@@ -1,6 +1,8 @@
 import { faMoon, faSun } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useState, useEffect } from 'react'
+import { Tooltip } from 'react-tooltip'
+import { themeToggleTooltip } from 'utils/constants'
 
 import { cn } from 'utils/utility'
 
@@ -29,7 +31,12 @@ function ModeToggle({ className }: { className?: string }) {
       <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
         <FontAwesomeIcon icon={dark ? faMoon : faSun} className="h-4 w-4" fixedWidth />
       </span>
-      <label className="relative inline-flex cursor-pointer items-center">
+      <label
+        className="relative inline-flex cursor-pointer items-center"
+        data-tooltip-id="mode-toggle-tooltip"
+        data-tooltip-place="bottom-start"
+        data-tooltip-content={dark ? 'Enable light mode' : 'Enable dark mode'}
+      >
         <input
           type="checkbox"
           className="peer sr-only"
@@ -38,6 +45,7 @@ function ModeToggle({ className }: { className?: string }) {
         />
         <div className="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white dark:border-gray-600 dark:bg-gray-700"></div>
       </label>
+      <Tooltip id="mode-toggle-tooltip" style={themeToggleTooltip} />
     </div>
   )
 }

frontend/src/components/SponsorButton.tsx

@@ -1,15 +1,25 @@
-import { faHeart } from '@fortawesome/free-regular-svg-icons'
+// import { faHeart } from '@fortawesome/free-regular-svg-icons'
+import { faHeart as faRegularHeart } from '@fortawesome/free-regular-svg-icons' // Outline Heart
+import { faHeart as faSolidHeart } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useState } from 'react'
 
 const SponsorButton = () => {
+  const [isHovered, setIsHovered] = useState(false)
   return (
     <a
       href={'https://owasp.org/donate/?reponame=www-project-nest&title=OWASP+Nest'}
       target="_blank"
       rel="noopener noreferrer"
       className="group flex items-center space-x-2 divide-solid rounded-md border-2 border-solid bg-[#8faac6] px-4 py-2 font-medium text-[#253247] shadow-[0_1px_1px_-1px_rgba(0,0,0,0.05)] transition-all duration-300 hover:bg-[#98AFC7] hover:shadow-[0_1px_1px_-1px_rgba(0,0,0,0.05),0_1px_1px_0_rgba(0,0,0,0.1)] dark:bg-[#2D3B4F] dark:text-[#98AFC7] dark:shadow-[0_1px_1px_-1px_rgba(255,255,255,0.05)] dark:hover:bg-[#2D3B4F] dark:hover:shadow-[0_1px_1px_-1px_rgba(255,255,255,0.05),0px_1px_1px_0px_rgba(255,255,255,0.05)]"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
-      <FontAwesomeIcon icon={faHeart} color="#b55f95" focusable="true" />
+      <FontAwesomeIcon
+        icon={isHovered ? faSolidHeart : faRegularHeart}
+        className="heart-icon"
+        color={isHovered ? '#d9156c' : '#b55f95'}
+      />
       <span>Sponsor</span>
     </a>
   )