# Writech Web-Doc

Static website for 深圳自然写科技 (Shenzhen Writech Technology Co., Ltd.) — built with Eleventy (11ty) and supporting multiple languages.

## Prerequisites

- Node.js 18+
- npm

## Setup

```bash
npm install
```

## Build

### Single locale

```bash
# Chinese
ELEVENTY_LOCALE=zh npx @11ty/eleventy

# English
ELEVENTY_LOCALE=en npx @11ty/eleventy
```

Output goes to `_site/`. Deploy the contents of `_site/` to your server.

### Using npm scripts (recommended)

```bash
npm run build:zh      # build Chinese → _site/
npm run build:en      # build English → _site/

npm run dev:zh           # Chinese dev server with hot reload
npm run dev:en           # English dev server with hot reload
```

you may edit package.json to add more dev/build commands

### Separate output directories

```bash
ELEVENTY_LOCALE=zh npx @11ty/eleventy --output=dist-zh
ELEVENTY_LOCALE=en npx @11ty/eleventy --output=dist-en
```

## Project Structure

```
src/
├── _data/
│   ├── locales.js             ← list of available languages
│   ├── locale.js              ← reads ELEVENTY_LOCALE env (default: "zh")
│   ├── site.js                ← merges site.zh.json + site.en.json
│   ├── site.zh.json           ← nav, hero, about, footer, brand rules, news summary
│   ├── site.en.json
│   ├── products.js            ← merges products.zh.json + products.en.json
│   ├── products.zh.json       ← 8 hardware products (array)
│   ├── products.en.json
│   ├── news.js                ← merges news.zh.json + news.en.json
│   ├── news.zh.json           ← 23 policy items in 3 categories
│   └── news.en.json
├── _includes/
│   ├── layouts/base.njk       ← master layout (<head>, CSS, JS)
│   ├── nav.njk                ← homepage navigation bar
│   ├── nav-news.njk           ← news page navigation bar
│   ├── footer.njk             ← footer with contact info
│   ├── product-card.njk       ← single product detail card
│   └── news-card.njk          ← single policy news card
├── css/style.css              ← all site styles (extracted from original inline CSS)
├── js/main.js                 ← mobile menu, scroll animations, back-to-top
├── index.njk                  → /index.html
├── product.njk                → /product/index.html
├── news.njk                   → /news/index.html
├── img/                       ← passthrough to _site/img/
├── product/img/               ← passthrough to _site/product/img/
└── News/img/                  ← passthrough to _site/News/img/
```

## How Templates Reference Data

Every page template gets a `locale` variable (set by `_data/locale.js` from the environment). Data files export `{ zh: ..., en: ... }`, so templates look up content dynamically:

```njk
<h1>{{ site[locale].hero.h1 }}</h1>
<p>{{ site[locale].hero.p | safe }}</p>

{% for product in products[locale] %}
  {% include "product-card.njk" %}
{% endfor %}
```

Use `| safe` filter when the data contains HTML tags (e.g. `<br>`, `<strong>`).

## Adding a New Language

To add Japanese as a third language:

### 1. Add the locale code

```js
// src/_data/locales.js
module.exports = ["zh", "en", "ja"];
```

### 2. Create data files

```
src/_data/
├── site.ja.json        ← translate from site.zh.json or site.en.json
├── products.ja.json    ← translate all 8 products
└── news.ja.json        ← translate 23 policy items (or set to empty categories)
```

### 3. Build

```bash
ELEVENTY_LOCALE=ja npx @11ty/eleventy --output=dist-ja
```

Deploy `dist-ja/` to your Japanese domain.

### Data file structure reference

**site.XX.json** — site metadata, navigation labels, hero text, download items, about section, footer content, brand rules, design rules, news hero/summary/trend text.

**products.XX.json** — array of 8 products, each with: `id`, `seq`, `name`, `enName`, `tableName`, `tableImage`, `tableEtymology`, `tableTag`, `intro`, `positioning`, `features[]`, `specs[]`, `images[]`, `installNote`, `hasSceneSection`.

**news.XX.json** — object with `categories[]`, each category having `title`, `tag`, `items[]`. Each item has: `seq`, `title`, `date`, `source`, `summary`, `url`, `poster`.

## Image Paths

All image paths in data files are absolute (start with `/`), e.g. `/product/img/Bink01.png`. This ensures images work correctly from any page regardless of URL depth.

## Existing Files

The original static files (`index.html`, `product/product.html`, `News/news.html`, `index.md`, `News/News-1.md`, `product/硬件商标.md`) are kept as reference and are not used by the Eleventy build. They can be removed once the new build is verified.

## Deployment

1. Build the desired locale: `npm run build:zh`
2. Copy `_site/` contents to your web server root
3. Repeat for other locales targeting different domains