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>
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
Usage
General usage
import { JsonResume } from 'jsonresume-component';
<JsonResume gist_id="9e7a7ceb9425336c6aa08d58afb63b8d"></JsonResume>
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>
Add jsonresume-component
<script type="module">
import 'https://esm.run/jsonresume-component'
</script>
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>
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)