feat: TypeScript

vercel · Mar 14, 2023 · d909102 · d909102
1 parent 4222517
commit d909102
Show file tree

Hide file tree

Showing 34 changed files with 768 additions and 643 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 b/components/use-locales-map.js