feat!: add category tree

.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 
 # local env files
 .env.local
+.env.clarence.local
 .env.development.local
 .env.test.local
 .env.production.local

src/components/Favicon.tsx

@@ -9,14 +9,11 @@ type FaviconProps = {
 } & Omit<NextImageProps, 'src' | 'alt' | 'width' | 'height'>;
 
 export default function Favicon({ className, fullUrl, ...rest }: FaviconProps) {
- const FAVICON_URL = 'https://icons.duckduckgo.com/ip3/';
- const { hostname } = new URL(fullUrl);
-
- const src = FAVICON_URL + hostname + '.ico';
+ const { url, hostname } = getFaviconUrl(fullUrl);
 
  return (
  <NextImage
- src={src}
+ src={url}
  alt={`${hostname} favicon`}
  width='20'
  height='20'
@@ -25,3 +22,10 @@ export default function Favicon({ className, fullUrl, ...rest }: FaviconProps) {
  />
  );
 }
+
+export const getFaviconUrl = (url: string) => {
+ const FAVICON_URL = 'https://icons.duckduckgo.com/ip3/';
+ const { hostname } = new URL(url);
+
+ return { url: FAVICON_URL + hostname + '.ico', hostname };
+};

src/components/links/TreeLink.tsx

@@ -6,7 +6,7 @@ import clsxm from '@/lib/clsxm';
 import { Tree } from '@/lib/notion';
 
 type TreeLinkProps = {
- link: Tree;
+ link: Pick<Tree, 'display' | 'link' | 'icon'>;
 } & React.ComponentPropsWithoutRef<'div'>;
 
 export default function TreeLink({

src/lib/notion.ts

@@ -44,6 +44,51 @@ export const getUrlBySlug = async (slug: string) => {
  return url;
 };
 
+export const getAllLinkCategories = async () => {
+ if (!NOTION_LINK_DATABASE_ID) {
+ throw new Error('NEXT_PUBLIC_NOTION_LINK_DATABASE_ID env is not defined');
+ }
+
+ const response = await notion.databases.retrieve({
+ database_id: NOTION_LINK_DATABASE_ID,
+ });
+
+ const results = response as unknown as LinkResult;
+
+ const categories = results.properties.categories.multi_select.options.map(
+ (option) => option.name
+ );
+
+ return categories;
+};
+
+/**
+ * Get URLs Category
+ */
+export const getCategoryUrls = async (category: string) => {
+ if (!NOTION_LINK_DATABASE_ID) {
+ throw new Error('NEXT_PUBLIC_NOTION_LINK_DATABASE_ID env is not defined');
+ }
+
+ const response = await notion.databases.query({
+ database_id: NOTION_LINK_DATABASE_ID,
+ filter: {
+ property: 'categories',
+ multi_select: { contains: category },
+ },
+ });
+
+ const results = response.results as unknown as LinkResult[];
+
+ const url: Omit<Url, 'count'>[] = results.map((result) => ({
+ pageId: result?.id,
+ slug: result?.properties.slug.title[0]?.plain_text,
+ link: result?.properties.link.rich_text[0]?.plain_text,
+ }));
+
+ return url;
+};
+
 /**
  * Increment count column by 1
  */

src/pages/_middleware.ts

@@ -4,7 +4,16 @@ import { getUrlBySlug } from '@/lib/notion';
 
 export default async function middleware(req: NextRequest) {
  const path = req.nextUrl.pathname.split('/')[1];
- const whitelist = ['favicons', 'fonts', 'images', 'svg', '', 'login', 'new'];
+ const whitelist = [
+ 'favicons',
+ 'fonts',
+ 'images',
+ 'svg',
+ '',
+ 'login',
+ 'new',
+ 'c',
+ ];
  if (whitelist.includes(path)) {
  return;
  }

src/pages/c/[category].tsx

@@ -0,0 +1,75 @@
+import {
+ GetStaticPaths,
+ GetStaticPropsContext,
+ InferGetStaticPropsType,
+} from 'next';
+import * as React from 'react';
+
+import { getAllLinkCategories, getCategoryUrls } from '@/lib/notion';
+
+import Accent from '@/components/Accent';
+import { getFaviconUrl } from '@/components/Favicon';
+import Layout from '@/components/layout/Layout';
+import PrimaryLink from '@/components/links/PrimaryLink';
+import TreeLink from '@/components/links/TreeLink';
+import Seo from '@/components/Seo';
+
+export default function CPage({
+ links,
+ category,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+ return (
+ <Layout>
+ <Seo templateTitle={category} />
+
+ <main>
+ <section className=''>
+ <div className='layout flex min-h-screen flex-col items-center justify-center py-20'>
+ <h1 className='text-center text-5xl md:text-7xl'>
+ <Accent>{category}</Accent>
+ </h1>
+ <div className='mx-auto mt-8 grid w-full max-w-sm gap-4 text-center'>
+ {links.map((link) => (
+ <TreeLink
+ key={link.pageId}
+ link={{
+ display: link.slug,
+ link: link.link!,
+ icon: {
+ type: 'external',
+ external: { url: getFaviconUrl(link.link!).url },
+ },
+ }}
+ />
+ ))}
+ </div>
+ {/* Thank you for not removing this as an attribution 🙏 */}
+ <p className='mt-10 dark:text-gray-300'>
+ Built using{' '}
+ <PrimaryLink href='https://github.com/theodorusclarence/notiolink'>
+ <Accent>Notiolink</Accent>
+ </PrimaryLink>
+ </p>
+ </div>
+ </section>
+ </main>
+ </Layout>
+ );
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+ const categories = await getAllLinkCategories();
+
+ return {
+ paths: categories.map((category) => ({ params: { category } })),
+ fallback: false,
+ };
+};
+
+export const getStaticProps = async (context: GetStaticPropsContext) => {
+ const category = context.params?.category as string;
+ return {
+ props: { links: await getCategoryUrls(category), category },
+ revalidate: 5,
+ };
+};

src/types/notion.ts

@@ -8,6 +8,7 @@ interface LinkProperties {
  count: TextColumn;
  link: TextColumn;
  slug: TitleColumn;
+ categories: MultiSelectColumn;
 }
 //#endregion //*======== Links ===========
 
@@ -60,6 +61,13 @@ interface NumberColumn {
  number: number;
 }
 
+interface MultiSelectColumn {
+ id: string;
+ multi_select: {
+ options: Array<{ name: string }>;
+ };
+}
+
 interface RichText {
  type: string;
  plain_text: string;