feat: complete landing page redesign with UI/UX improvements - #1
Conversation
📝 WalkthroughWalkthroughThe pull request adds a responsive landing page with demo and algorithm content, updates build configuration, and adds cPanel deployment through GitHub Actions and FTP. ChangesLanding page experience
cPanel deployment
Estimated code review effort: 3 (Moderate) | ~20 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (1)
.github/workflows/deploy.yml (1)
16-19: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick winMake the production build reproducible.
The workflow does not select a Node.js version and uses
npm install. If a lockfile exists, usenpm ciso dependency and manifest mismatches fail instead of being repaired during deployment. Also configure the repository's declared Node.js version withactions/setup-node. npm documentsnpm cias the clean-install command for CI and deployment. (docs.npmjs.com)🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.github/workflows/deploy.yml around lines 16 - 19, Update the “🔨 Install dependencies and build” workflow step to configure Node.js using actions/setup-node with the repository’s declared version, then replace npm install with npm ci so deployments use the lockfile reproducibly and fail on dependency or manifest mismatches; keep npm run build unchanged.Source: MCP tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.cpanel.yml:
- Around line 4-5: The deployment configuration has two publishers targeting the
same production directory, with .cpanel.yml copying the repository root while
.github/workflows/deploy.yml syncs dist/. Make one mechanism authoritative:
preferably remove the root-copy commands from .cpanel.yml and retain the
workflow’s dist/ deployment; no direct change is required in
.github/workflows/deploy.yml.
In @.github/workflows/deploy.yml:
- Around line 3-11: Add workflow-level concurrency for the production deployment
workflow, using a stable workflow/ref-based group and setting cancel-in-progress
to false so queued main-branch runs execute sequentially. Apply this near the
existing on and jobs configuration without changing the deploy job behavior.
- Around line 21-28: Update the “📂 Sync files” FTP-Deploy-Action configuration
to set protocol to ftps for the credentialed upload, and configure or verify its
port against the cPanel FTPS port while preserving the existing server,
credentials, directories, and action version.
In `@src/components/Landing/LandingPage.css`:
- Around line 282-293: Update the .code-block CSS rule by replacing the
deprecated word-break: break-word declaration with overflow-wrap: anywhere,
preserving the existing broken-token wrapping behavior and all other styling.
In `@src/components/Landing/LandingPage.jsx`:
- Around line 30-33: Update the href of the Source anchor in LandingPage to
point to the project repository diusazzad/algorithms_visualization instead of
the diusazzad profile, while preserving the existing target, rel, styling, and
label.
- Around line 37-57: Update the “Visualizer Live Demo” section and its View Demo
destination so it does not present placeholder text as a live demo: embed the
available recording in the preview content, or redirect the CTA to /app until
demo media exists. Remove the “Add your screen-recorded GIF here!” placeholder
from the demo-preview markup.
- Around line 159-160: Update the LandingPage instructions to tell contributors
to add the new algorithm to Visualizer.jsx’s frame-selection mapping, alongside
importing the hook and adding the Control Panel button, so frame generation
supports the selected value. Revise the claim that no React state changes are
required to acknowledge any state updates needed for the new control and
algorithm selection.
---
Nitpick comments:
In @.github/workflows/deploy.yml:
- Around line 16-19: Update the “🔨 Install dependencies and build” workflow
step to configure Node.js using actions/setup-node with the repository’s
declared version, then replace npm install with npm ci so deployments use the
lockfile reproducibly and fail on dependency or manifest mismatches; keep npm
run build unchanged.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: cf6c4eea-3ec3-4c34-9f74-25a9617ee5f0
⛔ Files ignored due to path filters (2)
node_modules/.package-lock.jsonis excluded by!**/node_modules/**package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (7)
.cpanel.yml.github/workflows/deploy.ymlpackage.jsonsrc/components/Landing/LandingPage.csssrc/components/Landing/LandingPage.jsxsrc/index.cssvite.config.js
| - export DEPLOYPATH=/home/sfxglllk/algo.zengfy.top/ | ||
| - /bin/cp -R . $DEPLOYPATH |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | 🏗️ Heavy lift
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== tracked deployment files =="
git ls-files | rg '(^\.cpanel\.yml$|\.github/workflows/deploy\.yml$|cpanel|deploy|README|package)' || true
echo
echo "== .cpanel.yml =="
if [ -f .cpanel.yml ]; then cat -n .cpanel.yml; else echo "missing"; fi
echo
echo "== workflow deploy.yml =="
if [ -f .github/workflows/deploy.yml ]; then cat -n .github/workflows/deploy.yml; else echo "missing"; fi
echo
echo "== relevant references to cPanel/workflows/dist =="
rg -n "DEPLOYPATH|algorithms|algo\.zengfy|server-dir|local-dir|dist|dist/|github\.cpanel|cpanel|deploy" . -g '!node_modules' -g '!dist' -g '!build' || true
echo
echo "== package/build config =="
for f in package.json .gitignore README.md; do
if [ -f "$f" ]; then
echo "--- $f ---"
sed -n '1,220p' "$f"
fi
doneRepository: diusazzad/algorithms_visualization
Length of output: 6361
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== build scripts summary =="
if [ -f package.json ]; then node - <<'JS'
const fs=require('fs');
const pkg=JSON.parse(fs.readFileSync('package.json','utf8'));
console.log(JSON.stringify({scripts: pkg.scripts, build: pkg.config?.build}, null, 2));
JS
fiRepository: diusazzad/algorithms_visualization
Length of output: 321
Use one production artifact and one deployment owner.
Both deploy mechanisms target algo.zengfy.top/, but .cpanel.yml copies the repository root and the workflow syncs ./dist/. If both run, they can overwrite each other and leave stale files in production. Build/copy dist in .cpanel.yml if this hook is intended, or remove it and keep the workflow as the only publisher.
📍 Affects 2 files
.cpanel.yml#L4-L5(this comment).github/workflows/deploy.yml#L27-L28
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.cpanel.yml around lines 4 - 5, The deployment configuration has two
publishers targeting the same production directory, with .cpanel.yml copying the
repository root while .github/workflows/deploy.yml syncs dist/. Make one
mechanism authoritative: preferably remove the root-copy commands from
.cpanel.yml and retain the workflow’s dist/ deployment; no direct change is
required in .github/workflows/deploy.yml.
| on: | ||
| push: | ||
| branches: | ||
| - main | ||
|
|
||
| jobs: | ||
| deploy: | ||
| name: FTP Deploy | ||
| runs-on: ubuntu-latest |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== workflow files =="
git ls-files '.github/workflows/*' || true
echo
echo "== deploy.yml =="
if [ -f .github/workflows/deploy.yml ]; then
nl -ba .github/workflows/deploy.yml | sed -n '1,160p'
else
echo "missing .github/workflows/deploy.yml"
fi
echo
echo "== find concurrency declarations in workflows =="
rg -n "concurrency:|cancel-in-progress:" .github/workflows || true
echo
echo "== package scripts =="
if [ -f package.json ]; then
node -e "const p=require('./package.json'); console.log(JSON.stringify({scripts:p.scripts, devDependencies:p.devDependencies, dependencies:p.dependencies}, null, 2))"
fiRepository: diusazzad/algorithms_visualization
Length of output: 281
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== deploy.yml =="
awk '{printf "%6d\t%s\n", NR, $0}' .github/workflows/deploy.yml
echo
echo "== concurrency declarations in workflows =="
awk 'BEGIN{pat="concurrency:|cancel-in-progress:"} $0 ~ pat{printf "%6d\t%s\n", NR, $0}' .github/workflows/deploy.yml || true
echo
echo "== package scripts =="
if [ -f package.json ]; then
node -e "const p=require('./package.json'); console.log(JSON.stringify({scripts:p.scripts, devDependencies:p.devDependencies, dependencies:p.dependencies}, null, 2))"
fiRepository: diusazzad/algorithms_visualization
Length of output: 1737
Serialize production deployments.
GitHub Actions runs workflows concurrently by default, so multiple main pushes can start deploy jobs at the same time. FTP syncs can overwrite newer files with older output if an older run finishes after a newer run. Add a workflow/ref concurrency group and choose cancel-in-progress: false for FTP uploads.
Suggested fix
on:
push:
branches:
- main
+concurrency:
+ group: ${{ github.workflow }}-${{ github.ref }}
+ cancel-in-progress: false
+
jobs:📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| on: | |
| push: | |
| branches: | |
| - main | |
| jobs: | |
| deploy: | |
| name: FTP Deploy | |
| runs-on: ubuntu-latest | |
| on: | |
| push: | |
| branches: | |
| - main | |
| concurrency: | |
| group: ${{ github.workflow }}-${{ github.ref }} | |
| cancel-in-progress: false | |
| jobs: | |
| deploy: | |
| name: FTP Deploy | |
| runs-on: ubuntu-latest |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.github/workflows/deploy.yml around lines 3 - 11, Add workflow-level
concurrency for the production deployment workflow, using a stable
workflow/ref-based group and setting cancel-in-progress to false so queued
main-branch runs execute sequentially. Apply this near the existing on and jobs
configuration without changing the deploy job behavior.
Source: MCP tools
| - name: 📂 Sync files | ||
| uses: SamKirkland/FTP-Deploy-Action@v4.3.5 | ||
| with: | ||
| server: ${{ secrets.FTP_SERVER }} | ||
| username: ${{ secrets.FTP_USERNAME }} | ||
| password: ${{ secrets.FTP_PASSWORD }} | ||
| server-dir: algo.zengfy.top/ | ||
| local-dir: ./dist/ |
There was a problem hiding this comment.
🔒 Security & Privacy | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== workflow excerpt =="
if [ -f .github/workflows/deploy.yml ]; then
nl -ba .github/workflows/deploy.yml | sed -n '1,80p'
else
echo "missing .github/workflows/deploy.yml"
fi
echo
echo "== repository action checkout/config references =="
rg -n "SamKirkland/FTP-Deploy-Action|protocol:|ftp(s)?|FTP_USERNAME|FTP_PASSWORD|secrets\.FTP" .github/workflows . 2>/dev/null | head -200
echo
echo "== fetch v4.3.5 action metadata/readme protocol defaults =="
python3 - <<'PY'
import urllib.request
urls = [
"https://raw.githubusercontent.com/SamKirkland/FTP-Deploy-Action/v4.3.5/action.yml",
"https://raw.githubusercontent.com/SamKirkland/FTP-Deploy-Action/v4.3.5/README.md",
]
for url in urls:
print(f"\n-- {url} --")
try:
data = urllib.request.urlopen(url, timeout=20).read().decode("utf-8", "replace")
lines = data.splitlines()
for i, line in enumerate(lines[:260], 1):
if "protocol" in line.lower() or "default:" in line.lower() or "FTP_PASSWORD" in line or "FTP_USERNAME" in line:
print(f"{i}: {line}")
except Exception as e:
print(f"ERROR: {e}")
PYRepository: diusazzad/algorithms_visualization
Length of output: 235
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== workflow excerpt =="
if [ -f .github/workflows/deploy.yml ]; then
awk '{printf "%6d\t%s\n", NR, $0}' .github/workflows/deploy.yml | sed -n '1,80p'
else
echo "missing .github/workflows/deploy.yml"
fi
echo
echo "== repository action checkout/config references =="
grep -RIn --exclude-dir=.git --exclude-dir=node_modules \
-e 'SamKirkland/FTP-Deploy-Action' \
-e 'protocol:' \
-e 'ftp[s]?' \
-e 'FTP_USERNAME' \
-e 'FTP_PASSWORD' \
-e 'secrets\.FTP' \
. 2>/dev/null | head -200 || true
echo
echo "== fetch v4.3.5 action metadata/readme protocol defaults =="
python3 - <<'PY'
import urllib.request
urls = [
"https://raw.githubusercontent.com/SamKirkland/FTP-Deploy-Action/v4.3.5/action.yml",
"https://raw.githubusercontent.com/SamKirkland/FTP-Deploy-Action/v4.3.5/README.md",
]
for url in urls:
print(f"\n-- {url} --")
try:
data = urllib.request.urlopen(url, timeout=20).read().decode("utf-8", "replace")
lines = data.splitlines()
for i, line in enumerate(lines[:260], 1):
if "protocol" in line.lower() or "default:" in line.lower() or "FTP_PASSWORD" in line or "FTP_USERNAME" in line:
print(f"{i}: {line}")
except Exception as e:
print(f"ERROR: {e}")
PYRepository: diusazzad/algorithms_visualization
Length of output: 2070
🌐 Web query:
SamKirkland FTP-Deploy-Action v4.3.5 protocol default ftp ftps README
💡 Result:
For the SamKirkland FTP-Deploy-Action GitHub action (including version 4.3.5), the default protocol is ftp [1][2]. According to the official project documentation [1][3], the protocol input accepts the following options: - ftp: Provides no encryption [1][2]. - ftps: Full encryption using the newest standard (also known as "explicit" FTPS) [1][2]. - ftps-legacy: Full encryption using the legacy standard (also known as "implicit" FTPS) [1][2]. If you do not specify a protocol in your GitHub Actions workflow configuration, the action defaults to using ftp [1][3].
Citations:
- 1: https://github.com/SamKirkland/FTP-Deploy-Action/blob/master/README.md
- 2: https://github.com/SamKirkland/FTP-Deploy-Action/tree/refs/heads/master
- 3: https://github.com/SamKirkland/FTP-Deploy-Action
Sensitive Data Exposure (CWE-319): Cleartext Transmission of Sensitive Information
Reachability: External
Use FTPS for the credentialed upload.
This workflow passes FTP_USERNAME and FTP_PASSWORD to SamKirkland/FTP-Deploy-Action, but does not set protocol, so it uses unencrypted ftp. Set protocol: ftps and verify the cPanel FTPS port.
Suggested fix
password: ${{ secrets.FTP_PASSWORD }}
+ protocol: ftps
server-dir: algo.zengfy.top/📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - name: 📂 Sync files | |
| uses: SamKirkland/FTP-Deploy-Action@v4.3.5 | |
| with: | |
| server: ${{ secrets.FTP_SERVER }} | |
| username: ${{ secrets.FTP_USERNAME }} | |
| password: ${{ secrets.FTP_PASSWORD }} | |
| server-dir: algo.zengfy.top/ | |
| local-dir: ./dist/ | |
| - name: 📂 Sync files | |
| uses: SamKirkland/FTP-Deploy-Action@v4.3.5 | |
| with: | |
| server: ${{ secrets.FTP_SERVER }} | |
| username: ${{ secrets.FTP_USERNAME }} | |
| password: ${{ secrets.FTP_PASSWORD }} | |
| protocol: ftps | |
| server-dir: algo.zengfy.top/ | |
| local-dir: ./dist/ |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.github/workflows/deploy.yml around lines 21 - 28, Update the “📂 Sync
files” FTP-Deploy-Action configuration to set protocol to ftps for the
credentialed upload, and configure or verify its port against the cPanel FTPS
port while preserving the existing server, credentials, directories, and action
version.
Source: MCP tools
| .code-block { | ||
| background: rgba(0, 0, 0, 0.4); | ||
| padding: 20px; | ||
| border-radius: 8px; | ||
| border: 1px solid rgba(255,255,255,0.05); | ||
| font-family: monospace; | ||
| color: #a8b2d1; | ||
| white-space: pre; | ||
| overflow-x: auto; | ||
| white-space: pre-wrap; | ||
| word-break: break-word; | ||
| line-height: 1.5; | ||
| margin-bottom: 24px; | ||
| } |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
if rg -n --fixed-strings 'word-break: break-word' src/components/Landing/LandingPage.css; then
exit 1
fi
rg -n --fixed-strings 'overflow-wrap: anywhere' src/components/Landing/LandingPage.cssRepository: diusazzad/algorithms_visualization
Length of output: 202
🌐 Web query:
MDN word-break break-word overflow-wrap anywhere Stylelint deprecated property-or-value
💡 Result:
The properties overflow-wrap and word-break have distinct behaviors for controlling text layout, and Stylelint has updated its naming conventions for rules involving allowlists and disallowlists [1][2][3][4]. CSS Text Wrapping The overflow-wrap property (formerly word-wrap) determines whether the browser can break lines within otherwise unbreakable strings to prevent overflow [1][5]. - overflow-wrap: break-word: Allows breaking at arbitrary points if no other break opportunities exist. Crucially, these soft wrap opportunities are NOT considered when calculating the element's min-content intrinsic size [1][6]. - overflow-wrap: anywhere: Similar to break-word, but it DOES consider soft wrap opportunities when calculating min-content intrinsic sizes [1][6]. - word-break: break-all: Breaks text between any two characters if it would otherwise overflow, often causing words to break even if they could have fit on the next line [2][7]. Stylelint Deprecations In Stylelint 13.7.0, rules utilizing the terms "whitelist" or "blacklist" were deprecated in favor of more inclusive terminology [3][4][8]. - Whitelist rules (e.g., declaration-property-value-whitelist) were replaced by *-allowed-list rules (e.g., declaration-property-value-allowed-list) [3][4]. - Blacklist rules (e.g., declaration-property-value-blacklist) were replaced by *-disallowed-list rules (e.g., declaration-property-value-disallowed-list) [3][4]. The legacy rule names were aliased to the new names to maintain compatibility, but users are encouraged to update their configurations to use the new nomenclature [3].
Citations:
- 1: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow-wrap
- 2: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/word-break
- 3: Replace *-whitelist/*-blacklist/*-requirelist rules with *-allowed-list/*-disallowed-list/*-required-list rules stylelint/stylelint#4845
- 4:
*-blacklistand*-whitelistdeprecated in stylelint 13.7.0 thoughtbot/stylelint-config#33 - 5: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Text/Wrapping_breaking_text
- 6: https://stackoverflow.com/questions/66724509/overflow-wrap-break-word-vs-word-break-break-word
- 7: https://github.com/mdn/content/blob/main/files/en-us/web/css/reference/properties/word-break/index.md
- 8: Stylelint deprecated rules Shopify/web-configs#187
🌐 Web query:
MDN CSS word-break property break-word value long deprecated overflow-wrap break-word anywhere
💡 Result:
The value break-word for the word-break CSS property is deprecated [1][2][3]. It is maintained solely for compatibility with legacy content and should not be used in new style sheets [3][4]. ### Why it is Deprecated The behavior of word-break: break-word—which allows words to break when they would otherwise overflow their container—has been superseded by the overflow-wrap property [5][6]. Specifically, word-break: break-word functions as an alias for overflow-wrap: anywhere combined with word-break: normal [1][7]. ### Recommended Alternatives Instead of using the deprecated word-break: break-word, you should use the overflow-wrap property [5][6]. Depending on your specific layout needs, you have two primary options: 1. overflow-wrap: anywhere This is the direct functional replacement for word-break: break-word [7]. It allows the browser to break otherwise unbreakable strings at arbitrary points to prevent overflow [5]. Crucially, it considers these break opportunities when calculating the minimum intrinsic size of the content [5][7]. 2. overflow-wrap: break-word This is the standard, modern way to handle long words [5]. Unlike anywhere, it will only introduce a line break if the word cannot fit on its own line [5]. Furthermore, it does not consider the line-breaking opportunities created by the property when calculating min-content intrinsic sizes, which often results in more predictable layout behavior [5][7]. ### Summary of Differences * overflow-wrap: break-word breaks only if an entire word cannot fit on its own line [5]. * overflow-wrap: anywhere breaks at arbitrary points if necessary, including inside words [5]. * word-break: break-all behaves differently from both; it breaks at the exact point of overflow and forces breaks even if placing the word on a new line would have prevented the overflow [1][8]. In short, overflow-wrap: break-word is generally the preferred choice for preventing layout breakage from long words, while overflow-wrap: anywhere is the modern, non-deprecated equivalent to the old word-break: break-word [5][7].
Citations:
- 1: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/word-break
- 2: https://github.com/mdn/content/blob/main/files/en-us/web/css/reference/properties/word-break/index.md
- 3: https://drafts.csswg.org/css-text/
- 4: [css-text-3] Normatively disallow break-word w3c/csswg-drafts#4087
- 5: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow-wrap
- 6: https://web-platform-dx.github.io/web-features-explorer/features/word-break-break-word/
- 7: https://stackoverflow.com/questions/17259916/difference-between-overflow-wrap-and-word-break
- 8: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Text/Wrapping_breaking_text
Replace the deprecated word-break value.
word-break: break-word is deprecated in CSS. Use overflow-wrap: anywhere for the equivalent broken-token wrapping behavior.
Proposed fix
.code-block {
white-space: pre-wrap;
- word-break: break-word;
+ overflow-wrap: anywhere;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .code-block { | |
| background: rgba(0, 0, 0, 0.4); | |
| padding: 20px; | |
| border-radius: 8px; | |
| border: 1px solid rgba(255,255,255,0.05); | |
| font-family: monospace; | |
| color: #a8b2d1; | |
| white-space: pre; | |
| overflow-x: auto; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| line-height: 1.5; | |
| margin-bottom: 24px; | |
| } | |
| .code-block { | |
| background: rgba(0, 0, 0, 0.4); | |
| padding: 20px; | |
| border-radius: 8px; | |
| border: 1px solid rgba(255,255,255,0.05); | |
| font-family: monospace; | |
| color: `#a8b2d1`; | |
| white-space: pre-wrap; | |
| overflow-wrap: anywhere; | |
| line-height: 1.5; | |
| margin-bottom: 24px; | |
| } |
🧰 Tools
🪛 Stylelint (17.14.0)
[error] 290-290: Deprecated keyword "break-word" for property "word-break" (declaration-property-value-keyword-no-deprecated)
(declaration-property-value-keyword-no-deprecated)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/Landing/LandingPage.css` around lines 282 - 293, Update the
.code-block CSS rule by replacing the deprecated word-break: break-word
declaration with overflow-wrap: anywhere, preserving the existing broken-token
wrapping behavior and all other styling.
Source: Linters/SAST tools
| <a href="https://github.com/diusazzad/" target="_blank" rel="noreferrer" className="secondary-btn"> | ||
| <GitBranch size={20} /> | ||
| Source | ||
| </a> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Point the Source link to the project repository.
The link opens the diusazzad profile. The PR identifies diusazzad/algorithms_visualization as the project repository. Users who select Source do not reach the project source.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/Landing/LandingPage.jsx` around lines 30 - 33, Update the href
of the Source anchor in LandingPage to point to the project repository
diusazzad/algorithms_visualization instead of the diusazzad profile, while
preserving the existing target, rel, styling, and label.
| {/* Preview/Demo Section */} | ||
| <section id="demo-preview" className="preview-section"> | ||
| <div className="glass-panel preview-container"> | ||
| <div className="preview-header"> | ||
| <div className="dots"> | ||
| <span className="dot red"></span> | ||
| <span className="dot yellow"></span> | ||
| <span className="dot green"></span> | ||
| </div> | ||
| <span className="preview-title">Visualizer Live Demo</span> | ||
| </div> | ||
| <div className="preview-content"> | ||
| {/* Placeholder for GIF or Video */} | ||
| <div className="demo-placeholder"> | ||
| <MapIcon size={48} color="var(--primary)" style={{ opacity: 0.5, marginBottom: '16px' }} /> | ||
| <h3>Interactive Map Preview</h3> | ||
| <p>Add your screen-recorded GIF here!</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Do not present the placeholder as a live demo.
View Demo scrolls to “Visualizer Live Demo”, but the section displays “Add your screen-recorded GIF here!”. This action does not provide a demo. Embed the recording, or point the CTA to /app until demo media exists.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/Landing/LandingPage.jsx` around lines 37 - 57, Update the
“Visualizer Live Demo” section and its View Demo destination so it does not
present placeholder text as a live demo: embed the available recording in the
preview content, or redirect the CTA to /app until demo media exists. Remove the
“Add your screen-recorded GIF here!” placeholder from the demo-preview markup.
| Then import it into <code>Visualizer.jsx</code>, add a button in the Control Panel, and pass your frames to the hook. | ||
| </p> |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Complete the algorithm registration instruction.
Visualizer.jsx generates frames only for linked_list and dijkstra. A new control alone selects an unsupported value and returns []. Tell contributors to register the algorithm in the frame-selection mapping. Also revise the claim at Line 76 that this requires no React state changes.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/Landing/LandingPage.jsx` around lines 159 - 160, Update the
LandingPage instructions to tell contributors to add the new algorithm to
Visualizer.jsx’s frame-selection mapping, alongside importing the hook and
adding the Control Panel button, so frame generation supports the selected
value. Revise the claim that no React state changes are required to acknowledge
any state updates needed for the new control and algorithm selection.
1 participant
Summary by CodeRabbit
New Features
Style