Migrate to TypeScript

components/authors.js → components/authors.tsx

@@ -1,19 +1,22 @@
-export default function Authors({ date, children, by = "by" }) {
+export default function Authors({
+  date,
+  children,
+  by = "by",
+}: React.PropsWithChildren<{ date: string; by?: string }>) {
   return (
     <div className="mt-4 mb-16 text-gray-500 text-sm">
       {date} {by} {children}
     </div>
   );
 }
 
-export function Author({ name, link }) {
+export function Author({ name, link }: { name: string; link: string }) {
   return (
     <span className="after:content-[','] last:after:content-['']">
       <a
         key={name}
         href={link}
         target="_blank"
-        // style={{ textUnderlinePosition: "under" }}
         className="mx-1 text-current underline [text-underline-position:from-font] decoration-from-font"
       >
         {name}

components/blog-index.tsx

@@ -0,0 +1,39 @@
+import type { FrontMatter, Page } from "nextra";
+import { getPagesUnderRoute } from "nextra/context";
+import Link from "next/link";
+
+export default function BlogIndex({ more = "Read more" }: { more?: string }) {
+  return getPagesUnderRoute("/blog").map(
+    (page: Page & { frontMatter?: FrontMatter }) => {
+      return (
+        <div key={page.route} className="mb-10">
+          <h3>
+            <Link
+              href={page.route}
+              style={{ color: "inherit", textDecoration: "none" }}
+              className="block font-semibold mt-8 text-2xl "
+            >
+              {page.meta?.title || page.frontMatter?.title || page.name}
+            </Link>
+          </h3>
+          <p className="opacity-80 mt-6 leading-7">
+            {page.frontMatter?.description}{" "}
+            <span className="inline-block">
+              <Link
+                href={page.route}
+                className="text-[color:hsl(var(--nextra-primary-hue),100%,50%)] underline underline-offset-2 decoration-from-font"
+              >
+                {more + " →"}
+              </Link>
+            </span>
+          </p>
+          {page.frontMatter?.date ? (
+            <p className="opacity-50 text-sm mt-6 leading-7">
+              {page.frontMatter.date}
+            </p>
+          ) : null}
+        </div>
+      );
+    }
+  );
+}

components/diagrams/cache.js → components/diagrams/cache.tsx

@@ -1,11 +1,15 @@
 import useLocalesMap from "../use-locales-map";
 import { diagramCachePathsMap } from "../../translations/svgs";
 
-export const Cache = () => {
+export const Cache: React.FC<React.SVGProps<SVGSVGElement>> = ({
+  className,
+  ...props
+}) => {
   const paths = useLocalesMap(diagramCachePathsMap);
+  const cn = [className, "invert-on-dark"].filter(Boolean).join(" ");
 
   return (
-    <svg viewBox="0 0 588 311" fill="none" className="invert-on-dark">
+    <svg viewBox="0 0 588 311" fill="none" className={cn} {...props}>
       <path stroke="#D2D2D2" d="M22.5 59.5h543v232h-543z" />
       <path fill="#fff" d="M40 43h116v33H40z" />
       <path fill="#141414" d={paths.firstCacheProvider} />

components/diagrams/infinite.js → components/diagrams/infinite.tsx

@@ -1,11 +1,15 @@
 import useLocalesMap from "../use-locales-map";
 import { diagramInfinitePathMap } from "../../translations/svgs";
 
-export const Infinite = () => {
+export const Infinite: React.FC<React.SVGProps<SVGSVGElement>> = ({
+  className,
+  ...props
+}) => {
   const path = useLocalesMap(diagramInfinitePathMap);
+  const cn = [className, "invert-on-dark"].filter(Boolean).join(" ");
 
   return (
-    <svg viewBox="0 0 769 356" fill="none" className="invert-on-dark">
+    <svg viewBox="0 0 769 356" fill="none" className={cn} {...props}>
       <path
         d="M5 0.5H763C765.485 0.5 767.5 2.51472 767.5 5V351C767.5 353.485 765.485 355.5 763 355.5H5.00002C2.51473 355.5 0.5 353.485 0.5 351V5C0.5 2.51472 2.51472 0.5 5 0.5Z"
         fill="white"

components/diagrams/pagination.js → components/diagrams/pagination.tsx

@@ -1,11 +1,15 @@
 import useLocalesMap from "../use-locales-map";
 import { diagramPaginationPathsMap } from "../../translations/svgs";
 
-export const Pagination = () => {
+export const Pagination: React.FC<React.SVGProps<SVGSVGElement>> = ({
+  className,
+  ...props
+}) => {
   const paths = useLocalesMap(diagramPaginationPathsMap);
+  const cn = [className, "invert-on-dark"].filter(Boolean).join(" ");
 
   return (
-    <svg viewBox="0 0 769 356" fill="none" className="invert-on-dark">
+    <svg viewBox="0 0 769 356" fill="none" className={cn} {...props}>
       <path
         d="M5 0.5H763C765.485 0.5 767.5 2.51472 767.5 5V351C767.5 353.485 765.485 355.5 763 355.5H5.00002C2.51473 355.5 0.5 353.485 0.5 351V5C0.5 2.51472 2.51472 0.5 5 0.5Z"
         fill="white"

components/diagrams/welcome.js → components/diagrams/welcome.tsx

@@ -1,11 +1,15 @@
 import useLocalesMap from "../use-locales-map";
 import { diagramWelcomePathMap } from "../../translations/svgs";
 
-export const Welcome = () => {
+export const Welcome: React.FC<React.SVGProps<SVGSVGElement>> = ({
+  className,
+  ...props
+}) => {
   const path = useLocalesMap(diagramWelcomePathMap);
+  const cn = [className, "invert-on-dark"].filter(Boolean).join(" ");
 
   return (
-    <svg fill="none" viewBox="0 0 769 193" className="invert-on-dark">
+    <svg fill="none" viewBox="0 0 769 193" className={cn} {...props}>
       <path fill="#fff" d="M0 0h768v193H0z" />
       <mask
         id="a"

components/features.tsx

@@ -0,0 +1,52 @@
+import { useId } from "react";
+import useLocalesMap from "./use-locales-map";
+import { type FeatureKey, featuresMap, titleMap } from "../translations/text";
+
+import BackendAgnosticIcon from "./icons/backend-agnostic";
+import LightweightIcon from "./icons/lightweight";
+import PaginationIcon from "./icons/pagination";
+import RealtimeIcon from "./icons/realtime";
+import RemoteLocalIcon from "./icons/remote-local";
+import RenderingStrategiesIcon from "./icons/rendering-strategies";
+import SuspenseIcon from "./icons/suspense";
+import TypeScriptIcon from "./icons/typescript";
+
+type Icon = React.FC<React.SVGProps<SVGSVGElement>>;
+
+const FEATURE_ICONS: Record<FeatureKey, Icon> = {
+  lightweight: LightweightIcon,
+  realtime: RealtimeIcon,
+  suspense: SuspenseIcon,
+  pagination: PaginationIcon,
+  backendAgnostic: BackendAgnosticIcon,
+  renderingStrategies: RenderingStrategiesIcon,
+  typescript: TypeScriptIcon,
+  remoteLocal: RemoteLocalIcon,
+};
+
+export default function Features() {
+  const componentId = useId();
+  const title = useLocalesMap(titleMap);
+  const features = useLocalesMap(featuresMap);
+
+  return (
+    <div className="mx-auto max-w-full w-[880px] text-center px-4 mb-10">
+      <p className="text-lg mb-2 text-gray-600 md:!text-2xl">{title}</p>
+      <div className="grid grid-cols-2 gap-y-4 gap-x-2 mt-10 mx-0 mb-8 sm:grid-cols-4 md:gap-x-8">
+        {Object.entries(FEATURE_ICONS).map(
+          ([key, FeatureIcon]: [FeatureKey, Icon]) => (
+            <div
+              className="inline-flex justify-center items-center md:justify-start pl-0"
+              key={componentId + key}
+            >
+              <FeatureIcon className="w-5 h-6 min-w-[20px] stroke-[2.5px] md:w-6" />
+              <h4 className="text-sm my-0 mr-0 ml-2 font-bold whitespace-nowrap sm:text-[0.9rem] md:text-lg">
+                {features[key]}
+              </h4>
+            </div>
+          )
+        )}
+      </div>
+    </div>
+  );
+}

components/icons/backend-agnostic.js → components/icons/backend-agnostic.tsx

@@ -1,4 +1,6 @@
-export default function BackendAgnosticIcon() {
+export default function BackendAgnosticIcon(
+  props: React.SVGProps<SVGSVGElement>
+) {
   return (
     <svg
       viewBox="0 0 24 24"
@@ -10,6 +12,7 @@ export default function BackendAgnosticIcon() {
       strokeLinejoin="round"
       fill="none"
       shapeRendering="geometricPrecision"
+      {...props}
     >
       <path d="M20 17.58A5 5 0 0018 8h-1.26A8 8 0 104 16.25" />
       <path d="M8 16h.01" />

components/icons/lightweight.js → components/icons/lightweight.tsx

@@ -1,4 +1,4 @@
-export default function LightweightIcon() {
+export default function LightweightIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       viewBox="0 0 24 24"
@@ -9,6 +9,7 @@ export default function LightweightIcon() {
       fill="none"
       strokeLinecap="round"
       strokeLinejoin="round"
+      {...props}
     >
       <path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z" />
       <line x1="16" y1="8" x2="2" y2="22" />

components/icons/pagination.js → components/icons/pagination.tsx

@@ -1,4 +1,4 @@
-export default function PaginationIcon() {
+export default function PaginationIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       viewBox="0 0 24 24"
@@ -9,6 +9,7 @@ export default function PaginationIcon() {
       fill="none"
       strokeLinecap="round"
       strokeLinejoin="round"
+      {...props}
     >
       <circle cx="12" cy="12" r="1" />
       <circle cx="12" cy="5" r="1" />

components/icons/realtime.js → components/icons/realtime.tsx

@@ -1,4 +1,4 @@
-export default function RealtimeIcon() {
+export default function RealtimeIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       width="24"
@@ -10,6 +10,7 @@ export default function RealtimeIcon() {
       strokeWidth="2"
       shapeRendering="geometricPrecision"
       viewBox="0 0 24 24"
+      {...props}
     >
       <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
     </svg>

components/icons/remote-local.js → components/icons/remote-local.tsx

@@ -1,4 +1,4 @@
-export default function RemoteLocalIcon() {
+export default function RemoteLocalIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       width="24"
@@ -10,6 +10,7 @@ export default function RemoteLocalIcon() {
       strokeWidth="2"
       shapeRendering="geometricPrecision"
       viewBox="0 0 24 24"
+      {...props}
     >
       <circle cx="12" cy="12" r="2" />
       <path d="M16.24 7.76a6 6 0 010 8.49m-8.48-.01a6 6 0 010-8.49m11.31-2.82a10 10 0 010 14.14m-14.14 0a10 10 0 010-14.14" />