From 3bef3c4487401b7687dbb7421f9128a983f4d5bc Mon Sep 17 00:00:00 2001 From: Harsh Date: Wed, 8 Apr 2026 22:06:27 +0530 Subject: [PATCH] Replace invalid className HTML attributes Signed-off-by: Harsh --- src/components/CircleButton/index.tsx | 8 +--- src/components/CodeEmbed/index.jsx | 31 ++++++++----- src/components/CopyCodeButton/index.tsx | 43 ++++++++----------- src/components/Dropdown/index.tsx | 22 ++++------ src/components/Icon/index.tsx | 42 +++++++++--------- src/components/Nav/MainNavLinks.tsx | 4 +- src/components/PageHeader/HomePage.astro | 7 +-- .../ReferenceDirectoryWithFilter/index.tsx | 8 ++-- src/components/RelatedItems/index.astro | 4 +- src/components/SearchResults/index.tsx | 24 +++++------ 10 files changed, 94 insertions(+), 99 deletions(-) diff --git a/src/components/CircleButton/index.tsx b/src/components/CircleButton/index.tsx index 5783f17ff2..6b67c93acc 100644 --- a/src/components/CircleButton/index.tsx +++ b/src/components/CircleButton/index.tsx @@ -22,18 +22,14 @@ export const CircleButton = ({ onClick={onClick} aria-label={ariaLabel} href={href} - className={sharedClassName} + class={sharedClassName} > {children} ); } return ( - ); diff --git a/src/components/CodeEmbed/index.jsx b/src/components/CodeEmbed/index.jsx index d97e6967c7..1d20cef35f 100644 --- a/src/components/CodeEmbed/index.jsx +++ b/src/components/CodeEmbed/index.jsx @@ -1,5 +1,5 @@ import { useState, useEffect, useRef } from "preact/hooks"; -import { useLiveRegion } from '../hooks/useLiveRegion'; +import { useLiveRegion } from "../hooks/useLiveRegion"; import CodeMirror, { EditorView } from "@uiw/react-codemirror"; import { javascript } from "@codemirror/lang-javascript"; import { cdnLibraryUrl, cdnSoundUrl } from "@/src/globals/globals"; @@ -38,14 +38,19 @@ export const CodeEmbed = (props) => { ); let { previewWidth, previewHeight } = props; - const canvasMatch = /createCanvas\(\s*(\d+),\s*(\d+)\s*(?:,\s*(?:P2D|WEBGL)\s*)?\)/m.exec(initialCode); + const canvasMatch = + /createCanvas\(\s*(\d+),\s*(\d+)\s*(?:,\s*(?:P2D|WEBGL)\s*)?\)/m.exec( + initialCode, + ); if (canvasMatch) { previewWidth = previewWidth || parseFloat(canvasMatch[1]); previewHeight = previewHeight || parseFloat(canvasMatch[2]); } // Quick hack to make room for DOM that gets added below the canvas by default - const domMatch = /create(Button|Select|P|Div|Input|ColorPicker)/.exec(initialCode); + const domMatch = /create(Button|Select|P|Div|Input|ColorPicker)/.exec( + initialCode, + ); if (domMatch && previewHeight) { previewHeight += 100; } @@ -87,15 +92,15 @@ export const CodeEmbed = (props) => { } }, []); - if (!rendered) return
; + if (!rendered) return
; return (
{props.previewable ? (
{ base={props.base} frameRef={codeFrameRef} lazyLoad={props.lazyLoad} - scripts={props.includeSound ? [cdnLibraryUrl, cdnSoundUrl] :[cdnLibraryUrl]} + scripts={ + props.includeSound + ? [cdnLibraryUrl, cdnSoundUrl] + : [cdnLibraryUrl] + } />
-
+
{
) : null} -
+
{ (editorView.contentDOM.ariaLabel = "Code Editor") } /> -
+
{ diff --git a/src/components/CopyCodeButton/index.tsx b/src/components/CopyCodeButton/index.tsx index 031b72bee7..6dff0f9a06 100644 --- a/src/components/CopyCodeButton/index.tsx +++ b/src/components/CopyCodeButton/index.tsx @@ -1,5 +1,5 @@ -import { useState } from 'preact/hooks'; -import { useLiveRegion } from '../hooks/useLiveRegion'; +import { useState } from "preact/hooks"; +import { useLiveRegion } from "../hooks/useLiveRegion"; import CircleButton from "../CircleButton"; interface CopyCodeButtonProps { @@ -9,56 +9,47 @@ interface CopyCodeButtonProps { export const CopyCodeButton = ({ textToCopy, - announceOnCopy = 'Code copied to clipboard' + announceOnCopy = "Code copied to clipboard", }: CopyCodeButtonProps) => { const [isCopied, setIsCopied] = useState(false); const { ref: liveRegionRef, announce } = useLiveRegion(); const copyTextToClipboard = async () => { - console.log('Copy button clicked'); - console.log('Text to copy:', textToCopy); - try { - console.log('Using Clipboard API'); await navigator.clipboard.writeText(textToCopy); - console.log('Text copied successfully'); announce(announceOnCopy); setIsCopied(true); setTimeout(() => { setIsCopied(false); - console.log('Copy state reset'); }, 2000); } catch (err) { - console.error('Clipboard API copy failed:', err); + console.error("Clipboard API copy failed:", err); } }; return ( <> { - console.log('CircleButton clicked'); - copyTextToClipboard(); - }} + onClick={copyTextToClipboard} ariaLabel="Copy code to clipboard" - className={`bg-white ${isCopied ? 'text-green-600' : 'text-black'} transition-colors duration-200`} + className={`bg-white ${isCopied ? "text-green-600" : "text-black"} transition-colors duration-200`} > {isCopied ? ( - - @@ -89,4 +80,4 @@ export const CopyCodeButton = ({ ); -}; \ No newline at end of file +}; diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx index da561e9335..64ca6e51f5 100644 --- a/src/components/Dropdown/index.tsx +++ b/src/components/Dropdown/index.tsx @@ -113,13 +113,13 @@ export const Dropdown = ({ // Render the collapsed dropdown button const renderCollapsedDropdown = () => ( @@ -135,15 +135,15 @@ export const Dropdown = ({ // Render the expanded dropdown options const renderExpandedDropdown = () => ( -