feat: add microdatas

components/PostMeta.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="post-meta">
     <div v-if="author" class="post-meta-author">
-      <NavigationIcon /> {{ author }}
+      <NavigationIcon />
+      <span itemprop="author">{{ author }}</span>
       <span v-if="location"> &nbsp; in {{ location }}</span>
     </div>
     <div v-if="date" class="post-meta-date">
-      <ClockIcon /> {{ resolvedDate }}
+      <ClockIcon />
+      <time pubdate itemprop="datePublished" :datetime="date">
+        {{ resolvedDate }}
+      </time>
     </div>
-    <ul v-if="tags" class="post-meta-tags">
+    <ul v-if="tags" class="post-meta-tags" itemprop="keywords">
       <PostTag v-for="tag in resolvedTags" :key="tag" :tag="tag" />
     </ul>
   </div>

global-components/BaseListLayout.vue

@@ -1,40 +1,69 @@
 <template>
   <div id="base-list-layout">
-    <div class="ui-posts">
-      <div v-for="page in pages" :key="page.key" class="ui-post">
-        <div class="ui-post-title">
+    <div class="ui-posts" itemscope itemtype="http://schema.org/Blog">
+      <article
+        v-for="page in pages"
+        :key="page.key"
+        class="ui-post"
+        itemprop="blogPost"
+        itemscope
+        itemtype="https://schema.org/BlogPosting"
+      >
+        <meta itemprop="mainEntityOfPage" :content="page.path" />
+        <meta
+          v-if="page.lastUpdated"
+          itemprop="dateModified"
+          :content="page.lastUpdated"
+        />
+
+        <header class="ui-post-title" itemprop="name headline">
           <NavLink :link="page.path">{{ page.title }}</NavLink>
-        </div>
+        </header>
 
-        <p class="ui-post-summary">
+        <p class="ui-post-summary" itemprop="description">
           {{ page.frontmatter.summary || page.summary }}
           <!-- <Content :page-key="page.key" slot-key="intro"/>-->
         </p>
 
-        <div v-if="page.frontmatter.author" class="ui-post-meta ui-post-author">
-          <NavigationIcon />
-          <span>{{ page.frontmatter.author }}</span>
-          <span v-if="page.frontmatter.location">
-            &nbsp; in {{ page.frontmatter.location }}
-          </span>
-        </div>
-
-        <div v-if="page.frontmatter.date" class="ui-post-meta ui-post-date">
-          <ClockIcon />
-          <span>{{ resolvePostDate(page.frontmatter.date) }}</span>
-        </div>
-
-        <div v-if="page.frontmatter.tags" class="ui-post-meta ui-post-tag">
-          <TagIcon />
-          <router-link
-            v-for="tag in resolvePostTags(page.frontmatter.tags)"
-            :key="tag"
-            :to="'/tag/' + tag"
+        <footer>
+          <div
+            v-if="page.frontmatter.author"
+            class="ui-post-meta ui-post-author"
           >
-            {{ tag }}
-          </router-link>
-        </div>
-      </div>
+            <NavigationIcon />
+            <span itemprop="author">{{ page.frontmatter.author }}</span>
+            <span v-if="page.frontmatter.location">
+              &nbsp; in {{ page.frontmatter.location }}
+            </span>
+          </div>
+
+          <div v-if="page.frontmatter.date" class="ui-post-meta ui-post-date">
+            <ClockIcon />
+            <time
+              pubdate
+              itemprop="datePublished"
+              :datetime="page.frontmatter.date"
+            >
+              {{ resolvePostDate(page.frontmatter.date) }}
+            </time>
+          </div>
+
+          <div
+            v-if="page.frontmatter.tags"
+            class="ui-post-meta ui-post-tag"
+            itemprop="keywords"
+          >
+            <TagIcon />
+            <router-link
+              v-for="tag in resolvePostTags(page.frontmatter.tags)"
+              :key="tag"
+              :to="'/tag/' + tag"
+            >
+              {{ tag }}
+            </router-link>
+          </div>
+        </footer>
+      </article>
     </div>
 
     <component

layouts/Post.vue

@@ -1,18 +1,28 @@
 <template>
   <div id="vuepress-theme-blog__post-layout">
-    <div class="vuepress-blog-theme-content">
-      <h1 class="post-title">{{ $frontmatter.title }}</h1>
-      <PostMeta
-        :tags="$frontmatter.tags"
-        :author="$frontmatter.author"
-        :date="$frontmatter.date"
-        :location="$frontmatter.location"
-      />
-      <Content />
-      <Newsletter v-if="$service.email.enabled" />
-      <hr />
-      <Comment />
-    </div>
+    <article
+      class="vuepress-blog-theme-content"
+      itemscope
+      itemtype="https://schema.org/BlogPosting"
+    >
+      <header>
+        <h1 class="post-title" itemprop="name headline">
+          {{ $frontmatter.title }}
+        </h1>
+        <PostMeta
+          :tags="$frontmatter.tags"
+          :author="$frontmatter.author"
+          :date="$frontmatter.date"
+          :location="$frontmatter.location"
+        />
+      </header>
+      <Content itemprop="articleBody" />
+      <footer>
+        <Newsletter v-if="$service.email.enabled" />
+        <hr />
+        <Comment />
+      </footer>
+    </article>
     <Toc />
   </div>
 </template>