Add text gradient in home page

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"

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>

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">

pages/p/first-post.mdx

@@ -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

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');
+```

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%;
+  }
+}