gnosygnu / xowa

xowa offline wiki application
Other
375 stars 41 forks source link

Skin:Vector changes #797

Open desb42 opened 3 years ago

desb42 commented 3 years ago

Starting late 2019, the way of handling skins has been changing The main skin (Vector) is now built using Mustache (server side). I think the intent is to 'simplify' the creation of new skins

One of the consequences of these changes is that the structure of the menus, sidebars and footers has changed and so has the CSS

This has led to some visual impact with the latest 2020-09-01 version of the dumps Take simple.wikipedia.org/wiki/Main Page as an example wrong_size

This also leads to the question - should xowa follow suit? Or just adjust the output to conform with the new css

gnosygnu commented 3 years ago

Ugh. Thanks for the heads up.

This looks complicated. Ideally, XOWA should follow suit, but the code looks a bit involved (reference links below). However, I tried now to tinker with the class on the various divs, and couldn't get any changes, so I suppose there is a bunch of other changes in the CSS.

I'll start working on converting some of the Mustache Skin code next

I suspect this is also related to my troubles with #754


desb42 commented 3 years ago

I have been working on the xowa Mustache code to make changes such that it can process a Json structure as well as a mustache derived class

My thinking is that it would be easier to construct Json, as this seems to fit better with mediawiki

desb42 commented 3 years ago

I have just updated my version of xowa with changes to handle some of the mustache changes

Specifically, the handling of the first navigation links (new class Db_Nav_template - bit of a mess)

To get the rest of the nav links to work with the new css, I made changes to xowa.gfs

gnosygnu commented 3 years ago

Wow! There's a lot here: https://github.com/desb42/myxowa/commit/29c6d003d73494612f12206cad107021b7eea0c2

Let me integrate into the code base after #799. I'd like to get this as part of the next official release

I know it's just words, but let me say again, at least for the 400th time, thanks for all the help!

desb42 commented 3 years ago

Just to add to the complexity, Skin-Vector actually has two versions of skin

skin.mustache skin-legacy.mustache

of the ones I've checked enwiki, dewiki, itwiki use skin-legacy.mustache

However, frwiki (as of 2020-09-01 not sure when it came into play) now uses skin.mustache

this may mean different version of xowa.gfs per wiki

desb42 commented 3 years ago

I have been investigating how a mustache version might be constrcucted and have built a static version for demonstration This uses mustache.js to construct a page from data elements - all info is in the html page There are two html pages

vector_skin.html and vector_skin-legacy.html (all other assets are in the same directory) double clicking should demonstrate the two versions

If you have time, please give it a try mustache-test.zip

gnosygnu commented 3 years ago

Thanks! Took a look at it, and not sure I follow. Will mustache.js be needed to handle the different versions of xowa.gfs per wiki? If so, generating that JSON document "data-logos", "html", etc is a pretty big change

I did try merging this commit a few days ago: https://github.com/desb42/myxowa/commit/29c6d003d73494612f12206cad107021b7eea0c2 . However, a bunch of tests failed and I wanted to get the release out. Will return back to it this week as the current skin looks pretty bad

desb42 commented 3 years ago

This was an example of how all the JSON as structured by Skin-Vector could be transformed using the mustache templates

I used mustache.js as an easier way to show the (two) effect(s)

This would in actuality be done server side using the mustache classes (et al)

And I agree, a pretty big change (dropping most of xowa.gfs for a per wiki mustache implementation)

gnosygnu commented 3 years ago

Thanks for the explanation and sorry for the lack of response on my side (had personal stuff recently)

I pushed a temporary commit to a staging branch above. For simple.wikipedia.org, this gets XOWA to show a proper topbar and a somewhat proper sidebar (though most menus are missing). Note that most of this commit is based on https://github.com/desb42/myxowa/commit/29c6d003d73494612f12206cad107021b7eea0c2

