Sponsor & Support pages update (#442)

Co-authored-by: Benjie Gillam <[email protected]>

Author: jemgillam

src/components/Layout/index.scss

@@ -1119,3 +1119,105 @@ svg.MarketingDivide {
 .text-center2 {
   text-align: center;
 }
+
+// ----------------------------------------
+// Sponsor Page
+
+.tier-row {
+  background-color: white;
+  padding: 2rem 1rem;
+  border-radius: 12px;
+  border: 4px solid #1b1b3d;
+  color: #1b3955;
+}
+
+.tier-item-container {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: stretch;
+}
+
+.tier-break {
+  width: 1px;
+  background-color: #777;
+  align-self: stretch;
+}
+
+.tier {
+  display: flex;
+  flex-direction: column;
+  justify-items: space-between;
+  align-content: flex-start;
+  flex: 1 0 0;
+}
+.tier h3,
+.tier .price-line {
+  text-align: center;
+}
+.tier .tc .button--solid {
+  width: 100%;
+}
+.tier h3:first-child {
+  padding-top: 0;
+  margin-top: 0;
+}
+.tier ul:last-child {
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+.tier {
+  h3 {
+    color: rgb(31, 76, 119);
+  }
+  .tc .button--solid {
+    background-color: rgb(31, 76, 119);
+    border-color: rgb(31, 76, 119);
+    color: white;
+  }
+}
+
+.tier a {
+  color: rgb(31, 76, 119);
+}
+
+.tier.highlight {
+  h3 {
+    color: #4a68b4;
+    color: #2d80d3;
+  }
+  a {
+    color: #4a68b4;
+    &:hover {
+      color: #4a68b4;
+    }
+    &:visited {
+      color: #4a68b4;
+    }
+  }
+  .tc .button--solid {
+    background-color: #2d80d3;
+    border-color: #2d80d3;
+    color: white;
+  }
+}
+
+@media screen and (max-width: 64rem) {
+  .tier-row {
+    background-color: transparent;
+    border: none;
+    padding: 0;
+  }
+  .tier-item-container {
+    display: block;
+    gap: 0;
+  }
+  .tier {
+    background-color: white;
+    padding: 1rem 1rem;
+    border-radius: 12px;
+    border: 4px solid #1b1b3d;
+    color: #1b3955;
+    margin: 1rem 0;
+  }
+}

src/components/MarketingTier.js

@@ -0,0 +1,39 @@
+import React from "react";
+
+export default function MarketingTiers({ children }) {
+  return (
+    <div className="tier-row">
+      <div className="tier-item-container">
+        {children.flatMap((c, i) =>
+          i === 0 ? [c] : [<div className="tier-break" />, c]
+        )}
+      </div>
+    </div>
+  );
+}
+
+export class Tier extends React.Component {
+  render() {
+    const { name, price, tagline, href, description, highlight } = this.props;
+
+    return (
+      <div className={`tier ${highlight ? "highlight" : ""}`}>
+        <h3>{name}</h3>
+        <div className="price-line">
+          <span style={{ fontSize: "1.5rem" }}>{price}</span>{" "}
+          <span style={{ fontSize: "0.8rem" }}>/month</span>
+        </div>
+        <div className="tc">
+          <a className="button--solid" href={href}>
+            Join on GitHub Sponsors{" "}
+            <span className="fas fa-fw fa-external-link-square-alt" />
+          </a>
+        </div>
+        <h4>{tagline}</h4>
+        <div>
+          <span>{description}</span>
+        </div>
+      </div>
+    );
+  }
+}

src/pages/postgraphile/usage-cli.md

@@ -133,7 +133,7 @@ from
 * `--no-ignore-rbac`  
   [RECOMMENDED] set this to exclude fields, queries and mutations that are not available to any possible user (determined from the user in connection string and any role they can become); this will be enabled by default in v5
 * `--no-ignore-indexes`  
-  set this to exclude filters, orderBy, and relations that would be expensive to access due to missing indexes
+  [RECOMMENDED] set this to exclude filters, orderBy, and relations that would be expensive to access due to missing indexes
 * `--include-extension-resources`  
   by default, tables and functions that come from extensions are excluded; use this flag to include them (not recommended)
 * `--show-error-stack [json|string]`  

src/pages/postgraphile/usage-library.md

@@ -117,7 +117,7 @@ Next we need an adaptor to convert a generic PostGraphile route handler into a
 handler that's suitable for your given server framework. We provide the
 following out of the box:
 
-- `PostGraphileResponseNode` - for Node, Express, Connect, Nest, Restify, and 
+- `PostGraphileResponseNode` - for Node, Express, Connect, Nest, Restify, and
   Fastify v2 (NOT v3)
 - `PostGraphileResponseKoa` - for Koa
 - `PostGraphileResponseFastify3` - for Fastify v3
@@ -221,21 +221,25 @@ if (middleware.options.watchPg) {
 For Nest, this might look something like:
 
 ```js
-import { Controller, Get, Post, Req, Next, Res } from '@nestjs/common';
-import { Request, Response } from 'express';
-import { PostGraphileResponseNode } from 'postgraphile';
-import { middleware } from './postgraphile.middleware';
+import { Controller, Get, Post, Req, Next, Res } from "@nestjs/common";
+import { Request, Response } from "express";
+import { PostGraphileResponseNode } from "postgraphile";
+import { middleware } from "./postgraphile.middleware";
 
-@Controller('/')
+@Controller("/")
 export class PostGraphileController {
   @Get(middleware.graphiqlRoute)
-  graphiql (@Req() request: Request, @Res() response: Response, @Next() next) {
-    middleware.graphiqlRouteHandler(new PostGraphileResponseNode(request, response, next));
+  graphiql(@Req() request: Request, @Res() response: Response, @Next() next) {
+    middleware.graphiqlRouteHandler(
+      new PostGraphileResponseNode(request, response, next)
+    );
   }
 
   @Post(middleware.graphqlRoute)
-  graphql (@Req() request: Request, @Res() response: Response, @Next() next) {
-    middleware.graphqlRouteHandler(new PostGraphileResponseNode(request, response, next));
+  graphql(@Req() request: Request, @Res() response: Response, @Next() next) {
+    middleware.graphqlRouteHandler(
+      new PostGraphileResponseNode(request, response, next)
+    );
   }
 }
 ```
@@ -316,10 +320,10 @@ The `postgraphile` middleware factory function takes three arguments, all of
 which are optional. The below options are valid for
 <tt>postgraphile@<!-- LIBRARY_VERSION_BEGIN -->4.12.3<!-- LIBRARY_VERSION_END --></tt>.
 
-- **`pgConfig`**: Specifies the PostgreSQL database you wish to connect to.
-  You may pass a PostgreSQL connection string, a configuration object to pass
-  to the [`pg.Pool`][] constructor, or a [`pg.Pool`][] instance. Note: `pg.Pool`
-  has a default pool size of 10, to increase this you use the configuration
+- **`pgConfig`**: Specifies the PostgreSQL database you wish to connect to. You
+  may pass a PostgreSQL connection string, a configuration object to pass to the
+  [`pg.Pool`][] constructor, or a [`pg.Pool`][] instance. Note: `pg.Pool` has a
+  default pool size of 10, to increase this you use the configuration
   object/pg.Pool instance approach and pass a different value as `max`.
 - **`schemaName`**: A string, or array of strings, which specifies the
   PostgreSQL schema(s) you to expose via PostGraphile; defaults to 'public'
@@ -380,10 +384,11 @@ which are optional. The below options are valid for
     user in connection string and any role they can become); set this option
     true to skip these checks and create GraphQL fields and types for
     everything. The default is `true`, in v5 the default will change to `false`.
-  - `ignoreIndexes`: Set false to exclude filters, orderBy, and
+  - `ignoreIndexes`: Set false (recommended) to exclude filters, orderBy, and
     relations that would be expensive to access due to missing indexes. Changing
-    this from true to false is a breaking change, but false to true is not. The
-    default is `true`.
+    this from true to false is a breaking change, but false to true is not, so
+    we recommend you start with it set to `false`. The default is `true`, in v5
+    the default may change to `false`.
   - `includeExtensionResources`: By default, tables and functions that come from
     extensions are excluded from the generated GraphQL schema as general
     applications don't need them to be exposed to the end user. You can use this
@@ -757,5 +762,5 @@ You can find
 [express]: https://www.npmjs.com/express
 [graphql/express-graphql#82]: https://github.com/graphql/express-graphql/pull/82
 [`pg`]: https://www.npmjs.com/pg
-[`pg.Pool`]: https://node-postgres.com/api/pool
+[`pg.pool`]: https://node-postgres.com/api/pool
 [morgan]: https://www.npmjs.com/morgan