README.hbs

# jsonresume-component

`<json-resume>` is a web component (using LitElement) which presents resume content stored in [JSON Resume][jsonresume] format. The HTML structure uses the components from [jsonresume-theme-microdata][jtm] 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`](https://main--6632f42ef9bacea464588c02.chromatic.com) to play with both components.


## NPM / Node.js usage

### Install dependencies

```sh
npm i jsonresume-component
```

### Resume from Gist ID

```javascript
import { JsonResume } from 'jsonresume-component';
```

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

### Declarative Shadow DOM

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

```javascript
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'
```

```html
<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`](https://lit.dev) and [`@lit/task`](https://lit.dev/docs/data/task/) which must be imported into your HTML file. You can include dependencies with an [importmap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) like this:

```html
<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`.

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

### Use the web component by giving it your `gist` ID

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

### The web component accepts a `resume.json` url

```html
<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][jsonresume] 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][jtm] README for details on this adjusted structure.


{{>main}}


[microdata-html]: /blahg/microdata-with-html/
[microdata-jsonresume]: /blahg/microdata-with-jsonresume/
[jsonresume]: https://jsonresume.org
[jsonresume-schema]: https://github.com/jsonresume/resume-schema/blob/master/schema.json
[jsonresume-project]: https://jsonresume.org/projects/
[jtm]: https://github.com/scottnath/jsonresume-theme-microdata
[jtm-example]: https://github.com/scottnath/jsonresume-theme-microdata/TBD___
[jte]: https://github.com/rbardini/jsonresume-theme-even