Citizens are watching
HACKTOBERFEST 2023 🎉 - get a free limited-edition sticker on approved PR read more
Table of Content
- ⭐ Goal
- 🌎 Environments
- 🍱 Tech Stack
- 🪄 Useful Commands
- 🗃️ Directory Structure
- 🍭 Design System
- 💾 Data Models
- 🤝 Contributing Guideline
- 📜 License and Terms of Use
We want to record and visualise the Thai parliament information including politicians, assemblies, bills, voting processes, and promises.
This project can be seen as a renovated combination of They Work for Us, Law Watch, and Promise Tracker which aim to support several election era.
| Name | URL |
|---|---|
| Branch Preview | Provided by Cloudflare Pages |
| Staging (main branch) | https://parliament-watch.pages.dev |
| Production | - |
- Svelte + SvelteKit
- TypeScript
- Carbon Design System (v10) + Carbon Components Svelte
- TailwindCSS
- Histoire for the components documentation
- Yarn v1 as a package manager
- Husky and lint-staged will
- Lint (ESLint) and format (Prettier) code before commiting
- Validate that commit message is align with conventional commit using commitlint
- Run svelte-check before pushing
- For VSCode user, format on save is enabled and prettier-vscode extension will be recommended when open the project.
- Hygen for a code generation
- Cloudflare Pages will automatically deploy staging (main branch) and per branch preview.
Start the project in development mode
yarn devto see/develop custom components from Histoire's stories
yarn story:devFor a shared component
yarn gen:componentsrc/components/ComponentName/ directory will be created with the follwing files:
- ComponentName.svelte for the component source code.
- ComponentName.story.svelte for the Histoire's story file. Follow a guide on writing stories.
- /_templates Hygen's code generation templates
- /.husky Husky's git hooks
- /src main source codes
- /components Svelte's components
- /mocks Mock data, while we still don't have backend
- /models Main data structure defined with TypeScript interface
- /routes Sveltekit's routes
- /styles Stylesheets, including custom Carbon Design System, tailwind and fonts
- /static static assets such as logos
The project design system is based on Carbon Design System v10 with some modification. Custom theme is defined with scss in src/styles/carbon/. To reduce overhead on development, we compile Carbon related stylesheet into src/styles/carbon/precompiled.css with yarn compile:sass command.
- The utility classes is globally available as declared in typography.scss
- See Figma file
- tailwind.config.js define utility classes based on color function name according to the Carbon's theme (see Figma file)
- scss variable (need to be imported where you want to use)
- colors.scss define variable of all color palette (see Figma file)
- theme.scss define variable according to the carbom theme's color function name (see Figma file)
- Use Carbon Components Svelte
- We have custom shared component available in src/components/.
- To see shared components' story, open Histoire in local with
yarn story:devor browse it in the staging/stories - See all planned component in Figma file.
- To see shared components' story, open Histoire in local with
- If the component is not yet developed:
- If the component is used by only a specific route, create it in src/components/route-name-and-sub-route-if-exist/
- If the component is shared, run
yarn gen:componentto generate a new component. Don't forget to update a story file for the component documentation.
- Use Carbon Icons Svelte
- We have customed icon available in src/components/icons, using the same props as Carbon's icon. (Also avaiable in Histoire)
- See Figma file
ER Diagram and TypeScript's interfaces are avaiable in src/models
Please read CONTRIBUTING.md
Read more at WeVis's Terms of Use (in Thai)