The new page preview(<a class="issue-link js-issue-link" data-error-text="Failed to lo

I'll try to check this moment and make config based path. It's a bug :)

Pull CSS for page preview,about tosher/mediawiker

Comments (23)

tosher commented on August 16, 2024

In current version, plugin uses the standard vector css from wiki.
Which other css you want to implement?

from mediawiker.

rabin-io commented on August 16, 2024

Acutely I use the APEX theme, and in the styling section of the generated html file I see this 2 lines,

<link rel="stylesheet" href="https://wiki/w/load.php?debug=false&amp;lang=en&amp;modules=site&amp;only=styles&amp;skin=vector"/>
<link rel="stylesheet" href="https://wiki/w/load.php?debug=false&amp;lang=ru&amp;modules=ext.geshi|ext.visualEditor.viewPageTarget.noscript|mediawiki.legacy.commonPrint,shared|mediawiki.sectionAnchor|mediawiki.skinning.interface|mediawiki.ui.button|skins.vector.styles&amp;only=styles&amp;skin=vector&amp;*" />

There are 2 problem I see in this,

I use nginx and the short URL option w/o the /w/ prefix, which make the above url not to work and I get the message No input file specified. when trying to load any of the above url's
why did you hard coded the language to ru and the skin to vector ?

from mediawiker.

tosher commented on August 16, 2024

I'll try to check this moment and make config based path.
It's a bug :) will fix it.. Second css - experimental.

from mediawiker.

rabin-io commented on August 16, 2024

Thanks.

from mediawiker.

tosher commented on August 16, 2024

Fix was committed. Please, check the updated version.

from mediawiker.

TriMoon commented on August 16, 2024

I tried an update/upgrade of the installed package from inside SublimeText, but it didn't change anything.
Then i checked your source and saw commit: 8315900
I will try to manually overwrite the changed files and see...

from mediawiker.

TriMoon commented on August 16, 2024

Ok i manually updated the changed files by saving the output of the raw-view of those files.
It is indeed better as it was, however....
If i may make a suggestion to make this functionality a bit more fool-proof:

Pull the page or root-page from the server in a temporary buffer.
Add the <head>...</head> section of the returned html inside the head section of your generated output.

That way it will include most of what it needs in the preview page ;)

from mediawiker.

tosher commented on August 16, 2024

Yes, needs the new release tag for auto-update in sublime..

CSS contents may be on dynamic basis.. source highlighting for example.

from mediawiker.

TriMoon commented on August 16, 2024

I was just thinking about this preview functionality a bit more, and i think its best to have a config setting where we can provide our own set of stylesheets and javascripts to load in the head section of the generated page.
For example something like this:

