🧐 add microdata to github

scottnath · Apr 5, 2024 · c4c8447 · c4c8447
1 parent d5f9acb
commit c4c8447
Show file tree

Hide file tree

Showing 14 changed files with 102 additions and 76 deletions.
diff --git a/src/devto/post/html.js b/src/devto/post/html.js
@@ -9,7 +9,7 @@
 function html(content) {
   if (content.error) {
     return `
-      <div aria-label="dev.to article" class="post" itemscope itemtype="http://schema.org/Action">
+      <div aria-label="dev.to article" class="post" itemscope itemtype="https://schema.org/Action">
         <p itemprop="error">${content.error}</p>
       </div>
     `
@@ -18,7 +18,7 @@ function html(content) {
   const itemprop = content.schema_itemprop !== '' ? `itemprop=${content.schema_itemprop}` : '';
 
   return `
-    <span aria-label="dev.to article" class="post" ${itemprop} itemscope itemtype="http://schema.org/Article">
+    <span aria-label="dev.to article" class="post" ${itemprop} itemscope itemtype="https://schema.org/Article">
       <a href="${content.url}" itemprop="url" aria-label="article ${content.title}">
         <img src="${content.cover_image}" itemprop="image" alt="Cover image for article ${content.title}" />
         <span itemprop="name" aria-hidden="true">${content.title}</span>

diff --git a/src/devto/user/content.js b/src/devto/user/content.js
@@ -62,7 +62,7 @@ export const fetchUser = async (username, id) => {
  * Parses a string, which should be a JSON stringified array of DEV post 
  *  objects
  * @param {string} postStr - String of ForemPost data
- * @returns {ForemPost} content for a post
+ * @returns {ForemPostHTML} content for a post
  * @function
  * @ignore
  */

diff --git a/src/devto/user/html.js b/src/devto/user/html.js
@@ -11,7 +11,7 @@ import postHTML from "../post/html.js";
 function html(content) {
   if (content.error) {
     return `
-      <section aria-label="dev.to user profile" itemscope itemtype="http://schema.org/Action">
+      <section aria-label="dev.to user profile" itemscope itemtype="https://schema.org/Action">
         <p itemprop="error">${content.error}</p>
       </section>
     `
@@ -20,7 +20,7 @@ function html(content) {
   const itemprop = content.schema_itemprop !== '' ? `itemprop=${content.schema_itemprop}` : '';
 
   return `
-    <section aria-label="dev.to user profile" ${itemprop} itemscope itemtype="http://schema.org/ProfilePage">
+    <section aria-label="dev.to user profile" ${itemprop} itemscope itemtype="https://schema.org/ProfilePage">
       <header aria-label="${content.a11y.headerLabel}">
         <span aria-hidden="true"><span itemprop="publisher">dev.to</span></span>
         <address>

diff --git a/src/devto/user/user.stories.js b/src/devto/user/user.stories.js
@@ -57,12 +57,8 @@ export const UserPosts = {
 export const Schema = {
   args: {
     ...UserPosts.args,
-    latest_post: stringinator({
-      ...parseFetchedPost(postDependabot)
-    }),
-    popular_post: stringinator({
-      ...parseFetchedPost(postBugfix)
-    }),
+    latest_post: stringinator(parseFetchedPost(postDependabot)),
+    popular_post: stringinator(parseFetchedPost(postBugfix)),
     schema_itemprop: 'owns'
   },
   play: async ({ args, canvasElement }) => {

diff --git a/src/github/repository/content.js b/src/github/repository/content.js
@@ -14,6 +14,7 @@ const githubApi = 'https://api.github.com';
  * @property {string} [forks_count] - number of forks
  * @property {string} [subscribers_count] - number of watchers
  * @property {string} [error] - error message, if any
+ * @property {string} [schema_itemprop] - schema.org itemprop content on main element
  * @memberof GitHubUtils.repo
  */
 
@@ -52,6 +53,7 @@ export const parseFetchedRepo = (repo = {}) => {
     stargazers_count: repo.stargazers_count,
     forks_count: repo.forks_count,
     subscribers_count: repo.subscribers_count,
+    schema_itemprop: repo.schema_itemprop || '',
   }
 }
 

diff --git a/src/github/repository/html.js b/src/github/repository/html.js
@@ -12,38 +12,49 @@ import { intToString } from '../../utils/index.js';
 function html(content) {
   if (content.error) {
     return `
-      <section aria-label="GitHub repository" class="repo" itemscope itemtype="http://schema.org/Action">
+      <section aria-label="GitHub repository" class="repo" itemscope itemtype="https://schema.org/Action">
         <p itemprop="error">${content.error}</p>
       </section>
     `
   }
+
+  const itemprop = content.schema_itemprop !== '' ? `itemprop=${content.schema_itemprop}` : '';
+
   return `
-    <section aria-label="GitHub repository" class="repo" itemscope itemtype="http://schema.org/SoftwareSourceCode">
+    <section aria-label="GitHub repository" class="repo" ${itemprop} itemscope itemtype="https://schema.org/SoftwareSourceCode">
       <a href="https://github.com/${content.full_name}" itemprop="codeRepository" aria-label="${content.full_name} repository on GitHub">
         ${content.org ? `
           <span itemprop="maintainer" aria-hidden="true">${content.org} /</span>
         ` : ''}
         <span itemprop="name" aria-hidden="true">${content.name}</span>
       </a>
       ${content.description ? `
-        <p itemprop="about">${content.description}</p>
+        <p itemprop="description">${content.description}</p>
       ` : ''}
       <dl aria-label="Repository details">
         ${content.language ? `
-          <dt data-detail="language" data-language="${content.language}"><span class="sr-only">Language</span></dt>
-          <dd itemprop="programmingLanguage">${content.language}</dd>
+          <div>
+            <dt data-detail="language" data-language="${content.language}"><span class="sr-only">Language</span></dt>
+            <dd itemprop="programmingLanguage">${content.language}</dd>
+          </div>
         ` : ''}
         ${content.stargazers_count ? `
-          <dt data-detail="stars"><span class="sr-only">Stars</span></dt>
-          <dd><span aria-hidden="true">${intToString(content.stargazers_count)}</span><span class="sr-only">${content.stargazers_count}</span></dd>
+          <div itemprop="interactionStatistic" itemscope itemtype="https://schema.org/InteractionCounter">
+            <dt data-detail="stars"><meta itemprop="interactionType" content="https://schema.org/LikeAction"><span class="sr-only">Stars</span></dt>
+            <dd><span aria-hidden="true">${intToString(content.stargazers_count)} </span><span class="sr-only" itemprop="userInteractionCount">${content.stargazers_count}</span></dd>
+          </div>
         ` : ''}
         ${content.subscribers_count ? `
-          <dt data-detail="watchers"><span class="sr-only">Watchers</span></dt>
-          <dd><span aria-hidden="true">${intToString(content.subscribers_count)}</span><span class="sr-only">${content.subscribers_count}</span></dd>
+          <div itemprop="interactionStatistic" itemscope itemtype="https://schema.org/InteractionCounter">
+            <dt data-detail="watchers"><meta itemprop="interactionType" content="https://schema.org/FollowAction"><span class="sr-only">Watchers</span></dt>
+            <dd><span aria-hidden="true">${intToString(content.subscribers_count)}</span><span class="sr-only" itemprop="userInteractionCount">${content.subscribers_count}</span></dd>
+          </div>
         ` : ''}
         ${content.forks_count ? `
-          <dt data-detail="forks"><span class="sr-only">Forks</span></dt>
-          <dd><span aria-hidden="true">${intToString(content.forks_count)}</span><span class="sr-only">${content.forks_count}</span></dd>
+          <div itemprop="interactionStatistic" itemscope itemtype="https://schema.org/InteractionCounter">
+            <dt data-detail="forks"><meta itemprop="interactionType" content="https://schema.org/CreateAction"><span class="sr-only" itemprop="location">Forks</span></dt>
+            <dd><span aria-hidden="true">${intToString(content.forks_count)}</  span><span class="sr-only" itemprop="userInteractionCount">${content.forks_count}</span></dd>
+          </div>
         ` : ''}
       </dl>
     </section>

diff --git a/src/github/repository/index.js b/src/github/repository/index.js
@@ -19,9 +19,9 @@ import { repository as styles } from '../styles/index.js';
  * @property {string} [stargazers_count] - number of stars
  * @property {string} [forks_count] - number of forks
  * @property {string} [subscribers_count] - number of watchers
- * @property {string} [itemprop] - Itemprop content to go with a containing component's itemscope
  * @property {string} [no_org] - Do not include the repo owner or organization
  * @property {string} [theme] - color theme for the component
+ * @property {string} [schema_itemprop] - schema.org itemprop content on main element
  * 
  * @example
  * <!-- import the web component -->
@@ -59,9 +59,6 @@ export class GitHubRepository extends HTMLElement {
     this.repo = await generateRepoContent(this.attrs, this.attrs.fetch, this.attrs.no_org);
     view += html(this.repo);
     this.shadowRoot.innerHTML = view;
-    if (this.attrs.itemprop) {
-      this.setAttribute('itemprop', this.attrs.itemprop);
-    }
     if (this.attrs.theme) {
       this.setAttribute('data-theme', this.attrs.theme);
     }

diff --git a/src/github/styles/repository.css b/src/github/styles/repository.css
@@ -1,15 +1,5 @@
 /** styles for the GitHub repository web component */
 
-div[itemscope] {
-  padding: var(--row-spacing);
-}
-
-@container (min-width: 300px) {
-  div[itemscope] {
-    padding: calc(var(--row-spacing) * 2);
-  }
-}
-
 [itemprop="codeRepository"] {
   display: block;
 
@@ -37,7 +27,7 @@ div[itemscope] {
   }
 }
 
-[itemprop="about"] {
+[itemprop="description"] {
   margin-top: var(--row-spacing);
   color: var(--color-light);
 }
@@ -49,8 +39,13 @@ div[itemscope] {
   gap: var(--svg-gap);
   color: var(--color-light);
   margin-top: var(--row-spacing);
-
-  > dt {
+  div {
+    flex: 1 1 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    gap: var(--svg-gap);
+  }
+  dt {
     flex: 0 0 var(--svg-size);
     background-color: var(--color-light);
     -webkit-mask-repeat: no-repeat;
@@ -78,7 +73,7 @@ div[itemscope] {
       mask-image: var(--svg-repo-forked);
     }
   }
-  > dd {
+  dd {
     /* margin-right: 1em; */
     flex: 0 0 calc(100% - calc(var(--svg-size) + var(--svg-gap)));
 
@@ -88,13 +83,13 @@ div[itemscope] {
   }
 
   @container (min-width: 300px) {
-    > dd:not([itemprop="programmingLanguage"]) {
+    div:has(dd:not([itemprop="programmingLanguage"])) {
       flex: 1 0 auto;
     }
   }
 
   @container (min-width: 400px) {
-    > dd {
+    div {
       flex: 1 0 auto;
     }
   }

diff --git a/src/github/styles/user.css b/src/github/styles/user.css
@@ -10,15 +10,15 @@ section[itemscope] {
   overflow-wrap: anywhere;
   overflow: hidden;
 }
-:host header:first-child {
+:host header:has([itemprop="publisher"]) {
   background-color: var(--bg-color-light);
   padding: var(--row-spacing);
 
   display: flex;
   gap: var(--svg-gap);
   height: calc(var(--logo-size) + var(--logo-outline-offset) * 2);
 
-  [itemprop="memberOf"] {
+  [itemprop="publisher"] {
     background-color: var(--color-normal);
     width: var(--logo-size);
     height: var(--logo-size);
@@ -48,14 +48,14 @@ section[itemscope] {
     }
   }
 
-  [itemprop="alternativeName"] {
+  [itemprop="additionalName"] {
     flex: 1 0 auto;
     color: var(--color-normal);
     font-weight: var(--font-weight-bold);
     padding-inline: var(--row-spacing);
   }
 }
-[part="main"] {
+[itemprop="mainEntity"] {
   padding: var(--row-spacing);
 
   [itemprop="url"] {
@@ -79,7 +79,7 @@ section[itemscope] {
       }
     }
 
-    [itemprop="creator"] {
+    :has([itemprop="additionalName"]) {
       color: var(--color-normal);
 
       & span {
@@ -92,7 +92,7 @@ section[itemscope] {
         font-weight: var(--font-weight-bold);
       }
 
-      [itemprop="alternativeName"] {
+      [itemprop="additionalName"] {
         color: var(--color-light);
         font-size: var(--font-size-bold);
         font-style: normal;
@@ -114,7 +114,7 @@ section[itemscope] {
           height: 26cqw;
         }
       }
-      [itemprop="creator"] {
+      :has([itemprop="additionalName"]) {
         flex: 1 0 70%;
         text-align: left;
       }
@@ -125,11 +125,10 @@ section[itemscope] {
     margin-bottom: var(--row-spacing);
   }
 
-  & dl:has([itemprop="follows"]),
-  & dl:has([itemprop="followee"]) {
+  & dl:has([itemprop="interactionStatistic"]) {
 
     &::before,
-    [itemprop="follows"]::before {
+    .follows::before {
       content: " ";
       display: inline-block;
       vertical-align: text-top;
@@ -159,13 +158,13 @@ section[itemscope] {
         flex: 0 0 auto;
       }
     }
-    [itemprop="follows"]::before {
+    .follows::before {
       margin-right: .3em;
     }
   }
   @container user (min-width: 300px) {
-    & dl:has([itemprop="followee"]) {
-      [itemprop="follows"]::before {
+    & dl:has(.followee) {
+      .follows::before {
         content: ' · ';
         margin-right: 0;
         -webkit-mask-image: none;
@@ -176,6 +175,9 @@ section[itemscope] {
       }
     }
   }
+}
+div:has(.repo) {
+  padding: var(--row-spacing);
   & dl:has(.repo) {
     margin-top: .5em;
 

diff --git a/src/github/styles/vars-global.css b/src/github/styles/vars-global.css
@@ -78,8 +78,7 @@ address {
   white-space: nowrap;
 }
 
-section[itemscope],
-div[itemscope] {
+section[itemscope] {
   background-color: var(--bg-color-normal);
   border-color: var(--border-color);
   border-style: solid;

diff --git a/src/github/user/content.js b/src/github/user/content.js
@@ -27,6 +27,7 @@ const blankPng = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1
  * @property {string} [error] - error message, if any
  * @property {Object} [a11y] - accessibility content
  * @property {Array<GitHubRepositoryHTML>} [repositories] - array of repositories
+ * @property {string} [schema_itemprop] - schema.org itemprop content on main element
  */
 
 /**
@@ -64,6 +65,7 @@ export const parseFetchedUser = (user = {}) => {
     following: user.following,
     followers: user.followers,
     a11y: user.a11y || {},
+    schema_itemprop: user.schema_itemprop || '',
   }
 }
 
@@ -101,7 +103,7 @@ export const parseReposString = (reposStr, owner) => {
         no_org: true,
       };
     }
-    repo.itemprop = repo.itemprop || 'maintainer';
+    repo.schema_itemprop = repo.schema_itemprop || 'workExample';
     return repo;
   }).filter((repo) => repo !== undefined);
 }