@20minutes/tyr

Tyr

Contents

• What is Tyr?
• Releasing a new version
• Adding a new page or component
  • A new page
  • A new component
• Developement
• Testing
  • Linter
  • Unit tests

What is Tyr?

Tyr defines pages which will be available in Shuri by using components defined in Hela. Both pages & components config are defined here.

But Tyr also integrates custom scripts to be used in Shuri (like ads) which doesn't belong to a Design System (ie: Hela). And Tyr generates CSS (critical or not) for each page. The final package also integrates fonts from Hela (no actions are performed on them).

Releasing a new version

If you made some direct changes in Tyr, you can create a new version:

• upgrade the version in package.json
• submit the PR
• once merged, create the release
• the package will be automatically published on NPM

If you made CSS or fonts changes in Hela, you might want to update the Hela package version as well:

• before each previous steps, update the hela package version in package.json
• run yarn
• follow previous steps

Adding a new page or component

Here is a PR where both a page & a component were added.

:warning: In both case, Hela might have to be updated to a new version (containing new components) in your PR.

A new page

In case you want to create a Contribution page.

1. Declare the page type in src/types/PageConfig.ts
2. Create the page in src/pages/ContributionPage/ContributionPage.tsx. This define how the page will be rendered (you'll mostly use a template to render the page)
3. Create fixtures required for your page in src/fixtures/contribution.json
4. Define the storybook page in src/pages/ContributionPage/ContributionPage.stories.tsx which will re-use you previously defined fixtures & page
5. Export the page from the src/pages/ContributionPage/index.ts: export * from './ContributionPage'
6. Create a new page config in src/config/pageConfigs/ContributionPageConfig.ts, required keys are:
   1. name: the name of the page in lowerCamelCase
   2. component: the component defined in src/pages/ContributionPage/ContributionPage.tsx
   3. expiration: TTL in minutes of the whole page (default is 300)
   4. components: an array of components which are required to render the page (you might want the footer and the header which are in PAGE_TEMPLATE_COMPONENT_CONFIGS)

A new component

1. Declare the component type in src/types/ComponentConfig.ts (depending on which category it belong):
   1. article: if the component require some direct article information to be generated (like the title)
   2. common: in case the component has nothing to deal with other things (like the footer, the direct, etc.)
   3. rubric: the component needs a rubric to be generated (like most read)
2. Define the component in src/config/componentConfigs/component*Configs.ts (depending on which category it belong), keys to define:
   1. componentName (required): use the name you defined in the first step
   2. component (required): the component from Hela (don't forget to import it)
   3. expiration (optional): TTL in minutes (default to 43200 (30j))
3. Add the new component to one or more pages. For example if it belongs to an article:
   1. Edit src/config/pageConfigs/articlePageConfig.ts
   2. Here are the required keys:
      1. name: use the name you defined in the first step
      2. required: if the component is required to build the page (for example the title is required but social bar are optional)
      3. propName: the prop name you used for your component in Hela

Developement

You'll need to check if everything is ok inside Storybook, so launch the hot reloading storybook:

yarn storybook

When working locally, you might need to build a shippable version of Tyr to be used in Shuri, use:

yarn build:local

And if you are only working on the article page, you can build HTML & CSS only for that page (it'll speed up the build) using:

PAGE=article yarn build:local
# use whatever existing page as well
PAGE=tag yarn build:local

If you want to build for multiple pages, you can use coma:

PAGE=article,live yarn build:local

Testing

You can run tests either by:

• using vitest for unit tests

Linter

• Linter js: yarn lint

Unit tests

• yarn test