The appstore "Discover" section is generated from data is provided using a JSON file. The discover.json consists of an array containing multiple elements, those elements are either shuffled or can be always shown.
Currently the following elements are supported:
- Posts
Posts consists of a headline, a text and an optional image.
- Full width media
Like images (webp is recommended due to quality, size and browser support), animations (webm or mp4) or videos1
- App showcases
Promote a set of apps
- Carousel
Allow to shuffle through multiple elements
All content types are sharing a common interface
{
// The type of the element
"type": "post",
// ID to indentify this element
"id": "1d41a08e-4aa6-49b3-ad1b-ff2e83bcdc88",
// (optional) if set this element will be always shown on that specified position
"order": 1,
// (optional) if set the content will only be shown starting that date
"date": "2024-04-04T20:00:00Z",
// (optional) if set the content will only be shown UNTIL that date
"expiryDate": "2024-05-04T20:00:00Z",
// (optional) the optionally localized headline, if a language is missing the "en" default is used
"headline": {
"en": "...",
"de": "..."
},
// (optional) link for the element
"link": "https://..."
}Post are elements with a headline, a text and an (optional) media part. All elements of it can be localized.
{
"type": "post",
"id": "1d41a08e-4aa6-49b3-ad1b-ff2e83bcdc88",
"headline": {
"en": "Amazing wallpapers",
"de": "Bezaubernde Hintergründe"
},
"text": {
"en": "This are the most amazing wallpaers that you can possible have. Get them now!",
"de": "Die wohl beeindruckensten Hintergründe die man haben kann. Hol sie dir jetzt!"
},
"link": "https://example.com/wallpapers",
"media": {
"alignment": "end",
"content": {
"en": {
"src": {
"src": "http://example.com/a.png",
"mime": "image/png"
},
"alt": "Amazing wallpaper"
}
}
}
}{
"type": "post",
"id": "1d41a08e-4aa6-49b3-ad1b-ff2e83bcdc88",
"media": {
"content": {
"en": {
"src": {
"src": "https://example.com/preview.webp", // the preview image (or animation)
"mime": "image/webp"
},
"alt": "Some alternative text",
"link": "http://example.com/full-video" // the link to navigate to when pressing "Play video"
}
}
}
}It is possible to have localized media, e.g. screenshots in different languages. For this use an array for media instead:
{
"type": "post",
// ...
"media": {
"content": {
"en": {
"src": {
"src": "https://example.com/english.webp",
"mime": "image/webp"
},
"alt": "Some alternative text"
}
"de": {
"src": {
"src": "https://example.com/german.webp",
"mime": "image/webp"
},
"alt": "Ein Alternativtext"
}
}
}
}The showcase type allow to promot multiple entries in one element. It allows to either show multiple posts or apps.
{
"type": "showcase",
// ...
"headline": {
"en": "5 top rated apps over all time"
},
"content": [
{
"type": "app",
"appId": "cospend"
},
{
"type": "app",
"appId": "cookbook"
}
]
}{
"type": "showcase",
"headline": {
"en": "5 amazing wallpapers"
},
"content": [
{
"type": "post",
"media": {
"content": {
"en": {
"src": {
"src": "http://example.com/first.png",
"mime": "image/png"
},
"alt": "Wallpaper..."
}
}
}
},
{
"type": "post",
"media": {
"content": {
"en": {
"src": {
"src": "http://example.com/second.png",
"mime": "image/png"
},
"alt": "Another wallpaper..."
}
}
}
}
// other posts
]
}Carousels allow the same common properties, like headlines and text, but have a content property for and array of posts to show. The content property also allows the app type like type: "showcase" does.
{
"type": "carousel",
"content": [
{
"type": "post",
"headline": {
"en": "Nextcloud Office 7.0 out with full-featured editing dialogs"
},
"text": {
"en": "Today is an..."
},
"media": {
"content": {
"en": {
"src": {
"src": "http://example.com/first.png",
"mime": "image/png"
},
"alt": "..."
}
}
}
},
// other posts
]
}{
"type": "carousel",
"headline": {
"en": "Some headline that is important"
},
"text": {
"en": "Today is an..."
},
"content": [
{
"type": "post",
"media": {
"content": {
"en": {
"src": {
"src": "http://example.com/first.png",
"mime": "image/png"
},
"alt": "...",
"link": "..."
}
}
}
},
// other posts
]
}{
"type": "carousel",
"headline": {
"en": "Some amazing apps"
},
"content": [
{
"type": "app",
"appId": "Cospend",
},
// other apps
]
}The JSON can be validated using out schema, see app-discover.schema.json <./app-discover.schema.json>.
This element all other inherit from
|
Type | Is required | Notes |
|
string |
|
|
|
string |
|
|
|
integer | For manual ordering. Elements without order are shuffled |
|
|
app-discover-localized-strings |
||
|
app-discover-localized-strings |
||
|
URL | allows also app://APP_ID links opening the app, if installed or the appstore page otherwise |
|
|
string (ISO8601 date-time) | Can be set to only show this entry after the specified date | |
expiryDate |
string (ISO8601 date-time) | Can be set to only show this entry until the specified date |
./app-discover.schema.json
Localized strings are objects with the language code as the key and the translated string as the property, like:
{ "en": "Hello", "de": "Hallo" }
|
Type | Is required | Notes |
|
string |
|
The English text |
| language code | string | The translated text for that language |
./app-discover.schema.json
Media objects are used within the post element, they allow to embed video or image media.
|
Type | Is required | Notes |
|
:ref:app-discover-media-content |
|
The content to show |
alignment |
string | When combined with text this defined the media alignment. One of: left, right, top |
./app-discover.schema.json
The media content is dictionary similar to app-discover-localized-strings but instead of strings its values are media content objects with following properties:
|
Type | Is required | Notes |
|
:ref:app-discover-media-source or array of it |
|
The media source, use an array for fallback options (source sets) |
|
string |
|
The alternative text for the media |
|
URL | In case of videos this is the link to navigate when pressing the play-video button |
./app-discover.schema.json
|
Type | Is required | Notes |
|
URL |
|
The URL of the media element |
|
string |
|
The MIME type of the media element |
./app-discover.schema.json
The app element is only used in showcase elements.
|
Type | Is required | Notes |
|
string | yes | "type": "app" |
|
string | yes | The app id, e.g. text or forms |
./app-discover.schema.json
The post element is the basic element for media or text entries, it inherits from the app-discover-generic-element and extends it by allowing the media property:
|
Type | Is required | Notes |
|
string | yes | "type": "post" |
|
app-discover-media-object or array |
yes | Either one app-discover-media-object or an array of multiple for localized media |
./app-discover.schema.json
The showcase elements allows to display multiple posts inside one element, it inherits from the app-discover-generic-element and extends it by allowing the content property:
|
Type | Is required | Notes |
|
string | yes | "type": "showcase" |
|
array | yes | Array of app-discover-app-element or of app-discover-post-element |
./app-discover.schema.json
The carousel elements allows to display multiple posts inside carousel. It inherits from the app-discover-generic-element and extends it by allowing the content property:
|
Type | Is required | Notes |
|
string | yes | "type": "carousel" |
|
array | yes | Array of app-discover-post-element |
./app-discover.schema.json
For videos see the example below.↩