fixes for website

added real plugins data

Author: dotansimha

README.md

@@ -1,6 +1,9 @@
 ## Envelop
 
-Envelop is a lightweight JavaScript library for wrapping GraphQL execution layer and flow, allowing developers to develop, share and collaborate on GraphQL-related plugins, while filling the missing pieces in GraphQL implementations.
+`envelop` is a lightweight JavaScript (/TypeScript) library for wrapping GraphQL execution layer and flow, allowing developers to develop, share
+and collaborate on GraphQL-related plugins while filling the missing pieces in GraphQL implementations.
+
+`envelop` aims to extend the GraphQL execution flow by adding plugins that enrichs the feature set of your application. 
 
 <p align="left">
   <img height="150" src="./logo.png">
@@ -10,17 +13,19 @@ Envelop is a lightweight JavaScript library for wrapping GraphQL execution layer
 
 > Envelop is created and maintained by [The Guild](https://the-guild.dev/), and used in production by our clients.
 
-### In depth
-
-Our goal is to allow developers to keep the original GraphQL interfaces, while adding plugins to enrich the feature set of your application quickly, while sharing ideas, code and plugins with other developers.
+### [Envelop Key Concepts]((https://www.envelop.dev/docs#key-concepts))
 
-Envelop is agnostic to the HTTP server you use, so it's not a traditional server. We do not aim to provide a complete server, you can use Envelop with any environment (NodeJS or browser) and any type of GraphQL workflow (client / server, client-side execute, or server to server). So any piece of code that uses GraphQL's `execute` can benefit from that layer.
+* Lightweight
+* Wraps the entire GraphQL pipeline, based on plugins
+* Low-level API for extending the execution layer
+* Agnostic to the HTTP layer
+* Agnostic to the schema tools
+* Plugins-based usage
+* No vendor-locking
 
-The core of Envelop is zero-dependency, and will only apply changes to your GraphQL execution based on the plugins you wish to use. It can be integrated with any GraphQL server that follows [the execution phase, as defined in the GraphQL spec](https://spec.graphql.org/June2018/#sec-Executing-Requests) and let you provide your own lifecycle methods.
+[You can read more about the key concepts or Envelop here](https://www.envelop.dev/docs#key-concepts)
 
-Separating the execution workflow and the logic that it runs in each phase allow you to write reusable piece of code, like logging, metric collection, error handling, custom validations, resolvers tracing (and integration with any external), authentication, authorization and much more, without the needs to write it explicitly every time, or in any project or microservice. With Envelop, you can easily create a wrapper around your common logics, and share it with others.
-
-## Getting Started
+## [Getting Started](https://www.envelop.dev/docs/getting-started)
 
 Start by adding the core of Envelop to your codebase:
 
@@ -86,27 +91,16 @@ const getEnveloped = envelop({
 });
 ```
 
-> Envelop `plugins` are based on a simple event-based contact, that allow you easily to add more logic to your app. You can easily share and collaborate on plugins that you find generic.
-
-## Integrations / Examples
+> [You can read more about here](https://www.envelop.dev/docs/getting-started)
 
-Envelop provides a low-level API at consumption of the output, but a rich API while using it with plugins. Based on that, it's possible to integrate Envelop with many tools.
+## [Integrations / Examples](https://www.envelop.dev/docs/integrations)
 
-We recommend using [`graphql-helix`](https://github.com/contrawork/graphql-helix) as the request pipeline orchestrator, as it allows the maximum flexibility and you can easily override/manage every part of the pipeline with Envelop.
-
-Here's a list of integrations and examples:
-
-| Server/Framework | Fully supported? | Example                                     |
-| ---------------- | ---------------- | ------------------------------------------- |
-| Node's `http`    | V                | [`basic-http`](./examples/simple-http)      |
-| GraphQL-Helix    | V                | [`graphql-helix`](./examples/graphql-helix) |
-| Apollo-Server    | Almost           | [`apollo-server`](./examples/apollo-server) |
-| GraphQL-WS       | V                | [`graphql-ws`](./examples/graphql-ws)       |
-
-> Since Envelop is not a HTTP server, and just a wrapper around GraphQL request pipeline - it's possible to integrate it with any server/framework, if it's flexible enough and allows you to specify the pipeline methods\*.
+[You can find the integrations and compatibility list, and code-based examples here](https://www.envelop.dev/docs/integrations)
 
 ## Available Plugins
 
+You can explore all plugins in our [Plugins Hub](https://www.envelop.dev/plugins). If you wish your plugin to be listed here and under PluginsHub, feel free to add your plugin information [in this file](https://github.com/dotansimha/envelop/edit/main/website/src/lib/plugins.ts#L23) and create a Pull Request!
+
 We provide a few built-in plugins within the `@envelop/core`, and many more plugins as standalone packages.
 
 | Name                       | Package                                                                      | Description                                                                                                                                       |
@@ -141,23 +135,7 @@ We provide a few built-in plugins within the `@envelop/core`, and many more plug
 
 After an `envelop` has been created, you can share it with others as a complete layer of plugins. This is useful if you wish to create a predefined layer of plugins, and share it with others. You can use it as a shell and as a base for writing sharable pieces of servers.
 
-Here's a small exmple for sharing envelops:
-
-```ts
-// Somewhere where you wish to create the basics of what you wish to share
-// This defined the base plugins you wish to use as base.
-const myBaseEnvelop = envelop({
-  plugins: [useOrgAuth(), useOrgTracing(), useOrgLogsCollector()],
-});
-
-// Later, when you create your own Envelop, you can extend that and add custom plugins.
-// You can also specify the schema only at this point
-const myEnvelop = envelop({
-  plugins: [useEnvelop(myBaseEnvelop), useSchema(myServerSchema), useMyCustomPlugin()],
-});
-```
-
-This approach allows developers to create a base Envelop and share it across the organization: you can define your monitoring setup, logging, authentication, etc, only once in a common package, and share it with others without losing the ability to extend it.
+You can read more about [Sharing and Composing Envelops here](https://www.envelop.dev/docs/composing-envelop).
 
 ## Write your own plugin!
 
@@ -186,56 +164,7 @@ const getEnveloped = envelop({
 });
 ```
 
-> Feel free to share you plugin with us, or with the community. Sharing = Caring!
-
-#### The plugin interface
-
-You can find it here: https://github.com/dotansimha/envelop/blob/main/packages/types/src/index.ts#L50
-
-#### Execution Lifecycle
-
-By extending the GraphQL execution pipeline, we allow developers to write reusable plugins, that can be shared with others easily, as NPM packages. So instead of delivering a bloated GraphQL server with tons of features, we allow you to choose the HTTP server you prefer, the request pipeline you prefer, and the features you prefer.
-
-We wrap the execution pipeline of GraphQL operation, and allow Envelop plugins to do the following:
-
-- `parse`
-  - Hook into the before/after of this phase
-  - Override the parse function
-  - Access to the parsed result
-  - Modify the parsed result
-- `validate`
-  - Hook into the before/after of this phase
-  - Override the validation function
-  - Access to the validation error results
-  - Modify the validation results
-  - Add custom validation rules
-- `contextFactory`
-  - Hook into the before/after of this phase
-  - Access to the initial HTTP request context
-  - Extend the context with custom data
-  - Replace the context object
-- `execute`
-  - Hook into the before/after of this phase
-  - Extend the execution context
-  - Access to all execution parameters
-  - Replace the execute function
-  - Access to the results / error of the execution
-  - Access to before / after resolvers calls
-  - Extend resolvers behavior
-  - Access resolvers parameters
-  - Replace / modify the execution result
-- `subscribe`
-  - Hook into the before/after of this phase
-  - Extend the execution context
-  - Access to all execution parameters
-  - Replace the execute function
-  - Access to the results / error of the execution
-  - Access to before / after resolvers calls
-  - Extend resolvers behavior
-  - Access resolvers parameters
-  - Replace / modify the subscription result
-
-We also allow you to change the GraphQL schema during execution - so if your server has a schema that could change dynamically, you can always update it. As a result, we trigger `schemaChange` event that allow plugins respond accordingly.
+[For a complete guide and API docs for custom plugins, please refer to Envelop website](https://www.envelop.dev/docs/plugins)
 
 ### Contributing
 

website/docs/README.mdx

@@ -9,6 +9,8 @@ and collaborate on GraphQL-related plugins while filling the missing pieces in G
 
 `envelop` aims to extend the GraphQL execution flow by adding plugins that enrichs the feature set of your application. 
 
+* Docs & Plugins Hub: [envelop.dev](https://www.envelop.dev/)
+
 ## Key Concepts
 
 #### Plugins & community

website/package.json

@@ -11,6 +11,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "date-fns": "2.22.1",
     "@chakra-ui/icons": "1.0.13",
     "@chakra-ui/react": "1.6.3",
     "@chakra-ui/system": "1.6.7",

website/public/style.css

@@ -4,19 +4,11 @@ pre[class*='language-'] {
   word-break: break-word !important;
 }
 
-code {
-  font-family: 'Source Code Pro', monospace !important;
-}
-
-code * {
-  font-family: 'Source Code Pro', monospace !important;
+code, code * {
+  overflow-x: auto; font-family: "SF Mono", Menlo, monospace;
 }
 
 article {
   width: 100%;
   overflow-x: auto;
-}
-
-.remark-highlight {
-  font-size: 0.8rem;
 }

website/src/lib/plugins.ts

@@ -0,0 +1,168 @@
+export type Tags =
+  | 'tracing'
+  | 'metrics'
+  | 'core'
+  | 'error-handling'
+  | 'security'
+  | 'utilities'
+  | 'performance'
+  | 'caching'
+  | 'dev-tools'
+  | 'authentication'
+  | 'authorization'
+  | 'schema';
+
+export type RawPlugin = {
+  title: string;
+  npmPackage: string;
+  tags: Tags[];
+  readme?: string;
+  iconUrl?: string;
+};
+
+export const pluginsArr: RawPlugin[] = [
+  {
+    title: 'useSentry',
+    npmPackage: '@envelop/sentry',
+    iconUrl: '/assets/logos/sentry.png',
+    tags: ['tracing', 'metrics', 'error-handling'],
+  },
+  {
+    title: 'useSchema',
+    npmPackage: '@envelop/core',
+    iconUrl: '/logo.png',
+    tags: ['core'],
+  },
+  {
+    title: 'useErrorHandler',
+    npmPackage: '@envelop/core',
+    iconUrl: '/logo.png',
+    tags: ['core', 'error-handling'],
+  },
+  {
+    title: 'useMaskedErrors',
+    npmPackage: '@envelop/core',
+    iconUrl: '/logo.png',
+    tags: ['core', 'error-handling', 'security'],
+  },
+  {
+    title: 'useExtendContext',
+    npmPackage: '@envelop/core',
+    iconUrl: '/logo.png',
+    tags: ['core', 'utilities'],
+  },
+  {
+    title: 'useLogger',
+    npmPackage: '@envelop/core',
+    iconUrl: '/logo.png',
+    tags: ['core', 'utilities'],
+  },
+  {
+    title: 'usePayloadFormatter',
+    npmPackage: '@envelop/core',
+    iconUrl: '/logo.png',
+    tags: ['core', 'utilities'],
+  },
+  {
+    title: 'useTiming',
+    npmPackage: '@envelop/core',
+    iconUrl: '/logo.png',
+    tags: ['core', 'tracing', 'utilities'],
+  },
+  {
+    title: 'useGraphQLJit',
+    npmPackage: '@envelop/graphql-jit',
+    iconUrl: '/assets/logos/graphql.png',
+    tags: ['performance'],
+  },
+  {
+    title: 'useParserCache',
+    npmPackage: '@envelop/parser-cache',
+    iconUrl: '/logo.png',
+    tags: ['performance', 'caching'],
+  },
+  {
+    title: 'useValidationCache',
+    npmPackage: '@envelop/validation-cache',
+    iconUrl: '/logo.png',
+    tags: ['performance', 'caching'],
+  },
+  {
+    title: 'useDepthLimit',
+    npmPackage: '@envelop/depth-limit',
+    iconUrl: '/logo.png',
+    tags: ['performance', 'security'],
+  },
+  {
+    title: 'useDataLoader',
+    npmPackage: '@envelop/dataloader',
+    iconUrl: '/assets/logos/graphql.png',
+    tags: ['performance'],
+  },
+  {
+    title: 'useApolloTracing',
+    npmPackage: '@envelop/apollo-tracing',
+    iconUrl: '/assets/logos/apollo.png',
+    tags: ['dev-tools'],
+  },
+  {
+    title: 'useOpenTelemetry',
+    npmPackage: '@envelop/opentelemetry',
+    iconUrl: '/assets/logos/opentelemetry.png',
+    tags: ['tracing', 'metrics', 'error-handling'],
+  },
+  {
+    title: 'useGenericAuth',
+    npmPackage: '@envelop/generic-auth',
+    iconUrl: '/assets/logos/generic_auth.png',
+    tags: ['security', 'authentication', 'authorization'],
+  },
+  {
+    title: 'useAuth0',
+    npmPackage: '@envelop/auth0',
+    iconUrl: '/assets/logos/auth0.png',
+    tags: ['security', 'authentication', 'authorization'],
+  },
+  {
+    title: 'useGraphQLModules',
+    npmPackage: '@envelop/graphql-modules',
+    iconUrl: 'https://www.graphql-modules.com/img/just-logo.svg',
+    tags: ['schema', 'utilities', 'dev-tools'],
+  },
+  {
+    title: 'useRateLimiter',
+    npmPackage: '@envelop/graphql-middleware',
+    iconUrl: '/assets/logos/rate_limiter.png',
+    tags: ['schema', 'utilities', 'security'],
+  },
+  {
+    title: 'useDisableIntrospection',
+    npmPackage: '@envelop/disable-introspection',
+    iconUrl: '/assets/logos/graphql.png',
+    tags: ['utilities', 'security'],
+  },
+  {
+    title: 'useFilterAllowedOperations',
+    npmPackage: '@envelop/filter-operation-type',
+    iconUrl: '/assets/logos/graphql.png',
+    tags: ['utilities', 'security'],
+  },
+  {
+    title: 'usePreloadAssets',
+    npmPackage: '@envelop/preload-assets',
+    iconUrl: '/assets/logos/assets.png',
+    tags: ['utilities'],
+  },
+  {
+    title: 'usePersistedOperations',
+    npmPackage: '@envelop/persisted-operations',
+    iconUrl: '/assets/logos/persisted_operations.png',
+    tags: ['security', 'performance'],
+  },
+  {
+    title: 'useHive',
+    npmPackage: '@graphql-hive/client',
+    iconUrl: 'https://the-guild.dev/static/shared-logos/products/hive.svg',
+    tags: ['tracing', 'metrics', 'dev-tools'],
+  },
+];