@eeacms/volto-n2k 0.1.13 → 0.1.14

package/CHANGELOG.md

@@ -4,11 +4,14 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [0.1.13](https://github.com/eea/volto-n2k/compare/0.1.12...0.1.13) - 30 September 2022
+### [0.1.14](https://github.com/eea/volto-n2k/compare/0.1.13...0.1.14) - 18 October 2022
 
 #### :hammer_and_wrench: Others
 
-- Rerun cypress [Miu Razvan - [`37b91e4`](https://github.com/eea/volto-n2k/commit/37b91e409a18b200e7b480e3d36c2f93c12e4fe5)]
+- Prettier fix [Miu Razvan - [`0a9192d`](https://github.com/eea/volto-n2k/commit/0a9192dd9d51620f68b4adcc76aa0a58435700ca)]
+- Multilanguage landing page [Miu Razvan - [`a7ceedf`](https://github.com/eea/volto-n2k/commit/a7ceedf0fe304f0a220aa1b6f2737c86537e15da)]
+### [0.1.13](https://github.com/eea/volto-n2k/compare/0.1.12...0.1.13) - 30 September 2022
+
 ### [0.1.12](https://github.com/eea/volto-n2k/compare/0.1.11...0.1.12) - 30 September 2022
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Blocks/Landing/DefalutView.jsx

@@ -4,6 +4,7 @@ import { generatePath } from 'react-router';
 import { Grid } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 import { withLocalStorage } from '@eeacms/volto-n2k/hocs';
+import LanguageSelector from '@eeacms/volto-n2k/components/theme/LanguageSelector/LanguageSelector';
 import hiker from './images/hiker.webp';
 import { tiles, tileProps, getStyle } from './index';
 
@@ -18,6 +19,21 @@ const DefaultView = (props) => {
       >
         <Grid className="landing-page" container columns="12">
           <Grid.Row>
+            <Grid.Column
+              {...{
+                mobile: 12,
+                tablet: 12,
+                computer: 12,
+                largeScreen: 12,
+                widescreen: 12,
+              }}
+              style={{ zIndex: 1, marginBottom: '1rem' }}
+            >
+              <LanguageSelector
+                navigation={props.navigation}
+                className="landingpage-variation"
+              />
+            </Grid.Column>
             <Grid.Column
               className="landing-page-description"
               widescreen="6"
@@ -79,5 +95,6 @@ const DefaultView = (props) => {
 };
 
 export default connect((state) => ({
+  navigation: state.navigation,
   screen: state.screen,
 }))(withLocalStorage(DefaultView));

package/src/components/manage/Blocks/Landing/Edit.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { Grid, Button } from 'semantic-ui-react';
 import { isEmpty } from 'lodash';
 import EditBlockWrapper from './EditBlockWrapper';
@@ -8,6 +9,7 @@ import { SidebarPortal, UniversalLink } from '@plone/volto/components';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import config from '@plone/volto/registry';
 import settingsSVG from '@plone/volto/icons/settings.svg';
+import LanguageSelector from '@eeacms/volto-n2k/components/theme/LanguageSelector/LanguageSelector';
 import DefaultView from './DefalutView';
 import getSchema from './schema';
 import hiker from './images/hiker.webp';
@@ -98,6 +100,21 @@ const Edit = (props) => {
         >
           <Grid className="landing-page" container columns="12">
             <Grid.Row>
+              <Grid.Column
+                {...{
+                  mobile: 12,
+                  tablet: 12,
+                  computer: 12,
+                  largeScreen: 12,
+                  widescreen: 12,
+                }}
+                style={{ zIndex: 1, marginBottom: '1rem' }}
+              >
+                <LanguageSelector
+                  navigation={props.navigation}
+                  className="landingpage-variation"
+                />
+              </Grid.Column>
               <Grid.Column
                 className="landing-page-description"
                 widescreen="6"
@@ -216,4 +233,6 @@ const Edit = (props) => {
   );
 };
 
-export default Edit;
+export default connect((state) => ({
+  navigation: state.navigation,
+}))(Edit);

package/src/components/manage/Blocks/Landing/View.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { Grid } from 'semantic-ui-react';
 import { RenderBlocks, UniversalLink } from '@plone/volto/components';
+import LanguageSelector from '@eeacms/volto-n2k/components/theme/LanguageSelector/LanguageSelector';
 import DefaultView from './DefalutView';
 import hiker from './images/hiker.webp';
 import { tileProps, getStyle } from './index';
@@ -17,6 +19,21 @@ const View = (props) => {
   ) : (
     <div className="landing-page-wrapper full-width" style={getStyle(props)}>
       <Grid className="landing-page" container columns="12">
+        <Grid.Column
+          {...{
+            mobile: 12,
+            tablet: 12,
+            computer: 12,
+            largeScreen: 12,
+            widescreen: 12,
+          }}
+          style={{ zIndex: 1, marginBottom: '1rem' }}
+        >
+          <LanguageSelector
+            navigation={props.navigation}
+            className="landingpage-variation"
+          />
+        </Grid.Column>
         <Grid.Row>
           <Grid.Column
             className="landing-page-description"
@@ -62,4 +79,6 @@ const View = (props) => {
   );
 };
 
-export default View;
+export default connect((state) => ({
+  navigation: state.navigation,
+}))(View);

package/src/components/theme/Header/Header.jsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useContext } from 'react';
-import { withRouter } from 'react-router';
+import { matchPath, withRouter } from 'react-router';
 import { Container, Sticky } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { Portal } from 'react-portal';
@@ -47,6 +47,11 @@ const Navbar = (props) => {
 const Header = (props) => {
   const [isSticky, setIsSticky] = React.useState(false);
   const { stickyRef } = useContext(StickyContext);
+  const isRoot = !!matchPath(props.pathname, {
+    path: config.settings.multilingualRoot,
+    exact: true,
+    strict: false,
+  });
 
   useEffect(() => {
     if (!props.localStorage.get('N2K_LANGUAGE')) {
@@ -55,7 +60,7 @@ const Header = (props) => {
     /* eslint-disable-next-line */
   }, []);
 
-  return props.location.pathname === '/natura2000' ? (
+  return isRoot ? (
     ''
   ) : (
     <>

package/src/components/theme/LanguageSelector/LanguageSelector.jsx

@@ -6,6 +6,7 @@
 import React from 'react';
 import { withRouter, matchPath, generatePath } from 'react-router';
 import { useSelector } from 'react-redux';
+import cx from 'classnames';
 import { langmap } from '@plone/volto/helpers';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { Dropdown } from 'semantic-ui-react';
@@ -21,21 +22,31 @@ const LanguageSelector = (props) => {
   const localStorage = props.localStorage;
   const pathname = props.location.pathname;
   const currentLang = localStorage.get('N2K_LANGUAGE');
-  const match = matchPath(pathname, {
+  const matchRoot = matchPath(pathname, {
+    path: settings.multilingualRoot,
+    exact: true,
+    strict: false,
+  });
+  const matchChild = matchPath(pathname, {
     path: settings.multilingualPath,
     exact: true,
     strict: false,
   });
+  const match = matchRoot || matchChild;
   const hasMultilingualSupport =
     match && settings.supportedLanguages.includes(match.params.lang);
   const translations = hasMultilingualSupport
-    ? settings.supportedLanguages.map((lang) => ({
-        path: generatePath(settings.multilingualPath, {
-          ...match.params,
+    ? settings.supportedLanguages.map((lang) => {
+        return {
+          path: matchRoot
+            ? `/natura2000/${lang}`
+            : generatePath(settings.multilingualPath, {
+                ...match.params,
+                lang,
+              }),
           lang,
-        }),
-        lang,
-      }))
+        };
+      })
     : [];
   const supportedLanguagesOptions = settings.supportedLanguages.map((lang) => ({
     key: lang,
@@ -44,7 +55,7 @@ const LanguageSelector = (props) => {
   }));
 
   return (
-    <div className="language-selector">
+    <div className={cx('language-selector', props.className)}>
       <Dropdown
         aria-label="Language selector"
         disabled={content.get.loading}

package/src/components/theme/LanguageSelector/styles.less

@@ -41,4 +41,11 @@
       }
     }
   }
+
+  &.landingpage-variation {
+    .divider.text {
+      color: #fff !important;
+      font-size: 20px;
+    }
+  }
 }

package/src/components/theme/Navigation/Navigation.jsx

@@ -102,6 +102,7 @@ class Navigation extends Component {
     this.state = {
       isMobileMenuOpen: false,
       isSdf: false,
+      language: this.props.localStorage.get('N2K_LANGUAGE'),
     };
     this.container = React.createRef();
   }
@@ -260,7 +261,7 @@ class Navigation extends Component {
             />
           </div>
           <Menu.Item className="home-button logo">
-            <Link title="Natura 2000" to="/natura2000">
+            <Link title="Natura 2000" to={`/natura2000/${this.state.language}`}>
               <Icon name={n2kLogo} size={44} />
             </Link>
           </Menu.Item>