@Theklan

Code [[MediaWiki:Gadget-definitions]]

otd[ResourceLoader|hidden|default|categories=Azala]|otd.js|otd.css

>

azala[ResourceLoader|hidden|default|categories=Azala|dependencies=@wikimedia/codex,vue]|otd.js,cards.js|otd.css

[[MediaWiki:Gadget-cards.js]]

const { CdxCard } = require( '@wikimedia/codex' );
const Vue = require( 'vue' );

const CardWidget = {
    components: {
        CdxCard
    },
	props: {
		titles: {
			type: Array
		}
	},
    template: `<div>
    <cdx-card v-for="titleObj in titles" :thumbnail="titleObj.thumbnail"
        :force-thumbnail="true">
        <template #title>
            {{  titleObj.title  }}
        </template>
        <template #description>
            {{  titleObj.description  }}
        </template>
    </cdx-card>    
</div>`
 }
 const mwApi = new mw.Api();

 /**
 * @param {Object} obj
 * @return {Card}
 */
function toCard( originalTitleObj ) {
	return ( obj ) => Object.assign( {
		url: obj.canonicalurl,
		title: obj.title,
		id: obj.title,
		description: obj.description,
		thumbnail: obj.thumbnail ? Object.assign( {}, obj.thumbnail, {
            url: obj.thumbnail.source
        } ) : undefined
	}, originalTitleObj[obj.title] );
}

function getPages( titleObjs ) {
    const titleMap = {};
    titleObjs.forEach((obj) => titleMap[obj.title] = obj);
	return mwApi.ajax( {
		action: 'query',
		format: 'json',
		origin: '*',
        titles: titleObjs.map( ( titleObj ) => titleObj.title ),
		prop: 'coordinates|info|pageimages|description',
		inprop: 'url',
		formatversion: 2,
		pprop: 'displaytitle',
		piprop: 'thumbnail',
		pithumbsize: 150,
		pilimit: 50
	} ).then( function ( data ) {
		return data.query.pages.map( toCard( titleMap ) );
	} );
}

const titleExpand = ( titles ) => {
    return getPages( titles );
};

function loadPageViews( target, url, exclude ) {
    fetch( url )
        .then( ( r ) => r.json() )
        .then((data) => {
            titleExpand(
                data.items[0].articles.map((a) => ( {
                    title: a.article
                }) )
                .filter((a) => !a.title.includes(':') && !exclude.includes(a.title))
                .slice(0, 10)
            ).then( ( titles ) => {
                Vue.createApp( CardWidget, {
                    titles
                } ).mount( target )
            });
        });
}

Array.from(document.querySelectorAll( '[data-component="cards"]' )).forEach((node) => {
    console.log('got', node );
    const dataset = node.dataset;
    if ( dataset.target ) {
        const targetId = dataset.target;
        const type = dataset.apiType;
        console.log('got2', targetId );
        const target = document.getElementById( targetId );
        if ( target ) {
            switch ( type ) {
                case 'nearby':
                    if ( targetId === 'mw-nearby-pages' ) {
                        mw.loader.using( 'ext.nearby.scripts' );
                    } else {
                        throw new Error( 'Please set targets to "mw-nearby-pages" to use this widget');
                    }
                    break;
                case 'pageviews':
                    loadPageViews( target, dataset.url, dataset.exclude.split('|') );
                    break;
                default:
                    throw new Error( 'Not implemented' );
            }
        }
    }
});

Now both are broken, also otd that was working before.

Currently it is working, but with data from a month ago. I have changed the layout, so it shows both.
I see these things remaining:

• Changing the date so it show the previous day.
• Making the titles linkable
• Building a blacklist system for articles that we don't want to show
• Limiting the amount of articles to... 8? 10?

It seems that the blacklist is working: https://eu.wikipedia.org/wiki/Txantiloi:Azala/Grid/Esploratu/Kendu

Added brackets to the code, so the link is working.

• I fixed the title links.
• The list should be limited to 10 and configurable.

For date - we'll need to debug with someone who understands what is going wrong with the CORS issue we had yesterday. @TheDJ did you create a phabricator ticket for that?

@Jdlrobson: the Nearby feature is not working now, it doesn't show the option to activate and the field only has the placeholder.

Fixed!

