Use slim Posthog & updated Phosphor to shrink bundle

Author: pimterry

next.config.js

@@ -39,6 +39,9 @@ const nextConfig = {
       ],
     });
 
+    // Use PostHog slim bundle (strips toolbar, session recording, surveys, etc.)
+    config.resolve.alias['posthog-js$'] = require.resolve('posthog-js/dist/module.slim');
+
     return config;
   },
 };

package-lock.json

@@ -30,7 +30,7 @@
     "@httptoolkit/util": "^0.1.5",
     "@linaria/core": "^7.0.0",
     "@linaria/react": "^7.0.1",
-    "@phosphor-icons/react": "^2.1.4",
+    "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-tooltip": "^1.0.7",
@@ -50,7 +50,7 @@
     "next-sitemap": "^4.2.3",
     "next-themes": "^0.2.1",
     "next-with-linaria": "^1.3.0",
-    "posthog-js": "^1.188.1",
+    "posthog-js": "^1.359.1",
     "prismjs": "^1.27.0",
     "react": "^18.2.0",
     "react-countup": "^6.5.0",

package.json

@@ -28,7 +28,7 @@ export const TestimonialsCard = ({
 
   return (
     <StyledTestimonialCard cite={sourceLink}>
-      <StyledQuote dangerouslySetInnerHTML={{ __html: marked.parse(quote, { renderer }) }} />
+      <StyledQuote dangerouslySetInnerHTML={{ __html: marked.parse(quote, { renderer }) as string }} />
       <StyledAuthorWrapper>
         <IconAvatar icon={type} />
         <StyledAuthorDetails>

src/components/common-sections/testimonials/components/testimonials-card.tsx

@@ -194,7 +194,7 @@ export const Accordion = ({ items, variant = 'default', isBiggerIcon }: Accordio
             <StyledAccordionContent>
               <div
                 className="accordion_content_inner"
-                dangerouslySetInnerHTML={{ __html: marked.parse(item.text, { renderer }) }}
+                dangerouslySetInnerHTML={{ __html: marked.parse(item.text, { renderer }) as string }}
               />
             </StyledAccordionContent>
           </StyledAccordionItem>

src/components/modules/accordion/index.tsx

@@ -107,7 +107,7 @@ export const FluidCard = ({ title, icon, text, buttonHref, buttonText, variant =
         </Heading>
         <StyledFluidCardText
           data-variant={variant}
-          dangerouslySetInnerHTML={{ __html: marked.parse(text, { renderer }) }}
+          dangerouslySetInnerHTML={{ __html: marked.parse(text, { renderer }) as string }}
         />
       </StyledFluidCardContentWrapper>
       {buttonText && buttonHref && (

src/components/modules/fluid-card/index.tsx

@@ -48,7 +48,7 @@ export const HeroPoints = ({ title, text }: HeroPointsProps) => {
         <Heading fontSize="l" color="textGradient">
           {title}
         </Heading>
-        <StyledHeroPointsContent dangerouslySetInnerHTML={{ __html: marked.parse(text) }} />
+        <StyledHeroPointsContent dangerouslySetInnerHTML={{ __html: marked.parse(text) as string }} />
       </Container>
     </StyledHeroPointsWrapper>
   );

src/components/sections/hero-points/index.tsx

@@ -173,7 +173,7 @@ const FeatureList = ({ feature, isHighlighted }: FeatureListProps) => {
               style={{ '--item-color': textColors[itemColor as keyof typeof textColors] } as React.CSSProperties}
             >
               <CheckIcon />
-              <span dangerouslySetInnerHTML={{ __html: marked.parse(item, { renderer }) }} />
+              <span dangerouslySetInnerHTML={{ __html: marked.parse(item, { renderer }) as string }} />
             </StyledPriceCardFeatureItemLI>
           ))}
       </StyledPriceCardFeatureItemsWrapper>

src/components/sections/pricing/plans/components/card/index.tsx

@@ -121,7 +121,7 @@ export const TextSlot = ({ title, copy, texts, children, buttons, textCenteredOn
           texts.map(text => (
             <StyledTextSlotText
               data-text-centered={textCenteredOnMobile ? 'true' : undefined}
-              dangerouslySetInnerHTML={{ __html: marked.parse(text) }}
+              dangerouslySetInnerHTML={{ __html: marked.parse(text) as string }}
             />
           ))}
         <StyledTextSlotButtonsWrapper>