Cloudphone Svelte Sample
Cloud Phone - Svelte Sample Widget
:beginner: This is a beginner guide on Cloud Phone widget development, created using sv to bootstrap a SvelteKit project.
https://cloudmosa.github.io/cloudphone-svelte-sample/
:notebook: Prerequisites
- Node & npm
- Git
- A GitHub account :octocat:
:page_facing_up: Pages
src/routes/+page.svelte
The default page that uses an OptionsMenu for navigating to About, Settings, or Privacy (external).
src/routes/about/+page.svelte
A simple page displaying a static description.
src/routes/settings/+page.svelte
A page for configuring the application. By default, the application will detect the best candidate from the browser's language. Users can override this on the settings page.
:wrench: Components
<Header />
A header displayed at the top of the screen. Includes a fixed logo and a title property that updates both document.title and an h1 tag displaying the title on screen.
<OptionsMenu />
A modal containing a list of menu items. Supports T9 keyboard navigation. Focus is moved using ArrowUp and ArrowDown. Menu items are selected using Enter.
<SoftKeyBar />
An on-screen menu bar with three actions in the positions start (left), center, and end (right). Supports both icon and text actions triggered via a global keydown event listener.
On Cloud Phone, soft keys are mapped as follows:
| Name | Key | Function |
|---|---|---|
| Left Soft Key (LSK) | Escape |
Programmable |
| Right Soft Key (RSK) | N/A | history.back() |
| Enter | Enter |
Programmable |
Because developers cannot override the RSK behavior, clicking RSK also calls history.back() to reproduce the same behavior on desktop browsers.
:rocket: Deploy to GitHub Pages
GitHub Pages offers free hosting for public open-source repositories. This project uses the official deploy-pages GitHub Action to build and deploy static HTML, CSS, and JS. SvelteKit's adapter-static creates a single page application (SPA) that's compatible with GitHub Pages by setting config.kit.paths.base to match your repository name.
[!WARNING]
Although it's possible to configure custom domain names, "GitHub Pages is not intended for or allowed to be used... either facilitating commercial transactions or providing commercial software" (see Prohibited Uses). Use GitHub Pages for production applications at your own risk.
:sunglasses: Developer Program
Register for the Cloud Phone Developer Program to upload test widgets and use the Cloud Phone Simulator.
 
:free: License
Licensed under the Apache 2.0 license
