DEV Community

Cover image for How about a JSON Resume web component with configurable microdata?
Scott Nath
Scott Nath

Posted on • Originally published at scottnath.com

How about a JSON Resume web component with configurable microdata?

Introducing jsonresume-component, a web component which displays your resume, with microdata, theming, slots, and remote fetching of your JSON Resume resume.json file.

tl;dr

jsonresume-component is a web component that generates your resume with microdata following the Schema.org vocabulary set. It's custom element is <json-resume> and it fetches a resume.json file following the JSON Resume schema to create your resume. HTML is created from using the jsonresume-theme-microdata theme, creating a resume documented with microdata following the Schema.org vocabulary set.

snippet:

<script type="importmap">
  {
    "imports": {
      "lit": "https://esm.run/lit",
      "@lit/task": "https://esm.run/@lit/task"
    }
  }
</script>
<script type="module">
  import 'https://esm.run/jsonresume-component'
</script>
<json-resume gist_id="54682f0aa17453d46cdc74bdef3172a3"></json-resume>
Enter fullscreen mode Exit fullscreen mode

Prerequisites

  • You have your resume in a JSON file following the JSON Resume schema structure

Quick primer: How we got here

This web component is built using the HTML-generating functionality of the module jsonresume-theme-microdata. That module is a JSON Resume theme which is the subject of the article "Make your resume SEO friendly using JSON Resume with microdata". The underlying concepts of microdata and HTML were broken down in "How to Boost SEO by Enhancing HTML with Microdata".

How to implement <json-resume> in node

install dependencies

npm i lit @lit/task jsonresume-component
Enter fullscreen mode Exit fullscreen mode

Usage

General usage

import { JsonResume } from 'jsonresume-component';
Enter fullscreen mode Exit fullscreen mode
<JsonResume gist_id="9e7a7ceb9425336c6aa08d58afb63b8d"></JsonResume>
Enter fullscreen mode Exit fullscreen mode

How to implement the <json-resume> web component in HTML

include lit dependencies

<json-resume> uses lit and @lit/task which must be imported into your HTML file. You can include dependencies with an importmap, pulling them from a CDN:

<script type="importmap">
  {
    "imports": {
      "lit": "https://esm.run/lit",
      "@lit/task": "https://esm.run/@lit/task"
    }
  }
</script>
Enter fullscreen mode Exit fullscreen mode

Add jsonresume-component

<script type="module">
  import 'https://esm.run/jsonresume-component'
</script>
Enter fullscreen mode Exit fullscreen mode

Using just a gist id

This option automates fetching your resume.json file from a GitHub gist. The gist must have a file called resume.json in it.

<json-resume gist_id="9e7a7ceb9425336c6aa08d58afb63b8d"></json-resume>
Enter fullscreen mode Exit fullscreen mode

check out this stackblitz for examples with slots, alternative stylesheets, and a local resume.json

Conclusion

At the risk of recreating the detailed configuration docs in the jsonresume-component readme, let's stop there. The repo contains an examples directory for stackblitzin or wherever you open your examples.

Important reminder: this is not just your resume in a web component! It's also microdata! Check out the results from the Google Rich Results Test for the resume on my website.

Top comments (0)