feat: :spy: add schema org for videos; retrieve contentDetails from y…

…outube
kitos · Jan 9, 2019 · 5cc7cb7 · 5cc7cb7
1 parent 4331f83
commit 5cc7cb7
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 14 deletions.
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -28,7 +28,7 @@ let enrichPublicActivityVideosWithYouTubeSnippets = async ({
   let {
     data: { items: youtubeSnippets },
   } = await youtube.get('videos', {
-    params: { part: 'snippet', id: videoIds.join(',') },
+    params: { part: 'snippet,contentDetails', id: videoIds.join(',') },
   })
 
   videoMap.forEach((video, id) => {

diff --git a/src/pages/public-activity.js b/src/pages/public-activity.js
@@ -7,24 +7,49 @@ import VideoCard from '../components/video-card'
 
 let PublicActivityPage = ({
   data: { resp: { edges: videos = [] } = {} } = {},
-}) => (
-  <Layout pageTitle="Public activity">
-    <h2>Talks</h2>
+}) => {
+  videos = videos.map(v => ({
+    ...v.node,
+    ...v.node.fields.snippet,
+  }))
 
-    <Flex as="ul" m={'0 -20px'} flexWrap="wrap" css={{ listStyle: 'none' }}>
-      {videos
-        .map(v => ({
-          ...v.node,
-          ...v.node.fields.snippet,
-        }))
-        .map(v => (
+  return (
+    <Layout
+      pageTitle="Public activity"
+      schemaOrgItems={() => [
+        {
+          '@context': 'http://schema.org',
+          '@type': 'CollectionPage',
+          mainEntity: {
+            '@type': 'ItemList',
+            name: 'Projects',
+            itemListOrder: 'http://schema.org/ItemListOrderDescending',
+            itemListElement: videos.map(
+              ({ title, url, snippet, contentDetails }) => ({
+                '@type': 'VideoObject',
+                name: title,
+                contentUrl: url,
+                uploadDate: snippet.publishedAt,
+                duration: contentDetails.duration,
+                thumbnailUrl: snippet.thumbnails.maxres.url,
+              })
+            ),
+          },
+        },
+      ]}
+    >
+      <h2>Talks</h2>
+
+      <Flex as="ul" m={'0 -20px'} flexWrap="wrap" css={{ listStyle: 'none' }}>
+        {videos.map(v => (
           <Box as="li" key={v.id} width={[1, 'calc(50% - 20px)']} m={10}>
             <VideoCard video={v} />
           </Box>
         ))}
-    </Flex>
-  </Layout>
-)
+      </Flex>
+    </Layout>
+  )
+}
 
 export let query = graphql`
   query PublicActivityQuery {
@@ -38,6 +63,9 @@ export let query = graphql`
           fields {
             snippet {
               id
+              contentDetails {
+                duration
+              }
               snippet {
                 publishedAt
                 title