🔍 add itemtype across schema; add cssparts, sectionTitles (#4)

* 🔍 add `itemtype` across schema; add cssparts * 📝 add params for section titles * 🚀 include components bundle * 🎨 change css prop; add colors, add styled story
scottnath · May 17, 2024 · ef22e9b · ef22e9b
1 parent 060436c
commit ef22e9b
Show file tree

Hide file tree

Showing 68 changed files with 15,661 additions and 32,291 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -15,8 +15,11 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
       - name: Install dependencies
-        run: npm ci
+        run: yarn install
         # 👇 Adds Chromatic as a step in the workflow
       - name: Publish to Chromatic
         uses: chromaui/action@latest

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -10,9 +10,8 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: '20.x'
-
       - name: Install
-        run: npm ci
+        run: yarn install
 
       - name: Type-check
         run: npm run type-check

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -27,7 +27,7 @@ jobs:
         with:
           node-version: 'lts/*'
       - name: Install dependencies
-        run: npm clean-install
+        run: yarn install
       - name: Verify the integrity of provenance attestations and registry signatures for installed dependencies
         run: npm audit signatures
       - name: Release

diff --git a/.github/workflows/ui-tests.yml b/.github/workflows/ui-tests.yml
@@ -12,7 +12,7 @@ jobs:
         with:
           node-version: '20.x'
       - name: Install dependencies
-        run: npm ci
+        run: yarn install
       - name: Install Playwright
         run: npx playwright install --with-deps
       - name: Build Storybook

diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,5 +1,15 @@
 import type { StorybookConfig } from '@storybook/web-components-vite'
 import path from 'path'
+import { mergeConfig } from 'vite'
+import istanbul from 'vite-plugin-istanbul'
+
+const coverageConfig = {
+  include: ['../src/**/*.jsx'],
+  exclude: ['src/main.jsx'],
+  extension: ['.jsx'],
+  excludeNodeModules: true,
+  all: true,
+}
 
 const config: StorybookConfig = {
   stories: ['../**/*.mdx', '../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -8,6 +18,8 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@chromatic-com/storybook',
+    '@storybook/addon-coverage',
+    'storybook-addon-render-modes',
   ],
   framework: {
     name: '@storybook/web-components-vite',
@@ -17,19 +29,23 @@ const config: StorybookConfig = {
     autodocs: 'tag',
   },
   async viteFinal(config, options) {
-    // Ensures that the cache directory is inside the project directory
-    config.cacheDir = path.join(__dirname, '../node_modules/.vite-storybook')
-    config.resolve = {
-      ...config.resolve,
-      alias: {
-        '@': path.resolve(__dirname, '../'),
+    return mergeConfig(config, {
+      // customize the Vite config here
+      cacheDir: path.join(__dirname, '../node_modules/.vite-storybook'),
+      plugins: [
+        istanbul({
+          ...coverageConfig,
+        }),
+      ],
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '../'),
+        },
+      },
+      define: {
+        'process.env': process.env,
       },
-    }
-    config.define = {
-      ...config.define,
-      'process.env': process.env,
-    }
-    return config
+    })
   },
 }
 export default config
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -0,0 +1,8 @@
+import { addons } from '@storybook/manager-api'
+
+addons.setConfig({
+  sidebar: {
+    showRoots: false,
+    collapsedRoots: ['other'],
+  },
+})
diff --git a/README.md b/README.md
@@ -1,56 +1,222 @@
 # jsonresume-theme-microdata
 
