chore(sync): Sync blog source code to next-theme-coline

src/app/(home)/page.tsx

@@ -12,14 +12,14 @@ interface Props {
 
 const query = React.cache(async (_index?: string): Promise<TemplateArticlesProps | undefined> => {
   try {
-    const home = await fetcher.home();
+    const [home, query] = await Promise.all([fetcher.home(), fetcher.posts()]);
     if (home.display === "document" && !_index) {
       return {
         display: "document",
         document: home.content,
+        articles: query.items.slice(0, 3),
       };
     } else {
-      const query = await fetcher.posts();
       const index = _index ? Number.parseInt(_index) : 1;
       const value = query.pages;
       if (!value || value.pages < index) {

src/components/docs/link/index.tsx

@@ -12,13 +12,13 @@ export const Link: React.FC<LinkProps> = (props) => {
   const pair = props.href.split("$$");
   if (pair.length <= 1) {
     return (
-      <ULink href={props.href} target="_blank" rel="nofollow noopener">
+      <ULink href={props.href}>
         {props.children}
       </ULink>
     );
   } else {
     return (
-      <ULink href={pair[1]} target="_blank" rel="nofollow noopener" className={styles.link}>
+      <ULink href={pair[1]} className={styles.link}>
         <Iconify icon={pair[0]} />
         {props.children}
       </ULink>

src/components/layouts/article-info/index.tsx

@@ -9,13 +9,13 @@ import { t } from "../../../locales";
 import * as styles from "./styles.css";
 
 export interface ArticleInfoProps {
-  step: number;
+  animation?: number;
   data: ArticleList;
 }
 
-export const ArticleInfo: React.FC<ArticleInfoProps> = ({ step, data }) => {
+export const ArticleInfo: React.FC<ArticleInfoProps> = ({ animation, data }) => {
   return (
-    <article className={cx("slide-enter", styles.article)} style={{ "--enter-step": step } as any}>
+    <article className={cx(typeof animation === "number" && "slide-enter", styles.article)} style={{ "--enter-step": animation } as any}>
       <section className={styles.section}>
         <Link href={data.link} aria-label={data.title} className={styles.title}>
           {data.title}

src/components/root/spotlight/index.tsx

@@ -64,7 +64,7 @@ export const Spotlight: React.FC<SpotlightProps> = (props) => {
           <div className={styles.section}>
             {query.isLoading && <Loading />}
             {query.data?.items.map((item, index) => (
-              <ArticleInfo key={`search-${item.link}`} data={item} step={index} />
+              <ArticleInfo key={`search-${item.link}`} data={item} animation={index} />
             ))}
             {query.data && (
               <Pagination index={page} pages={Math.ceil(query.data.total / 10)} onPage={page => setPage(page)} />

src/components/templates/articles/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { Metadata } from "next";
 import { Header } from "../../layouts/header";
 import { Main } from "../../layouts/main";
@@ -11,11 +11,25 @@ import { ArticleInfo } from "../../layouts/article-info";
 import { Pagination } from "../../ui/pagination";
 import { Renderer } from "../../docs";
 import { t } from "../../../locales";
+import * as styles from "./styles.css";
+
+export interface HeadingProps {
+  children?: ReactNode;
+}
+
+export const Heading: React.FC<HeadingProps> = (props) => {
+  return (
+    <h2 className={styles.heading}>
+      {props.children}
+    </h2>
+  );
+};
 
 export type TemplateArticlesProps =
   | {
     display: "document";
     document?: DocumentData;
+    articles: ReadonlyArray<ArticleList>;
   }
   | {
     display: "articles";
@@ -48,17 +62,18 @@ export const TemplateArticles: React.FC<TemplateArticlesProps> = (props) => {
       <Main>
         <Hero />
         {props.display === "document" && (
-          <>
-            <section>
-              <Renderer document={props.document?.document} />
-            </section>
-          </>
+          <section>
+            <Renderer document={props.document?.document} position="top">
+              <Heading>{t("articles.heading")}</Heading>
+              {props.articles.map(item => <ArticleInfo key={`article-${item.link}`} data={item} />)}
+            </Renderer>
+          </section>
         )}
         {props.display === "articles" && (
           <>
             <section>
               {props.articles.items.map((item, index) => (
-                <ArticleInfo key={`article-${item.link}`} data={item} step={index} />
+                <ArticleInfo key={`article-${item.link}`} data={item} animation={index} />
               ))}
             </section>
             <Pagination links="/" index={props.articles.index} pages={props.articles.pages} />

src/components/templates/articles/styles.css.ts

@@ -0,0 +1,28 @@
+import { styled } from "@syfxlin/reve";
+import { theme } from "../../../theme/theme.css";
+
+export const heading = styled.css`
+  position: relative;
+  color: ${theme.color.text.title};
+  font-size: ${theme.fontSize.calc(1.3)};
+  font-weight: ${theme.fontWeight.default};
+  border-bottom: ${theme.borderWidth.default} ${theme.borderStyle.dashed} ${theme.color.background.focus};
+  margin-top: ${theme.spacing.calc(5)};
+  margin-bottom: ${theme.spacing.calc(3)};
+  padding-bottom: ${theme.spacing.calc(1)};
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: ${theme.borderWidth.calc(-1)};
+    display: block;
+    height: ${theme.borderWidth.calc(2.5)};
+    width: ${theme.fontSize.calc(2)};
+    background: linear-gradient(${theme.color.text.primary} 30%, ${theme.color.text.primary} 70%);
+    box-shadow: ${theme.color.text.primary} 0 ${theme.borderWidth.calc(1)} ${theme.borderWidth.calc(3)};
+    border-radius: ${theme.borderWidth.calc(4)};
+    transition: all 0.25s ease 0s;
+    z-index: 1;
+  }
+`;

src/components/templates/group/index.tsx

@@ -49,7 +49,7 @@ export const TemplateGroup: React.FC<TemplateGroupComponentProps> = (props) => {
         </Title>
         <section>
           {props.items.map((item, index) => (
-            <ArticleInfo key={`${props.type}-${item.link}`} data={item} step={index} />
+            <ArticleInfo key={`${props.type}-${item.link}`} data={item} animation={index} />
           ))}
         </section>
         <Pagination links={props.link} index={props.index} pages={props.pages} />

src/components/templates/template/index.tsx

@@ -4,7 +4,7 @@ import { Header } from "../../layouts/header";
 import { Main } from "../../layouts/main";
 import { Title } from "../../layouts/title";
 import { Toc } from "../../widgets/toc";
-import { CursorPagination } from "../../ui/pagination";
+import { TwoPagination } from "../../ui/pagination";
 import { Artalk } from "../../widgets/artalk";
 import { Footer } from "../../layouts/footer";
 
@@ -39,7 +39,7 @@ export const Template: React.FC<TemplateProps> = async (props) => {
         {props.after}
         {props.headings && <Toc data={props.headings} />}
         {(props.pagination?.prev || props.pagination?.next) && (
-          <CursorPagination prev={props.pagination.prev} next={props.pagination.next} />
+          <TwoPagination prev={props.pagination.prev} next={props.pagination.next} />
         )}
         {props.artalk && <Artalk name={props.name} link={props.link} />}
       </Main>

src/components/ui/link/index.tsx

@@ -12,7 +12,7 @@ export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & NLinkProps & {
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(({ tooltip, unstyled, href, ...props }, ref) => {
   if (typeof href === "string" && /^(https?:)?\/\/|^#|\.[\da-z]+$/i.test(href)) {
-    const element = <a {...props} className={cx(props.className, !unstyled && styles.link)} href={href} ref={ref} />;
+    const element = <a target="_blank" rel="nofollow noopener noreferrer" {...props} className={cx(props.className, !unstyled && styles.link)} href={href} ref={ref} />;
     return tooltip ?
         (
           <Tippy animation="shift-away" content={props["aria-label"]} {...(typeof tooltip === "boolean" ? {} : tooltip)}>

src/components/ui/pagination/index.tsx

@@ -78,7 +78,7 @@ export const Pagination: React.FC<PaginationProps> = ({ index, pages, links, onL
   );
 };
 
-export interface CursorPaginationProps {
+export interface TwoPaginationProps {
   prev?: {
     name: string;
     link: string;
@@ -89,12 +89,12 @@ export interface CursorPaginationProps {
   };
 }
 
-export const CursorPagination: React.FC<CursorPaginationProps> = (props) => {
+export const TwoPagination: React.FC<TwoPaginationProps> = (props) => {
   return (
-    <section className={styles.cursor_container}>
+    <section className={styles.two_container}>
       {props.prev && (
         <LinkButton
-          className={styles.cursor_link}
+          className={styles.two_link}
           style={{ justifyContent: "flex-start" }}
           aria-label={t("pagination.prev")}
           href={props.prev.link}
@@ -104,7 +104,7 @@ export const CursorPagination: React.FC<CursorPaginationProps> = (props) => {
       )}
       {props.next && (
         <LinkButton
-          className={styles.cursor_link}
+          className={styles.two_link}
           style={{ justifyContent: "flex-end" }}
           aria-label={t("pagination.next")}
           href={props.next.link}

src/components/ui/pagination/styles.css.ts

@@ -24,14 +24,14 @@ export const more = styled.css`
   padding-right: ${theme.spacing.calc(1)};
 `;
 
-export const cursor_container = styled.css`
+export const two_container = styled.css`
   display: flex;
   margin: ${theme.spacing.calc(4)} 0;
   padding: 0;
   gap: ${theme.spacing.calc(2)};
 `;
 
-export const cursor_link = styled.css`
+export const two_link = styled.css`
   gap: ${theme.spacing.calc(1)} !important;
   padding: ${theme.spacing.calc(4)} !important;
   font-size: ${theme.fontSize.calc(1.2)} !important;

src/components/widgets/projects/index.tsx

@@ -1,15 +1,26 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { ProjectsData } from "../../../contents/types";
 import { Grid } from "../../layouts/grid";
 import { LinkButton } from "../../ui/button";
 import { Iconify } from "../../ui/iconify";
 import { GithubAdapter } from "../../../adapters/github-adapter";
-import { Heading } from "../heading";
 import { stars } from "../../../utils/vender";
 import * as styles from "./styles.css";
 
 const adapter = new GithubAdapter();
 
+export interface HeadingProps {
+  children?: ReactNode;
+}
+
+export const Heading: React.FC<HeadingProps> = (props) => {
+  return (
+    <h2 className={styles.heading}>
+      {props.children}
+    </h2>
+  );
+};
+
 export interface IconsProps {
   link: string;
 }

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

@@ -1,6 +1,15 @@
 import { styled } from "@syfxlin/reve";
 import { theme } from "../../../theme/theme.css";
 
+export const heading = styled.css`
+  text-align: center;
+  color: ${theme.color.text.paragraph};
+  font-size: ${theme.fontSize.calc(1.2)};
+  font-weight: ${theme.fontWeight.semibold};
+  margin-top: ${theme.spacing.calc(10)};
+  margin-bottom: ${theme.spacing.calc(3)};
+`;
+
 export const link = styled.css`
   display: flex !important;
   text-align: start !important;

src/locales/en.ts

@@ -19,6 +19,7 @@ export default {
   "page.desc": "Page：{0}",
   "articles.name": "Article",
   "articles.desc": "Article：{0}",
+  "articles.heading": "Recent Articles",
 
   "links.name": "Friends",
   "links.desc": "{0} Friends × {1} Lost Friends",

src/locales/zh-hans.ts

@@ -19,6 +19,7 @@ export default {
   "page.desc": "页面：{0}",
   "articles.name": "文章",
   "articles.desc": "文章：{0}",
+  "articles.heading": "最近创作",
 
   "links.name": "友邻",
   "links.desc": "{0} 友邻 × {1} 已失联友邻",

src/locales/zh-hant.ts

@@ -19,6 +19,7 @@ export default {
   "page.desc": "頁面：{0}",
   "articles.name": "文章",
   "articles.desc": "文章：{0}",
+  "articles.heading": "最近創作",
 
   "links.name": "友鄰",
   "links.desc": "{0} 友鄰 × {1} 已失聯友鄰",