WesternFriend.org Django Development

Development skill for Western Friend (westernfriend.org), a Quaker publication website providing resources and support for Quaker communities. Built with Django framework, Wagtail CMS, Tailwind CSS 4.x, and daisyUI 5.x.

Package Management

1. **Use `uv` for all package operations**, not `pip`:

- Install packages: `uv add <package-name>`

- Sync dependencies: `uv sync`

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

- Run tests: `python manage.py test <path-to-specific-test>`

Accessibility Standards

Follow W3C guidelines strictly:

1. **WCAG 2.1 Compliance**: Adhere to [W3C Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/)

2. **ARIA 1.1**: Implement [W3C Accessible Rich Internet Applications (ARIA) 1.1](https://www.w3.org/TR/wai-aria-1.1/)

3. **Requirements**:

- Use semantic HTML elements

- Add appropriate ARIA roles and attributes

- Ensure all interactive elements are keyboard accessible

- Test with screen readers

Semantic HTML Markup

Use semantic HTML5 elements for better accessibility and SEO:

**Structural Elements:**

**Content Elements:**

**Accessibility:**

CSS and Styling

Modern Stack

1. **Primary CSS Framework**: Tailwind CSS 4.x with daisyUI 5.x components

2. **Legacy CSS**: Bootstrap CSS exists in codebase but is being phased out - do not add new Bootstrap styles

3. **Before writing styles**: Use Context7 tool to fetch latest Tailwind CSS 4.x and daisyUI 5.x documentation

Global Styles

**Location**: `/theme/static_src/src/styles.css`

1. This is the main CSS entry point

2. Contains global styles for:

- Body styles

- Headings

- Links

- Site-wide styles

**Best Practices:**

Tailwind Prose for Rich Text

When using Wagtail's `richtext` filter:

1. Wrap content in `prose` class

2. This applies Tailwind typography styles automatically

3. Necessary because `richtext` filter generates uncontrollable HTML

**Example:**

```html

<div class="prose">

{{ content|richtext }}

</div>

```

Icons

**Bootstrap Icons** package is available:

1. Use icon classes: `bi bi-<icon-name>`

2. Maintain consistency across the project

3. Examples: `bi bi-person`, `bi bi-calendar`, `bi bi-envelope`

Development Workflow

1. **Package Changes**: Always use `uv add` or `uv sync`

2. **Testing**: Run `python manage.py test <path-to-test>` before committing

3. **New Features**: Ensure WCAG 2.1 and ARIA 1.1 compliance

4. **Styling**: Check `styles.css` first, use Tailwind/daisyUI, fetch latest docs with Context7

5. **HTML**: Use semantic elements with proper ARIA attributes

6. **Rich Text**: Always wrap in `prose` class

Examples

Semantic HTML Structure

```html

<header>

<nav>

<a href="/">Home</a>

</nav>

</header>

<main>

<article>

<h1>Article Title</h1>

<time datetime="2024-01-15">January 15, 2024</time>

<section>

<h2>Section Heading</h2>

<p>Content here...</p>

</section>

</article>

<aside>

<h2>Related Content</h2>

</aside>

</main>

<footer>

<address>

Contact: [email protected]

</address>

</footer>

```

Accessible Interactive Element

```html

<button

class="btn btn-primary"

aria-label="Submit form"

role="button"

tabindex="0">

<i class="bi bi-check-circle" aria-hidden="true"></i>

Submit

</button>

```