**This is a GSoC proposal to move the wikivoyage [[https://en.wikivoyage.org/wiki/Template:Pagebanner|pagebanner]] template functionality to an extension and make it mobile friendly**
=Profile Information=
**Name**: Sumit Asthana
**Email**: asthana.sumit23@gmail.com
**irc nick**: codezee
**Location**: India
**Time Zone**: UTC+5:30
**Typical working hours**: 6PM to 2AM before 26th April, 12PM to 1AM after 26th April(Indian Standard Time)
=Synopsis=
Wikivoyage uses the concept of [[https://en.wikivoyage.org/wiki/Template:Pagebanner|pagebanners]] and horizontal table of contents on each of its page, to alter the way the page is presented and for visual appeal.
However the current pagebanners are rendered using the [[https://en.wikivoyage.org/wiki/Template:Pagebanner|pagebanner template]] which displays a banner image on top and strips the original TOC and replaces it with a horizontal TOC. The desktop version is visually appealing, but it does not render well on mobile as shown below:
{F99731, layout=left,height=250}
{F99733,layout=right,height=250}
Clearly, in the mobile view, the banner is being obstructed by the edit box, and size is inappropriate In order to create a generic view, which would be consistent on both mobile and desktop as well as customizable, the proposal is to move the above functionality to a PageBanner extension, which would then be responsible for the rendering of pagebanners and a horizontal TOC on each page of wikivoyage
**Also, the current pagebanner only shows level 1 headings. For long articles, sub-categories are required. A discussion on wikivoyage's pagebanner expedition's [[ https://en.wikivoyage.org/wiki/Wikivoyage_talk:Banner_Expedition#Per-section_index | discussion page ]] captures this.**
A short excerpt from the same
==Solution==
In order to create a generic view, which would be consistent on both mobile and desktop as well as customizable, the proposal is to move the above functionality to a PageBanner extension, which would then be responsible for the rendering of pagebanners and horizontal TOC on each page of wikivoyage
=Workflow=
**Step 1**: Create a basic banner along the lines of the template. This involves:
- Creating a parser function as '#pagebanner' which when supplied no argument, adds a banner image from wikitext item P:948(default)
Current pagebanner template invocation is like:
{{pagebanner|Ladakh_banner.jpg|caption=Mountains in eastern Ladakh}}
Parser function will have a similar invocation like:
{{#pagebanner: Ladakh_banner.jpg|caption=Mountains in eastern Ladakh}}
**This is being done with the aim to create minimum change from end user's perspective**
- The wikidata image will be fetched using [[https://www.mediawiki.org/wiki/Extension:Wikibase_Client/Lua|lua]] scripting supported by mediawiki
- The parser function will support additional parameters to mimic the current pagebanner template in terms of its use, so that end-users perceive minimum change(taken from the template's [[https://en.wikivoyage.org/wiki/Template:Pagebanner|doc]] page):
-# //**caption text**//: Recommended. Enter **caption=description** to display a description of the picture when a mouse pointer is placed over the banner image.
-# //**page name**//: Optional. Enter **pgname=name** to display in the banner. Only enter a name if you want it to be different than the formal name of the page.
-# //**disambiguation**//: Optional. Displays a disambiguation icon in the banner (a question mark) and the disambiguation hatnote after the banner. Enter **disambig=yes** if the name of the disambiguation page is page name (disambiguation). Enter **disambig=disambiguation** page name if the disambiguation page name is different from the current page name.
-# //**star**//: Optional. Enter **star=yes** if the guide is a Star article. This displays the [[ https://en.wikivoyage.org/wiki/Star_articles | Star ]] article symbol in the top right corner.
-# //**DotM**//: Optional. Enter **dotm=yes** if the guide is a [[ https://en.wikivoyage.org/wiki/Previous_Destinations_of_the_month | previous Destination of the month ]]. This displays the DotM symbol in the top right corner.
-# //**OtBP**//: Optional. Enter **otbp=yes** if the guide has been featured on [[ https://en.wikivoyage.org/wiki/Previously_Off_the_beaten_path | Off the beaten path ]] This displays the OtBP symbol in the top right corner.
-# //**Ftt**//: Optional. Enter **ftt=yes** if the guide has been a [[ https://en.wikivoyage.org/wiki/Previous_Featured_travel_topics | Featured travel topic ]]. This displays the Ftt symbol in the top right corner.
-# //**unesco**//: Optional. Enter **unesco=yes** if the guide is or describes a site on the [[ https://en.wikivoyage.org/wiki/UNESCO_World_Heritage_list | Unesco World Heritage list ]]. Only the lowest level guides in the hierarchy should be tagged (ie, [[ https://en.wikivoyage.org/wiki/Sydney/City_Centre | Sydney/City Centre ]] for the Opera House, not Sydney). This displays the World Heritage symbol in the top right corner and adds a [[ https://en.wikivoyage.org/wiki/Category:UNESCO_World_Heritage_Sites | category ]].
-# //**TOC box**//: Optional. Enter **box=black** for the TOC to appear in a translucent black box with white type. Enter **box=white** for the TOC to appear in a translucent white box with black type. Enter nothing for the default solid grey box with black type.
-# //**notoc**//: Optional. Enter **notoc=true** to stop the TOC being included in the banner and for the entire TOC to be shown within the article instead. Mainly to be used on articles with lots of sections.
-# //**index**//: Optional. Enter **index=yes** for banners on title/index pages or pages in other main namespace article categories which do not always get banners.
-# //**fop**//: Optional. Enter **fop=yes** for freedom-of-panorama banners which are not allowed on Commons, to remove them from applicable maintenance categories
-# (from [[ http://en.wikivoyage.org/wiki/Wikivoyage_talk:Banner_Expedition#Per-section_index | banner expedition ]] discussion) Some thoughts regarding the sub-headings of TOC can be taken
**Step 2**: After the code for the banner generated, its important to detect the screen size of the user and resize the banner appropriately. This step is essential for mobile users, who are one of the important targets of this extension. The styling for the banner will reside inside the extension, which will determine its appearance on both mobile and desktop from a single location.
Note that this can be overridden in wiki's Common.css and Mobile.css
[[ https://en.wikivoyage.org/wiki/MediaWiki_talk:Mobile.css | This ]] talk on Mobile frontend regarding banner styling will be the starting point.
**Also, implement the sub-categories feature after discussion with the wikivoyage community. A parameter switch will be provided to display the sub-categories or not**
>This involves putting the toc-level-1 divs in horizontal TOC and putting toc-level-2,3,4 headings as drop-downs using css and javascript by identifying them and using dom manipulation to create their own heirarchy. An example requiring this feature is [[https://en.wikivoyage.org/wiki/Scuba_diving|this]] page which has a lot of sub-headings so the toc in banner is disabled. However since this is a new feature, rather including it in the extension compulsorily, it'll be as an experiment in the beginning
**Step 3**: Create a simple popup edit box, which will be invoked by an edit button on the banner, and will allow for choosing a banner image from [[ https://commons.wikimedia.org/wiki/Category:Wikivoyage_banners | here ]], and which will change the banner in wikidata
A switch will be provided to enable/disable the feature of choosing a banner image
**Step 4**: Test the extension on the labs server using both wikidata value and local value of pagebanner and also the edit feature
===Possible mentors===
# [[http://www.mediawiki.org/wiki/User:Jdlrobson |Jdlrobson]]
# [[http://en.wikipedia.org/wiki/User:Nicolas1981|Nicolas Raoul]]
=Design=
A rough design of the banner with the image chooser UI is given below:
{F99877,layout=left,height=400}
=Phases=
**Phase I**: Get a mediawiki test lab instance and create and deploy the basic version of the extension which simply displays a banner image given to it through the parser hook
**Phase II**: Create the lua script to fetch default banner value from wikidata
**Phase III**: Add banner customization options to the extension as well as styles
**Phase IV**: Make the banner responsive so that it renders well on Mobile View as well
**Phase V**: Create and integrate the image chooser UI into the banner
**Phase VI**: Deploy and test the final extension on [[http://en.wikipedia.beta.wmflabs.org/wiki/Headings|mediawiki-test labs]]
=Deliverables=
* The [[https://en.wikivoyage.org/wiki/Template:Pagebanner|pagebanner]] template functionality will be provided by the extension
* A UI will be provided to select an image from the banner [[ https://commons.wikimedia.org/wiki/Category:Wikivoyage_banners |category]] on wikivoyage which stores all the banner images
* [[ https://www.mediawiki.org/wiki/Extension:MobileFrontend | Mobile frontend ]] will have a resized banner according to the size of the browser as well as positioned appropriately
* Horizontal TOC of the banner will suporrt sub-categories through drop-down links.
=Timeline=
| Period | Task |
| ---- | ----|
|Before April 27| Request a mediawiki labs instance and a gerrit repository for the extension. Set up the skeleton of the extension such as i18n files and the basic setup|
|April 27-May25|Community bonding period,Interact with the wikivoyage community and refine the banner issues|
|May 25|Official GSoC coding begins|
|May 25-June 9|This will involve creating extension and the parser function responsible for creating the banner functionality(Step 1)|
|June 10-June 15|Create the lua script which will fetch the default banner from wikidata|
|June 16-June 25|Add the options to the parser function mentioned in step 3 to customize pagebanner|
|June 26-July 10|Add styling and scripts to make the extension compatible with [[ https://www.mediawiki.org/wiki/Extension:MobileFrontend | Mobile frontend ]]. Also involves making a horizontal-toc render on mobile|
|July 11-July 25|Create the UI to choose the pagebanner image(implement and integrate with banner)|
|July 26-August 10|Wrap up the extension and all its parts to be ready for deployment|
|August 11-August24|Test and remove any remaining bugs after deploying on [[http://en.wikipedia.beta.wmflabs.org/wiki/Headings|mediawiki-test labs]]|
=Participation=
I will follow the mentioned ways to go about the project:
* The project will report will be updated on the sub-namespace of my [[ https://www.mediawiki.org/wiki/User:Sumit.iitp/ | user ]] page as well as on phabricator
* Through #wikimedia-dev, #wikimedia-mobile and #wikidata irc channels
* throught wikitech-I mailing list in case of getting an opinion
==Source Code==
Source code will be pushed on a [[ https://gerrit.wikimedia.org/ | gerrit ]] repository after acquiring one
=About Me=
* I'm a second year undergraduate student of computer science at IIT Patna
* My major interest is in web languages(php,html,javascript,css) where I have done maximum work
I like to design web pages as well as do backend coding, and I'm inspired by the awesome design works out there on the web created by developers.
I had been contributing to wikimedia-mobile and was learning the changes needed to be made for mobile users. I came across the wikivoyage banners which weren't perfect on mobile. This prompted me to follow this up and I decided to take it up as a project
==How did you hear about the program==
I heard about the program from my seniors and my friend who had been gsoc students.
==Will you have any other time commitments, such as school work, another job, planned vacation, etc., during the duration of the program?==
By 27th April,our summer vacation of college will start and ends by late of July; I can give my full time commitment to this project,. I assure dedication of at least 40 hours per week to the work and that I do not have any other obligations from early May till mid August.
==We advise all candidates eligible to Google Summer of Code and FOSS Outreach Program for Women to apply for both programs. Are you planning to apply to both programs and, if so, with what organization(s)?==
Only GSoC, for mediawiki
=Past Experience=
My open source experience began with my discovery and playing around with linux and now I'm enjoying it. However my open source contributions began with mediawiki since its based on the languages I know.In the past months I have submitted quite a few patches merged in core as well as in Mobile Frontend where the project aims to solve the problem and got them merged. Some are:
**In core**
* Database [[ https://phabricator.wikimedia.org/T50853 | bug ]] to correctly handle the use of 'IN' in makeList function
* Improving the captcha view for non-javascript users on login/signup form, [[https://phabricator.wikimedia.org/T85192 | T85192]] and [[https://phabricator.wikimedia.org/T87190|T87190]]
* Fix to remove deprecated tables from category page and add responsive layout so that they render well on mobile [[ https://phabricator.wikimedia.org/T85496 | T85496 ]]
**In Mobile Frontend**
* Hygiene bug [[ https://phabricator.wikimedia.org/T87192 | T87192 ]] and [[ https://phabricator.wikimedia.org/T88568 | T88568 ]]
* Horizontal scrolling for TOC [[ https://phabricator.wikimedia.org/T89367 | bug ]]
* break word for TOC [[ https://phabricator.wikimedia.org/T91281 | bug ]]
[[ https://gerrit.wikimedia.org/r/#/q/owner:%22Sumit+%253Casthana.sumit23%2540gmail.com%253E%22,n,z | All Gerrit contributions ]](past and ongoing)
**Other Projects**
* Contributed to developing the college fest website for [[ http://2015.anwesha.info/ | Anwesha 2015 ]]
* Small [[ https://github.com/codez266/ereg|registration portal]] for ecell of my college
* List of other open-source contributions at my [[https://github.com/codez266|github profile]]