@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]