Skip to content

Latest commit

 

History

History
70 lines (51 loc) · 5.06 KB

summary.md

File metadata and controls

70 lines (51 loc) · 5.06 KB
  • Removed unused variables showTooltip, setShowTooltip, tooltipPos, setTooltipPos, and the unused function toggleExercisesSidebar from packages/playground/src/components/editor/NoirEditor.tsx.
  • Removed all references to these variables and function, including event handlers and commented-out tooltip JSX in the draggable separator.
  • This resolves TypeScript errors TS6133 and allows the build to proceed successfully.
  • Removed the unused function 'toggleExercisesSidebar' from NoirEditor.tsx to resolve a lingering TS6133 error reported by TypeScript. /d

Summary of Fixes for Vercel Build Error

  • Removed @vercel/speed-insights from packages/playground/package.json dependencies, as it is a Next.js-only package and not compatible with Vite/React.
  • Removed the import and usage of SpeedInsights from @vercel/speed-insights/next in packages/playground/index.tsx.
  • Left @vercel/analytics in place, as it is compatible with React and Vercel.

These changes resolve the build error:

"useParams" is not exported by "__vite-optional-peer-dep:next/navigation.js:@vercel/speed-insights", imported by "../../node_modules/@vercel/speed-insights/dist/next/index.mjs".

You can now reinstall dependencies and redeploy the app on Vercel.

  • Added Open Graph and Twitter Card meta tags to packages/playground/index.html for rich link previews.

  • Used /public/noirlingsapp-preview-image.png as the preview image.

  • Set preview title to NOIRLINGS.APP and description to Learn Noir in your browser.

  • These changes ensure that sharing the site link will display the custom image and text on social platforms and messaging apps.

  • Moved the X (Twitter) logo button to appear next to the Noirlings logo on the left side of the toolbar for better branding and visibility.

[Favicon Added]

  • Added <link rel="icon" type="image/x-icon" href="/noirlingsapp.ico" /> to packages/playground/index.html section.

  • This sets the favicon for the playground app to the provided noirlingsapp.ico file located in packages/playground/public/.

  • Fixed a syntax error in the style prop of ExercisesSidebar.tsx by correcting the ternary expression for backgroundColor. The code now properly sets the background color based on the theme and current exercise selection.

  • Added a hover effect to the Button component in packages/playground/src/components/buttons/buttons.tsx.

    • For primary buttons ($primary), the background color now darkens from #00810d to #005c09 on hover.
    • For non-primary buttons, the background color now darkens from black to gray-800 on hover.
    • This uses Tailwind CSS utility classes for a smooth, consistent effect.

  • Added a functional "Share on X" button to the top toolbar in NoirEditor.tsx.

  • The button dynamically generates a tweet with the user's current Noirlings progress (finished/total exercises) and opens a pre-filled X (Twitter) share URL in a new tab.

  • The button is styled to match the existing UI and improves user engagement by making it easy to share progress publicly.

  • Added share tracking to the "Share on X" button in NoirEditor.tsx using Vercel Analytics.

  • The button now calls track('share_on_x', { finished, total }) before opening the share URL, allowing you to monitor share events and user progress in the Vercel Analytics dashboard.

  • Updated the "Share on X" button in NoirEditor.tsx to use a flex layout (flex items-center gap-1), ensuring the X icon aligns vertically with the text for a more polished appearance.

  • The "Share on X" button now uses a randomized template from an array of share texts, each with placeholders for finished and total exercises. This makes each share more varied and engaging for users.

  • All share templates for the "Share on X" button now tag @NoirLang in the shared message, ensuring the official account is always mentioned for increased visibility and engagement.

  • Added a small 'Follow me on X @andeebtceth' text link (with X icon) to the right side of the top toolbar in NoirEditor.tsx.

  • The link opens https://x.com/andeebtceth in a new tab and is styled to match the toolbar, appearing after the theme toggle button.

  • This provides a visible but unobtrusive way for users to follow the author on X (Twitter).

  • Created a comprehensive, production-ready README.md for the Noirlings.app monorepo.

  • The README includes:

    • Project overview and tagline ("Learn Noir in your browser")
    • Feature highlights (interactive playground, guided exercises, sharing, analytics, modern UI)
    • Monorepo structure with explanation of packages
    • Getting started instructions (prerequisites, installation, development, build)
    • Deployment instructions for Vercel (build command, output directory, instant deploy button)
    • Section on sharing progress on X (Twitter) and analytics tracking
    • Author attribution and follow link (@andeebtceth)
    • Contribution guidelines
    • Credits for Noir, Monaco Editor, Vercel, React, and Tailwind CSS
    • Reference to CHANGELOG.md for more details

  • This README provides clear guidance for users, contributors, and deployers, and improves the project's documentation quality.