Western Friend Copilot Instructions

Development guidelines for the Western Friend (westernfriend.org) website - a Quaker publication providing resources and support for Quaker communities.

Package Management

**Always use `uv` for package management, never `pip`:**

```bash

Install a package

uv add <package-name>

Sync dependencies

uv sync

```

Testing

**Use Django's test framework, not `unittest` or `pytest`:**

```bash

Run specific tests

python manage.py test <path-to-specific-test>

```

Code Style Guidelines

Accessibility Standards

Follow [WCAG 2.1](https://www.w3.org/TR/WCAG21/) and [ARIA 1.1](https://www.w3.org/TR/wai-aria-1.1/) specifications:

Semantic HTML Markup

Use semantic HTML elements instead of generic divs:

```html

<!-- ✅ Good -->

<header>...</header>

<nav>...</nav>

<main>...</main>

<section>...</section>

<article>...</article>

<aside>...</aside>

<footer>...</footer>

<!-- ❌ Bad -->

<div class="header">...</div>

<div class="nav">...</div>

```

**Additional semantic elements:**

**Accessibility reminder:** Ensure all interactive elements work with keyboard navigation and screen readers.

CSS Styling

**Use Tailwind CSS 4.x with daisyUI 5.x components.** Legacy Bootstrap CSS is being phased out.

**Before writing styles:**

Use the Context7 tool to fetch the latest Tailwind CSS 4.x and daisyUI 5.x style rules to ensure up-to-date conventions.

**Global styles:**

Define global styles in `/theme/static_src/src/styles.css`. This file is the main CSS entry point and should contain:

**Avoid duplicating global styles in components.** If an equivalent style exists in `styles.css`, reference it instead of creating local classes.

Tailwind Prose Class

**For Wagtail `richtext` content:**

Wrap richtext-rendered HTML in the `prose` class:

```html

<div class="prose">

{{ page.body|richtext }}

</div>

```

The `prose` class applies Tailwind typography styles to HTML generated by Wagtail's richtext filter, which cannot be manually styled.

UI Icons

**Bootstrap Icons are available project-wide:**

```html

<i class="bi bi-heart-fill"></i>

<i class="bi bi-star"></i>

```

Use icon classes consistently across the project with the pattern: `bi bi-<icon-name>`.

Project Context

Western Friend is part of the Religious Society of Friends (Quakers). The website serves as a resource hub for Quaker communities and individuals living out their faith.