Create social share twitter card. #54.

galaxyproject · Jul 5, 2021 · 83c8f63 · 83c8f63
1 parent 3230725
commit 83c8f63
Show file tree

Hide file tree

Showing 30 changed files with 136 additions and 24 deletions.
diff --git a/content/_images/seo/about.png b/content/_images/seo/about.png
diff --git a/content/_images/seo/events.png b/content/_images/seo/events.png
diff --git a/content/_images/seo/james.png b/content/_images/seo/james.png
diff --git a/content/_images/seo/newsroom.png b/content/_images/seo/newsroom.png
diff --git a/content/_images/seo/scholarships.png b/content/_images/seo/scholarships.png
diff --git a/content/about-james/bio.md b/content/about-james/bio.md
@@ -1,5 +1,6 @@
 ---
 description: "James Taylor started his professional path at the University of Vermont, where he received a BS in Computer Science in 2000. In 2003, after working as a software engineer in the private sector, he found that his real purpose in life was elsewhere."
+image: ../_images/seo/james.png
 images:
     - _images/james-at-gcc2019.png
 slug: "/james"

diff --git a/content/about-james/memorials.md b/content/about-james/memorials.md
@@ -1,6 +1,7 @@
 ---
-description: ""
-title: ""
+description: "Memorials to James from the Web."
+image: ../_images/seo/james.png
+title: "James Peter Taylor | 1979 - 2020"
 ---
 
 # James Peter Taylor | 1979 - 2020

diff --git a/content/about-james/stories.md b/content/about-james/stories.md
@@ -1,6 +1,7 @@
 ---
-description: ""
-title: ""
+description: "Stories about James from people who know him well."
+image: ../_images/seo/james.png
+title: "James Peter Taylor | 1979 - 2020"
 ---
 
 # James Peter Taylor | 1979 - 2020

diff --git a/content/about-james/we-miss-you.md b/content/about-james/we-miss-you.md
@@ -1,6 +1,7 @@
 ---
-description: ""
-title: ""
+description: "A small sample of what's been shared about James online, from his community."
+image: ../_images/seo/james.png
+title: "James Peter Taylor | 1979 - 2020"
 ---
 
 # James Peter Taylor | 1979 - 2020

diff --git a/content/events/2021-11-genome-informatics.md b/content/events/2021-11-genome-informatics.md
@@ -1,5 +1,6 @@
 ---
 description: "The next Cold Spring Harbor Laboratory conference on Genome Informatics will be held at Cold Spring Harbor, New York."
+image: ../_images/seo/events.png
 images:
     - _images/genome-informatics.png
 title: "Genome Informatics 2021"

diff --git a/content/events/events.md b/content/events/events.md
@@ -1,6 +1,7 @@
 ---
 description: "Check out upcoming events."
 fullWidth: true
+image: ../_images/seo/events.png
 images:
     - _images/events-hero-genome-informatics.png
 links:

diff --git a/content/foundation/about-the-jxtx-foundation.md b/content/foundation/about-the-jxtx-foundation.md
@@ -1,7 +1,8 @@
 ---
-description: ""
+description: "In its early stages, the JXTX Foundation will provide support for graduate students to attend conferences in computational biology and data science, where they can present their work and form connections with other researchers in the field."
+image: ../_images/seo/about.png
 slug: "/about"
-title: ""
+title: "About the JXTX Foundation"
 ---
 
 # About the JXTX Foundation

diff --git a/content/foundation/recent-foundation-activity-and-news.md b/content/foundation/recent-foundation-activity-and-news.md
@@ -1,6 +1,7 @@
 ---
-description: ""
-title: ""
+description: "Recent foundation activity and news."
+image: ../_images/seo/about.png
+title: "Foundation Activity and News"
 ---
 
 # Recent Foundation Activity and News

diff --git a/content/news/2020-05-jtech.md b/content/news/2020-05-jtech.md
@@ -1,6 +1,7 @@
 ---
-description: ""
-title: ""
+description: "JTech: Junior Training and Educational Connections Hotspot."
+image: ../_images/seo/newsroom.png
+title: "JTech, the James Taylor Foundation"
 ---
 
 # JTech, the James Taylor Foundation

diff --git a/content/news/2020-07-bds-scholarships.md b/content/news/2020-07-bds-scholarships.md
@@ -1,6 +1,7 @@
 ---
