chore: lint

.eslintrc.js

@@ -8,4 +8,7 @@ module.exports = {
     'plugin:@docusaurus/recommended',
     'plugin:@typescript-eslint/recommended',
   ],
+  rules: {
+    '@typescript-eslint/no-unused-vars': 'off'
+  }
 }

data/resource.ts

@@ -18,7 +18,7 @@ const friends: Resource[] = Friends.map(f => {
     ...f,
     name: f.title,
     desc: f.description,
-    logo: f.avatar,
+    logo: f.avatar!,
     href: f.website,
   }
 })

src/components/UserCard/index.tsx

@@ -30,11 +30,15 @@ export default function UserCard({ isNavbar = false }: { isNavbar?: boolean }) {
 
   const logoLink = useBaseUrl(logo.src || '/')
 
-  const blogPluginData = usePluginData('docusaurus-plugin-content-blog') as any
-  const docData = (usePluginData('docusaurus-plugin-content-docs') as any)
-    ?.versions[0].docs
-  const blogData = blogPluginData?.blogs as BlogPost[]
-  const tagData = blogPluginData?.tags as BlogTags
+  const blogPluginData = usePluginData('docusaurus-plugin-content-blog') as {
+    blogs: BlogPost[]
+    tags: BlogTags
+  }
+  const docData = (
+    usePluginData('docusaurus-plugin-content-docs') as { versions: { docs: BlogPost[] } }
+  )?.versions[0].docs
+  const blogData = blogPluginData?.blogs
+  const tagData = blogPluginData?.tags
 
   const count: Count = {
     blog: blogData.length,
@@ -67,11 +71,7 @@ export default function UserCard({ isNavbar = false }: { isNavbar?: boolean }) {
           <Icon icon="carbon:notebook" width="20" height="20" />
           {count.doc}
         </Link>
-        <Link
-          className={styles.numItem}
-          href="/project"
-          data-tips="project count"
-        >
+        <Link className={styles.numItem} href="/project" data-tips="project count">
           <Icon icon="ph:projector-screen" width="20" height="20" />
           {count.project}
         </Link>

src/css/custom.scss

@@ -7,10 +7,10 @@
   --ifm-color-primary-lighter: #b0e6ff;
   --ifm-color-primary-lightest: #d5f1fd;
   --ifm-code-font-size: 95%;
-  --ifm-font-family-base: 'Inter', ui-sans-serif, system-ui, -apple-system,
-    'Segoe UI', 'Helvetica Neue', 'Noto Sans', sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', consolas,
-    sfmono-regular, menlo, monaco, 'Liberation Mono', monospace;
+  --ifm-font-family-base: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
+    'Helvetica Neue', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji', consolas, sfmono-regular, menlo, monaco,
+    'Liberation Mono', monospace;
 
   --ifm-heading-font-family: var(--ifm-font-family-base);
 
@@ -75,9 +75,20 @@ html[data-theme='dark'] {
 }
 
 body {
-  font-family: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei',
-    'Segoe UI', Roboto, Helvetica, 'noto sans sc', 'hiragino sans gb',
-    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Not Color Emoji';
+  font-family:
+    system-ui,
+    -apple-system,
+    'PingFang SC',
+    'Microsoft YaHei',
+    'Segoe UI',
+    Roboto,
+    Helvetica,
+    'noto sans sc',
+    'hiragino sans gb',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Not Color Emoji';
 }
 
 html,
@@ -117,6 +128,8 @@ article {
 
     img {
       border-radius: 10px;
+      display: flex;
+      margin: 0 auto;
 
       // box-shadow: 0 0 25px rgb(132 167 156 / 10%);
     }
@@ -156,11 +169,6 @@ article {
     .markdown-body a:hover::before {
       width: 100%;
     }
-
-    img {
-      display: flex;
-      margin: 0 auto;
-    }
   }
 }
 

src/hooks/useViewType.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
-type ViewType = 'list' | 'grid'
+export type ViewType = 'list' | 'grid'
 
 export function useViewType() {
   const [viewType, setViewType] = useState<ViewType>('list')

src/pages/_components/HomepageBlog/index.tsx

@@ -48,11 +48,11 @@ export function BlogItem({ post }: { post: BlogPost }) {
 
 export default function BlogRecent(): JSX.Element {
   const globalData = useGlobalData()
-  const blogPluginData = globalData?.['docusaurus-plugin-content-blog']?.[
-    'default'
-  ] as any
+  const blogPluginData = globalData?.['docusaurus-plugin-content-blog']?.['default'] as {
+    blogs: BlogPost[]
+  }
 
-  const blogData = blogPluginData?.blogs as BlogPost[]
+  const blogData = blogPluginData?.blogs
   const posts = chunk(blogData.slice(0, 6), 2)
 
   const ref = React.useRef<HTMLDivElement>(null)
@@ -67,9 +67,7 @@ export default function BlogRecent(): JSX.Element {
   }
 
   return (
-    <section
-      className={clsx('container padding-vert--sm', styles.blogContainer)}
-    >
+    <section className={clsx('container padding-vert--sm', styles.blogContainer)}>
       <SectionTitle icon="ri:quill-pen-line" href={'/blog'}>
         <Translate id="homepage.blog.title">近期博客</Translate>
       </SectionTitle>

src/pages/_components/HomepageBlog/styles.module.scss

@@ -44,7 +44,7 @@
   }
 }
 
-@media only screen and (max-width: 996px) {
+@media only screen and (max-width <= 996px) {
   .blogContainer {
     max-width: 768px;
   }

src/pages/_components/HomepageFeatures/styles.module.scss

@@ -36,7 +36,7 @@ html[data-theme='dark'] .feature:hover {
   box-shadow: 0 0 10px 10px rgb(71 71 71 / 20%);
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width <= 768px) {
   .features {
     grid-template-columns: repeat(1, 1fr);
     gap: 0.75rem;

src/pages/_components/HomepageHero/index.tsx

@@ -148,8 +148,8 @@ function Name() {
         className={styles.name}
         onMouseMove={e => {
           const bounding = e.currentTarget.getBoundingClientRect()
-          e.currentTarget.style.setProperty('--positionX', `${bounding.x}px`)
-          e.currentTarget.style.setProperty('--positionY', `${bounding.y}px`)
+          e.currentTarget.style.setProperty('--position-x', `${bounding.x}px`)
+          e.currentTarget.style.setProperty('--position-y', `${bounding.y}px`)
         }}
       >
         <Translate id="homepage.hero.name">愧怍</Translate>
@@ -164,22 +164,12 @@ export default function Hero() {
     <motion.div className={styles.hero}>
       <div className={styles.intro}>
         <Name />
-        <motion.p
-          custom={2}
-          initial="hidden"
-          animate="visible"
-          variants={variants}
-        >
+        <motion.p custom={2} initial="hidden" animate="visible" variants={variants}>
           <Translate id="homepage.hero.text">
             {`在这里我会分享各类技术栈所遇到问题与解决方案，带你了解最新的技术栈以及实际开发中如何应用，并希望我的开发经历对你有所启发。`}
           </Translate>
         </motion.p>
-        <motion.div
-          custom={3}
-          initial="hidden"
-          animate="visible"
-          variants={variants}
-        >
+        <motion.div custom={3} initial="hidden" animate="visible" variants={variants}>
           <SocialLinks />
         </motion.div>
 

src/pages/_components/HomepageHero/styles.module.scss

@@ -50,12 +50,8 @@
   background-size: var(--lighting-size) var(--lighting-size);
   background-repeat: no-repeat;
 
-  background-position-x: calc(
-    var(--x) - var(--positionX) - calc(var(--lighting-size) / 2)
-  );
-  background-position-y: calc(
-    var(--y) - var(--positionY) - calc(var(--lighting-size) / 2)
-  );
+  background-position-x: calc(var(--x) - var(--position-x) - calc(var(--lighting-size) / 2));
+  background-position-y: calc(var(--y) - var(--position-y) - calc(var(--lighting-size) / 2));
 
   background-color: var(--lighting-color);
 
@@ -73,9 +69,8 @@
   width: 100%;
   height: 90%;
   z-index: 5;
-  align-items: center;
+  place-items: center center;
   align-self: flex-start;
-  justify-items: center;
 }
 
 .background svg {
@@ -88,11 +83,7 @@
   top: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(
-    90deg,
-    rgb(150 255 244 / 81.3%) 0%,
-    rgb(0 71 252 / 80.6%) 100%
-  );
+  background: linear-gradient(90deg, rgb(150 255 244 / 81.3%) 0%, rgb(0 71 252 / 80.6%) 100%);
   border-radius: 50%;
   opacity: 0.3;
 
@@ -112,7 +103,9 @@
 
   backdrop-filter: blur(2px);
 
-  box-shadow: inset 1px 1px 5px rgb(255 255 255 / 30%), 0 0 5px rgb(0 0 0 / 20%);
+  box-shadow:
+    inset 1px 1px 5px rgb(255 255 255 / 30%),
+    0 0 5px rgb(0 0 0 / 20%);
 
   border-radius: 8px;
 
@@ -138,7 +131,7 @@
     transform: translateY(0) translateX(0) rotate(270deg) scaleX(0.7);
   }
 
-  to {
+  100% {
     transform: translateY(-25%) translateX(40%) rotate(1turn);
   }
 }
@@ -191,7 +184,6 @@
   );
 
   filter: blur(8px);
-  inset: 0;
   transform-origin: center;
   will-change: transform;
 }
@@ -230,7 +222,7 @@ html[data-theme='dark'] {
   }
 }
 
-@media (max-width: 1000px) {
+@media (max-width <= 1000px) {
   .hero {
     grid-template-columns: 1fr;
     grid-template-rows: max-content minmax(0, max-content);
@@ -276,7 +268,7 @@ html[data-theme='dark'] {
   }
 }
 
-@media (max-width: 570px) {
+@media (width <= 570px) {
   .hero {
     height: auto;
   }

src/pages/_components/HomepageProject/styles.module.scss

@@ -66,7 +66,7 @@
     transform: translate(0);
   }
 
-  to {
+  100% {
     transform: translate(-20%);
   }
 }
@@ -85,20 +85,12 @@
 
 .leftBox {
   left: 0;
-  background-image: linear-gradient(
-    to right,
-    var(--content-background-color),
-    transparent
-  );
+  background-image: linear-gradient(to right, var(--content-background-color), transparent);
 }
 
 .rightBox {
   right: 0;
-  background-image: linear-gradient(
-    to left,
-    var(--content-background-color),
-    transparent
-  );
+  background-image: linear-gradient(to left, var(--content-background-color), transparent);
 }
 
 html[data-theme='dark'] .leftBox {
@@ -110,7 +102,7 @@ html[data-theme='dark'] .rightBox {
 }
 
 /* Media Queries */
-@media (min-width: 640px) {
+@media (min-width <= 640px) {
   .slider {
     height: 250px;
   }
@@ -125,13 +117,13 @@ html[data-theme='dark'] .rightBox {
   }
 }
 
-@media (min-width: 768px) {
+@media (min-width <= 768px) {
   .gradientBox {
     width: 100px;
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width <= 1024px) {
   .slider {
     height: 280px;
   }

src/pages/project/_components/ShowcaseFilterToggle/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import { useHistory, useLocation } from '@docusaurus/router'
 
-import { prepareUserState } from '../../index.tsx'
+import { prepareUserState } from '../../index'
 
 import styles from './styles.module.css'
 import clsx from 'clsx'
@@ -51,7 +51,6 @@ export default function ShowcaseFilterToggle(): JSX.Element {
         }}
         checked={operator}
       />
-      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
       <label htmlFor={id} className={clsx(styles.checkboxLabel, 'shadow--md')}>
         <span className={styles.checkboxLabelOr}>OR</span>
         <span className={styles.checkboxLabelAnd}>AND</span>

src/pages/resource/_components/ResourceCard/index.tsx

@@ -15,7 +15,7 @@ const ResourceCard = memo(({ resource }: { resource: Resource }) => (
       src={
         typeof resource.logo === 'string'
           ? resource.logo
-          : (resource.logo as any)?.src?.src
+          : (resource.logo as { src: { src: string } })?.src?.src
       }
       alt={resource.name}
       className={clsx(styles.resourceCardImage)}