docs(readme): document Vue setup and project structure

Replace the Svelte badge and stale runtime references with the Vue 3 toolchain, current Node requirement, and reproducible npm ci installation path.

Tell the contributor story from entry point to page: explain how App.vue, the custom router, bilingual routes, shared components, locale JSON, YAML content, public assets, and Vue Storybook fit together, then list the commands used for local development and verification.

Update the component guide for Vue props, slots, layout primitives, Svg.vue variants, and Storybook controls so contributors can find the right abstraction before adding route-specific markup.
This commit is contained in:
topsinoty
2026-07-04 15:55:55 +03:00
parent e5fc209203
commit 3f85860f83
2 changed files with 38 additions and 11 deletions

View File

@@ -1,6 +1,6 @@
# Lapikud External Website
![Built with Svelte](https://img.shields.io/badge/Svelte-5-FF3E00?logo=svelte&logoColor=white)
![Built with Vue](https://img.shields.io/badge/Vue-3-42B883?logo=vuedotjs&logoColor=white)
![Built with Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=white)
![Deployed on GitHub Pages](https://img.shields.io/badge/Deployed-GitHub%20Pages-222?logo=github)
@@ -28,7 +28,7 @@ Found a bug, typo, or something missing? [Open an issue](https://github.com/Lapi
### What you need first
- [Node.js](https://nodejs.org/) — v18 or higher, but grab the **LTS version** (currently v24) to be safe
- [Node.js](https://nodejs.org/) — v20.19 or higher; use the current **LTS version** when possible
> Node.js comes with `npm` included, so you don't need to install that separately.
@@ -77,10 +77,10 @@ git clone https://github.com/Lapikud/lapikud.github.io.git
cd lapikud.github.io
```
**2. Install dependencies** — this installs all the packages the project needs:
**2. Install dependencies** — this installs the exact package versions recorded by the project:
```bash
npm install
npm ci
```
**3. Optimise images** — the optimised image variants are not stored in the repo, so you need to generate them locally before running the site:
@@ -101,6 +101,33 @@ Then open the URL it gives you (usually `http://localhost:5173`) in your browser
---
## 🧭 How the project fits together
The site is a Vue 3 single-page application built with Vite. Vue starts in `src/main.js`, which mounts `src/App.vue`. The app keeps its intentionally small custom router and translation system rather than introducing larger framework plugins.
- `src/routes/` contains the page components and the bilingual public route table.
- `src/components/` contains reusable UI building blocks; layout primitives live in `src/components/layout/`.
- `src/layout/` contains the site-wide navigation and footer.
- `src/lib/` contains routing, translations, image-path helpers, and the shared YAML loader.
- `src/lib/locales/{est,en}/` contains escaped JSON translation data for each language.
- `public/_data/` contains editable YAML for members, mentors, workshops, projects, partners, and pricing.
- `public/assets/` contains source assets; generated image variants remain ignored.
- `.storybook/` and `src/stories/` provide isolated Vue component previews.
Page components use Vue's `<script setup>` syntax and Composition API primitives such as `ref` and `computed`. Use `usePageText("PageName")` for page translations, `loadYaml(path, fallback)` for YAML-backed content, and the exported `navigate()` helper for programmatic internal navigation.
Useful commands:
```bash
npm run dev # start the local site
npm run build # create a production build
npm run storybook # preview components in Storybook
npm run build-storybook # verify the static Storybook build
npm run optimise # regenerate local image variants
```
---
## 🖼️ Adding images
Place your original image files (PNG, JPG, etc.) into the appropriate `public/assets/{category}/original/` folder, then run:
@@ -119,4 +146,4 @@ The script will generate optimised WebP and JPG variants automatically. **Do not
Nothing to do here — GitHub automatically builds and deploys the site whenever something is pushed to the `v2` branch. The optimised images are generated as part of the build, so you don't need to worry about that either.
It usually takes **25 minutes**. You can watch it happen in the [Actions tab](https://github.com/Lapikud/lapikud.github.io/actions).
It usually takes **25 minutes**. You can watch it happen in the [Actions tab](https://github.com/Lapikud/lapikud.github.io/actions).