add boba press release (#347)

* add boba press release

* page size 10

* update announcement title and summary

* remove accidental duplicate announcement

content/announcements/2020-07-defense-digital-service-delivers-biometric-prototype.md

@@ -0,0 +1,8 @@
+---
+type: announcements
+title: Defense Digital Service Delivers Biometric Prototype to Army
+date: 2020-07-20T16:00:00.000Z
+image: DDS_PRESS_RELEASE.jpg
+summary: The Basic Optical Biometric Analysis (BOBA) prototype upgrades current biometric technology with enhanced functionality and accessibility for service members on the tactical edge.
+externalLink: https://dds.mil/BOBA_Announcement_Press_Release_rdg_July_19.pdf
+---

gatsby-node.js

@@ -231,7 +231,7 @@ exports.createPages = async ({ graphql, actions: { createPage } }) => {
   ];
   const mediaListPage = path.resolve("src/templates/media-list.tsx");
   const mediaPage = path.resolve("src/templates/media-page.tsx");
-  const pageSize = 8;
+  const pageSize = 10;
 
   for (let [mediaType, title] of mediaTypes) {
     const { data } = await graphql(`{
@@ -269,15 +269,17 @@ exports.createPages = async ({ graphql, actions: { createPage } }) => {
 
     // create individual pages for each of the items of this media type
     for (let i = 0; i < results.length; i++) {
-      createPage({
-        path: `/media/${mediaType}/${results[i].fields.slug}`,
-        component: mediaPage,
-        context: {
-          slug: results[i].fields.slug,
-          link: `/media/${mediaType}/${results[i].fields.slug}`,
-          mediaType,
-        },
-      });
+      if (!results[i].fields.externalLink) {
+        createPage({
+          path: `/media/${mediaType}/${results[i].fields.slug}`,
+          component: mediaPage,
+          context: {
+            slug: results[i].fields.slug,
+            link: `/media/${mediaType}/${results[i].fields.slug}`,
+            mediaType,
+          },
+        });
+      }
     }
   }
 

src/components/ConditionalLink.tsx

@@ -23,7 +23,7 @@ export const ConditionalLink: React.FC<Omit<GatsbyLinkProps<any>, "ref">> = ({
     );
   }
   return (
-    <OutboundLink href={to} {...other}>
+    <OutboundLink target="_blank" rel="noreferrer" href={to} {...other}>
       {children}
     </OutboundLink>
   );

src/components/MediaCard.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import Img from "gatsby-image";
-import Link from "gatsby-link";
-import { Card } from "components";
+import { Card, ConditionalLink as Link } from "components";
 
 interface Props {
   title: string;
@@ -11,6 +10,7 @@ interface Props {
   imgFluid?: any;
   imgSrc?: string;
   altText?: string;
+  externalLink?: string;
 }
 
 export const MediaCard: React.FC<Props> = ({

src/components/RecentAnnouncement.tsx

@@ -1,24 +1,29 @@
 import React from "react";
 import clsx from "clsx";
-import { Link } from "gatsby";
+import { ConditionalLink as Link } from "components";
 
 interface Props {
   title: string;
   date: string;
   slug: string;
   className?: string;
+  externalLink?: string;
 }
 
 export const RecentAnnouncement: React.FC<Props> = ({
   title,
   date,
   slug,
   className,
+  externalLink,
 }) => {
   return (
     <div className="recent-media-list-item">
       <div className={clsx(className, "dds-announcement")}>
-        <Link to={`/media/announcements/${slug}`} className="dds-post-heading">
+        <Link
+          to={externalLink ?? `/media/announcements/${slug}`}
+          className="dds-post-heading"
+        >
           {title}
         </Link>
         <div className="dds-post-date">{date}</div>

src/hooks/useRecentAnnouncements.tsx

@@ -23,6 +23,7 @@ export const useRecentAnnouncements = () => {
           frontmatter {
             title
             date(formatString: "MMM DD, YYYY")
+            externalLink
           }
           fields {
             slug

src/templates/media-list.tsx

@@ -30,6 +30,7 @@ interface Props {
               fluid: any;
             };
           };
+          externalLink: string;
         };
       }[];
     };
@@ -59,7 +60,9 @@ const MediaList: React.FC<Props> = ({
           {nodes.map(({ fields, frontmatter }) => (
             <MediaCard
               key={fields.slug}
-              link={`/media/${mediaType}/${fields.slug}`}
+              link={
+                frontmatter.externalLink ?? `/media/${mediaType}/${fields.slug}`
+              }
               imgFluid={frontmatter.image.childImageSharp.fluid}
               {...frontmatter}
             />
@@ -95,6 +98,7 @@ export const query = graphql`
               }
             }
           }
+          externalLink
         }
       }
     }