🎨 return markdown

README.md

@@ -2,6 +2,7 @@
 
 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.
 
+- 💄 Markdown support
 - 🔬 Resume content included as inline microdata
 - 📐 CSS grid layout
 - 🌗 Light and dark modes
@@ -20,10 +21,6 @@ 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/index.js

@@ -1,5 +1,6 @@
 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
@@ -19,7 +20,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>${summary}</dd>`}
+                ${summary && html`<dd>${markdown(summary)}</dd>`}
               </div>
             `,
           )}

components/Basics/basics.js

@@ -1,5 +1,6 @@
 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'
 
@@ -17,7 +18,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">${summary}</div>`}
+      ${summary && html`<div itemprop="description">${markdown(summary)}</div>`}
       <div>
         <address part="contact">
           <dl class="icon-list">

components/Education/institution.js

@@ -1,6 +1,7 @@
 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 */
 
@@ -24,17 +25,17 @@ 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">${studyType}</div>`}
+      ${studyType && html`<div itemprop="educationalProgramMode">${markdown(studyType)}</div>`}
       ${startDate && html`<p>${Duration(startDate, endDate)}</p>`}
       ${courses.length > 0 &&
       html`
         <ul>
           ${courses.map(
             course =>
               html`<li itemprop="hasCourse" itemscope itemtype="https://schema.org/Course">
-                <p itemprop="teaches">${course}</p>
-                <meta itemprop="name" content="${course}" />
-                <meta itemprop="description" content="${course}" />
+                <p itemprop="teaches">${markdown(course)}</p>
+                <meta itemprop="name" content="${markdown(course, true)}" />
+                <meta itemprop="description" content="${markdown(course, true)}" />
               </li>`,
           )}
         </ul>

components/Projects/project.js

@@ -1,6 +1,7 @@
 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 */
 
@@ -39,7 +40,7 @@ export default function Project(item, itemprop) {
         <span itemprop="name">${entity}</span>
       </p>`}
       ${type && html`<p itemprop="additionalType">${type}</p>`}
-      ${description && html`<div class="meta" itemprop="description">${description}</div>`}
+      ${description && html`<div class="meta" itemprop="description">${markdown(description)}</div>`}
       ${keywords.length > 0 &&
       html`<div class="meta">
         <ul itemprop="keywords" class="tag-list">
@@ -55,7 +56,7 @@ export default function Project(item, itemprop) {
         ${highlights.length > 0 &&
         html`
           <ul>
-            ${highlights.map(highlight => html`<li itemprop="description">${highlight}</li>`)}
+            ${highlights.map(highlight => html`<li itemprop="description">${markdown(highlight)}</li>`)}
           </ul>
         `}
       </section>

components/Publications/index.js

@@ -1,6 +1,7 @@
 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 */
 
@@ -33,7 +34,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">${summary}</dd>`}
+                ${summary && html`<dd itemprop="abstract">${markdown(summary)}</dd>`}
               </div>
             `,
           )}

components/References/index.js

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

components/Volunteer/volunteer-role.js

@@ -1,6 +1,7 @@
 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 */
 /**
@@ -17,11 +18,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">${summary}</div>`}
+      ${summary && html`<div itemprop="description">${markdown(summary)}</div>`}
       ${highlights.length > 0 &&
       html`
         <ul>
-          ${highlights.map(highlight => html`<li itemprop="description">${highlight}</li>`)}
+          ${highlights.map(highlight => html`<li itemprop="description">${markdown(highlight)}</li>`)}
         </ul>
       `}
     </section>

components/Work/work-role.js

@@ -1,6 +1,7 @@
 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 */
 
@@ -33,11 +34,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">${summary}</div>`}
+      ${summary && html`<div itemprop="description">${markdown(summary)}</div>`}
       ${highlights.length > 0 &&
       html`
         <ul>
-          ${highlights.map(highlight => html`<li itemprop="disambiguatingDescription">${highlight}</li>`)}
+          ${highlights.map(highlight => html`<li itemprop="disambiguatingDescription">${markdown(highlight)}</li>`)}
         </ul>
       `}
     </section>

components/utils/markdown.js

@@ -0,0 +1,13 @@
+import { micromark } from 'micromark'
+import striptags from 'striptags'
+
+/**
+ * @param {string} doc
+ * @param {boolean} [stripTags]
+ * @returns
+ */
+export default function markdown(doc, stripTags = false) {
+  const result = micromark(doc)
+  const html = /** @type {string} */ (micromark(doc))
+  return stripTags ? striptags(html) : html
+}

package.json

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