Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions .agents/prompts/deploy-me.mdc
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
alwaysApply: false
---

Solve the CI bugs, like lint, typecheck and tests.
You must not change the functionality — only change the code to make it compile. If there is a business logic problem, do not change it; ask the user what to do instead.

Run the same validation steps as `.github/workflows/pr.yml` (excluding build, package, and artifact upload):

```bash
npm ci
npm run lint
npm test
```

Fix every failure before finishing. Do not skip lint or tests.
85 changes: 83 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,83 @@
# grid-systems-overlay
Browser extension that overlays configurable column and row grids on any page.
<p align="center">
<img src="assets/readme/icon-128.png" width="128" height="128" alt="another-grid-plugin icon" />
</p>

<h1 align="center"><strong>another-grid-plugin</strong></h1>

<p align="center">
A browser extension that overlays configurable grid systems on any webpage.
</p>

<p align="center">
Inspired by the discipline and clarity of <em>Grid Systems in Graphic Design</em> by Josef Müller-Brockmann — structure, rhythm, and alignment without visual noise.
</p>

## Samples

Square grid overlay with the in-page controls:

<p align="center">
<img src="assets/readme/sample-grid.png" width="900" alt="Square grid overlay on a Swiss Grid editorial page" />
</p>

Column grid overlay:

<p align="center">
<img src="assets/readme/sample-vertical.png" width="900" alt="Vertical column grid overlay on a webpage" />
</p>

## Features

- **Column, row, and square grids** — switch layout type from the floating toolbar
- **Presets and versions** — built-in defaults plus per-site custom variations
- **Measurements** — count, size, margin, gutter, color, and opacity (simplified controls in square-grid mode)
- **Per-site memory** — patterns and settings persist for each hostname
- **Lightweight overlay** — draggable toolbar, minimal UI, no page takeover

## Install

### From source

```bash
git clone https://github.com/IvanCCO/another-grid-plugin.git
cd another-grid-plugin
npm install
npm run build
```

1. Open `chrome://extensions` (or `edge://extensions`)
2. Enable **Developer mode**
3. Click **Load unpacked**
4. Select the `dist/` folder

### From a release

Download `another-grid-plugin.zip` from the [latest GitHub release](https://github.com/IvanCCO/another-grid-plugin/releases), unzip it, and load the folder as an unpacked extension.

After code changes, run `npm run build` again, then reload the extension and refresh the page.

## Development

```bash
npm run test # unit tests
npm run lint # ESLint
npm run build # type-check, bundle, and copy assets → dist/
npm run watch # rebuild on file changes
npm run package:extension # zip dist/ for distribution
```

Pull requests run lint, tests, build, and packaging in GitHub Actions. See [CONTRIBUTING.md](./CONTRIBUTING.md) for commit conventions and release flow.

## Project structure

| Path | Role |
| --- | --- |
| `src/content.ts` | Overlay UI, settings, and messaging |
| `src/content/grid-render.ts` | Grid drawing (columns, rows, line grid) |
| `src/site-patterns.ts` | Per-site presets and variations |
| `public/content.css` | Overlay and popover styles |
| `dist/` | Built extension (load this in the browser) |

## License

See repository license terms.
Binary file added assets/readme/icon-128.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/readme/sample-grid.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/readme/sample-vertical.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion src/content.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import {
ensureAxisPattern,
getActivePattern,
getPatternsByKind,
getPatternsForAxis,
getSiteState,
getSiteStorageKey,
normalizeGridStorage,
Expand Down
2 changes: 1 addition & 1 deletion src/site-patterns.test.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { describe, expect, it } from 'vitest';
import { DEFAULT_SETTINGS, type GridAxis } from './utils';
import { DEFAULT_SETTINGS } from './utils';
import {
applyPatternSelection,
createVariation,
Expand Down
Loading