Is it possible to add a cookie so it remembers that you accepted the geography stub? I think it is a good idea (but I'm not sure if this may be a security/privacy issue).

@Jdlrobson yes, it is T364253: Metrics api response sometimes returns cached 301 (from kubernetes ??)

The limit function is not working. It seems that any limit gives the same amount of results.

I have checked for the next day and it works. Could we check if this is working now with automatical day change?

Hello @Jdlrobson. We have been discussing about the new proposal and, after some tweaks, it has been accepted to launch. We have thought on doing it when we reach the 33rd position at the List of Wikipedias: https://meta.wikimedia.org/wiki/List_of_Wikipedias. This will happen some day near the end of May or first days of June.

Do you think that the "Most visited" section could be ready in the next weeks, or should we get rid of that?

Thanks

I'm just back from a break, but will be able to take a look at this on Friday and get the code cleaned up :-).
For most read, you might want to block on T364253 or have a back up plan for days when the URL doesn't work e.g. show some kind of "Unavailable message".

I have added T364253 as a subtask and marked this as stalled because of that. I think that an "Unavailable message" should be a good solution if the issue is not solved. Let me know where to create it.

The last changes (https://eu.wikipedia.org/w/index.php?title=MediaWiki%3AGadget-cards.js&diff=9799967&oldid=9784872) seem to be breaking the functionality. I don't know if I added the change at the correct place, as it worked before (while static on one day) and now is not working anymore.

If you can grant me permissions to edit the namespace again, I can take a look this evening!

Done

Thanks for the changes. Now we need [as far as I know] to things:

• Define how to translate the error messages
• Show the previous day, instead of a fixed past day

I don't know if this is related to the reported error or this is a new one, but the most viewed articles list from here: https://pageviews.wmcloud.org/topviews/?project=eu.wikipedia.org&platform=all-access&date=yesterday&excludes=Carles%20Puigdemont|Gonzalo%20Boye are not the same that are shown here: https://eu.wikipedia.org/wiki/Azala/Grid

(Sorry for the small sexual image)

Because Pageviews is manually moderated. False positives are reported.

Yes, but not this case. The order of the articles is not the same. You can see that the most viewed is not the most viewed in the Pageviews (after removing false positives in both).

If you go to the raw API search that is calling (https://wikimedia.org/api/rest_v1/metrics/pageviews/top/eu.wikipedia.org/all-access/2024/05/22) you see that the order is also different.

It's filtering anything with ":" in the title - should I remove that behaviour? There was also another bug that I've since fixed (you may need to clear cache)

Ok, now it seems that the order of the most viewed at topviews and at the cards are the same.

I am checking the section on mobile, and it works fine, but it doesn't show anything when using the APP. Visiting the Main page at the Wikimedia APP is not very usual (from visits data), but if we want to make this approach popular, it should work also with the APP (or be hidden instead).

Yes this is the biggest setback with https://www.mediawiki.org/wiki/Template_gadgets IMO - they won't work in apps or any other application/viewer that is loading Wikipedia's content for reading e.g. Wikiwand/any Android or iOS app etc.. For the eu.wikipedia.org the widgets are hidden by default so would need to be explicitly enabled inside the app and I am not sure if the gadgets developers or apps developers have asked - it would be good to start a thread on the mediawiki talk page to work that out.

[FWIW: I couldn't recommend using template gadgets in article namespace while this bug exists - it will render content unusable to a large chunk of people]

@Jdlrobson what would be the implications if a large wiki (frwiki) adapted a similar approach (dynamic content loaded with API)?

Reading https://www.mediawiki.org/wiki/API:Etiquette and REST APIs docs, it's either "there's no fixed limit on requests to the API, but your client may be blocked if you endanger the stability of the service" or a limit of 200 req/s. The main frwiki page is consulted ~17 million times a month (~ 9 million on desktop). Should requests be made by readers and cached for one day?

Should I start a new ticket? With which tags?

@Jdlrobson what would be the implications if a large wiki (frwiki) adapted a similar approach (dynamic content loaded with API)?

The most read API should be fine but is not battle-tested at this scale. The nearby widget if highly trafficked might be more problematic as the level of caching is not as good as the most read API. In general I'd be cautious of using template gadgets for this sort of thing - it's got no path for adding support in apps and if there are any problems, we'd have to disable it.

If you wanted something more stable, here's what I'd suggest:

• For the nearby use case, I think you could request a parser function as a ticket against NearbyPages for supporting rendering nearby in articles.
• I think MediaWiki-extensions-ReadingLists would be a good fit for the most read. https://meta.wikimedia.org/wiki/Special:ReadingLists already features the Watchlist, and I'd like it to render a list of "Most read". Once that's implemented, we could have a parser function that embeds it in an article.

Maintainers of both those extensions are free, but I'd be very happy to provide guidance and review patches if anyone is motivated to write patches as I'm looking to get more people familiar with the codebases there.

Thanks @Jdlrobson. I just created T372424 and T372422. I don't know if I can help more. NearbyPages seemed accessible... until the question of making it transcludable. Page expansion isn't a small topic.

It wouldn't be transclusion (which typically involves embedding an editable page inside another editable page). Nearby is just a DIV with JS that gets loaded to progressively enhance it.

I let you handle le reste. 😁