feat: site settings to manage title, logo, favicon

RedTurtle · Jul 11, 2024 · 723241d · 723241d
1 parent 15522c7
commit 723241d
Show file tree

Hide file tree

Showing 15 changed files with 160 additions and 50 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -42,6 +42,13 @@
 -->
 
 ## Versione X.X.X (dd/mm/yyyy)
+## Versione x.x.x (dd/MM/yyyy)
+
+### Novità
+
+- Ora il titolo, sottotitolo, favicon, logo e logo del footer sono editabili dal pannello di controllo del Sito. Se non impostati, verranno usati quelli definiti dagli sviluppatori.
+
+## Versione 11.16.0 (10/07/2024)
 
 ### Migliorie
 

diff --git a/locales/volto.pot b/locales/volto.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-06-25T15:14:34.369Z\n"
+"POT-Creation-Date: 2024-07-11T09:43:58.809Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
 "MIME-Version: 1.0\n"

diff --git a/package.json b/package.json
@@ -36,7 +36,8 @@
     "volto-querywidget-with-browser",
     "@eeacms/volto-taxonomy",
     "volto-feedback",
-    "volto-slimheader"
+    "volto-slimheader",
+    "volto-site-settings"
   ],
   "scripts": {
     "prepare": "husky install",
@@ -158,11 +159,12 @@
     "volto-querywidget-with-browser": "0.4.2",
     "volto-rss-block": "3.0.0",
     "volto-secondarymenu": "4.1.1",
+    "volto-site-settings": "0.4.3",
     "volto-slimheader": "0.1.2",
     "volto-social-settings": "3.0.0",
     "volto-subblocks": "2.1.0",
     "volto-subfooter": "3.1.1",
-    "volto-subsites": "4.0.1",
+    "volto-subsites": "4.0.2",
     "volto-venue": "4.1.0",
     "webpack-image-resize-loader": "^5.0.0"
   },

diff --git a/src/components/ItaliaTheme/AppExtras/GenericAppExtras.jsx b/src/components/ItaliaTheme/AppExtras/GenericAppExtras.jsx
@@ -1,16 +1,13 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { useIntl } from 'react-intl';
 import { useLocation } from 'react-router-dom';
