style: format code with Prettier and StandardJS

src/components/hooks/useInViewport/index.jsx

@@ -1,42 +1,44 @@
-import { useEffect, useRef, useState } from 'react';
-
-const useInViewport = (triggerOnce = false, threshold = 0, rootMargin="0px" ) => {
-    const inViewRef = useRef(null);
-    const [inViewport, setInViewport] = useState(false);
-    const observer = useRef(null);
+import { useEffect, useRef, useState } from 'react'
 
+const useInViewport = (triggerOnce = false, threshold = 0, rootMargin = '0px') => {
+  const inViewRef = useRef(null)
+  const [inViewport, setInViewport] = useState(false)
+  const observer = useRef(null)
 
   useEffect(() => {
-    const targetElement = elementRef.current;
-    if (!targetElement) return;
-    observer.current = new IntersectionObserver((entries) => {
+    const targetElement = elementRef.current
+    if (!targetElement) return
+    observer.current = new IntersectionObserver(
+      (entries) => {
         entries.forEach((entry) => {
-            if (entry.isIntersecting && entry.intersectionRatio >= threshold) {
-              setInViewport(true);
-              if (triggerOnce) {
-                observer.current.disconnect()
-              }
-            } else {
-                setInViewport(false);
+          if (entry.isIntersecting && entry.intersectionRatio >= threshold) {
+            setInViewport(true)
+            if (triggerOnce) {
+              observer.current.disconnect()
             }
-        });
-    }, {threshold, rootMargin});
+          } else {
+            setInViewport(false)
+          }
+        })
+      },
+      { threshold, rootMargin }
+    )
 
     if (inViewRef.current) {
-        observer.current.observe(inViewRef.current);
+      observer.current.observe(inViewRef.current)
     }
 
     return () => {
-        if (inViewRef.current) {
-            observer.current.unobserve(inViewRef.current);
-        }
-    };
-  }, [threshold, triggerOnce, rootMargin]);
+      if (inViewRef.current) {
+        observer.current.unobserve(inViewRef.current)
+      }
+    }
+  }, [threshold, triggerOnce, rootMargin])
 
-    return {
-        inViewRef,
-        inViewport
-    };
-};
+  return {
+    inViewRef,
+    inViewport
+  }
+}
 
-export default useInViewport;
+export default useInViewport

