FIX: Team listing elements

Configuration/Production/Beach/Instance/Caches.yaml

@@ -47,7 +47,7 @@ Flow_Security_Cryptography_HashService:
     password: '%env:BEACH_REDIS_PASSWORD%'
     port: '6379'
     database: 6
-Neos_Neos_GoogleAnalytics_Tokens:
+FlowpackNeosMatomo_ApiCache:
   backend: 'Neos\Cache\Backend\RedisBackend'
   backendOptions:
     hostname: '%env:BEACH_REDIS_HOST%'

Configuration/Production/Beach/Instance/Settings.yaml

@@ -10,13 +10,6 @@ Neos:
       elasticSearch:
         indexName: '%env:BEACH_ELASTICSEARCH_INDEX_NAME%'
 
-  GoogleAnalytics:
-    authentication:
-      applicationName: 'Neos'
-      clientId: '%env:GOOGLE_ANALYTICS_CLIENT_ID%'
-      clientSecret: '%env:GOOGLE_ANALYTICS_CLIENT_SECRET%'
-      developerKey: '%env:GOOGLE_ANALYTICS_CLIENT_DEVELOPER_KEY%'
-
   Flow:
     persistence:
       backendOptions:

DistributionPackages/Neos.NeosConIo/Resources/Private/Scss/Main.scss

@@ -10,6 +10,9 @@
 //
 
 // SASS Functions, Mixins and Variables
+$fa-font-path: "../../Neos.NeosIo/Assets";
+$font-path: "../../Neos.NeosIo/Assets";
+
 @import "DistributionPackages/Neos.NeosIo/Resources/Private/Scss/_Framework/Index";
 @import "DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Variables";
 @import "Variables";

DistributionPackages/Neos.NeosConIo/Resources/Private/Scss/_Variables.scss

@@ -1 +1 @@
-$imageTeaser--speaker__width: 200px;
+$imageTeaser--speaker__width: 200px;

DistributionPackages/Neos.NeosIo.CaseStudies/Resources/Private/Fusion/ContentTypes/CaseList.fusion

@@ -33,6 +33,11 @@ prototype(Neos.NeosIo.CaseStudies:Content.CaseList) < prototype(Neos.Neos:Conten
                 }
                 image = Neos.Neos:ImageUri {
                     asset = ${q(case).property('image')}
+                    width = 662
+                    height = 312
+                    allowCropping = true
+                    async = true
+                    quality = 90
                     @if.hasBannerImage = ${q(case).property('image')}
                 }
                 projectType = ${q(q(case).property('projectType')).property('title')}
