1
0
Fork
You've already forked frontend
1
The web interface, the CLI, the common code like shared Vue components and the parser.
  • TypeScript 83.9%
  • Vue 14.9%
  • CSS 0.7%
  • Shell 0.2%
  • HTML 0.2%
  • Other 0.1%
Find a file
2026年01月22日 18:46:37 +01:00
cli pnpm: update root and cli with 'pnpm update' 2026年01月22日 17:31:41 +01:00
common ui: try making text smaller on small devices 2026年01月22日 18:45:14 +01:00
web train: fix priority mode and implement 2 shuffle modes 2026年01月22日 18:46:37 +01:00
.eslintrc.cjs eslint: move .eslintrc.cjs from web/ to . 2024年02月17日 19:43:16 +01:00
.gitignore pnpm: update root and cli with 'pnpm update' 2026年01月22日 17:31:41 +01:00
dev.sh pnpm: update root and cli with 'pnpm update' 2026年01月22日 17:31:41 +01:00
package.json npm: run pnpm update vitest 2025年06月22日 11:44:45 +02:00
pnpm-lock.yaml pnpm: update root and cli with 'pnpm update' 2026年01月22日 17:31:41 +01:00
pnpm-workspace.yaml build: save some old existing files 2025年06月21日 15:02:57 +02:00
README.md readme: improve cli package desc and conventions 2024年03月22日 00:10:22 +01:00
tsconfig.json ts: add root tsconfig.json with strict=false, fix useless ?? operator 2024年10月06日 00:56:33 +02:00

Frontend

This repository is a monorepos with everything related to the frontend part of Delibay (everything in JS/TS/Vue). This structure enables sharing common code like parsing logic, training Vue components, UI style, across the web interface, the vscode extension, the parser, ...

Structure

Here is the list of PNPM packages and their goal:

Folder Goal
common Common code shared to other packages. Shared Vue components like ExoShow.vue, the parser logic like exos.ts, the basic UI like ui.css and logic like browsing.ts
cli The CLI used to wrap parser logic for the backend and provide other actions to manage a Delibay course
web The web interface deployed on app.delibay.org

Conventions

  1. Every package is built with PNPM and has a build and test command. Running these commands in the root will run them in all packages.
  2. The common package is the only package used by other packages
  3. packages must be independant so reusing code MUST not be done directly by escaping the folder like import { something } from "../otherpackage/somefile.js"

Common code reuse

Components under common/components are styled with TailwindCSS and are built by the packages that use them. To configure these packages, this is not trivial, here is some notes for future setup.

In the VueJS entry point (generally main.ts), we import our own css and the builded common UI style.

import "./assets/main.css";
import "common/dist/ui.css";

In this case ./assets/main.css will contain the basic tailwind css as the common UI doesn't include it.

@tailwind base;
@tailwind components;
@tailwind utilities;
/** More custom style if needed */

This UI has to be built when files in common/ui/ have changed. Just use pnpm build or pnpm watch inside common.

As TailwindCSS classes used in our common components have to be picked by the package build, we still need to add this third line to tailwind.config.js to make it watch the correct vue files.

content: [
	"./index.html",
	"./src/**/*.{vue,js,ts,jsx,tsx}",
	"./node_modules/common/**/*.vue",
],