feat(proj): add notiolink

src/contents/projects/notiolink.mdx

@@ -0,0 +1,204 @@
+---
+title: 'Notiolink'
+description: 'Self-hostable branded link shortener built with Next.js & Notion API'
+category: 'Personal Project'
+publishedAt: '2022-07-23'
+techs: 'nextjs,tailwindcss,notion'
+banner: 'projects/notiolink/notiolink_bjtkm5.png'
+github: 'https://github.com/theodorusclarence/notiolink'
+link: 'https://notiolink.thcl.dev'
+---
+
+> ## Short Explanation
+
+Notiolink is a self-hostable link shortener built with Next.js & Notion API. It's a simple and easy-to-deploy shortener that's using Notion as a CMS.
+
+Some features including:
+
+- ⚡ Unlimited branded links (use your own domain!)
+- ☝ Self-hostable with Vercel
+- 💨 Fast redirect using Next.js Middleware Functions
+- 🌑 Awesome CMS using Notion
+- ➕ See click count statistics
+- 💠 Zero config, all customizable via env
+- 💅 Numerous themes
+
+> ## Project Goals
+
+I did this project originally for my personal use. Shortening links is easier for me to remember than having to search through numerous bookmarks. I can just pick a short slug—which usually is not an option when you are using a free service—and remember it.
+
+<blockquote className='with-icons'>
+  ## Tech Stack Used
+  <div class='not-prose mt-2'>
+    <TechIcons techs={['nextjs', 'tailwindcss', 'notion']} />
+  </div>
+</blockquote>
+
+Notiolink is a full-stack application built using Next.js and Notion API. I chose notion because of the easy-to-use UI. All links are served as a table inside the notion and can be edited whenever you want.
+
+> ## Features
+
+### Notion CMS
+
+All links are customizable via notion
+
+<CloudinaryImg
+  mdx
+  publicId='theodorusclarence/projects/notiolink/notion-table_br6ebb'
+  alt='notion-table'
+  width={1339}
+  height={875}
+/>
+
+### Link Tree Page
+
+You can easily configure it on the notion database
+
+<CloudinaryImg
+  mdx
+  publicId='theodorusclarence/projects/notiolink/linktree_kbtwts'
+  alt='linktree'
+  width={605}
+  height={706}
+/>
+
+### Add New Link
+
+Route: `/new`
+
+You can add link straight from the website for easy access, don't worry **this is protected with login page** so no one will mess with your links
+
+<CloudinaryImg
+  mdx
+  publicId='theodorusclarence/projects/notiolink/shorten-new-link_tkinse'
+  alt='shorten-new-link'
+  width={632}
+  height={567}
+/>
+
+### Link Details & Count
+
+You can see the statistics with `/:slug/detail` route
+
+<CloudinaryImg
+  mdx
+  publicId='theodorusclarence/projects/notiolink/link-details-and-count_ae7x2e'
+  alt='link-details-and-count'
+  width={682}
+  height={672}
+/>
+
+### Categorized Tree
+
+Every category will be made into a standalone tree on `/c/:category` route
+
+<CloudinaryImg
+  mdx
+  publicId='theodorusclarence/projects/notiolink/categorized-tree_aeottm'
+  alt='categorized-tree'
+  width={567}
+  height={563}
+/>
+
+### Themes
+
+Themes you can choose
+
+<small>Pro tip: click the image to make it full screen</small>
+
+<SplitImage>
+  <Split>
+    <div class='not-prose space-y-2'>
+      <CloudinaryImg
+        mdx
+        publicId='theodorusclarence/projects/notiolink/theme-dark_sspfwt'
+        alt='theme-dark'
+        width={648}
+        height={622}
+      />
+      <p class='text-center text-sm font-medium'>Dark</p>
+    </div>
+    <div class='not-prose space-y-2'>
+      <CloudinaryImg
+        mdx
+        publicId='theodorusclarence/projects/notiolink/theme-street_nx7i4f'
+        alt='theme-street'
+        width={648}
+        height={622}
+      />
+      <p class='text-center text-sm font-medium'>Street</p>
+    </div>
+    <div class='not-prose space-y-2'>
+      <CloudinaryImg
+        mdx
+        publicId='theodorusclarence/projects/notiolink/theme-milky_z60zsu'
+        alt='theme-milky'
+        width={648}
+        height={622}
+      />
+      <p class='text-center text-sm font-medium'>Milky</p>
+    </div>
+  </Split>
+  <Split>
+    <div class='not-prose space-y-2'>
+      <CloudinaryImg
+        mdx
+        publicId='theodorusclarence/projects/notiolink/theme-light_pmkjnq'
+        alt='theme-light'
+        width={648}
+        height={622}
+      />
+      <p class='text-center text-sm font-medium'>Light</p>
+    </div>
+    <div class='not-prose space-y-2'>
+      <CloudinaryImg
+        mdx
+        publicId='theodorusclarence/projects/notiolink/theme-monokai_ndz8rx'
+        alt='theme-monokai'
+        width={648}
+        height={622}
+      />
+      <p class='text-center text-sm font-medium'>Monokai</p>
+    </div>
+  </Split>
+</SplitImage>
+
+> ## Spotlight
+
+### Creating An Easy To Deploy App
+
+I aim for this project to be easy to fork and deploy. Therefore, every configuration is done via environment variables.
+
+### Installation Guide
+
+I made an [installation guide](https://www.notion.so/Notiolink-Installation-Guide-3d038711cd5141109f56137d0195aad0) that is easy for people to follow. Even non-developers can do it too!
+
+<CloudinaryImg
+  mdx
+  publicId='theodorusclarence/projects/notiolink/notiolink-installation-guide_hcgett'
+  alt='notiolink-installation-guide'
+  width={785}
+  height={645}
+/>
+
+### Launching on ProductHunt
+
+I launched the app on [ProductHunt](https://www.producthunt.com/products/notiolink), and the review is quite positive!
+
+<CloudinaryImg
+  mdx
+  publicId='theodorusclarence/projects/notiolink/producthunt_boyaq5'
+  alt='producthunt'
+  width={449}
+  height={344}
+/>
+
+> ## The Problems and How I Deal With It
+
+Optimizing the repository so it is fairly customizable is hard. I created some features which users can customize and have to account for whether the feature will be hard to implement or set up. However, it was a thought-provoking activity that I enjoyed.
+
+> ## Try it out!
+
+Deploy one of your own!
+
+<GithubCard repo='theodorusclarence/notiolink' />

src/pages/index.tsx

@@ -355,7 +355,7 @@ export async function getStaticProps() {
     '2021-retrospective',
   ]);
   const featuredProjects = getFeatured(projects, [
-    'seasforus',
+    'notiolink',
     'ppdbsumsel',
     'side-projects',
   ]);