-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🆕 update README with docs, add examples
- Loading branch information
Showing
12 changed files
with
210 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| # 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. | ||
|
|
||
|
|
||
| ## NPM / Node.js usage | ||
|
|
||
| ### Install dependencies | ||
|
|
||
| ```sh | ||
| npm i jsonresume-component | ||
| ``` | ||
|
|
||
| ```javascript | ||
| import { JsonResume } from 'jsonresume-component/src/index.js'; | ||
| ``` | ||
|
|
||
| ```html | ||
| <JsonResume gist_id="9e7a7ceb9425336c6aa08d58afb63b8d"></JsonResume> | ||
| ``` | ||
|
|
||
| ## 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| json-resume web component examples | ||
| --- | ||
|
|
||
| [](https://stackblitz.com/github/scottnath/jsonresume-component/tree/main/examples/browser?file=README.md) | ||
|
|
||
|
|
||
| These examples show usage of `<json-resume>` in a browser. | ||
|
|
||
| * [Get `resume.json` using a GitHub gist ID](./index.html) | ||
| * [Injecting a local `resume.json`](./local.html) | ||
| * [Replacing resume sections with `slot` content](./slots.html) | ||
| * [Overriding _all_ styles with your own stylesheet](./stylesheet.html) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -13,7 +13,7 @@ | |
| } | ||
| </script> | ||
| <script type="module"> | ||
| import 'https://esm.run/jsonresume-component' | ||
| import 'https://unpkg.com/jsonresume-component' | ||
| // imports a stylesheet to a variable | ||
| import evenTheme from 'https://unpkg.com/[email protected]/dist/style.css' with { type: "css" }; | ||
| // converts stylesheet to a string | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import fs from 'fs'; | ||
| import path from 'path'; | ||
| import { fileURLToPath } from 'url' | ||
| import { customElementsManifestToMarkdown } from '@custom-elements-manifest/to-markdown'; | ||
|
|
||
| const __filename = fileURLToPath(import.meta.url) | ||
| const __dirname = path.dirname(__filename) | ||
|
|
||
| const template = fs.readFileSync(path.join(__dirname, '../README.hbs'), 'utf8'); | ||
|
|
||
| const manifest = JSON.parse(fs.readFileSync('./custom-elements.json', 'utf-8')); | ||
| const markdown = customElementsManifestToMarkdown(manifest, { | ||
| heading: 3, | ||
| private: 'hidden', | ||
| omitSections: [ | ||
| 'main-heading', | ||
| 'super-class', | ||
| 'attributes' | ||
| ] | ||
| }); | ||
|
|
||
| const final = template.replace('{{>main}}', markdown) | ||
|
|
||
| fs.writeFileSync('./README.md', final); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters