flybywiresim / website

Marketing website for FlyByWire Simulations

This is the website repository for the FlyByWire Simulations website.

Getting Started

Install dependencies.

npm install

Start development server.

npm run dev

Start a production server

npm run build
npm run start

To build the website for production, run the following commands.

npm run build
npm run export

Relevant Documentation

• Next.js used to build our page.
• React javascript library used to make UI.
• tailwindcss low level CSS classes.

website's Issues

Add more prominent discord button

Text in "About" page has bad contrast

The contrast on the text shown in the screenshot is not high enough.

Problems with react-changelog

react-changelog uses deprecated lifecycle methods and improperly handles rendered arrays. It doesn't seem like it's being actively maintained, either.

Would there be any interest in replacing this with a new library or even something built specifically for this project?

I'm needing a changelog page in one of my other projects so I'd be able to build a replacement lib that would work for the both of us.

[BUG] Automatic scroll cuts off text

When I click on download

The text above the download section is being cut off

This is how I would expect it to line up

[FEATURE/CHANGE] INSERT TITLE HERE: weather radar

Suggested feature/change

< Make a brief remark about the feature/change you wish to see >

Explain the feature/change(if applicable)

< Explain to the best of your ability the feature/change so people can understand what to do. >

Disclaimer if the feature/change is due to personal preference it may be subject to a discussion.

Add version/last updated to release candidates

Add version numbers and last updated to the release candidates under download section to allow a user to view how recent the build is

Takes time to load up the wireframe

It takes a while for the wireframe image on the projects page to load up. Even though the entirety of the page loads up, the wireframe will take a couple more seconds to pop up on the screen, making it look kind of gnarly.

[FEATURE/CHANGE] Theming

Suggested feature/change

Make use of theming in css to easily adjust colours across the entire website for consistency.

This should be done after the refactor is merged

[CHANGE] Transition to @tabler/icons

Suggested feature/change

Convert all current icons to our own forked tabler icons https://github.com/flybywiresim/tabler-icons

Explain the feature/change(if applicable)

• Good range of icons
• No paywall for good icons
• More flexible

Disclaimer if the feature/change is due to personal preference it may be subject to a discussion.

[TRACKING] NOTAMs Posts

NOTAMs Posts

This is a tracking issue to monitor and plan the stages of upcoming articles to be posted to NOTAMs. Information is included for content we wish to discuss and store relevant links and news that is relevant to the post.

Upcoming Article(s) & Expected Due Date

TBA

Article Discussion

TBA

Additional information/links/content to be included

TBA

Progress of Article

• TBA
• Planning
• Draft
• Review
• Posted

[BUG] Switching pages does not scroll to top

What is the bug/error?

When being scrolled down on a page and switching pages through a NavLink you end up scrolled down on the new page.

Expected functionality

Switch page and see the top of the page.

Steps to reproduce

1. Scroll down on home page
2. Switch to project page through NavLink

[REQUEST] Show runway on the navigation display

Donate section bleeding

On devices less than 450px wide the donate section bleeds out of background.

Way to fix:

1. Adjust height dynamically for mobile view for both image and content

Header logo fails branding guidelines

Source: https://raw.githubusercontent.com/flybywiresim/fbw-branding/master/jpg/FBW-Branding-Guidelines.jpg

Current (fails rule 1):

Issue caused with oficial logo (fails rule 3):

Suggestion would be using a dark header with the current sub-navigation color:

Automatic http redirect

Please add https and an automatic http redirect.

Add missing metadata

Add missing metadata to index.html

More to be written...

Add donate button

Favicon still react default

Update favicon to probably site logo?

Bleeding content on iPad/smaller devices

Community section statistics bleed of page

Experienced on iPad Air

Menu bar peaking in video

Menu bar peaks out on desktop and mobile

[FEATURE/CHANGE] Installer preview requires updating for new design

Suggested feature/change

On the main page, the old installer image is shown, whereas the image should be updated to reflect the new installer design.

Explain the feature/change(if applicable)

Looks like it would be as simple as swapping out the screenshot with the latest design. The image is located at /img/InstallerScreenshot.png - link.

The image has had its' perspective shifted, so that will likely have to be replicated, alongside the drop shadow.