Merge branch 'master' into 7-extract-tag-cloud

src/App.tsx

@@ -10,9 +10,7 @@ import { ErrorPage } from './pages/error';
 import { HomePage } from './pages/home';
 
 function App() {
-  const { posts, isLoading } = usePosts();
-
-  if (isLoading) return <></>;
+  const { posts } = usePosts();
 
   return (
     <>
@@ -28,6 +26,7 @@ function App() {
                   {posts.map((post) => (
                     <Route
                       key={post.frontmatter.company.name}
+                      // TODO: we should create a util functio nthat slugifies the company name
                       path={post.frontmatter.company.name.toLowerCase()}
                       element={<PostComponent post={post} />}
                     />

src/components/Header/Header.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react';
 import { SocialNavigation } from '../SocialNavigation';
 
 interface HeadingProps {}
@@ -9,14 +10,38 @@ const profile = {
 };
 
 export const Heading: React.FC<HeadingProps> = () => {
-  return (
-    <header className="mb-8 site-header">
-      <h1 className="site-title">{profile.name}</h1>
-      <p className="-mt-6 text-2xl">{profile.position}</p>
+  const socialNavRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (socialNavRef.current) {
+        if (window.scrollY > 100) {
+          // Adjust this value as needed
+          socialNavRef.current.classList.add('sticky');
+        } else {
+          socialNavRef.current.classList.remove('sticky');
+        }
+      }
+    };
 
-      <div className="flex justify-center mx-auto space-x-4 text-xs">
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  return (
+    <>
+      <header className="mb-8 site-header">
+        <h1 className="site-title">{profile.name}</h1>
+        <p className="-mt-6 text-2xl">{profile.position}</p>
+      </header>
+      <nav
+        className="flex justify-center mx-auto space-x-4 text-xs"
+        ref={socialNavRef}
+      >
         <SocialNavigation />
-      </div>
-    </header>
+      </nav>
+    </>
   );
 };

src/components/Section/Section.tsx

@@ -2,9 +2,22 @@ import { SectionTitle } from './SectionTitle';
 
 interface SectionProps extends React.PropsWithChildren {
   className?: string;
+  isLoading?: boolean;
 }
-export function Section({ className, children }: SectionProps) {
-  return <section className={className}>{children}</section>;
+export function Section({
+  className,
+  isLoading = false,
+  children,
+}: SectionProps) {
+  const ToRender = isLoading ? (
+    <div className="w-full flex justify-center items-center">
+      <div className="w-8 h-8 border-4 border-blue-500 border-t-transparent border-solid rounded-full animate-spin"></div>
+    </div>
+  ) : (
+    children
+  );
+
+  return <section className={className}>{ToRender}</section>;
 }
 
 Section.Wrapper = ({ children }: React.PropsWithChildren) => (

src/components/SocialNavigation/SocialNavigation.tsx

@@ -21,17 +21,18 @@ const socials = [
 
 export const SocialNavigation: React.FC<SocialNavigationProps> = () => {
   const { setShowContactFormModal } = useContactForm();
-  const size = 30;
+
+  const ICON_SIZE = 30;
 
   return (
-    <div className="p-1 space-x-4 bg-white rounded-full">
+    <div className="p-1 space-x-4 bg-white rounded-full mb-4">
       {socials.map((social) => (
         <SocialIcon
           url={social.url}
           target="_blank"
           rel="external nofollow noreferrer"
           key={social.url}
-          style={{ height: size, width: size }}
+          style={{ height: ICON_SIZE, width: ICON_SIZE }}
           className="transition-opacity duration-300 ease-in-out opacity-75 hover:opacity-100"
         />
       ))}
@@ -43,7 +44,7 @@ export const SocialNavigation: React.FC<SocialNavigationProps> = () => {
       >
         <SocialIcon
           network="email"
-          style={{ height: size, width: size }}
+          style={{ height: ICON_SIZE, width: ICON_SIZE }}
           className="transition-opacity duration-300 ease-in-out opacity-75 hover:opacity-100"
         />
       </button>

src/components/TimelineItem/TimelineItem.tsx

@@ -60,6 +60,8 @@ export function TimelineItem({ timeline, isAlternate }: TimelineItemProps) {
               <JobCard.Title />
               <JobCard.Description />
               {/* <JobCard.Responsibilities /> */}
+
+              {/* // TODO: as in the routing, this should use the slugify utility function */}
               <Link
                 to={`career/${timeline.company.name}`}
                 className={

src/components/hooks/usePosts.ts

@@ -13,18 +13,42 @@ type Module = {
   default: string;
 };
 
+// Declare the __WebpackModuleApi namespace if it's not available
+declare namespace __WebpackModuleApi {
+  interface RequireContext {
+    (id: string): any;
+    keys(): string[];
+    resolve(id: string): string;
+    id: string;
+  }
+}
+// Declare the NodeRequire interface with the context method
+interface NodeRequire {
+  context: (
+    path: string,
+    deep?: boolean,
+    filter?: RegExp
+  ) => __WebpackModuleApi.RequireContext;
+}
+
 export const usePosts = () => {
   const [posts, setPosts] = useState<PostType<Frontmatter>[]>();
   const [tags, setTags] = useState<TagCount[]>();
   const [isLoading, setIsLoading] = useState(false);
 
-  const importAll = (r: any) => r.keys().map(r);
-
   if (!process.env.REACT_APP_CONTENT_PATH)
     throw new Error('REACT_APP_CONTENT_PATH not set');
 
+  type ImportAllFunction = (r: __WebpackModuleApi.RequireContext) => Module[];
+
+  const importAll: ImportAllFunction = (r) => r.keys().map(r);
+
   const markdownFiles = importAll(
-    (require as any).context(process.env.REACT_APP_CONTENT_PATH, false, /\.md$/)
+    (require as unknown as NodeRequire).context(
+      process.env.REACT_APP_CONTENT_PATH,
+      false,
+      /\.md$/
+    )
   );
 
   const fetchMarkdownFile = async (
@@ -56,11 +80,16 @@ export const usePosts = () => {
     const loadContent = async () => {
       setIsLoading(true);
 
-      let results = await Promise.all<PostType<Frontmatter>[]>(
-        markdownFiles.map(fetchMarkdownFile)
-      );
+      // Create an array of promises
+      const promises = markdownFiles.map(fetchMarkdownFile);
+
+      // Wait for all promises to resolve
+      let results = await Promise.all(promises);
+
+      const unsortedTags = countTags(results);
+
+      setTags(unsortedTags?.sort((a, b) => b.count - a.count));
 
-      setTags(countTags(results));
       results.sort((a, b) => {
         return desc(
           a.frontmatter.job.dates.start,