fix: merge changes and arrange homepage and landing page content

Author: Joel Worrall

src/components/HomepageCollection.js

@@ -8,13 +8,12 @@ import SimpleProjectModule from './SimpleProjectModule';
 
 const HomepageCollection = ({ projects }) => {
   const [projectsHovered, setProjectsHovered] = useState(false);
-
   return (
     <div className={styles.homepageCollection}>
       <h4 className={styles.title}>Instrumentation projects</h4>
       <p className={styles.description}>
-        Instrument everything with our open source agents, tools, and sdk's.{' '}
-        <a href="/collections">Other highlighted collection</a>
+        Instrument everything with our open source agents, tools, and sdk's or{' '}
+        <a href="/collections">see other highlighted collections.</a>
       </p>
 
       <div
@@ -43,9 +42,10 @@ const HomepageCollection = ({ projects }) => {
             }
           `}
         >
-          <span className={styles.subProjectCallToActionLabel}>View all</span>
+          <span className={styles.subProjectCallToActionLabel}>
+            Explore open source instrumentation
+          </span>
         </Button>
-
         {projects.map(project => {
           const link = project.permalink.replace(
             'https://opensource.newrelic.com',

src/components/HomepageCollection.module.scss

@@ -41,6 +41,7 @@
 
 .projects-container {
   display: flex;
+  justify-content: center;
   height: 150px;
   overflow: hidden;
   position: relative;
@@ -71,15 +72,11 @@
   height: 105px;
   flex-shrink: 0;
   margin-right: 20px;
-  animation-duration: 60s;
-  animation-name: project-slide;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-  animation-timing-function: linear;
   position: relative;
   z-index: 100;
   box-shadow: 0px 0.913195px 0.802504px rgba(4, 22, 22, 0.00562291), 0px 2.19453px 1.92853px rgba(4, 22, 22, 0.00807786), 0px 4.13211px 3.63125px rgba(4, 22, 22, 0.01), 0px 7.37098px 6.47753px rgba(4, 22, 22, 0.0119221), 0px 13.7866px 12.1155px rgba(4, 22, 22, 0.0143771), 0px 33px 29px rgba(4, 22, 22, 0.02);
   pointer-events: none;
+  transform: translateX(-150px);
 
   &:last-child {
     margin-right: 0;
@@ -92,16 +89,6 @@
   }  
 }
 
-@keyframes project-slide {
-  from {
-    transform: translateX(0);
-  }
-
-  to {
-    transform: translateX(-1000px);
-  }
-}
-
 .cta-button {
   z-index: 1000;
   position: absolute;

src/data/navigation.json

@@ -6,13 +6,13 @@
       "order": 1
     },
     {
-      "label": "New Relic Projects",
-      "link": "/explore-projects",
+      "label": "Highlighted Projects",
+      "link": "/collections",
       "order": 2
     },
     {
-      "label": "Highlighted Projects",
-      "link": "/collections",
+      "label": "New Relic Projects",
+      "link": "/explore-projects",
       "order": 3
     }
   ]

src/images/home-collection-mask-dark.png

@@ -23,6 +23,7 @@
 }
 
 .collection-listing-container {
+  margin-top: 100px;
   &:before {
     position: absolute;
     left: 0;
@@ -109,7 +110,6 @@
     }
   }
 
-
   .page-heading {
     margin-bottom: 100px;
   }

src/pages/collection.module.scss

@@ -12,10 +12,27 @@ import styles from './collection.module.scss';
 
 export const query = graphql`
   query allCollections($path: String) {
+    instrumentation: allProjects(
+      filter: {
+        projectType: { eq: "newrelic" }
+        projectTags: {
+          elemMatch: {
+            slug: { in: ["exporter", "nri", "agent", "sdk", "cli"] }
+          }
+        }
+      }
+    ) {
+      edges {
+        node {
+          ...exploreProjectsFields
+        }
+      }
+    }
+
     nerdpacks: allProjects(
       filter: {
         projectType: { eq: "newrelic" }
-        projectTags: { elemMatch: { slug: { eq: "nr1-app" }  } }
+        projectTags: { elemMatch: { slug: { eq: "nr1-app" } } }
       } # sort: { fields: stats___lastSixMonthsCommitTotal, order: DESC }
     ) {
       edges {
@@ -26,16 +43,15 @@ export const query = graphql`
     }
 
     layouts: allProjects(
-      filter: {
-        name: { regex: "/layout/" }
-      } # sort: { fields: stats___lastSixMonthsCommitTotal, order: DESC }
+      filter: { name: { regex: "/layout/" } } # sort: { fields: stats___lastSixMonthsCommitTotal, order: DESC }
     ) {
       edges {
         node {
           ...exploreProjectsFields
         }
       }
     }
+
     sitePage: allSitePage(filter: { path: { eq: $path } }) {
       nodes {
         fields {
@@ -55,21 +71,23 @@ function generateDescription(name) {
     case 'layouts':
       return 'Build a better application beginning with a better starting point.';
     case 'instrumentation':
-      return 'Instrument everything with our open source agents, tools, and sdk\'s.'
+      return "Instrument everything with our open source agents, tools, and sdk's.";
   }
 }
 
 const CollectionPage = ({ data }) => {
   const allData = Object.entries(data);
-  const allCollections = allData.filter(c => c[0] !== 'sitePage').map(c => {
-    return {
-      name: c[0],
-      size: c[1].edges.length,
-      projects: c[1].edges.filter((e, i) => i < 4).map(e => e.node),
-      description: generateDescription(c[0])
-    }
-  });
-  console.debug(allCollections);
+  const allCollections = allData
+    .filter(c => c[0] !== 'sitePage')
+    .map(c => {
+      return {
+        name: c[0],
+        size: c[1].edges.length,
+        projects: c[1].edges.filter((e, i) => i < 4).map(e => e.node),
+        description: generateDescription(c[0])
+      };
+    });
+
   return (
     <Layout
       fullWidth
@@ -83,47 +101,44 @@ const CollectionPage = ({ data }) => {
       />
 
       {allCollections.map(collection => {
-          return (
-            <>
-              <div className={styles.collectionListingContainer}>
-                <header className={styles.collectionListingHeaderSection}>
-                  <div>
-                    <h4
-                      className={styles.collectionListingHeaderSectionHeading}
-                    >
-                      {startCase(collection.name)}
-                    </h4>
-                    <p
-                      className={
-                        styles.collectionListingHeaderSectionDescription
-                      }
-                    >
-                      {collection.description}
-                    </p>
-                  </div>
-                  <a
-                    href={`/${collection.name}`}
-                    className={styles.collectionsPageCollectionLink}
+        return (
+          <>
+            <div className={styles.collectionListingContainer}>
+              <header className={styles.collectionListingHeaderSection}>
+                <div>
+                  <h4 className={styles.collectionListingHeaderSectionHeading}>
+                    {startCase(collection.name)}
+                  </h4>
+                  <p
+                    className={styles.collectionListingHeaderSectionDescription}
                   >
-                    View all{' '}
-                    <span className={styles.collectionProjectCount}>
-                      {collection.size}
-                    </span>{' '}
-                    projects
-                    <ChevronRight />
-                  </a>
-                </header>
-                <div className={styles.collectionListing}>
-                  {collection.projects.map(project => <SimpleProjectModule
-                          key={project.id}
-                          data={project}
-                          className={styles.project}
-                        />
-                  )}
+                    {collection.description}
+                  </p>
                 </div>
+                <a
+                  href={`/${collection.name}`}
+                  className={styles.collectionsPageCollectionLink}
+                >
+                  View all{' '}
+                  <span className={styles.collectionProjectCount}>
+                    {collection.size}
+                  </span>{' '}
+                  projects
+                  <ChevronRight />
+                </a>
+              </header>
+              <div className={styles.collectionListing}>
+                {collection.projects.map(project => (
+                  <SimpleProjectModule
+                    key={project.id}
+                    data={project}
+                    className={styles.project}
+                  />
+                ))}
               </div>
-            </>
-          );
+            </div>
+          </>
+        );
       })}
     </Layout>
   );

src/pages/collections.js

@@ -17,9 +17,7 @@ import closeIcon from '../images/icon-close.svg';
 
 export const query = graphql`
   query HomePageQuery($path: String) {
-    topProjects: allProjects(
-      filter: { projectType: { eq: "newrelic" } } # sort: { fields: stats___lastSixMonthsCommitTotal, order: DESC } # limit: 8
-    ) {
+    topProjects: allProjects(filter: { projectType: { eq: "newrelic" } }) {
       edges {
         node {
           ...projectFields
@@ -34,7 +32,7 @@ export const query = graphql`
             slug: { in: ["exporter", "nri", "agent", "sdk", "cli"] }
           }
         }
-      } # sort: { fields: stats___lastSixMonthsCommitTotal, order: DESC } # limit: 8
+      }
     ) {
       edges {
         node {
@@ -84,10 +82,27 @@ export const query = graphql`
   }
 `;
 
+function sortByStats(a, b) {
+  if (a.stats === null && b.stats === null) {
+    return 0;
+  } else if (a.stats === null) {
+    return 1;
+  } else if (b.stats === null) {
+    return -1;
+  }
+
+  return a.stats.lastSixMonthsCommitTotal < b.stats.lastSixMonthsCommitTotal
+    ? 1
+    : -1;
+}
+
 const HomePage = ({ data }) => {
   const [heroVideoActive, setHeroVideoActive] = useState(false);
 
-  const instrumentationProjects = get(data, 'instrumentation.edges');
+  const instrumentationProjects = get(data, 'instrumentation.edges', [])
+    .map(i => i.node)
+    .sort(sortByStats)
+    .slice(0, 5);
 
   const externalProjects = [
     get(data, 'openTelemetry.nodes[0]'),
@@ -98,19 +113,7 @@ const HomePage = ({ data }) => {
   // temp workaround until the query above is fixed to pull back the correct top 8
   const internalProjects = get(data, 'topProjects.edges', [])
     .map(i => i.node)
-    .sort((a, b) => {
-      if (a.stats === null && b.stats === null) {
-        return 0;
-      } else if (a.stats === null) {
-        return 1;
-      } else if (b.stats === null) {
-        return -1;
-      }
-
-      return a.stats.lastSixMonthsCommitTotal < b.stats.lastSixMonthsCommitTotal
-        ? 1
-        : -1;
-    })
+    .sort(sortByStats)
     .slice(0, 8);
 
   const renderHeroVideo = () => {
@@ -215,7 +218,7 @@ const HomePage = ({ data }) => {
         }}
       />
 
-      <HomepageCollection projects={instrumentationProjects.map(i => i.node)} />
+      <HomepageCollection projects={instrumentationProjects} />
 
       <HomePageHighlights data={externalProjects} />
 

src/pages/index.js

@@ -23,7 +23,7 @@ export const query = graphql`
     ) {
       edges {
         node {
-          ...exploreProjectsFields
+          ...projectFields
         }
       }
     }