Add prayertimes.dev landing page with CYD screen preview and PR preview build workflow by Copilot · Pull Request #34 · element-software/CYD-ESPHome-HA-Monitor

Copilot · 2026-03-11T14:25:53Z

No /prayertimes page existed in the config-generator site. Adds a dedicated landing page matching the mockup screen layout — live clock, Gregorian date, gold SVG countdown ring, and next prayer name/time — rendered inside the standard CYD device frame.

New components

CydPrayerTimesScreen — dark-background screen matching the mockup: live hh:mm AM/PM clock, dd/mm/yyyy Gregorian date, SVG arc ring (gold stroke, 30-min preview, "Next prayer" label), and Asr 3:15 PM prayer footer. Uses the same cqmin scaling as CydClock/CydScreenGrid.
CydPrayerTimesDevicePreview — thin wrapper placing the screen into the existing CYD device frame (mirrors CydDevicePreview layout).

New page — `/prayertimes`

Hero + two-column layout: feature bullets + live device preview
"What you need" and "How it works" sections explaining the prayertimes.dev → Home Assistant → ESPHome data flow
CTA linking back to the Config Generator

Navigation

"Prayer Times" added to SiteHeader nav links and SiteFooter link list.

PR preview build workflow — `.github/workflows/pr-preview.yml`

Triggers automatically on every pull request targeting main
Also supports manual triggering via workflow_dispatch with an optional pr_number input — useful for running the workflow on the PR that first introduced the file (before it exists on main)
Live preview URL — when the SURGE_TOKEN repository secret is configured, deploys to https://cyd-esphome-pr-{n}.surge.sh via Surge.sh and posts the clickable URL as a PR comment (updated on every push; preview is torn down automatically when the PR is closed/merged)
Artifact fallback — when SURGE_TOKEN is not set, uploads config-generator/out/ as a downloadable workflow artifact named pr-preview-{PR number} (7-day retention) and posts a comment with a download link

To enable live preview URLs: create a free Surge.sh account, run npx surge token, and add the token as a repository secret named SURGE_TOKEN.

Screen preview

Mockup	Implementation

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

…or numeric sensors

…eck, smart threshold step Co-authored-by: element-software <81567707+element-software@users.noreply.github.com>

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…redundant if-check; 15 tests pass Co-authored-by: element-software <81567707+element-software@users.noreply.github.com>

…-thresholds Add threshold-based icon switching and dynamic threshold management for numeric sensors

…state

Co-authored-by: element-software <81567707+element-software@users.noreply.github.com>

…preview Co-authored-by: element-software <81567707+element-software@users.noreply.github.com>

element-software · 2026-03-11T15:03:35Z

@copilot why did this not have a preview vercel deployment?

Copilot · 2026-03-11T15:05:16Z

@copilot why did this not have a preview vercel deployment?

The repository doesn't have Vercel set up — it deploys to GitHub Pages via the nextjs.yml workflow, which only triggers on pushes to main (not on PRs). There's no vercel.json, no Vercel project link, and no Vercel GitHub app connected to this repo.

To get PR preview deployments you'd need to either:

Connect Vercel — link the repo to a Vercel project; the Vercel GitHub app automatically creates preview deployments for every PR branch.
Stay on GitHub Pages — add a second workflow that builds the static export on PRs and deploys to a separate Pages environment or uploads the out/ folder as a workflow artifact (accessible via the Actions tab).

Let me know which approach you'd prefer and I can set it up.

Copilot

Pull request overview

Adds a new /prayertimes landing page to the config-generator site, showcasing a prayer-times themed CYD screen preview (clock/date/countdown ring/next prayer) and linking users between prayertimes.dev and the existing config generator.

Changes:

Added new /prayertimes page with metadata, hero, explainer sections, and CTA back to the config generator.
Introduced CydPrayerTimesScreen + CydPrayerTimesDevicePreview to render the mockup-style screen inside the CYD frame.
Linked the new page from both SiteHeader and SiteFooter navigation.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
config-generator/components/SiteHeader.tsx	Adds “Prayer Times” to the main nav.
config-generator/components/SiteFooter.tsx	Adds “Prayer Times” to footer links.
config-generator/components/CydPrayerTimesScreen.tsx	New client component rendering the prayer-times screen UI (clock/date/ring/next prayer).
config-generator/components/CydPrayerTimesDevicePreview.tsx	Wraps the prayer-times screen inside the existing CYD device-frame layout.
config-generator/app/prayertimes/page.tsx	New landing page with copy + live device preview and CTAs.

Copilot · 2026-03-11T15:05:35Z

config-generator/components/CydPrayerTimesScreen.tsx

+  countdown: scale(30),
+  countdownSub: scale(11),


FONT.countdown and FONT.countdownSub are defined but never used. Either remove these constants to avoid dead code, or wire them into the SVG text styling so the scaling stays consistent with the rest of the screen.

Suggested change

countdown: scale(30),

countdownSub: scale(11),

Copilot · 2026-03-11T15:05:36Z

config-generator/components/CydPrayerTimesDevicePreview.tsx

+            bottom: '27%',
+            left: '24%',
+          }}
+          aria-label="Prayer times display preview"


The screen-preview container is exposed to assistive tech via aria-label, which means screen readers may traverse a live-updating, purely decorative preview (time updates every second). In CydDevicePreview the equivalent container is aria-hidden; consider matching that here (or alternatively give the preview a clear semantic role and ensure its dynamic content doesn’t create noise for AT users).

Suggested change

aria-label="Prayer times display preview"

aria-hidden="true"

Copilot · 2026-03-11T15:05:36Z

config-generator/components/CydPrayerTimesScreen.tsx

+function formatTime(date: Date): { time: string; ampm: string } {
+  const h = date.getHours();
+  const m = date.getMinutes().toString().padStart(2, '0');
+  const ampm = h >= 12 ? 'PM' : 'AM';
+  const hour = h % 12 || 12;
+  return { time: `${hour}:${m}`, ampm };
+}


formatTime produces hours without a leading zero (e.g., 1:05), but the PR description calls for an hh:mm AM/PM display. Consider formatting with a 2-digit hour (e.g., padStart on the hour or use toLocaleTimeString with { hour: '2-digit', minute: '2-digit', hour12: true }).

Copilot · 2026-03-11T15:05:36Z

config-generator/components/CydPrayerTimesScreen.tsx

+  const cy = 38;
+  const viewSize = 76;
+  const circumference = 2 * Math.PI * r;
+  const progress = Math.min(1, Math.max(0, minutes / total));


progress is calculated as minutes / total without guarding total. If total is 0 (or negative), this will produce Infinity/NaN and break the SVG ring rendering. Add a defensive check (e.g., treat non-positive totals as 0 progress) before computing dashoffset.

Suggested change

const progress = Math.min(1, Math.max(0, minutes / total));

const progress =

total > 0 ? Math.min(1, Math.max(0, minutes / total)) : 0;

element-software · 2026-03-11T15:08:16Z

add a second workflow that builds the static export on PRs and deploys to a separate Pages environment or uploads the out/ folder as a workflow artifact (accessible via the Actions tab). @copilot

Co-authored-by: element-software <81567707+element-software@users.noreply.github.com>

Copilot · 2026-03-11T15:11:18Z

add a second workflow that builds the static export on PRs and deploys to a separate Pages environment or uploads the out/ folder as a workflow artifact (accessible via the Actions tab). @copilot

Done in commit 66d793d. Added .github/workflows/pr-preview.yml which triggers on every PR targeting main:

Builds the Next.js static export
Uploads config-generator/out/ as a workflow artifact named pr-preview-{PR number} (kept for 7 days)
Posts a comment on the PR with a direct link to the Actions run — reviewers can expand Artifacts at the bottom of the run page to download and browse the site locally

On subsequent pushes to the same PR the comment is updated in-place rather than creating duplicates.

element-software · 2026-03-11T15:13:50Z

Nice work @copilot, how cna I trigger that work flow on this pr?

…_number input Co-authored-by: element-software <81567707+element-software@users.noreply.github.com>

Copilot · 2026-03-11T15:16:37Z

