Merge branch 'develop' into path-broken-link

tailcallhq · Oct 26, 2024 · 1b810ef · 1b810ef
2 parents 127118a + 2908343
commit 1b810ef
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 76 deletions.
diff --git a/package.json b/package.json
@@ -14,8 +14,8 @@
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",
     "analyze": "docusaurus build --bundle-analyzer",
-    "format:fix": "prettier --write '**/*.{graphql,yml,json,md,sh,ts,tsx,js}'",
-    "format:check": "prettier --check '**/*.{graphql,yml,json,md,sh,ts,tsx,js}'",
+    "format:fix": "prettier --write '**/*.{graphql,yml,json,md,sh,ts,tsx,js,css}'",
+    "format:check": "prettier --check '**/*.{graphql,yml,json,md,sh,ts,tsx,js,css}'",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
     "typecheck": "tsc",

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -8,19 +8,24 @@
   .border-b-solid {
     border-bottom-style: solid;
   }
+
   .border-t-solid {
     border-top-style: solid;
   }
+
   .border-l-solid {
     border-left-style: solid;
   }
+
   .border-r-solid {
     border-right-style: solid;
   }
+
   .border-x-solid {
     border-left-style: solid;
     border-right-style: solid;
   }
+
   .border-y-solid {
     border-top-style: solid;
     border-bottom-style: solid;
@@ -135,9 +140,11 @@ input[type="radio"]:checked::before {
   padding-right: 0.75rem;
   padding-left: 1rem;
 }
+
 .benefits-drop-shadow:hover {
   box-shadow: 0px 14px 24px 0px rgba(250, 234, 90, 0.1);
 }
+
 .menu__list-item-collapsible:hover {
   background: transparent;
 }
@@ -732,6 +739,7 @@ span.token.tag.script.language-javascript {
 .pagination-nav {
   @apply !flex !justify-end;
 }
+
 .pagination-nav a {
   @apply md:w-1/2;
 }
@@ -743,7 +751,8 @@ span.token.tag.script.language-javascript {
 .responsive-iframe-container {
   position: relative;
   width: 100%;
-  padding-bottom: 56.25%; /* Aspect ratio: 16:9 */
+  padding-bottom: 56.25%;
+  /* Aspect ratio: 16:9 */
   height: 0;
   overflow: hidden;
 }
@@ -761,6 +770,10 @@ span.token.tag.script.language-javascript {
   .border-right {
     border-right: 1px solid #e7e7e7;
   }
+
+  .blog-post-content-desc {
+    -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent);
+  }
 }
 
 .menu__link--sublist-caret:after {
@@ -779,3 +792,17 @@ span.token.tag.script.language-javascript {
     text-align: center;
   }
 }
+
+.featured-posts-container {
+  max-height: 100vh;
+  padding-bottom: calc(var(--ifm-navbar-height) + 1rem);
+  transition: 0.25s ease-in-out;
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 1rem);
+}
+
+[class*="navbarHidden"] + .main-wrapper .featured-posts-container {
+  padding-bottom: var(--ifm-navbar-height);
+  top: 2rem;
+}
diff --git a/src/theme/BlogAuthor/index.tsx b/src/theme/BlogAuthor/index.tsx
@@ -1,15 +1,18 @@
 import React from "react"
+import clsx from "clsx"
 
 interface AuthorDisplayProps {
   author: {
     name?: string
     imageURL?: string
   }
+  containerClassName?: string
+  textClassName?: string
 }
 
-export const BlogAuthor: React.FC<AuthorDisplayProps> = ({author}) => (
-  <div className="mt-4 flex items-center">
+export const BlogAuthor: React.FC<AuthorDisplayProps> = ({author, containerClassName, textClassName}) => (
+  <div className={clsx("flex items-center", containerClassName)}>
     <img src={author.imageURL} alt={author.name} className="mr-2 size-6 rounded-full" />
-    <span className="font-medium text-black">{author.name}</span>
+    <span className={clsx("font-medium text-black", textClassName)}>{author.name}</span>
   </div>
 )
diff --git a/src/theme/BlogCategories/index.tsx b/src/theme/BlogCategories/index.tsx
@@ -21,18 +21,18 @@ export function BlogCategories({items, onCategoryClick, activeCategory}: BlogCat
   }, [items])
 
   return (
-    <div className="mb-4 flex items-center space-x-4 border-b border-gray-200">
+    <div className="mb-4 md:mb-5 flex items-center space-x-4 border-b border-gray-200">
       {Object.entries(categories).map(([name, count]) => (
         <div
           aria-role="button"
           aria-label={`${name} (${count})`}
           key={name}
           onClick={() => onCategoryClick(name === activeCategory ? "All" : name)}
           className={clsx(
-            "text-sm cursor-pointer appearance-none border-none bg-transparent px-1 font-medium",
+            "text-content-small md:text-title-tiny cursor-pointer appearance-none border-none bg-transparent px-1",
             activeCategory === name
-              ? "font-medium text-gray-900 border-b-solid border-b-2 border-black"
-              : "text-gray-500 hover:text-gray-700",
+              ? "!font-medium text-black border-b-solid border-b-2 border-black"
+              : "!font-normal text-tailCall-dark-200 hover:text-gray-700",
           )}
         >
           {name}

diff --git a/src/theme/BlogFeaturedPosts/index.tsx b/src/theme/BlogFeaturedPosts/index.tsx
@@ -6,22 +6,28 @@ import {BlogAuthor} from "../BlogAuthor"
 function BlogFeaturedPosts({items}: {items: Props["items"]}): JSX.Element {
   return (
     <div className="space-y-4">
-      <h2 className="text-2xl mb-4 font-bold">Featured Posts</h2>
-      {items.map((post, index) => (
-        <Link
-          to={post.content.metadata.permalink}
-          key={index}
-          className="flex flex-col gap-4 text-black !no-underline hover:text-black"
-        >
-          <div className="flex items-center gap-2">
-            {post.content.metadata.authors[0] && <BlogAuthor author={post.content.metadata.authors[0]} />}
-          </div>
-          <div>
-            <div className="text-lg font-semibold">{post.content.metadata.title}</div>
-            <p className="text-sm mt-1 text-tailCall-light-600">{post.content.metadata.description}</p>
-          </div>
-        </Link>
-      ))}
+      <h2 className="text-2xl mb-5 font-bold">Featured Posts</h2>
+      <div className="flex flex-col gap-8">
+        {items.map((post, index) => (
+          <Link
+            to={post.content.metadata.permalink}
+            key={index}
+            className="flex flex-col gap-3 text-black !no-underline hover:text-black"
+          >
+            <div className="flex items-center gap-2">
+              {post.content.metadata.authors[0] && (
+                <BlogAuthor author={post.content.metadata.authors[0]} textClassName="text-content-tiny" />
+              )}
+            </div>
+            <div className="flex flex-col">
+              <span className="text-title-tiny text-black">{post.content.metadata.title}</span>
+              <span className="text-content-small text-tailCall-light-600 line-clamp-1">
+                {post.content.metadata.description}
+              </span>
+            </div>
+          </Link>
+        ))}
+      </div>
     </div>
   )
 }

diff --git a/src/theme/BlogLayout/index.tsx b/src/theme/BlogLayout/index.tsx
@@ -17,7 +17,7 @@ export default function BlogLayout(props: Props): JSX.Element {
 
   return (
     <Layout {...layoutProps}>
-      <div className="container mx-auto my-8 px-4">
+      <div className="container mx-auto mt-3 mb-10 md:my-8 px-4 ">
         <div className="flex flex-row">
           {isBlogPostPage && <div className="hidden lg:block lg:w-[20.83%]"></div>}
           <div className={clsx("w-full", isBlogPostPage && "lg:w-[58.33%]")}>{children}</div>

diff --git a/src/theme/BlogListPage/index.tsx b/src/theme/BlogListPage/index.tsx
@@ -50,14 +50,14 @@ function BlogListPageContent({metadata, items, sidebar}: Props): JSX.Element {
   return (
     <BlogLayout sidebar={sidebar}>
       <div className="flex flex-col md:flex-row items-start w-full">
-        <div className={clsx("w-full md:w-9/12 md:pr-6", featuredItems.length == 0 ? "md:w-full" : "border-right")}>
+        <div className={clsx("w-full md:w-9/12 md:pr-5", featuredItems.length == 0 ? "md:w-full" : "border-right")}>
           <BlogCategories items={items} onCategoryClick={handleCategoryClick} activeCategory={activeCategory} />
           <BlogPostList items={filteredItems.slice(0, visibleItems)} />
           {visibleItems < filteredItems.length && <LoadMoreButton handleLoadMore={handleLoadMore} />}
           <BlogListPaginator metadata={metadata} />
         </div>
         {featuredItems.length > 0 ? (
-          <div className="w-full md:w-3/12 hidden md:block md:pl-6">
+          <div className="w-full md:w-3/12 hidden md:block md:pl-5 featured-posts-container">
             <BlogFeaturedPosts items={featuredItems} />
           </div>
         ) : null}

diff --git a/src/theme/BlogPostList/index.tsx b/src/theme/BlogPostList/index.tsx
@@ -4,64 +4,39 @@ import type {Props} from "@theme/BlogListPage"
 import {BlogAuthor} from "../BlogAuthor"
 import clsx from "clsx"
 
-const FeaturedPost = ({item}: {item: Props["items"][0]}) => (
-  <Link
-    to={item.content.metadata.permalink}
-    className="md:col-span-2 lg:col-span-3 flex flex-col overflow-hidden !text-black !no-underline"
-  >
-    <img
-      src={item.content.metadata.frontMatter.image}
-      alt={item.content.metadata.title}
-      className="w-full object-contain aspect-video"
-    />
-    <PostContent item={item} isFeatured />
-  </Link>
-)
-
 const RegularPost = ({item}: {item: Props["items"][0]}) => (
-  <Link
-    to={item.content.metadata.permalink}
-    className="p-4 md:p-0 md:my-2 flex flex-col overflow-hidden border border-solid border-tailCall-light-400 md:border-none !text-black !no-underline rounded-xl md:rounded-none"
-  >
-    <img
-      src={item.content.metadata.frontMatter.image}
-      alt={item.content.metadata.title}
-      className="w-full object-contain aspect-video hidden md:block"
-    />
+  <Link to={item.content.metadata.permalink} className="flex flex-col overflow-hidden !text-black !no-underline">
     <PostContent item={item} />
   </Link>
 )
 
-const PostContent = ({item, isFeatured = false}: {item: Props["items"][0]; isFeatured?: boolean}) => (
-  <div className={clsx("flex flex-grow flex-col justify-between", {"md:mt-5": !isFeatured})}>
-    <div>
-      <span className="text-[12px] text-black">
-        {new Date(item.content.metadata.date).toLocaleDateString("en-US", {
-          month: "long",
-          day: "numeric",
-          year: "numeric",
-        })}
-      </span>
-      <h2 className={clsx("mb-2 line-clamp-2 font-bold", isFeatured ? "text-3xl" : "text-xl")}>
-        {item.content.metadata.title}
-      </h2>
-      <span className="text-sm line-clamp-2 text-tailCall-light-600">
+const PostContent = ({item}: {item: Props["items"][0]}) => (
+  <div className="flex flex-col flex-1 p-3 md:py-12 md:px-6 gap-2 md:gap-3 border border-solid border-tailCall-border-light-400 hover:border-tailCall-border-dark-100 rounded-lg md:rounded-md">
+    <span className="hidden md:flex text-content-mini text-black">
+      {new Date(item.content.metadata.date).toLocaleDateString("en-US", {
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+      })}
+    </span>
+    <div className="flex flex-col flex-1 gap-1 md:gap-2">
+      <span className={clsx("text-title-small line-clamp-2")}>{item.content.metadata.title}</span>
+      <span className="flex-1 text-content-tiny md:text-content-small line-clamp-1 md:line-clamp-3 text-tailCall-light-600 blog-post-content-desc">
         {item.content.metadata.frontMatter.description}
       </span>
-      {item.content.metadata.authors[0] && <BlogAuthor author={item.content.metadata.authors[0]} />}
     </div>
+    {item.content.metadata.authors[0] && (
+      <BlogAuthor author={item.content.metadata.authors[0]} containerClassName="mt-auto" />
+    )}
   </div>
 )
 
 function BlogPostList({items}: {items: Props["items"]}): JSX.Element {
-  const [featuredPost, ...regularPosts] = items
-
   return (
-    <div className="grid grid-cols-1 gap-4 md:gap-8 md:grid-cols-2 lg:grid-cols-3">
-      <FeaturedPost item={featuredPost} />
-      {regularPosts.map((item) => (
-        <RegularPost key={item.content.metadata.permalink} item={item} />
-      ))}
+    <div className="grid grid-cols-1 gap-4 md:gap-3 md:grid-cols-2 lg:grid-cols-3">
+      {items.map((item) => {
+        return <RegularPost key={item.content.metadata.permalink} item={item} />
+      })}
     </div>
   )
 }

diff --git a/src/utils/hooks/useBlogPosts.ts b/src/utils/hooks/useBlogPosts.ts
@@ -2,10 +2,11 @@ import {useState, useMemo} from "react"
 import type {Props} from "@theme/BlogListPage"
 
 const DEFAULT_CATEGORY = "All"
+const INITIAL_BLOG_COUNT = 12
 
 export function useBlogPosts(items: Props["items"]) {
   const [activeCategory, setActiveCategory] = useState<string>(DEFAULT_CATEGORY)
-  const [visibleItems, setVisibleItems] = useState(7)
+  const [visibleItems, setVisibleItems] = useState(INITIAL_BLOG_COUNT)
 
   const filteredItems = useMemo(() => {
     return activeCategory === DEFAULT_CATEGORY
@@ -15,7 +16,7 @@ export function useBlogPosts(items: Props["items"]) {
 
   const handleCategoryClick = (category: string) => {
     setActiveCategory(category)
-    setVisibleItems(7)
+    setVisibleItems(INITIAL_BLOG_COUNT)
   }
 
   const handleLoadMore = () => {

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -179,6 +179,14 @@ module.exports = {
           letterSpacing: "-4%",
         },
       ],
+      "content-mini": [
+        "12px",
+        {
+          lineHeight: "16px",
+          fontWeight: "400",
+          letterSpacing: "-2%",
+        },
+      ],
     },
   },
   plugins: [],