style(docs): fix eslint errors

semaphore-protocol · Dec 19, 2023 · d0387d6 · d0387d6
1 parent 21d8c15
commit d0387d6
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 67 deletions.
diff --git a/apps/docs/docusaurus.config.js b/apps/docs/docusaurus.config.js
@@ -45,13 +45,13 @@ module.exports = {
     themeConfig:
         /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
         ({
-            //announcementBar: {
-            //id: "semaphore-v3",
-            //content:
-            //'<b>We are pleased to announce the release of <a target="_blank" rel="noopener noreferrer" href="https://github.com/semaphore-protocol/semaphore/releases/tag/v3.0.0">Semaphore V3</a> 🎉</b>',
-            //backgroundColor: "#DAE0FF",
-            //textColor: "#000000"
-            //},
+            // announcementBar: {
+            // id: "semaphore-v3",
+            // content:
+            // '<b>We are pleased to announce the release of <a target="_blank" rel="noopener noreferrer" href="https://github.com/semaphore-protocol/semaphore/releases/tag/v3.0.0">Semaphore V3</a> 🎉</b>',
+            // backgroundColor: "#DAE0FF",
+            // textColor: "#000000"
+            // },
             navbar: {
                 logo: {
                     alt: "Semaphore Logo",

diff --git a/apps/docs/src/components/icons/IconCheck.tsx b/apps/docs/src/components/icons/IconCheck.tsx
@@ -10,7 +10,7 @@ export default function IconCheck({ width = 24, height = 24 }: IconCheckProps):
         <svg
             className="custom-icon"
             width={width}
-            height={width}
+            height={height}
             viewBox="0 0 24 24"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"

diff --git a/apps/docs/src/pages/index.tsx b/apps/docs/src/pages/index.tsx
@@ -19,7 +19,7 @@ import styles from "./styles.module.scss"
 export default function Home() {
     return (
         <Layout
-            title={`Semaphore Protocol`}
+            title="Semaphore Protocol"
             description="A zero-knowledge protocol for anonymous signalling on Ethereum."
         >
             <div className={styles.container}>

diff --git a/apps/docs/src/theme/NavbarItem/index.tsx b/apps/docs/src/theme/NavbarItem/index.tsx
@@ -3,23 +3,22 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
 import OriginalNavBarItem from "@theme-original/NavbarItem"
 import React from "react"
 
-export default function NavbarItem(props) {
+export default function NavbarItem(props: any) {
     const { pathname } = useLocation()
     const { i18n } = useDocusaurusContext()
 
     const pathSegments = pathname.split("/")
 
-    let docs: string, version: string
+    let docs: string
+    let version: string
 
     if (i18n.locales.includes(pathSegments[1])) {
-        docs = pathSegments[2]
-        version = pathSegments[3]
+        ;[, , docs, version] = pathSegments
     } else {
-        docs = pathSegments[1]
-        version = pathSegments[2]
+        ;[, docs, version] = pathSegments
     }
 
-    let { className = "" } = props
+    const { className = "" } = props
 
     return (
         (!className ||

diff --git a/apps/docs/src/theme/Toggle/ToggleComponent.tsx b/apps/docs/src/theme/Toggle/ToggleComponent.tsx
@@ -0,0 +1,53 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import IconMoon from "@site/src/components/icons/IconMoon"
+import IconSun from "@site/src/components/icons/IconSun"
+import clsx from "clsx"
+import React, { memo, useRef, useState } from "react"
+import styles from "./styles.module.scss" // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
+
+export const ToggleComponent = memo(({ className, checked: defaultChecked, disabled, onChange }: any) => {
+    const [checked, setChecked] = useState(defaultChecked)
+    const [focused, setFocused] = useState(false)
+    const inputRef = useRef(null)
+    return (
+        <div
+            className={clsx(styles.toggle, className, {
+                [styles.toggleChecked]: checked,
+                [styles.toggleFocused]: focused,
+                [styles.toggleDisabled]: disabled
+            })}
+        >
+            <div className={styles.toggleTrack} role="button" tabIndex={-1} onClick={() => inputRef.current?.click()}>
+                <div className={styles.toggleTrackCheck}>
+                    <span className={styles.toggleIcon}>
+                        <IconMoon />
+                    </span>
+                </div>
+                <div className={styles.toggleTrackX}>
+                    <span className={styles.toggleIcon}>
+                        <IconSun />
+                    </span>
+                </div>
+                <div className={styles.toggleTrackThumb} />
+            </div>
+
+            <input
+                ref={inputRef}
+                checked={checked}
+                type="checkbox"
+                className={styles.toggleScreenReader}
+                aria-label="Switch between dark and light mode"
+                onChange={onChange}
+                onClick={() => setChecked(!checked)}
+                onFocus={() => setFocused(true)}
+                onBlur={() => setFocused(false)}
+                onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                        inputRef.current?.click()
+                    }
+                }}
+            />
+        </div>
+    )
+})
diff --git a/apps/docs/src/theme/Toggle/index.tsx b/apps/docs/src/theme/Toggle/index.tsx
@@ -5,58 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import useIsBrowser from "@docusaurus/useIsBrowser"
-import IconMoon from "@site/src/components/icons/IconMoon"
-import IconSun from "@site/src/components/icons/IconSun"
-import clsx from "clsx"
-import React, { memo, useRef, useState } from "react"
-import styles from "./styles.module.scss" // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
+import React from "react"
+import { ToggleComponent } from "./ToggleComponent"
 
-const ToggleComponent = memo(({ className, switchConfig, checked: defaultChecked, disabled, onChange }) => {
-    const [checked, setChecked] = useState(defaultChecked)
-    const [focused, setFocused] = useState(false)
-    const inputRef = useRef(null)
-    return (
-        <div
-            className={clsx(styles.toggle, className, {
-                [styles.toggleChecked]: checked,
-                [styles.toggleFocused]: focused,
-                [styles.toggleDisabled]: disabled
-            })}
-        >
-            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-            <div className={styles.toggleTrack} role="button" tabIndex={-1} onClick={() => inputRef.current?.click()}>
-                <div className={styles.toggleTrackCheck}>
-                    <span className={styles.toggleIcon}>
-                        <IconMoon />
-                    </span>
-                </div>
-                <div className={styles.toggleTrackX}>
-                    <span className={styles.toggleIcon}>
-                        <IconSun />
-                    </span>
-                </div>
-                <div className={styles.toggleTrackThumb} />
-            </div>
-
-            <input
-                ref={inputRef}
-                checked={checked}
-                type="checkbox"
-                className={styles.toggleScreenReader}
-                aria-label="Switch between dark and light mode"
-                onChange={onChange}
-                onClick={() => setChecked(!checked)}
-                onFocus={() => setFocused(true)}
-                onBlur={() => setFocused(false)}
-                onKeyDown={(e) => {
-                    if (e.key === "Enter") {
-                        inputRef.current?.click()
-                    }
-                }}
-            />
-        </div>
-    )
-})
 export default function Toggle(props) {
     const isBrowser = useIsBrowser()