From 62f65d5ffb875bacd744343faebc1db0e360a2f4 Mon Sep 17 00:00:00 2001 From: James Date: Sat, 7 Nov 2020 13:27:43 -0500 Subject: [PATCH] updates docs --- docs/getting-started/concepts.mdx | 6 + docs/getting-started/what-is-payload.mdx | 154 ++++-------------- .../what-makes-it-different.mdx | 5 - src/admin/components/elements/Pill/index.js | 8 +- 4 files changed, 46 insertions(+), 127 deletions(-) create mode 100644 docs/getting-started/concepts.mdx delete mode 100644 docs/getting-started/what-makes-it-different.mdx diff --git a/docs/getting-started/concepts.mdx b/docs/getting-started/concepts.mdx new file mode 100644 index 0000000000..4accab8cd6 --- /dev/null +++ b/docs/getting-started/concepts.mdx @@ -0,0 +1,6 @@ +--- +title: Concepts +order: 20 +--- + +# Concepts diff --git a/docs/getting-started/what-is-payload.mdx b/docs/getting-started/what-is-payload.mdx index 5375107fc4..3c39b14787 100644 --- a/docs/getting-started/what-is-payload.mdx +++ b/docs/getting-started/what-is-payload.mdx @@ -1,136 +1,54 @@ --- title: What is Payload? +order: 10 --- # What is Payload? - hello + Payload is a headless CMS and application framework. It’s meant to provide a massive boost to your development process, but importantly, stay out of your way as your apps get more complex. -## Test +Out of the box, Payload gives you a lot of the things that you often need when developing a new website, web app, or native app: -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +- A Mongo database to store your data +- A way to store, retrieve, and manipulate data of any shape via full REST and GraphQL APIs +- Authentication—complete with commonly required functionality like registration, email verification, login, & password reset +- Deep access control to your data, based on document or field-level functions +- File storage and access control +- A beautiful admin UI that’s generated specifically to suit your data -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +## What does "headless" mean? -## Test 2 +A headless CMS is a system that sticks to what it's good at—managing content. It concentrates solely on granting administrators an effective way to author and maintain content, but doesn't control how and where that content is used. -## Test 3 +In this way, the CMS can ensure that its content editing experience is highly polished and effective while avoiding placing creative constraints on designers or restricting development teams. In contrast, traditional content management systems bind the presentation of your content to the storage of your content and severely limit the creativity, development and usability of the content that they manage. -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +At this point this concept is [widely](https://en.wikipedia.org/wiki/Headless_content_management_system) [discussed](https://css-tricks.com/what-is-a-headless-cms/) online, and for good reason. The web has become more complicated and with complexity comes the demand for developers to better structure their code. The rise of interface libraries like React and Vue are now the de-facto standard for building modern applications and traditional content management systems are often not designed to make use of them. -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +### Why Payload? -### Test 4 +The team behind Payload has been building websites and apps with existing content management systems and application frameworks for over a decade. We know what works and what doesn't about each of the existing solutions, and to this day have found no silver bullet solution. -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +**We believe that a CMS should be:** -``` -module.exports = { - admin: { - user: 'admins', - // indexHTML: 'custom-index.html', - meta: { - titleSuffix: '- Payload Demo', - // ogImage: '/static/find-image-here.jpg', - // favicon: '/img/whatever.png', - }, - disable: false, - components: { - // Nav: () => ( - //
Hello
- // ), - }, - }, - email: { - fromName: 'Payload', - fromAddress: 'hello@payloadcms.com', - }, - collections: [ - Admin, - AllFields, - Code, - Conditions, - CustomComponents, - File, - DefaultValues, - Blocks, - HiddenFields, - Hooks, - Localized, - LocalizedArray, - LocalOperations, - Media, - NestedArrays, - Preview, - PublicUsers, - RelationshipA, - RelationshipB, - RichText, - Select, - StrictPolicies, - Validations, - ], - globals: [ - NavigationArray, - GlobalWithStrictAccess, - BlocksGlobal, - ], - cookiePrefix: 'payload', - serverURL: 'http://localhost:3000', - cors: [ - 'http://localhost', - 'http://localhost:3000', - 'http://localhost:8080', - 'http://localhost:8081', - ], - csrf: [ - 'http://localhost:3000', - 'https://other-app-here.com', - ], - routes: { - api: '/api', - admin: '/admin', - graphQL: '/graphql', - graphQLPlayground: '/graphql-playground', - }, - defaultDepth: 2, - compression: {}, - paths: { - scss: 'client/scss/overrides.scss', - }, - graphQL: { - maxComplexity: 1000, - mutations: {}, - queries: {}, - disablePlaygroundInProduction: true, - }, - rateLimit: { - window: 15 * 60 * 100, - max: 100, - trustProxy: true, - skip: (req) => req.ip === '127.0.0.1', - }, - maxDepth: 10, - localization: { - locales: [ - 'en', - 'es', - ], - defaultLocale: 'en', - fallback: true, - }, - hooks: { - afterError: (err) => { - console.error('global error config handler', err); - }, - }, - upload: { - limits: { - fileSize: 10000000, // 10MB - }, - }, - webpack: (config) => config, -}; -``` +- Cost-effective and should save time and effort +- Intuitive for developers and content authors alike +- Self-hosted however and wherever the application specifies +- Designed in code but used with no coding experience +- Blazing fast +- Secure +- Fully flexible and extensible + +Payload is our silver bullet solution. It represents over two years of passionate development and brings everything we need when we build new apps and websites: + +- A beautiful, dynamic, customizable admin UI +- Extensible and reusable authentication +- Content localization +- Local file storage +- Extremely flexible access control +- Field conditional logic +- Block-based layout building +- Array field type(s) +- Security +- and much more diff --git a/docs/getting-started/what-makes-it-different.mdx b/docs/getting-started/what-makes-it-different.mdx deleted file mode 100644 index 119d0fc810..0000000000 --- a/docs/getting-started/what-makes-it-different.mdx +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: What makes it different? ---- - -# What makes it different? diff --git a/src/admin/components/elements/Pill/index.js b/src/admin/components/elements/Pill/index.js index 51ef706586..deed1cc5cf 100644 --- a/src/admin/components/elements/Pill/index.js +++ b/src/admin/components/elements/Pill/index.js @@ -32,15 +32,15 @@ const Pill = ({ to={to || undefined} > {(icon && alignIcon === 'left') && ( - <> + {icon} - + )} {children} {(icon && alignIcon === 'right') && ( - <> + {icon} - + )} );