src/components/stateless/AnimateOnScreen/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 
-const useElementOnScreen = (ref,  rootMargin = '0px', threshold = 0, triggerOnce=false) => {
+const useElementOnScreen = (ref, rootMargin = '0px', threshold = 0, triggerOnce = false) => {
   const [isIntersecting, setIsIntersecting] = useState(true)
   const observer = useRef(null)
   useEffect(() => {
@@ -33,7 +33,7 @@
   const ref = useRef(null)
   const onScreen = useElementOnScreen(ref, rootMargin, threshold, triggerOnce)
   const defaultStyles = {
-    transition: '1000ms ease-in-out',
+    transition: '1000ms ease-in-out'
   }
   return (
     <div
@@ -42,11 +42,11 @@
         onScreen
           ? {
               ...defaultStyles,
-              ...to,
+              ...to
             }
           : {
               ...defaultStyles,
-              ...from,
+              ...from
             }
       }
     >
@@ -55,36 +55,53 @@
   )
 }
 
-const FadeIn = ({rootMargin="0px", threshold=0, triggerOnce=false, children }) => (
-  <AnimateIn from={{ opacity: 0 }} to={{ opacity: 1 }} rootMargin={rootMargin} threshold={threshold} triggerOnce={triggerOnce}>
+const FadeIn = ({ rootMargin = '0px', threshold = 0, triggerOnce = false, children }) => (
+  <AnimateIn
+    from={{ opacity: 0 }}
+    to={{ opacity: 1 }}
+    rootMargin={rootMargin}
+    threshold={threshold}
+    triggerOnce={triggerOnce}
+  >
     {children}
   </AnimateIn>
 )
 
-const FadeUp = ({rootMargin="0px", threshold=0, triggerOnce=false, children }) => (
-  <AnimateIn from={{ opacity: 0, translate: '0 2rem' }} to={{ opacity: 1, translate: 'none' }} rootMargin={rootMargin} threshold={threshold} triggerOnce={triggerOnce}>
+const FadeUp = ({ rootMargin = '0px', threshold = 0, triggerOnce = false, children }) => (
+  <AnimateIn
+    from={{ opacity: 0, translate: '0 2rem' }}
+    to={{ opacity: 1, translate: 'none' }}
+    rootMargin={rootMargin}
+    threshold={threshold}
+    triggerOnce={triggerOnce}
+  >
     {children}
   </AnimateIn>
 )
 
-const ScaleIn = ({rootMargin="0px", threshold=0, triggerOnce=false, children }) => (
-  <AnimateIn from={{ scale: '0' }} to={{ scale: '1' }} rootMargin={rootMargin} threshold={threshold} triggerOnce={triggerOnce}>
+const ScaleIn = ({ rootMargin = '0px', threshold = 0, triggerOnce = false, children }) => (
+  <AnimateIn
+    from={{ scale: '0' }}
+    to={{ scale: '1' }}
+    rootMargin={rootMargin}
+    threshold={threshold}
+    triggerOnce={triggerOnce}
+  >
     {children}
   </AnimateIn>
 )
 
-const DiyAnimation = ({from, to, rootMargin="0px", threshold=0, triggerOnce=false, children }) => (
-  <AnimateIn from={from } to={to} rootMargin={rootMargin} threshold={threshold} triggerOnce={triggerOnce}>
+const DiyAnimation = ({ from, to, rootMargin = '0px', threshold = 0, triggerOnce = false, children }) => (
+  <AnimateIn from={from} to={to} rootMargin={rootMargin} threshold={threshold} triggerOnce={triggerOnce}>
     {children}
   </AnimateIn>
 )
 
-
 const AnimateOnScreen = {
   FadeIn,
   FadeUp,
   ScaleIn,
-  DiyAnimation,
+  DiyAnimation
 }
 
 export default AnimateOnScreen

src/pages/home/index.jsx

@@ -1,4 +1,4 @@
 import React, { version, useState, useRef } from 'react'
 import { Input, Flex, Button } from 'antd'
 import { SendOutlined } from '@ant-design/icons'
 import { Atom, Merge, GitMerge, GitPullRequestArrow } from 'lucide-react'
@@ -27,7 +27,7 @@
 import MeshGradientBackground from '@stateless/MeshGradientBackground'
 import TagCloud from '@stateless/TagCloud'
 import SlideLinear from '@stateless/SlideLinear'
 import Masonry from '@container/masonryContainer'
 
 import { oneApiChat, prettyObject } from '@utils/aidFn'
 
@@ -86,8 +86,8 @@
       [
         {
           content: text,
-          role: 'user',
-        },
+          role: 'user'
+        }
       ],
       key,
       signal
@@ -174,36 +174,32 @@
         I love coding in <AlternatingText alternateText={['javascript', 'typescript', 'rect', 'vue']} />.
       </section>
       <section style={{ marginBottom: 40 }}>
-        <AutoLink text="foo bar baz http://example.org bar https://github.com/wkylin/pro-react-admin" />
+        <AutoLink text='foo bar baz http://example.org bar https://github.com/wkylin/pro-react-admin' />
       </section>
-      <section className={styles.line}></section>
+      <section className={styles.line} />
       <section>
-        <AvatarCard avatar="https://picsum.photos/seed/picsum/300/160" text="Hi, I'm a developer." />
+        <AvatarCard avatar='https://picsum.photos/seed/picsum/300/160' text="Hi, I'm a developer." />
       </section>
       <section>
-        <IsometricCard text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?" />
+        <IsometricCard text='Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?' />
       </section>
       <StarRating value={2} />
-      <LineBordered text="A line bordered text." />
+      <LineBordered text='A line bordered text.' />
       <section style={{ display: 'flex', alignItems: 'center', marginTop: 10, marginBottom: 40 }}>
         <Atom /> <Merge /> <GitMerge /> <GitPullRequestArrow />
       </section>
       <section style={{ marginBottom: 40 }}>
         <ScrollAnimation>
-          <LazyLoadImage src="https://picsum.photos/seed/picsum/300/160" alt="Strawberries" />
+          <LazyLoadImage src='https://picsum.photos/seed/picsum/300/160' alt='Strawberries' />
         </ScrollAnimation>
       </section>
       <section style={{ marginBottom: 40, fontSize: 36 }}>
         <Typewriter
           options={{
-            strings: [
-              "Software Developer.",
-              "Full Stack Developer.",
-              "Open Source Contributor.",
-            ],
+            strings: ['Software Developer.', 'Full Stack Developer.', 'Open Source Contributor.'],
             autoStart: true,
             loop: true,
-            deleteSpeed: 50,
+            deleteSpeed: 50
           }}
         />
       </section>
@@ -229,35 +225,34 @@
       </section>
       <section style={{ marginBottom: 40 }}>
         <AnimateOnScreen.FadeIn>
-          <AvatarCard avatar="https://picsum.photos/seed/picsum/300/160" text="Hi, I'm a developer." />
+          <AvatarCard avatar='https://picsum.photos/seed/picsum/300/160' text="Hi, I'm a developer." />
         </AnimateOnScreen.FadeIn>
       </section>
       <section style={{ marginBottom: 40 }}>
         <AnimateOnScreen.FadeUp>
-          <img src="https://picsum.photos/360/200.jpg" alt="" />
+          <img src='https://picsum.photos/360/200.jpg' alt='' />
         </AnimateOnScreen.FadeUp>
       </section>
       <section style={{ marginBottom: 40, width: 360, height: 200 }}>
         <AnimateOnScreen.ScaleIn triggerOnce={false}>
           <>
-            <img src="https://picsum.photos/360/200/?blur=2" alt="" />
+            <img src='https://picsum.photos/360/200/?blur=2' alt='' />
             <section className={styles['blend-me']}>Mix Blend Mode</section>
           </>
         </AnimateOnScreen.ScaleIn>
       </section>
       <section style={{ marginBottom: 40, width: 360, height: 200 }}>
         <AnimateOnScreen.DiyAnimation
-          from={{ opacity: 0, transform: "translate(-100%, 0)" }}
-          to={{ opacity: 1, transform: "translate(0, 0)" }}
-          triggerOnce={true}
+          from={{ opacity: 0, transform: 'translate(-100%, 0)' }}
+          to={{ opacity: 1, transform: 'translate(0, 0)' }}
+          triggerOnce
         >
-          <img src="https://picsum.photos/360/200.jpg" alt="" />
+          <img src='https://picsum.photos/360/200.jpg' alt='' />
         </AnimateOnScreen.DiyAnimation>
       </section>
       <section style={{ marginBottom: 40, width: 360, height: 200 }}>
-        <Spotlight className="w-full h-full group mx-auto grid max-w-sm items-start gap-6">
-          <div className="relative w-full h-full overflow-hidden rounded-2xl bg-gray-800 p-px before:pointer-events-none before:absolute before:-left-40 before:-top-40 before:z-10 before:h-80 before:w-80 before:translate-x-[var(--mouse-x)] before:translate-y-[var(--mouse-y)] before:rounded-full before:bg-indigo-900/90 before:opacity-0 before:blur-3xl before:transition-opacity before:duration-500 after:pointer-events-none after:absolute after:-left-48 after:-top-48 after:z-30 after:h-64 after:w-64 after:translate-x-[var(--mouse-x)] after:translate-y-[var(--mouse-y)] after:rounded-full after:bg-indigo-500 after:opacity-0 after:blur-3xl after:transition-opacity after:duration-500 after:hover:opacity-20 before:group-hover:opacity-100">
-          </div>
+        <Spotlight className='w-full h-full group mx-auto grid max-w-sm items-start gap-6'>
+          <div className='relative w-full h-full overflow-hidden rounded-2xl bg-gray-800 p-px before:pointer-events-none before:absolute before:-left-40 before:-top-40 before:z-10 before:h-80 before:w-80 before:translate-x-[var(--mouse-x)] before:translate-y-[var(--mouse-y)] before:rounded-full before:bg-indigo-900/90 before:opacity-0 before:blur-3xl before:transition-opacity before:duration-500 after:pointer-events-none after:absolute after:-left-48 after:-top-48 after:z-30 after:h-64 after:w-64 after:translate-x-[var(--mouse-x)] after:translate-y-[var(--mouse-y)] after:rounded-full after:bg-indigo-500 after:opacity-0 after:blur-3xl after:transition-opacity after:duration-500 after:hover:opacity-20 before:group-hover:opacity-100' />
         </Spotlight>
       </section>
       <section style={{ marginBottom: 40, height: 200, width: 360, overflow: 'hidden' }}>
@@ -274,16 +269,16 @@
         mask
       </section>
       <section style={{ marginBottom: 40 }}>
-        <button className={styles['button']}>
+        <button className={styles.button}>
           <span className={styles['button-label']}>Click Me</span>
         </button>
       </section>
 
       <section style={{ position: 'relative', margin: '80px 0 160px 100px' }}>
-        <div className={styles['circle-1']}></div>
-        <div className={styles['circle-2']}></div>
-        <div className={styles['circle-3']}></div>
-        <div className={styles['circle-4']}></div>
+        <div className={styles['circle-1']} />
+        <div className={styles['circle-2']} />
+        <div className={styles['circle-3']} />
+        <div className={styles['circle-4']} />
       </section>
 
       <section style={{ margin: 20 }} className={styles.eHElAY}>
@@ -300,13 +295,7 @@
         </div>
       </section>
       <section style={{ margin: 20, fontSize: 40 }}>
-        <CountUp
-          start={20}
-          end={10000}
-          duration={10}
-          enableScrollSpy
-          scrollSpyDelay={1000}
-        />
+        <CountUp start={20} end={10000} duration={10} enableScrollSpy scrollSpyDelay={1000} />
       </section>
       {/* <section style={{ margin: 20 }}>
         <Masonry />
@@ -315,26 +304,26 @@
         <TagCloud />
       </section>
       <section style={{ margin: 20 }}>
-        <SlideLinear >
-          <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4}}></div>
-          <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4}}></div>
-          <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4}}></div>
-          <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4}}></div>
-          <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4}}></div>
-          <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4}}></div>
-          <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4}}></div>
-          <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4}}></div>
+        <SlideLinear>
+          <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4 }} />
+          <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4 }} />
+          <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4 }} />
+          <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4 }} />
+          <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4 }} />
+          <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4 }} />
+          <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4 }} />
+          <div style={{ width: 200, height: 40, background: '#aaa', margin: '0 10px', borderRadius: 4 }} />
         </SlideLinear>
       </section>
 
       <section style={{ width: 600, margin: '30px 0' }}>
-        <Input defaultValue={apiKey} placeholder="api key" onChange={changeApiKey} style={{ marginBottom: 20 }} />
-        <Flex align="center">
+        <Input defaultValue={apiKey} placeholder='api key' onChange={changeApiKey} style={{ marginBottom: 20 }} />
+        <Flex align='center'>
           {/* <LinearWrap> */}
           <Input.TextArea
             ref={textareaRef}
             defaultValue={chatText}
-            placeholder="来，说点什么呗...Meta + Enter发送"
+            placeholder='来，说点什么呗...Meta + Enter发送'
             onChange={changeChatText}
             onKeyDown={onInputKeyDown}
             autoSize
@@ -344,13 +333,13 @@
           <Button
             style={{ margin: '0 10px' }}
             icon={<SendOutlined rotate={-60} />}
-            type="primary"
+            type='primary'
             disabled={isStream}
             onClick={onSubmit}
           >
             发送
           </Button>
-          <Button icon={<SendOutlined rotate={-60} />} type="primary" disabled={!isStream} onClick={onStop}>
+          <Button icon={<SendOutlined rotate={-60} />} type='primary' disabled={!isStream} onClick={onStop}>
             停止
           </Button>
         </Flex>
@@ -362,7 +351,6 @@
         <ReMarkdown markdownText={aiText} isLoading={isStream} />
       </section>
 
-
       <section style={{ position: 'relative', height: 300 }}>
         <AnimateWave>
           <p> wave </p>