# Fancy Catalog

A dark, minimal **nginx fancy index** theme for directory listings. Clean typography, single-line rows, breadcrumb navigation, pagination, and optional per-folder Markdown notes.

Built for [nginx `http_autoindex_module` fancy index](http://nginx.org/en/docs/http/ngx_http_autoindex_module.html) (`fancyindex`).

## Preview

![Fancy Catalog — dark directory listing with breadcrumbs and file table](docs/screenshot.png)

- Fixed **dark** palette (warm charcoal + coral accent)
- **Catalog** header with current folder name and path trail
- Dense file table with type icons
- Sun / moon toggle (top right) for light and dark themes
- No search bar or copy-URL button — just browse

## Requirements

- nginx compiled with **fancy index** (`--with-http_fancyindex_module` or included in your build)
- Files served under a URL prefix (this theme assumes **`/fancy/`** — see [Customization](#customization))

## Quick start

### 1. Clone or copy

```bash
git clone https://github.com/AliRezaBeigy/fancy.git
```

Copy the repository contents to your web root, for example:

```text
/var/www/html/fancy/
├── header.html
├── footer.html
├── styles.css
├── sw.js
├── js/
│   └── catalog.js
└── vendor/
    ├── showdown.min.js
    └── purify.min.js
```

### 2. Configure nginx

Point `fancyindex_header` and `fancyindex_footer` at the theme files. See [`docs/nginx.example.conf`](docs/nginx.example.conf).

```nginx
fancyindex on;
fancyindex_header "/var/www/html/fancy/header.html";
fancyindex_footer "/var/www/html/fancy/footer.html";
```

Reload nginx:

```bash
sudo nginx -t && sudo nginx -s reload
```

### 3. Open a directory URL

Visit any directory on that server — the theme loads automatically.

## Optional Markdown per folder

If a listed directory contains these files, content is rendered in the page:

| File | Where it appears |
|------|------------------|
| `HEADER.md` | Banner above the folder title |
| `README.md` | Block below the file list |

Examples: [`docs/example-HEADER.md`](docs/example-HEADER.md), [`docs/example-README.md`](docs/example-README.md).

Copy them into any browsable folder and rename as needed. If the file is not in the listing (hidden or missing), the section is omitted.

Markdown is converted with [Showdown](https://github.com/showdownjs/showdown) and sanitized with [DOMPurify](https://github.com/cure53/DOMPurify).

## Project layout

```text
.
├── README.md                 # This file
├── header.html               # nginx fancyindex header (HTML start)
├── footer.html               # nginx fancyindex footer (scripts + HTML end)
├── styles.css                # Theme styles
├── sw.js                     # Service worker (caches static assets)
├── js/
│   └── catalog.js            # Breadcrumbs, pagination, layout
├── fonts/                    # Bundled typeface
│   ├── W95FA.otf             # Windows 95 system font (W95FA by Alina Sava, SIL OFL)
│   ├── w95fa.woff
│   ├── w95fa.woff2
│   └── OFL.txt               # License
├── vendor/                   # Third-party libraries (bundled)
│   ├── showdown.min.js
│   └── purify.min.js
└── docs/
    ├── nginx.example.conf    # Sample nginx snippet
    ├── example-HEADER.md
    └── example-README.md
```

## Customization

### Change the URL prefix

Paths in `header.html`, `footer.html`, and `sw.js` use `/fancy/`. If you install elsewhere (e.g. `/assets/theme/`), update:

- `header.html` — `<link rel="stylesheet" href="...">`
- `footer.html` — `<script src="...">` entries
- `sw.js` — `STATIC_ASSETS` array
- `js/catalog.js` — `navigator.serviceWorker.register('...')`

### Colors and typography

Edit CSS variables at the top of `styles.css`:

```css
:root {
    --paper: #0e0d0c;
    --surface: #1a1917;
    --accent: #e87a66;
    /* ... */
}
```

### Pagination

Default page size is **100** entries. Change `ITEMS_PER_PAGE` in `js/catalog.js`.

## Service worker

`sw.js` caches theme CSS/JS for faster repeat visits. It only affects theme assets, not directory listings. Bump `CACHE_NAME` in `sw.js` after you deploy style or script changes.

## Security

- `footer.html` sets a Content-Security-Policy in `header.html` (adjust if you add external scripts).
- Rendered Markdown is sanitized before insertion.

## Credits

- [W95FA](https://fontsarena.com/w95fa-by-alina-sava/) — Windows 95 system font by Alina Sava (SIL Open Font License)
- [Showdown](https://github.com/showdownjs/showdown) — Markdown
- [DOMPurify](https://github.com/cure53/DOMPurify) — HTML sanitization

## License

Add a `LICENSE` file for your preferred license (e.g. MIT) before publishing to GitHub.