From 65cff9f0e56fc313e31cdc716c1813952373a541 Mon Sep 17 00:00:00 2001
From: junwen <junwen@mhub.my>
Date: Thu, 7 Oct 2021 21:52:21 +0800
Subject: [PATCH 1/6] feat(FundingSectionFromPkg): add component

---
 src/PackageJSON.ts                            |  6 ++
 src/components/FundingSectionFromPkg.test.tsx | 84 +++++++++++++++++++
 src/components/FundingSectionFromPkg.tsx      | 52 ++++++++++++
 3 files changed, 142 insertions(+)
 create mode 100644 src/components/FundingSectionFromPkg.test.tsx
 create mode 100644 src/components/FundingSectionFromPkg.tsx

diff --git a/src/PackageJSON.ts b/src/PackageJSON.ts
index 3c52002..8327f6e 100644
--- a/src/PackageJSON.ts
+++ b/src/PackageJSON.ts
@@ -8,6 +8,7 @@ export interface PackageJSON {
   directories?: {
     example?: string;
   };
+  funding?: string | Funding | Array<string | Funding>;
   homepage?: string;
   license?: string;
   name: string;
@@ -15,6 +16,11 @@ export interface PackageJSON {
   repository?: string | Repository;
 }
 
+export interface Funding {
+  type: string;
+  url: string;
+}
+
 export interface Repository {
   type: string;
   url: string;
diff --git a/src/components/FundingSectionFromPkg.test.tsx b/src/components/FundingSectionFromPkg.test.tsx
new file mode 100644
index 0000000..d6b3cb9
--- /dev/null
+++ b/src/components/FundingSectionFromPkg.test.tsx
@@ -0,0 +1,84 @@
+/* @jsx MD */
+import MD, { render } from "jsx-md";
+
+import { FundingSectionFromPkg } from "./FundingSectionFromPkg";
+
+describe("FundingSectionFromPkg", () => {
+  it("renders a 'Show your support' heading", async () => {
+    const pkg = {
+      name: "test-package",
+      funding: "http://example.com/donate",
+    };
+    expect(await render(<FundingSectionFromPkg pkg={pkg} />)).toContain(
+      "## 🤝 Show your support"
+    );
+
+    expect(
+      await render(
+        <FundingSectionFromPkg pkg={pkg} title="Show your support" />
+      )
+    ).toContain("## Show your support");
+  });
+
+  it("renders the description for the section", async () => {
+    const pkg = {
+      name: "test-package",
+      funding: "http://example.com/donate",
+    };
+    expect(await render(<FundingSectionFromPkg pkg={pkg} />)).toContain(
+      "Give a ⭐ if this package helped you! You can also support the development of this package by funding."
+    );
+  });
+
+  it("renders the package funding with string format", async () => {
+    const pkg = {
+      name: "test-package",
+      funding: "http://example.com/donate",
+    };
+    expect(await render(<FundingSectionFromPkg pkg={pkg} />)).toContain(
+      "\n* [example.com](http://example.com/donate)"
+    );
+  });
+
+  it("renders the package funding with object format", async () => {
+    const pkg = {
+      name: "test-package",
+      funding: {
+        type: "individual",
+        url: "http://example.com/donate",
+      },
+    };
+    expect(await render(<FundingSectionFromPkg pkg={pkg} />)).toContain(
+      '\n* [example.com](http://example.com/donate "individual")'
+    );
+  });
+
+  it("renders the package funding with combination of string and object format", async () => {
+    const pkg = {
+      name: "test-package",
+      funding: [
+        {
+          type: "individual",
+          url: "http://example.com/donate",
+        },
+        "http://example.com/donateAlso",
+        {
+          type: "patreon",
+          url: "https://www.patreon.com/my-account",
+        },
+      ],
+    };
+    expect(await render(<FundingSectionFromPkg pkg={pkg} />)).toContain(
+      '* [example.com](http://example.com/donate "individual")\n' +
+        "* [example.com](http://example.com/donateAlso)\n" +
+        '* [www.patreon.com](https://www.patreon.com/my-account "patreon")\n\n\n'
+    );
+  });
+
+  it("renders nothing if the package has no funding", async () => {
+    const pkg = {
+      name: "test-package",
+    };
+    expect(await render(<FundingSectionFromPkg pkg={pkg} />)).toBe("");
+  });
+});
diff --git a/src/components/FundingSectionFromPkg.tsx b/src/components/FundingSectionFromPkg.tsx
new file mode 100644
index 0000000..90afd3d
--- /dev/null
+++ b/src/components/FundingSectionFromPkg.tsx
@@ -0,0 +1,52 @@
+/* @jsx MD */
+import { Component, Link, UnorderedList } from "jsx-md";
+import MD, { Fragment, Heading, LineBreak } from "jsx-md";
+import { Funding, PackageJSON } from "../PackageJSON";
+import { URL } from "url";
+
+/** @internal */
+interface Props {
+  pkg: Readonly<PackageJSON>;
+  title?: string;
+}
+
+const normalizeFunding = (funding: string | Funding): Funding => {
+  if (typeof funding === "string") {
+    return { type: "", url: funding };
+  }
+  return funding;
+};
+
+/** Displays the descripion from a package.json file. */
+export const FundingSectionFromPkg: Component<Props> = ({
+  pkg: { funding },
+  title = "🤝 Show your support",
+}: Props) => {
+  if (funding === undefined) {
+    return null;
+  }
+
+  const fundings = Array.isArray(funding)
+    ? funding.map(normalizeFunding)
+    : [normalizeFunding(funding)];
+
+  return (
+    <Fragment>
+      <Heading level={2}>{title}</Heading>
+      {
+        "Give a ⭐ if this package helped you! You can also support the development of this package by funding."
+      }
+      <LineBreak />
+      <LineBreak />
+      <UnorderedList>
+        {fundings.map((fund, idx) => (
+          <Link key={idx} title={fund.type} to={fund.url}>
+            {new URL(fund.url).hostname}
+          </Link>
+        ))}
+      </UnorderedList>
+      <LineBreak />
+      <LineBreak />
+    </Fragment>
+  );
+};

From 676558ab385d0c293058eee3fdb3486ec8276b3b Mon Sep 17 00:00:00 2001
From: junwen <junwen@mhub.my>
Date: Fri, 8 Oct 2021 17:54:55 +0800
Subject: [PATCH 2/6] test(FundingSectionFromPkg): split test

---
 src/components/FundingSectionFromPkg.test.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/FundingSectionFromPkg.test.tsx b/src/components/FundingSectionFromPkg.test.tsx
index d6b3cb9..3bebc13 100644
--- a/src/components/FundingSectionFromPkg.test.tsx
+++ b/src/components/FundingSectionFromPkg.test.tsx
@@ -12,7 +12,13 @@ describe("FundingSectionFromPkg", () => {
     expect(await render(<FundingSectionFromPkg pkg={pkg} />)).toContain(
       "## 🤝 Show your support"
     );
+  });
 
+  it("renders a different header if title is set", async () => {
+    const pkg = {
+      name: "test-package",
+      funding: "http://example.com/donate",
+    };
     expect(
       await render(
         <FundingSectionFromPkg pkg={pkg} title="Show your support" />

From ff922dcdde6e8b793af33a43b345b35a899bcb76 Mon Sep 17 00:00:00 2001
From: junwen <junwen@mhub.my>
Date: Fri, 8 Oct 2021 18:01:06 +0800
Subject: [PATCH 3/6] feat(FundingSectionFromPkg): export component

---
 src/components/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/index.ts b/src/components/index.ts
index 895dd1b..9fec551 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -10,6 +10,7 @@ export { BadgesFromPkg } from "./BadgesFromPkg";
 export { ContributingSection } from "./ContributingSection";
 export { ContributorsSection } from "./ContributorsSection";
 export { ExamplesFromPkg } from "./ExamplesFromPkg";
+export { FundingSectionFromPkg } from "./FundingSectionFromPkg";
 export { HomepageFromPkg } from "./HomepageFromPkg";
 export { LicenseFromPkg } from "./LicenseFromPkg";
 export { TitleFromPkg } from "./TitleFromPkg";

From 79b5333f67e10e8766ec040ee1b47b6d9d01fed4 Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Fri, 8 Oct 2021 18:16:03 +0200
Subject: [PATCH 4/6] docs: add funding section to README

---
 README.md.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md.tsx b/README.md.tsx
index cf8ca38..cc293f4 100644
--- a/README.md.tsx
+++ b/README.md.tsx
@@ -21,6 +21,7 @@ import MD, {
   LicenseBadge,
   LicenseFromPkg,
   ContributorsSectionFromPkg,
+  FundingSectionFromPkg,
 } from "./src";
 import { CodeBlock, Heading, InlineCode, LineBreak } from "jsx-md";
 import pkg from "./package.json";
@@ -83,6 +84,8 @@ const Readme: Component = () => (
     <ContributingSection />
     {/* Create a section linking to the contributors of the repo */}
     <ContributorsSectionFromPkg pkg={pkg} />
+    {/* Create a funding section based on funding information set up in package.json */}
+    <FundingSectionFromPkg pkg={pkg} />
     {/* Create a section linking to the license file. */}
     <LicenseFromPkg pkg={pkg} />
   </Fragment>

From 5051685624753505127f763f9b890d200c325a5f Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Fri, 8 Oct 2021 18:22:03 +0200
Subject: [PATCH 5/6] docs: add funding details

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index d526386..8d98ea0 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "Readme"
   ],
   "author": "Daniel Bartholomae <daniel@bartholomae.name> (https://startup-cto.net)",
+  "funding": "https://github.com/sponsors/dbartholomae",
   "license": "MIT",
   "homepage": "https://dbartholomae.github.io/jsx-readme",
   "repository": "git@github.com:dbartholomae/jsx-readme.git",

From 78e22da98472fa6eaa2417432373c12a0579c6ae Mon Sep 17 00:00:00 2001
From: Daniel Bartholomae <daniel@bartholomae.name>
Date: Fri, 8 Oct 2021 18:22:43 +0200
Subject: [PATCH 6/6] docs: build funding section

---
 README.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/README.md b/README.md
index 00eb0e4..38d3b63 100644
--- a/README.md
+++ b/README.md
@@ -236,6 +236,13 @@ This package only works thanks to [all of our contributors](https://github.com/d
 
 [+ 3 contributors](https://github.com/dbartholomae/jsx-readme/graphs/contributors)
 
+## 🤝 Show your support
+
+Give a ⭐ if this package helped you! You can also support the development of this package by funding.
+
+* [github.com](https://github.com/sponsors/dbartholomae)
+
+
 ## 📜 License
 
 MIT. See [LICENSE file](./LICENSE) for details.