Fix: SEO Audit Errors on docs.layer5.io#958
Fix: SEO Audit Errors on docs.layer5.io#958Bhumikagarggg wants to merge 4 commits intolayer5io:masterfrom
Conversation
|
🚀 Preview deployment: https://layer5io.github.io/docs/pr-preview/pr-958/
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request improves accessibility and form consistency by adding null checks for the canvas visualizer, descriptive alt text for images, and ARIA labels for input fields. Feedback suggests using modern CSS properties for visually hidden elements and standardizing input names to lowercase for consistency.
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: Lee Calcote <leecalcote@gmail.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: Lee Calcote <leecalcote@gmail.com>
| if (canvas) { | ||
| const ctx = canvas.getContext('2d'); | ||
| let time = 0; | ||
| let waveData = Array(8).fill(0).map(() => ({ | ||
| value: Math.random() * 0.5 + 0.1, | ||
| targetValue: Math.random() * 0.15 + 0.1, | ||
| speed: Math.random() * .02 + 0.01 | ||
| })); | ||
|
|
||
| function resizeCanvas() { | ||
| canvas.width = window.innerWidth; | ||
| canvas.height = window.innerHeight; | ||
| } | ||
|
|
||
| function updateWaveData() { | ||
| waveData.forEach(data => { | ||
| if (Math.random() < 0.01) { | ||
| data.targetValue = Math.random() * 0.7 + 0.1; | ||
| } | ||
| const diff = data.targetValue - data.value; | ||
| data.value += diff * data.speed; | ||
| }); | ||
| } | ||
|
|
||
| function draw() { | ||
| ctx.fillStyle = 'black'; | ||
| ctx.fillRect(0, 0, canvas.width, canvas.height); | ||
|
|
||
| for (let i = 0; i < 8; i++) { | ||
| const freq = waveData[i].value * 7.0; | ||
| ctx.beginPath(); | ||
|
|
||
| for (let x = 0; x < canvas.width; x += 1) { | ||
| const normalizedX = (x / canvas.width) * 2 - 1; | ||
| let px = normalizedX + i * 0.04 + freq * 0.03; | ||
| let py = Math.sin(px * 10 + time) * Math.cos(px * 2) * freq * 0.1 * ((i + 1) / 8); | ||
| const canvasY = (py + 1) * canvas.height / 2; | ||
|
|
||
| if (x === 0) { | ||
| ctx.moveTo(x, canvasY); | ||
| } else { | ||
| ctx.lineTo(x, canvasY); | ||
| } | ||
| } | ||
|
|
||
| const intensity = Math.min(1, freq * 0.3); | ||
| const r = 255 + intensity * 100; | ||
| const g = 243 + intensity * 130; | ||
| const b = 197; | ||
|
|
||
| ctx.lineWidth = .1 + (i * 0.3); | ||
| ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, 0.6)`; | ||
| ctx.shadowColor = `rgba(${r}, ${g}, ${b}, 0.5)`; | ||
| ctx.shadowBlur = 5; | ||
| ctx.stroke(); | ||
| ctx.shadowBlur = 0; | ||
| } | ||
| } | ||
|
|
||
| function animate() { | ||
| time += 0.02; | ||
| updateWaveData(); | ||
| draw(); | ||
| requestAnimationFrame(animate); | ||
| } | ||
|
|
||
| window.addEventListener('resize', resizeCanvas); | ||
| resizeCanvas(); | ||
| animate(); |
There was a problem hiding this comment.
This is a nice improvement. However, I noticed that the canvas (visualizer) is currently commented out; I'm not sure if that was intentional or accidental.
Since you're refactoring, it might be worth evaluating whether the visualizer is still needed. If it’s no longer important, then the script could be removed altogether.
I tried uncommenting the visualizer to understand why it may have been disabled previously, and it seems it was interfering with the “Expect more from your infrastructure” title. That said, adding a negative z-index to the visualizer resolves the issue.
You might consider re-enabling the canvas, applying a negative z-index, and ensuring it’s properly centered.
Just a suggestion 😁
@leecalcote, any thoughts?
| <!-- Wave Visualizer Background | ||
| <canvas id="visualizer" style="position:absolute; top:0; left:0; margin:auto; width:300px; height:300px;"></canvas> --> |
There was a problem hiding this comment.
Here is the canvas (visualizer) commented out.
3 participants
Notes for Reviewers
This PR fixes #955
Screenshot
Signed commits