feat: add featured pack functionality

src/data/quickstarts.json

@@ -65,6 +65,7 @@
         "url": "https://raw.githubusercontent.com/newrelic/newrelic-observability-packs/v0.12.0/packs/apache/dashboards/apache.json"
       }
     ],
+    "keywords": ["featured"],
     "description": "Official New Relic pack for Apache\nUse this pack together with the New Relic Apache On Host Integration to get insight into the performance of your Apache instances.\n\n",
     "documentation": [
       {
@@ -179,6 +180,7 @@
         "url": "https://docs.newrelic.com/docs/distributed-tracing/trace-api/introduction-trace-api/"
       }
     ],
+    "keywords": ["featured"],
     "iconUrl": "https://raw.githubusercontent.com/newrelic/newrelic-observability-packs/v0.12.0/packs/apis/trace/icon.png",
     "id": "VHJhY2UgYW5kIFNwYW4gQVBJ",
     "level": "NEWRELIC",
@@ -3118,6 +3120,7 @@
         "url": "https://docs.newrelic.com/docs/integrations/open-source-telemetry-integrations/open-source-telemetry-integration-list/new-relics-dropwizard-integration"
       }
     ],
+    "keywords": ["featured"],
     "iconUrl": "https://raw.githubusercontent.com/newrelic/newrelic-observability-packs/v0.12.0/packs/dropwizard-metrics-reporter/icon.svg",
     "id": "ZHJvcHdpemFyZC1tZXRyaWNzLXJlcG9ydGVy",
     "level": "COMMUNITY",
@@ -3391,6 +3394,7 @@
         "url": "https://raw.githubusercontent.com/newrelic/newrelic-observability-packs/v0.12.0/packs/gatsby-build/dashboards/gatsby-build.json"
       }
     ],
+    "keywords": ["featured"],
     "description": "The Gatsby observability pack allows you to get visibility into the build time of your Gatsby Sites, \nusing [Open Telemetry](https://docs.newrelic.com/docs/integrations/open-source-telemetry-integrations/opentelemetry/introduction-opentelemetry-new-relic/)\nto collect each step as a span in a Distributed Trace. This Dashboard lets you monitor your build in real-time to highlight which steps are affecting performance,\nso you can improve them faster.\n\n\n",
     "documentation": [],
     "iconUrl": "https://raw.githubusercontent.com/newrelic/newrelic-observability-packs/v0.12.0/packs/gatsby-build/icon.png",

src/pages/instant-observability.js

@@ -18,6 +18,7 @@ import {
 import { useDebounce } from 'react-use';
 import { navigate } from '@reach/router';
 import BUILD_YOUR_OWN from '../images/build-your-own.svg';
+import { sortFeaturedPacks } from '../utils/sortFeaturedPacks';
 
 const { QUICKSTARTS_REPO } = require('../data/constants');
 
@@ -26,13 +27,16 @@ const packContentsFilterGroups = [
   'Dashboards',
   'Alerts',
   'Data sources',
+  'Featured',
 ];
 
 const VIEWS = {
   GRID: 'Grid view',
   LIST: 'List view',
 };
 
+const packContentsDataSources = ['documentation'];
+
 const QuickstartsPage = ({ data, location }) => {
   const tessen = useTessen();
   const detectMobile = useMobileDetect();
@@ -41,7 +45,7 @@ const QuickstartsPage = ({ data, location }) => {
   const {
     allQuickstarts: { nodes: quickstarts },
   } = data;
-
+  
   const [filteredPacks, setFilteredPacks] = useState(quickstarts);
 
   const { queryParams } = useQueryParams();
@@ -119,12 +123,25 @@ const QuickstartsPage = ({ data, location }) => {
       queryParams.has('packContains') &&
       queryParams.get('packContains') !== 'All'
     ) {
-      tempFilteredPacks = tempFilteredPacks.filter(
-        (pack) =>
-          pack[queryParams.get('packContains').toLowerCase()]?.length > 0
-      );
+      if (queryParams.get('packContains') === 'Featured') {
+        tempFilteredPacks = tempFilteredPacks.filter((pack) =>
+          pack.keywords?.includes('featured')
+        );
+      } else if (queryParams.get('packContains') === 'Data sources') {
+        tempFilteredPacks = tempFilteredPacks.filter((pack) => {
+          return Object.keys(pack).some(
+            (key) =>
+              packContentsDataSources.includes(key) && pack[key].length > 0
+          );
+        });
+      } else {
+        tempFilteredPacks = tempFilteredPacks.filter(
+          (pack) =>
+            pack[queryParams.get('packContains').toLowerCase()]?.length > 0
+        );
+      }
     }
-
+    tempFilteredPacks = sortFeaturedPacks(tempFilteredPacks);
     setFilteredPacks(tempFilteredPacks);
   }, [queryParams, quickstarts]);
 
@@ -138,13 +155,29 @@ const QuickstartsPage = ({ data, location }) => {
         const filterCount = filteredPacks.length;
         return { filterName, filterCount };
       }
+      if (filterName === 'Featured') {
+        const filterCount = filteredPacks.filter((pack) =>
+          pack.keywords?.includes(filterName.toLowerCase())
+        ).length;
+        return { filterName, filterCount };
+      }
+      if (filterName === 'Data sources') {
+        const filterCount = filteredPacks.filter((pack) =>
+          Object.keys(pack).some(
+            (key) =>
+              packContentsDataSources.includes(key) && pack[key].length > 0
+          )
+        ).length;
+        return { filterName, filterCount };
+      }
       const filterCount = filteredPacks.filter(
-        (pack) => pack[filterName.toLowerCase()]
+        (pack) =>
+          pack[filterName.toLowerCase()] &&
+          pack[filterName.toLowerCase()].length > 0
       ).length;
       return { filterName, filterCount };
     }
   );
-
   return (
     <>
       <DevSiteSeo
@@ -271,6 +304,16 @@ const QuickstartsPage = ({ data, location }) => {
                           `}
                         />
                       )}
+                      {filterName === 'Featured' && (
+                        <Icon
+                          name="nr-relicans"
+                          css={css`
+                            fill: currentColor;
+                            stroke-width: 0.25;
+                            margin: 0 0.5rem;
+                          `}
+                        />
+                      )}
                       {!filterName ||
                         (filterName === 'All' && (
                           <Icon
@@ -416,7 +459,12 @@ const QuickstartsPage = ({ data, location }) => {
               />
             </ExternalLink>
             {filteredPacks.map((pack) => (
-              <PackTile key={pack.id} view={view} {...pack} />
+              <PackTile
+                key={pack.id}
+                view={view}
+                featured={pack.keywords?.includes('featured')}
+                {...pack}
+              />
             ))}
           </div>
         </div>
@@ -443,6 +491,7 @@ export const pageQuery = graphql`
         logoUrl
         packUrl
         level
+        keywords
         dashboards {
           description
           name

src/utils/sortFeaturedPacks.js

@@ -0,0 +1,9 @@
+export const sortFeaturedPacks = (packs) => {
+  const featuredPacks = packs.filter((pack) =>
+    pack.keywords?.includes('featured')
+  );
+  const nonFeaturedPacks = packs.filter(
+    (pack) => !pack.keywords?.includes('featured')
+  );
+  return [...featuredPacks, ...nonFeaturedPacks];
+};