Merge pull request #32 from strapi/1.8

1.8

admin/src/api/settings/index.js

@@ -0,0 +1,17 @@
+import { request } from '@strapi/helper-plugin';
+
+const settings = {
+  get: async () => {
+    const data = await request(`/seo/settings`, {
+      method: 'GET',
+    });
+    return data;
+  },
+  set: async (data) => {
+    return await request(`/seo/settings`, {
+      method: 'POST',
+      body: data,
+    });
+  }
+};
+export default settings;

admin/src/components/CMEditView/RightLinksCompo/Summary/SeoChecks/AlternativeTextCheck/index.js → admin/src/components/CMEditView/RightLinksCompo/SeoChecks/AlternativeTextCheck/index.js

@@ -6,15 +6,16 @@ import { Box } from '@strapi/design-system/Box';
 import { Icon } from '@strapi/design-system/Icon';
 import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
+import { Status } from '@strapi/design-system';
 
 import { useIntl } from 'react-intl';
-import { getTrad } from '../../../../../../utils';
+import { getTrad } from '../../../../../utils';
 
 import Dot from '@strapi/icons/Dot';
 
 import SEOAccordion from '../SEOAccordion';
 
-import { SeoCheckerContext } from '../../../Summary';
+import { SeoCheckerContext } from '../../Summary';
 
 const AlternativeTextCheck = ({
   intersections,
@@ -76,7 +77,10 @@ const AlternativeTextCheck = ({
 
   return (
     <SEOAccordion
-      title={formatMessage({id: getTrad('SEOModal.summary-title.alt-attributes'), defaultMessage: 'Alt'})}
+      title={formatMessage({
+        id: getTrad('SEOModal.summary-title.alt-attributes'),
+        defaultMessage: 'Alternative Text',
+      })}
       status={checks.alternativeText}
       label={formatMessage({
         id: getTrad('SEOChecks.alternativeTextCheck.label'),
@@ -88,10 +92,10 @@ const AlternativeTextCheck = ({
           {richTextAlts.map((alt, index) => (
             <Stack
               key={index}
-              size={2}
+              spacing={2}
               horizontal
               background="neutral0"
-              padding={3}
+              padding={2}
             >
               <Icon
                 aria-hidden={true}
@@ -105,17 +109,36 @@ const AlternativeTextCheck = ({
                 })}
                 as={Dot}
               />
+
               <Typography>
-                {alt.occurences}{' '}
+                <Typography fontWeight="bold">{alt.occurences} </Typography>
                 {formatMessage({
                   id: getTrad('SEOChecks.alternativeTextCheck.missing-text'),
                   defaultMessage:
                     'missing alt in the following richtext field:',
-                })}{' '}
-                {alt.field}
+                })}
+                <Typography fontWeight="bold"> {alt.field}</Typography>
               </Typography>
             </Stack>
           ))}
+          <Stack
+            spacing={2}
+            paddingTop={4}
+            paddingLeft={2}
+            paddingRight={2}
+            paddingBottom={4}
+          >
+            <Status variant="secondary" showBullet={false}>
+              <Typography>
+                <Typography fontWeight="bold">Tip: </Typography>
+                Implement a rule in your front-end code that uses the name of
+                your images if the
+                <Typography fontWeight="bold"> alternativeText </Typography>
+                field is empty to further reduce the risk of an empty alt
+                attribute on your website.
+              </Typography>
+            </Status>
+          </Stack>
         </Box>
       }
     />

admin/src/components/CMEditView/RightLinksCompo/Summary/SeoChecks/CanonicalUrlCheck/index.js → admin/src/components/CMEditView/RightLinksCompo/SeoChecks/CanonicalUrlCheck/index.js

@@ -3,14 +3,15 @@ import React, { useContext, useEffect } from 'react';
 import _ from 'lodash';
 
 import { useIntl } from 'react-intl';
-import { getTrad } from '../../../../../../utils';
+import { getTrad } from '../../../../../utils';
 
 import { Box } from '@strapi/design-system/Box';
 import { Typography } from '@strapi/design-system/Typography';
 
 import SEOAccordion from '../SEOAccordion';
 
-import { SeoCheckerContext } from '../../../Summary';
+import { SeoCheckerContext } from '../../Summary';
+
 
 const CanonicalUrlCheck = ({ canonicalUrl, checks }) => {
   const { formatMessage } = useIntl();
@@ -43,24 +44,23 @@ const CanonicalUrlCheck = ({ canonicalUrl, checks }) => {
 
   return (
     <SEOAccordion
-    title={formatMessage({id: getTrad('SEOModal.summary-title.canonical-url'), defaultMessage: 'Canonical URL'})}
+      title={formatMessage({
+        id: getTrad('SEOModal.summary-title.canonical-url'),
+        defaultMessage: 'Canonical URL',
+      })}
       status={checks.canonicalUrl}
       label={formatMessage({
         id: getTrad('SEOChecks.canonicalUrlCheck.label'),
         defaultMessage: 'This will check if you have a canonical URL.',
       })}
       component={
-        canonicalUrl && (
-          <Box padding={2}>
-            <Typography variant="omega">
-              {formatMessage({
-                id: getTrad('SEOChecks.canonicalUrlCheck.url'),
-                defaultMessage: 'Canonical URL:',
-              })}{' '}
+        <Box padding={canonicalUrl ? 4 : 2}>
+          {canonicalUrl && (
+            <Typography variant="omega" fontWeight="bold">
               {canonicalUrl}
             </Typography>
-          </Box>
-        )
+          )}
+        </Box>
       }
     />
   );

admin/src/components/CMEditView/RightLinksCompo/Summary/SeoChecks/KeywordDensityCheck/index.js → admin/src/components/CMEditView/RightLinksCompo/SeoChecks/KeywordDensityCheck/index.js

@@ -7,11 +7,11 @@ import { Flex } from '@strapi/design-system/Flex';
 import { Badge } from '@strapi/design-system/Badge';
 
 import { useIntl } from 'react-intl';
-import { getTrad } from '../../../../../../utils';
+import { getTrad } from '../../../../../utils';
 
 import SEOAccordion from '../SEOAccordion';
 
-import { SeoCheckerContext } from '../../../Summary';
+import { SeoCheckerContext } from '../../Summary';
 
 const KeywordDensityCheck = ({ keywordsDensity, checks }) => {
   const { formatMessage } = useIntl();
@@ -63,8 +63,6 @@ const KeywordDensityCheck = ({ keywordsDensity, checks }) => {
       });
   }, []);
 
-  console.log(checks);
-
   return (
     <SEOAccordion
     title={formatMessage({id: getTrad('SEOModal.summary-title.word-densisty'), defaultMessage: 'Keyword Density'})}
@@ -80,7 +78,7 @@ const KeywordDensityCheck = ({ keywordsDensity, checks }) => {
           <Box padding={2}>
             <Flex>
               {Object.keys(keywordsDensity).map((keyword) => (
-                <Box padding={1} key={keyword}>
+                <Box padding={2} key={keyword}>
                   <Badge>
                     {`${keyword}:
                       ${_.get(

admin/src/components/CMEditView/RightLinksCompo/Summary/SeoChecks/LastUpdatedAtCheck/index.js → admin/src/components/CMEditView/RightLinksCompo/SeoChecks/LastUpdatedAtCheck/index.js

@@ -1,16 +1,18 @@
 import React, { useContext, useEffect } from 'react';
 
+import { formatDistance, subDays } from 'date-fns';
+
 import _ from 'lodash';
 
 import { Box } from '@strapi/design-system/Box';
 import { Typography } from '@strapi/design-system/Typography';
 
 import { useIntl } from 'react-intl';
-import { getTrad } from '../../../../../../utils';
+import { getTrad } from '../../../../../utils';
 
 import SEOAccordion from '../SEOAccordion';
 
-import { SeoCheckerContext } from '../../../Summary';
+import { SeoCheckerContext } from '../../Summary';
 
 const LastUpdatedAtCheck = ({ updatedAt, checks }) => {
   const { formatMessage } = useIntl();
@@ -58,7 +60,10 @@ const LastUpdatedAtCheck = ({ updatedAt, checks }) => {
 
   return (
     <SEOAccordion
-    title={formatMessage({id: getTrad('SEOModal.summary-title.last-updated-at'), defaultMessage: 'Last updated at'})}
+      title={formatMessage({
+        id: getTrad('SEOModal.summary-title.last-updated-at'),
+        defaultMessage: 'Last updated at',
+      })}
       label={formatMessage({
         id: getTrad('SEOChecks.lastUpdatedAtCheck.label'),
         defaultMessage:
@@ -67,13 +72,18 @@ const LastUpdatedAtCheck = ({ updatedAt, checks }) => {
       status={checks.lastUpdatedAt}
       component={
         updatedAt && (
-          <Box padding={2}>
+          <Box padding={4}>
             <Typography variant="omega">
               {formatMessage({
                 id: getTrad('SEOChecks.lastUpdatedAtCheck.last"'),
                 defaultMessage: 'Last updated at:',
               })}{' '}
-              {updatedAt}
+              <Typography variant="omega" fontWeight="bold">
+                {' '}
+                {formatDistance(new Date(updatedAt), new Date(), {
+                  addSuffix: true,
+                })}
+              </Typography>
             </Typography>
           </Box>
         )

admin/src/components/CMEditView/RightLinksCompo/Summary/SeoChecks/MetaDescriptionCheck/index.js → admin/src/components/CMEditView/RightLinksCompo/SeoChecks/MetaDescriptionCheck/index.js

@@ -3,19 +3,24 @@ import React, { useContext, useEffect } from 'react';
 import _ from 'lodash';
 
 import { useIntl } from 'react-intl';
-import { getTrad } from '../../../../../../utils';
+import { getTrad } from '../../../../../utils';
 
 import { Box } from '@strapi/design-system/Box';
+import { Stack } from '@strapi/design-system/Stack';
+import { ProgressBar } from '@strapi/design-system';
 import { Typography } from '@strapi/design-system/Typography';
 
 import SEOAccordion from '../SEOAccordion';
 
-import { SeoCheckerContext } from '../../../Summary';
+import { SeoCheckerContext } from '../../Summary';
 
 const MetaDescriptionCheck = ({ metaDescription, checks }) => {
   const { formatMessage } = useIntl();
   const dispatch = useContext(SeoCheckerContext);
 
+  const maxLength = 160;
+  const minimumLength = 50;
+
   let status = {
     message: formatMessage({
       id: getTrad('SEOChecks.metaDescriptionCheck.default'),
@@ -33,15 +38,15 @@ const MetaDescriptionCheck = ({ metaDescription, checks }) => {
         }),
         color: 'danger',
       };
-    } else if (metaDescription.length > 160) {
+    } else if (metaDescription.length > maxLength) {
       status = {
         message: formatMessage({
           id: getTrad('Title-settings.metaDescription-too-long'),
           defaultMessage: 'Meta Description is too long',
         }),
         color: 'warning',
       };
-    } else if (metaDescription.length < 50) {
+    } else if (metaDescription.length < minimumLength) {
       status = {
         message: formatMessage({
           id: getTrad('Title-settings.metaDescription-too-short'),
@@ -59,19 +64,35 @@ const MetaDescriptionCheck = ({ metaDescription, checks }) => {
 
   return (
     <SEOAccordion
-    title={formatMessage({id: getTrad('SEOModal.summary-title.meta-description'), defaultMessage: 'Meta description'})}
+      title={formatMessage({
+        id: getTrad('SEOModal.summary-title.meta-description'),
+        defaultMessage: 'Meta description',
+      })}
       status={checks.metaDescription}
       label={formatMessage({
         id: getTrad('Title-settings.metaDescription-tooltip'),
-        defaultMessage:
-          'A meta description is an HTML tag used to describe the content of a web page.\n This description appears below the title and URL of your page as it appears in search engine results.\n For it to remain visible in Google, it must not exceed 140-160 characters.',
+        defaultMessage: `A meta description is an HTML tag used to describe the content of a web page.\n This description appears below the title and URL of your page as it appears in search engine results.\n For it to remain visible in Google, it must not exceed 140-${maxLength} characters.`,
       })}
       component={
         metaDescription && (
-          <Box padding={2}>
-            <Typography variant="omega">
-              {metaDescription} ({metaDescription.length}/160)
+          <Box padding={4}>
+            <Typography variant="omega" fontWeight="semiBold">
+              {metaDescription}
             </Typography>
+            <Box paddingTop={2}>
+              <Stack horizontal spacing={2}>
+                <ProgressBar
+                  value={
+                    (metaDescription.length * 100) / maxLength > 100
+                      ? 100
+                      : (metaDescription.length * 100) / maxLength
+                  }
+                ></ProgressBar>
+                <Typography variant="pi" padding={2}>
+                  ({metaDescription.length}/{maxLength})
+                </Typography>
+              </Stack>
+            </Box>
           </Box>
         )
       }

admin/src/components/CMEditView/RightLinksCompo/Summary/SeoChecks/MetaRobotCheck/index.js → admin/src/components/CMEditView/RightLinksCompo/SeoChecks/MetaRobotCheck/index.js

@@ -3,18 +3,20 @@ import React, { useContext, useState, useEffect } from 'react';
 import _ from 'lodash';
 
 import { useIntl } from 'react-intl';
-import { getTrad } from '../../../../../../utils';
+import { getTrad } from '../../../../../utils';
 
 import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
+import { Status } from '@strapi/design-system';
 import { Icon } from '@strapi/design-system/Icon';
+import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
 
+
 import Dot from '@strapi/icons/Dot';
 
 import SEOAccordion from '../SEOAccordion';
 
-import { SeoCheckerContext } from '../../../Summary';
+import { SeoCheckerContext } from '../../Summary';
 
 const robotTags = [
   { name: 'noindex', message: 'Search engines will index this page.' },
@@ -72,7 +74,10 @@ const MetaRobotCheck = ({ metaRobots, checks }) => {
 
   return (
     <SEOAccordion
-    title={formatMessage({id: getTrad('SEOModal.summary-title.meta-robots'), defaultMessage: 'Meta Robots'})}
+      title={formatMessage({
+        id: getTrad('SEOModal.summary-title.meta-robots'),
+        defaultMessage: 'Meta Robots',
+      })}
       status={checks.metaRobots}
       label={formatMessage({
         id: getTrad('SEOChecks.metaRobotsCheck.label'),
@@ -83,11 +88,11 @@ const MetaRobotCheck = ({ metaRobots, checks }) => {
         <Box padding={2}>
           {robotTags.map((tag, index) => (
             <Stack
-              size={2}
+              spacing={2}
               key={index}
               horizontal
               background="neutral0"
-              padding={3}
+              padding={2}
             >
               <Icon
                 aria-hidden={true}
@@ -113,6 +118,22 @@ const MetaRobotCheck = ({ metaRobots, checks }) => {
               </Typography>
             </Stack>
           ))}
+          <Stack
+            spacing={2}
+            paddingTop={4}
+            paddingLeft={2}
+            paddingRight={2}
+            paddingBottom={4}
+          >
+            <Status variant="secondary" showBullet={false}>
+              <Typography>
+                <Typography fontWeight="bold">Notice: </Typography>
+                In order to not index your entry and no follow, your MetaRobots field should contain the following:
+                <Typography fontWeight="bold"> noindex, nofollow </Typography>.
+                The rest should be handled by your front-end code logic. "If the field contains noindex, then you need to create the corresponding meta tag etc..."
+              </Typography>
+            </Status>
+          </Stack>
         </Box>
       }
     />