Skip to content

Latest commit

 

History

History
266 lines (209 loc) · 15.1 KB

README.md

File metadata and controls

266 lines (209 loc) · 15.1 KB

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

Name Privacy Type Default Description Inherited From
label public string The aria-label for the `div` containing the resume. Defaults to `${basics.name}'s resume`
resumejson public object Property accepts a JSON Resume object
stylesheet public string Accepts a string containing styles **WARNING** Completely deletes and overrides internal component styles

CSS Properties

Name Default Description
--color-background-light Background color, light theme
--color-dimmed-light Dimmed background color, light theme
--color-primary-light Primary color, light theme
--color-secondary-light Secondary color, light theme
--color-link-light Link color, light theme
--color-background-dark Background color, dark theme
--color-dimmed-dark Dimmed background color, dark theme
--color-primary-dark Primary color, dark theme
--color-secondary-dark Secondary color, dark theme
--color-link-dark Link color, dark theme
--font-size Component font size, basis for many `em`-based styles
--font-family Component font family

CSS Parts

Name Description
jsonresume resume container
resume resume main article
basics style the `basics` section
name person's name, h1
label person's title/label, h2
image person's image
summary person's summary
contact contacts/locations list within basics
profiles profiles list within basics
section-title styles the `h3` title of all sections
work style the `work` section
volunteer style the `volunteer` section
education style the `education` section
awards style the `awards` section
certificates style the `certificates` section
publications style the `publications` section
skills style the `skills` section
languages style the `languages` section
interests style the `interests` section
references style the `references` section
projects style the `projects` section
meta style the `meta` section

Slots

Name Description
basics Replace the entire `basics` HTML section
work Replace the entire `work` HTML section
volunteer Replace the entire `volunteer` HTML section
education Replace the entire `education` HTML section
awards Replace the entire `awards` HTML section
certificates Replace the entire `certificates` HTML section
publications Replace the entire `publications` HTML section
skills Replace the entire `skills` HTML section
languages Replace the entire `languages` HTML section
interests Replace the entire `interests` HTML section
references Replace the entire `references` HTML section
projects Replace the entire `projects` HTML section
meta Replace the entire `meta` HTML section

Exports

Kind Name Declaration Module Package
js JsonResumeUI JsonResumeUI src/ui.js
custom-element-definition json-resume-ui JsonResumeUI src/ui.js

class: JsonResume, json-resume

Fields

Name Privacy Type Default Description Inherited From
gist_id public string GitHub gist ID. When present, calls the GitHub rest API to fetch a resume.json gist's content. Checked first, if gist is present and has a resume.json, `json_url` and `local_file` will be ignored.
json_url public string URL to a JSON file. When present, used to fetch a resume.json file from the URL. Checked second or if gist_id does not have a resume.json, `local_file` will be ignored.
preordered public boolean When true, sections of resume (basic, work, etc) will be injected according to their order in resume.json
label public string The aria-label for the `div` containing the resume. Defaults to `${basics.name}'s resume` JsonResumeUI
resumejson public object Property accepts a JSON Resume object JsonResumeUI
stylesheet public string Accepts a string containing styles **WARNING** Completely deletes and overrides internal component styles JsonResumeUI

CSS Properties

Name Default Description
--color-background-light Background color, light theme
--color-dimmed-light Dimmed background color, light theme
--color-primary-light Primary color, light theme
--color-secondary-light Secondary color, light theme
--color-link-light Link color, light theme
--color-background-dark Background color, dark theme
--color-dimmed-dark Dimmed background color, dark theme
--color-primary-dark Primary color, dark theme
--color-secondary-dark Secondary color, dark theme
--color-link-dark Link color, dark theme
--font-size Component font size, basis for many `em`-based styles
--font-family Component font family

CSS Parts

Name Description
jsonresume resume container
resume resume main article
basics style the `basics` section
name person's name, h1
label person's title/label, h2
image person's image
summary person's summary
contact contacts/locations list within basics
profiles profiles list within basics
section-title styles the `h3` title of all sections
work style the `work` section
volunteer style the `volunteer` section
education style the `education` section
awards style the `awards` section
certificates style the `certificates` section
publications style the `publications` section
skills style the `skills` section
languages style the `languages` section
interests style the `interests` section
references style the `references` section
projects style the `projects` section
meta style the `meta` section

Slots

Name Description
basics Replace the entire `basics` HTML section
work Replace the entire `work` HTML section
volunteer Replace the entire `volunteer` HTML section
education Replace the entire `education` HTML section
awards Replace the entire `awards` HTML section
certificates Replace the entire `certificates` HTML section
publications Replace the entire `publications` HTML section
skills Replace the entire `skills` HTML section
languages Replace the entire `languages` HTML section
interests Replace the entire `interests` HTML section
references Replace the entire `references` HTML section
projects Replace the entire `projects` HTML section
meta Replace the entire `meta` HTML section

Exports

Kind Name Declaration Module Package
js JsonResume JsonResume src/index.js
custom-element-definition json-resume JsonResume src/index.js