Add font family overrides from typography module to Hero component

[wdawson]

Problem

Alpine leverages the @nuxt-themes/typography module, which defines the available schema.

My understanding, based on how articles are rendered, is that the font.display is meant for headers. However, this token does not get applied to the title on the Hero component. Additionally, the description only receives this font-family style because it is a list. If you remove the list items, it also doesn't get overridden by the token, probably also because it doesn't have an element that the typography module picks up.

Solution

This is probably because there isn't an h1 element created as part of the Hero title. Perhaps that should be fixed, however, I noticed that someone could theoretically have a list as the title, where an h1 wouldn't be relevant.

Therefore I decided to add some fontFamily css to Hero.vue so that anything that is put in the content is appropriately tagged.

Please let me know if there's a different solution that would be better. I'm happy to learn more about this ecosystem 😄

Validation

Here is a screenshot of the playground after making the following changes to .starters/default/tokens.config.ts:

import { defineTheme } from 'pinceau'

export default defineTheme({ 
  typography: {
    font: {
      display: '{font.mono}',
      body: '{font.mono}',
    }
  }
})

You can clearly see the monospace fonts now instead of the default sans-serif.

TODO

• determine whether to update the version in package.json as part of this PR (I didn't see it in the contributing guidelines).

Other Notes

The same sort of thing is happening in Article headers, though in that case there is an h1 element that is added. I filed an issue with the typography repo to start: nuxt-themes/typography#65

Also in this PR

• README.md update for the latest playground location.

[codesandbox]

This branch is running in CodeSandbox. Use the links below to review this PR faster.


  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders | Preview

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
alpine	✅ Ready (Inspect)	Visit Preview	Jul 7, 2023 11:40pm