"mediawiki_site":
    {
        "Some wiki":
        {
            ...settings... ,
            "preview":
            {
                "stylesheet": [
                    "http://templates.wikia.com/w/load.php?debug=false&amp;lang=en&amp;modules=site&amp;only=styles&amp;skin=vector",
                    "a:lang(ar),a:lang(ckb),a:lang(fa),a:lang(kk-arab),a:lang(mzn),a:lang(ps),a:lang(ur){text-decoration:none}a.new,#quickbar a.new{color:#ba0000}"
                ],
                "javascript": [
                    "http://templates.wikia.com/__load/-/cb%3D1463274832%26debug%3Dfalse%26lang%3Den%26newve%3D1%26only%3Dscripts%26skin%3Dmonobook/startup",
                    "if(window.mw){
mw.loader.load([\"mediawiki.page.startup\",\"mediawiki.legacy.wikibits\",\"mediawiki.legacy.ajax\",\"amd.shared\"]);
}"
                ]
            },
            ...more_settings...
        },
    }

As you see i propose to use Arrays to supply multiple values, and 2 versions one with a URI and the other with a literal value.

URI versions: These get transformed into link and script tags with the URI supplied to the corrosponding href/src tags, eg:
- stylesheet ⇒ <link rel="stylesheet" href="value[x]" />
- javascript ⇒ <script src="value[x]"></script>
Literal values: These get transformed into style and script tags that have the value as content, eg:
- stylesheet ⇒ <style>value[x]</style>
- javascript ⇒ <script>value[x]</script>

If you would provide a helper menu function to parse and populate these entries from the <head></head> section of the the online version that would be super easy to setup and use.
Not to mention that we could remove unwanted tracking and advert code for our previews 😉

from mediawiker.

rabin-io commented on August 16, 2024

Thanks, it working for me now, but still some strings are hard coded (like the theme, I don't know if its matter),
Also, there is not syntax highlighting for <syntaxhighlight lang="XXX"></syntaxhighlight>

from mediawiker.

tosher commented on August 16, 2024

syntaxhighlight - in real wiki engine it's a dynamic content, based on langs, used in pages..
Maybe, i'll add the page parsing for it, but i'm not sure that it is necessary.

from mediawiker.

rabin-io commented on August 16, 2024

@tosher, you right, but it will be a nice to have addition.

Thanks for the great work.

from mediawiker.

tosher commented on August 16, 2024

New version:
https://github.com/tosher/Mediawiker/releases/tag/3.1.2

P.S. Custom lines will be used as is in preview html. But some variables are supported.

from mediawiker.

TriMoon commented on August 16, 2024

I appriciate the work, although i have some comments on your implementation. (will adress below)

With current Version 3.1.2, i get errors...
Error in console:

Traceback (most recent call last):
File "C:\Program Files\Sublime Text 3\sublime_plugin.py", line 568, in run_
  return self.run(edit, **args)
File "C:\Users\TriMoon\AppData\Roaming\Sublime Text 3\Packages\Mediawiker\mediawiker.py", line 1443, in run
  head = head % {'http': site_http, 'host': host, 'path': path, 'lang': lang}
ValueError: unsupported format character 'D' (0x44) at index 222
Exception in thread Thread-476:
Traceback (most recent call last):
File "./python3.3/threading.py", line 901, in _bootstrap_inner
File "./python3.3/threading.py", line 1142, in run
File "C:\Users\TriMoon\AppData\Roaming\Sublime Text 3\Packages\JSHint Gutter\JSHint.py", line 188, in <lambda>
  self.timer = Timer(timeout, lambda: view.window().run_command("jshint", { "show_panel": False }))
AttributeError: 'NoneType' object has no attribute 'run_command'

config lines used:

  "Wikia-Templates":
  {
      ...settings... ,
      "preview_custom_head":
      [
          "<link rel=\"shortcut icon\" href=\"http://vignette3.wikia.nocookie.net/templates/images/6/64/Favicon.ico/revision/latest?cb=20090710083239\" />",
          "<link rel=\"stylesheet\" href=\"http://slot1.images1.wikia.nocookie.net/__load/-/cb%3D1463693845%26debug%3Dfalse%26lang%3Den%26only%3Dstyles%26skin%3Dmonobook/mediawiki.legacy.commonPrint,shared|skins.monobook|wikia.monobook\" />",
          "<link rel=\"stylesheet\" href=\"http://slot1.images2.wikia.nocookie.net/__am/1463693845/sass/background-dynamic%3D1%26background-image%3D%26background-image-height%3D800%26background-image-width%3D2000%26color-body%3D%2523bacdd8%26color-body-middle%3D%2523bacdd8%26color-buttons%3D%2523006cb0%26color-header%3D%25233a5766%26color-links%3D%2523006cb0%26color-page%3D%2523ffffff%26oasisTypography%3D1%26page-opacity%3D100%26widthType%3D0/skins/oasis/css/core/thumbnails.scss\" />",
          "<link rel=\"stylesheet\" href=\"http://slot1.images2.wikia.nocookie.net/__am/1463693845/sass/background-dynamic%3D1%26background-image%3D%26background-image-height%3D800%26background-image-width%3D2000%26color-body%3D%2523bacdd8%26color-body-middle%3D%2523bacdd8%26color-buttons%3D%2523006cb0%26color-header%3D%25233a5766%26color-links%3D%2523006cb0%26color-page%3D%2523ffffff%26oasisTypography%3D1%26page-opacity%3D100%26widthType%3D0/extensions/wikia/Recirculation/styles/recirculation.scss\" />",
          "<link rel=\"stylesheet\" href=\"http://slot1.images3.wikia.nocookie.net/__am/1463693845/sass/background-dynamic%3D1%26background-image%3D%26background-image-height%3D800%26background-image-width%3D2000%26color-body%3D%2523bacdd8%26color-body-middle%3D%2523bacdd8%26color-buttons%3D%2523006cb0%26color-header%3D%25233a5766%26color-links%3D%2523006cb0%26color-page%3D%2523ffffff%26oasisTypography%3D1%26page-opacity%3D100%26widthType%3D0/extensions/wikia/PortableInfobox/styles/PortableInfobox.scss\" />",
          "<link rel=\"stylesheet\" href=\"http://slot1.images2.wikia.nocookie.net/__am/1463693845/sass/background-dynamic%3D1%26background-image%3D%26background-image-height%3D800%26background-image-width%3D2000%26color-body%3D%2523bacdd8%26color-body-middle%3D%2523bacdd8%26color-buttons%3D%2523006cb0%26color-header%3D%25233a5766%26color-links%3D%2523006cb0%26color-page%3D%2523ffffff%26oasisTypography%3D1%26page-opacity%3D100%26widthType%3D0/extensions/wikia/PortableInfobox/styles/PortableInfoboxMonobook.scss\" />",
          "<link rel=\"stylesheet\" href=\"http://slot1.images1.wikia.nocookie.net/__am/1463693845/sass/background-dynamic%3D1%26background-image%3D%26background-image-height%3D800%26background-image-width%3D2000%26color-body%3D%2523bacdd8%26color-body-middle%3D%2523bacdd8%26color-buttons%3D%2523006cb0%26color-header%3D%25233a5766%26color-links%3D%2523006cb0%26color-page%3D%2523ffffff%26oasisTypography%3D1%26page-opacity%3D100%26widthType%3D0/extensions/wikia/VisualEditorTourExperiment/styles/VisualEditorTourExperimentInit.scss\" />",
          "<link rel=\"stylesheet\" href=\"http://slot1.images1.wikia.nocookie.net/__am/1463693845/sass/background-dynamic%3D1%26background-image%3D%26background-image-height%3D800%26background-image-width%3D2000%26color-body%3D%2523bacdd8%26color-body-middle%3D%2523bacdd8%26color-buttons%3D%2523006cb0%26color-header%3D%25233a5766%26color-links%3D%2523006cb0%26color-page%3D%2523ffffff%26oasisTypography%3D1%26page-opacity%3D100%26widthType%3D0/extensions/wikia/TemplateClassification/styles/TemplateClassification.scss\" />",
          "<link rel=\"stylesheet\" href=\"http://slot1.images1.wikia.nocookie.net/__am/1463693845/sass/background-dynamic%3D1%26background-image%3D%26background-image-height%3D800%26background-image-width%3D2000%26color-body%3D%2523bacdd8%26color-body-middle%3D%2523bacdd8%26color-buttons%3D%2523006cb0%26color-header%3D%25233a5766%26color-links%3D%2523006cb0%26color-page%3D%2523ffffff%26oasisTypography%3D1%26page-opacity%3D100%26widthType%3D0/extensions/wikia/GlobalShortcuts/styles/GlobalShortcutsHelp.scss\" />",
          "<link rel=\"stylesheet\" href=\"http://slot1.images3.wikia.nocookie.net/__am/1463693845/sass/background-dynamic%3D1%26background-image%3D%26background-image-height%3D800%26background-image-width%3D2000%26color-body%3D%2523bacdd8%26color-body-middle%3D%2523bacdd8%26color-buttons%3D%2523006cb0%26color-header%3D%25233a5766%26color-links%3D%2523006cb0%26color-page%3D%2523ffffff%26oasisTypography%3D1%26page-opacity%3D100%26widthType%3D0/extensions/wikia/GlobalShortcuts/styles/GlobalShortcutsSearch.scss\" />",
          "<link rel=\"stylesheet\" href=\"http://slot1.images1.wikia.nocookie.net/__am/1463693845/sass/background-dynamic%3D1%26background-image%3D%26background-image-height%3D800%26background-image-width%3D2000%26color-body%3D%2523bacdd8%26color-body-middle%3D%2523bacdd8%26color-buttons%3D%2523006cb0%26color-header%3D%25233a5766%26color-links%3D%2523006cb0%26color-page%3D%2523ffffff%26oasisTypography%3D1%26page-opacity%3D100%26widthType%3D0/extensions/wikia/WallNotifications/styles/monobook/WallNotificationsMonobook.scss\" />",
          "<link rel=\"stylesheet\" href=\"http://templates.wikia.com/__load/-/cb%3D1463693845%26debug%3Dfalse%26lang%3Den%26only%3Dstyles%26skin%3Dmonobook/site\" />",

          "<link rel=\"stylesheet\" href=\"/w/load.php?debug=false&amp;lang=%(lang)s&amp;modules=site&amp;only=styles&amp;skin=vector\"/>",
          "<link rel=\"stylesheet\" href=\"/w/load.php?debug=false&amp;lang=%(lang)s&amp;modules=user.groups&amp;only=styles&amp;skin=vector&amp;user=Tshr&amp;version=IA9sV8WJ\"/>",
          "<script async=\"\" src=\"%(http)s://%(host)s%(path)sload.php?debug=false&amp;lang=%(lang)s&amp;modules=startup&amp;only=scripts&amp;skin=vector\"></script>"
      ],
      ...more_settings... 
  }

As can be seen it's very cumbersome to escape all the quotes needed and opens door for mistakes when copy&pasting URL's used.
We are forced to unnecessarily repeat the obvious.
That's why i proposed sub-key usage in #64 (comment)
1. Using sub-keys will allow you to extend the supported types to include in the head.
2. As example i added a favicon as you can see in the 1st line of the config shown above 😉
Your use of %(keyword)s interferes with common URL parameters used in many of those, because they get treated as format modifiers, hence the error.
1. IMHO; It's better, easier and less error-prone to use and replace __KEYWORD__ type inside the provided strings.

And a last note:
Could you add documentation on how to build this using the source version on git?
Maybe then i and others could help out more using patches/pulls etc... 😉
If you could make it build-able using nodeJS (package.json) that would be easiest i guess...

from mediawiker.

TriMoon commented on August 16, 2024

Oh i almost forgot to mention that it would be best practice to urldecode the provided string, replace your special keywords inside if found, and then urlencode the resulting string before adding it to the tag in the head. 👍

from mediawiker.

TriMoon commented on August 16, 2024

_UPDATE_
Seems the error is gone after manually urldecoding the strings used in the config above.
my current config now uses: (ofcourse not optimal yet)

"preview_custom_head":
[
    "<link rel=\"shortcut icon\" href=\"http://vignette3.wikia.nocookie.net/templates/images/6/64/Favicon.ico/revision/latest?cb=20090710083239\" />",
    "<link rel=\"stylesheet\" href=\"http://slot1.images1.wikia.nocookie.net/__load/-/cb=1463693845&debug=false&lang=en&only=styles&skin=monobook/mediawiki.legacy.commonPrint,shared|skins.monobook|wikia.monobook\" />",
    "<link rel=\"stylesheet\" href=\"http://slot1.images2.wikia.nocookie.net/__am/1463693845/sass/background-dynamic=1&background-image=&background-image-height=800&background-image-width=2000&color-body=#bacdd8&color-body-middle=#bacdd8&color-buttons=#006cb0&color-header=#3a5766&color-links=#006cb0&color-page=#ffffff&oasisTypography=1&page-opacity=100&widthType=0/skins/oasis/css/core/thumbnails.scss\" />",
    "<link rel=\"stylesheet\" href=\"http://slot1.images2.wikia.nocookie.net/__am/1463693845/sass/background-dynamic=1&background-image=&background-image-height=800&background-image-width=2000&color-body=#bacdd8&color-body-middle=#bacdd8&color-buttons=#006cb0&color-header=#3a5766&color-links=#006cb0&color-page=#ffffff&oasisTypography=1&page-opacity=100&widthType=0/extensions/wikia/Recirculation/styles/recirculation.scss\" />",
    "<link rel=\"stylesheet\" href=\"http://slot1.images3.wikia.nocookie.net/__am/1463693845/sass/background-dynamic=1&background-image=&background-image-height=800&background-image-width=2000&color-body=#bacdd8&color-body-middle=#bacdd8&color-buttons=#006cb0&color-header=#3a5766&color-links=#006cb0&color-page=#ffffff&oasisTypography=1&page-opacity=100&widthType=0/extensions/wikia/PortableInfobox/styles/PortableInfobox.scss\" />",
    "<link rel=\"stylesheet\" href=\"http://slot1.images2.wikia.nocookie.net/__am/1463693845/sass/background-dynamic=1&background-image=&background-image-height=800&background-image-width=2000&color-body=#bacdd8&color-body-middle=#bacdd8&color-buttons=#006cb0&color-header=#3a5766&color-links=#006cb0&color-page=#ffffff&oasisTypography=1&page-opacity=100&widthType=0/extensions/wikia/PortableInfobox/styles/PortableInfoboxMonobook.scss\" />",
    "<link rel=\"stylesheet\" href=\"http://slot1.images1.wikia.nocookie.net/__am/1463693845/sass/background-dynamic=1&background-image=&background-image-height=800&background-image-width=2000&color-body=#bacdd8&color-body-middle=#bacdd8&color-buttons=#006cb0&color-header=#3a5766&color-links=#006cb0&color-page=#ffffff&oasisTypography=1&page-opacity=100&widthType=0/extensions/wikia/VisualEditorTourExperiment/styles/VisualEditorTourExperimentInit.scss\" />",
    "<link rel=\"stylesheet\" href=\"http://slot1.images1.wikia.nocookie.net/__am/1463693845/sass/background-dynamic=1&background-image=&background-image-height=800&background-image-width=2000&color-body=#bacdd8&color-body-middle=#bacdd8&color-buttons=#006cb0&color-header=#3a5766&color-links=#006cb0&color-page=#ffffff&oasisTypography=1&page-opacity=100&widthType=0/extensions/wikia/TemplateClassification/styles/TemplateClassification.scss\" />",
    "<link rel=\"stylesheet\" href=\"http://slot1.images1.wikia.nocookie.net/__am/1463693845/sass/background-dynamic=1&background-image=&background-image-height=800&background-image-width=2000&color-body=#bacdd8&color-body-middle=#bacdd8&color-buttons=#006cb0&color-header=#3a5766&color-links=#006cb0&color-page=#ffffff&oasisTypography=1&page-opacity=100&widthType=0/extensions/wikia/GlobalShortcuts/styles/GlobalShortcutsHelp.scss\" />",
    "<link rel=\"stylesheet\" href=\"http://slot1.images3.wikia.nocookie.net/__am/1463693845/sass/background-dynamic=1&background-image=&background-image-height=800&background-image-width=2000&color-body=#bacdd8&color-body-middle=#bacdd8&color-buttons=#006cb0&color-header=#3a5766&color-links=#006cb0&color-page=#ffffff&oasisTypography=1&page-opacity=100&widthType=0/extensions/wikia/GlobalShortcuts/styles/GlobalShortcutsSearch.scss\" />",
    "<link rel=\"stylesheet\" href=\"http://slot1.images1.wikia.nocookie.net/__am/1463693845/sass/background-dynamic=1&background-image=&background-image-height=800&background-image-width=2000&color-body=#bacdd8&color-body-middle=#bacdd8&color-buttons=#006cb0&color-header=#3a5766&color-links=#006cb0&color-page=#ffffff&oasisTypography=1&page-opacity=100&widthType=0/extensions/wikia/WallNotifications/styles/monobook/WallNotificationsMonobook.scss\" />",
    "<link rel=\"stylesheet\" href=\"http://templates.wikia.com/__load/-/cb=1463693845&debug=false&lang=en&only=styles&skin=monobook/site\" />",
    "<script src=\"http://templates.wikia.com/__load/-/cb=1463693845&debug=false&lang=en&newve=1&only=scripts&skin=monobook/startup\"></script>",
    "<script>if(window.mw){mw.loader.load([\"mediawiki.page.startup\",\"mediawiki.legacy.wikibits\",\"mediawiki.legacy.ajax\",\"amd.shared\"]);}</script>",
    "<script src=\"http://slot1.images.wikia.nocookie.net/__am/1463693845/groups/-/monobook_js,toc_js\"></script>"
],

The only things that's still not correct is:

It still adds the default 2 stylesheets as when not using the "preview_custom_head" configs.
Options embeded in the URL are not recognized by the server receiving them, because it expects them as URL-encoded.
1. As used in lines 3-11 eg: %23 instead of #.

from mediawiker.

tosher commented on August 16, 2024

And another change :)
https://github.com/tosher/Mediawiker/releases/tag/3.1.3

from mediawiker.

TriMoon commented on August 16, 2024

First of, im excited about your use of jinja2 in this plugin 👍
But it immediately makes me think about why you don't make use of it's possibilities to generate the preview page using templates, see source lines 1431-1441 😉

First thing i notice is that you still add the default 2 stylesheet lines to the head, see source lines 1436-1437
You should put those in the default config of mediawiker settings, that way users will both have a default to work with and see how to use it in their user settings, but most importantly a way to override using them.

That said i'll go and try using them right now 👍

from mediawiker.

tosher commented on August 16, 2024

Maybe.. :)

