# TL;DR

* At a minimum, provide the English (default) HTML file in `/Library/Application Support/SplashBuddy/presentation.bundle/en.lproj/index.html`
* Each resource (`<img>`…) must reside in the `.lproj` folder corresponding to the localization (eg. `/Library/Application Support/SplashBuddy/presentation.bundle/en.lproj/`) if they are localized
* Non-localized resources can reside in the `common` folder. You will need to reference them with a relative path (example: `<img src="../common/SplashBuddy.png">`)
* Add a localization by creating folder with the right [Locale ID](https://developer.apple.com/library/content/documentation/MacOSX/Conceptual/BPInternational/LanguageandLocaleIDs/LanguageandLocaleIDs.html#//apple_ref/doc/uid/10000171i-CH15-SW1). For example: `/Library/Application Support/SplashBuddy/presentation.bundle/fr.lproj/index.html` for French

# More details

## Localization

When Localization support was added to SplashBuddy, we needed to find an elegant way to support different languages for the file, while making it optional. Fortunately, Apple has built in support for this. 

In practice, SplashBuddy will look at the language preferences of the user (System Preferences > Language & Region) and will try to match the top on, then second etc. 

SplashBuddy expects `/Library/Application Support/SplashBuddy/presentation.bundle`. Apple [calls it](https://developer.apple.com/library/content/documentation/CoreFoundation/Conceptual/CFBundles/AboutBundles/AboutBundles.html) a `package`, which is "any directory that the Finder presents to the user as if it were a single file". Examples of such packages are: .app, .bundle, .framework, .plugin, .kext. I chose to use `.bundle` as it already available and very close to our use.

👍🏼 To open the bundle, right-click on it and hit "Show Package Contents"

The structure of the package is:
* `common` contains the common resources (like img, css, jss…). 
* `en.lproj` contains the default (or fallback) language. For SplashBuddy, it is English. 
* `fr.lproj`: French localization
* `de.lproj`: German localization
* `nl.lproj`: Dutch localization

ℹ️ Only `/Library/Application Support/SplashBuddy/presentation.bundle/en.lproj/index.html` is required.

Inside each `.lproj` folder is `index.html` which will be displayed to the user. Any localized resource used by `index.html` must be present in the localized folder. In other words. If the French localisation displays a localized image, it must exist in `fr.lproj`. Common (non-localized) images should reside in the `common` folder. You will need to reference them with a relative path (example: `<img src="../common/SplashBuddy.png">`)


SplashBuddy only support a few localisations today for the interface, but feel free to use any localisation for `presentation.bundle`. You can get a description of Locale IDs [here](https://developer.apple.com/library/content/documentation/MacOSX/Conceptual/BPInternational/LanguageandLocaleIDs/LanguageandLocaleIDs.html#//apple_ref/doc/uid/10000171i-CH15-SW1). As an example, if you want to supply an index.html for Simplified Chinese used in Hong Kong, use `zh-Hans_HK.lproj/index.html`.

### Demo content (1.2)

Luckily, we provide [an example](https://github.com/ftiff/SplashBuddy/tree/master/Installer/payload/Library/Application%20Support/SplashBuddy/presentation.bundle) 🥇

All you need to do to get started is:

- put the logos in `common` folder (64x64 png is best)
- customize the text `index.html` in each `.lproj` folder

ℹ️ Each `<div>` correspond to a page.

For example:

```
<div>
   <br>
   <img src="../common/Self Service.png" alt="Self Service" style="width:64px;height:64px;">
   <br>
   <p>One of the benefits of Jamf is Self Service; think of it like a custom App Store just for employees.
   <p>You'll find it on the lefthand side of your Dock.
</div>
```

Here you can change the `<img src=[...]>` and the content below it. 

ℹ️ Make sure you do the same for each localization (`.lproj` folder) or delete the localizations you don't need. 

### Dimensions

![](images/SplashBuddy1.1-webview-dimensions.png)

📝 For 1.0, the dimensions were 561x405px. If you are inserting a video, a resolution of 570x377 will fill the presentation borders left to right.