https://github.com/ietf-tools/rfced-www

RFC Editor website
https://github.com/ietf-tools/rfced-www

Last synced: about 1 month ago
JSON representation

RFC Editor website

• Host: GitHub
• URL: https://github.com/ietf-tools/rfced-www
• Owner: ietf-tools
• License: bsd-3-clause
• Created: 2024-08-28T20:25:55.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2025-04-11T14:39:15.000Z (about 1 month ago)
• Last Synced: 2025-04-11T15:50:51.483Z (about 1 month ago)
• Language: HTML
• Size: 59.1 MB
• Stars: 2
• Watchers: 4
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  



[![Release](https://img.shields.io/github/release/ietf-tools/rfced-www.svg?style=flat&maxAge=300)](https://github.com/ietf-tools/rfced-www/releases)

[![License](https://img.shields.io/github/license/ietf-tools/rfced-www)](https://github.com/ietf-tools/rfced-www/blob/main/LICENSE)

![Node Version](https://img.shields.io/badge/node.js-20-green?logo=node.js&logoColor=white)

![Nuxt Version](https://img.shields.io/badge/nuxt-3-green?logo=nuxt.js&logoColor=white)

![Vue Version](https://img.shields.io/badge/vue-3-green?logo=vue.js&logoColor=white)

##### Website for the RFC Editor



# Design

- The [new www.rfc-editor.org design on Figma](https://www.figma.com/design/bCDqtdSnErGOe6Oc87W8pR/RFC-Editor---Design-2). As development continues this is the graphic design that we will be adhering to where possible.

# Development

## Prerequisites

- [Docker Desktop](https://www.docker.com/products/docker-desktop/)

- [WSL2](https://learn.microsoft.com/en-us/windows/wsl/install) _(Windows only)_

## Getting Started

### Client

See `/client/`

_TODO_

## 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](https://histoire.dev/).

The screenshots are taken using [Lost Pixel OSS](https://www.lost-pixel.com/) 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](https://www.lost-pixel.com/)) 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.