Merge branch 'linaria'

Author: pimterry

next.config.js

@@ -1,3 +1,4 @@
+const withLinaria = require('next-with-linaria');
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
@@ -23,10 +24,7 @@ const nextConfig = {
   experimental: {
     optimizePackageImports: ['@phosphor-icons/react', '@httptoolkit/accounts'],
   },
-  compiler: {
-    styledComponents: true,
-  },
-  // Configure `pageExtensions` to include MDX files
+// Configure `pageExtensions` to include MDX files
   pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
   trailingSlash: true,
   webpack(config) {
@@ -45,4 +43,4 @@ const nextConfig = {
   },
 };
 
-module.exports = withBundleAnalyzer(nextConfig);
+module.exports = withBundleAnalyzer(withLinaria(nextConfig));

package-lock.json

@@ -28,10 +28,14 @@
     "@docsearch/react": "^3.6.0",
     "@httptoolkit/accounts": "^3.0.1",
     "@httptoolkit/util": "^0.1.5",
+    "@linaria/core": "^7.0.0",
+    "@linaria/react": "^7.0.1",
     "@phosphor-icons/react": "^2.1.4",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@wyw-in-js/babel-preset": "^1.0.6",
+    "@wyw-in-js/transform": "^1.0.6",
     "core-js": "^3.47.0",
     "date-fns": "^1.29.0",
     "fs-extra": "^6.0.0",
@@ -45,6 +49,7 @@
     "next-mdx-remote": "^4.4.1",
     "next-sitemap": "^4.2.3",
     "next-themes": "^0.2.1",
+    "next-with-linaria": "^1.3.0",
     "posthog-js": "^1.188.1",
     "prismjs": "^1.27.0",
     "react": "^18.2.0",
@@ -56,8 +61,6 @@
     "react-use": "^17.5.0",
     "react-use-clipboard": "^1.0.9",
     "server-only": "^0.0.1",
-    "styled-components": "^6.1.8",
-    "styled-reset": "^4.5.2",
     "vaul": "^0.9.0"
   },
   "devDependencies": {

package.json

@@ -22,12 +22,12 @@ export default async function CharlesAlternativePage() {
         video={{id: 'chrome'}}
       />
       <IntegrationCTA
-        $variant="cta"
+        variant="cta"
         title="One-click setup integrations for every tool you use"
         text={["HTTP Toolkit includes one-click automated setup to provide precisely targeted interception of individual mobile apps, browsers, terminal windows, Docker containers & more."]}
         button={{
-          $small: true,
-          $variant: 'secondary',
+          small: true,
+          variant: 'secondary',
           children: 'See all integrations',
           href: '/all-integrations',
         }}

src/app/(alternatives)/charles-alternative/page.tsx

@@ -21,12 +21,12 @@ export default async function ChromeDevToolsAlternativePage() {
         video={{id: 'chrome'}}
       />
       <IntegrationCTA
-        $variant="cta"
+        variant="cta"
         title="One-click setup integrations for every tool you use"
         text={["HTTP Toolkit includes one-click automated setup to provide precisely targeted interception of individual browser windows, mobile apps, terminal sessions, Docker containers & more."]}
         button={{
-          $small: true,
-          $variant: 'secondary',
+          small: true,
+          variant: 'secondary',
           children: 'See all integrations',
           href: '/all-integrations',
         }}

src/app/(alternatives)/chrome-devtools-alternative/page.tsx

@@ -21,12 +21,12 @@ export default async function FiddlerPage() {
         video={{id: 'chrome'}}
       />
       <IntegrationCTA
-        $variant="cta"
+        variant="cta"
         title="One-click setup integrations for every tool you use"
         text={["HTTP Toolkit includes one-click automated setup to provide precisely targeted interception of individual mobile apps, browsers, terminal windows, Docker containers & more."]}
         button={{
-          $small: true,
-          $variant: 'secondary',
+          small: true,
+          variant: 'secondary',
           children: 'See all integrations',
           href: '/all-integrations',
         }}

src/app/(alternatives)/fiddler-alternative/page.tsx

@@ -29,31 +29,31 @@ export default function AndroidIntegrationPage() {
         subtitle="what is http toolkit?"
         cards={[
           {
-            $variant: 'default',
+            variant: 'default',
             title: 'Get started instantly',
             text: 'No messing around with certificate files and wifi settings.\n\nClick the button, accept permissions, start capturing traffic, toggle off & on again in one tap.\n\nGet straight to the data with zero hassle.',
             icon: RocketLaunch,
           },
           {
-            $variant: 'default',
+            variant: 'default',
             title: "Flexible setup for every environment",
             text: 'Setup automatically using ADB or by scanning a QR code.\n\nIntercept the entire device, or target just a single app.\n\nSupports Android versions from Android Lollipop (v5 / API level 21+) through to the latest releases.',
             icon: Wrench,
           },
           {
-            $variant: 'default',
+            variant: 'default',
             title: 'Capture & inspect encrypted HTTPS',
             text: 'Immediately view HTTPS on any device for apps that trust user-installed certificates, like Chrome, or your own app with a tiny manifest change.\n\nOn emulators & rooted devices, easily intercept HTTPS from any app, with automatic injection of a system certificate authority and automatic certificate unpinning powered by built-in Frida integration.',
             icon: SealCheck,
           },
           {
-            $variant: 'default',
+            variant: 'default',
             title: 'See all your Android HTTP',
             text: 'Powered by Android\'s VPN APIs and built-in Frida support, HTTP Toolkit intercepts everything, even HTTP traffic from apps that try to ignore your system proxy settings.',
             icon: MagnifyingGlass,
           },
           {
-            $variant: 'highlighted',
+            variant: 'highlighted',
             title: 'Want the full details?',
             text: 'Take a look at the in-depth guide to Android HTTP debugging.',
             buttonText: 'Learn more',

src/app/(integrations)/android/page.tsx

@@ -24,7 +24,7 @@ export default function PricingPage() {
         withDownload={false}
       >
         <Suspense>
-          <PricingPlans downloadButton={<DownloadButton />} $hideFree />
+          <PricingPlans downloadButton={<DownloadButton />} hideFree />
         </Suspense>
       </CTA>
     </>

src/app/(pricing)/get-pro/page.tsx

@@ -25,8 +25,8 @@ export default function PricingLayout({ children }: { children: React.ReactNode
         title="Frequently Asked Questions"
         text=""
         cta={{
-          $small: true,
-          $variant: 'secondary',
+          small: true,
+          variant: 'secondary',
           children: 'See more FAQs',
           icon: CaretRight,
           as: 'link',

src/app/(pricing)/layout.tsx

@@ -1,5 +1,5 @@
-import type { PricingComparisonProps } from '@/components/sections/pricing/comparison/comparison.types';
-import type { TextWithAccordionProps } from '@/components/sections/text-with-accordion/text-with-accordion.types';
+import type { PricingComparisonProps } from '@/components/sections/pricing/comparison';
+import type { TextWithAccordionProps } from '@/components/sections/text-with-accordion';
 
 export const comparisonPlans: PricingComparisonProps['plans'] = [
   {