Juozas Auto

Static Astro website for a small Lithuanian used-car seller at auto.juozas.lt.

Commands

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:

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:

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:

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.