-import { Helmet, BodyClass } from '@plone/volto/helpers';
+import { BodyClass } from '@plone/volto/helpers';
 import { RemoveBodyClass } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 import ScrollToTop from 'design-comuni-plone-theme/components/ItaliaTheme/ScrollToTop/ScrollToTop';
 import { SubsiteLoader } from 'volto-subsites';
 import config from '@plone/volto/registry';
 
 const GenericAppExtras = (props) => {
-  const intl = useIntl();
   const location = useLocation();
 
   const subsite = useSelector((state) => state.subsite?.data);
@@ -19,7 +16,6 @@ const GenericAppExtras = (props) => {
   if (subsiteLoadable) {
     subsiteLoadable.load();
   }
-  const siteTitle = subsite?.title ?? getSiteProperty('siteTitle', intl.locale);
 
   const FORCE_PUBLIC_UI = ['/sitemap', '/search'];
   const isPublicUI = FORCE_PUBLIC_UI.reduce(
@@ -29,7 +25,6 @@ const GenericAppExtras = (props) => {
 
   return (
     <>
-      <Helmet titleTemplate={`%s - ${siteTitle}`} />
       {isPublicUI && (
         <>
           <BodyClass className="public-ui" />

diff --git a/src/components/ItaliaTheme/AppExtras/SiteSettingsExtras.jsx b/src/components/ItaliaTheme/AppExtras/SiteSettingsExtras.jsx
@@ -0,0 +1,35 @@
+/*
+CUSTOMIZATIONS:
+- get defaultValue from siteProperties
+*/
+
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { Helmet } from '@plone/volto/helpers';
+import { SiteProperty } from 'volto-site-settings';
+import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
+
+const SiteSettingsExtras = (props) => {
+  const intl = useIntl();
+  let siteTitle = SiteProperty({
+    property: 'site_title',
+    getValue: true,
+    defaultValue: getSiteProperty('siteTitle', intl.locale),
+  });
+
+  const parentSiteTitle = SiteProperty({
+    property: 'site_title',
+    getValue: true,
+    getParent: true,
+    defaultValue: getSiteProperty('parentSiteTitle', intl.locale),
+  });
+
+  if (parentSiteTitle !== siteTitle) {
+    siteTitle = siteTitle + ' - ' + parentSiteTitle;
+  }
+
+  siteTitle = siteTitle.replaceAll('\\n', ' - ');
+
+  return <Helmet titleTemplate={`%s - ${siteTitle}`} />;
+};
+export default SiteSettingsExtras;
diff --git a/src/components/ItaliaTheme/BrandText/BrandText.jsx b/src/components/ItaliaTheme/BrandText/BrandText.jsx
@@ -1,18 +1,42 @@
 import React from 'react';
 import cx from 'classnames';
 import { useIntl } from 'react-intl';
+import { SiteProperty } from 'volto-site-settings';
 import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 
-const BrandText = ({ mobile = false, subsite }) => {
+const BrandText = ({ mobile = false, getParent = false }) => {
   const intl = useIntl();
+  let title = SiteProperty({
+    property: 'site_title',
+    defaultValue: getSiteProperty('siteTitle', intl.locale),
+    getValue: true,
+    getParent: getParent,
+  });
+
+  const description = SiteProperty({
+    property: 'site_subtitle',
+    defaultValue: getSiteProperty('siteSubtitle', intl.locale),
+    getValue: true,
+    getParent: getParent,
+  });
+  const titleSplit = title?.split('\n') ?? null;
+  title = titleSplit?.map((t, i) => (
+    <>
+      {t}
+      {i < titleSplit.length - 1 && <br />}
+    </>
+  ));
+
   return (
     <div className="it-brand-text">
-      <p className="no_toc h2">
-        {subsite?.title || getSiteProperty('siteTitle', intl.locale)}
-      </p>
-      <p className={cx('no_toc h3', { 'd-none d-md-block': !mobile })}>
-        {subsite?.description || getSiteProperty('siteSubtitle', intl.locale)}
-      </p>
+      {title && <div className="it-brand-title">{title}</div>}
+      {description && (
+        <div
+          className={cx('it-brand-tagline', { 'd-none d-md-block': !mobile })}
+        >
+          {description}
+        </div>
+      )}
     </div>
   );
 };

diff --git a/src/components/ItaliaTheme/BrandTextFooter/BrandTextFooter.jsx b/src/components/ItaliaTheme/BrandTextFooter/BrandTextFooter.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { BrandText } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 const BrandTextFooter = () => {
-  return <BrandText />;
+  return <BrandText getParent={true} />;
 };
 
 export default BrandTextFooter;
diff --git a/src/components/ItaliaTheme/Header/HeaderCenter.jsx b/src/components/ItaliaTheme/Header/HeaderCenter.jsx
@@ -30,14 +30,6 @@ const messages = defineMessages({
 const HeaderCenter = () => {
   const intl = useIntl();
   const subsite = useSelector((state) => state.subsite?.data);
-  const logoSubsite = subsite?.subsite_logo && (
-    <figure className="icon">
-      <img
-        src={flattenToAppURL(subsite.subsite_logo.scales?.mini?.download)}
-        alt={intl.formatMessage(messages.logoSubsiteAlt)}
-      />
-    </figure>
-  );
 
   return (
     <Header small={false} theme="" type="center">
@@ -47,7 +39,9 @@ const HeaderCenter = () => {
             href={subsite?.['@id'] ? flattenToAppURL(subsite['@id']) : '/'}
             title={intl.formatMessage(messages.subsiteUniversalLink)}
           >
-            {subsite?.subsite_logo ? logoSubsite : <Logo />}
+            <Logo
+              alt={subsite ? intl.formatMessage(messages.logoSubsiteAlt) : null}
+            />
             <BrandText subsite={subsite} />
           </UniversalLink>
         </div>

diff --git a/src/components/ItaliaTheme/Header/HeaderSlim/HeaderSlim.jsx b/src/components/ItaliaTheme/Header/HeaderSlim/HeaderSlim.jsx
@@ -14,6 +14,7 @@ import {
 } from 'design-react-kit';
 import { useIntl } from 'react-intl';
 import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
+import { SiteProperty } from 'volto-site-settings';
 
 const HeaderSlim = () => {
   const subsite = useSelector((state) => state.subsite?.data);
@@ -23,9 +24,15 @@ const HeaderSlim = () => {
     ? '/'
     : getSiteProperty('parentSiteURL', intl.locale);
 
-  const parentSiteTile = subsite
-    ? getSiteProperty('subsiteParentSiteTitle', intl.locale)
-    : getSiteProperty('parentSiteTitle', intl.locale);
+  const staticParentSiteTitle = getSiteProperty('parentSiteTitle', intl.locale);
+
+  const parentSiteTile = SiteProperty({
+    property: 'site_title',
+    forceValue: subsite ? null : staticParentSiteTitle,
+    defaultValue: staticParentSiteTitle,
+    getValue: true,
+    getParent: true,
+  });
 
   const target = subsite ? null : '_blank';
   return (
@@ -37,7 +44,7 @@ const HeaderSlim = () => {
           target={target}
           rel="noopener noreferrer"
         >
-          {parentSiteTile}
+          {parentSiteTile.replaceAll('\\n', ' - ')}
         </HeaderBrand>
         <HeaderRightZone>
           <HeaderSlimRightZone />

diff --git a/src/components/ItaliaTheme/Logo/Logo.jsx b/src/components/ItaliaTheme/Logo/Logo.jsx
@@ -10,19 +10,27 @@
  * Note the icon class.
  */
 
-/* SVG example */
-// import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-// const Logo = () => <Icon color="" icon="it-pa" padding={false} size="" />;
+/* SVG example
+ import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+ const Logo = () => <Icon color="" icon="it-pa" padding={false} size="" />;
+*/
 
 /* PNG example using https://www.npmjs.com/package/webpack-image-resize-loader *
  * works, but some issues with prettier and jest
  */
 // eslint-disable-next-line import/no-unresolved
 //import logo from './logo.png?width=164';
 import logo from './logo.png';
+import { SiteProperty } from 'volto-site-settings';
 
-const Logo = () => (
-  <img className="icon" src={logo} width="82" height="82" alt="Logo" />
-);
-
+const Logo = ({ alt = 'Logo' }) => {
+  return (
+    <SiteProperty
+      property="site_logo"
+      defaultValue={{ url: logo, width: 82, height: 82 }}
+      className="icon"
+      alt={alt}
+    />
+  );
+};
 export default Logo;
diff --git a/src/components/ItaliaTheme/LogoFooter/LogoFooter.jsx b/src/components/ItaliaTheme/LogoFooter/LogoFooter.jsx
@@ -12,9 +12,17 @@
 
 // eslint-disable-next-line import/no-unresolved
 import logo from '../Logo/logo.png';
+import { SiteProperty } from 'volto-site-settings';
 
-const LogoFooter = () => (
-  <img className="icon" src={logo} width="82" height="82" alt="Logo" />
-);
+const LogoFooter = () => {
+  return (
+    <SiteProperty
+      property="site_logo_footer"
+      defaultValue={{ url: logo, width: 82, height: 82 }}
+      className="icon"
+      alt="Logo"
+    />
+  );
+};
 
 export default LogoFooter;
diff --git a/src/components/ItaliaTheme/View/ServizioView/ServizioMetatag.jsx b/src/components/ItaliaTheme/View/ServizioView/ServizioMetatag.jsx
@@ -1,4 +1,6 @@
+import { useIntl } from 'react-intl';
 import { Helmet, toPublicURL, isInternalURL } from '@plone/volto/helpers';
+import { SiteProperty } from 'volto-site-settings';
 import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 import { richTextHasContent } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
@@ -17,7 +19,13 @@ const fieldDataToPlainText = (field) => {
 };
 
 const ServizioMetatag = ({ content }) => {
-  const siteTitle = getSiteProperty('siteTitle');
+  const intl = useIntl();
+  let siteTitle = SiteProperty({
+    property: 'site_title',
+    getValue: true,
+    defaultTitle: getSiteProperty('siteTitle', intl.locale),
+  });
+  siteTitle = siteTitle.replaceAll('\\n', ' - ');
 
   const schemaOrg = {
     '@context': 'https://schema.org',

diff --git a/src/config/italiaConfig.js b/src/config/italiaConfig.js
@@ -34,6 +34,8 @@ import HandleAnchor from 'design-comuni-plone-theme/components/ItaliaTheme/AppEx
 import GenericAppExtras from 'design-comuni-plone-theme/components/ItaliaTheme/AppExtras/GenericAppExtras';
 import PageLoader from 'design-comuni-plone-theme/components/ItaliaTheme/AppExtras/PageLoader';
 import TrackFocus from 'design-comuni-plone-theme/components/ItaliaTheme/AppExtras/TrackFocus';
+import SiteSettingsExtras from 'design-comuni-plone-theme/components/ItaliaTheme/AppExtras/SiteSettingsExtras';
+
 import { loadables as ItaliaLoadables } from 'design-comuni-plone-theme/config/loadables';
 
 // CTs icons
@@ -63,8 +65,8 @@ import { schemaListing } from 'design-comuni-plone-theme/components/ItaliaTheme/
 
 import reducers from 'design-comuni-plone-theme/reducers';
 
-const ReleaseLog = loadable(() =>
-  import('design-comuni-plone-theme/components/ReleaseLog/ReleaseLog'),
+const ReleaseLog = loadable(
+  () => import('design-comuni-plone-theme/components/ReleaseLog/ReleaseLog'),
 );
 
 const messages = defineMessages({
@@ -295,6 +297,10 @@ export default function applyConfig(voltoConfig) {
         match: '',
         component: TrackFocus,
       },
+      {
+        match: '',
+        component: SiteSettingsExtras,
+      },
     ],
     maxFileUploadSize: null,
     'volto-blocks-widget': {
@@ -471,6 +477,10 @@ export default function applyConfig(voltoConfig) {
     ...config.components,
     BlockExtraTags: { component: () => null },
   };
+  config.registerComponent({
+    name: 'SiteSettingsExtras',
+    component: SiteSettingsExtras,
+  });
 
   // REDUCERS
   config.addonReducers = {

diff --git a/src/customizations/volto/helpers/Html/Html.jsx b/src/customizations/volto/helpers/Html/Html.jsx
@@ -4,7 +4,7 @@
  */
 /*
  CUSTOMIZATIONS:
- - Add <link rel="shortcut icon" href="/favicon.ico" />
+ - Rimosso <link rel="shortcut icon" href="/favicon.ico" /> perchè creato da volto-site-settings
  - Add shrink-to-fit=no in viewport meta
  - Remove link for manifest and svg/apple icons
  */
@@ -122,7 +122,7 @@ class Html extends Component {
               })};`,
             }}
           />
-          <link rel="shortcut icon" href="/favicon.ico" />
+          {/* <link rel="shortcut icon" href="/favicon.ico" /> */}
           <meta property="og:type" content="website" />
           <meta name="generator" content="Plone 6 - https://plone.org" />
           <meta