feat: add tree on index

src/components/Accent.tsx

@@ -9,7 +9,6 @@ export default function Accent({ children, className }: AccentType) {
     <span
       className={clsxm(
         'transition-colors',
-        // 'from-primary-300/40 to-primary-400/40 via-primary-300/40',
         'text-transparent bg-clip-text bg-gradient-to-tr from-emerald-400 to-amber-400',
         className
       )}

src/lib/notion.ts

@@ -1,8 +1,9 @@
 import { Client } from '@notionhq/client';
 
-import { LinkResult } from '@/types/notion';
+import { LinkResult, TreeResult } from '@/types/notion';
 
 const NOTION_LINK_DATABASE_ID = process.env.NEXT_PUBLIC_NOTION_LINK_DATABASE_ID;
+const NOTION_TREE_DATABASE_ID = process.env.NEXT_PUBLIC_NOTION_TREE_DATABASE_ID;
 const NOTION_INTEGRATION_SECRET =
   process.env.NEXT_PUBLIC_NOTION_INTEGRATION_SECRET;
 
@@ -126,3 +127,33 @@ export const addLink = async (slug: string, link: string) => {
     },
   });
 };
+
+export type Tree = {
+  id: string;
+  link: string;
+  display: string;
+  order: number;
+};
+
+export const getSocialTree = async () => {
+  if (!NOTION_TREE_DATABASE_ID) {
+    throw new Error('NEXT_PUBLIC_NOTION_TREE_DATABASE_ID env is not defined');
+  }
+
+  const response = await notion.databases.query({
+    database_id: NOTION_TREE_DATABASE_ID,
+  });
+
+  const results = response.results as unknown as TreeResult[];
+
+  const tree: Tree[] = results
+    .map((result) => ({
+      id: result.id,
+      link: result.properties.link.title[0]?.plain_text,
+      display: result.properties.display.rich_text[0]?.plain_text ?? '',
+      order: result.properties.order.number,
+    }))
+    .sort((a, b) => a.order - b.order);
+
+  return tree;
+};

src/pages/index.tsx

@@ -1,23 +1,66 @@
+import clsx from 'clsx';
+import { InferGetStaticPropsType } from 'next';
 import * as React from 'react';
 
+import { getSocialTree } from '@/lib/notion';
+
 import Accent from '@/components/Accent';
 import Layout from '@/components/layout/Layout';
+import UnstyledLink from '@/components/links/UnstyledLink';
 import Seo from '@/components/Seo';
 
-export default function IndexPage() {
+export default function IndexPage({
+  links,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <Layout>
       <Seo />
 
       <main>
         <section className='bg-dark'>
-          <div className='layout flex justify-center items-center py-20 min-h-screen'>
+          <div className='layout flex flex-col justify-center items-center py-20 min-h-screen'>
             <h1 className='text-5xl md:text-7xl'>
               <Accent>Notiolink</Accent>
             </h1>
+            <div className='grid gap-4 mx-auto mt-8 w-full max-w-sm text-center'>
+              {links.map(({ id, display, link }) => (
+                <div className='group relative' key={id}>
+                  <div
+                    className={clsx(
+                      'opacity-0 group-hover:opacity-100',
+                      'animate-tilt absolute -inset-0.5 z-0 rounded blur',
+                      'bg-gradient-to-r from-emerald-400 to-amber-400',
+                      'transition duration-300 group-hover:duration-200'
+                    )}
+                  />
+
+                  <UnstyledLink
+                    openNewTab={false}
+                    key={id}
+                    href={link}
+                    className={clsx(
+                      'block relative',
+                      'px-4 py-4 font-medium transition-colors md:text-lg ',
+                      'bg-dark',
+                      'border border-gray-600',
+                      'focus:outline-none focus-visible:ring focus-visible:ring-primary-500'
+                    )}
+                  >
+                    {display}
+                  </UnstyledLink>
+                </div>
+              ))}
+            </div>
           </div>
         </section>
       </main>
     </Layout>
   );
 }
+
+export const getStaticProps = async () => {
+  return {
+    props: { links: await getSocialTree() },
+    revalidate: 5,
+  };
+};

src/types/notion.ts

@@ -1,3 +1,4 @@
+//#region  //*=========== Links ===========
 export interface LinkResult {
   id: string;
   properties: LinkProperties;
@@ -8,20 +9,42 @@ interface LinkProperties {
   link: TextColumn;
   slug: TitleColumn;
 }
+//#endregion  //*======== Links ===========
 
+//#region  //*=========== Social Tree ===========
+export interface TreeResult {
+  id: string;
+  properties: TreeProperties;
+}
+
+interface TreeProperties {
+  link: TitleColumn;
+  display: TextColumn;
+  order: NumberColumn;
+}
+//#endregion  //*======== Social Tree ===========
+
+//#region  //*=========== Commons ===========
 interface TitleColumn {
   id: string;
-  type: string;
+  type: 'title';
   title: [RichText];
 }
 
 interface TextColumn {
   id: string;
-  type: string;
+  type: 'rich_text';
   rich_text: [RichText | undefined];
 }
 
+interface NumberColumn {
+  id: string;
+  type: 'number';
+  number: number;
+}
+
 interface RichText {
   type: string;
   plain_text: string;
 }
+//#endregion  //*======== Commons ===========

tailwind.config.js

@@ -46,9 +46,21 @@ module.exports = {
             filter: 'none',
           },
         },
+        tilt: {
+          '0%, 50%, 100%': {
+            transform: 'rotate(0deg)',
+          },
+          '25%': {
+            transform: 'rotate(0.7deg)',
+          },
+          '75%': {
+            transform: 'rotate(-0.7deg)',
+          },
+        },
       },
       animation: {
         flicker: 'flicker 3s linear infinite',
+        tilt: 'tilt 10s infinite linear',
       },
     },
   },