diff --git a/src/components/CircleButton/index.tsx b/src/components/CircleButton/index.tsx index 5783f17ff2..5fdb07148b 100644 --- a/src/components/CircleButton/index.tsx +++ b/src/components/CircleButton/index.tsx @@ -4,7 +4,7 @@ type CircleButtonProps = { onClick?: (ev: MouseEvent) => void; ariaLabel: string; children: Element | JSX.Element; - className?: string; + class?: string; href?: string; }; @@ -13,27 +13,23 @@ export const CircleButton = ({ ariaLabel, children, href, - className = "", + class: customClass = "", }: CircleButtonProps) => { - const sharedClassName = `circle-button grid place-items-center w-[40px] h-[40px] rounded-full p-xs hover:border-type-white text-black hover:!bg-bg-black hover:text-type-white ${className}`; + const sharedClass = `circle-button grid place-items-center w-[40px] h-[40px] rounded-full p-xs hover:border-type-white text-black hover:!bg-bg-black hover:text-type-white ${customClass}`; if (href) { return ( {children} ); } return ( - ); diff --git a/src/components/CodeEmbed/index.jsx b/src/components/CodeEmbed/index.jsx index d97e6967c7..16e77575b4 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] + } />
-
+
{ setPreviewCodeString(""); announce("Sketch stopped"); @@ -129,7 +140,7 @@ export const CodeEmbed = (props) => {
) : null} -
+
{ (editorView.contentDOM.ariaLabel = "Code Editor") } /> -
+
{ @@ -164,7 +175,7 @@ export const CodeEmbed = (props) => { announce("Code reset to initial value."); }} ariaLabel="Reset code to initial value" - className="bg-white text-black" + class="bg-white text-black" > diff --git a/src/components/CopyCodeButton/index.tsx b/src/components/CopyCodeButton/index.tsx index 031b72bee7..0f7b15a178 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,30 +9,30 @@ 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); + console.log("Copy button clicked"); + console.log("Text to copy:", textToCopy); try { - console.log('Using Clipboard API'); + console.log("Using Clipboard API"); await navigator.clipboard.writeText(textToCopy); - console.log('Text copied successfully'); + console.log("Text copied successfully"); announce(announceOnCopy); setIsCopied(true); setTimeout(() => { setIsCopied(false); - console.log('Copy state reset'); + console.log("Copy state reset"); }, 2000); } catch (err) { - console.error('Clipboard API copy failed:', err); + console.error("Clipboard API copy failed:", err); } }; @@ -40,25 +40,25 @@ export const CopyCodeButton = ({ <> { - console.log('CircleButton clicked'); + console.log("CircleButton clicked"); copyTextToClipboard(); }} ariaLabel="Copy code to clipboard" - className={`bg-white ${isCopied ? 'text-green-600' : 'text-black'} transition-colors duration-200`} + class={`bg-white ${isCopied ? "text-green-600" : "text-black"} transition-colors duration-200`} > {isCopied ? ( - - @@ -89,4 +89,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 = () => ( -
    +
      {options.map((option, index) => (
    • -
      +
      ))} {variant === "radio" ? ( - ) : ( -
      +
      )} @@ -174,11 +174,7 @@ export const Dropdown = ({ ); return ( -
      +
      {isOpen ? renderExpandedDropdown() : renderCollapsedDropdown()}
      ); diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index b3fd2aac42..919f5d59cc 100644 --- a/src/components/Icon/index.tsx +++ b/src/components/Icon/index.tsx @@ -23,7 +23,7 @@ export type IconKind = interface IconProps { kind: IconKind; - className?: string; + class?: string; } /** * Renders an icon @@ -39,7 +39,7 @@ export const Icon = (props: IconProps) => { fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden - className={props.className} + class={props.class} > { viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + class={props.class} > { viewBox="0 0 22 12" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + class={props.class} > { viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + class={props.class} > { fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden - className={props.className} + class={props.class} > { viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + class={props.class} > { viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + class={props.class} > { viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + class={props.class} > @@ -186,7 +186,7 @@ export const Icon = (props: IconProps) => { viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + class={props.class} > { viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + class={props.class} > { viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + class={props.class} > { viewBox="0 0 22 12" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + class={props.class} > { viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + class={props.class} > { viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + class={props.class} > { viewBox="0 0 21 11" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + class={props.class} > { viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + class={props.class} > { viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + class={props.class} > { viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + class={props.class} > { viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + class={props.class} > { viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + class={props.class} > { viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + class={props.class} > - {variant !== "bare" ? : null} + {variant !== "bare" ? : null} diff --git a/src/components/Nav/MainNavLinks.tsx b/src/components/Nav/MainNavLinks.tsx index 0e3b628535..77371c4f31 100644 --- a/src/components/Nav/MainNavLinks.tsx +++ b/src/components/Nav/MainNavLinks.tsx @@ -81,7 +81,7 @@ export const MainNavLinks = ({
{ @@ -80,4 +80,4 @@ const { config } = Astro.props; } } }); - \ No newline at end of file + diff --git a/src/components/PageHeader/ItemPage.astro b/src/components/PageHeader/ItemPage.astro index 6213d90494..97ec11cc11 100644 --- a/src/components/PageHeader/ItemPage.astro +++ b/src/components/PageHeader/ItemPage.astro @@ -22,12 +22,12 @@ if (titleAuthor) {
{topic.name} - + {title}

{fullTitle}

diff --git a/src/components/PaginationNav/index.astro b/src/components/PaginationNav/index.astro index da0d964a21..dc5e191e21 100644 --- a/src/components/PaginationNav/index.astro +++ b/src/components/PaginationNav/index.astro @@ -23,7 +23,7 @@ const numPages = getPaginationMax(itemsPerPage, maxNumItems); {i + 1} diff --git a/src/components/ReferenceDirectoryWithFilter/index.tsx b/src/components/ReferenceDirectoryWithFilter/index.tsx index 5ce59bcd73..664492b711 100644 --- a/src/components/ReferenceDirectoryWithFilter/index.tsx +++ b/src/components/ReferenceDirectoryWithFilter/index.tsx @@ -116,13 +116,13 @@ export const ReferenceDirectoryWithFilter = ({ {entry.data.beta && (
)} {entry.data.deprecated && (
)} @@ -160,10 +160,10 @@ export const ReferenceDirectoryWithFilter = ({ id={subcat.name} href={`/reference/${category.name === "p5.sound" ? "p5.sound" : "p5"}/${subcat.name}/`} > -

{subcat.name}

+

{subcat.name}

) : ( -

+

{subcat.name}

)} @@ -227,7 +227,7 @@ export const ReferenceDirectoryWithFilter = ({ onClick={clearInput} aria-label="Clear search input" > - + )}
diff --git a/src/components/SearchResults/index.tsx b/src/components/SearchResults/index.tsx index 97bad3103c..523073f676 100644 --- a/src/components/SearchResults/index.tsx +++ b/src/components/SearchResults/index.tsx @@ -28,7 +28,7 @@ const SearchResults = ({ const [isInputEdited, setInputEdited] = useState(false); const prevIsInputEdited = useRef(isInputEdited); - // Reset filter and input state when search term changes + // Reset filter and input state when search term changes useEffect(() => { setCurrentFilter(""); setInputEdited(false); @@ -81,17 +81,17 @@ const SearchResults = ({ } return ( -
-

Filter by

-
    +
    +

    Filter by

    +
      {allUniqueCategoriesForResults.map((category) => (
    • @@ -114,7 +114,7 @@ const SearchResults = ({ if (inputRef.current) { inputRef.current.value = ""; } - onSearchChange("") + onSearchChange(""); }; const submitInput = () => { if (inputRef.current) { @@ -181,11 +181,11 @@ const SearchResults = ({

      {uiTranslations[uiTranslationKey(category)]}

      -
        +
          {results .filter((result) => result.category === category) .map((result) => ( -
        • +
        • {result.title}
          • ))} @@ -197,12 +197,12 @@ const SearchResults = ({ }; return ( -
          +
          -

          {results.length} results found for

          +

          {results.length} results found for

          {renderBigSearchForm()}
          -
          +
          {renderFilterByOptions()}
          diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 76e040a196..d7ab520b21 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -17,7 +17,7 @@ interface Props { titleAuthor?: string; titleClass?: string; subtitle?: string | null; - className?: string; + "class"?: string; variant?: "root" | "item" | "search" | "homepage"; topic?: PageTopic; mainContentParentClass?: string; @@ -30,7 +30,7 @@ const { titleAuthor, titleClass = title, subtitle, - className = "", + class: customClass = "", variant = "root", mainContentParentClass = "mx-5 md:mx-lg mt-md", homepageConfig, @@ -63,7 +63,7 @@ const headerTopic = topic --- diff --git a/src/layouts/ContributorDocLayout.astro b/src/layouts/ContributorDocLayout.astro index 2bb65aa025..97395d8de8 100644 --- a/src/layouts/ContributorDocLayout.astro +++ b/src/layouts/ContributorDocLayout.astro @@ -42,7 +42,7 @@ setJumpToState(jumpToState); variant="item" subtitle={null} topic="contribute" - className="contribute" + class="contribute" >
          diff --git a/src/layouts/ExampleLayout.astro b/src/layouts/ExampleLayout.astro index d976598af0..d2579fee83 100644 --- a/src/layouts/ExampleLayout.astro +++ b/src/layouts/ExampleLayout.astro @@ -83,7 +83,7 @@ const { showBanner, englishUrl } = checkTranslationBanner( subtitle={null} variant="item" topic="examples" - className="example" + class="example" > {showBanner && }
          diff --git a/src/layouts/PeopleLayout.astro b/src/layouts/PeopleLayout.astro index ea6b3bfed7..6545955be1 100644 --- a/src/layouts/PeopleLayout.astro +++ b/src/layouts/PeopleLayout.astro @@ -57,7 +57,7 @@ setJumpToState(null); - +

          {t("peoplePage", "PageDescription")}

          diff --git a/src/layouts/ReferenceItemLayout.astro b/src/layouts/ReferenceItemLayout.astro index 49fab87dda..e204171477 100644 --- a/src/layouts/ReferenceItemLayout.astro +++ b/src/layouts/ReferenceItemLayout.astro @@ -109,7 +109,7 @@ function normalizeP5ReferenceLinks(html: string | undefined): string | undefined subtitle={null} variant="item" topic="reference" - className="reference-item" + class="reference-item" > {showBanner && }
          diff --git a/src/layouts/TextDetailLayout.astro b/src/layouts/TextDetailLayout.astro index ff6c268382..ec2b94b5e0 100644 --- a/src/layouts/TextDetailLayout.astro +++ b/src/layouts/TextDetailLayout.astro @@ -37,7 +37,7 @@ const { showBanner, englishUrl } = checkTranslationBanner( title={page.data.title} variant="item" topic={pageTopic} - className={pageTopic} + class={pageTopic} subtitle={null} > {showBanner && } diff --git a/src/layouts/TutorialLayout.astro b/src/layouts/TutorialLayout.astro index 99cf656f65..fa5273de1c 100644 --- a/src/layouts/TutorialLayout.astro +++ b/src/layouts/TutorialLayout.astro @@ -70,7 +70,7 @@ const { showBanner, englishUrl } = checkTranslationBanner( subtitle={null} variant="item" topic="tutorials" - className="tutorials" + class="tutorials" > {showBanner && } {entry.data.authors &&
          By {entry.data.authors?.join(", ")}
          }