small site fixes (#9601)

contents/handbook/engineering/posthog-com/developing-the-website.md

@@ -476,13 +476,17 @@ If you know who you would like to review the pull request, select them in the **
 
 After a series of checks are run (to ensure nothing in your pull request breaks the website), Vercel will generate a preview link available in the Vercel bot comment. This includes all of your changes, so you can preview before your pull request is merged.
 
+An initial build can take up to 50 minutes to run. After the initial build, subsequent builds should complete in under ~15 minutes. We're limited to two concurrent builds, so if there's a backlog, this process can take longer.
+
+Because Vercel charges per seat, we don't automatically invite all team members to our Vercel account. If your build fails, you can run `yarn build` locally to see what's erroring out. If nothing is erroring locally, it's likely the build timed out in Vercel. The Website & Docs team monitors for failed builds, so they'll re-run it for you. If the build is urgent, give a shout in #team-website-and-docs and someone with Vercel access can trigger a rebuild for you.
+
 ![Preview branch](https://res.cloudinary.com/dmukukwp6/image/upload/v1710055416/posthog.com/contents/images/docs/contribute/preview-branch.png)
 
 > **Note:** Checks are run automatically for PostHog org members and previous contributors. First time contributors will require authorization for checks to be run by a PostHog org member.
 
 ## Deployment
 
-To get changes into production, the website deploys automatically from `master`. The build takes 5-10 minutes.
+To get changes into production, the website deploys automatically from `master`. The build takes up to an hour, but can be delayed if other preview builds are in the queue.
 
 #### Acknowledgements
 

contents/handbook/engineering/posthog-com/how-posthog-website-works.md

@@ -15,6 +15,7 @@ PostHog.com is built and maintained in-house by the [Website & Docs team](/teams
 | Algolia (API) 	| Site search 	|
 | Strapi 	| Headless CMS 	|
 | PostHog 	| Analytics, feature flags 	|
+| Inkeep | AI-powered community answers |
 
 ![Diagram of PostHog.com](https://res.cloudinary.com/dmukukwp6/image/upload/v1710055416/posthog.com/contents/images/docs/contribute/website-diagram.png)
 

src/components/MainNav/index.tsx

@@ -175,8 +175,8 @@ function Tooltip({
                     ref={setReferenceElement}
                     onClick={() => setOpen(!open)}
                     className={`ml-2 flex items-center rounded-full border border-light dark:border-dark relative active:scale-[.99] ${open
-                            ? 'border-primary/50 dark:border-primary-dark/50'
-                            : 'hover:border-primary/25 hover:dark:border-primary-dark/25 hover:scale-[1.05]'
+                        ? 'border-primary/50 dark:border-primary-dark/50'
+                        : 'hover:border-primary/25 hover:dark:border-primary-dark/25 hover:scale-[1.05]'
                         }`}
                 >
                     {children}
@@ -312,17 +312,17 @@ export const InternalMenu = ({ className = '', mobile = false, menu, activeIndex
                                     }}
                                     to={url}
                                     className={`snap-center group flex items-center relative px-2 pt-1.5 pb-1 mb-1 rounded hover:bg-light/50 hover:dark:bg-dark/50 ${active
-                                            ? ''
-                                            : 'border border-b-3 border-transparent md:hover:border-light dark:md:hover:border-dark hover:translate-y-[-1px] active:translate-y-[1px] active:transition-all'
+                                        ? ''
+                                        : 'border border-b-3 border-transparent md:hover:border-light dark:md:hover:border-dark hover:translate-y-[-1px] active:translate-y-[1px] active:transition-all'
                                         }`}
                                 >
                                     <span className={`w-6 h-6 mr-2 text-${color} dark:text-${colorDark}`}>
                                         <Icon />
                                     </span>
                                     <span
                                         className={`text-sm whitespace-nowrap ${active
-                                                ? 'font-bold opacity-100'
-                                                : 'font-semibold opacity-60 group-hover:opacity-100'
+                                            ? 'font-bold opacity-100'
+                                            : 'font-semibold opacity-60 group-hover:opacity-100'
                                             }`}
                                     >
                                         {name}
@@ -480,8 +480,8 @@ export const Main = () => {
                                     <Link
                                         to={url}
                                         className={`text-[13.5px] font-medium flex h-full items-center relative px-3 py-4 mdlg:p-4 ${active
-                                                ? 'px-[calc(.75rem_+_10px)] mdlg:px-[calc(1rem_+_10px)] mx-[-10px]'
-                                                : 'opacity-70 hover:opacity-100'
+                                            ? 'px-[calc(.75rem_+_10px)] mdlg:px-[calc(1rem_+_10px)] mx-[-10px]'
+                                            : 'opacity-70 hover:opacity-100'
                                             }`}
                                     >
                                         {active && <ActiveBackground />}
@@ -689,8 +689,8 @@ export const Main = () => {
                                 <div className="p-px bg-accent dark:bg-accent-dark rounded-full inline-flex relative">
                                     <Avatar
                                         src={getAvatarURL(user?.profile)}
-                                        className={`w-9 h-9 inline-block bg-${user.profile.color ?? 'white'
-                                            } rounded-full dark:bg-dark`}
+                                        className={`w-9 h-9 inline-block bg-${user.profile.color ?? 'white dark:bg-dark'
+                                            } rounded-full`}
                                     />
                                     <div className="absolute bottom-0 right-0 translate-x-1/2">
                                         <Notifications />
@@ -740,8 +740,8 @@ export const Mobile = () => {
                             <Link
                                 to={url}
                                 className={`text-[12.5px] font-medium relative px-4 py-4 flex flex-col space-y-1 items-center ${active
-                                        ? 'bg-light dark:bg-dark font-bold px-[calc(1rem_+_10px)] mx-[-10px]'
-                                        : 'opacity-70 hover:opacity-100'
+                                    ? 'bg-light dark:bg-dark font-bold px-[calc(1rem_+_10px)] mx-[-10px]'
+                                    : 'opacity-70 hover:opacity-100'
                                     }`}
                             >
                                 {active && <ActiveBackground mobile />}

src/components/Pipelines/index.js

@@ -245,7 +245,7 @@ function PipelinesPage({ location }) {
                 </div>
             </div>
 
-            <div className="@container max-w-screen-2xl px-5 mx-auto grid md:grid-cols-4 py-12">
+            <div className="@container max-w-screen-2xl px-5 mx-auto grid md:grid-cols-4 py-12 relative">
                 <div className="md:col-span-4 md:mb-4">
                     <h2 className="text-center text-2xl lg:text-4xl">Sources &amp; destinations library</h2>
 
@@ -255,7 +255,7 @@ function PipelinesPage({ location }) {
                             value={searchValue}
                             onChange={(e) => setSearchValue(e.target.value)}
                             className="bg-transparent w-full border-none outline-none"
-                            placeholder="Search destinations"
+                            placeholder="Search sources & destinations"
                         />
                     </div>
                 </div>

src/components/Products/Hero/index.tsx

@@ -19,7 +19,7 @@ export const Hero = ({ color, icon, beta, product, title, description }: HeroPro
                 <span className={`w-6 h-6 text-${color}`}>{icon}</span>
                 <span className="text-[15px] font-semibold text-opacity-60">{product}</span>
                 {beta && (
-                    <span className="text-xs font-semibold text-opacity-60 bg-yellow px-1 py-0.5 rounded-sm uppercase">
+                    <span className="text-xs font-semibold text-opacity-60 bg-yellow px-1 py-0.5 rounded-sm uppercase text-primary">
                         Beta
                     </span>
                 )}