@@ -53,4 +58,15 @@ prototype(Neos.NeosIo.CaseStudies:Content.CaseList) < prototype(Neos.Neos:Conten
             </div>
         `
     }
+    @cache {
+        mode = 'cached'
+        entryIdentifier {
+            node = ${node}
+        }
+        entryTags {
+            node = ${Neos.Caching.nodeTag(node)}
+            node = ${Neos.Caching.nodeTypeTag('Neos.NeosIo:Reference')}
+        }
+    }
+
 }

DistributionPackages/Neos.NeosIo.CaseStudies/Resources/Private/Fusion/ContentTypes/Reference.List.Item.fusion

@@ -0,0 +1,57 @@
+prototype(Neos.NeosIo:Reference.List.Item) < prototype(Neos.Fusion:Component) {
+    title = ${q(case).property('title')}
+    alternativeText = ${q(case).property('title')}
+    image = ${q(case).property('image')}
+    url = ${q(case).property('url') ? q(case).property('url') : 'node://' + case.identifier}
+    url.@process.convertUris = Neos.Neos:ConvertUris {
+        absolute = true
+    }
+    datePublished = ${q(case).property('datePublished')}
+    launchDate = ${q(case).property('launchDate')}
+    projectVolume = Neos.NeosIo.CaseStudies:Helper.ProjectVolumes
+    projectType = ${q(q(case).property('projectType')).property('title')}
+    featured = ${q(case).property('featured')}
+
+    @context {
+        title = ${this.title}
+        alternativeText = ${this.alternativeText}
+    }
+
+    imageTag = Neos.NeosIo:Component.LazyLoadImage {
+        image = ${q(case).property('image')}
+        title = ${title}
+        alternativeText = ${alternativeText}
+        className = 'imageTeaser__image'
+        maximumHeight = '450'
+        maximumwidth = '700'
+        allowCropping = true
+    }
+
+    renderer = afx`
+        <div class="references__item gi u-w1/1 u-wm1/2 u-wl1/2">
+            <a href={props.url} target="_blank" rel="noopener" class="imageTeaser imageTeaser--isLink">
+                {props.imageTag}
+                <div class="imageTeaser__contents u-invertText">
+                    <h3 class="imageTeaser__contents__heading">{props.title}</h3>
+                    <footer class="references__data">
+                        <span @if.hasLaunchDate={props.launchDate}><i class="fas fa-rocket"></i>{Date.format(props.launchDate,'d.m.Y')}</span>
+                        <span @if.hasProjectVolume={props.projectVolume}>
+                            <i class="fas fa-users"></i>{props.projectVolume}
+                        </span>
+                        <span @if.hasProjectType={props.projectType}><i class="fas fa-industry"></i> {props.projectType}</span>
+                    </footer>
+                </div>
+            </a>
+        </div>
+    `
+
+    @cache {
+        mode = 'cached'
+        entryIdentifier {
+            node = ${case}
+        }
+        entryTags {
+            node = ${Neos.Caching.nodeTag(case)}
+        }
+    }
+}

DistributionPackages/Neos.NeosIo.CaseStudies/Resources/Private/Fusion/ContentTypes/Reference.ShowCase.Item.fusion

@@ -6,32 +6,7 @@ prototype(Neos.NeosIo:Reference.ShowCaseItem) < prototype(Neos.Neos:ContentCompo
     title = ${q(node).property('title')}
     alternativeText = ${q(node).property('title')}
 
-    projectVolume = Neos.Fusion:Case {
-        default {
-            condition = ${true}
-            renderer = 'n/a'
-        }
-        5 {
-            condition = ${q(node).property('projectVolume') == 5}
-            renderer = '< 100h'
-        }
-        10 {
-            condition = ${q(node).property('projectVolume') == 10}
-            renderer = '100 - 499h'
-        }
-        15 {
-            condition = ${q(node).property('projectVolume') == 15}
-            renderer = '500 - 999h'
-        }
-        20 {
-            condition = ${q(node).property('projectVolume') == 20}
-            renderer = '1000 - 3000h'
-        }
-        25 {
-            condition = ${q(node).property('projectVolume') == 25}
-            renderer = '> 3000h'
-        }
-    }
+    projectVolume = Neos.NeosIo.CaseStudies:Helper.ProjectVolumes
 
     projectType = ${q(q(node).property('projectType')).property('title')}
 

DistributionPackages/Neos.NeosIo.CaseStudies/Resources/Private/Fusion/Helper/ProjectVolumes.fusion

@@ -0,0 +1,27 @@
+prototype(Neos.NeosIo.CaseStudies:Helper.ProjectVolumes) < prototype(Neos.Fusion:Case) {
+    default {
+        condition = ${true}
+        renderer = 'n/a'
+    }
+    5 {
+        condition = ${q(node).property('projectVolume') == 5}
+        renderer = '< 100h'
+    }
+    10 {
+        condition = ${q(node).property('projectVolume') == 10}
+        renderer = '100 - 499h'
+    }
+    15 {
+        condition = ${q(node).property('projectVolume') == 15}
+        renderer = '500 - 999h'
+    }
+    20 {
+        condition = ${q(node).property('projectVolume') == 20}
+        renderer = '1000 - 3000h'
+    }
+    25 {
+        condition = ${q(node).property('projectVolume') == 25}
+        renderer = '> 3000h'
+    }
+
+}

DistributionPackages/Neos.NeosIo.CaseStudies/Resources/Private/Fusion/Override/Page.fusion

@@ -21,9 +21,9 @@ prototype(Neos.Neos:Page) {
                 src = Neos.Fusion:ResourceUri {
                     path = 'resource://Neos.NeosIo.CaseStudies/Public/Scripts/Main.js'
                 }
+                defer = true
             }
             @if.caseStudyListingPresent = ${q(documentNode).children().find('[instanceof Neos.NeosIo.CaseStudies:Content.CaseList]')}
         }
-
     }
 }

DistributionPackages/Neos.NeosIo.CaseStudies/Resources/Private/JavaScript/CaseStudyListing.tsx

@@ -6,6 +6,8 @@ import TranslationData from "./Context/TranslationData";
 import CaseStudyTableRow from "./Components/CaseStudyTableRow";
 import CaseStudyGridItem from "./Components/CaseStudyGridItem";
 import {SortDirection, sortObjects} from "./Helper/Sorter";
+import LazyLoad from "vanilla-lazyload";
+
 
 const projectVolumesValueMap = {
     1: 'n/a',
@@ -16,19 +18,21 @@ const projectVolumesValueMap = {
     25: '> 3000h'
 };
 
+
 export default function CaseStudyListing() {
     const casesData: CaseStudy[] = useContext(CasesData);
     const translationData: string[] = useContext(TranslationData);
+    const lazyLoad = new LazyLoad({});
 
     // Filter entries
-    const industries: string[] = useMemo(() => casesData.reduce((carry: string[], caseStudy: CaseStudyTableRow) => {
+    const industries: string[] = useMemo(() => casesData.reduce((carry: string[], caseStudy: CaseStudy) => {
         carry.push(caseStudy.projectType);
         return carry;
-    }, []).filter((v, i, a) => v && a.indexOf(v) === i), [casesData]);
-    const projectVolumes: number[] = useMemo(() => casesData.reduce((carry: number[], caseStudy: CaseStudyTableRow) => {
+    }, []).filter((v, i, a) => v && a.indexOf(v) === i).sort(), [casesData]);
+    const projectVolumes: number[] = useMemo(() => casesData.reduce((carry: number[], caseStudy: CaseStudy) => {
         carry.push(caseStudy.projectVolume);
         return carry;
-    }, []).filter((v, i, a) => v && a.indexOf(v) === i), [casesData]);
+    }, []).sort((a,b) => a-b).filter((v, i, a) => !i || v != a[i -1]), [casesData]);
 
     // State hooks
     const [searchWord, setSearchWord] = useState('');
@@ -69,7 +73,8 @@ export default function CaseStudyListing() {
             );
         }
         setCaseStudies(filteredCases);
-    }, [searchWord, industryFilter, projectVolumeFilter, sorting, sortingDirection]);
+        lazyLoad.update();
+    }, [searchWord, industryFilter, projectVolumeFilter, sorting, sortingDirection, lazyLoad]);
 
     return (
         <div>

DistributionPackages/Neos.NeosIo.CaseStudies/Resources/Private/JavaScript/Components/CaseStudyGridItem.tsx

@@ -15,7 +15,7 @@ export default function CaseStudyGridItem({caseStudy}: {caseStudy: CaseStudy}) {
         <a key={caseStudy.identifier} class={'imageTeaser imageTeaser--isLink' + (caseStudy.featured ? ' references__item--featured' : '')} href={caseStudy.url} target="_blank" rel="noopener">
             {caseStudy.image
                 ?
-                <img src="/_Resources/Static/Packages/Neos.NeosIo/Images/Loader.svg" data-image-normal={caseStudy.image} class="imageTeaser__image" loading="lazy" title={caseStudy.title} alt={caseStudy.title} />
+                <img data-src={caseStudy.image} class="imageTeaser__image lazy" title={caseStudy.title} alt={caseStudy.title} />
                 : ''
             }
                 <div class="imageTeaser__contents u-invertText">

DistributionPackages/Neos.NeosIo.ServiceOfferings/Resources/Private/Fusion/Components/Provider.ShowCases.fusion

@@ -8,7 +8,7 @@ prototype(Neos.NeosIo.ServiceOfferings:Component.Provider.ShowCases) < prototype
             <h2>Showcases</h2>
             <div class="references__list g">
                 <Neos.Fusion:Loop items={props.showCases} itemName="showCase">
-                    <Neos.NeosIo:Reference.List.Item @context.node={showCase}/>
+                    <Neos.NeosIo:Reference.List.Item @context.case={showCase}/>
                 </Neos.Fusion:Loop>
             </div>
         </section>

DistributionPackages/Neos.NeosIo/Configuration/NodeTypes.CountUp.yaml

@@ -26,6 +26,9 @@
             placeholder: prefix
     number:
       type: string
+      validation:
+        'Neos.Neos/Validation/NotEmptyValidator': []
+        'Neos.Neos/Validation/IntegerValidator': []
       defaultValue: '101'
       ui:
         inlineEditable: true

DistributionPackages/Neos.NeosIo/Configuration/NodeTypes.Post.yaml

@@ -4,11 +4,6 @@
     'Neos.NodeTypes:Page': true
     'Neos.NodeTypes:ImageMixin': true
     'Neos.NodeTypes:ImageCaptionMixin': true
-    'Neos.Seo:TitleTagMixin': true
-    'Neos.Seo:TwitterCardMixin': true
-    'Neos.Seo:CanonicalLinkMixin': true
-    'Neos.Seo:OpenGraphMixin': true
-    'Neos.Seo:XmlSitemapMixin': true
     'Neos.NeosIo:KeyVisualMixin': true
   ui:
     label: Post
@@ -24,9 +19,6 @@
         image:
           position: 40
           collapsed: true
-        seometa:
-          position: 50
-          tab: null
   properties:
     datePublished:
       type: DateTime
@@ -128,11 +120,3 @@
           editorOptions:
             nodeTypes:
               - 'Neos.Neos:Document'
-    metaRobotsNoindex:
-      ui:
-        inspector:
-          group: null
-    metaRobotsNofollow:
-      ui:
-        inspector:
-          group: null

DistributionPackages/Neos.NeosIo/Configuration/NodeTypes.Stage.yaml

@@ -33,6 +33,7 @@
           'Neos.NeosIo:ImageTeaser': true
           'Neos.NeosIo.FeatureList:FeatureList': true
           'Neos.NeosIo.CaseStudies:Content.CaseList': true
+          'Neos.NeosIo:PostArchive': true
   ui:
     label: Stage
     icon: icon-tasks

DistributionPackages/Neos.NeosIo/Configuration/Production/Settings.Analytics.yaml

@@ -0,0 +1,7 @@
+Flowpack:
+  Neos:
+    Matomo:
+      containerId:
+        neosio: 'Br6HvcZW'
+        neosconio: 'gwvfb05Z'
+        flowneosio: 'Soy96R9e'

DistributionPackages/Neos.NeosIo/Configuration/Settings.Analytics.yaml

@@ -0,0 +1,16 @@
+Flowpack:
+  Neos:
+    Matomo:
+      host: 'analytics.neos.io'
+      token_auth: '%env:MATOMO_TOKEN_AUTH%'
+      idSite:
+        neosio: 5
+        neosconio: 6
+        flowneosio: 7
+      containerId:
+        # if you want those enabled for dev debugging, 
+        # pls add a key and add no-tracking cookie so that 
+        # your requests dont add up to our live-views
+        #neosio: ''
+        #neosconio: ''
+        #flowneosio: ''

DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Components/PageStyles.fusion

@@ -1,11 +1,7 @@
-prototype(Neos.NeosIo:PageStyles) < prototype(Neos.Fusion:Array) {
+prototype(Neos.NeosIo:PageStyles) < prototype(Neos.Fusion:Join) {
     main = afx`
         <link rel="stylesheet" @children="attributes.href">
             <Neos.Fusion:ResourceUri path="resource://Neos.NeosIo/Public/Styles/Main.css"/>
         </link>
     `
-
-    fonts = afx`
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work+Sans:300,200,200italic,300italic,400,400italic"/>
-    `
 }

DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/NodeTypes/ChoiceButtons.fusion

@@ -1,9 +1,17 @@
-prototype(Neos.NeosIo:ChoiceButtons) < prototype(Neos.Neos:Content) {
+prototype(Neos.NeosIo:ChoiceButtons) < prototype(Neos.Neos:ContentComponent) {
     firstButton = Neos.NeosIo:Button {
         @context.node = ${q(node).children('firstButton').get(0)}
     }
 
     secondButton = Neos.NeosIo:Button {
         @context.node = ${q(node).children('secondButton').get(0)}
     }
+
+    renderer = afx`
+        <div class="u-alignCenter u-mb1/2">
+            {props.firstButton}
+            <span class="btnChoiceLabel">{Translation.translate('choiceButton.or', '', [], 'Main', 'Neos.NeosIo')}</span>
+            {props.secondButton}
+        </div>
+    `
 }

DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Atoms/_Base.scss

@@ -14,6 +14,7 @@ body {
 	text-align: $start;
 	color: $base-text-color;
 	background: $body-background;
+  overflow: hidden;
 }
 
 // Disable scroll - Used in the OffCanvas active state.

DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Organisms/_Stage.scss

@@ -2,7 +2,6 @@
 	--stage-background-color: #000;
 	display: block;
 	position: relative;
-	overflow: hidden;
 	background: #000;
 
 	@include u-linkReset();