feat/Who's using tRPC

www/README.md

@@ -41,3 +41,7 @@ We use `@vercel/og-image` for dynamic open graph image generation. They are depl
 To use the dynamic images, we override the default Docusaurus theme using [`swizzling`](https://www.docusaurus.io/docs/swizzling). You can find these overrides in [src/theme/\*\*](./src/theme).
 
 To play with them locally go the `og-image` folder and run `pnpm dev`.
+
+## Company logos
+
+We store a list of company logos in the `www/static/img/logos/*` folder to show on the landing page. To add future logos, simply add the png/svg to the folder, and then add it to the `www/src/components/companies.ts` map with the key of the company name and the value of the logo file location. Be sure to normalize your logos, and consider running them though an optimizer tool like [SVGOMG](https://jakearchibald.github.io/svgomg/). Finally, ensure that they have a set width and height.

www/src/components/CompaniesUsing.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { companyLogos } from './companies';
+import { SectionTitle } from './SectionTitle';
+
+const animationRow = Array(2).fill(0) as [number, number];
+
+/**
+ * An animated logo carousel to show companies using tRPC. Tailwind code taken from Cruip
+ * @see https://cruip.com/create-an-infinite-horizontal-scroll-animation-with-tailwind-css/
+ */
+export const CompaniesUsing = () => {
+  return (
+    <>
+      <SectionTitle
+        id="companies-using"
+        title="As used by"
+        description="tRPC is tried and trusted by leading tech teams."
+      />
+      <div className="my-6 inline-flex w-full flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_128px,_black_calc(100%-200px),transparent_100%)]">
+        {animationRow.map((_, index) => (
+          <ul
+            key={`animationRow${index}`}
+            className="flex animate-infinite-scroll items-center justify-center md:justify-start [&_img]:max-w-none [&_li]:mx-8"
+            aria-hidden={index > 0}
+          >
+            {Object.entries(companyLogos).map(([key, value]) => (
+              <li key={key}>
+                <img src={value} alt={key} className="max-h-9 dark:invert" />
+              </li>
+            ))}
+          </ul>
+        ))}
+      </div>
+    </>
+  );
+};

www/src/components/companies.ts

@@ -0,0 +1,12 @@
+export const companyLogos: Record<string, string> = {
+  netflix: './img/logos/netflix.svg',
+  newfront: './img/logos/newfront.svg',
+  cal: './img/logos/calcom.svg',
+  ping: './img/logos/ping.svg',
+  pleo: './img/logos/pleo.svg',
+  snaplet: './img/logos/snaplet.svg',
+  napo: './img/logos/napo.svg',
+  documenso: './img/logos/documenso.png',
+  fintory: './img/logos/fintory.svg',
+  algora: './img/logos/algora.svg',
+};

www/src/pages/index.tsx

@@ -9,6 +9,7 @@ import React, { useEffect } from 'react';
 import { FiArrowRight } from 'react-icons/fi';
 import { popIn } from '../animations/popIn';
 import { Button } from '../components/Button';
+import { CompaniesUsing } from '../components/CompaniesUsing';
 import { Features } from '../components/Features';
 import { GithubSponsorButton } from '../components/GithubSponsorButton';
 import { GithubStarsButton } from '../components/GithubStarsButton';
@@ -283,6 +284,10 @@ const HomeContent: React.FC = () => {
         <TryItOut />
       </section>
 
+      <section>
+        <CompaniesUsing />
+      </section>
+
       <section className="mx-auto max-w-[80ch] px-6 md:px-0">
         <SectionTitle
           id="quote"