From d0445d3ead6189f92756a7cff249be4fe84a3e40 Mon Sep 17 00:00:00 2001
From: Defectink <i@defect.ink>
Date: Wed, 6 Apr 2022 10:26:32 +0800
Subject: [PATCH] Add text gradient in home page

---
 components/Footer.tsx         |  2 +-
 layouts/MDXLayout.tsx         |  8 +++++---
 pages/index.tsx               |  3 ++-
 pages/p/first-post.mdx        | 27 ---------------------------
 pages/p/hello-world.mdx       | 27 +++++++++++++++++++++++++++
 styles/index/index.module.css | 25 +++++++++++++++++++++++++
 6 files changed, 60 insertions(+), 32 deletions(-)
 delete mode 100644 pages/p/first-post.mdx
 create mode 100644 pages/p/hello-world.mdx
 create mode 100644 styles/index/index.module.css

diff --git a/components/Footer.tsx b/components/Footer.tsx
index 817b44b..0a7271d 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -10,7 +10,7 @@ const Footer: FC = () => {
         <div className="h-[2px] bg-slate-500"></div>
 
         <div className="flex items-center justify-between py-4">
-          <div>&copy; 2022-{nowDay} Powered by Next.js 💙 xfy</div>
+          <div>&copy; {nowDay} Powered by Next.js 💙 xfy</div>
           <div>
             <a
               href="https://github.com/DefectingCat"
diff --git a/layouts/MDXLayout.tsx b/layouts/MDXLayout.tsx
index 6eee5b2..12b4a29 100644
--- a/layouts/MDXLayout.tsx
+++ b/layouts/MDXLayout.tsx
@@ -8,9 +8,11 @@ import PostTOC from 'components/post/PostTOC';
 const Footer = dynamic(() => import('components/Footer'));
 const HeadBar = dynamic(() => import('components/NavBar'));
 
-interface Props extends MyMatters {}
+interface Props extends MyMatters {
+  showTOC?: boolean;
+}
 
-const MainLayout: FC<Props> = ({ title, date, children }) => {
+const MainLayout: FC<Props> = ({ title, date, showTOC = true, children }) => {
   const contentString = renderToString(children as any);
   const headings = getHeadings(contentString);
 
@@ -24,7 +26,7 @@ const MainLayout: FC<Props> = ({ title, date, children }) => {
 
           <time>{date}</time>
 
-          <PostTOC headings={headings} />
+          {showTOC && <PostTOC headings={headings} />}
 
           {children}
         </article>
diff --git a/pages/index.tsx b/pages/index.tsx
index 38bf753..ce8fcca 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -3,6 +3,7 @@ import MainLayout from 'layouts/MainLayout';
 import Head from 'next/head';
 import { useState } from 'react';
 import type { NextPageWithLayout } from 'types';
+import style from 'styles/index/index.module.css';
 
 const Home: NextPageWithLayout = () => {
   const [showLang, setShowLang] = useState(false);
@@ -22,7 +23,7 @@ const Home: NextPageWithLayout = () => {
               onMouseOver={() => setShowLang(true)}
               onMouseLeave={() => setShowLang(false)}
             >
-              <span className="text-sky-500 dark:text-sky-600 font-Aleo">
+              <span className={cn('font-Aleo font-semibold', style.gradient)}>
                 I make websites{' '}
               </span>
               <span className="text-xs text-gray-500 dark:text-gray-400">
diff --git a/pages/p/first-post.mdx b/pages/p/first-post.mdx
deleted file mode 100644
index 9facfa5..0000000
--- a/pages/p/first-post.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: First post test
-date: '2022-03-22'
-tags: ['functions', 'JavaScript']
----
-
-import Layout from 'layouts/MDXLayout.tsx';
-
-export const meta = {
-  title: 'First post test',
-  date: '2022-03-22',
-  tags: ['functions', 'JavaScript'],
-};
-
-export default ({ children }) => <Layout {...meta}>{children}</Layout>;
-
-## Hello
-
-This is my first post.
-
-```tsx
-console.log('Hello world.');
-```
-
-### h3
-
-this is h3 test
diff --git a/pages/p/hello-world.mdx b/pages/p/hello-world.mdx
new file mode 100644
index 0000000..004447d
--- /dev/null
+++ b/pages/p/hello-world.mdx
@@ -0,0 +1,27 @@
+---
+title: Hello world
+date: '2022-04-06'
+tags: ['hello world']
+---
+
+import Layout from 'layouts/MDXLayout.tsx';
+
+export const meta = {
+  title: 'Hello world',
+  date: '2022-04-06',
+  tags: ['hello world'],
+};
+
+export default ({ children }) => (
+  <Layout {...meta} showTOC={false}>
+    {children}
+  </Layout>
+);
+
+## Hello
+
+This is my first post!
+
+```ts
+console.log('Hello world');
+```
diff --git a/styles/index/index.module.css b/styles/index/index.module.css
new file mode 100644
index 0000000..0c320ef
--- /dev/null
+++ b/styles/index/index.module.css
@@ -0,0 +1,25 @@
+.gradient {
+  background: rgb(238, 174, 200);
+  background: linear-gradient(
+    45deg,
+    rgba(238, 174, 200, 1) 0%,
+    rgba(148, 187, 233, 1) 100%
+  );
+  background-size: 400%;
+  animation: gradient 5s ease infinite;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}