102 lines
3.5 KiB
Markdown
102 lines
3.5 KiB
Markdown
# Juozas Auto
|
|
|
|
Static Astro website for a small Lithuanian used-car seller at `auto.juozas.lt`.
|
|
|
|
## Commands
|
|
|
|
```sh
|
|
npm install
|
|
npm run dev
|
|
npm test
|
|
npm run build
|
|
npm run start
|
|
```
|
|
|
|
## Add A New Car
|
|
|
|
1. Create a folder for photos: `src/content/cars/_photos/<make-model-year-city>/`.
|
|
2. Add photos named `01.jpg`, `02.jpg`, and so on. Use real car photos, landscape crop preferred. Astro will generate optimized AVIF output during build.
|
|
3. Create `src/content/cars/<make-model-year-city>.md`.
|
|
4. Use lowercase ASCII slugs, for example `skoda-octavia-2020-siauliai.md`.
|
|
5. Add frontmatter matching `src/content/config.ts`, then write the Lithuanian description below it.
|
|
6. Run `npm run build` before publishing.
|
|
|
|
Example photo reference:
|
|
|
|
```yaml
|
|
photos:
|
|
- ./_photos/skoda-octavia-2020-siauliai/01.jpg
|
|
- ./_photos/skoda-octavia-2020-siauliai/02.jpg
|
|
```
|
|
|
|
## Mark A Car As Sold
|
|
|
|
Open the car markdown file and set:
|
|
|
|
```yaml
|
|
sold: true
|
|
```
|
|
|
|
Sold cars are hidden by default. To show a sold section on the homepage, set `showSoldCars: true` in `src/site.ts`.
|
|
|
|
## Meta Pixel
|
|
|
|
Set `PUBLIC_META_PIXEL_ID` in Coolify or Vercel environment variables. `META_PIXEL_ID` is also supported for build-time compatibility. Leave both empty locally if the pixel should not load.
|
|
|
|
Tracking setup:
|
|
|
|
1. `PageView` fires on every route with a unique `eventID` and page context.
|
|
2. Phone and WhatsApp buttons fire `Contact` with `content_name`, `content_ids`, `contact_channel`, `currency`, and `value` when listing data is available.
|
|
3. The sell-car form fires `Lead` on submit when a form endpoint is configured.
|
|
4. Events also push to `window.dataLayer` for future Google Tag Manager or debugging.
|
|
5. A `<noscript>` fallback is included for `PageView`.
|
|
|
|
For Meta Conversions API, set `PUBLIC_META_CAPI_ENDPOINT` to a separate server-side endpoint or worker. The browser sends CAPI-ready payloads with matching `event_id`, `_fbp`, `_fbc`, user agent, source URL, and custom data. Keep Meta access tokens server-side only. `src/pages/api/meta-capi.ts` is a static explanatory stub because this site intentionally builds as static output.
|
|
|
|
## Contact Form Endpoint
|
|
|
|
Set `PUBLIC_FORMSPREE_ENDPOINT` in Coolify or Vercel when the Formspree form is ready. Until then, the form is visible but disabled so visitors use phone or WhatsApp instead of submitting to a placeholder endpoint.
|
|
|
|
## Deploy To Coolify With Nixpacks
|
|
|
|
The repository includes `nixpacks.toml` for Coolify.
|
|
|
|
Coolify settings:
|
|
|
|
1. Build pack: Nixpacks.
|
|
2. Install command: handled by `nixpacks.toml` as `npm ci`.
|
|
3. Build command: handled by `nixpacks.toml` as `npm run build`.
|
|
4. Start command: handled by `nixpacks.toml` as `npm run start`.
|
|
5. Port: Coolify should provide `PORT`; the app falls back to `4321`.
|
|
|
|
Recommended Coolify environment variables:
|
|
|
|
```text
|
|
PUBLIC_META_PIXEL_ID=<your-pixel-id>
|
|
PUBLIC_META_CAPI_ENDPOINT=<optional-server-side-capi-endpoint>
|
|
PUBLIC_FORMSPREE_ENDPOINT=<optional-formspree-endpoint>
|
|
```
|
|
|
|
## Deploy To Vercel
|
|
|
|
1. Import the repository into Vercel.
|
|
2. Use the default framework detection for Astro.
|
|
3. Build command: `npm run build`.
|
|
4. Output directory: `dist`.
|
|
5. Add `PUBLIC_META_PIXEL_ID` if needed.
|
|
6. Deploy.
|
|
|
|
## Domain Setup
|
|
|
|
In Vercel, add `auto.juozas.lt` under Project Settings, Domains. Then point the DNS record for `auto.juozas.lt` to the value Vercel provides.
|
|
|
|
## Example Listings
|
|
|
|
The repository includes three sample listings:
|
|
|
|
- `bmw-320d-2018-vilnius`
|
|
- `vw-passat-2016-kaunas`
|
|
- `toyota-rav4-2020-vilnius`
|
|
|
|
Sample photos are Unsplash placeholders and should be replaced with real vehicle photography before launch.
|