Add interactive circuit visualizations using GIFs and video embeds#775
Add interactive circuit visualizations using GIFs and video embeds#775Ram-sah19 wants to merge 6 commits intoCircuitVerse:masterfrom
Conversation
… GA config, and GitHub Actions version
… GA config, and GitHub Actions version
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 21 minutes and 14 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
WalkthroughThis pull request adds a new Jekyll include that renders interactive logic-gate animations (AND, OR, NOT, NAND, NOR, XOR, XNOR) on a canvas with live input toggles and output display, plus accompanying SCSS for widget styling. It inserts gate include instances into documentation pages. Additionally, it updates GitHub Actions checkout to v4 and removes 🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (2 warnings, 1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 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: 3
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 94efdf1f-e017-42ba-a9e4-c01fc76ca32d
📒 Files selected for processing (8)
.github/scripts/assign-or-comment.js.github/workflows/deploy.yml_config.yml_includes/gate_animation.html_sass/custom/custom.scssassets/js/module.jsassets/js/quiz.jsdocs/comb-ssi/logic-gates.md
💤 Files with no reviewable changes (1)
- .github/scripts/assign-or-comment.js
| # Footer content | ||
| # appears at the bottom of every page's main content | ||
| footer_content: "Copyright © 2026 Contributors to CircuitVerse. Distributed under a [CC-by-sa] license." | ||
| footer_content: "Copyright © {% assign current_year = 'now' | date: '%Y' %}{{ current_year }} Contributors to CircuitVerse. Distributed under a [CC-by-sa] license." |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Check how just-the-docs theme renders footer_content
# Search for footer_content usage in theme layouts/includes
fd -e html -e liquid . | xargs rg -n 'site\.footer_content' 2>/dev/null || echo "No matches in local files"
# Check if liquify filter is available (would enable Liquid in config values)
rg -n 'liquify' --type-add 'rb:*.rb' --type rb 2>/dev/null || echo "No liquify filter found"Repository: CircuitVerse/Interactive-Book
Length of output: 122
🌐 Web query:
Does Jekyll just-the-docs theme process Liquid in footer_content config value?
💡 Result:
No, the Jekyll Just the Docs theme does not process Liquid in the footer_content config value. The official documentation explicitly states that footer_content is deprecated and recommends using _includes/footer_custom.html for "more robust markup / liquid-based content," implying that the config value itself does not support Liquid processing. Config values in Jekyll _config.yml are strings and not rendered as Liquid templates unless explicitly passed through a Liquid filter like | markdownify or captured in an include. The example given uses static HTML strings without Liquid syntax. For Liquid support, users must use the custom include file instead.
Citations:
- 1: https://github.com/just-the-docs/just-the-docs/blob/main/docs/configuration.md
- 2: https://v0-3-3-docs.just-the-docs.com/docs/configuration/
- 3: https://just-the-docs.com/docs/customization/
- 4: https://just-the-docs.com/docs/configuration/
- 5: https://just-the-docs.com/docs/customization
Move Liquid logic out of _config.yml — it will not be evaluated here.
Jekyll does not process Liquid tags within _config.yml values. The {% assign current_year = 'now' | date: '%Y' %}{{ current_year }} syntax will be output literally as raw text in the footer instead of rendering the dynamic year.
The just-the-docs theme recommends using _includes/footer_custom.html for Liquid-based content. Create that file with the year logic and remove the Liquid syntax from the config.
| <div class="gate-anim-wrapper" id="gate-anim-{{ include.gate }}"> | ||
| <canvas class="gate-anim-canvas" id="canvas-{{ include.gate }}" width="340" height="120" aria-label="{{ include.gate }} gate animation"></canvas> |
There was a problem hiding this comment.
Make instance targeting unique; current ID scheme collides for repeated same-gate embeds.
Line 6-Line 7 use IDs based only on gate type. If gate_animation.html is included twice with the same gate, the DOM gets duplicate IDs and the script (Line 21-Line 25) will bind to the wrong instance.
💡 Proposed fix
-<div class="gate-anim-wrapper" id="gate-anim-{{ include.gate }}">
- <canvas class="gate-anim-canvas" id="canvas-{{ include.gate }}" width="340" height="120" aria-label="{{ include.gate }} gate animation"></canvas>
+<div class="gate-anim-wrapper" data-gate="{{ include.gate }}">
+ <canvas class="gate-anim-canvas" width="340" height="120" aria-label="{{ include.gate }} gate animation"></canvas>
@@
-(function() {
- var gateId = "{{ include.gate }}";
- var canvas = document.getElementById("canvas-" + gateId);
- var ctx = canvas.getContext("2d");
- var wrapper = document.getElementById("gate-anim-" + gateId);
+(function() {
+ var gateId = "{{ include.gate }}";
+ var scriptEl = document.currentScript;
+ var wrapper = scriptEl ? scriptEl.previousElementSibling : null;
+ if (!wrapper) return;
+ var canvas = wrapper.querySelector(".gate-anim-canvas");
+ if (!canvas) return;
+ var ctx = canvas.getContext("2d");
+ if (!ctx) return;Also applies to: 21-25
| var outEl = wrapper.querySelector(".output-val"); | ||
| if (outEl) outEl.textContent = out ? "1 (HIGH)" : "0 (LOW)"; | ||
| outEl.style.color = out ? "#28a745" : "#dc3545"; | ||
| } |
There was a problem hiding this comment.
Complete the null guard for .output-val updates.
Line 164 dereferences outEl.style even when outEl is null. Keep both writes under the same guard.
💡 Proposed fix
- if (outEl) outEl.textContent = out ? "1 (HIGH)" : "0 (LOW)";
- outEl.style.color = out ? "#28a745" : "#dc3545";
+ if (outEl) {
+ outEl.textContent = out ? "1 (HIGH)" : "0 (LOW)";
+ outEl.style.color = out ? "#28a745" : "#dc3545";
+ }📝 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.
| var outEl = wrapper.querySelector(".output-val"); | |
| if (outEl) outEl.textContent = out ? "1 (HIGH)" : "0 (LOW)"; | |
| outEl.style.color = out ? "#28a745" : "#dc3545"; | |
| } | |
| var outEl = wrapper.querySelector(".output-val"); | |
| if (outEl) { | |
| outEl.textContent = out ? "1 (HIGH)" : "0 (LOW)"; | |
| outEl.style.color = out ? "#28a745" : "#dc3545"; | |
| } | |
| } |
![hound[bot]](https://avatars.githubusercontent.com/in/3598?s=60&v=4){kind=small}
| margin-top: 0.5rem; | ||
| } | ||
|
|
||
| .gate-anim-controls label { |
There was a problem hiding this comment.
Merge rule .gate-anim-controls label with rule on line 331
1 participant
Description
Problem
Currently, circuit diagrams in the application are static, which makes it difficult for users to understand how circuits and logic gates function dynamically.
Solution
This PR introduces:
GIF-based animations to demonstrate circuit behavior
Optional embedded videos (via YouTube) for deeper explanations
Features Added
Logic gate animations (AND, OR, NOT)
Circuit behavior visualization
Reusable CircuitVisualizer component
Technical Details
Added React component for rendering GIFs/videos
Used responsive layout for better UX
Lazy loading for performance optimization
Screenshots / Demo
(Add screenshots or GIFs here)
Type of Change
Enhancement (UI/UX improvement)
Checklist
Code compiles correctly
No console errors
Responsive design tested
Performance considered
Related Issue
Fixes #605
Summary by CodeRabbit
New Features
Bug Fixes
Chores