diff --git a/src/components/Accordion/Item.tsx b/src/components/Accordion/Item.tsx index 4988f4f2..01c85ffc 100644 --- a/src/components/Accordion/Item.tsx +++ b/src/components/Accordion/Item.tsx @@ -3,7 +3,7 @@ import { useLocation } from "@docusaurus/router"; import React, { useEffect, useRef } from "react"; -type AccordionItemProps = { +export type AccordionItemProps = { children: React.ReactNode; summary: string; open?: boolean; diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 827a5b1b..d3ec1519 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -12,20 +12,29 @@ export default function Button({ className, ...rest }: ButtonProps) { - const Tag = "href" in rest ? Link : "button"; + const computedClassName = clsx( + "border font-bold h-12 px-6 flex items-center hover:no-underline transition-colors", + variant === "primary" && + "bg-brand-500 text-gray-900 hover:bg-brand-600 border-brand-500 hover:border-brand-600 hover:text-gray-900", + variant === "secondary" && + "border-gray-200 dark:border-gray-800 text-gray-900 dark:text-gray-50 bg-transparent hover:border-gray-900 dark:hover:border-gray-50 hover:text-gray-900 dark:hover:text-gray-50 aria-selected:border-gray-900 dark:aria-selected:border-gray-50", + className, + ); + + if ("href" in rest) { + return ( + + {children} + + ); + } + return ( - )} + className={computedClassName} > {children} - + ); } diff --git a/src/components/FAQ/index.tsx b/src/components/FAQ/index.tsx index febdc0c7..50d43cf7 100644 --- a/src/components/FAQ/index.tsx +++ b/src/components/FAQ/index.tsx @@ -1,6 +1,6 @@ import React from "react"; import Accordion from "../Accordion"; -import AccordionItem from "../Accordion/Item"; +import AccordionItem, { AccordionItemProps } from "../Accordion/Item"; import Button from "../Button"; import Faq from "../../../faq.mdx"; import { MDXProvider } from "@mdx-js/react"; @@ -17,12 +17,14 @@ export default function FAQ() { + AccordionItem: (props: AccordionItemProps) => props.highlight ? : null, - a: (props) => ( + a: (props: React.AnchorHTMLAttributes) => ( ), - blockquote: (props) => ( + blockquote: ( + props: React.BlockquoteHTMLAttributes + ) => (
>; + title: string; + description: string; +}; + +function Goal({ icon: Icon, title, description }: GoalProps) { return (
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx index a775e568..50485571 100644 --- a/src/components/Home/index.tsx +++ b/src/components/Home/index.tsx @@ -6,9 +6,13 @@ import Supporters from "../Supporters"; import FAQ from "../FAQ"; import HowToSupport from "../HowToSupport"; import HowToContribute from "../HowToContribute"; -import LatestNews from "../LatestNews"; +import LatestNews, { RecentPost } from "../LatestNews"; -export default function Home({ recentPosts }) { +type HomeProps = { + recentPosts: RecentPost[]; +}; + +export default function Home({ recentPosts }: HomeProps) { return ( diff --git a/src/components/LatestNews/index.tsx b/src/components/LatestNews/index.tsx index 21a87ce1..f2d22455 100644 --- a/src/components/LatestNews/index.tsx +++ b/src/components/LatestNews/index.tsx @@ -1,8 +1,18 @@ -import React from "react"; +import React, { JSXElementConstructor } from "react"; import Button from "../Button"; import Link from "@docusaurus/Link"; +import { PropBlogPostMetadata } from "@docusaurus/plugin-content-blog"; -export default function LatestNews({ recentPosts }) { +export type RecentPost = { + metadata: PropBlogPostMetadata; + Preview: JSXElementConstructor; +}; + +type LatestNewsProps = { + recentPosts: RecentPost[]; +}; + +export default function LatestNews({ recentPosts }: LatestNewsProps) { const { metadata: { title, formattedDate, date, frontMatter, permalink }, Preview, diff --git a/src/components/Supporters/index.tsx b/src/components/Supporters/index.tsx index f07abd4e..5604345a 100644 --- a/src/components/Supporters/index.tsx +++ b/src/components/Supporters/index.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { Suporter } from "@site/src/components/SupportersList/types"; import supporters from "../../../supporters.json"; import Button from "../Button"; @@ -51,7 +52,7 @@ export default function Supporters() { {types.map(([type, supporters], index) => ( diff --git a/src/components/SupportersList/index.tsx b/src/components/SupportersList/index.tsx index e4fb43e6..a97e1310 100644 --- a/src/components/SupportersList/index.tsx +++ b/src/components/SupportersList/index.tsx @@ -1,13 +1,9 @@ import React from "react"; import Link from "@docusaurus/Link"; +import { Suporter } from "@site/src/components/SupportersList/types"; type SupportersListProps = { - list: { - name: string; - url: string; - pledge: string; - type: string; - }[]; + list: Suporter[]; }; export default function SupportersList({ list }: SupportersListProps) { diff --git a/src/components/SupportersList/types.ts b/src/components/SupportersList/types.ts new file mode 100644 index 00000000..9c23c3da --- /dev/null +++ b/src/components/SupportersList/types.ts @@ -0,0 +1,6 @@ +export type Suporter = { + name: string; + url: string; + pledge: string; + type: string; +}; diff --git a/src/theme/BlogLastPost/index.tsx b/src/theme/BlogLastPost/index.tsx index 80527844..de588a03 100644 --- a/src/theme/BlogLastPost/index.tsx +++ b/src/theme/BlogLastPost/index.tsx @@ -2,8 +2,15 @@ import React from "react"; import PatternBg from "@site/src/components/PatternBg"; import Button from "@site/src/components/Button"; import Link from "@docusaurus/Link"; +import { PropBlogPostContent } from "@docusaurus/plugin-content-blog"; -export default function BlogLastPost({ item }) { +type BlogLastPostProps = { + item: { + content: PropBlogPostContent; + }; +}; + +export default function BlogLastPost({ item }: BlogLastPostProps) { const { permalink, title, date, formattedDate, description } = item.content.metadata; diff --git a/src/theme/BlogLayout/index.tsx b/src/theme/BlogLayout/index.tsx index 935e9ccf..ab311793 100644 --- a/src/theme/BlogLayout/index.tsx +++ b/src/theme/BlogLayout/index.tsx @@ -1,8 +1,9 @@ import React from "react"; import Layout from "@theme/Layout"; +import { Props } from "@theme/BlogLayout"; -export default function BlogLayout(props) { +export default function BlogLayout(props: Props) { const { children, ...layoutProps } = props; return ( diff --git a/src/theme/BlogListItem/index.tsx b/src/theme/BlogListItem/index.tsx index 1a7c2e58..6b8399a9 100644 --- a/src/theme/BlogListItem/index.tsx +++ b/src/theme/BlogListItem/index.tsx @@ -1,8 +1,15 @@ import Link from "@docusaurus/Link"; import Button from "@site/src/components/Button"; import React from "react"; +import { PropBlogPostContent } from "@docusaurus/plugin-content-blog"; -export default function BlogListItem({ item }) { +type BlogListItemProps = { + item: { + content: PropBlogPostContent; + }; +}; + +export default function BlogListItem({ item }: BlogListItemProps) { const { permalink, title, date, formattedDate, description } = item.content.metadata; diff --git a/src/theme/BlogListItems/index.tsx b/src/theme/BlogListItems/index.tsx index 404ca689..d7ab3245 100644 --- a/src/theme/BlogListItems/index.tsx +++ b/src/theme/BlogListItems/index.tsx @@ -1,7 +1,15 @@ import React from "react"; import BlogListItem from "@theme/BlogListItem"; -export default function BlogListItems({ items }) { +import { PropBlogPostContent } from "@docusaurus/plugin-content-blog"; + +type BlogListItemsProps = { + items: readonly { + content: PropBlogPostContent; + }[]; +}; + +export default function BlogListItems({ items }: BlogListItemsProps) { return (
{items.map((item) => ( diff --git a/src/theme/BlogListPage/index.tsx b/src/theme/BlogListPage/index.tsx index 7fef3d9b..d7a66014 100644 --- a/src/theme/BlogListPage/index.tsx +++ b/src/theme/BlogListPage/index.tsx @@ -6,8 +6,9 @@ import BlogListPaginator from "@theme/BlogListPaginator"; import SearchMetadata from "@theme/SearchMetadata"; import BlogListItems from "@theme/BlogListItems"; import BlogLastPost from "@theme/BlogLastPost"; +import { Props } from "@theme/BlogListPage"; -export default function BlogListPage(props) { +export default function BlogListPage(props: Props) { const { metadata, items } = props; const { blogDescription, blogTitle } = metadata; diff --git a/src/theme/BlogListPaginator/index.tsx b/src/theme/BlogListPaginator/index.tsx index a392fc0f..4963ecc7 100644 --- a/src/theme/BlogListPaginator/index.tsx +++ b/src/theme/BlogListPaginator/index.tsx @@ -1,7 +1,9 @@ import React from "react"; import Button from "@site/src/components/Button"; -export default function BlogListPaginator(props) { +import { Props } from "@theme/BlogListPaginator"; + +export default function BlogListPaginator(props: Props) { const { metadata } = props; const { previousPage, nextPage } = metadata; return ( diff --git a/src/theme/BlogPostItem/Content/index.tsx b/src/theme/BlogPostItem/Content/index.tsx index dfe31c0c..b962f74e 100644 --- a/src/theme/BlogPostItem/Content/index.tsx +++ b/src/theme/BlogPostItem/Content/index.tsx @@ -3,8 +3,9 @@ import { blogPostContainerID } from "@docusaurus/utils-common"; import { useBlogPost } from "@docusaurus/theme-common/internal"; import MDXContent from "@theme/MDXContent"; import TextContent from "@site/src/components/TextContent"; +import { Props } from "@theme/BlogPostItem/Content"; -export default function BlogPostItemContent({ children }) { +export default function BlogPostItemContent({ children }: Props) { const { isBlogPostPage } = useBlogPost(); return ( diff --git a/src/theme/DocCard/index.js b/src/theme/DocCard/index.tsx similarity index 62% rename from src/theme/DocCard/index.js rename to src/theme/DocCard/index.tsx index 4acbece9..042fe7ed 100644 --- a/src/theme/DocCard/index.js +++ b/src/theme/DocCard/index.tsx @@ -4,8 +4,17 @@ import { findFirstCategoryLink, useDocById, } from "@docusaurus/theme-common/internal"; +import type { + PropSidebarItemCategory, + PropSidebarItem, + PropSidebarItemLink, +} from "@docusaurus/plugin-content-docs"; -function CardLayout({ href, title, description }) { +type CardLayoutProps = + | Pick + | Pick; + +function CardLayout({ href, label, description }: CardLayoutProps) { return (

@@ -14,7 +23,7 @@ function CardLayout({ href, title, description }) { className="text-gray-900 dark:text-gray-50 hover:text-brand-700 dark:hover:text-brand-500 font-bold" > - {title} + {label}

{description && ( @@ -25,27 +34,40 @@ function CardLayout({ href, title, description }) {
); } -function CardCategory({ item }) { + +type CardCategoryProps = { + item: PropSidebarItemCategory; +}; + +function CardCategory({ item }: CardCategoryProps) { const href = findFirstCategoryLink(item); // Unexpected: categories that don't have a link have been filtered upfront if (!href) { return null; } return ( - + ); } -function CardLink({ item }) { + +type CardLinkProps = { + item: PropSidebarItemLink; +}; + +function CardLink({ item }: CardLinkProps) { const doc = useDocById(item.docId ?? undefined); return ( ); } -export default function DocCard({ item }) { + +type DocCardProps = { item: PropSidebarItem }; + +export default function DocCard({ item }: DocCardProps) { switch (item.type) { case "link": return ; diff --git a/src/theme/DocCardList/index.js b/src/theme/DocCardList/index.tsx similarity index 63% rename from src/theme/DocCardList/index.js rename to src/theme/DocCardList/index.tsx index dd144bf4..4b2363fb 100644 --- a/src/theme/DocCardList/index.js +++ b/src/theme/DocCardList/index.tsx @@ -5,11 +5,24 @@ import { filterDocCardListItems, } from "@docusaurus/theme-common"; import DocCard from "@theme/DocCard"; -function DocCardListForCurrentSidebarCategory({ className }) { +import type { PropSidebarItem } from "@docusaurus/plugin-content-docs"; + +type DocCardListForCurrentSidebarCategoryProps = { + className: string; +}; + +function DocCardListForCurrentSidebarCategory({ + className, +}: DocCardListForCurrentSidebarCategoryProps) { const category = useCurrentSidebarCategory(); return ; } -export default function DocCardList(props) { + +type DocCardListProps = DocCardListForCurrentSidebarCategoryProps & { + items: PropSidebarItem[]; +}; + +export default function DocCardList(props: DocCardListProps) { const { items, className } = props; if (!items) { return ; diff --git a/src/theme/DocItem/Content.tsx b/src/theme/DocItem/Content.tsx index 79fc2e8f..0feb94b6 100644 --- a/src/theme/DocItem/Content.tsx +++ b/src/theme/DocItem/Content.tsx @@ -1,8 +1,9 @@ import React from "react"; import MDXContent from "@theme/MDXContent"; import TextContent from "@site/src/components/TextContent"; +import { Props } from "@theme/DocItem/Content"; -export default function DocItemContent({ children }) { +export default function DocItemContent({ children }: Props) { return ( {children} diff --git a/src/theme/DocPage/Layout/Sidebar.tsx b/src/theme/DocPage/Layout/Sidebar.tsx index 8162dd90..edd053eb 100644 --- a/src/theme/DocPage/Layout/Sidebar.tsx +++ b/src/theme/DocPage/Layout/Sidebar.tsx @@ -27,12 +27,16 @@ export default function DocPageLayoutSidebar({ sidebar, }: SidebarProps) { const { pathname } = useLocation(); - return ( diff --git a/src/theme/DocPage/Layout/index.tsx b/src/theme/DocPage/Layout/index.tsx index ab265ed5..ef120b1c 100644 --- a/src/theme/DocPage/Layout/index.tsx +++ b/src/theme/DocPage/Layout/index.tsx @@ -1,8 +1,8 @@ import React from "react"; +import DocPageLayoutSidebar from "./Sidebar"; import { useDocsSidebar } from "@docusaurus/theme-common/internal"; import Layout from "@theme/Layout"; import BackToTopButton from "@theme/BackToTopButton"; -import DocPageLayoutSidebar from "@theme/DocPage/Layout/Sidebar"; import type { Props } from "@theme/DocPage/Layout"; export default function DocPageLayout({ children }: Props) { diff --git a/src/theme/DocPaginator/index.tsx b/src/theme/DocPaginator/index.tsx index a265e31d..a35f79a6 100644 --- a/src/theme/DocPaginator/index.tsx +++ b/src/theme/DocPaginator/index.tsx @@ -1,16 +1,21 @@ import React from "react"; -import PaginatorNavLink from "@theme/PaginatorNavLink"; +import PaginatorNavLink from "../PaginatorNavLink"; import type { Props } from "@theme/DocPaginator"; export default function DocPaginator(props: Props) { const { previous, next } = props; return (