Nice work @copilot, how cna I trigger that work flow on this pr?

Since the workflow file was introduced in this PR (not yet on main), GitHub won't automatically pick it up for this PR. I've added a workflow_dispatch trigger in commit 0495c0c so you can run it manually right now:

Go to Actions → PR Preview Build in the repository
Click Run workflow → select the branch copilot/update-ui-prayertimes-dev
Enter the PR number in the "PR number" field (optional — if filled, the bot will post the artifact link as a comment on that PR)
Click Run workflow

Once this PR is merged to main, all future PRs will trigger the build automatically on every push.

github-actions · 2026-03-11T15:34:03Z

🔍 PR Preview Build

The static export has been built and uploaded as a workflow artifact.

Download preview artifact — expand Artifacts at the bottom of the run page to download pr-preview-34.

The artifact is a complete static export of the site. Extract it and open index.html locally to preview your changes.

element-software · 2026-03-11T15:35:32Z

that's great, but i need a preview URL, not the build output. @copilot

…artifact fallback, teardown on PR close Co-authored-by: element-software <81567707+element-software@users.noreply.github.com>

Copilot · 2026-03-11T15:40:12Z

that's great, but i need a preview URL, not the build output. @copilot

Updated in commit 879d669. The workflow now deploys a live preview to Surge.sh (free static hosting) and posts the URL directly as a PR comment.

One-time setup to enable live preview URLs:

Create a free account at https://surge.sh
Run npx surge token in a terminal to get your token
Add it to this repository as a secret named SURGE_TOKEN
(Settings → Secrets and variables → Actions → New repository secret)

Once that's done, every push to a PR will:

Deploy the site to https://cyd-esphome-pr-{n}.surge.sh
Post/update a comment on the PR with the live URL
Automatically tear down the preview when the PR is closed

Without SURGE_TOKEN the workflow falls back to the downloadable artifact as before.

element-software · 2026-03-11T23:56:06Z

@copilot does Github not support preview deployments? I don't want to use a third party.

Copilot · 2026-03-11T23:57:28Z

@copilot does Github not support preview deployments? I don't want to use a third party.

GitHub doesn't natively support per-PR preview hosting. GitHub Pages only serves a single site from one configured branch/folder — each deploy replaces the previous one, so there's no built-in "isolated URL per PR" feature.

