GitHub Copilot Static Site Builder

Instructions for AI coding agents to assist with the Siddha Durga Puja website project, a static site built with HTML, Tailwind CSS, and vanilla JavaScript.

Project Overview

This is a static website with no build step or server-side components. All pages are standalone HTML files with Tailwind CSS utilities and vanilla JavaScript for interactivity.

Project Structure

Follow this exact file organization:

**Root directory**: All `.html` pages (e.g., `index.html`, `about.html`, `gallery.html`)

**`assets/css/`**: `styles.css` for custom styles and Tailwind overrides

**`assets/js/`**: JavaScript modules

- `main.js` - Shared navigation, sliders, common utilities

- `nirghantan.js` - Glossary functionality

- `gallery.js` - Gallery and lightbox logic

**`assets/news.json`**: News data for dynamic content

**`assets/images/`**: All images, icons, and PDFs

Core Principles

1. Static-Only Architecture

NEVER add build tools (Node.js, webpack, bundlers)

NEVER add server-side code (PHP, Node.js, Python backends)

NEVER introduce frameworks (React, Vue, Angular)

All files must be viewable directly in a browser

2. Styling Approach

PRIMARY: Use Tailwind CSS utility classes directly in HTML

SECONDARY: Add custom styles to `assets/css/styles.css` only for overrides or project-specific customizations

NEVER inline styles unless absolutely necessary for dynamic JS-driven changes

3. JavaScript Guidelines

Keep JavaScript modular and page-specific

Shared logic goes in `main.js`

Page-specific logic goes in dedicated files (e.g., `gallery.js`, `nirghantan.js`)

Use vanilla JavaScript only - no jQuery or other libraries

Reference local JSON files for data (e.g., `assets/news.json`)

4. Asset Management

All images referenced via relative paths: `assets/images/filename.ext`

NEVER use absolute URLs for local assets

Place all media in appropriate `assets/` subfolders

Step-by-Step Instructions

Adding a New Page

1. Copy an existing HTML file as a template (e.g., `index.html`)

2. Update the page title in `<title>` tag

3. Modify the main content area between navigation and footer

4. Update navigation links in all HTML files to include the new page

5. Add any page-specific JavaScript in `assets/js/` and link in the HTML `<head>` or before `</body>`

Adding News/Events

1. Open `assets/news.json`

2. Add new entry following the existing JSON structure

3. Update the relevant HTML file that displays news (if not dynamically loaded)

Adding Gallery Images

1. Place image in `assets/images/`

2. Open `gallery.html`

3. Add new image reference following the existing gallery item pattern

4. Ensure `gallery.js` handles the new item (if using lightbox)

Modifying Navigation

1. Locate the `<nav>` element in the HTML file

2. Update links or add new menu items

3. **IMPORTANT**: Duplicate changes across ALL `.html` files (navigation is not shared via includes)

Changing Color Scheme

1. Open `assets/css/styles.css`

2. Update CSS custom properties or Tailwind configuration overrides

3. For Tailwind colors, use utility classes directly in HTML

Adding Custom Styles

1. Open `assets/css/styles.css`

2. Add new rules with descriptive class names

3. Reference classes in HTML elements

Development Workflow

Preview Changes

Open any `.html` file directly in a web browser

OR use a live server extension (e.g., VS Code Live Server)

No compilation or build step required

Testing

Manually test in browser

No automated testing framework is present or required

Check responsive design at multiple screen widths

Version Control

Commit changes to HTML, CSS, JS, and asset files

No `.gitignore` needed for build artifacts (there are none)

Common Tasks

Update Event Information

```

1. Edit assets/news.json

2. Refresh page in browser

3. Verify display in news section

```

Add Interactive Feature

```

1. Create new JS file in assets/js/

2. Link script in relevant HTML file

3. Implement feature using vanilla JS

4. Test interactivity in browser

```

Modify Layout

```

1. Locate relevant HTML file

2. Adjust Tailwind utility classes

3. Add custom CSS to styles.css if needed

4. Refresh browser to verify

```

Constraints

Prohibited Actions

❌ Adding package.json or npm dependencies

❌ Introducing React, Vue, or any JS framework

❌ Adding server-side rendering or API endpoints

❌ Using absolute URLs for local assets

❌ Creating a build/compilation pipeline

❌ Adding CSS preprocessors (Sass, Less)

Allowed Practices

✅ Using Tailwind CSS utility classes

✅ Writing vanilla JavaScript

✅ Adding custom CSS to styles.css

✅ Using local JSON files for data

✅ Organizing code in modular JS files

✅ Using CDN links for external libraries (Tailwind, fonts)

Examples

Adding a Glossary Term

```javascript

// In nirghantan.js or data file

{

"term": "Durga",

"definition": "Hindu goddess...",

"category": "deity"

}

```

Adding a Gallery Image

```html

</div>

```

Custom Style Override

```css

/* In assets/css/styles.css */

.custom-heading {

color: #8B0000;

font-family: 'Your Custom Font', serif;

}

```

Reference

For detailed file purposes and additional customization options, refer to the project's `README.md` file.

GitHub Copilot Static Site Builder

GitHub Copilot Static Site Builder

Project Overview

Project Structure

Core Principles

1. Static-Only Architecture

2. Styling Approach

3. JavaScript Guidelines

4. Asset Management

Step-by-Step Instructions

Adding a New Page

Adding News/Events

Adding Gallery Images

Modifying Navigation

Changing Color Scheme

Adding Custom Styles

Development Workflow

Preview Changes

Testing

Version Control

Common Tasks

Update Event Information

Add Interactive Feature

Modify Layout

Constraints

Prohibited Actions

Allowed Practices

Examples

Adding a Glossary Term

Adding a Gallery Image

Custom Style Override

Reference

Reviews (0)