@vicacha-devs/strapi-plugin-seo 0.0.0-stage → 2.1.0

package/dist/admin/index-DgvE6ytW.js

@@ -0,0 +1,571 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Layouts, useNotification, ContentBox, useFetchClient, private_useAutoReloadOverlayBlocker, Page, private_AutoReloadOverlayBlockerProvider } from "@strapi/strapi/admin";
+import { NavLink, Routes, Route } from "react-router-dom";
+import { g as getTrad, u as useSettingsApi, I as Illo, p as pluginId, a as pluginPermissions } from "./index-CJ64dp6B.js";
+import { Box, Flex, LinkButton, Modal, Button, Typography, Grid, Switch, Tabs, Table, Thead, Tr, Th, Tbody, Td, EmptyStateLayout } from "@strapi/design-system";
+import { Pencil, ArrowLeft, Cog, Information, Plus } from "@strapi/icons";
+import * as React from "react";
+import { useIntl } from "react-intl";
+const SEO_COMPONENT_PATH = "/plugins/content-type-builder/component-categories/shared/shared.seo";
+const Header = ({ seoComponent }) => {
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsx(Box, { background: "neutral100", children: /* @__PURE__ */ jsx(
+    Layouts.Header,
+    {
+      primaryAction: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+        seoComponent ? /* @__PURE__ */ jsx(
+          LinkButton,
+          {
+            variant: "secondary",
+            tag: NavLink,
+            to: SEO_COMPONENT_PATH,
+            startIcon: /* @__PURE__ */ jsx(Pencil, {}),
+            children: formatMessage({
+              id: getTrad("SEOPage.header.button.edit-component"),
+              defaultMessage: "Edit SEO component"
+            })
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          LinkButton,
+          {
+            tag: NavLink,
+            variant: "tertiary",
+            to: "/",
+            startIcon: /* @__PURE__ */ jsx(ArrowLeft, {}),
+            children: formatMessage({
+              id: getTrad("SEOPage.header.button.back"),
+              defaultMessage: "Back"
+            })
+          }
+        )
+      ] }),
+      title: formatMessage({
+        id: getTrad("SEOPage.header.title"),
+        defaultMessage: "SEO"
+      }),
+      subtitle: formatMessage({
+        id: getTrad("SEOPage.header.subtitle"),
+        defaultMessage: "Optimize your content to be SEO friendly"
+      }),
+      as: "h2"
+    }
+  ) });
+};
+const SettingsModal = ({
+  item,
+  defaultSettings: sharedSettings = null,
+  onSettingsUpdated
+}) => {
+  const { toggleNotification } = useNotification();
+  const { formatMessage } = useIntl();
+  const { getSettings, setSettings } = useSettingsApi();
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [metaTitle, setMetaTitle] = React.useState(true);
+  const [metaDescription, setMetaDescription] = React.useState(true);
+  const [metaRobots, setMetaRobots] = React.useState(true);
+  const [openGraph, setOpenGraph] = React.useState(true);
+  const [wordCount, setWordCount] = React.useState(true);
+  const [canonicalUrl, setCanonicalUrl] = React.useState(true);
+  const [keywordDensity, setKeywordDensity] = React.useState(true);
+  const [structuredData, setStructuredData] = React.useState(true);
+  const [alternativeText, setAlternativeText] = React.useState(true);
+  const [lastUpdatedAt, setLastUpdatedAt] = React.useState(true);
+  const [localSettings, setLocalSettings] = React.useState(sharedSettings);
+  const activeSettings = sharedSettings ?? localSettings;
+  const applyChecksToState = (settingsMap) => {
+    const seoChecks = settingsMap?.[item?.uid]?.seoChecks;
+    if (!seoChecks) {
+      return;
+    }
+    setMetaTitle(seoChecks.metaTitle);
+    setMetaDescription(seoChecks.metaDescription);
+    setMetaRobots(seoChecks.metaRobots);
+    setOpenGraph(seoChecks.openGraph);
+    setWordCount(seoChecks.wordCount);
+    setCanonicalUrl(seoChecks.canonicalUrl);
+    setKeywordDensity(seoChecks.keywordDensity);
+    setStructuredData(seoChecks.structuredData);
+    setAlternativeText(seoChecks.alternativeText);
+    setLastUpdatedAt(seoChecks.lastUpdatedAt);
+  };
+  const setupModalSettings = async () => {
+    if (activeSettings) {
+      applyChecksToState(activeSettings);
+      return;
+    }
+    try {
+      const { data } = await getSettings();
+      setLocalSettings(data);
+      onSettingsUpdated?.(data);
+      applyChecksToState(data);
+    } catch {
+    }
+  };
+  const handleSavingSettingsModal = async () => {
+    const baseSettings = activeSettings ?? {};
+    const collectionName = baseSettings?.[item?.uid]?.collectionName ?? item?.globalId ?? item?.uid;
+    const newSettings = {
+      ...baseSettings,
+      [item?.uid]: {
+        collectionName,
+        seoChecks: {
+          metaTitle,
+          metaDescription,
+          metaRobots,
+          openGraph,
+          wordCount,
+          canonicalUrl,
+          keywordDensity,
+          structuredData,
+          alternativeText,
+          lastUpdatedAt
+        }
+      }
+    };
+    try {
+      const { data: savedSettings } = await setSettings(newSettings);
+      const resolvedSettings = savedSettings ?? newSettings;
+      setLocalSettings(resolvedSettings);
+      onSettingsUpdated?.(resolvedSettings);
+      setIsOpen(false);
+      toggleNotification({
+        type: "success",
+        message: formatMessage(
+          {
+            id: getTrad("notification.success.settings"),
+            defaultMessage: "Settings saved for {collectionName} content-type."
+          },
+          { collectionName }
+        )
+      });
+    } catch {
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({
+          id: getTrad("notification.error.settings"),
+          defaultMessage: "Failed to save SEO settings."
+        })
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs(Modal.Root, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsx(Modal.Trigger, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "tertiary",
+        startIcon: /* @__PURE__ */ jsx(Cog, {}),
+        onClick: () => void setupModalSettings(),
+        children: formatMessage({
+          id: getTrad("SEOPage.info.settings"),
+          defaultMessage: "Settings"
+        })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(Modal.Content, { labelledBy: "title", children: [
+      /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(
+        Typography,
+        {
+          fontWeight: "bold",
+          textColor: "neutral800",
+          tag: "h2",
+          id: "title",
+          children: formatMessage({
+            id: getTrad("SEOPage.info.settings"),
+            defaultMessage: "Settings"
+          })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        "form",
+        {
+          onSubmit: (event) => {
+            event.preventDefault();
+            void handleSavingSettingsModal();
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Modal.Body, { children: [
+              /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(
+                ContentBox,
+                {
+                  title: formatMessage({
+                    id: getTrad("Information"),
+                    defaultMessage: "Information"
+                  }),
+                  subtitle: formatMessage({
+                    id: getTrad("SEOPage.info.settings.information"),
+                    defaultMessage: "Disable SEO checks for this specific content-type."
+                  }),
+                  icon: /* @__PURE__ */ jsx(Information, {}),
+                  iconBackground: "primary100"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Grid.Root, { gap: 4, children: [
+                {
+                  state: metaTitle,
+                  stateSetter: setMetaTitle,
+                  id: "SEOPage.info.settings.meta-title-check",
+                  defaultMessage: "Meta Title"
+                },
+                {
+                  state: metaDescription,
+                  stateSetter: setMetaDescription,
+                  id: "SEOPage.info.settings.meta-description-check",
+                  defaultMessage: "Meta Description"
+                },
+                {
+                  state: metaRobots,
+                  stateSetter: setMetaRobots,
+                  id: "SEOPage.info.settings.meta-robots-check",
+                  defaultMessage: "Meta Robots"
+                },
+                {
+                  state: openGraph,
+                  stateSetter: setOpenGraph,
+                  id: "SEOPage.info.settings.open-graph-check",
+                  defaultMessage: "Open Graph"
+                },
+                {
+                  state: wordCount,
+                  stateSetter: setWordCount,
+                  id: "SEOPage.info.settings.word-count-check",
+                  defaultMessage: "Word Count"
+                },
+                {
+                  state: canonicalUrl,
+                  stateSetter: setCanonicalUrl,
+                  id: "SEOPage.info.settings.canonical-url-check",
+                  defaultMessage: "Canonical URL"
+                },
+                {
+                  state: keywordDensity,
+                  stateSetter: setKeywordDensity,
+                  id: "SEOPage.info.settings.keyword-density-check",
+                  defaultMessage: "Keyword Density"
+                },
+                {
+                  state: structuredData,
+                  stateSetter: setStructuredData,
+                  id: "SEOPage.info.settings.structured-data-check",
+                  defaultMessage: "Structured Data"
+                },
+                {
+                  state: alternativeText,
+                  stateSetter: setAlternativeText,
+                  id: "SEOPage.info.settings.alternative-text-check",
+                  defaultMessage: "Alt Text"
+                },
+                {
+                  state: lastUpdatedAt,
+                  stateSetter: setLastUpdatedAt,
+                  id: "SEOPage.info.settings.last-updated-at-check",
+                  defaultMessage: "Last Updated At"
+                }
+              ].map(({ state, stateSetter, id, defaultMessage }) => {
+                return /* @__PURE__ */ jsxs(
+                  Grid.Item,
+                  {
+                    col: 6,
+                    s: 6,
+                    gap: 2,
+                    padding: 4,
+                    background: "neutral0",
+                    borderWidth: "2px",
+                    shadow: "filterShadow",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Switch,
+                        {
+                          checked: state,
+                          onCheckedChange: () => stateSetter((isChecked) => !isChecked)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Typography, { variant: "delta", children: formatMessage({
+                        id: getTrad(id),
+                        defaultMessage
+                      }) })
+                    ]
+                  },
+                  id
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+              /* @__PURE__ */ jsx(Modal.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", children: formatMessage({
+                id: getTrad("SEOPage.info.settings.cancel.button"),
+                defaultMessage: "Cancel"
+              }) }) }),
+              /* @__PURE__ */ jsx(Button, { type: "submit", children: formatMessage({
+                id: getTrad("SEOPage.info.settings.save.button"),
+                defaultMessage: "Save"
+              }) })
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+const ContentTypeRow = ({
+  item,
+  defaultSettings,
+  onSettingsUpdated
+}) => {
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsxs(Tr, { children: [
+    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: item.globalId }) }),
+    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", alignItems: "center", children: item.seo ? /* @__PURE__ */ jsx(
+      SettingsModal,
+      {
+        item,
+        defaultSettings,
+        onSettingsUpdated
+      }
+    ) : /* @__PURE__ */ jsx(
+      LinkButton,
+      {
+        startIcon: /* @__PURE__ */ jsx(Plus, {}),
+        variant: "secondary",
+        tag: NavLink,
+        to: `/plugins/content-type-builder/content-types/${item.uid}`,
+        children: formatMessage({
+          id: getTrad("SEOPage.info.add"),
+          defaultMessage: "Add component"
+        })
+      }
+    ) }) })
+  ] }, item.uid);
+};
+const ContentTypeTabTable = ({
+  items,
+  emptyMessageId,
+  emptyDefaultMessage,
+  createLinkTo,
+  createButtonId,
+  createButtonDefaultMessage,
+  defaultSettings,
+  onSettingsUpdated
+}) => {
+  const { formatMessage } = useIntl();
+  const safeItems = Array.isArray(items) ? items : [];
+  const createAction = createLinkTo && createButtonId ? /* @__PURE__ */ jsx(
+    LinkButton,
+    {
+      tag: NavLink,
+      to: createLinkTo,
+      variant: "secondary",
+      startIcon: /* @__PURE__ */ jsx(Plus, {}),
+      children: formatMessage({
+        id: getTrad(createButtonId),
+        defaultMessage: createButtonDefaultMessage
+      })
+    }
+  ) : void 0;
+  return /* @__PURE__ */ jsxs(Table, { colCount: 2, rowCount: Math.max(safeItems.length, 1), children: [
+    /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: formatMessage({
+        id: getTrad("SEOPage.tab-panel.column-name"),
+        defaultMessage: "Name"
+      }) }) }),
+      /* @__PURE__ */ jsx(Th, {})
+    ] }) }),
+    /* @__PURE__ */ jsx(Tbody, { children: safeItems.length > 0 ? safeItems.map((item) => /* @__PURE__ */ jsx(
+      ContentTypeRow,
+      {
+        item,
+        defaultSettings,
+        onSettingsUpdated
+      },
+      item.uid
+    )) : /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan: 2, children: /* @__PURE__ */ jsx(Box, { padding: 8, background: "neutral0", children: /* @__PURE__ */ jsx(
+      EmptyStateLayout,
+      {
+        icon: /* @__PURE__ */ jsx(Illo, {}),
+        content: formatMessage({
+          id: getTrad(emptyMessageId),
+          defaultMessage: emptyDefaultMessage
+        }),
+        action: createAction
+      }
+    ) }) }) }) })
+  ] });
+};
+const Main = ({ contentTypes }) => {
+  const { formatMessage } = useIntl();
+  const { getSettings } = useSettingsApi();
+  const [defaultSettings, setDefaultSettings] = React.useState(null);
+  React.useEffect(() => {
+    let isMounted = true;
+    void getSettings().then(({ data }) => {
+      if (isMounted && data) {
+        setDefaultSettings(data);
+      }
+    }).catch(() => {
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+  const TabValues = {
+    collectionTypes: "collection-types",
+    singleTypes: "single-types",
+    plugins: "plugins"
+  };
+  return /* @__PURE__ */ jsx(Box, { padding: 8, children: /* @__PURE__ */ jsxs(
+    Tabs.Root,
+    {
+      id: "tabs",
+      variant: "simple",
+      defaultValue: TabValues.collectionTypes,
+      children: [
+        /* @__PURE__ */ jsxs(Tabs.List, { children: [
+          /* @__PURE__ */ jsx(Tabs.Trigger, { value: TabValues.collectionTypes, children: /* @__PURE__ */ jsx(Typography, { children: formatMessage({
+            id: getTrad("SEOPage.tab.collection-type-title"),
+            defaultMessage: "Collection Types"
+          }) }) }),
+          /* @__PURE__ */ jsx(Tabs.Trigger, { value: TabValues.singleTypes, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: formatMessage({
+            id: getTrad("SEOPage.tab.single-type-title"),
+            defaultMessage: "Single Types"
+          }) }) }),
+          /* @__PURE__ */ jsx(Tabs.Trigger, { value: TabValues.plugins, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: formatMessage({
+            id: getTrad("SEOPage.tab.plugin-title"),
+            defaultMessage: "Plugins"
+          }) }) })
+        ] }),
+        /* @__PURE__ */ jsx(Tabs.Content, { value: TabValues.collectionTypes, children: /* @__PURE__ */ jsx(
+          ContentTypeTabTable,
+          {
+            items: contentTypes?.collectionTypes,
+            emptyMessageId: "SEOPage.info.no-collection-types",
+            emptyDefaultMessage: "You don't have any collection-types yet...",
+            createLinkTo: "/plugins/content-type-builder",
+            createButtonId: "SEOPage.info.create-collection-type",
+            createButtonDefaultMessage: "Create your first collection-type",
+            defaultSettings,
+            onSettingsUpdated: setDefaultSettings
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Tabs.Content, { value: TabValues.singleTypes, children: /* @__PURE__ */ jsx(
+          ContentTypeTabTable,
+          {
+            items: contentTypes?.singleTypes,
+            emptyMessageId: "SEOPage.info.no-single-types",
+            emptyDefaultMessage: "You don't have any single-types yet...",
+            createLinkTo: "/plugins/content-type-builder",
+            createButtonId: "SEOPage.info.create-single-type",
+            createButtonDefaultMessage: "Create your first single-type",
+            defaultSettings,
+            onSettingsUpdated: setDefaultSettings
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Tabs.Content, { value: TabValues.plugins, children: /* @__PURE__ */ jsx(
+          ContentTypeTabTable,
+          {
+            items: contentTypes?.plugins,
+            emptyMessageId: "SEOPage.info.no-plugin-content-type",
+            emptyDefaultMessage: "You don't have any plugin content-type yet...",
+            defaultSettings,
+            onSettingsUpdated: setDefaultSettings
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+const HomePage = React.memo(() => {
+  const { get, post } = useFetchClient();
+  const { lockAppWithAutoreload, unlockAppWithAutoreload } = private_useAutoReloadOverlayBlocker();
+  const { formatMessage } = useIntl();
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [seoComponent, setSeoComponent] = React.useState(null);
+  const [contentTypes, setContentTypes] = React.useState(null);
+  React.useEffect(() => {
+    let isMounted = true;
+    const fetchSeoComponent = async () => {
+      try {
+        const { data } = await get(
+          `/${pluginId}/component`
+        );
+        return data;
+      } catch {
+        return null;
+      }
+    };
+    const fetchContentTypes = async () => {
+      try {
+        const { data } = await get(
+          `/${pluginId}/content-types`
+        );
+        return data;
+      } catch {
+        return null;
+      }
+    };
+    const createSeoComponent = async () => {
+      try {
+        const { data } = await post(
+          `/${pluginId}/component`
+        );
+        return data;
+      } catch {
+        return null;
+      }
+    };
+    const fetchData = async () => {
+      let currentComponent = await fetchSeoComponent();
+      let currentContentTypes = await fetchContentTypes();
+      const hasNoSeoComponent = !currentComponent || Object.keys(currentComponent).length === 0;
+      if (hasNoSeoComponent) {
+        try {
+          lockAppWithAutoreload();
+          await createSeoComponent();
+        } catch {
+        } finally {
+          unlockAppWithAutoreload();
+        }
+        currentComponent = await fetchSeoComponent();
+        currentContentTypes = await fetchContentTypes();
+      }
+      if (isMounted) {
+        setSeoComponent(currentComponent);
+        setContentTypes(currentContentTypes);
+        setIsLoading(false);
+      }
+    };
+    void fetchData();
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Page.Loading, {});
+  }
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsx(Header, { seoComponent }),
+    /* @__PURE__ */ jsx(Box, { paddingLeft: 8, paddingRight: 8, children: /* @__PURE__ */ jsx(
+      ContentBox,
+      {
+        title: formatMessage({
+          id: getTrad("Information"),
+          defaultMessage: "Information"
+        }),
+        subtitle: formatMessage({
+          id: getTrad("SEOPage.info.information"),
+          defaultMessage: "When adding your SEO component, make sure to name it 'seo' and to include it in the root of your Content-Type."
+        }),
+        icon: /* @__PURE__ */ jsx(Information, {}),
+        iconBackground: "primary100"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Main, { contentTypes })
+  ] });
+});
+const App = () => {
+  return /* @__PURE__ */ jsx(private_AutoReloadOverlayBlockerProvider, { children: /* @__PURE__ */ jsx(Page.Protect, { permissions: pluginPermissions.main, children: /* @__PURE__ */ jsxs(Routes, { children: [
+    /* @__PURE__ */ jsx(Route, { index: true, element: /* @__PURE__ */ jsx(HomePage, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: "*", element: /* @__PURE__ */ jsx(Page.Error, {}) })
+  ] }) }) });
+};
+export {
+  App as default
+};

package/dist/admin/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+require("@strapi/icons");
+const index = require("./index-C8tiCtgn.cjs");
+exports.default = index.index;

package/dist/admin/index.d.ts

@@ -0,0 +1,18 @@
+interface StrapiAdminApp {
+    addMenuLink: (link: Record<string, unknown>) => void;
+    registerPlugin: (plugin: Record<string, unknown>) => void;
+    getPlugin: (name: string) => {
+        injectComponent: (containerName: string, blockName: string, component: Record<string, unknown>) => void;
+    };
+}
+declare const _default: {
+    register(app: StrapiAdminApp): void;
+    bootstrap(app: StrapiAdminApp): void;
+    registerTrads: ({ locales, }?: {
+        locales?: string[];
+    }) => Promise<Array<{
+        data: Record<string, string>;
+        locale: string;
+    }>>;
+};
+export default _default;

package/dist/admin/index.js

@@ -0,0 +1,5 @@
+import "@strapi/icons";
+import { i } from "./index-CJ64dp6B.js";
+export {
+  i as default
+};

package/dist/admin/index.mjs

@@ -0,0 +1,5 @@
+import "@strapi/icons";
+import { i } from "./index-CJ64dp6B.js";
+export {
+  i as default
+};

package/dist/admin/pages/App/index.d.ts

@@ -0,0 +1,2 @@
+declare const App: () => import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/admin/pages/HomePage/index.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const HomePage: React.FC<{}>;

package/dist/admin/permissions.d.ts

@@ -0,0 +1,10 @@
+export declare const pluginPermissions: {
+    main: {
+        action: string;
+        subject: null;
+    }[];
+    settings: {
+        action: string;
+        subject: null;
+    }[];
+};

package/dist/admin/pluginId.d.ts

@@ -0,0 +1 @@
+export declare const pluginId: string;