Merge pull request #95 from syfxlin/develop

fix(style): Fix some styles

src/app/(group)/archives/page.tsx

@@ -84,7 +84,7 @@ export default async function ArchivesPage() {
             {[...data.categories]
               .sort((i1, i2) => i2.count - i1.count)
               .map(i => (
-                <Link key={`category-${i.name}`} tooltip aria-label={t("category.desc", i.name)} href={i.link}>
+                <Link key={`category-${i.name}`} aria-label={t("category.desc", i.name)} href={i.link}>
                   {i.name} ({i.count})
                 </Link>
               ))}
@@ -100,7 +100,7 @@ export default async function ArchivesPage() {
             {[...data.archives]
               .sort((i1, i2) => i2.name.localeCompare(i1.name))
               .map(i => (
-                <Link key={`archive-${i.name}`} tooltip aria-label={t("archive.desc", i.name)} href={i.link}>
+                <Link key={`archive-${i.name}`} aria-label={t("archive.desc", i.name)} href={i.link}>
                   {i.name} ({i.count})
                 </Link>
               ))}
@@ -116,7 +116,7 @@ export default async function ArchivesPage() {
             {[...data.tags]
               .sort((i1, i2) => i1.name.localeCompare(i2.name))
               .map(i => (
-                <Link key={`tag-${i.name}`} tooltip aria-label={t("tag.desc", i.name)} href={i.link}>
+                <Link key={`tag-${i.name}`} aria-label={t("tag.desc", i.name)} href={i.link}>
                   #{i.name} ({i.count})
                 </Link>
               ))}

src/components/layouts/header/back.tsx

@@ -0,0 +1,25 @@
+"use client";
+import React, { ReactNode } from "react";
+import { usePathname } from "next/navigation";
+import { cx } from "@syfxlin/reve";
+import { LinkButton } from "../../ui/button";
+import { t } from "../../../locales";
+import * as styles from "./styles.css";
+
+export interface BackProps {
+  icon: ReactNode;
+}
+
+export const Back: React.FC<BackProps> = ({ icon }) => {
+  const path = usePathname();
+  if (path !== "/") {
+    return (
+      <LinkButton tooltip aria-label={t("header.home")} href="/" className={cx(styles.view_elastic_icon, styles.back)}>
+        <span>{t("header.home")}</span>
+        {icon}
+      </LinkButton>
+    );
+  } else {
+    return null;
+  }
+};

src/components/layouts/header/index.tsx

@@ -4,6 +4,7 @@ import { fetcher } from "../../../contents";
 import { LinkButton } from "../../ui/button";
 import { Iconify } from "../../ui/iconify";
 import { Rss } from "./rss";
+import { Back } from "./back";
 import { Home } from "./home";
 import { Theme } from "./theme";
 import { Search } from "./search";
@@ -13,6 +14,9 @@ export const Header: React.FC = async () => {
   const header = await fetcher.header();
   return (
     <header className={styles.container}>
+      <div className={styles.left}>
+        <Back icon={<Iconify icon="ri:arrow-left-s-line" />} />
+      </div>
       <div className={styles.right}>
         <Home home={<Iconify icon="ri:home-5-line" />} blog={<Iconify icon="ri:article-line" />} />
         {header.main.map(item => (

src/components/layouts/header/styles.css.ts

@@ -4,22 +4,22 @@ import { theme } from "../../../theme/theme.css";
 export const container = styled.css`
   height: 80px;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   align-items: center;
 `;
 
-export const logo = styled.css`
-  display: flex !important;
-  overflow: hidden !important;
-  width: ${theme.fontSize.calc(2)} !important;
-  height: ${theme.fontSize.calc(2)} !important;
-  border-radius: ${theme.borderRadius.half} !important;
+export const back = styled.css`
+  svg {
+    display: flex !important;
+    width: ${theme.fontSize.calc(1.3)} !important;
+    height: ${theme.fontSize.calc(1.3)} !important;
+  }
 `;
 
 export const left = styled.css`
   display: flex !important;
   gap: ${theme.spacing.calc(1)} !important;
-  margin: 0 ${theme.spacing.calc(4)} !important;
+  margin: 0 ${theme.spacing.calc(5)} !important;
 `;
 
 export const right = styled.css`

src/components/widgets/toc/index.tsx

@@ -19,8 +19,9 @@ const Item: React.FC<TocProps & { active: string }> = ({ data, active }) => {
     <ul className={styles.list}>
       {data.map(i => (
         <li key={`toc-${i.slug}`} id={`toc-${i.slug}`} className={styles.item}>
+          {"- "}
           <Link className={cx(i.slug === active && "active")} href={`#${i.slug}`} aria-label={i.name}>
-            - {i.name}
+            {i.name}
           </Link>
           {i.children && <Item data={i.children} active={active} />}
         </li>

src/components/widgets/toc/styles.css.ts

@@ -51,23 +51,17 @@ export const list = styled.css`
 `;
 
 export const item = styled.css`
+  margin: 0 ${theme.spacing.calc(2.5)};
+  color: ${theme.color.text.description};
+  font-size: ${theme.fontSize.calc(0.9)};
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow-x: hidden;
+
   a {
     display: inline;
-    text-align: start;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow-x: hidden;
     font-size: ${theme.fontSize.calc(0.9)};
-    margin: 0 ${theme.spacing.calc(2.5)};
     color: ${theme.color.text.description};
-    border: none;
-    transition: color 0.3s, color 0.3s, background-color 0.3s;
-
-    &.active,
-    &:hover,
-    &:focus,
-    &:active {
-      color: ${theme.color.text.primary};
-    }
   }
 `;