39 lines
4.2 KiB
Markdown

# Wikipedia iOS Web Development
The app uses several web components. This document explains how they are set up and how to update them.
#### Article View
The article view uses a server-side response from our [Page Content Service](https://www.mediawiki.org/wiki/Page_Content_Service#/page/mobile-html) with additional local `js` and `css` files for further customizations. These local files live within the `Wikipedia/assets` folder in the project. You can update these directly and commit the changes, with the exception of the `codemirror/resources`, `codemirror/config` and `pcs-html-converter` subdirectories (explained next).
##### PCS-HTML-Converter
These files are only used for users who upgrade from the 6.5.1 release to the 6.6.0 release, where a major migration in the way we display articles was needed. The `pcs-html-converter` files are intended to take legacy saved article html and convert it to our more modern format represented in the mobile-html endpoint, all locally on device. If these files need to be updated to reflect the latest response from the server, follow these steps:
1. Clone the [pcs-html-converter](https://github.com/wikimedia/pcs-html-converter) repository.
2. The pcs-html-converter repository has a submodule pointing to our mobile apps repo, which contains the latest output of our mobile-html endpoint. Follow the instructions on its `README` to instantiate this submodule, and fetch and pull the latest from `master`.
3. Run `npm install` and `npm build` in the pcs-html-converter root directory.
4. Copy the newly generated `PCSHTMLConverter.js` and `Polyfill.js` files and replace them in the wikipedia-ios repository, under `Wikipedia/assets/pcs-html-converter/build`.
5. The other files within `assets/pcs-html-converter` are simply copied from what the server is serving. Copy the responses from these and paste in the appropriate files:
- https://meta.wikimedia.org/api/rest_v1/data/css/mobile/base > base.css
- https://meta.wikimedia.org/api/rest_v1/data/css/mobile/pcs > pcs.css
- https://meta.wikimedia.org/api/rest_v1/data/javascript/mobile/pcs > pcs.js
6. Make a PR in the `wikipedia-ios` repository with these changes.
#### Editing View
The editing view is also a web view, but all files powering it live locally in the project. The files within `Wikipedia/assets/codemirror/resources` and `Wikipedia/assets/codemirror/config` are copied from our separate submodule repository or autogenerated respectively, so they should not be edited directly. Details are below for updating these areas.
##### Changing resources files
First open a PR in the [wikipedia-ios-codemirror repository](https://github.com/wikimedia/wikipedia-ios-codemirror) repository. Once that is merged, to reflect those changes in this project follow these steps:
1. The `wikipedia-ios` repository has a submodule that points to the `wikipedia-ios-codemirror` repository. `cd` to `Wikipedia/CodeMirror/wikipedia-ios-codemirror`, then pull the latest changes from master. If the `Wikipedia/CodeMirror/wikipedia-ios-codemirror` directory is empty, you can first run the `scripts/update_submodules` script to initalize the submodule.
2. From the `scripts` folder, run the `copy_code_mirror_resources` script. This will copy the relevant resources folder from the submodule into the iOS project assets folder.
3. Commit your changes and open a PR.
##### Generating config files
We instantiate our CodeMirror editor with configurations that are generated into the `assets/codemirror/config` folder. These files should not be edited directly. You can edit the output of these files inside `Command Line Tools/Update Languages/WikipediaLanguageCommandLineUtility.swift` if needed, then run the `Update Languages` scheme to regenerate these files.
There are other CodeMirror files that do not originate from the `wikipedia-ios-codemirror` repository or the languages command line utility (anything in `assets/codemirror`, excluding `/resources` and `/config`). These are styles and new functionality specific to the iOS app. These files can be updated directly.
#### Other Views
There are other smaller web components in the app, such as the About view. These live in the `Wikipedia/assets` folder and can be updated directly.