Wikinewsie (open-source bug) — add support for URL parameter `?lang` to change the user interface

Here are a few quick things to know.

Wikinewsie is a web app that shows the most-edited Wikipedia.org articles over recent hours, automatically identifying current event topics and news that are undergoing active collaboration.

Wikimedia keeps its bug list on a website called Phabricator. Every bug gets a number starting with the letter T. Ours is T441366.

Here is the Open-source loop: Find a bug, make a branch, change the code, test it, save it, send it for review.

Adding support for URL parameter lang to Wikinewsie: A Step-by-Step Walkthrough

The Bug Report:

Feature summary (what you would like to be able to do and where):

Allow other sites to link to Wikinewsie in a particular interface language, overriding default settings.

https://wikinewsie.toolforge.org/pl links to Wikinewsie tracking the Polish Wikipedia, but the default interface is still in English.

Maybe a url could look like https://wikinewsie.toolforge.org/pl?lang=pl to specify tracking the Polish Wikipedia in Polish interface, or https://wikinewsie.toolforge.org/en?lang=fr to specify tracking the English Wikipedia in French interface.

Without a parameter like "?lang=" specified in the url, the interface language behavior should be the same as currently.

Use case(s) and Benefits (Describe the actual underlying problem which you want to solve. Why should this be implemented? Do not describe only a solution):

This would especially be useful for linking to Wikinewsie from particular language Wikipedias, such as Vietnamese Wikipedia or Indonesian Wikipedia.

Feature summary (what you would like to be able to do and where):

Allow other sites to link to Wikinewsie in a particular interface language, overriding default settings.

https://wikinewsie.toolforge.org/pl links to Wikinewsie tracking the Polish Wikipedia, but the default interface is still in English.

Maybe a url could look like https://wikinewsie.toolforge.org/pl?lang=pl to specify tracking the Polish Wikipedia in Polish interface, or https://wikinewsie.toolforge.org/en?lang=fr to specify tracking the English Wikipedia in French interface.

Without a parameter like "?lang=" specified in the url, the interface language behavior should be the same as currently.

Use case(s) and Benefits (Describe the actual underlying problem which you want to solve. Why should this be implemented? Do not describe only a solution):

This would especially be useful for linking to Wikinewsie from particular language Wikipedias, such as Vietnamese Wikipedia or Indonesian Wikipedia.

Explanation:

Wikinewsie can track different language versions of Wikipedia.

• wikinewsie.toolforge.org/pl tracks the Polish Wikipedia
• wikinewsie.toolforge.org/en tracks the English Wikipedia

But there is a catch. Even when you open the /pl link, the Wikinewsie's own buttons and text still show up in English. The person who filed the task wants other websites (for example Vietnamese or Indonesian Wikipedia) to link to Wikinewsie and have it already show up in the right language for their readers.

The solution in one sentence: Add an optional piece to the end of the link, like this:

• wikinewsie.toolforge.org/pl?lang=pl means track Polish Wikipedia, show the screen in Polish.
• wikinewsie.toolforge.org/en?lang=fr means track English Wikipedia, show the screen in French.

One important rule from the task: if there is no ?lang= in the link, everything must behave exactly as it does today. We must not break what already works.

A quick word about the ?lang=fr part. Anything after a ? in a link is called a query string. It is a way of passing small extra pieces of information, written as name=value. Here the name is lang and the value is fr

The plan

1. Work on a separate branch, so the main code stays safe.
2. Find out how Wikinewsie already decides which language to show.
3. Add one new rule at the very top of that decision: "does the link say ?lang=…? If so, use it."
4. Leave the old rules underneath, so nothing changes for people who did not come to Wikinewsie using ?lang=
5. Make sure a silly value like ?lang=banana does not break the page.
6. Commit, push, and open a merge request.
7. Switch to a new branch

git checkout -b T441366-lang-url-param

git checkout -b T441366-lang-url-param

2. Find where the page decides which language to use

We needed to learn how the tool picks its language today, because that tells us where to add our new rule. We searched the src folder for words that usually show up in language-picking code:

grep -rn "navigator.language\|localStorage\|i18n\|locale" src | head -40

grep -rn "navigator.language\|localStorage\|i18n\|locale" src | head -40

• Almost every file does import{text} from './i18n'. So a file called i18n is the one that hands out the words on screen in the right language.
• App.vue is the only file that imports currentLocale and setLocale. Think of currentLocale as "the language being shown right now" and setLocale as "the button that changes it".

3. Find every place the language is read or changed

grep -rn "setLocale\|currentLocale\|languageCodes" src

grep -rn "setLocale\|currentLocale\|languageCodes" src

The key line in the results was in src/i18n.ts:

export const currentLocale = ref(getInitialLocale());

export const currentLocale = ref(getInitialLocale());

In plain words: when the page first loads, it calls a function named getInitialLocale and asks, "what language should I start in?" Whatever that function answers becomes the starting language.

This told us exactly where our change belongs. Everything else in the app just uses the answer.

Read how getInitialLocale works today

sed -n '1,60p' src/i18n.ts

sed -n '1,60p' src/i18n.ts

Results

function getInitialLocale(): string {
  try {
    return localStorage.getItem(STORAGE_KEY) || navigator.language || 'en';
  } catch {
    return 'en';
  }
}

function getInitialLocale(): string {
  try {
    return localStorage.getItem(STORAGE_KEY) || navigator.language || 'en';
  } catch {
    return 'en';
  }
}