Pixel Agency Knowledge Bundle
Bundle OKF 0.1 · 5 conceitos · bennythemink/pixel-agency-website
Open source Repository Open in the app JSON README (API)
About
# Pixel Agency Knowledge Bundle
An [Open Knowledge Format](https://github.com/GoogleCloudPlatform/knowledge-catalog/blob/main/okf/SPEC.md) (v0.1) bundle
describing Pixel Agency's services, case studies, and published insights, intended for consumption by internal tooling
and AI systems (including a future WebMCP server for this site).
# Sections
* [Company](/company/index.md) - Who Pixel Agency is and how to contact us.
* [Services](/services/index.md) - The services Pixel Agency offers.
* [Products](/products/index.md) - Pixel Agency's own products.
* [Case Studies](/case-studies/index.md) - Published client case studies.
* [Insights](/insights/index.md) - Published articles on discovery, delivery, and AI.
Details
- Kind
- OKF bundles
- Topic
- Version control
- Publisher
- bennythemink
- Origin
- okf_github
- Category
- dados
- Version
- 0.1
- Last push
- 2026-09-08T11:33:21Z
- Repository state
- ativo
- Language
- Astro
- Added
- 2026-09-08 16:07:08
- Updated
- 2026-09-08 16:07:08
- Origin id
bennythemink/pixel-agency-website:src/data/okf/index.md
README
# Pixel Agency Website
This project is the Pixel Agency website — [pixelagency.com.au](https://www.pixelagency.com.au).
Built with Astro, deployed on Vercel. For a fuller tour of the codebase - content systems,
colour tokens, routing conventions, the flow-field background - see [CLAUDE.md](./CLAUDE.md).
## Integrations
This project includes the following dependencies as NPM packages:
- [GSAP](https://www.npmjs.com/package/gsap) (GreenSock Animation Platform)
- [Lenis](https://www.npmjs.com/package/@studio-freight/lenis) (Smooth scrolling)
- [Tailwindcss](https://www.npmjs.com/package/tailwindcss) (Utility-first CSS framework, integrated with Astro)
All are installed locally and not via CDN.
## 🚀 Project Structure
```text
/
├── public/ # Served as-is: favicons, client logos, robots.txt
├── src/
│ ├── assets/ # Images processed at build (case studies, services)
│ ├── components/ # Astro components, grouped by area
│ ├── config/ # colours.ts (brand palette), site.ts (contact constants)
│ ├── data/ # caseStudies.ts, insights.ts, and the okf/ knowledge bundle
│ ├── layouts/ # Layout.astro - SEO, fonts, analytics, menu, footer
│ ├── pages/ # File-based routes
│ ├── scripts/ # flow-field.ts - animated canvas background
│ ├── styles/ # global.css - CSS custom properties + Tailwind base
│ └── types/
├── astro.config.mjs # Site URL, trailingSlash, fonts, sitemap, Partytown
├── vercel.json # Domain redirects + trailing-slash policy
└── package.json
```
[CLAUDE.md](./CLAUDE.md) documents this in more detail, including the path aliases
(`@components`, `@data`, `@layouts`, ...) and the content systems.
## 🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :------------------------ | :----------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:4321` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI |
## 👀 Want to learn more?
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
## Project Specific Information
| Weight | Name |
| :----- | :--------------- |
| 100 | Thin |
| 200 | Extralight |
| 300 | Light |
| 400 | Regular (normal) |
| 500 | Medium |
| 600 | Semibold |
| 700 | Bold |
| 800 | Extrabold |
| 900 | Black |
Tailwind utility classes follow the same naming: font-thin, font-extralight, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, font-black.
## Case Study Images
The individual case study pages have a number of images. Each image type has its own aspect ratio, as shown in the table below. When creating images for these, ensure that you crop them using the below ratios for best results.
| Prop | Container aspect | Crop to | Use. |
| -------------- | ---------------- | -------- | ------------ |
| `heroImage` | `aspect-video` | **16:9** | 1st row |
| `squareImages` | `aspect-square` | **1:1** | 2nd row |
| `wideImages` | `aspect-16/7` | **16:7** | Other rows |
| `tile` | `aspect-square` | **1:1** | Listing page |
## Publishing Case Studies
For SEO purposes not all case studies are published on site launch. It is better to keep an active site so it is planned on launching one case study per month. These are the steps you must take to do so:
1. Move the case study to publish from the 'pages/case-studies/private' folder into its parent folder.
2. Open the case study page and remove the 'published={false}' from the Layout component.
3. Open the 'caseStudies.ts' file, find the case study in the caseStudies array, change its 'published' property to true.
4. Commit on a new branch, open a pull request, and merge it. Do not commit directly to `main`.
## Moving To Production
Make sure you update the robots.txt file! In the public directory, open the robots.txt file and change the line `Disallow: /` to `Allow: /`
## Troubleshooting
### `npm run build` completes with "0 page(s) built" and an empty `dist/`
**Symptom:** `astro build` finishes with no errors, but `dist/` only contains copied static assets and a generated sitemap — no `index.html`, no route pages at all. The log ends with something like:
```
[build] 0 page(s) built in 2.25s
[build] Complete!
```
**Cause:** `package.json` has a top-level `overrides.vite` entry that pins Vite to a specific version. Astro has its own hard (non-peer) dependency on a specific Vite major version. If the override pins Vite to a version older than what the installed Astro version requires, `npm install` still succeeds and `astro build` still runs, but the prerender step silently fails partway through instead of throwing — leaving a half-finished `dist/.prerender/` directory of unconsumed SSR chunk modules and zero rendered pages.
This most often happens after upgrading (or reverting) Astro without also updating the `overrides.vite` entry to match — a stale override is easy to miss because `npm install` and `npm ls` don't flag it as broken, and the build doesn't throw.
**Fix:**
1. Check what Vite version the installed Astro actually requires:
```
cat node_modules/astro/package.json | grep '"vite"'
```
2. Update `overrides.vite` in `package.json` to match that version (not an arbitrary older pin).
3. Reinstall clean and clear stale build output:
```
rm -rf node_modules package-lock.json dist .astro
npm install
```
4. Confirm there's a single deduplicated Vite version across the tree:
```
npm ls vite
```
5. Rebuild and confirm the page count matches the number of routes under `src/pages/`:
```
npm run build
```
6. Optionally, reproduce Vercel's exact build pipeline locally before deploying:
```
npx vercel build
```