Remove local author images (#9552)

* remove author images * use start date * remove placeholders * og * og images --------- Co-authored-by: Cory Watilo <[email protected]>
PostHog · Oct 16, 2024 · 5afbd92 · 5afbd92
1 parent ef943a7
commit 5afbd92
Show file tree

Hide file tree

Showing 51 changed files with 122 additions and 647 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -115,13 +115,6 @@ module.exports = {
                 path: `${__dirname}/src/data/testimonials.json`,
             },
         },
-        {
-            resolve: `gatsby-source-filesystem`,
-            options: {
-                name: `authorImages`,
-                path: `${__dirname}/static/images/authors`,
-            },
-        },
         {
             resolve: `gatsby-source-strapi-pages`,
             options: {

diff --git a/gatsby/onPostBuild.ts b/gatsby/onPostBuild.ts
@@ -324,8 +324,10 @@ export const onPostBuild: GatsbyNode['onPostBuild'] = async ({ graphql }) => {
                         authorData {
                             name
                             role
-                            image {
-                                absolutePath
+                            profile {
+                                avatar {
+                                    url
+                                }
                             }
                         }
                     }
@@ -467,9 +469,9 @@ export const onPostBuild: GatsbyNode['onPostBuild'] = async ({ graphql }) => {
         const author =
             authorData &&
             authorData.map((author) => {
-                const image = fs.readFileSync(author.image.absolutePath, {
-                    encoding: 'base64',
-                })
+                const image =
+                    author.profile?.avatar?.url ||
+                    `https://res.cloudinary.com/dmukukwp6/image/upload/contributor_posthog_e8c595ea3d.png`
                 return {
                     ...author,
                     image,

diff --git a/plugins/gatsby-source-squeak/gatsby-node.ts b/plugins/gatsby-source-squeak/gatsby-node.ts
@@ -15,10 +15,8 @@ export const sourceNodes: GatsbyNode['sourceNodes'] = async (
         let profileQuery = qs.stringify(
             {
                 filters: {
-                    teams: {
-                        id: {
-                            $notNull: true,
-                        },
+                    startDate: {
+                        $notNull: true,
                     },
                 },
                 pagination: {

diff --git a/src/components/Blog/index.tsx b/src/components/Blog/index.tsx
@@ -23,6 +23,11 @@ interface IPost {
     authors: {
         name: string
         image: ImageDataLike
+        profile: {
+            avatar?: {
+                url: string
+            }
+        }
     }[]
     imgClassName?: string
 }
@@ -44,10 +49,10 @@ export const Post = ({ featuredImage, slug, title, category, date, authors, imgC
                     </h3>
                     <p className="m-0 !text-sm font-light mt-1">{date}</p>
                     <ul className="list-none m-0 p-0 mt-auto space-x-4 hidden md:flex">
-                        {authors?.slice(0, 2).map(({ name, image }) => {
+                        {authors?.slice(0, 2).map(({ name, image, profile }) => {
                             return (
                                 <li className="flex space-x-2 items-center" key={name}>
-                                    <Avatar image={image} />
+                                    <Avatar url={profile?.avatar?.url} image={image} />
                                     <span>{name}</span>
                                 </li>
                             )
@@ -217,9 +222,9 @@ export const BlogFragment = graphql`
                 role
                 link_type
                 link_url
-                image {
-                    childImageSharp {
-                        gatsbyImageData(width: 30, height: 30)
+                profile {
+                    avatar {
+                        url
                     }
                 }
             }

diff --git a/src/components/Careers/SmallTeams/index.tsx b/src/components/Careers/SmallTeams/index.tsx
@@ -9,7 +9,7 @@ import slugify from 'slugify'
 import CloudinaryImage from 'components/CloudinaryImage'
 
 export const SmallTeams = () => {
-  const { allTeams } = useStaticQuery(graphql`
+    const { allTeams } = useStaticQuery(graphql`
         {
             allTeams: allSqueakTeam(filter: { name: { ne: "Hedgehogs" }, crest: { publicId: { ne: null } } }) {
                 nodes {
@@ -21,72 +21,78 @@ export const SmallTeams = () => {
                         }
                     }
                     crest {
-                        gatsbyImageData(width: 200, height: 200, placeholder: BLURRED)
+                        gatsbyImageData(width: 200, height: 200)
                     }
                     miniCrest {
-                        gatsbyImageData(width: 64, height: 64, placeholder: BLURRED)
+                        gatsbyImageData(width: 64, height: 64)
                     }
                 }
             }
         }
     `)
 
-  return (
-    <div className="px-4 max-w-7xl mx-auto mb-6 md:mb-12 flex justify-center 2xl:px-8">
-      <div className="flex flex-col md:flex-row md:gap-8 w-full">
-        <div className="flex-1">
-          <h2 className="text-5xl font-bold mb-4">
-            Join a startup <em className="text-red dark:text-yellow block">within a startup</em>
-          </h2>
-          <div className="max-w-xl">
-            <p>
-              Starting a job at a company of 50+ people can be intimidating!
-            </p>
-            <p>With our <Link to="/handbook/company/small-teams">small teams</Link> structure, it's like working at a startup <em>within</em> a startup. This allows each team to operate as autonomously as possible.</p>
+    return (
+        <div className="px-4 max-w-7xl mx-auto mb-6 md:mb-12 flex justify-center 2xl:px-8">
+            <div className="flex flex-col md:flex-row md:gap-8 w-full">
+                <div className="flex-1">
+                    <h2 className="text-5xl font-bold mb-4">
+                        Join a startup <em className="text-red dark:text-yellow block">within a startup</em>
+                    </h2>
+                    <div className="max-w-xl">
+                        <p>Starting a job at a company of 50+ people can be intimidating!</p>
+                        <p>
+                            With our <Link to="/handbook/company/small-teams">small teams</Link> structure, it's like
+                            working at a startup <em>within</em> a startup. This allows each team to operate as
+                            autonomously as possible.
+                        </p>
 
-            <p>Many of our team members are former founders. Here they can focus on building great products without the distraction of running payroll, fundraising, etc - while still enjoying huge upside potential.</p>
-          </div>
-        </div>
+                        <p>
+                            Many of our team members are former founders. Here they can focus on building great products
+                            without the distraction of running payroll, fundraising, etc - while still enjoying huge
+                            upside potential.
+                        </p>
+                    </div>
+                </div>
 
-        <div>
-          <h3 className="text-base font-bold mb-2 md:ml-4 pt-1">Our small teams</h3>
-          <div className="grid grid-cols-2 text-center max-w-xl -mx-4 md:mx-0 md:gap-x-8">
-            {allTeams.nodes.map(({ id, name, profiles, miniCrest, leadProfiles }) => {
-              const gatsbyImageMiniCrest = getImage(miniCrest)
-              return (
-                <Link
-                  to={`/teams/${slugify(name.toLowerCase().replace('ops', ''), {
-                    remove: /and/,
-                  })}`}
-                  key={id}
-                  className="items-start md:items-center text-left flex gap-2 w-full px-2 py-1 rounded-md border border-b-3 hover:bg-white/50 hover:dark:bg-accent-dark border-transparent md:hover:border-light dark:md:hover:border-dark hover:translate-y-[-1px] active:translate-y-[1px] active:transition-all"
-                >
-                  <div className="size-8">
-                    {gatsbyImageMiniCrest ? (
-                      <GatsbyImage
-                        image={gatsbyImageMiniCrest}
-                        alt={`${name} Team`}
-                        className="size-8"
-                      />
-                    ) : (
-                      <CloudinaryImage
-                        alt={`${name} Team`}
-                        className="size-8"
-                        src="https://res.cloudinary.com/dmukukwp6/image/upload/crest_mini_default_def12aa14a.png"
-                      />
-                    )}
-                  </div>
-                  <div className="flex-1">
-                    <h3 className="text-sm md:text-[15px] my-0 pt-1.5 md:pt-0 leading-snug text-primary dark:text-primary-dark font-semibold">
-                      {name} Team
-                    </h3>
-                  </div>
-                </Link>
-              )
-            })}
-          </div>
+                <div>
+                    <h3 className="text-base font-bold mb-2 md:ml-4 pt-1">Our small teams</h3>
+                    <div className="grid grid-cols-2 text-center max-w-xl -mx-4 md:mx-0 md:gap-x-8">
+                        {allTeams.nodes.map(({ id, name, profiles, miniCrest, leadProfiles }) => {
+                            const gatsbyImageMiniCrest = getImage(miniCrest)
+                            return (
+                                <Link
+                                    to={`/teams/${slugify(name.toLowerCase().replace('ops', ''), {
+                                        remove: /and/,
+                                    })}`}
+                                    key={id}
+                                    className="items-start md:items-center text-left flex gap-2 w-full px-2 py-1 rounded-md border border-b-3 hover:bg-white/50 hover:dark:bg-accent-dark border-transparent md:hover:border-light dark:md:hover:border-dark hover:translate-y-[-1px] active:translate-y-[1px] active:transition-all"
+                                >
+                                    <div className="size-8">
+                                        {gatsbyImageMiniCrest ? (
+                                            <GatsbyImage
+                                                image={gatsbyImageMiniCrest}
+                                                alt={`${name} Team`}
+                                                className="size-8"
+                                            />
+                                        ) : (
+                                            <CloudinaryImage
+                                                alt={`${name} Team`}
+                                                className="size-8"
+                                                src="https://res.cloudinary.com/dmukukwp6/image/upload/crest_mini_default_def12aa14a.png"
+                                            />
+                                        )}
+                                    </div>
+                                    <div className="flex-1">
+                                        <h3 className="text-sm md:text-[15px] my-0 pt-1.5 md:pt-0 leading-snug text-primary dark:text-primary-dark font-semibold">
+                                            {name} Team
+                                        </h3>
+                                    </div>
+                                </Link>
+                            )
+                        })}
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  )
+    )
 }
diff --git a/src/components/CommunityQuestions/Avatar.js b/src/components/CommunityQuestions/Avatar.js
@@ -1,11 +1,16 @@
+import CloudinaryImage from 'components/CloudinaryImage'
 import { GatsbyImage, getImage } from 'gatsby-plugin-image'
 import React from 'react'
 
-export default function Avatar({ image }) {
+export default function Avatar({ image, url }) {
     return (
         <div className="bg-gray-accent-light dark:bg-gray-accent-dark rounded-full w-[30px] h-[30px] overflow-hidden flex-shrink-0">
-            {image ? (
-                <GatsbyImage className="w-[30px] h-[30px]" image={getImage(image)} />
+            {image || url ? (
+                url ? (
+                    <CloudinaryImage width={60} src={url} />
+                ) : (
+                    <GatsbyImage className="w-[30px] h-[30px]" image={getImage(image)} />
+                )
             ) : (
                 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path

diff --git a/src/components/PostLayout/Contributors.tsx b/src/components/PostLayout/Contributors.tsx
@@ -4,6 +4,7 @@ import { GatsbyImage, getImage } from 'gatsby-plugin-image'
 import React from 'react'
 import { IContributor } from './types'
 import { Image, Transformation } from 'cloudinary-react'
+import CloudinaryImage from 'components/CloudinaryImage'
 
 const isCloudinaryImage = (url: string): boolean => {
     const cloudinaryUrlPattern = new RegExp(`https://res.cloudinary.com/${process.env.GATSBY_CLOUDINARY_CLOUD_NAME}/`)
@@ -73,7 +74,11 @@ export const ContributorImage = ({ image, name, compact, rounded }) => {
             }`}
         >
             {typeof image === 'string' ? (
-                <img className={compact ? 'absolute w-full h-full object-cover' : 'w-24 h-24'} src={image} />
+                <CloudinaryImage
+                    width={200}
+                    className={compact ? 'absolute w-full h-full object-cover' : 'w-24 h-24'}
+                    src={image}
+                />
             ) : gatsbyImage ? (
                 <GatsbyImage
                     image={gatsbyImage}

diff --git a/src/components/Tutorials/index.tsx b/src/components/Tutorials/index.tsx
@@ -61,9 +61,9 @@ export const tutorialsFragment = graphql`
             Category: tags
             Contributor: authorData {
                 id
-                image {
-                    childImageSharp {
-                        gatsbyImageData(width: 36, height: 36)
+                profile {
+                    avatar {
+                        url
                     }
                 }
                 name

diff --git a/src/components/TutorialsSlider/index.tsx b/src/components/TutorialsSlider/index.tsx
@@ -32,15 +32,6 @@ export const query = graphql`
                 frontmatter {
                     title
                     tags
-                    authors: authorData {
-                        id
-                        image {
-                            childImageSharp {
-                                gatsbyImageData(width: 36, height: 36)
-                            }
-                        }
-                        name
-                    }
                     featuredImage {
                         childImageSharp {
                             gatsbyImageData(width: 514, height: 289)