Skip to content

Randomize homepage “Free and open source” quote with client-side quote pool#1170

Open
Copilot wants to merge 3 commits into
mainfrom
copilot/randomise-free-and-open-source-quote
Open

Randomize homepage “Free and open source” quote with client-side quote pool#1170
Copilot wants to merge 3 commits into
mainfrom
copilot/randomise-free-and-open-source-quote

Conversation

Copilot AI commented Jun 2, 2026

Copy link
Copy Markdown
Contributor

The homepage “Free and open source” section currently renders a single static statement. This change introduces a small curated quote pool and rotates the displayed quote per visit while preserving the existing layout and interaction model.

  • Component behavior update (FreeAndOpenSourceAside.astro)

    • Replaced the single static line with an in-code pool of 5 short Aspire positioning quotes.
    • Added an inline client script to select a random quote at runtime so different visits can see different copy.
    • Kept the DOM structure/styling of the section intact (title + one paragraph).
  • Accessibility hardening

    • Added aria-live="polite" to the quote paragraph so assistive tech can announce updated text appropriately.
    • Switched to a stable selector (document.querySelector('[data-random-aspire-quote]')) for quote target lookup.
  • Focused test updates (custom-components.vitest.test.ts)

    • Updated existing FreeAndOpenSourceAside coverage to assert localized title rendering.
    • Added targeted assertions that the randomization hook and quote pool are emitted in rendered output.
<p data-random-aspire-quote aria-live="polite">{aspireQuotes[0]}</p>

<script is:inline define:vars={{ aspireQuotes }}>
  const quotes = aspireQuotes;
  const quoteElement = document.querySelector('[data-random-aspire-quote]');
  if (quoteElement instanceof HTMLElement) {
    quoteElement.textContent = quotes[Math.floor(Math.random() * quotes.length)];
  }
</script>

Copilot AI linked an issue Jun 2, 2026 that may be closed by this pull request
Copilot AI and others added 2 commits June 2, 2026 03:06
Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com>
Co-authored-by: IEvangelist <7679720+IEvangelist@users.noreply.github.com>
Copilot AI changed the title [WIP] Update 'free and open source' section with randomised quotes Randomize homepage “Free and open source” quote with client-side quote pool Jun 2, 2026
Copilot AI requested a review from IEvangelist June 2, 2026 03:13
@IEvangelist IEvangelist marked this pull request as ready for review June 30, 2026 08:38
Copilot AI review requested due to automatic review settings June 30, 2026 08:38

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

This PR updates the homepage “Free and open source” aside to display a randomized positioning quote on each visit, and extends unit coverage to validate the emitted quote pool and client-side randomization hook.

Changes:

  • Replace the single localized body line in FreeAndOpenSourceAside with a small in-code quote pool and inline client-side randomization.
  • Add aria-live="polite" and a stable data attribute hook for updating the quote text.
  • Update unit tests to reflect the new rendering and to assert the randomization script/pool are present.

Reviewed changes

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

File Description
src/frontend/src/components/FreeAndOpenSourceAside.astro Introduces the quote pool and inline script to randomize the displayed quote.
src/frontend/tests/unit/custom-components.vitest.test.ts Updates render coverage and adds assertions for the new quote randomization output.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines 2 to 4
/**
* This aside component displays a localized "Free & Open Source" message.
*/
Comment on lines +5 to +16
const aspireQuotes = [
'Aspire is the cloud-native app model for .NET.',
'Aspire is orchestration for your distributed app stack.',
'Aspire is local-first developer tooling for cloud-native apps.',
'Aspire is built for observable, production-ready app development.',
'Aspire is open source from app model to deployment artifacts.',
];
---

<div class="free-open-source-aside">
<p class="aside-title">{Astro.locals.t('landing.freeAndOSS')}</p>
<p>
{Astro.locals.t('landing.aspirePromise')}
</p>
<p data-random-aspire-quote aria-live="polite">{aspireQuotes[0]}</p>
Comment on lines +20 to +26
const quotes = aspireQuotes;
const quoteElement = document.querySelector('[data-random-aspire-quote]');

if (quoteElement instanceof HTMLElement) {
const quoteIndex = Math.floor(Math.random() * quotes.length);
quoteElement.textContent = quotes[quoteIndex];
}
Comment on lines +648 to +652
expect(html).toContain('data-random-aspire-quote');
expect(html).toContain('Math.floor(Math.random() * quotes.length)');
expect(html).toContain('Aspire is the cloud-native app model for .NET.');
expect(html).toContain('Aspire is open source from app model to deployment artifacts.');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Randomise "free and open source" quote

3 participants