from mediawiker.

TriMoon commented on August 16, 2024

It seems to work, aside from the 2 by-default inserted style-sheets, all seems fine so far 👍

from mediawiker.

tosher commented on August 16, 2024

New version:
https://github.com/tosher/Mediawiker/releases/tag/3.1.4

from mediawiker.

TriMoon commented on August 16, 2024

That new patch doesn't add the values in the new config setting in the output of the generated page. 👎
I tried both with and without using the new keyword in my user settings, and both in main section and active site section.
The output includes only the settings defined in "preview_custom_head" for the active wiki.
This is what i used as user setting for this test (aside from the other settings)

{
    "mediawiki_preview_head": [
        "<meta charset=\"UTF-8\" />",
        "<link rel=\"shortcut icon\" href=\"{{ http }}://{{ host }}/favicon.ico\" />"
    ],
}

and

{
        "Wikia-Templates":
        {
            ...settings... ,
            "mediawiki_preview_head": [
                "<meta charset=\"UTF-8\" />",
                "<link rel=\"shortcut icon\" href=\"{{ http }}://{{ host }}/favicon.ico\" />"
            ],
            "preview_custom_head":
            [
                "<link rel=\"shortcut icon\" href=\"{{ http }}://vignette3.wikia.nocookie.net/templates/images/6/64/Favicon.ico/revision/latest?cb=20090710083239\" />",
                .....more...
            ],
            ...more_settings...
        }
}

from mediawiker.

tosher commented on August 16, 2024

From release notes:

Note! Data, defined by preview_custom_head parameter (in wiki host's parameters) will be used instead of data, defined by mediawiki_preview_head. If both values are required, needs to define all lines in preview_custom_head.

from mediawiker.

Pull CSS for page preview about mediawiker HOT 23 CLOSED

Comments (23)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent