feat: improve project card style

blog/lifestyle/关于 restful api 路径定义的思考.md

@@ -82,7 +82,7 @@ export class UserController {
 
 换做是我，肯定不会希望将用户的代码与文章的代码混杂在一起。解决办法也是有的，可以额外创建一个新的 UserController 文件，专门用于获取用户下的资源（这里指 article），这样可以 即与原有针对 user 资源进行解耦，有可以有比较清晰接口分类。
 
-:::waring
+:::warning
 
 不过针对这种情况我可能的解决办法是下会额外 **起一个别名**，例如 author，将 `/users/:id/articles`转为 `/authors/:id/articles`，不过在这里指向的是用户 id，而不是新建一个 author 实体（资源）。
 

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

@@ -1,9 +1,8 @@
-import React, { memo, useEffect, useRef } from 'react'
+import React, { memo } from 'react'
 import clsx from 'clsx'
 import Image from '@theme/IdealImage'
 import Link from '@docusaurus/Link'
 import Translate from '@docusaurus/Translate'
-import { motion } from 'framer-motion'
 import styles from './styles.module.css'
 import FavoriteIcon from '@site/src/components/svgIcons/FavoriteIcon'
 import Tooltip from '../ShowcaseTooltip'
@@ -55,12 +54,9 @@ function ShowcaseCardTag({ tags }: { tags: TagType[] }) {
 
 const ShowcaseCard = memo(({ project }: { project: Project }) => {
   return (
-    <motion.li
+    <div
       key={project.title}
-      className={clsx('card shadow--md', styles.showcaseCard)}
-      whileHover={{ scale: 1.025 }}
-      whileTap={{ scale: 0.975 }}
-      transition={{ type: 'spring', stiffness: 400, damping: 10 }}
+      className={clsx('card', styles.showcaseCard)}
     >
       {project.preview && (
         <div className={clsx('card__image', styles.showcaseCardImage)}>
@@ -98,7 +94,7 @@ const ShowcaseCard = memo(({ project }: { project: Project }) => {
       <ul className={clsx('card__footer', styles.cardFooter)}>
         <ShowcaseCardTag tags={project.tags} />
       </ul>
-    </motion.li>
+    </div>
   )
 })
 

src/pages/project/_components/ShowcaseCard/styles.module.css

@@ -1,7 +1,7 @@
 .showcaseCard {
   position: relative;
-  box-shadow: 0 10px 30px -5px rgb(0 0 0 / 30%);
-  transition: box-shadow 0.5s, opacity 0.5s;
+  box-shadow: var(--blog-item-shadow);
+  transition: opacity 0.5s;
   will-change: transform;
   overflow: hidden;
   touch-action: none;

src/pages/project/index.tsx

@@ -1,27 +1,26 @@
 import React from 'react'
 import _ from 'loadsh'
-import Layout from '@theme/Layout'
 import clsx from 'clsx'
-import Translate, { translate } from '@docusaurus/Translate'
-
+import { translate } from '@docusaurus/Translate'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import ShowcaseCard from './_components/ShowcaseCard'
-import { projects, groupByProjects } from '@site/data/project'
+import { projects, groupByProjects, projectTypeMap } from '@site/data/project'
 
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'
 
 import styles from './styles.module.css'
+import MyLayout from '@site/src/theme/MyLayout'
 
 const TITLE = translate({
   id: 'theme.project.title',
   message: '项目',
 })
 const DESCRIPTION = translate({
   id: 'theme.project.description',
-  message:
-    '学而无用，不如学而用之。这里是我在技术领域中努力实践和应用的最佳证明。',
+  message: '学而无用，不如学而用之。这里是我在技术领域中努力实践和应用的最佳证明。',
 })
 
-const GITHUB_URL = 'https://github.com/kuizuo'
+// const GITHUB_URL = 'https://github.com/kuizuo'
 
 type ProjectState = {
   scrollTopPosition: number
@@ -39,30 +38,27 @@ export function prepareUserState(): ProjectState | undefined {
   return undefined
 }
 
-const SearchNameQueryKey = 'name'
-
-function readSearchName(search: string) {
-  return new URLSearchParams(search).get(SearchNameQueryKey)
-}
-
 function ShowcaseHeader() {
   return (
-    <section className="margin-top--lg margin-bottom--lg text--center">
-      <h1>{TITLE}</h1>
+    <section className="text--center">
+      <h2>{TITLE}</h2>
       <p>{DESCRIPTION}</p>
-      <a
+      {/* <a
         className="button button--primary"
         href={GITHUB_URL}
         target="_blank"
         rel="noreferrer"
       >
         <Translate id="showcase.header.button">前往 Github 克隆项目</Translate>
-      </a>
+      </a> */}
     </section>
   )
 }
 
 function ShowcaseCards() {
+  const { i18n } = useDocusaurusContext()
+  const lang = i18n.currentLocale
+
   if (projects.length === 0) {
     return (
       <section className="margin-top--lg margin-bottom--xl">
@@ -77,20 +73,13 @@ function ShowcaseCards() {
     <section className="margin-top--lg margin-bottom--xl">
       <>
         <div className="container margin-top--lg">
-          <div
-            className={clsx('margin-bottom--md', styles.showcaseFavoriteHeader)}
-          ></div>
+          <div className={clsx('margin-bottom--md', styles.showcaseFavoriteHeader)}></div>
 
           {Object.entries(groupByProjects).map(([key, value]) => {
             return (
               <div key={key}>
-                <div
-                  className={clsx(
-                    'margin-bottom--md',
-                    styles.showcaseFavoriteHeader,
-                  )}
-                >
-                  <h2>{_.upperFirst(key)}</h2>
+                <div className={clsx('margin-bottom--md', styles.showcaseFavoriteHeader)}>
+                  <h3>{_.upperFirst(lang === 'en' ? key: projectTypeMap[key])}</h3>
                 </div>
                 <ul className={styles.showcaseList}>
                   {value.map(project => (
@@ -108,12 +97,12 @@ function ShowcaseCards() {
 
 function Showcase(): JSX.Element {
   return (
-    <Layout title={TITLE} description={DESCRIPTION}>
-      <main className="margin-vert--md">
+    <MyLayout title={TITLE} description={DESCRIPTION} maxWidth={1280}>
+      <main className="margin-vert--lg">
         <ShowcaseHeader />
         <ShowcaseCards />
       </main>
-    </Layout>
+    </MyLayout>
   )
 }
 

src/pages/project/styles.module.css

@@ -67,6 +67,7 @@
 
 .showcaseFavoriteHeader {
   display: flex;
+  justify-content: center;
   align-items: center;
 }
 

src/theme/MyLayout/index.tsx

@@ -7,12 +7,13 @@ import styles from './styles.module.scss'
 
 export default function MyLayout({
   children,
+  maxWidth,
   ...layoutProps
-}: Props): JSX.Element {
+}: Props & { maxWidth: number }): JSX.Element {
   return (
     <Layout {...layoutProps}>
-      <div className={styles.containerWrapper}>
-        <div className={clsx(styles.myContainer, 'margin-vert--lg')}>
+      <div className={styles.containerWrapper} >
+        <div className={clsx(styles.myContainer, 'margin-vert--lg')} style={{ maxWidth: `${maxWidth}px` }}>
           <main>{children}</main>
         </div>
       </div>

src/theme/MyLayout/styles.module.scss

@@ -5,5 +5,4 @@
 .myContainer {
   max-width: 800px;
   margin: 0 auto;
-  padding: 0.5rem 1rem;
 }