The closest GitHub-only option is deploying each PR preview to a subdirectory of the existing Pages site (e.g. https://cheapyellowdisplay.co.uk/pr-preview/123/). This works by committing the built output to a pr-previews/ folder on the gh-pages branch. I can implement this in the workflow if that would work for you — the trade-off is that old previews accumulate in the gh-pages branch until manually cleaned up, and relative asset paths in the Next.js export need to account for the subdirectory prefix.

Platforms that do offer this natively with GitHub integration (no manual setup):

Vercel — connects directly to GitHub, zero config
Netlify — same, free tier available
Cloudflare Pages — same, very generous free tier

If you'd like the GitHub Pages subdirectory approach, let me know and I'll update the workflow. Otherwise, connecting one of the platforms above to the repo would give you automatic previews with no workflow changes needed.

element-software · 2026-03-12T01:37:17Z

@copilot Remove the surge.sh implementation and the work flow update.

Copilot AI and others added 10 commits March 7, 2026 10:20

Initial plan

a9d5b63

Add threshold-based icon switching and dynamic threshold management f…

d7c024d

…or numeric sensors

Fix bugs found during code review: undefined in YAML, redundant if-ch…

e29687d

…eck, smart threshold step Co-authored-by: element-software <81567707+element-software@users.noreply.github.com>

Update config-generator/lib/yamlGenerator/numericSensors.ts

b3c9edf

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Sort thresholds descending before lambda generation; fix icon lambda …

7dae65d

…redundant if-check; 15 tests pass Co-authored-by: element-software <81567707+element-software@users.noreply.github.com>

hide icon and show only thresholds, minimum 2

0dd92d8

Merge pull request #26 from element-software/copilot/add-battery-icon…

bf6a233

…-thresholds Add threshold-based icon switching and dynamic threshold management for numeric sensors

added ability to change binary sensor icon and color

ee497e5

added ability to change switch/light icon and text colour for on off …

69aa008

…state

Initial plan

5b48a16

Copilot AI assigned Copilot and element-software Mar 11, 2026

Copilot started work on behalf of element-software March 11, 2026 14:26 View session

Copilot AI and others added 2 commits March 11, 2026 14:36

Add prayertimes.dev page with CYD screen preview matching mockup

0d90095

Co-authored-by: element-software <81567707+element-software@users.noreply.github.com>

Fix date separator (use /) and fallback div rotation in prayer times …

75db1d4

…preview Co-authored-by: element-software <81567707+element-software@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Update UI for prayertimes.dev to match mockup~~ Add prayertimes.dev landing page with CYD screen preview Mar 11, 2026

Copilot finished work on behalf of element-software March 11, 2026 14:42

element-software marked this pull request as ready for review March 11, 2026 15:01

Copilot AI review requested due to automatic review settings March 11, 2026 15:01

Copilot started reviewing on behalf of element-software March 11, 2026 15:02 View session

Copilot started work on behalf of element-software March 11, 2026 15:03 View session

Copilot AI reviewed Mar 11, 2026

View reviewed changes

Copilot finished work on behalf of element-software March 11, 2026 15:06

Copilot started work on behalf of element-software March 11, 2026 15:08 View session

Add PR preview build workflow that uploads static export artifact

66d793d

Co-authored-by: element-software <81567707+element-software@users.noreply.github.com>

Copilot AI changed the title ~~Add prayertimes.dev landing page with CYD screen preview~~ Add prayertimes.dev landing page with CYD screen preview and PR preview build workflow Mar 11, 2026

Copilot finished work on behalf of element-software March 11, 2026 15:12

Copilot started work on behalf of element-software March 11, 2026 15:13 View session

Add workflow_dispatch trigger to pr-preview workflow with optional pr…

0495c0c

…_number input Co-authored-by: element-software <81567707+element-software@users.noreply.github.com>

Copilot finished work on behalf of element-software March 11, 2026 15:17

Copilot started work on behalf of element-software March 11, 2026 15:35 View session

Update pr-preview workflow: deploy to Surge.sh for live preview URL, …

879d669

…artifact fallback, teardown on PR close Co-authored-by: element-software <81567707+element-software@users.noreply.github.com>

Copilot finished work on behalf of element-software March 11, 2026 15:41

Copilot started work on behalf of element-software March 11, 2026 23:56 View session

Copilot finished work on behalf of element-software March 11, 2026 23:58

element-software changed the base branch from main to prayertimes.dev March 12, 2026 14:42

element-software merged commit fbcb37b into prayertimes.dev Mar 12, 2026
1 check passed

element-software deleted the copilot/update-ui-prayertimes-dev branch March 12, 2026 14:43

	const progress = Math.min(1, Math.max(0, minutes / total));
	const progress =
	total > 0 ? Math.min(1, Math.max(0, minutes / total)) : 0;

Conversation

Copilot AI commented Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

New components

New page — /prayertimes

Navigation

PR preview build workflow — .github/workflows/pr-preview.yml

Screen preview

Uh oh!

element-software commented Mar 11, 2026

Uh oh!

Copilot AI commented Mar 11, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

element-software commented Mar 11, 2026

Uh oh!

Copilot AI commented Mar 11, 2026

Uh oh!

element-software commented Mar 11, 2026

Uh oh!

Copilot AI commented Mar 11, 2026

Uh oh!

github-actions bot commented Mar 11, 2026

🔍 PR Preview Build

Uh oh!

element-software commented Mar 11, 2026

Uh oh!

Copilot AI commented Mar 11, 2026

Uh oh!

element-software commented Mar 11, 2026

Uh oh!

Copilot AI commented Mar 11, 2026

Uh oh!

element-software commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Mar 11, 2026 •

edited

Loading

New page — `/prayertimes`

PR preview build workflow — `.github/workflows/pr-preview.yml`

element-software commented Mar 12, 2026 •

edited

Loading