-description: ""
-title: ""
+description: "JTech and Biological Data Science 2020. JTech and CSHL will provide support to 10 outstanding graduate students in genomics and data sciences to attend the 2020 CSHL Biological Data Science Conference."
+image: ../_images/seo/newsroom.png
+title: "Call for Scholarship Applications"
 ---
 
 # Call for Scholarship Applications

diff --git a/content/news/2020-10-jxtx-awardees.md b/content/news/2020-10-jxtx-awardees.md
@@ -1,5 +1,6 @@
 ---
 description: "JXTX: The James P. Taylor Foundation for Open Science is pleased to announce the recipients of the 2020 JTech Scholarships."
+image: ../_images/seo/newsroom.png
 images:
     - _images/newsroom-awardees-2020-bds.png
     - _images/awardee-emily-davis-marcisak.png

diff --git a/content/news/2020-11-jxtx-joglekar.md b/content/news/2020-11-jxtx-joglekar.md
@@ -1,5 +1,6 @@
 ---
-description: "Making Connections via the JXTX Foundation"
+description: "Making Connections via the JXTX Foundation."
+image: ../_images/seo/newsroom.png
 images:
     - _images/jxtx-awardee-anoushka.png
 title: "Scholarship Awardee: Anoushka Joglekar"

diff --git a/content/news/2020-11-jxtx-twesigomwe.md b/content/news/2020-11-jxtx-twesigomwe.md
@@ -1,5 +1,6 @@
 ---
 description: "David participated in Biological Data Science 2020."
+image: ../_images/seo/newsroom.png
 images:
     - _images/jxtx-awardee-david.png
 title: "David Twesigomwe on the impact of the JXTX Foundation"

diff --git a/content/news/2020-11-jxtx-zaman.md b/content/news/2020-11-jxtx-zaman.md
@@ -1,5 +1,6 @@
 ---
-description: "Discussing my research confidently with experts in the field"
+description: "Discussing my research confidently with experts in the field."
+image: ../_images/seo/newsroom.png
 images:
     - _images/jxtx-awardee-sumaira.png
 title: "Sumaira Zaman: JXTX Foundation and Unique Opportunities"

diff --git a/content/news/news.md b/content/news/news.md
@@ -1,6 +1,7 @@
 ---
 description: "Check out the latest news and stories about our work."
 fullWidth: true
+image: ../_images/seo/newsroom.png
 images:
     - _images/newsroom-hero-anoushka.png
     - _images/newsroom-sumaira.png

diff --git a/content/scholarships/2021-genome-informatics.md b/content/scholarships/2021-genome-informatics.md
@@ -1,5 +1,6 @@
 ---
-description: "JXTX 2021 Genome Informatics Scholarship"
+description: "JXTX 2021 Genome Informatics Scholarship."
+image: ../_images/seo/scholarships.png
 images:
     - _images/scholarships-hero-2021-gi.png
 title: "JXTX 2021 Genome Informatics Scholarship"

diff --git a/content/scholarships/scholarships.md b/content/scholarships/scholarships.md
@@ -1,6 +1,7 @@
 ---
-description: "JXTX Foundation Scholarships"
+description: "JXTX Foundation Scholarships."
 fullWidth: true
+image: ../_images/seo/scholarships.png
 images:
     - _images/scholarships-hero-2021-gi.png
     - _images/scholarships-hero-2020-bds.png

