Merge pull request #97 from KwanJunWen/feat/FundingSectionFromPkg

feat(FundingSectionFromPkg): add component

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.

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>

package.json

@@ -26,6 +26,7 @@
     "Readme"
   ],
   "author": "Daniel Bartholomae <[email protected]> (https://startup-cto.net)",
+  "funding": "https://github.com/sponsors/dbartholomae",
   "license": "MIT",
   "homepage": "https://dbartholomae.github.io/jsx-readme",
   "repository": "[email protected]:dbartholomae/jsx-readme.git",

src/PackageJSON.ts

@@ -8,13 +8,19 @@ export interface PackageJSON {
   directories?: {
     example?: string;
   };
+  funding?: string | Funding | Array<string | Funding>;
   homepage?: string;
   license?: string;
   name: string;
   private?: boolean;
   repository?: string | Repository;
 }
 
+export interface Funding {
+  type: string;
+  url: string;
+}
+
 export interface Repository {
   type: string;
   url: string;

src/components/FundingSectionFromPkg.test.tsx

@@ -0,0 +1,90 @@
+/* @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"
+    );
+  });
+
+  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" />
+      )
+    ).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("");
+  });
+});

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>
+  );
+};

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";