adding microdata to events and changelog

Author: Kayla Wilkins

src/components/2_molecules/changelog-item.js

@@ -2,20 +2,36 @@ import React from "react";
 import PropTypes from "prop-types";
 
 const ChangelogItem = ({ title, date, version, html }) => (
-  <div className="flex flex-wrap">
+  <div
+    className="flex flex-wrap"
+    itemscope=""
+    itemtype="http://schema.org/CreativeWork"
+  >
+    <meta itemprop="author" content="Linode" />
     <div className="w-full md:w-1/4 py-2 md:p-6 md:text-right mt-1 flex items-center md:block">
-      <div className="timeago mr-4 md:mr-0" dateTime="">
+      <div
+        className="timeago mr-4 md:mr-0"
+        dateTime=""
+        itemprop="datePublished"
+      >
         {date}
       </div>
       <div className="text-BaseBlue md:mt-3 flex md:block ">
-        <span className="changelog-product" />
-        {version && <div className="text-BaseBlue ml-4 md:ml-0">{version}</div>}
+        <span className="changelog-product" itemprop="name" />
+        {version && (
+          <div className="text-BaseBlue ml-4 md:ml-0" itemprop="version">
+            {version}
+          </div>
+        )}
       </div>
     </div>
     <div className="w-full md:w-3/4 py-2 md:p-6">
-      <h2 className="mt-0 text-2xl font-normal">{title}</h2>
+      <h2 className="mt-0 text-2xl font-normal" itemprop="alternativeHeadline">
+        {title}
+      </h2>
       <div
         className="changelog-entry"
+        itemprop="disambiguatingDescription"
         dangerouslySetInnerHTML={{ __html: html }}
       />
     </div>

src/pages/index.js

@@ -117,7 +117,15 @@ const IndexPage = ({ data }) => {
                 <article
                   className="w-full md:w-1/3 px-4 mb-4 md:mb-8"
                   key={edge.node.id}
+                  itemscope=""
+                  itemtype="http://schema.org/ExhibitionEvent"
                 >
+                  <meta
+                    itemprop="attendee"
+                    itemscope
+                    itemtype="http://schema.org/Organization"
+                    content="Linode"
+                  />
                   <div className="p-8 h-full bg-ThemeCell tile">
                     <header>
                       <h3 className="mt-0 mb-4 font-normal">
@@ -126,16 +134,31 @@ const IndexPage = ({ data }) => {
                           className="text-black tile-link"
                           target="_blank"
                           rel="noopener noreferrer"
+                          itemprop="url"
                         >
-                          {frontmatter.title}
+                          <span itemprop="name">{frontmatter.title}</span>
                         </a>
                       </h3>
                     </header>
                     <section>
-                      <div>{frontmatter.location}</div>
-                      <div>{frontmatter.start_date}</div>
+                      <div
+                        itemprop="location"
+                        itemscope
+                        itemtype="http://schema.org/Place"
+                      >
+                        <span itemprop="address">{frontmatter.location}</span>
+                      </div>
+                      <div>
+                        <time
+                          itemprop="startDate"
+                          datetime={frontmatter.start_date}
+                        >
+                          {frontmatter.start_date}
+                        </time>
+                      </div>
                       {edge.node.html && (
                         <p
+                          itemprop="description"
                           dangerouslySetInnerHTML={{ __html: edge.node.html }}
                         />
                       )}