Code Monkey home page Code Monkey logo

jsonresume-theme-even's Introduction

jsonresume-theme-even

npm package version Build status Deploy status Code coverage Dependencies status

A flat JSON Resume theme, compatible with the latest resume schema. Inspired by jsonresume-theme-flat.

  • ๐Ÿ’„ Markdown support
  • ๐Ÿ“ CSS grid layout
  • ๐ŸŒ— Light and dark modes
  • ๐ŸŽจ Customizable colors
  • ๐Ÿงฉ Standalone CLI
  • ๐Ÿ“ฆ ESM and CommonJS builds
  • ๐Ÿค– TypeScript typings

View demo โ†’

Installation

npm install jsonresume-theme-even

Usage

With resume-cli

resume-cli comes with Even and uses it by default, so you don't even (pun intended) need to install the theme yourself:

npm install resume-cli
npx resume export resume.html

With Resumed

Resumed requires you to install the theme, since it does not come with any by default. It will then automatically load and use Even when rendering a resume:

npm install resumed jsonresume-theme-even
npx resumed render

Standalone usage

Even comes with a barebones CLI that reads resumes from stdin and outputs HTML to stdout. This allows usage without any resume builder tools:

npx jsonresume-theme-even < resume.json > resume.html

Options

Colors

You can override theme colors via the .meta.themeOptions.colors resume field. Each entry defines a tuple of light and (optional) dark color values. If only one array value is defined, it will be used in both light and dark modes.

Here's an example using the default theme colors:

{
  "meta": {
    "themeOptions": {
      "colors": {
        "background": ["#ffffff", "#191e23"],
        "dimmed": ["#f3f4f5", "#23282d"],
        "primary": ["#191e23", "#fbfbfc"],
        "secondary": ["#6c7781", "#ccd0d4"],
        "accent": ["#0073aa", "#00a0d2"]
      }
    }
  }
}

jsonresume-theme-even's People

Contributors

bramkok avatar rbardini avatar roschaefer avatar technicat avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

jsonresume-theme-even's Issues

schema v1 support?

I noticed this theme is not up to date with the schema. It is missing the certificates section.

Incompatible with PDF exporting

Summary

There are 2 issues with PDF export:

  1. The theme itself is currently incompatible with resume-cli PDF export - which looks to be because of changes in v0.14.0 which changed the package layout and removed index.js
  2. Using an alternative like Puppeteer and/or even a full browser like Chrome/Firefox, the elements have large gaps or are cut-off between pages

1. resume-cli incompatibility

Current version is incompatible with resume-cli PDF export:

$ npm ls
json-resume@ /Users/jesse/src/json-resume
โ”œโ”€โ”€ [email protected]
โ””โ”€โ”€ [email protected]

$ npx resume export --theme jsonresume-theme-even resume.pdf
You have to install this theme relative to the folder to use it e.g. `npm install /Users/jesse/src/json-resume/node_modules/jsonresume-theme-even/index.js`

The code for resume-cli seems to be looking for index.js, which no longer exists.

Downgrading to v0.13.0 (which still contained index.js) works:

$ npm ls
json-resume@ /Users/jesse/src/json-resume
โ”œโ”€โ”€ [email protected]
โ””โ”€โ”€ [email protected]

$ npx resume export --theme jsonresume-theme-even resume.pdf

Done! Find your new .pdf resume at:
 /Users/jesse/src/json-resume/resume.pdf

I believe the changes to use microbundle in v0.14.0 may have broken this.

2. CSS elements cut off or huge gaps

When printing the exported resume HTML using Chrome, elements can be split over page breaks:
image

In Firefox, it seems to want to keep entire sections together, so leaves huge breaks between:
image

I assume this needs some changes to to print media CSS, however that's not my expertise.

Day 1 of a month displays previous month

When I export my json-resume to html using resume-cli with the built-in even theme, all of my dates that have a day 01 will display the previous month, e.g. a project state date of 2022-06-01 ends up in the html as May 2022, where as incrementing it 2022-06-02 will correctly result in June 2022.

This appears to be an artifact of the dateFormat helper in index.js calling toLocaleDateString, similar behavior described here

https://stackoverflow.com/questions/41432834/wrong-date-with-javascript-function-tolocaledatestring

I believe, as mentioned in the link above, adding this parameter to the toLocaleDateString options will fix it (I tested it in a small node script)

timeZone: "UTC"

Error on `resume export` when `basics.summary` does not exist

For making resumes without an "About" section.

To reproduce, in a clean dir:

  1. run resume init (fill in name/email)
  2. edit resume.json to delete the summary line in basics
  3. run resume export output.html -t even
  4. error occurs (output attached)
    error.txt

Tested and the same resume.json does export using the elegant theme and when a blank summary line ("summary": "",) is included although that produces an undesired blank summary line on the output as well (example).

Oddly enough, this seems to work as desired on registry.jsonresume.org (see attached pics with and without a blank summary line in the basics obj).

with_summary

without_summary

Missing type in projects

Hi,

As per the schema:

"projects": [
  { 
    "type": // e.g. 'volunteering', 'presentation', 'talk', 'application', 'conference'
   }
]

This field does not seem to appear in the rendered theme.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.