feat: TypeScript

vercel · Mar 10, 2023 · 5715576 · 5715576
1 parent 501958f
commit 5715576
Show file tree

Hide file tree

Showing 33 changed files with 834 additions and 707 deletions.
diff --git a/components/authors.js → components/authors.tsx b/components/authors.js → components/authors.tsx
@@ -1,12 +1,20 @@
-export default function Authors({ date, children, by = "by" }) {
+export default function Authors({
+  date,
+  children,
+  by = "by",
+}: {
+  date: string;
+  children?: React.ReactNode;
+  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

diff --git a/components/blog-index.js b/components/blog-index.js
diff --git a/components/blog-index.tsx b/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>
+      );
+    }
+  );
+}
diff --git a/components/diagrams/cache.js → components/diagrams/cache.tsx b/components/diagrams/cache.js → components/diagrams/cache.tsx
@@ -1,7 +1,7 @@
 import useLocalesMap from "../use-locales-map";
 import { diagramCachePathsMap } from "../../translations/svgs";
 
-export const Cache = () => {
+export const Cache: React.FC = () => {
   const paths = useLocalesMap(diagramCachePathsMap);
 
   return (

diff --git a/components/diagrams/infinite.js → components/diagrams/infinite.tsx b/components/diagrams/infinite.js → components/diagrams/infinite.tsx
@@ -1,7 +1,7 @@
 import useLocalesMap from "../use-locales-map";
 import { diagramInfinitePathMap } from "../../translations/svgs";
 
-export const Infinite = () => {
+export const Infinite: React.FC = () => {
   const path = useLocalesMap(diagramInfinitePathMap);
 
   return (

diff --git a/components/diagrams/pagination.js → components/diagrams/pagination.tsx b/components/diagrams/pagination.js → components/diagrams/pagination.tsx
@@ -1,7 +1,7 @@
 import useLocalesMap from "../use-locales-map";
 import { diagramPaginationPathsMap } from "../../translations/svgs";
 
-export const Pagination = () => {
+export const Pagination: React.FC = () => {
   const paths = useLocalesMap(diagramPaginationPathsMap);
 
   return (

diff --git a/components/diagrams/welcome.js → components/diagrams/welcome.tsx b/components/diagrams/welcome.js → components/diagrams/welcome.tsx
@@ -1,7 +1,7 @@
 import useLocalesMap from "../use-locales-map";
 import { diagramWelcomePathMap } from "../../translations/svgs";
 
-export const Welcome = () => {
+export const Welcome: React.FC = () => {
   const path = useLocalesMap(diagramWelcomePathMap);
 
   return (

diff --git a/components/features.js → components/features.tsx b/components/features.js → components/features.tsx
@@ -1,18 +1,18 @@
 import { useId } from "react";
 import styles from "./features.module.css";
 import useLocalesMap from "./use-locales-map";
-import { featuresMap, titleMap } from "../translations/text";
+import { type FeatureKey, featuresMap, titleMap } from "../translations/text";
 
-import BackendAgnosticIcon from "../components/icons/backend-agnostic";
-import LightweightIcon from "../components/icons/lightweight";
-import PaginationIcon from "../components/icons/pagination";
-import RealtimeIcon from "../components/icons/realtime";
-import RemoteLocalIcon from "../components/icons/remote-local";
-import RenderingStrategiesIcon from "../components/icons/rendering-strategies";
-import SuspenseIcon from "../components/icons/suspense";
-import TypeScriptIcon from "../components/icons/typescript";
+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";
 
-export function Feature({ text, icon }) {
+export function Feature({ text, icon }: { text: string; icon: JSX.Element }) {
   return (
     <div className={styles.feature}>
       {icon}
@@ -21,8 +21,10 @@ export function Feature({ text, icon }) {
   );
 }
 
-/** @type {{ key: string; icon: React.FC }[]} */
-const FEATURES_LIST = [
+const FEATURES_LIST: {
+  key: FeatureKey;
+  icon: JSX.Element;
+}[] = [
   { key: "lightweight", icon: <LightweightIcon /> },
   { key: "realtime", icon: <RealtimeIcon /> },
   { key: "suspense", icon: <SuspenseIcon /> },

diff --git a/components/icons/backend-agnostic.js → components/icons/backend-agnostic.tsx b/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" />

diff --git a/components/icons/lightweight.js → components/icons/lightweight.tsx b/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" />

diff --git a/components/icons/pagination.js → components/icons/pagination.tsx b/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" />

diff --git a/components/icons/realtime.js → components/icons/realtime.tsx b/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>

diff --git a/components/icons/remote-local.js → components/icons/remote-local.tsx b/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" />

diff --git a/components/icons/rendering-strategies.js → components/icons/rendering-strategies.tsx b/components/icons/rendering-strategies.js → components/icons/rendering-strategies.tsx
@@ -1,4 +1,6 @@
-export default function RenderingStrategiesIcon() {
+export default function RenderingStrategiesIcon(
+  props: React.SVGProps<SVGSVGElement>
+) {
   return (
     <svg
       width="24"
@@ -10,6 +12,7 @@ export default function RenderingStrategiesIcon() {
       strokeWidth="2"
       shapeRendering="geometricPrecision"
       viewBox="0 0 24 24"
+      {...props}
     >
       <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
     </svg>

diff --git a/components/icons/suspense.js → components/icons/suspense.tsx b/components/icons/suspense.js → components/icons/suspense.tsx
@@ -1,4 +1,4 @@
-export default function SuspenseIcon() {
+export default function SuspenseIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       viewBox="0 0 24 24"
@@ -9,6 +9,7 @@ export default function SuspenseIcon() {
       fill="none"
       strokeLinecap="round"
       strokeLinejoin="round"
+      {...props}
     >
       <circle cx="12" cy="12" r="10" />
       <line x1="10" y1="15" x2="10" y2="9" />

diff --git a/components/icons/typescript.js → components/icons/typescript.tsx b/components/icons/typescript.js → components/icons/typescript.tsx
@@ -1,4 +1,4 @@
-export default function TypescriptIcon() {
+export default function TypescriptIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       width="24"
@@ -10,6 +10,7 @@ export default function TypescriptIcon() {
       strokeWidth="2"
       shapeRendering="geometricPrecision"
       viewBox="0 0 24 24"
+      {...props}
     >
       <path d="M16.5 9.4l-9-5.19M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" />
       <path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12" />

diff --git a/components/logo.js → components/logo.tsx b/components/logo.js → components/logo.tsx
@@ -1,11 +1,10 @@
-export default function Logo({ height }) {
+export default function Logo(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg height={height} viewBox="0 0 291 69" fill="none">
+    <svg viewBox="0 0 291 69" fill="none" {...props}>
       <path
         d="M0 36.53c.07 17.6 14.4 32.01 32.01 32.01a32.05 32.05 0 0032.01-32V32a13.2 13.2 0 0123.4-8.31h20.7A32.07 32.07 0 0077.2 0a32.05 32.05 0 00-32 32.01v4.52A13.2 13.2 0 0132 49.71a13.2 13.2 0 01-13.18-13.18 3.77 3.77 0 00-3.77-3.77H3.76A3.77 3.77 0 000 36.53zM122.49 68.54a32.14 32.14 0 01-30.89-23.7h20.67a13.16 13.16 0 0023.4-8.3V32A32.05 32.05 0 01167.68 0c17.43 0 31.64 14 32 31.33l.1 5.2a13.2 13.2 0 0023.4 8.31h20.7a32.07 32.07 0 01-30.91 23.7c-17.61 0-31.94-14.42-32.01-32l-.1-4.7v-.2a13.2 13.2 0 00-13.18-12.81 13.2 13.2 0 00-13.18 13.18v4.52a32.05 32.05 0 01-32.01 32.01zM247.94 23.7a13.16 13.16 0 0123.4 8.31 3.77 3.77 0 003.77 3.77h11.3a3.77 3.77 0 003.76-3.77A32.05 32.05 0 00258.16 0a32.07 32.07 0 00-30.92 23.7h20.7z"
         fill="currentColor"
       />
     </svg>
   );
 }
-
diff --git a/components/use-locales-map.js → components/use-locales-map.ts b/components/use-locales-map.js → components/use-locales-map.ts
@@ -1,17 +1,8 @@
 import { useRouter } from "next/router";
+import { LocalesMap, TypedNextRouter } from "../types";
 
-/**
- * @typedef {"en-US"} DefaultLocale
- * @typedef {DefaultLocale | "zh-CN" | "es-ES" | "pt-BR" | "ja" | "ko" | "ru"} Locale
- * @typedef {{locale?: Locale | undefined; locales?: Locale[] | undefined; defaultLocale?: DefaultLocale | undefined}} TypedRouter
- * @typedef {Omit<import('next/router').NextRouter, "locale" | "locales" | "defaultLocale"> & TypedRouter} NextRouter
- * @template T
- * @type {(localesMap: Record<Locale, T>) => T}
- */
-export default function useLocalesMap(localesMap) {
-  /** @type {NextRouter} */
-  const router = useRouter();
-  const { locale, defaultLocale } = router;
+export default function useLocalesMap<T>(localesMap: LocalesMap<T>): T {
+  const { locale, defaultLocale } = useRouter() as TypedNextRouter;
 
   if (!localesMap) {
     throw new Error("Pass a locales map as argument to useLocalesMap");
@@ -36,30 +27,23 @@ export default function useLocalesMap(localesMap) {
     );
   }
 
-  if (["string", "number", "symbol"].includes(typeof localesMap[defaultLocale])) {
-    return localesMap[locale] || localesMap[defaultLocale];
+  if (
+    ["string", "number", "symbol"].includes(typeof localesMap[defaultLocale])
+  ) {
+    return (localesMap[locale] as T) ?? localesMap[defaultLocale];
   }
 
   return mergeDeep(localesMap[defaultLocale], localesMap[locale]);
 }
 
-/**
- * Simple object check.
- * @param {any} item
- * @returns {boolean}
- */
-export function isObject(item) {
+export function isObject(item: any): boolean {
   return item && typeof item === "object" && !Array.isArray(item);
 }
 
-/**
- * Deep merge two objects.
- * @template T
- * @param {Record<string, T>} target
- * @param {Record<string, T>} sources
- * @returns {Record<string, T>}
- */
-export function mergeDeep(target, ...sources) {
+export function mergeDeep<T extends Record<string, any> = {}>(
+  target: T,
+  ...sources: Partial<T>[]
+): T {
   if (!sources.length) return target;
   const source = sources.shift();
 

diff --git a/components/vercel.js → components/vercel.tsx b/components/vercel.js → components/vercel.tsx
@@ -1,6 +1,9 @@
-export default function Vercel({ height = 20 }) {
+export default function Vercel({
+  height = 20,
+  ...props
+}: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg height={height} viewBox="0 0 283 64" fill="none">
+    <svg height={height} viewBox="0 0 283 64" fill="none" {...props}>
       <path
         fill="currentColor"
         d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z"