Merge pull request #333 from xdlrt/develop

Develop

src/components/Breadcrumbs.astro

@@ -62,7 +62,7 @@ breadcrumbList[0] === "文章" && breadcrumbList.splice(0, 2, `文章`);
     @apply inline;
   }
   .breadcrumb ul li a {
-    @apply capitalize opacity-70;
+    @apply capitalize opacity-70 transition-all;
   }
   .breadcrumb ul li span {
     @apply opacity-70;

src/components/Footer.astro

@@ -30,12 +30,6 @@ const { noMarginTop = false } = Astro.props;
   .footer-wrapper {
     @apply flex flex-col items-center justify-between py-6 sm:flex-row-reverse sm:py-4;
   }
-  .link-button {
-    @apply my-1 p-2 hover:rotate-6;
-  }
-  .link-button svg {
-    @apply scale-125;
-  }
   .copyright-wrapper {
     @apply my-2 flex flex-col items-center whitespace-nowrap sm:flex-row;
   }

src/components/Header.astro

@@ -11,10 +11,13 @@ const { activeNav } = Astro.props;
 ---
 
 <header>
-  <a id="skip-to-content" href="#main-content">Skip to content</a>
   <div class="nav-container">
     <div class="top-nav-wrap">
       <a href="/" class="logo">
+        <img
+          src="/images/apple-touch-icon.png"
+          class="w-6 h-6 sm:w-8 sm:h-8 rounded-full mr-2"
+        />
         {SITE.title}
       </a>
       <nav id="nav-menu">
@@ -93,17 +96,14 @@ const { activeNav } = Astro.props;
 </header>
 
 <style>
-  #skip-to-content {
-    @apply absolute -top-full left-16 z-50 bg-skin-accent py-2 px-3 text-skin-inverted transition-all focus:top-4;
-  }
   .nav-container {
     @apply mx-auto flex max-w-3xl flex-col items-center justify-between sm:flex-row;
   }
   .top-nav-wrap {
     @apply relative flex w-full items-start justify-between p-4 sm:items-center sm:py-8;
   }
   .logo {
-    @apply absolute py-1 text-xl font-semibold sm:text-2xl;
+    @apply absolute py-1 text-xl font-semibold sm:text-2xl flex items-center justify-center;
   }
   .hamburger-menu {
     @apply self-end p-2 sm:hidden;
@@ -113,7 +113,7 @@ const { activeNav } = Astro.props;
   }
 
   nav {
-    @apply flex w-full flex-col items-center bg-skin-fill sm:ml-2 sm:flex-row sm:justify-end sm:space-x-4 sm:py-0;
+    @apply flex w-full flex-col items-center sm:ml-2 sm:flex-row sm:justify-end sm:space-x-4 sm:py-0;
   }
   nav ul {
     @apply mt-4 w-44 grid-cols-2 grid-rows-4 gap-y-2 gap-x-2 sm:mt-0 sm:ml-0 sm:w-auto sm:gap-y-0 sm:gap-x-5;
@@ -122,7 +122,7 @@ const { activeNav } = Astro.props;
     @apply col-span-2 flex items-center justify-center;
   }
   nav ul li a {
-    @apply w-full px-4 py-3 text-center font-medium hover:text-skin-accent sm:my-0 sm:px-2 sm:py-1;
+    @apply w-full px-4 py-3 text-center font-medium hover:text-skin-accent sm:my-0 sm:px-2 sm:py-1 transition-all;
   }
   nav ul li:nth-child(4) a {
     @apply w-auto;
@@ -142,13 +142,13 @@ const { activeNav } = Astro.props;
     @apply p-1;
   }
   nav button svg {
-    @apply h-6 w-6 fill-skin-base hover:fill-skin-accent;
+    @apply h-6 w-6 fill-skin-base hover:fill-skin-accent transition-all;
   }
   #theme-btn {
     @apply p-3 sm:p-1;
   }
   #theme-btn svg {
