Add link to Methodology page to the header

[madsnedergaard]

Issue

We are frequently seeing discussions using the map as source, but with people questioning how data is calculated. The FAQ covers part of it, but maybe we can educate more people by also adding a link to the header menu for the Methodology page :)

Description

Adds a link to https://www.electricitymaps.com/methodology, and updates styling to handle the wider menu on smaller devices.

Preview

Three different styling schemes are now in use depending on breakpoint:

• On mobile, there is still no header

• On devices between mobile and 768px, we now show the menu beneath the logo. Previously we would show the logo, but no menu at all 🤔
  

• On devices between tablet and desktop, the text size is slightly smaller:
  

• And on desktops styling is as before:
  

Double check

• I have run pnpx prettier --write . and poetry run format to format my changes.

[github-actions]

PR Analysis

• 🎯 Main theme: Adding a link to the Methodology page in the header and updating the styling to accommodate the wider menu.
• 📝 PR summary: This PR adds a link to the Methodology page in the header of the website. It also updates the styling to handle the wider menu on smaller devices. The PR includes screenshots to demonstrate the changes in different device sizes.
• 📌 Type of PR: Enhancement
• 🧪 Relevant tests added: No
• ⏱️ Estimated effort to review [1-5]: 2, because the changes are straightforward and limited to the UI. However, the reviewer needs to have knowledge of TypeScript and CSS.
• 🔒 Security concerns: No security concerns found

PR Feedback

💡 General suggestions: The PR is well-structured and includes a detailed description of the changes. It would be beneficial to include some automated tests to ensure the new link and the updated styling work as expected across different devices and screen sizes.

🤖 Code feedback:

---

relevant file	web/src/features/header/Header.tsx
suggestion	Consider using a constant for the URL of the Methodology page to make it easier to manage and update in the future. [medium]
relevant line	href="https://www.electricitymaps.com/methodology/?utm_source=app.electricitymaps.com&utm_medium=referral"

---

relevant file	web/src/features/header/Header.tsx
suggestion	It would be beneficial to add a comment explaining why the styling changes were necessary and how they affect the layout on different devices. This would make it easier for other developers to understand the changes. [medium]
relevant line	<NavigationMenu.List className="flex w-full justify-around md:space-x-2">

---

---

✨ Usage guide:

---

Overview:
The review tool scans the PR code changes, and generates a PR review. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on any PR.
When commenting, to edit configurations related to the review tool (pr_reviewer section), use the following template:

/review --pr_reviewer.some_config1=... --pr_reviewer.some_config2=...

With a configuration file, use the following template:

[pr_reviewer]
some_config1=...
some_config2=...

Utilizing extra instructions The review tool can be configured with extra instructions, which can be used to guide the model to a feedback tailored to the needs of your project. Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Specify the relevant sub-tool, and the relevant aspects of the PR that you want to emphasize. Examples for extra instructions: [pr_reviewer] # /review # extra_instructions=""" In the code feedback section, emphasize the following: - Does the code logic cover relevant edge cases? - Is the code logic clear and easy to understand? - Is the code logic efficient? ... """ Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.

How to enable\disable automation When you first install PR-Agent app, the default mode for the review tool is: pr_commands = ["/review", ...] meaning the review tool will run automatically on every PR, with the default configuration. Edit this field to enable/disable the tool, or to change the used configurations

About the 'Code feedback' section The review tool provides several type of feedbacks, one of them is code suggestions. If you are interested only in the code suggestions, it is recommended to use the improve feature instead, since it dedicated only to code suggestions, and usually gives better results. Use the review tool if you want to get a more comprehensive feedback, which includes code suggestions as well.

Auto-labels The review tool can auto-generate two specific types of labels for a PR: a possible security issue label, that detects possible security issues (enable_review_labels_security flag) a Review effort [1-5]: x label, where x is the estimated effort to review the PR (enable_review_labels_effort flag)

Extra sub-tools The review tool provides a collection of possible feedbacks about a PR. It is recommended to review the possible options, and choose the ones relevant for your use case. Some of the feature that are disabled by default are quite useful, and should be considered for enabling. For example: require_score_review, require_soc2_review, enable_review_labels_effort, and more.

More PR-Agent commands To invoke the PR-Agent, add a comment using one of the following commands: /review: Request a review of your Pull Request. /describe: Update the PR title and description based on the contents of the PR. /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback. /ask <QUESTION>: Ask a question about the PR. /update_changelog: Update the changelog based on the PR's contents. /add_docs 💎: Generate docstring for new components introduced in the PR. /generate_labels 💎: Generate labels for the PR based on the PR's contents. /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component. See the tools guide for more details. To list the possible configuration parameters, add a /config comment.

See the review usage page for a comprehensive guide on using this tool.

[VIKTORVAV99]

LGTM!

Have you given any thought on how we could potentially add this to mobile as well?

PS: The cypress e2e is really flaky, I had to rerun it 3 times.

[madsnedergaard]

LGTM!

Have you given any thought on how we could potentially add this to mobile as well?

PS: The cypress e2e is really flaky, I had to rerun it 3 times.

Nope, but I think we'll be doing some larger design changes to the mobile version in the near future as Alex has started working on some cool ideas :)