# hst

**Repository Path**: jay1/hst

## Basic Information

- **Project Name**: hst
- **Description**: 电气原件网站电气原件网站电气原件网站
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-28
- **Last Updated**: 2026-06-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HST Electrical — Static Site

English foreign-trade website for **Shanghai HST Electrical**, a low-voltage electrical distributor (circuit breakers, contactors, control components, enclosures). Built with **Astro 4** + **Tailwind CSS v4**.

Catalogue is sourced from the `quisure_scraper` project at `d:/banjie/quisure_scraper/output/` — 772 products, 14 categories, 1819 product images.

## Quick start

```sh
# install dependencies
pnpm install

# sync catalogue from scraper (run once, then again whenever scraper data changes)
node scripts/prepare-data.mjs

# dev server (http://localhost:4321)
pnpm dev

# production build (writes static files to ./dist)
pnpm build

# preview the production build locally
pnpm preview
```

## Pipeline overview

```
quisure_scraper/output/products_full.json  ──┐
quisure_scraper/output/images/<slug>/*.png ──┤
                                             ▼
                  scripts/prepare-data.mjs   ─── strips "Quisure"
                                             ─── renames slugs/images
                                             ─── infers brand
                                             ▼
              src/data/products.json + categories.json
              public/products/<slug>/*.png
                                             ▼
                       Astro SSG (853 pages)
                                             ▼
                          ./dist/  (deploy-ready)
```

## Page map

| Route | Description |
| --- | --- |
| `/` | Hero · category grid · featured products · solutions teaser · brand showcase |
| `/products` | Catalogue index (14 categories) with sidebar |
| `/products/[category]` | Filtered by top-level category |
| `/products/[category]/[subcategory]` | Filtered by subcategory |
| `/product/[slug]` | 772 SSG detail pages — gallery, key specs, full spec table, related |
| `/solutions` | Industry overview |
| `/solutions/[industry]` | 6 industry-specific pages (solar, wind, EV, telecom, T&D, rail) |
| `/brand/nader`, `/brand/siemens-apt` | Brand partner pages |
| `/about` | Company story |
| `/contact` | Form (mailto fallback — swap action for Formspree/Web3Forms in prod) |

## Project layout

```
hst/
├── astro.config.mjs
├── package.json
├── scripts/
│   └── prepare-data.mjs           # scraper → site data pipeline
├── public/
│   ├── favicon.svg
│   └── products/<slug>/*.png      # generated by prepare-data
└── src/
    ├── styles/globals.css         # Tailwind v4 + @theme tokens
    ├── data/
    │   ├── products.json          # generated
    │   ├── categories.json        # generated
    │   ├── products.ts            # typed accessor + helpers
    │   ├── site.ts                # company info, nav, featured models
    │   ├── solutions.ts           # 6 industry solutions
    │   └── brands.ts              # Nader + Siemens APT
    ├── layouts/BaseLayout.astro
    ├── components/
    │   ├── layout/{Header, Footer, Container}.astro
    │   ├── product/{ProductCard, ProductGrid, ProductGallery, CategorySidebar}.astro
    │   └── ui/Breadcrumb.astro
    └── pages/
        ├── index.astro
        ├── about.astro
        ├── contact.astro
        ├── products/...
        ├── product/[slug].astro
        ├── solutions/...
        └── brand/[brand].astro
```

## Design tokens

Defined in `src/styles/globals.css` with the Tailwind v4 `@theme` block.

| Token | Value | Where used |
| --- | --- | --- |
| `--color-primary-900` | `#0B3D91` | brand primary (deep tech blue) |
| `--color-primary-950` | `#082E6E` | hover / footer accents |
| `--color-accent-500` | `#F59E0B` | CTAs, highlights |
| `--color-ink` | `#0F172A` | footer background |
| `--font-display` | Manrope | headings |
| `--font-sans` | Inter | body |

Replace these to match the final brand guideline once the HST logo / colour set is supplied.

## Known follow-ups

1. **Logo** — `public/favicon.svg` is a temporary "H" mark. Drop in the real HST logo and update the `<Header>` / `<Footer>` SVG blocks.
2. **Contact form delivery** — uses `mailto:` fallback. For production use Formspree or Web3Forms by changing the `action` attribute in `src/pages/contact.astro`.
3. **Images** — sourced via scraping; for commercial use confirm rights or replace with original-manufacturer authorised media.
4. **Solutions / brand copy** — paraphrased, not copied verbatim from reference sites. Edit `src/data/solutions.ts` and `src/data/brands.ts` to refine.
5. **OG image** — `public/og-default.png` not present; either drop a 1200×630 image there or remove the meta tag.

## Deploy

The `dist/` directory after `pnpm build` is fully static and can be served from any of:

- Nginx / Apache (just upload the folder)
- GitHub Pages, Netlify, Vercel, Cloudflare Pages (point them at `dist/`)
- S3 + CloudFront

Total size with images ≈ **206 MB**.