AGENTS.md

Static site for Dr. Shatrughan Dangi, built with Eleventy v3 (ESM, Liquid templates) and Pico CSS. No tests, no linter, no JavaScript app code.

Commands

npm install
npm start      # eleventy --serve on http://localhost:8080
npm run build  # writes _site/

node_modules/ and _site/ are generated and gitignored – never edit or commit them.

Where things live

Path	Notes
`index.md`	The whole home page. Uses the `no-title.html` layout because it renders its own `<h1>`.
`blog.md`	Article index; loops over `collections.post`.
`blog/*.md`	Posts. `blog/blog.json` applies the `base.html` layout and the `post` tag.
`_includes/partials/first-half.html`, `second-half.html`	`<head>`, nav and footer.
`_data/metadata.js`	Site-wide values, exposed to templates as `metadata.*`.
`assets/css/custom.css`	Overrides on top of `pico.pink.css`.
`eleventy.config.js`	Passthrough copies and the YouTube embed plugin.

Conventions

Body copy is Hindi in Devanagari. Use the text you are given verbatim – do not correct spelling, transliteration or punctuation unless asked.
Inline HTML inside the Markdown is load-bearing (grids, figures, buttons). Keep the existing indentation when editing a block.
Add a YouTube video by pasting a bare video URL on its own line; eleventy-plugin-embed-everything converts it.
Escape " as " inside HTML attributes, including alt.
Commit subjects follow Conventional Commits, e.g. feat(gallery): add ....

Adding a new image

All images live in assets/images/.

1. Name it with the next free number, e.g. 000040.jpeg after 000039.jpeg.

2. Optimize it to match the existing set: max 1280px on the long edge, progressive JPEG, quality ~72, metadata stripped. The largest photo in the repo is 846×1280 (000035.jpeg); most are 780×1040.

uv run --with pillow python -c "from PIL import Image; im = Image.open('photo.jpg').convert('RGB'); im.thumbnail((1280, 1280), Image.LANCZOS); im.save('assets/images/000040.jpeg', 'JPEG', quality=72, optimize=True, progressive=True, subsampling='4:2:0', dpi=(72, 72))"

Do not use sips for this – it re-encodes to a larger file than the source.

3. Add the figure in the ## Photo Gallery section of index.md. In the gallery's first column <div>, <figure> is indented 8 spaces and <img>/<figcaption> 12:

<figure>
    <img src="assets/images/000040.jpeg" alt="Same caption, with &quot;quotes&quot; escaped">
    <figcaption>Same caption</figcaption>
</figure>

Placement

The single <figure class="featured-photo"> block above the grid is the highlighted photo and stays at the top. Do not move, replace or remove it unless explicitly asked.
New photos go at the top of the grid – the first <figure>s inside <div class="grid photo-gallery"> → the first <div> – so they sit directly below the highlighted photo.
Photos are added one per <figure>; there is no automatic collection for them.

Sharing one caption across several photos

Keep the figures adjacent. Give the first a full <figcaption>, the rest an empty <figcaption></figcaption>, and every one of them the same alt text. That way the caption is visible exactly once:

<figure>
    <img src="assets/images/000040.jpeg" alt="Caption text">
    <figcaption>Caption text</figcaption>
</figure>
<figure>
    <img src="assets/images/000041.jpeg" alt="Caption text">
    <figcaption></figcaption>
</figure>