🔥 remove microdata

README.md

@@ -3,7 +3,6 @@
 A [JSON Resume](https://jsonresume.org/) theme with styles and DevX forked from [rbardini/jsonresume-theme-even][even-theme]. This theme includes microdata and HTML changes, as well as an expanded schema structure for microdata `itemtype` on some content types, `basics.pronouns`, and `meta.sectionTitles` which allows changing the content of the resume section titles.
 
 - 🔬 Resume content included as inline microdata
-- 💄 Markdown support
 - 📐 CSS grid layout
 - 🌗 Light and dark modes
 - 🎨 Customizable colors
@@ -21,6 +20,10 @@ npm install jsonresume-theme-microdata
 
 **note: this resume should replicate [rbardini's `even` theme][even-theme].**
 
+### markdown support has been removed
+
+To ease external use of the HTML templates, markdown conversions that were happening in `even` have been removed. Please pre-convert your markdown content to HTML when making your resume.json.
+
 ### microdata
 
 This resume includes structured data in the form of microdata added as attributes throughout the HTML.

components/Awards/awards.stories.js

@@ -41,3 +41,22 @@ export const OneAward = {
     expect(awardData.award).toContain(args.awards[0].title)
   },
 }
+
+export const HTMLSummary = {
+  args: {
+    awards: [
+      {
+        ...resume.awards[0],
+        summary: `<p>${resume.awards[0].summary}</p>`,
+      },
+    ],
+  },
+  play: async ({ args, canvasElement, step }) => {
+    const awardData = microdata('https://schema.org/Person', canvasElement)
+    expect.objectContaining({
+      '@type': 'Person',
+      award: expect.any(String),
+    })
+    expect(awardData.award).toContain(args.awards[0].title)
+  },
+}

components/Awards/index.js

@@ -1,6 +1,5 @@
 import { ShortDate } from '../utils/date.js'
 import html from '../utils/html.js'
-import markdown from '../utils/markdown.js'
 
 /**
  * @param {import('../../schema.js').ResumeSchema['awards']} awards
@@ -20,7 +19,7 @@ export default function Awards(awards = [], title = 'Awards') {
                 <dd class="meta">
                   ${awarder && html`<div>Awarded by <strong>${awarder}</strong></div>`} ${date && ShortDate(date)}
                 </dd>
-                ${summary && html`<dd>${markdown(summary)}</dd>`}
+                ${summary && html`<dd>${summary}</dd>`}
               </div>
             `,
           )}

components/Basics/basics.js

@@ -1,6 +1,5 @@
 import html from '../utils/html.js'
 import Link from '../utils/link.js'
-import markdown from '../utils/markdown.js'
 import Location from './location.js'
 import Profiles from './profiles.js'
 
@@ -18,7 +17,7 @@ export default function Header(basics = {}) {
         ${label && html`<h2 itemprop="jobTitle">${label}</h2>`}
       </div>
       ${image && html`<img src="${image}" alt="${name}'s picture" itemprop="image" />`}
-      ${summary && html`<div itemprop="description">${markdown(summary)}</div>`}
+      ${summary && html`<div itemprop="description">${summary}</div>`}
       <div>
         <address part="contact">
           <dl class="icon-list">

components/Education/institution.js

@@ -1,7 +1,6 @@
 import Duration from '../utils/duration.js'
 import html from '../utils/html.js'
 import Link from '../utils/link.js'
-import markdown from '../utils/markdown.js'
 
 /** @typedef {NonNullable<import('../../schema.d.ts').ResumeSchema['education']>[number]} Institution */
 
@@ -25,7 +24,7 @@ export default function Institution(item, itemprop) {
     <h4>${Link(url, institution)}</h4>
     <section itemprop="owns" itemscope itemtype="https://schema.org/EducationalOccupationalProgram">
       ${area && html`<h5 itemprop="occupationalCategory">${area}</h5>`}
-      ${studyType && html`<div itemprop="educationalProgramMode">${markdown(studyType)}</div>`}
+      ${studyType && html`<div itemprop="educationalProgramMode">${studyType}</div>`}
       ${startDate && html`<p>${Duration(startDate, endDate)}</p>`}
       ${courses.length > 0 &&
       html`

components/Projects/project.js

@@ -1,7 +1,6 @@
 import Duration from '../utils/duration.js'
 import html from '../utils/html.js'
 import Link from '../utils/link.js'
-import markdown from '../utils/markdown.js'
 
 /** @typedef {NonNullable<import('../../schema.d.ts').ResumeSchema['projects']>[number]} Project */
 
@@ -56,7 +55,7 @@ export default function Project(item, itemprop) {
         ${highlights.length > 0 &&
         html`
           <ul>
-            ${highlights.map(highlight => html`<li itemprop="description">${markdown(highlight)}</li>`)}
+            ${highlights.map(highlight => html`<li itemprop="description">${highlight}</li>`)}
           </ul>
         `}
       </section>

components/Publications/index.js

@@ -1,7 +1,6 @@
 import { ShortDate } from '../utils/date.js'
 import html from '../utils/html.js'
 import Link from '../utils/link.js'
-import markdown from '../utils/markdown.js'
 
 /** @typedef {NonNullable<import('../../schema.d.ts').ResumeSchema['publications']>} Publications */
 
@@ -34,7 +33,7 @@ export default function Publications(publications = [], title = 'Publications')
                   Published by <strong itemprop="name">${publisher}</strong>
                 </dd>`}
                 ${releaseDate && html`<dd class="meta" itemprop="dateCreated">${ShortDate(releaseDate)}</dd>`}
-                ${summary && html`<dd itemprop="abstract">${markdown(summary)}</dd>`}
+                ${summary && html`<dd itemprop="abstract">${summary}</dd>`}
               </div>
             `,
           )}

components/References/index.js

@@ -1,5 +1,4 @@
 import html from '../utils/html.js'
-import markdown from '../utils/markdown.js'
 
 /** @typedef {NonNullable<import('../../schema.d.ts').ResumeSchema['references']>} References */
 
@@ -18,7 +17,7 @@ export default function References(references = [], title = 'References') {
           ${references.map(
             ({ name, reference }) => html`
               <blockquote itemprop="subjectOf" itemscope itemtype="https://schema.org/Statement">
-                ${reference && html`<div itemprop="text">${markdown(reference)}</div>`}
+                ${reference && html`<div itemprop="text">${reference}</div>`}
                 ${name &&
                 html`
                   <p itemprop="author" itemscope itemtype="https://schema.org/Person">

components/Volunteer/volunteer-role.js

@@ -1,7 +1,6 @@
 import Duration from '../utils/duration.js'
 import html from '../utils/html.js'
 import Link from '../utils/link.js'
-import markdown from '../utils/markdown.js'
 
 /** @typedef {NonNullable<import('../../schema.d.ts').ResumeSchema['volunteer']>[number]} Volunteer */
 /**
@@ -18,11 +17,11 @@ export default function VolunteerRole(item, itemprop) {
     <section itemprop="employee" itemscope itemtype="https://schema.org/OrganizationRole">
       <h5 itemprop="roleName">${position}</h5>
       ${startDate && html`<p>${Duration(startDate, endDate)}</p>`}
-      ${summary && html`<div itemprop="description">${markdown(summary)}</div>`}
+      ${summary && html`<div itemprop="description">${summary}</div>`}
       ${highlights.length > 0 &&
       html`
         <ul>
-          ${highlights.map(highlight => html`<li itemprop="description">${markdown(highlight)}</li>`)}
+          ${highlights.map(highlight => html`<li itemprop="description">${highlight}</li>`)}
         </ul>
       `}
     </section>

components/Work/work-role.js

@@ -1,7 +1,6 @@
 import Duration from '../utils/duration.js'
 import html from '../utils/html.js'
 import Link from '../utils/link.js'
-import markdown from '../utils/markdown.js'
 
 /** @typedef {NonNullable<import('../../schema.d.ts').ResumeSchema['work']>[number]} Work */
 
@@ -34,11 +33,11 @@ export default function WorkRole(item, itemprop) {
       <div class="meta">
         ${startDate && html`<p>${Duration(startDate, endDate)}</p>`} ${location && html`<p>${location}</p>`}
       </div>
-      ${summary && html`<div itemprop="description">${markdown(summary)}</div>`}
+      ${summary && html`<div itemprop="description">${summary}</div>`}
       ${highlights.length > 0 &&
       html`
         <ul>
-          ${highlights.map(highlight => html`<li itemprop="disambiguatingDescription">${markdown(highlight)}</li>`)}
+          ${highlights.map(highlight => html`<li itemprop="disambiguatingDescription">${highlight}</li>`)}
         </ul>
       `}
     </section>

components/utils/html-meta.js

@@ -1,5 +1,5 @@
+import striptags from 'striptags'
 import html from './html.js'
-import markdown from './markdown.js'
 
 /**
  * @param {import('../../schema.d.ts').ResumeSchema['basics']} basics
@@ -10,6 +10,6 @@ export default function HeadMeta(basics = {}) {
 
   return html`
     ${name && html`<title>${name}</title>`}
-    ${summary && html`<meta name="description" content="${markdown(summary, true)}" />`}
+    ${summary && html`<meta name="description" content="${striptags(summary)}" />`}
   `
 }

components/utils/icon.js

@@ -1,4 +1,4 @@
-import feather from 'feather-icons'
+import { icons } from 'feather-icons'
 
 /** @typedef {import('feather-icons').FeatherIconNames} FeatherIconNames */
 
@@ -9,7 +9,7 @@ import feather from 'feather-icons'
  */
 export default function Icon(name, fallback) {
   const icon =
-    feather.icons[/** @type {FeatherIconNames} */ (name.toLowerCase())] ||
-    (fallback && feather.icons[/** @type {FeatherIconNames} */ (fallback.toLowerCase())])
+    icons[/** @type {FeatherIconNames} */ (name.toLowerCase())] ||
+    (fallback && icons[/** @type {FeatherIconNames} */ (fallback.toLowerCase())])
   return icon?.toSvg({ width: 16, height: 16 })
 }

package.json

@@ -67,7 +67,6 @@
   },
   "dependencies": {
     "feather-icons": "^4.29.2",
-    "micromark": "^4.0.0",
     "striptags": "^3.2.0"
   },
   "devDependencies": {

test/__snapshots__/index.test.js.snap

@@ -25,7 +25,7 @@ exports[`renders a resume 1`] = `
         <h2 itemprop="jobTitle">Programmer</h2>
       </div>
       <img src="image.jpg" alt="Richard Hendriks's picture" itemprop="image" />
-      <div itemprop="description"><p>Richard hails from Tulsa. He has earned degrees from the University of Oklahoma and Stanford. (Go Sooners and Cardinal!) Before starting Pied Piper, he worked for Hooli as a part time software developer. While his work focuses on applied information theory, mostly optimizing lossless compression schema of both the length-limited and adaptive variants, his non-work interests range widely, everything from quantum computing to chaos theory. He could tell you about it, but THAT would NOT be a “length-limited” conversation!</p></div>
+      <div itemprop="description">Richard hails from Tulsa. He has earned degrees from the University of Oklahoma and Stanford. (Go Sooners and Cardinal!) Before starting Pied Piper, he worked for Hooli as a part time software developer. While his work focuses on applied information theory, mostly optimizing lossless compression schema of both the length-limited and adaptive variants, his non-work interests range widely, everything from quantum computing to chaos theory. He could tell you about it, but THAT would NOT be a “length-limited” conversation!</div>
       <div>
         <address part="contact">
           <dl class="icon-list">
@@ -91,10 +91,10 @@ exports[`renders a resume 1`] = `
       <div class="meta">
         <p><time datetime="2013-12-01" itemprop="startDate">Dec 2013</time> – <time datetime="2014-12-01" itemprop="endDate">Dec 2014</time></p> <p>Palo Alto, CA</p>
       </div>
-      <div itemprop="description"><p>Pied Piper is a multi-platform technology based on a proprietary universal compression algorithm that has consistently fielded high Weisman Scores™ that are not merely competitive, but approach the theoretical limit of lossless compression.</p></div>
+      <div itemprop="description">Pied Piper is a multi-platform technology based on a proprietary universal compression algorithm that has consistently fielded high Weisman Scores™ that are not merely competitive, but approach the theoretical limit of lossless compression.</div>
       
         <ul>
-          <li itemprop="disambiguatingDescription"><p>Build an algorithm for artist to detect if their music was violating copy right infringement laws</p></li><li itemprop="disambiguatingDescription"><p>Successfully won Techcrunch Disrupt</p></li><li itemprop="disambiguatingDescription"><p>Optimized an algorithm that holds the current world record for Weisman Scores</p></li>
+          <li itemprop="disambiguatingDescription">Build an algorithm for artist to detect if their music was violating copy right infringement laws</li><li itemprop="disambiguatingDescription">Successfully won Techcrunch Disrupt</li><li itemprop="disambiguatingDescription">Optimized an algorithm that holds the current world record for Weisman Scores</li>
         </ul>
       
     </section>
@@ -110,10 +110,10 @@ exports[`renders a resume 1`] = `
     <section itemprop="employee" itemscope itemtype="https://schema.org/OrganizationRole">
       <h5 itemprop="roleName">Teacher</h5>
       <p><time datetime="2012-01-01" itemprop="startDate">Jan 2012</time> – <time datetime="2013-01-01" itemprop="endDate">Jan 2013</time></p>
-      <div itemprop="description"><p>Global movement of free coding clubs for young people.</p></div>
+      <div itemprop="description">Global movement of free coding clubs for young people.</div>
       
         <ul>
-          <li itemprop="description"><p>Awarded 'Teacher of the Month'</p></li>
+          <li itemprop="description">Awarded 'Teacher of the Month'</li>
         </ul>
       
     </section>
@@ -126,7 +126,7 @@ exports[`renders a resume 1`] = `
     <h4><a href="https://www.ou.edu/" itemprop="url"><span itemprop="name">University of Oklahoma</span></a></h4>
     <section itemprop="owns" itemscope itemtype="https://schema.org/EducationalOccupationalProgram">
       <h5 itemprop="occupationalCategory">Information Technology</h5>
-      <div itemprop="educationalProgramMode"><p>Bachelor</p></div>
+      <div itemprop="educationalProgramMode">Bachelor</div>
       <p><time datetime="2011-06-01" itemprop="startDate">Jun 2011</time> – <time datetime="2014-01-01" itemprop="endDate">Jan 2014</time></p>
       
         <ul>
@@ -154,7 +154,7 @@ exports[`renders a resume 1`] = `
                 <dd class="meta">
                   <div>Awarded by <strong>Techcrunch</strong></div> <time datetime="2014-11-01" >Nov 2014</time>
                 </dd>
-                <dd><p>There is no spoon.</p></dd>
+                <dd>There is no spoon.</dd>
               </div>
             
         </dl>
@@ -170,7 +170,7 @@ exports[`renders a resume 1`] = `
                   Published by <strong itemprop="name">Hooli</strong>
                 </dd>
                 <dd class="meta" itemprop="dateCreated"><time datetime="2014-10-01" >Oct 2014</time></dd>
-                <dd itemprop="abstract"><p>Innovative middle-out compression algorithm that changes the way we store data.</p></dd>
+                <dd itemprop="abstract">Innovative middle-out compression algorithm that changes the way we store data.</dd>
               </div>
             
         </dl>
@@ -218,7 +218,7 @@ exports[`renders a resume 1`] = `
         <div class="stack">
           
               <blockquote itemprop="subjectOf" itemscope itemtype="https://schema.org/Statement">
-                <div itemprop="text"><p>It is my pleasure to recommend Richard, his performance working as a consultant for Main St. Company proved that he will be a valuable addition to any company.</p></div>
+                <div itemprop="text">It is my pleasure to recommend Richard, his performance working as a consultant for Main St. Company proved that he will be a valuable addition to any company.</div>
                 
                   <p itemprop="author" itemscope itemtype="https://schema.org/Person">
                     <cite itemprop="name">Erlich Bachman</cite>
@@ -251,7 +251,7 @@ exports[`renders a resume 1`] = `
         <p><time datetime="2016-08-24" itemprop="startDate">Aug 2016</time> – <time datetime="2016-08-24" itemprop="endDate">Aug 2016</time></p>
         
           <ul>
-            <li itemprop="description"><p>Won award at AIHacks 2016</p></li><li itemprop="description"><p>Built by all women team of newbie programmers</p></li><li itemprop="description"><p>Using modern technologies such as GoogleMaps, Chrome Extension and Javascript</p></li>
+            <li itemprop="description">Won award at AIHacks 2016</li><li itemprop="description">Built by all women team of newbie programmers</li><li itemprop="description">Using modern technologies such as GoogleMaps, Chrome Extension and Javascript</li>
           </ul>
         
       </section>