🦄 feature: Better Icons! (#3)

* 💽 incremental change

* 💽 incremental change

* 💽 incremental change

content/blog/posts/hello-world.mdx

@@ -5,8 +5,8 @@ image: '/img/hello-world.png'
 authorGithubUsername: 'zrosenbauer'
 readTime: 3
 publishedAt: '2024-05-10'
-tags: 
- - fun
+tags:
+  - fun
 ---
 
 The proverbial first program that every programmer writes.

content/blog/posts/react-dnd-scoping.mdx

@@ -18,7 +18,7 @@ TL:DR? If you want to skip the story and just see the fix, [click here](#-the-fi
 
 If you haven't heard of Joggr (I'm the CTO & Co-Founder), we are a documentation platform built for developers, that is directly in your IDE & automatically keeps documentation up-to-date every time your code changes.
 
-We use [TipTap](https://tiptap.dev/) which is built on top of [ProseMirror](https://prosemirror.net/) for our custom-built editor. TipTap/ProseMirror has a great drag-n-drop API that we use to drag blocks around in our editor 
+We use [TipTap](https://tiptap.dev/) which is built on top of [ProseMirror](https://prosemirror.net/) for our custom-built editor. TipTap/ProseMirror has a great drag-n-drop API that we use to drag blocks around in our editor
 and it was one the first features we added when we launched to our design partners last year.
 
 We recently added the ability to create folders and organize your JoggrDocs, including the ability to drag and drop JoggrDocs and folders around in the sidebar (see below).
@@ -35,7 +35,7 @@ A user logged a bug:
 
 We already had drag-n-drop functionality in our editor so we were confused as we had made 0 changes to the editor in the last week or two.
 
-I figured it was due to the fact I had handwritten the drag-n-drop functionality in our editor and it was a bug in my code. I personally spent hours trying to re-implement the drag-n-drop functionality using 
+I figured it was due to the fact I had handwritten the drag-n-drop functionality in our editor and it was a bug in my code. I personally spent hours trying to re-implement the drag-n-drop functionality using
 the great [templates provided by TipTap](https://templates.tiptap.dev/) to no avail.
 
 I was stumped, I couldn't figure out why the drag-n-drop functionality in our editor was broken.
@@ -52,11 +52,11 @@ He started digging in and searching things like:
 
 > ProseMirror drag-n-drop not working
 
-or 
+or
 
 > TipTap drag-n-drop not working
 
-or 
+or
 
 > drag-n-drop broken
 
@@ -68,13 +68,13 @@ or the winner
 
 Luckily Borisa, figured out that `react-dnd` was the culprit through some clever search queries (using `dnd` was the key).
 
-Borisa found an [GitHub issue](https://github.com/ueberdosis/tiptap/issues/4844) on the TipTap repository that was similar to our issue and 
+Borisa found an [GitHub issue](https://github.com/ueberdosis/tiptap/issues/4844) on the TipTap repository that was similar to our issue and
 pointed to a [source issue on the `react-dnd` repository](https://github.com/react-dnd/react-dnd-html5-backend/issues/7#issuecomment-262267786).
 
 > [!TIP]  
 > Search the GitHub repository issues in your OSS if Google is coming up short.
 
-`react-dnd` was overriding the drag-n-drop APIs in the browser and in turn breaking drag-n-drop everywhere else on the page. 
+`react-dnd` was overriding the drag-n-drop APIs in the browser and in turn breaking drag-n-drop everywhere else on the page.
 We realized that this is not only impacting dragging blocks in our editor, but also dragging files into our image uploader.
 
 ## 🔧 the fix
@@ -86,9 +86,7 @@ We already had our `DndProvider` in a scoped section of our app but we didn't pr
 ```tsx
 export const DirectoryTreeView: React.FC<DirectoryTreeViewProps> = (props) => {
   return (
-    <DndProvider
-      backend={HTML5Backend}
-    >
+    <DndProvider backend={HTML5Backend}>
       <DirectoryTreeViewInner {...props} />
     </DndProvider>
   );
@@ -108,12 +106,12 @@ export const DirectoryTreeView: React.FC<DirectoryTreeViewProps> = (props) => {
     React.useCallback((node) => {
       setDndArea(node);
     }, []);
-  
+
   const html5Options = React.useMemo(
     () => ({ rootElement: dndArea }),
     [dndArea]
   );
-  
+
   return (
     <span ref={handleSidebarRef}>
       {!_.isNil(dndArea) && (

contentlayer.config.ts

@@ -1,4 +1,8 @@
-import { defineDocumentType, makeSource, defineNestedType } from 'contentlayer/source-files';
+import {
+  defineDocumentType,
+  makeSource,
+  defineNestedType,
+} from 'contentlayer/source-files';
 import remarkGfm from 'remark-gfm';
 import { remarkAlert } from 'remark-github-blockquote-alert';
 import rehypePrettyCode from 'rehype-pretty-code';
@@ -77,7 +81,7 @@ export const BlogPost = defineDocumentType(() => ({
         options: blogTags.map((tag) => tag.slug),
       },
       required: false,
-    }
+    },
   },
   computedFields: {
     ...computedFields,

eslint.config.js

@@ -21,7 +21,16 @@ const config = {
     '@typescript-eslint/no-unnecessary-type-assertion': 'warn',
     '@typescript-eslint/return-await': 'warn',
   },
-  ignorePatterns: ['node_modules', 'dist', 'public','next.config.mjs', 'contentlayer.config.ts', 'eslint.config.js', 'tailwind.config.js', 'postcss.config.js'],
+  ignorePatterns: [
+    'node_modules',
+    'dist',
+    'public',
+    'next.config.mjs',
+    'contentlayer.config.ts',
+    'eslint.config.js',
+    'tailwind.config.js',
+    'postcss.config.js',
+  ],
 };
 
 const compat = new FlatCompat({

next.config.mjs

@@ -19,18 +19,11 @@ const nextConfig = {
     unoptimized: true,
   },
 
-  /**
-   * Transpile the `lucide-react` package to support static exports.
-   * 
-   * @see https://lucide.dev/guide/packages/lucide-react#nextjs-example
-   */
-  transpilePackages: ['lucide-react'],
-
   /**
    * @see https://nextjs.org/docs/pages/api-reference/next-config-js/pageExtensions
    */
   pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
-  
+
   /**
    * @see https://nextjs.org/docs/app/api-reference/next-config-js/mdxRs
    */

package.json

@@ -11,15 +11,13 @@
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.2",
-    "@next/font": "^14.2.3",
     "@next/mdx": "^14.2.3",
     "@react-hookz/web": "^24.0.4",
     "@tabler/icons-react": "^3.5.0",
     "classnames": "^2.5.1",
     "contentlayer": "^0.3.4",
     "framer-motion": "^11.2.10",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.383.0",
     "markdown-wasm": "^1.2.0",
     "next": "^13.5.6",
     "next-contentlayer": "^0.3.4",

src/app/blog/page.tsx

@@ -11,6 +11,7 @@ import React from 'react';
 
 import { blogTags } from '@utils/blog/tags';
 import { Popout } from '@components/ui/popout';
+import { IconX } from '@tabler/icons-react';
 
 export const revalidate = 60;
 
@@ -61,12 +62,10 @@ export default function BlogPage() {
         <Popout>
           <div className='inline-flex items-center space-x-1.5'>
             <div className='text-zinc-200'>Filter by tag:</div>
-            <div
-              className='flex gap-2'
-            >
+            <div className='flex gap-2'>
               {blogTags.map((tag) => (
                 <Chip
-                  key={tag.slug} 
+                  key={tag.slug}
                   label={tag.name}
                   icon={<Icon name={tag.icon} />}
                   onClick={createFilterHandler(tag.slug)}
@@ -79,7 +78,7 @@ export default function BlogPage() {
                 className='text-zinc-200 hover:text-zinc-50'
                 onClick={handleClearFilters}
               >
-                <Icon name='x' />
+                <IconX />
               </button>
             )}
           </div>
@@ -135,35 +134,43 @@ export default function BlogPage() {
           </div>
         </div> */}
         <div className='hidden w-full h-px md:block bg-zinc-800 my-8' />
-        <div className='grid grid-cols-1 gap-4 mx-auto lg:mx-0 md:grid-cols-3 my-8'>
-          <div className='grid grid-cols-1 gap-4'>
-            {sorted
-              .filter((_, i) => i % 3 === 0)
-              .map((post) => (
-                <Card key={post.slug}>
-                  <BlogPostCard post={post} />
-                </Card>
-              ))}
-          </div>
-          <div className='grid grid-cols-1 gap-4'>
-            {sorted
-              .filter((_, i) => i % 3 === 1)
-              .map((post) => (
-                <Card key={post.slug}>
-                  <BlogPostCard post={post} />
-                </Card>
-              ))}
+        {sorted.length > 0 ?
+          <div className='grid grid-cols-1 gap-4 mx-auto lg:mx-0 md:grid-cols-3 my-8'>
+            <div className='grid grid-cols-1 gap-4'>
+              {sorted
+                .filter((_, i) => i % 3 === 0)
+                .map((post) => (
+                  <Card key={post.slug}>
+                    <BlogPostCard post={post} />
+                  </Card>
+                ))}
+            </div>
+            <div className='grid grid-cols-1 gap-4'>
+              {sorted
+                .filter((_, i) => i % 3 === 1)
+                .map((post) => (
+                  <Card key={post.slug}>
+                    <BlogPostCard post={post} />
+                  </Card>
+                ))}
+            </div>
+            <div className='grid grid-cols-1 gap-4'>
+              {sorted
+                .filter((_, i) => i % 3 === 2)
+                .map((post) => (
+                  <Card key={post.slug}>
+                    <BlogPostCard post={post} />
+                  </Card>
+                ))}
+            </div>
           </div>
-          <div className='grid grid-cols-1 gap-4'>
-            {sorted
-              .filter((_, i) => i % 3 === 2)
-              .map((post) => (
-                <Card key={post.slug}>
-                  <BlogPostCard post={post} />
-                </Card>
-              ))}
+        : <div className='text-center'>
+            <h2 className='text-2xl font-bold text-zinc-100'>No posts found</h2>
+            <p className='mt-4 text-lg leading-8 text-zinc-300'>
+              Try clearing the filters or checking back later.
+            </p>
           </div>
-        </div>
+        }
       </div>
     </div>
   );

src/app/blog/posts/[slug]/page.css

@@ -4,4 +4,4 @@
 
 .prose {
   max-width: 75ch !important;
-}
+}

src/app/blog/posts/[slug]/page.tsx

@@ -34,9 +34,12 @@ export default async function PostPage({ params }: Props) {
     notFound();
   }
 
-  const tags = Array.isArray(post.tags) ? post.tags.map((tagSlug) => {
-    return getBlogTagBySlug(tagSlug);
-  }) : [];
+  const tags =
+    Array.isArray(post.tags) ?
+      post.tags.map((tagSlug) => {
+        return getBlogTagBySlug(tagSlug);
+      })
+    : [];
 
   return (
     <div className='bg-zinc-50 min-h-screen'>
@@ -67,12 +70,10 @@ export default async function PostPage({ params }: Props) {
         {tags.length > 0 && (
           <React.Fragment>
             <hr className='my-4' />
-            <div
-              className='flex gap-2'
-            >
+            <div className='flex gap-2'>
               {tags.map((tag) => (
                 <Chip
-                  key={tag.slug} 
+                  key={tag.slug}
                   label={tag.name}
                   icon={<Icon name={tag.icon} />}
                   dark

src/app/contact/page.tsx

@@ -1,24 +1,30 @@
 'use client';
+
 import { Card } from '@components/card';
 import { Navigation } from '@components/nav';
-import { Github, Mail, Linkedin } from 'lucide-react';
+import {
+  IconBrandGithub,
+  IconMail,
+  IconBrandLinkedin,
+} from '@tabler/icons-react';
+
 import Link from 'next/link';
 
 const socials = [
   {
-    icon: <Linkedin size={20} />,
+    icon: <IconBrandLinkedin size={20} />,
     href: 'https://linkedin.com/in/zacrosenbauer',
     label: 'Linkedin',
     handle: 'zrosenbauer',
   },
   {
-    icon: <Mail size={20} />,
+    icon: <IconMail size={20} />,
     href: 'mailto:[email protected]',
     label: 'Email',
     handle: '[email protected]',
   },
   {
-    icon: <Github size={20} />,
+    icon: <IconBrandGithub size={20} />,
     href: 'https://github.com/zrosenbauer',
     label: 'Github',
     handle: 'zrosenbauer',

src/app/layout.tsx

@@ -1,5 +1,5 @@
-import { Inter } from '@next/font/google';
-import LocalFont from '@next/font/local';
+import { Inter } from 'next/font/google';
+import LocalFont from 'next/font/local';
 import { type Metadata } from 'next';
 
 import { Analytics } from '../components/analytics';

src/app/not-found.tsx

@@ -2,7 +2,6 @@ import { Starfield } from '@components/starfield';
 import Link from 'next/link';
 import React from 'react';
 
-
 export default function NotFoundPage() {
   return (
     <div className='flex flex-col items-center justify-center w-screen h-screen overflow-hidden bg-gradient-to-tl from-black via-zinc-600/20 to-black'>

src/app/page.tsx

@@ -2,7 +2,6 @@ import { Starfield } from '@components/starfield';
 import Link from 'next/link';
 import React from 'react';
 
-
 const navigation = [
   { name: 'about', href: '/about' },
   // { name: 'Consulting', href: '/consulting' },

src/app/projects/page.tsx

@@ -6,7 +6,7 @@ import { Navigation } from '@components/nav';
 import { allProjects } from '@content';
 import { useGitHubApi } from '@utils/github/client';
 import _ from 'lodash';
-import { Star } from 'lucide-react';
+import { IconStar } from '@tabler/icons-react';
 import Link from 'next/link';
 import React from 'react';
 
@@ -60,7 +60,7 @@ export default function ProjectsPage() {
                 <div className='flex items-center justify-between gap-2'>
                   {!_.isNil(featuredGhRepo.data) && (
                     <span className='flex items-center gap-1 text-xs text-zinc-500'>
-                      <Star className='w-4 h-4' />{' '}
+                      <IconStar className='w-4 h-4' />{' '}
                       {Intl.NumberFormat('en-US', {
                         notation: 'compact',
                       }).format(featuredGhRepo.data.stargazers_count)}

src/app/projects/project-card.tsx

@@ -2,7 +2,7 @@ import { Mdx } from '@components/md/mdx';
 import type { Project } from '@content';
 import { useGitHubApi } from '@utils/github/client';
 import _ from 'lodash';
-import { Star } from 'lucide-react';
+import { IconStar } from '@tabler/icons-react';
 import Link from 'next/link';
 
 export const ProjectCard: React.FC<{
@@ -27,7 +27,7 @@ export const ProjectCard: React.FC<{
       <article className='p-4 md:p-8'>
         <div className='flex justify-between gap-2 items-center'>
           <span className='text-zinc-500 text-xs flex items-center gap-1'>
-            <Star className='w-4 h-4' />{' '}
+            <IconStar className='w-4 h-4' />{' '}
             {Intl.NumberFormat('en-US', { notation: 'compact' }).format(
               data.stargazers_count
             )}