Skip to content

docs: add widget screenshots #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
riderx wants to merge 2 commits into
base: main
Choose a base branch
from
Open

docs: add widget screenshots #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
87fda50
docs add widget screenshots
riderx May 21, 2026
dba084e
chore: sync local updates
riderx May 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .github/workflows/pr_beta_prompt.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ jobs:
timeout-minutes: 10
steps:
- name: Setup Node.js
uses: actions/setup-node@v6
uses: actions/setup-node@v6.4.0
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Verify all workflow `uses:` refs are SHA-pinned.
# Expected result: no matches.
rg -nP '^\s*uses:\s*[^@\s]+@(?![0-9a-f]{40}\b).+$' .github/workflows/*.yml

Repository: Cap-go/capacitor-widget-kit

Length of output: 2087

Pin actions/* workflow uses to commit SHAs (still mutable in this workflow).

.github/workflows/pr_beta_prompt.yml uses mutable tags:

  • actions/setup-node@v6.4.0
  • actions/github-script@v9.0.0

Pin both to full 40-char commit SHAs to satisfy the unpinned-uses policy.

🧰 Tools
🪛 zizmor (1.25.2)

[error] 21-21: unpinned action reference (unpinned-uses): action is not pinned to a hash (required by blanket policy)

(unpinned-uses)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.github/workflows/pr_beta_prompt.yml at line 21, The workflow uses mutable
action tags; replace the two occurrences "actions/setup-node@v6.4.0" and
"actions/github-script@v9.0.0" with their corresponding full 40-character commit
SHAs (pin to the specific commit) so the workflow no longer uses mutable tags;
locate the strings "actions/setup-node@v6.4.0" and
"actions/github-script@v9.0.0" in the file and update each `uses:` entry to the
exact commit SHA for that action release.

with:
node-version: 24.x
- name: Upsert beta publish comment
uses: actions/github-script@v8
uses: actions/github-script@v9.0.0
env:
IS_SAME_REPO: ${{ github.event.pull_request.head.repo.full_name == github.repository && 'true' || 'false' }}
with:
Expand Down
15 changes: 8 additions & 7 deletions .github/workflows/pr_beta_publish.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ jobs:
steps:
- name: Resolve PR and access checks
id: pr
uses: actions/github-script@v8
uses: actions/github-script@v9.0.0
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

All updated third-party actions must be SHA-pinned.

Lines 32, 110, 157, 164, 198, 215, and 276 use mutable tag refs. This violates the enforced unpinned-uses policy and weakens supply-chain integrity for a publish-capable workflow.

🔧 Example patch pattern 
-        uses: actions/github-script@v9.0.0
+        uses: actions/github-script@<40-char-commit-sha> # v9.0.0

-        uses: actions/checkout@v6.0.2
+        uses: actions/checkout@<40-char-commit-sha> # v6.0.2

-      - uses: oven-sh/setup-bun@v2.2.0
+      - uses: oven-sh/setup-bun@<40-char-commit-sha> # v2.2.0

-        uses: actions/setup-node@v6.4.0
+        uses: actions/setup-node@<40-char-commit-sha> # v6.4.0
#!/bin/bash
set -euo pipefail

# Verify all workflow `uses:` refs are SHA-pinned.
# Expected result: no matches.
rg -nP '^\s*uses:\s*[^@\s]+@(?![0-9a-f]{40}\b).+$' .github/workflows/*.yml

Also applies to: 110-110, 157-157, 164-164, 198-198, 215-215, 276-276

🧰 Tools
🪛 zizmor (1.25.2)

[error] 32-32: unpinned action reference (unpinned-uses): action is not pinned to a hash (required by blanket policy)

(unpinned-uses)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.github/workflows/pr_beta_publish.yml at line 32, Replace all mutable GitHub
Action tag refs with immutable SHA-pinned refs: locate each uses: entry such as
uses: actions/github-script@v9.0.0 (and the other occurrences flagged) and
change the tag to the corresponding full commit SHA for that action (e.g.,
actions/github-script@<full-commit-sha>); obtain the correct commit SHAs from
the action's repository (GitHub UI or git ls-remote) and update each uses: line
so every third-party action is pinned to a 40-character commit SHA.

with:
script: |
const prNumber = context.eventName === 'workflow_dispatch'
Expand Down Expand Up @@ -107,7 +107,7 @@ jobs:
core.setOutput('head_sha', pr.head.sha);

- name: Mark publish as running
uses: actions/github-script@v8
uses: actions/github-script@v9.0.0
with:
script: |
const marker = '<!-- pr-beta-publish -->';
Expand Down Expand Up @@ -154,13 +154,14 @@ jobs:
});

- name: Check out PR head
uses: actions/checkout@v6
uses: actions/checkout@v6.0.2
with:
ref: ${{ steps.pr.outputs.head_sha }}
fetch-depth: 0
filter: blob:none
persist-credentials: false

- uses: oven-sh/setup-bun@v2
- uses: oven-sh/setup-bun@v2.2.0

- name: Install dependencies
run: bun i
Expand Down Expand Up @@ -194,7 +195,7 @@ jobs:
run: bun run build

- name: Setup Node.js for npm publish
uses: actions/setup-node@v6
uses: actions/setup-node@v6.4.0
with:
node-version: 24.x
registry-url: 'https://registry.npmjs.org'
Expand All @@ -211,7 +212,7 @@ jobs:

- name: Publish success comment
if: ${{ success() }}
uses: actions/github-script@v8
uses: actions/github-script@v9.0.0
with:
script: |
const marker = '<!-- pr-beta-publish -->';
Expand Down Expand Up @@ -272,7 +273,7 @@ jobs:

- name: Publish failure comment
if: ${{ failure() && steps.pr.outputs.pr_number != '' }}
uses: actions/github-script@v8
uses: actions/github-script@v9.0.0
with:
script: |
const marker = '<!-- pr-beta-publish -->';
Expand Down
29 changes: 29 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,35 @@ Create Home Screen WidgetKit, ActivityKit, and Android widget experiences from C

<img src="./docs/demo.webp" alt="Demo of capacitor-widget-kit in action" width="300" />

## Widget Screenshots

<table>
<tr>
<td align="center">
<img src="./docs/screenshots/home-screen-widget.svg" alt="iOS Home Screen / SpringBoard widget screenshot" width="260" />
<br />
<sub>iOS Home Screen / SpringBoard</sub>
</td>
<td align="center">
<img src="./docs/screenshots/lock-screen-live-activity.svg" alt="iOS Lock Screen Live Activity widget screenshot" width="260" />
<br />
<sub>iOS Lock Screen / Live Activity</sub>
</td>
</tr>
<tr>
<td align="center">
<img src="./docs/screenshots/dynamic-island-widget.svg" alt="iOS Dynamic Island widget screenshot" width="260" />
<br />
<sub>iOS Dynamic Island</sub>
</td>
<td align="center">
<img src="./docs/screenshots/android-app-widget.svg" alt="Android AppWidget screenshot" width="260" />
<br />
<sub>Android AppWidget</sub>
</td>
</tr>
</table>

The plugin has two implementation paths:

- SVG template widgets: store Home Screen, Lock Screen, Dynamic Island, and Android layouts with optional named frames, hotspots, declarative state patches, pause/resume timers, and interaction events. Use this when your widget can be driven by resolved SVG output.
Expand Down
37 changes: 37 additions & 0 deletions docs/screenshots/android-app-widget.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 37 additions & 0 deletions docs/screenshots/dynamic-island-widget.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 44 additions & 0 deletions docs/screenshots/home-screen-widget.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 36 additions & 0 deletions docs/screenshots/lock-screen-live-activity.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 0 additions & 2 deletions src/helpers/workout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,6 @@ export function createWorkoutTemplateActivity(session: WorkoutTemplateSession):
svg: `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
<rect x="0" y="0" width="160" height="160" rx="24" fill="#05070b" />
<rect x="0" y="0" width="{{timers.rest.progressPct}}%" height="160" rx="24" fill="#00d69c" opacity="0.22" />
<text x="18" y="28" fill="#9fb0c8" font-size="12">{{state.session.title}}</text>
<text x="18" y="54" fill="#ffffff" font-size="18" font-weight="700">{{state.currentExercise.title}}</text>
<text x="18" y="75" fill="#7f8da3" font-size="12">{{state.currentExercise.subtitle}}</text>
Expand Down Expand Up @@ -171,7 +170,6 @@ export function createWorkoutTemplateActivity(session: WorkoutTemplateSession):
svg: `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 40">
<rect x="0" y="0" width="100" height="40" rx="6" fill="#05070b" />
<rect x="0" y="0" width="{{timers.rest.progressPct}}" height="40" rx="6" fill="#00d69c" opacity="0.28" />
<text x="5" y="8" fill="#9fb0c8" font-size="4">{{state.session.title}}</text>
<text x="5" y="15" fill="#ffffff" font-size="6" font-weight="700">{{state.currentExercise.title}}</text>
<text x="5" y="21" fill="#7f8da3" font-size="4">{{state.currentExercise.subtitle}}</text>
Expand Down