jsonresume-component v0.3.1

jsonresume-component

<json-resume> is a web component (using LitElement) which presents resume content stored in JSON Resume format. The HTML structure uses the components from jsonresume-theme-microdata to generate HTML which includes structured data as microdata in HTML attributes.

<json-resume> extends <json-resume-ui> (included in the NPM release and this repo), which can be used in server-side rendering situations to generate a declarative shadow DOM containing the resume HTML and styles.

Check out the storybook for jsonresume-component to play with both components.

NPM / Node.js usage

Install dependencies

npm i jsonresume-component

Resume from Gist ID

import { JsonResume } from 'jsonresume-component';

<JsonResume gist_id="9e7a7ceb9425336c6aa08d58afb63b8d"></JsonResume>

Declarative Shadow DOM

You can generate the HTML on the server using the <json-resume-ui> component.

import { JsonResumeUI } from 'jsonresume-component/ui';
// your resume data
import resumejson from '../local/path/to/resume.json'
// you can use your own stylesheet instead of the bundled one
import styles from 'jsonresume-component/style.css?inline'

<JsonResumeUI resumejson={resumejson} stylesheet={styles}></JsonResumeUI>

Browser usage

The web component is lightly-bundled in that it puts all non-lit external files in a single .js file, which is located at ./dist/json-resume.js in the NPM package.

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 like this:

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

Add jsonresume-component

unpkg points directly to the lightly-bundled web component file, which does not include lit.

<script type="module">
  import 'https://unpkg.com/jsonresume-component'
</script>

Use the web component by giving it your gist ID

<json-resume gist_id="54682f0aa17453d46cdc74bdef3172a3"></json-resume>

The web component accepts a resume.json url

<json-resume json_url="https://gist.githubusercontent.com/scottnath/54682f0aa17453d46cdc74bdef3172a3/raw/resume.json"></json-resume>

Options

A modified JSON Resume schema

The JSON structure follows an extension of the JSON Resume schema with added schema structure for microdata itemtype on some content types, basics.pronouns, and meta.themeOptions which allows changing the content of the resume section titles, colors, and other theme opts. See the jsonresume-theme-microdata README for details on this adjusted structure.

class: JsonResumeUI, json-resume-ui

Fields

CSS Properties

CSS Parts

Slots

Exports

class: JsonResume, json-resume

Fields

CSS Properties

CSS Parts

Slots

Exports