sendou.ink/docs/dev/how-to.md

How to...

Guides on how to do different things when developing sendou.ink

Fix style/lint errors (Biome)

Run the npm run biome:fix command. Also you might want to set up Biome as an extension to your IDE and run automatically when you save a file.

Add a new database migration

1. Add a new file to the migrations folder incrementing the last used number by one e.g. 011-my-cool-feature.js. Note: there is no script to do this.
2. Take this file as a base and fill it out with your migration:

export function up(db) {
	db.transaction(() => {
		// your migrations go here
	})();
}

Note: No need to implement the "down" migration

3. Update the typings in app/db/tables.ts
4. Run npm run migrate up to apply your migration
5. Set env var DB_PATH=db-test.sqlite3 in .env file & run the npm run migrate up command again to update the database used in unit tests

Add a new translation string

1. Decide on where the translation should go. Either common.json which is available in every route by default or a feature specific one such as builds.json
2. Add the translation string to the json with some descriptive key
3. Access in code via the useTranslation hook

// common.json
{
  ...
  "my-cool.translation": "Translated"
  ...
}

// CoolComponent.tsx
export function CoolComponent() {
  const { t } = useTranslation(["common"]);

  return (
    <div>{t("common:my-cool.translation")}</div>
  )
}

When utilizing feature specific translations ensure the json is loaded. This is handled via the handle Remix function.

Sync

Use the npm run i18n:sync command to sync translation jsons with English (removing and adding keys for each language as needed). There is not currently a check in the pipeline that this was done but it should always be ran when a new translation string has been added or removed.