I'm going to make a few more changes on my side to see if I can get the sidebar working. Also, planning on removing the Json_mustache class and associated changes since Json_doc_wtr can do something similar, although in a more clunky fashion. See snippet below

        Json_doc_wtr wtr = new Json_doc_wtr();
        wtr.Nde_bgn();
        wtr.Kv(Bool_.N, "title",     banner_hdr_text);
        wtr.Kv(Bool_.Y, "tooltip",   banner_anch_title);
        wtr.Kv(Bool_.Y, "bannerfile", banner_anch_href);
        wtr.Kv(Bool_.Y, "banner", banner_img_src);
        wtr.Kv(Bool_.Y, "srcset", srcset == null ? Bry_.Empty : Bry_.Empty);
        wtr.Kv(Bool_.Y, "originx", originx);
        wtr.Kv(Bool_.Y, "toc", toc);
        wtr.Kv(Bool_.Y, "img_id_atr", img_id_atr);
        wtr.Kv(Bool_.Y, "img_xottl", img_xottl_atr);
        wtr.Kv(Bool_.Y, "img_xoimg", img_xoimg_atr);
        wtr.Kv(Bool_.Y, "file_ttl", file_ttl);
        wtr.Kv(Bool_.Y, "data-pos-x", data_pos_x);
        wtr.Kv(Bool_.Y, "data-pos-y", data_pos_y);
        wtr.Kv(Bool_.Y, "maxWidth", max_width);
        wtr.Kv(Bool_.Y, "hasIcons", icons.length > 0);
        wtr.Kv(Bool_.Y, "bottomtoc", bottomtoc);
        wtr.Kv(Bool_.Y, "isHeadingOverrideEnabled", isHeadingOverrideEnabled);
        wtr.Kv(Bool_.Y, "isPanorama", isPanorama);
        wtr.Kv(Bool_.Y, "enable-toc", enable_toc);
        wtr.Kv(Bool_.Y, "hasPosition", hasPosition);
        if (json_icon_list != null) {
            wtr.Key(Bool_.N, "icons");
            wtr.Ary_bgn();
            for (int i = 0; i < json_icon_list.Len(); i++) {
                Json_nde inde = (Json_nde)json_icon_list.Get_at(i);
                for (int j = 0; j < inde.Len(); j++) {
                    Json_kv kv = inde.Get_at_as_kv(j);
                    wtr.Kv(i == 0, kv.Key_as_bry(), kv.Val_as_bry());
                }
            }
            wtr.Ary_end();
        }
        wtr.Nde_end();
        String jsonStr = wtr.Bld_as_str();
        return Json_parser.ParseToJdoc(jsonStr).Root_nde();
gnosygnu commented 3 years ago

I've been working on and off for finalizing this commit. Hoping to get something in over the next few days

gnosygnu commented 3 years ago

Incorporated changes with commit above. Also made a new release

Major changes was XOWA JSON now handles direct adding of Strings and ints: node.AddKvStr("abc")

desb42 commented 3 years ago

Having spent a lot more time looking at, and making changes to how the final page is generated, there is a need to continue this work

The fact that the current (sub)skin for enwiki is titled skin-legacy implies that at some stage (possibly in the near future) this will be flipped to the newer version

I have made some considerable changes in Xoh_page_wtr_mgr.java, Xow_portal_mgr.java, Xoh_page_wtr_wkr.java and xowa.gfs to utilise the Mustache mechanism (although I did have to change the mustache logic as well)

commits 9a2849511a8e675753c8180ee8cdf13c44d7553d and 39a906e3db07889bcfa5c2d66c3f2214fabfc071 represent the vast majority of the changes

desb42 commented 3 years ago

This also has impact on how the 'home' site is displayed as well I added a few MediaWiki entries into the home database

gnosygnu commented 3 years ago

Ugh. Thanks for reopening.

Apologies as always for lack of activity on my side. Same excuse as usual ("work, yada, yada, yada").

In whatever spare time I've had, I've been working more on a project to parse PHP code with the aim of converting to Java. It's still very rough, and I'm many months away from actually getting to my goal ("Convert MediaWiki to Java"). I'll incorporate what I can from the commits, but ultimately I think the best way forward for XOWA is to reproduce the MediaWiki parser code exactly, and not try to approximate it (which leads to bugs in the approximation as well as effort in approximating in the first place).

Anyway, just a report from my side.


https://github.com/desb42/myxowa/commit/9a2849511a8e675753c8180ee8cdf13c44d7553d https://github.com/desb42/myxowa/commit/39a906e3db07889bcfa5c2d66c3f2214fabfc071

MiquelJorquera commented 2 years ago

Have there been any updates on this? I just got XOWA to work, and was hoping there were some edits I could do on my end to fix these UI issues:

image

It seems pretty likely that this is a skin issue. Are there any edits I can make to make it less noticeable? I don't mind if it's just a rough "Delete searchbar" type thing.