Website for the RFC Editor

Design

• The new www.rfc-editor.org design on Figma. As development continues this is the graphic design that we will be adhering to where possible.

Contributing

This code repository is under the broader guidance from IETF CONTRIBUTING.md.

Development

Prerequisites

• Docker Desktop
• WSL2 (Windows only)

Getting Started

Client

See /client/

TODO

Documentation (markdown)

Markdown files are in client/content. Markdown Frontmatter (metadata) fields supported are listed in content.config.js.

Testing

Visual regression testing

Visual regression testing compares screenshots of the app against approved 'baseline' screenshots.

The pages or components being screenshotted are specified in *.story.vue files using Histoire.dev.

The screenshots are taken using Lost Pixel OSS in docker, ensuring that there are no OS differences in rendering between CI and local tests. These approved 'baseline' screenshots are found in client/.lostpixel/baseline.

How to test visual regressions

1. If necessary create or update a *.story.vue file with your components. Be sure to include every configuration of your component.
2. Run npm run story:dev to see the component library and view your component and make sure it works.
3. Run npm run story:build ...which builds the *.story.vue files.
4. npm run test:story ...tests screenshots of the aforementioned build (using Lost Pixel OSS) giving either a pass (exiting cleanly) or fail (exiting with an exception). a. If 'pass' then you're done, and you can push your changes. b. If 'fail' then run npm run test:story:view to view the differences in a browser. Find the *.story.vue files that were affected and rerun npm run story:build and npm run test:story until you're happy with the changes. When ready to approve ALL the changes run npm run test:story:approve, commit the updated 'baseline' images in client/.lostpixel/baseline, and push the changes. If

Troubleshooting npm run test:story:approve

This command should always succeed. If it fails it usually means there's a JavaScript exception being thrown in the app. Read all the console output carefully, and try viewing your component with npm run story:dev to see if there's an exception being thrown.

Troubleshooting

During local dev website doesn't update with changes

Stop the dev server, run npm run cleanup, and restart the dev server.