mirror of
https://github.com/Lapikud/lapikud.github.io.git
synced 2026-08-08 17:49:15 +00:00
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:
37
README.md
37
README.md
@@ -1,6 +1,6 @@
|
||||
# Lapikud External Website
|
||||
|
||||

|
||||

|
||||

|
||||

|
||||
|
||||
@@ -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 **2–5 minutes**. You can watch it happen in the [Actions tab](https://github.com/Lapikud/lapikud.github.io/actions).
|
||||
It usually takes **2–5 minutes**. You can watch it happen in the [Actions tab](https://github.com/Lapikud/lapikud.github.io/actions).
|
||||
|
||||
Reference in New Issue
Block a user