Publishing to the Store

To publish a tile to the store section of the official website, create a Pull Request on Tiled Widgets Github. The PR should contain,

  1. A folder inside /src/routes/custom_tiles/ folder, containing information about the tile. It should be named according to your tile ID in the format {tileid}. ( eg: /src/routes/custom_tiles/com.someones.tile ). Its format is described in the Tile Information Section
  2. All images for the tile should be in the /static/tiles/{tileid}/ directory.
  3. Images must be of the aspect ratio 16:9 and below 125KB.
  4. 6 Images are allowed in maximum

The package for the tile should be ZIP file with extension .tile.zip. The package files WILL NOT be hosted on the website, they should be uploaded externally.

Tile Information

Details for the tile are located in the custom_tiles/{tileid} folder. The following content should be included in +page.svx file. ( This is a svelte markdown file for the mdsvex module )

The front matter is expected to have the following properties.

---
title:  "Calendar" # The user visible name of the tiles
excerpt: "The plasma calendar widget as a tile" # A short description

domain: "com.github.kavinunethsara.calendar" # The tile ID.
thumbnail: cover.png # Thumbnail image shown in the store
cover: cover.png # Cover image used as the background for the tile
download: http://localohst/asd # Download link. A direct link is preferred

author: Someone # Author's name
email: someone@somewhere.com # Author's email
license: MIT license # License under which the tile is released
website: www.somewhere.com/tile/ # Website or Source Repository for the tiles
tags: calendar time date # Space separated list of tags

lastUpdate: 2025-02-13 # Date of last update, in YYYY-MM-DD
publishedOn: 2025-02-13 # Publish date

version: 1.0 # Current version
---

The content body of the file is in mixed Markdown and Svelte. You can use it to describe your tile. You can use the <Carousel> tag to add a carousel to the description.

<script lang="ts">
  import Carousel from '$lib/components/Carousel.svelte';
</script>

<Carousel images={['/tiles/com.github.kavinunethsara.binaryclock/bged.png', '/tiles/com.github.kavinunethsara.binaryclock/outlined.png']} />