docs: add contributing guide + update changelog

docs/docs/changelog.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 7
 toc_max_heading_level: 2
 ---
 
@@ -12,7 +12,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
-> Note: the style changes in this release mean that you may need to tweak any custom CSS or themes. The changes are based on the default theme.
+:::info
+
+Help wanted!
+
+This release has added rudimentary support for translating the plugin into other languages. If you'd like to help out, please see the [translation contribution guide](./contributing/translation).
+
+:::
+
+:::warning
+
+Note: the style changes in this release mean that you may need to tweak any custom CSS or themes. The changes are designed for the
+default Obsidian theme.
+
+:::
 
 ### Breaking changes
 
@@ -21,6 +34,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### ✨ Features
 
 - Rebuilt the task renderer from the ground up. This now resembles Todoist more closely and has improved the default styling.
+- Added support for translations in the plugin
 
 ## v1.13.0 (2024-04-10)
 

docs/docs/contributing/_category_.yml

@@ -0,0 +1,2 @@
+label: Contributing
+position: 6

docs/docs/contributing/general.md

@@ -0,0 +1,57 @@
+# General
+
+## Prerequisites
+
+This plugin is built using Typescript and React. You will need the following tools installed to build and run the plugin:
+
+- [`git`](https://git-scm.com/downloads)
+- [`npm`](https://nodejs.org/en/download/)
+
+Alternatively, if you use Nix, there is a flake and a `.envrc` to load the development environment for you. Simply run `direnv allow` to load the environment.
+
+## Building
+
+The plugin source is contained entirely within the `plugin` directory. To build the plugin:
+
+1. Run `cd plugin`
+2. Run `npm install` to pull down the required dependencies
+3. Run `npm run dev` to build the plugin.
+
+By default, this will build the plugin into `plugin/dist/`. You can manually copy the files an Obsidian vault for testing. For a smoother iteration cycle, you can tell the build process where it should place the output. The build process looks for the `VITE_OBSIDIAN_VAULT` environment variable to find a target vault.
+
+A simple way to configure this once is:
+
+1. Create a file at `plugin/.env.local`. This file is automatically loaded by the build script.
+2. Add a line to this file setting the environment variable. For example:
+
+   ```sh
+   export VITE_OBSIDIAN_VAULT=/Users/jamiebrynes/Documents/my-vault
+   ```
+
+## Running tests
+
+Its generally a good idea to write tests to ensure that the plugin's functionality is correct. The test suite is, at the time of writing, limited - but it can be useful for developing functionality against a set of tests. To run _all_ tests, from the `plugin` directory:
+
+```
+npm run test
+```
+
+Alternatively, to run a subset of tests, you can pass in a path to filter the tests ran:
+
+```
+npm run test ./src/utils
+```
+
+## Linting
+
+This plugin uses [BiomeJS](https://biomejs.dev/) to format and lint our Typescript. This ensures a consistent code style across the plugin. To check the formatting, from the `plugin` directory, run:
+
+```
+npm run lint:check
+```
+
+Biome can also format code to fix most issues. Note this will modify files on disk:
+
+```
+npm run lint:fix
+```

docs/docs/contributing/translation.md

@@ -0,0 +1,73 @@
+# Translations
+
+Before getting started, you should ensure you read the general [contribution guide](./code). This will ensure that you have a working build environment and are ready to go!
+
+## Architecture
+
+It can be useful to understand how the translation system works in this plugin. At startup, the plugin will set the language based on the `lang` attribute in the root `html` element. This ensures that it follows the language set in the general Obsidian settings. A consequence of this is that we are restricted to the [languages supported by Obsidian](https://github.com/obsidianmd/obsidian-translations#existing-languages).
+
+The translations are effectively a large key-value store. You can see all of the keys and the structure in `plugin/src/i18n/translations.ts`. The location of the translation phrase (or function) in the `Translations` type should give a suggestion as to where it is used. For example, `translations.settings.autoRefresh.header` refers to the header of the auto-refresh settings section.
+
+The plugin can consume the translations by calling the `t()` function exported from `i18n` to get the currently resolved translations. This object is marked as `readonly` so that it can't be modified. For example:
+
+```ts
+import { t } from "@/i18n";
+
+const i18n = t();
+
+const getSettingsHeader = () => {
+  return i18n.settings.general.header;
+};
+```
+
+If a language does not have a translation for a particular key, the plugin will fall back to the English translation.
+
+## Adding a new language
+
+There is a guide in `plugin/src/i18n/index.ts` that explains how to add a new language. This is repeated here for convenience:
+
+1. Identify the language code for the language you want to add. You can find this by searching for the language in the [Obsidian translations repo](https://github.com/obsidianmd/obsidian-translations).
+2. Create a file in the `plugin/src/i18n/langs` directory with language code as the filename. For example, if you were to add a translation for French, you would create `plugin/src/i18n/langs/fr.ts`.
+3. Copy the template below into the new file. Make sure to replace $langCode with the language code:
+
+   ```ts
+   import type { Translations } from "@/i18n/translation";
+   import type { DeepPartial } from "@/utils/types";
+
+   export const $langCode: DeepPartial<Translations> = {};
+   ```
+
+4. Register the language in the registry at the bottom of `plugin/src/i18n/index.ts`. The key should be the language code and the value should be the object exported in the previous step. You will need to add an import for the new file. For example:
+
+   ```ts
+   // plugin/src/i18n/index.ts
+   import { fr } from "@/i18n/langs/fr";
+
+   // A bunch of things you don't need to worry about...
+
+   const registry: Record<string, DeepPartial<Translations>> = {
+     fr: fr,
+   };
+   ```
+
+5. Proceed to [adding translated phrases](#adding-translated-phrases).
+
+## Adding translated phrases
+
+In order to add translated phrases, you will first need to identify the key for the phrase. The easiest way to do this is to search for the English phrase in the `plugin/src/i18n/langs/en.ts` file.
+
+For example, if I wanted to translate the phrase "Rendering" in the settings, I would search for "Rendering" in the `plugin/src/i18n/langs/en.ts` file. I would find that the key is `settings.rendering.header`.
+
+Then, open the file for the language you want to add the translation to. For example, if I wanted to add the translation to French, I would open `plugin/src/i18n/langs/fr.ts`. If the language doesn't exist, please see [the section above](#adding-a-new-language).
+
+Then I would ld add the translation to the object. You may need to create the object path if it doesn't exist. For example, let's assume that there were no translations for French, I would need to add the following structure:
+
+```ts
+export const fr: DeepPartial<Translations> = {
+  settings: {
+    rendering: {
+      header: "translation of 'Rendering'",
+    },
+  },
+};
+```