diff --git a/src/components/Layout/index.scss b/src/components/Layout/index.scss index 30c956add..1bfd9b9de 100644 --- a/src/components/Layout/index.scss +++ b/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; + } +} diff --git a/src/components/MarketingTier.js b/src/components/MarketingTier.js new file mode 100644 index 000000000..b9d1385b9 --- /dev/null +++ b/src/components/MarketingTier.js @@ -0,0 +1,39 @@ +import React from "react"; + +export default function MarketingTiers({ children }) { + return ( +
+
+ {children.flatMap((c, i) => + i === 0 ? [c] : [
, c] + )} +
+
+ ); +} + +export class Tier extends React.Component { + render() { + const { name, price, tagline, href, description, highlight } = this.props; + + return ( +
+

{name}

+
+ {price}{" "} + /month +
+
+ + Join on GitHub Sponsors{" "} + + +
+

{tagline}

+
+ {description} +
+
+ ); + } +} diff --git a/src/pages/postgraphile/usage-cli.md b/src/pages/postgraphile/usage-cli.md index eee7db73f..e669d8d08 100644 --- a/src/pages/postgraphile/usage-cli.md +++ b/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]` diff --git a/src/pages/postgraphile/usage-library.md b/src/pages/postgraphile/usage-library.md index 1da2c0191..7fa233544 100644 --- a/src/pages/postgraphile/usage-library.md +++ b/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 postgraphile@4.12.3. -- **`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 diff --git a/src/pages/sponsor.mdx b/src/pages/sponsor.mdx index a0a8d26e4..4ed3f3ded 100644 --- a/src/pages/sponsor.mdx +++ b/src/pages/sponsor.mdx @@ -16,11 +16,12 @@ import MarketingProduct from "$components/MarketingProduct"; import postgresPostgraphileGraphql from "$images/postgres_postgraphile_graphql.png"; import Testimonial from "$components/MarketingTestimonial"; import Sponsors, { Sponsor } from "$components/MarketingSponsor"; +import Tiers, { Tier } from "$components/MarketingTier"; -# Sponsor Graphile's Open Source Software +# Sponsor Graphile’s Open Source Software @@ -30,7 +31,7 @@ import Sponsors, { Sponsor } from "$components/MarketingSponsor";
-We're extremely grateful to the following individuals and businesses that help +We’re extremely grateful to the following individuals and businesses that help to fund ongoing development on the Graphile suite through sponsorship. **THANK YOU!** @@ -144,7 +145,7 @@ YOU!**
- Sponsor Graphile's Open Source Software{" "} + Sponsor Graphile’s Open Source Software{" "}
@@ -204,7 +205,7 @@ advancement without adding additional time burdens. -### Why "crowd-funded open-source project"? +### Why “crowd-funded open-source project”? Many of our projects are open-source to give users great freedom in how they use the software, and to enable the community to have influence over how the @@ -212,20 +213,105 @@ projects progress to make it appropriate for a wide range of use-cases. To ensure users can rely on these projects for years to come, they need to be well directed and financially sustainable. -**The absolute best way to support Graphile is to become a sponsor.** -Crowd-sourced funding enables us to spend the most time directly working on -improving the software, which you and other users then benefit from. - -
- - Become a Sponsor - -
+**The best way to ensure that Graphile software is something you can depend on for years +to come is through monthly sponsorship.** Crowd-sourced funding enables us to spend the +most time directly working on improving the software, which you and other users then benefit from. - + + + + + + + +
  • Your name on the Graphile Sponsors page
    • +
  • Graphile stickers
    • +
  • Your name among those randomly featured in the PostGraphile CLI
    • +
  • Post job opportunities to our Discord community
    • +
  • Access to the #supporter-lounge on Discord
    • +
  • The warm feeling from knowing you’re supporting Open Source Software
    • + } + /> + +
  • The Supporter tier benefits and...
    • +
  • + Access to private security announcements +
    • +
  • + Free access to PostGraphile V4 Pro and Worker Pro +
    • +
  • Access to graphile-pro
    • +
  • + Your name and avatar/logo featured on our websites +
    • +
  • + Your name more frequently featured in the + PostGraphile CLI +
    • +
  • + The warm feeling that comes from knowing you’re making a difference + to the sustainability of the Graphile suite of tooling +
    • + } + /> + +
  • The Production tier benefits and...
    • +
  • + Your name and avatar/logo + featured in the READMEs of Graphile’s main OSS projects (shown on GitHub and npm) +
    • +
  • + Your name and avatar/logo prominently featured on our websites +
    • +
  • + Your name even more frequently featured in the PostGraphile CLI +
    • +
  • + Access to #vip-lounge on Discord +
    • +
  • + Free access to + pgRITA + +
    • +
  • + The warm feeling that comes from knowing{" "} + + you’re making a significant difference to the development and sustainability of + PostGraphile, Grafast, and the wider suite of Graphile developer tooling +
    • + } + /> +     + + + + + +     + + + + ### How is sponsorship money spent? Sponsorship money is used to fund software development, testing, documentation @@ -233,10 +319,10 @@ and releases of PostGraphile and the Graphile suite. A small amount is also used to send rewards such as stickers and learning materials to our backers. - - + + -### Is sponsorship required to use Graphile's OSS? +### Is sponsorship required to use Graphile’s OSS? Users are not legally required to give back to the Graphile project, but it is in their interest to do so. @@ -248,8 +334,8 @@ savings back, enabling the projects to advance more rapidly, and result in even greater savings for your organization. - - + + ### How can I sponsor? diff --git a/src/pages/support/index.mdx b/src/pages/support/index.mdx index 95b3982c2..95e575ebe 100644 --- a/src/pages/support/index.mdx +++ b/src/pages/support/index.mdx @@ -40,7 +40,7 @@ import TeamBio from '$components/MarketingTeamBio'; @@ -79,27 +79,27 @@ import TeamBio from '$components/MarketingTeamBio'; - + - +
    -Development Support gives your organisation access to the knowledge and +Development Support gives your organization access to the knowledge and experience of the Graphile team for any issues you have with PostGraphile, the Graphile suite and other tools in the ecosystem such as TypeScript, SQL, Node.js, GraphQL and more. If you're running any of the Graphile tools, you won't find anyone more qualified to help. -From $1,500/month, paid monthly through GitHub sponsors, or +From $999/month, paid monthly through GitHub sponsors, or quarterly/annually through invoicing (+ VAT where applicable). T&Cs apply.
    - + - +
    @@ -119,42 +119,7 @@ for faster, safer and more robust software development and practices. - - - - -
    - -## Want more? - -### Our Consultancy Retainer includes the benefits above, plus: - -Longer and deeper discussions:
      -
    • planning product features
      • -
    • designing your database or GraphQL schema
      • -
    • solving (or avoiding) performance issues
      • -
    • debugging
    , -'Targeted code review' -]}/> - -
    -From $6,000/month, cancel any time, no minimum term. - -
    - -

    -Get in touch -

    - -*T&Cs apply - calls may be up to 3 hours, at most one per day, subject to availability - -prices quoted for teams containing up to 10 engineers - pay monthly through GitHub Sponsors, or through -quarterly/annual invoicing (+ VAT where applicable).* -
    -     - - +