-    @apply scale-125 hover:rotate-12 sm:scale-100;
+    @apply scale-125 hover:rotate-12 sm:scale-100 transition-all;
   }
 
   .icon-container {

src/components/LinkButton.astro

@@ -24,6 +24,6 @@ const { href, className, ariaLabel, title, disabled = false } = Astro.props;
 
 <style>
   a {
-    @apply hover:text-skin-accent;
+    @apply hover:text-skin-accent transition-all;
   }
 </style>

src/components/Search.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import Fuse from "fuse.js";
 import { useEffect, useRef, useState } from "react";
 import Card from "@components/Card";
-import slugify from "@utils/slugify";
+import { slugify } from "@utils/slugify";
 import type { BlogFrontmatter } from "@content/_schemas";
 
 export type SearchItem = {

src/components/Socials.astro

@@ -13,11 +13,7 @@ const { centered = false } = Astro.props;
 <div class={`social-icons ${centered ? "flex" : ""}`}>
   {
     SOCIALS.filter(social => social.active).map(social => (
-      <LinkButton
-        href={social.href}
-        className="link-button"
-        title={social.linkTitle}
-      >
+      <LinkButton href={social.href} title={social.linkTitle}>
         <Fragment set:html={socialIcons[social.name]} />
       </LinkButton>
     ))
@@ -28,7 +24,4 @@ const { centered = false } = Astro.props;
   .social-icons {
     @apply flex flex-wrap justify-start gap-2;
   }
-  .link-button {
-    @apply p-2 hover:rotate-6 sm:p-1;
-  }
 </style>

src/content/blog/annual-summary-2022.md

@@ -2,7 +2,6 @@
 title: 小树的 2022 年终总结
 postSlug: da712197
 pubDatetime: 2022-12-31T23:00:31.000Z
-featured: true
 tags:
   - 年终总结
 description: 2022 过去了，我还是很怀念它。

src/layouts/PostDetails.astro

@@ -24,7 +24,7 @@ const ogUrl = new URL(ogImage ? ogImage : `${title}.svg`, Astro.url.origin)
   <Header />
   <div class="mx-auto flex w-full max-w-3xl justify-start px-2">
     <button
-      class="focus-outline mt-8 mb-2 flex hover:opacity-75"
+      class="focus-outline mt-8 mb-2 flex hover:opacity-75 transition-all"
       onclick="history.back()"
     >
       <svg xmlns="http://www.w3.org/2000/svg"

src/layouts/Posts.astro

@@ -6,7 +6,7 @@ import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import Card from "@components/Card";
 import LinkButton from "@components/LinkButton.astro";
-import slugify from "@utils/slugify";
+import { slugify } from "@utils/slugify";
 import type { PostCollectionEntry } from "@types";
 
 export interface Props {

src/pages/index.astro

@@ -6,8 +6,8 @@ import LinkButton from "@components/LinkButton.astro";
 import Hr from "@components/Hr.astro";
 import Card from "@components/Card";
 import Socials from "@components/Socials.astro";
-import getSortedPosts from "@utils/getSortedPosts";
-import slugify from "@utils/slugify";
+import { getSortedPosts } from "@utils/getSortedPosts";
+import { slugify } from "@utils/slugify";
 import { SOCIALS } from "@config";
 import { getPublishPosts } from "@utils/getPosts";
 
@@ -29,7 +29,7 @@ const socialCount = SOCIALS.filter(social => social.active).length;
       <p>
         可以查看
         <LinkButton
-          className="hover:text-skin-accent underline underline-offset-4 decoration-dashed"
+          className="hover:text-skin-accent underline underline-offset-4 decoration-dashed transition-all"
           href="/about"
         >
           关于我

src/pages/posts/[slug].astro

@@ -1,9 +1,9 @@
 ---
 import Posts from "@layouts/Posts.astro";
 import PostDetails from "@layouts/PostDetails.astro";
-import getSortedPosts from "@utils/getSortedPosts";
-import getPageNumbers from "@utils/getPageNumbers";
-import slugify from "@utils/slugify";
+import { getSortedPosts } from "@utils/getSortedPosts";
+import { getPageNumbers } from "@utils/getPageNumbers";
+import { slugify } from "@utils/slugify";
 import { SITE } from "@config";
 import { getPublishPosts } from "@utils/getPosts";
 import type { PostCollectionEntry } from "@types";

src/pages/posts/index.astro

@@ -1,8 +1,8 @@
 ---
 import { SITE } from "@config";
 import Posts from "@layouts/Posts.astro";
-import getSortedPosts from "@utils/getSortedPosts";
-import getPageNumbers from "@utils/getPageNumbers";
+import { getSortedPosts } from "@utils/getSortedPosts";
+import { getPageNumbers } from "@utils/getPageNumbers";
 import { getPublishPosts } from "@utils/getPosts";
 
 const posts = await getPublishPosts();

src/pages/rss.xml.ts

@@ -1,8 +1,8 @@
 import rss from "@astrojs/rss";
 import { SITE } from "@config";
-import slugify from "@utils/slugify";
+import { slugify } from "@utils/slugify";
 import { getPublishPosts } from "@utils/getPosts";
-import getSortedPosts from "@utils/getSortedPosts";
+import { getSortedPosts } from "@utils/getSortedPosts";
 
 export async function get() {
   const posts = await getPublishPosts();

src/pages/tags/[tag].astro

@@ -4,13 +4,13 @@ import Main from "@layouts/Main.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import Card from "@components/Card";
-import getUniqueTags from "@utils/getUniqueTags";
+import { getUniqueTags } from "@utils/getUniqueTags";
 import getPostsByTag from "@utils/getPostsByTag";
-import slugify from "@utils/slugify";
+import { slugify } from "@utils/slugify";
 import { SITE } from "@config";
 import { getPublishPosts } from "@utils/getPosts";
 import type { PostCollectionEntry } from "@types";
-import getSortedPosts from "@utils/getSortedPosts";
+import { getSortedPosts } from "@utils/getSortedPosts";
 
 export interface Props {
   post: PostCollectionEntry;

src/pages/tags/index.astro

@@ -4,7 +4,7 @@ import Footer from "@components/Footer.astro";
 import Layout from "@layouts/Layout.astro";
 import Main from "@layouts/Main.astro";
 import Tag from "@components/Tag.astro";
-import getUniqueTags from "@utils/getUniqueTags";
+import { getUniqueTags } from "@utils/getUniqueTags";
 import { SITE } from "@config";
 import { getPublishPosts } from "@utils/getPosts";
 

src/styles/base.css

@@ -30,7 +30,7 @@
   }
   body {
     @apply flex min-h-screen flex-col bg-skin-fill font-mono text-skin-base 
-    selection:bg-skin-accent selection:bg-opacity-70 selection:text-skin-inverted;
+    selection:bg-skin-accent selection:bg-opacity-70 selection:text-skin-inverted transition-colors;
   }
   section,
   footer {

src/utils/generateOgImage.tsx

@@ -134,7 +134,5 @@ const options: SatoriOptions = {
   ],
 };
 
-const generateOgImage = async (mytext = SITE.title) =>
-  await satori(ogImage(mytext), options);
-
-export default generateOgImage;
+export const generateOgImage = async (text = SITE.title) =>
+  await satori(ogImage(text), options);

src/utils/getPageNumbers.ts

@@ -1,6 +1,6 @@
 import { SITE } from "@config";
 
-const getPageNumbers = (numberOfPosts: number) => {
+export const getPageNumbers = (numberOfPosts: number) => {
   const numberOfPages = numberOfPosts / Number(SITE.postPerPage);
 
   let pageNumbers: number[] = [];
@@ -10,5 +10,3 @@ const getPageNumbers = (numberOfPosts: number) => {
 
   return pageNumbers;
 };
-
-export default getPageNumbers;

src/utils/getPostsByTag.ts

@@ -1,7 +1,7 @@
-import { slufigyAll } from "./slugify";
+import { slugifyAll } from "./slugify";
 import type { PostCollectionEntry } from "@types";
 
 const getPostsByTag = (posts: PostCollectionEntry[], tag: string) =>
-  posts.filter(post => slufigyAll(post.data.tags).includes(tag));
+  posts.filter(post => slugifyAll(post.data.tags).includes(tag));
 
 export default getPostsByTag;

src/utils/getSortedPosts.ts

@@ -1,12 +1,10 @@
 import type { PostCollectionEntry } from "@types";
 
-const getSortedPosts = (posts: PostCollectionEntry[]) =>
+export const getSortedPosts = (posts: PostCollectionEntry[]) =>
   posts
     .filter(({ data }) => !data.draft)
     .sort(
       (a, b) =>
         Math.floor(new Date(b.data.pubDatetime).getTime() / 1000) -
         Math.floor(new Date(a.data.pubDatetime).getTime() / 1000)
     );
-
-export default getSortedPosts;

src/utils/getUniqueTags.ts

@@ -1,7 +1,7 @@
 import { slugifyStr } from "./slugify";
 import type { PostCollectionEntry } from "@types";
 
-const getUniqueTags = (posts: PostCollectionEntry[]) => {
+export const getUniqueTags = (posts: PostCollectionEntry[]) => {
   let tags: string[] = [];
   const filteredPosts = posts.filter(({ data }) => !data.draft);
   filteredPosts.forEach(post => {
@@ -14,5 +14,3 @@ const getUniqueTags = (posts: PostCollectionEntry[]) => {
   });
   return tags;
 };
-
-export default getUniqueTags;

src/utils/slugify.ts

@@ -3,9 +3,7 @@ import type { BlogFrontmatter } from "@content/_schemas";
 
 export const slugifyStr = (str: string) => slugger(str);
 
-const slugify = (post: BlogFrontmatter) =>
+export const slugify = (post: BlogFrontmatter) =>
   post.postSlug ? slugger(post.postSlug) : slugger(post.title);
 
-export const slufigyAll = (arr: string[]) => arr.map(str => slugifyStr(str));
-
-export default slugify;
+export const slugifyAll = (arr: string[]) => arr.map(str => slugifyStr(str));