Feature/interactive code editor #1194
Conversation
- Added Kingsumo embed script below the leaderboard section - Script loads from https://kingsumo.com/js/embed.js - Addresses issue recodehive#758 for giveaway page integration
- Add comprehensive blog standards document (wiki/blog-standards.md) - Update contributing guidelines with blog writing section - Standardize existing blog posts to match new standards: * Fix frontmatter consistency across all blogs * Remove invalid commented meta tags * Improve SEO descriptions and formatting * Ensure proper date formats and required fields Closes recodehive#567 - Blog structure standardization
- Add SocialShare component with Twitter, LinkedIn, Facebook, and native share buttons - Create BlogPostItem wrapper to display sharing buttons on individual blog posts - Add responsive CSS styling for social sharing buttons - Only show sharing buttons on actual blog posts (not tag or author pages) - Include proper accessibility attributes and hover effects - Support both light and dark themes Fixes recodehive#1127
- Monaco Editor + Pyodide integration for browser-based Python execution - MDX component for easy tutorial integration - Added example to Python intro tutorial Fixes recodehive#1128
|
@Gupta-02 is attempting to deploy a commit to the recode Team on Vercel. A member of the Team first needs to authorize it. |
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs. In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊 Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv. We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰 🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨ 📚Your perks for contribution to this community 👇🏻
If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
github-actions
bot
added
recode
|
✅ Synchronized metadata from Issue #1128:
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@Adez017 for review. |
| </motion.section> | ||
|
|
||
| {/* Kingsumo Giveaway Script */} | ||
| <script src="https://kingsumo.com/js/embed.js"></script> |
There was a problem hiding this comment.
i think you messed up two separate work in one branch .
|
@Gupta-02 , i think you messed up three different issues on the same PR . i would advice please create different branch and open the PR for better review and management . CC: @sanjay-kv |
|
@Gupta-02 this feature is really good just a code cleanup is required. |
|
✅ Synchronized metadata from Issue #1128:
|
|
@Adez017 Rather keeping a different branch can i add just code cleanup and update it so my workspace again becomes messy to write and then do u requested video too right |
- Improve TypeScript types and remove 'any' usage - Add useCallback for performance optimization - Enhance error handling and Pyodide loading logic - Consolidate CSS styles and improve maintainability - Make PythonCodeEditor flexible for any Python code - Add clipboard API fallback for better browser compatibility
|
✅ Synchronized metadata from Issue #1128:
|
|
@Adez017 Implemented the code editor clean up |
@Gupta-02 You’ve done a good job 👏, but here at Recode Hive we follow certain practices for better code modularity and project management. I hope you understand that creating a single PR addressing multiple issues can make things harder to review and maintain. |
|
Okay I will try if not please close pr I will do fresh one again |
|
✅ Synchronized metadata from Issue #1128:
|
|
its a great update, appreciate if you can raise a new PR |
Closing this PR , its a great feature . really appreciate if you can open a fresh PR @Gupta-02 |
3 participants
This PR implements an interactive code editor component for Python tutorial pages, enabling users to edit and run code snippets directly in the browser with syntax highlighting and execution feedback. This enhances the learning experience by allowing hands-on Python practice without requiring local environment setup.
Fixes #1128
Type of Change
New feature (e.g., new page, component, or functionality)
Bug fix (non-breaking change that fixes an issue)
UI/UX improvement (design, layout, or styling updates)
Performance optimization (e.g., code splitting, caching)
Documentation update (README, contribution guidelines, etc.)
Other (please specify):
Changes Made
InteractiveCodeEditor Component: Created a comprehensive code editor using Monaco Editor (VS Code) and Pyodide for browser-based Python execution
Python Runtime Integration: Implemented Pyodide WebAssembly runtime for secure, client-side Python code execution
MDX Component System: Added PythonCodeEditor wrapper component for seamless integration with Docusaurus MDX content
Responsive UI Design: Built mobile-friendly interface with syntax highlighting, code editing controls, and real-time output display
Theme Compatibility: Ensured full support for both light and dark themes with proper styling
Tutorial Integration: Added example interactive editor to the Python introduction tutorial page
Error Handling: Implemented robust error handling for code execution and runtime loading
Dependencies
New dependencies added:
@monaco-editor/react: Monaco Editor React wrapper for professional code editing
pyodide: WebAssembly-based Python runtime for browser execution
No new dependencies required (compatible with existing setup)
Checklist
My code follows the style guidelines of this project.
I have tested my changes across major browsers and devices
My changes do not generate new console warnings or errors .
I ran npm run build and attached screenshot(s) in this PR.
This is already assigned Issue to me, not an unassigned issue.
Screenshots:
[Attach screenshot showing the interactive code editor on the Python tutorial page]
Files Changed:
InteractiveCodeEditor.tsx (new)
PythonCodeEditor.tsx (new)
interactive-code-editor.css (new)
MDXComponents.js (modified)
custom.css (modified)
intro-python.md (modified)
Tested
Monaco Editor: Professional code editing with IntelliSense-like features
Pyodide: WebAssembly Python runtime (no server-side execution needed)
MDX Integration: Seamless embedding in tutorial content
Performance: Lazy-loaded Pyodide for optimal page load times
Security: Client-side execution with no backend dependencies