Docs: add pro help page and update dependencies (#7019)

* feat: add support page * feat: change support to services * feat: update button style, add home services * feat: add screenshot and link to demo * feat: add "new" to nav, add onboarding to services * feat: change feature cta to link * docs: update services page, add pro help to readme * chore: update all dependencies to latest - rename emotion imports - switch to decap cms * docs: improve pro help content * docs: change home module bg * docs: update services content * docs: update node version * docs: downgrade react-markdown * docs: update services content * docs: update services content
decaporg · Dec 22, 2023 · 73e4716 · 73e4716
1 parent fdfb497
commit 73e4716
Show file tree

Hide file tree

Showing 31 changed files with 5,314 additions and 5,115 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -40,6 +40,7 @@ module.exports = {
     ],
     'no-duplicate-imports': 'error',
     '@emotion/no-vanilla': 'error',
+    '@emotion/pkg-renaming': 'error',
     '@emotion/import-from-emotion': 'error',
     '@emotion/styled-import': 'error',
     'require-atomic-updates': [0],

diff --git a/README.md b/README.md
@@ -2,11 +2,13 @@
 
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/decaporg/decap-cms/blob/master/LICENSE) [![Netlify Status](https://api.netlify.com/api/v1/badges/8b87160b-0a11-4f75-8050-1d21bc1cff8c/deploy-status)](https://app.netlify.com/sites/decap-www/deploys) [![npm version](https://img.shields.io/npm/v/decap-cms.svg?style=flat)](https://www.npmjs.com/package/decap-cms) [![Build Status](https://github.com/decaporg/decap-cms/workflows/Node%20CI/badge.svg)](https://github.com/decaporg/decap-cms/actions?query=branch%3Amaster+workflow%3A%22Node+CI%22) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/decaporg/decap-cms/blob/master/CONTRIBUTING.md)
 
-[decapcms.org](https://www.decapcms.org/) (formerly known as Netlify CMS)
+[decapcms.org](https://www.decapcms.org/)
 
 A CMS for static site generators. Give users a simple way to edit
 and add content to any site built with a static site generator.
 
+_Decap CMS is the new name of Netlify CMS [since February 2023](https://www.netlify.com/blog/netlify-cms-to-become-decap-cms/)._
+
 ## Community Chat
 
 <a href="https://decapcms.org/chat">Join us on Discord</a>
@@ -49,6 +51,10 @@ Please make sure you understand its [implications and guarantees](https://writin
 
 ## Maintainers
 
-Maintained with care by <a href="https://techhub.p-m.si/">PM</a> & friends.
+Maintained with care by <a href="https://techhub.p-m.si/">PM TechHub</a> & friends.
+
+## Professional help
+
+Our partners offer a range of services that can help you get the most out of Decap CMS. Find onboarding, priority support, and development of custom features.
 
-Decap CMS is the new name of Netlify CMS [since February 2023](https://www.netlify.com/blog/netlify-cms-to-become-decap-cms/).
+[Read more on our professional help page](https://decapcms.org/services/)
diff --git a/website/content/pages/community.md b/website/content/pages/community.md
@@ -1,9 +1,14 @@
 ---
 title: Community
 headline: Help us build the CMS of the future.
-subhead: Get support, give support, and find out what's new through the channels below.
+subhead: Get help, help others, and find out what's new through the channels below.
 sections:
-  - title: support
+  - title: contribitung
+    channels:
+      - title: Contrubutor guide
+        description: Instructions for contribitung to the project
+        url: /docs/contributor-guide
+  - title: communication
     channels:
       - title: Decap CMS Discord
         description: Live community chat for all things Decap CMS.
@@ -14,4 +19,12 @@ sections:
       - title: GitHub Discussions
         description: Ask questions and discuss ideas.
         url: https://github.com/decaporg/decap-cms/discussions
+  - title: help
+    channels:
+      - title: Professional help
+        description: Our partners offer a range of services that can help you get the most out of Decap CMS. Find onboarding, priority support, and development of custom features.
+        url: /services
+      - title: Community help
+        description: Get help from the community on our Dicsord server's help channel.
+        url: /chat
 ---
diff --git a/website/content/pages/services.md b/website/content/pages/services.md
@@ -0,0 +1,44 @@
+---
+title: Professional help
+description: Our partners offer a range of services that can help you get the most out of Decap CMS. Find onboarding, priority support, and development of custom features.
+image: /img/decap-3.png
+---
+## Onboarding
+
+Get started with Decap CMS with onboarding sessions provided by experts.
+
+This service is provided by PM TechHub, the maintainers of Decap CMS.
+
+<a href="https://techhub.p-m.si/services/decap/" class="button ga-onboarding">Learn more about Onboarding</a>
+
+## Monthly Priority Support
+
+Get continuous support for Decap CMS with priority response times.
+
+This service is provided by PM TechHub, the maintainers of Decap CMS.
+
+<a href="https://techhub.p-m.si/services/decap/" class="ga-support button">Learn more about Priority Support</a>
+
+## Development of Custom Features
+
+Sponsor the development of a custom feature tailored to your needs. The expert team of maintainers is ready to bring your vision to life.
+
+This service is provided by PM TechHub, the maintainers of Decap CMS.
+
+<a href="https://techhub.p-m.si/services/decap/" class="ga-features button">Learn more about Custom Features</a>
+
+## Building Websites with Decap CMS
+
+Work with experts and agencies that build websites with Decap CMS.
+
+- <a href="https://techhub.p-m.si/services/web-development/" class="ga-webdev">PM TechHub</a>
+
+<br>
+
+------
+
+## Become a Partner
+
+If you offer support for Decap CMS, you can become a partner. Partners are listed on this page and can use the Decap Partner logo on their website.
+
+<a href="mailto:decap@p-m.si" class="ga-partner">Contact us</a> to find out more how to become a partner and how the partnership works.
diff --git a/website/data/landing.yaml b/website/data/landing.yaml
@@ -34,6 +34,31 @@ editors:
       description: "With [Git Gateway](/docs/git-gateway-backend/#git-gateway-with-netlify-identity), you can add CMS access for any team member — even if they don’t have a GitHub account. "
       imgpath: "feature-access.svg"
 
+services:
+  hook: "Do you need professional help?"
+  intro: "The team of maintainers offers a range of professional services to help you get the most out of Decap CMS."
+  features:
+    - feature: "Onboarding"
+      description: "Get up to speed quickly with a customized onboarding program tailored to your team and project."
+      cta:
+        href: "/services/"
+        label: "Find out more"
+    - feature: "Priority Support"
+      description: "Benefit from a dedicated support line and priority ticket handling."
+      cta:
+        href: "/services/"
+        label: "Find out more"
+    - feature: "Custom Features Development"
+      description: "Sponsor the development of custom features or integrations to meet your specific needs."
+      cta:
+        href: "/services/"
+        label: "Find out more"
+    - feature: "Building Websites with Decap CMS"
+      description: "See the list of trusted partners that build websites with Decap CMS."
+      cta:
+        href: "/services/"
+        label: "Find out more"
+
 community:
   hook: "Supported by a growing&nbsp;community"
   features:

diff --git a/website/gatsby-config.js b/website/gatsby-config.js
@@ -67,16 +67,16 @@ module.exports = {
         ],
       },
     },
-    'gatsby-transformer-yaml',
-    'gatsby-transformer-json',
-    'gatsby-plugin-emotion',
-    'gatsby-plugin-react-helmet',
-    'gatsby-plugin-catch-links',
     {
-      resolve: 'gatsby-plugin-netlify-cms',
+      resolve: 'gatsby-plugin-decap-cms',
       options: {
         modulePath: `${__dirname}/src/cms/cms.js`,
       },
     },
+    'gatsby-transformer-yaml',
+    'gatsby-transformer-json',
+    'gatsby-plugin-emotion',
+    'gatsby-plugin-react-helmet',
+    'gatsby-plugin-catch-links',
   ],
 };
diff --git a/website/package.json b/website/package.json
@@ -14,43 +14,44 @@
   "homepage": "https://www.decapcms.org/",
   "license": "MIT",
   "dependencies": {
-    "@emotion/cache": "^10.0.29",
-    "@emotion/core": "^10.0.35",
-    "@emotion/styled": "^10.0.27",
-    "dayjs": "^1.8.23",
-    "emotion-theming": "^10.0.27",
-    "gatsby": "4.25.7",
-    "gatsby-plugin-catch-links": "3.14.0",
-    "gatsby-plugin-emotion": "^4.0.0",
-    "gatsby-plugin-google-tagmanager": "^5.12.3",
-    "gatsby-plugin-manifest": "3.14.0",
-    "gatsby-plugin-netlify-cms": "5.14.0",
-    "gatsby-plugin-react-helmet": "4.14.0",
-    "gatsby-remark-autolink-headers": "4.11.0",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/core": "^11.0.0",
+    "@emotion/styled": "^11.11.0",
+    "dayjs": "^1.11.10",
+    "decap-cms-app": "^3.0.0",
+    "emotion-theming": "^11.0.0",
+    "gatsby": "5.13.0",
+    "gatsby-plugin-catch-links": "5.13.0",
+    "gatsby-plugin-decap-cms": "^4.0.3",
+    "gatsby-plugin-emotion": "^8.13.0",
+    "gatsby-plugin-google-tagmanager": "^5.13.0",
+    "gatsby-plugin-manifest": "5.13.0",
+    "gatsby-plugin-react-helmet": "6.13.0",
+    "gatsby-remark-autolink-headers": "6.13.0",
     "gatsby-remark-external-links": "^0.0.4",
-    "gatsby-remark-prismjs": "5.11.0",
-    "gatsby-source-filesystem": "3.14.0",
-    "gatsby-transformer-json": "3.14.0",
-    "gatsby-transformer-remark": "4.11.0",
-    "gatsby-transformer-yaml": "3.14.0",
-    "js-yaml": "^4.0.0",
-    "lodash": "^4.17.15",
-    "moment": "^2.24.0",
-    "netlify-cms-app": "^2.15.72",
-    "prismjs": "^1.21.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-github-btn": "^1.1.1",
-    "react-helmet": "^6.0.0",
-    "react-markdown": "^6.0.0",
-    "smooth-scroll": "^16.1.2"
+    "gatsby-remark-prismjs": "7.13.0",
+    "gatsby-source-filesystem": "^5.13.0",
+    "gatsby-transformer-json": "5.13.0",
+    "gatsby-transformer-remark": "6.13.0",
+    "gatsby-transformer-yaml": "5.13.0",
+    "js-yaml": "^4.1.0",
+    "lodash": "^4.17.21",
+    "moment": "^2.29.4",
+    "prismjs": "^1.29.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-github-btn": "^1.4.0",
+    "react-helmet": "^6.1.0",
+    "react-markdown": "^8.0.7",
+    "smooth-scroll": "^16.1.3"
   },
   "devDependencies": {
-    "babel-plugin-prismjs": "^2.0.1",
-    "babel-preset-gatsby": "^1.0.0",
-    "eslint": "^7.4.0",
-    "eslint-plugin-import": "^2.20.1",
-    "markdownlint-cli": "^0.31.0"
+    "@emotion/eslint-plugin": "^11.11.0",
+    "babel-plugin-prismjs": "^2.1.0",
+    "babel-preset-gatsby": "^3.13.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-import": "^2.29.1",
+    "markdownlint-cli": "^0.38.0"
   },
   "private": true
 }
diff --git a/website/src/cms/cms.js b/website/src/cms/cms.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import CMS from 'netlify-cms-app';
+import CMS from 'decap-cms-app';
 import dayjs from 'dayjs';
 import Prism from 'prismjs';
-import { CacheProvider } from '@emotion/core';
+import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 
 import BlogPostTemplate from '../components/blog-post-template';

diff --git a/website/src/components/blog-post-template.js b/website/src/components/blog-post-template.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import { css } from '@emotion/core';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
 
 import Container from './container';
 import Markdown from './markdown';

diff --git a/website/src/components/button.js b/website/src/components/button.js
@@ -1,19 +1,29 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import theme from '../theme';
 
 // prettier-ignore
 const Button = styled.button`
   display: inline-block;
-  background-image: linear-gradient(0deg, #97bf2f 14%, #c9fa4b 94%);
-  color: ${theme.colors.darkGray};
+  background: ${theme.colors.primaryDark};
+  color: white;
   border-radius: ${theme.radii[1]};
   font-size: ${theme.fontsize[3]};
   font-weight: 700;
   padding: ${theme.space[2]} ${theme.space[3]};
   border: 2px solid ${theme.colors.primaryDark};
   cursor: pointer;
+  transition: all 0.2s ease-out;
+  box-shadow: 0;
+
+  &:hover {
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
+  }
+
+  &:active {
+    box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
+  }
 
   ${p => p.block && css`
     display: block;
@@ -22,12 +32,12 @@ const Button = styled.button`
 
   ${p => p.outline && css`
     background: none;
+    color: ${theme.colors.primaryDark};
     font-weight: 500;
   `};
 
   ${p => p.active && css`
-    background: ${theme.colors.primaryDark};
-    color: white;
+    box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
   `};
 `;
 

diff --git a/website/src/components/chat-button.js b/website/src/components/chat-button.js
@@ -18,9 +18,11 @@ const ChatLink = styled.a`
   font-size: 14px;
   text-align: right;
   display: none;
+  transition: all 0.2s ease-out;
+  box-shadow: 0;
+
   &:hover {
-    box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
-    transform: translateY(-0.25em);
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
   }
   ${mq[1]} {
     display: block;

diff --git a/website/src/components/community-channels-list.js b/website/src/components/community-channels-list.js
@@ -46,7 +46,7 @@ function CommunityChannelsList({ channels }) {
     <StyledCommunityChannelsList>
       {channels.map(({ title, description, url }, idx) => (
         <li key={idx}>
-          <a href={url} target="_blank" rel="noopener noreferrer">
+          <a href={url} rel="noopener noreferrer">
             <strong>{title}</strong>
             <p>{description}</p>
           </a>