diff --git a/gatsby-config.js b/gatsby-config.js
@@ -15,7 +15,13 @@ const contentPath = "./content";
  */
 module.exports = {
   siteMetadata: {
-    title: "jxtx",
+    author: "JXTX",
+    description: "James P. Taylor Foundation for Open Science.",
+    image: "/images/hero.png",
+    title: "JXTX Foundation",
+    titleTemplate: "%s · James P. Taylor Foundation for Open Science.",
+    twitterUsername: "@jxtxFoundation",
+    url: "https://jxtxfoundation.org/",
   },
   plugins: [
     "gatsby-plugin-image",

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -104,6 +104,7 @@ exports.createSchemaCustomization = ({ actions }) => {
     type Frontmatter {
         description: String
         fullWidth: Boolean
+        image: File @fileByRelativePath
         images: [File] @fileByRelativePath
         links: [String]
         title: String

diff --git a/src/components/document-metadata/document-metadata.js b/src/components/document-metadata/document-metadata.js
@@ -6,14 +6,75 @@
  */
 
 // Core dependencies
+import { useLocation } from "@reach/router";
 import React from "react";
 import Helmet from "react-helmet";
 
-function DocumentMetadata() {
+// App dependencies
+import { SeoStaticQuery } from "../../hooks/seo-query";
+
+function DocumentMetadata(props) {
+  const { frontmatter } = props || {},
+    { description, image, title } = frontmatter || {},
+    { childImageSharp } = image || {},
+    { resize } = childImageSharp || {},
+    { src } = resize || {};
+  const { origin, href } = useLocation();
+  const { siteMetadata } = SeoStaticQuery(),
+    {
+      description: siteDescription,
+      image: siteImage,
+      title: siteTitle,
+      twitterUsername,
+    } = siteMetadata || {};
+  const seo = {
+    description: description || siteDescription,
+    image: `${origin}${src || siteImage}`,
+    title: title || siteTitle,
+    twitterUsername: twitterUsername,
+    url: href,
+  };
+
   return (
     <Helmet>
-      <title>JXTX Foundation</title>
+      <title>{seo.title}</title>
       <html lang="en" />
+      {/*<meta name="robots" content="noindex" />*/}
+      <meta content={seo.description} key="description" name="description" />
+      {seo.image && <meta content={seo.image} key="image" name="image" />}
+      <meta content={seo.url} key="og:url" property="og:url" />
+      <meta
+        content={"JXTX Foundation"}
+        key="og:site_name"
+        property="og:site_name"
+      />
+      <meta content="website" key="og:type" property="og:type" />
+      <meta content={seo.title} key="og:title" property="og:title" />
+      <meta
+        content={seo.description}
+        key="og:description"
+        property="og:description"
+      />
+      {seo.image && (
+        <meta content={seo.image} key="og:image" property="og:image" />
+      )}
+      <meta
+        content={"summary_large_image"}
+        key="twitter:card"
+        name="twitter:card"
+      />
+      <meta
+        content={seo.twitterUsername}
+        key="twitter:site"
+        name="twitter:site"
+      />
+      <meta content={seo.title} key="twitter:title" name="twitter:title" />
+      <meta
+        content={seo.description}
+        key="twitter:description"
+        name="twitter:description"
+      />
+      <meta content={seo.image} key="twitter:image" name="twitter:image" />
     </Helmet>
   );
 }

diff --git a/src/components/layout/layout.js b/src/components/layout/layout.js
@@ -21,11 +21,11 @@ import "../../styles/vars.module.css";
 import "../../styles/viewport-units.module.css";
 
 function Layout(props) {
-  const { children, headerMinor } = props;
+  const { children, frontmatter, headerMinor } = props;
 
   return (
     <>
-      <DocumentMetadata />
+      <DocumentMetadata frontmatter={frontmatter} />
       <div className={compStyles.site}>
         <Header headerMinor={headerMinor} />
         {children}

diff --git a/src/hooks/seo-query.js b/src/hooks/seo-query.js
@@ -0,0 +1,20 @@
+import { useStaticQuery, graphql } from "gatsby";
+
+export const SeoStaticQuery = () => {
+  const { site } = useStaticQuery(
+    graphql`
+      query SeoStaticQuery {
+        site {
+          siteMetadata {
+            description
+            image
+            title
+            url
+            twitterUsername
+          }
+        }
+      }
+    `
+  );
+  return site;
+};
diff --git a/src/templates/article.js b/src/templates/article.js
@@ -20,7 +20,7 @@ export default function Article({ data }) {
     { body: content, frontmatter } = post || {};
 
   return (
-    <Layout headerMinor>
+    <Layout frontmatter={frontmatter} headerMinor>
       <ArticleMain>
         <ArticleContent content={content} frontmatter={frontmatter} />
       </ArticleMain>
@@ -35,6 +35,13 @@ export const query = graphql`
       frontmatter {
         description
         fullWidth
+        image {
+          childImageSharp {
+            resize {
+              src
+            }
+          }
+        }
         images {
           childImageSharp {
             gatsbyImageData

diff --git a/static/images/hero.png b/static/images/hero.png
diff --git a/static/images/jxtx-foundation.png b/static/images/jxtx-foundation.png