-**WIP: fork of [rbardini/jsonresume-theme-even](https://github.com/rbardini/jsonresume-theme-even) with added microdata and HTML changes**
-
-A flat [JSON Resume](https://jsonresume.org/) theme, compatible with the latest [resume schema](https://github.com/jsonresume/resume-schema).
-Inspired by [jsonresume-theme-flat](https://github.com/erming/jsonresume-theme-flat).
+A [JSON Resume](https://jsonresume.org/) theme with styles and DevX forked from [rbardini/jsonresume-theme-even][even-theme]. This theme includes microdata and HTML changes, as well as an expanded schema structure for microdata `itemtype` on some content types, `basics.pronouns`, and `meta.sectionTitles` which allows changing the content of the resume section titles.
 
 - 💄 Markdown support
+- 🔬 Resume content included as inline microdata
 - 📐 CSS grid layout
 - 🌗 Light and dark modes
 - 🎨 Customizable colors
 - 🧩 Standalone CLI
 - 📦 ESM and CommonJS builds
 - 🤖 TypeScript typings
 
-[View demo →](https://jsonresume-theme-microdata.rbrd.in)
-
 ## Installation
 
 ```console
 npm install jsonresume-theme-microdata
 ```
 
-## Usage
+## How is this theme different than `jsonresume-theme-even`?
 
-### With resume-cli
+**note: this resume should replicate [rbardini's `even` theme][even-theme].**
 
-[resume-cli](https://github.com/jsonresume/resume-cli) comes with _Even_ and uses it by default, so you don't even (pun intended) need to install the theme yourself:
+### microdata
 
-```console
-npm install resume-cli
-npx resume export resume.html
-```
+This resume includes structured data in the form of microdata added as attributes throughout the HTML.
+
+To learn more, see the article [Make your resume SEO friendly using JSON Resume with microdata][explainer]
+
+### schema.json extension
+
+Extra properties were added to support control of the final structured data output on some content types. For instance, in the `Work` HTML, the default designation for an employer is the Type `Organization`, but [schema.org/Organization](https://schema.org/Organization) has a lot of specific subTypes like `Corporation` or `WorkersUnion` - each with their own sub-data.
+
+See the Options below for how to add them to your resume.json.
+
+### HTML changes
+
+There are also slight changes to the HTML structures. Some changes, including the addition of `part` attributes, are there for styling and to allow usage in web components
+
+### expanded distribution library
+
+The HTML structures from this repo are exported in the NPM distribution. All components are bundled together in `dist/components.js`.
+
+The un-bundled files, along with the storybook and test files are in the distribution as well.
+
+## Usage
 
 ### With Resumed
 
-[Resumed](https://github.com/rbardini/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:
+[Resumed](https://github.com/rbardini/resumed) requires you to install the theme, since it does not come with any by default. You will need to tell `resumed` to use the microdata theme. This assumes you have your `resume.json` file in the directory where you are running this command
 
 ```console
 npm install resumed jsonresume-theme-microdata
-npx resumed render
+npx resumed render --theme jsonresume-theme-microdata
 ```
 
 ### 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:
+Carried over by forking _Even_, this repo comes with a barebones CLI that reads resumes from `stdin` and outputs HTML to `stdout`. This allows usage without any resume builder tools:
 
 ```console
-npx jsonresume-theme-microdata < resume.json > resume.html
+npx jsonresume-theme-microdata < /path/to/resume.json > resume.html
 ```
 
 ## Options
 
+The [expanded JSON Resume schema](./schema.json) includes options for extra pieces of content. These are not required and this resume will work and look correct with resume.json files following the 2021 JSON Resume schema.
+
+### pronouns
+
+You may add a string which represents your pronouns at `basics.pronouns`, which are then included in the `basics` section.
+
+### microdata `itemtype`s
+
+Multiple resume sections have a variable `itemtype` the default of which was determined to best correspond to the resume section content type. These Types are pulled from the vocabulary Types from [Schema.org](https://schema.org). (remember to check out [this SEO article explaining the usage][explainer]).
+
+Changes across the schema
+
+```json
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  ...
+  "properties": {
+    ...
+    "basics": {
+      "items": {
+        "properties": {
+          ...
+          "pronouns": {
+            "type": "string",
+            "description": "e.g. they/them/theirs"
+          },
+          ...
+        }
+      }
+    },
+    "work": {
+      "items": {
+        "properties": {
+          ...
+          "itemtype": {
+            "type": "string",
+            "description": "Organization Schema.org vocabulary Type, e.g. `Corporation`"
+          },
+          ...
+        }
+      }
+    },
+    "volunteer": {
+      "items": {
+        "properties": {
+          ...
+          "itemtype": {
+            "type": "string",
+            "description": "Organization Schema.org vocabulary Type, e.g. `NGO`"
+          },
+          ...
+        }
+      }
+    },
+    "education": {
+      "items": {
+        "properties": {
+          ...
+          "itemtype": {
+            "type": "string",
+            "description": "Organization Schema.org vocabulary Type, e.g. `EducationalOrganization`"
+          },
+          ...
+        }
+      }
+    },
+    "certificates": {
+      "items": {
+        "properties": {
+          ...
+          "itemtype": {
+            "type": "string",
+            "description": "Organization Schema.org vocabulary Type for `issuer`, e.g. `EducationalOrganization`"
+          },
+          ...
+        }
+      }
+    },
+    "publications": {
+      "items": {
+        "properties": {
+          ...
+          "itemtype": {
+            "type": "string",
+            "description": "CreativeWork Schema.org vocabulary Type, e.g. `HowTo`"
+          },
+          ...
+          "publisherItemtype": {
+            "type": "string",
+            "description": "Organization Schema.org vocabulary Type, e.g. `OnlineBusiness`"
+          },
+          ...
+        }
+      }
+    },
+    "skills": {
+      "items": {
+        "properties": {
+          ...
+          "itemtype": {
+            "type": "string",
+            "description": "Schema.org vocabulary Type, e.g. `ComputerLanguage`"
+          },
+          ...
+        }
+      }
+    },
+    "interests": {
+      "items": {
+        "properties": {
+          ...
+          "itemtype": {
+            "type": "string",
+            "description": "Thing Schema.org vocabulary Type, e.g. `Brand`"
+          },
+          ...
+        }
+      }
+    },
+    "projects": {
+      "items": {
+        "properties": {
+          ...
+          "itemtype": {
+            "type": "string",
+            "description": "Project Schema.org vocabulary Type, e.g. any `Organization`"
+          },
+          ...
+          "entityItemtype": {
+            "type": "string",
+            "description": "Organization Schema.org vocabulary Type, e.g. `NGO`"
+          },
+          ...
+        }
+      }
+    },
+
+```
+
+### Preordered
+
+You can change the order of the sections via the `.meta.themeOptions.preordered` boolean. When `true`, the resume sections (basics, work, etc) will be presented in the resume HTML according to how the sections are ordered in your resume.json file.
+
+```json
+{
+  "meta": {
+    "themeOptions": {
+      "preordered": true
+    }
+  }
+}
+```
+
 ### 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.
@@ -66,9 +232,31 @@ Here's an example using the default theme colors:
         "dimmed": ["#f3f4f5", "#23282d"],
         "primary": ["#191e23", "#fbfbfc"],
         "secondary": ["#6c7781", "#ccd0d4"],
-        "accent": ["#0073aa", "#00a0d2"]
+        "link": ["#0073aa", "#00a0d2"]
       }
     }
   }
 }
 ```
+
+### Section Titles
+
+You can change the text of the section titles via the `.meta.themeOptions.sectionTitles` object field. You can change one or all titles by adding them to this object, which will change the sections `H3` tag's contents. Note: `basics` and `meta` do not have titles.
+
+```json
+{
+  "meta": {
+    "themeOptions": {
+      "sectionTitles": {
+        "work": "Work of a Cat",
+        "certificates": "Certificates of Meowing",
+        "publications": "Publications for Meows",
+        "skills": "Feline Skillset"
+      }
+    }
+  }
+}
+```
+
+[explainer]: https://dev.to/scottnath/make-your-resume-seo-friendly-using-json-resume-with-microdata-1kln
+[even-theme]: https://github.com/rbardini/jsonresume-theme-even