Update translation URL and add frontend docs

README.md

@@ -6,36 +6,26 @@
 Align your schedules to find the perfect time that works for everyone.
 Licensed under the GNU GPLv3.
 
-## Contributing
-
 ### ⭐️ Bugs or feature requests
 
 If you find any bugs or have a feature request, please create an issue by <a href="https://github.com/GRA0007/crab.fit/issues/new/choose">clicking here</a>.
 
 ### 🌐 Translations
 
-If you speak a language other than English and you want to help translate Crab Fit, fill out this form: https://forms.gle/azz1yGqhpLUka45S9
+https://explore.transifex.com/crab-fit/crab-fit/
 
-### Pull requests
+If you speak a language other than English and you want to help translate Crab Fit, visit Transifex using the link above and click "Join this project".
 
-If you see an issue you want to fix, or want to implement a feature you think would be useful, please feel free to open a pull request with your changes. If you can, please open an issue about the bug or feature you want to work on before starting your PR, to prevent work duplication and give others a chance to improve your idea.
+For more information on how to translate, visit the [translating wiki page](https://github.com/GRA0007/crab.fit/wiki/Translating).
 
-## Setup
+---
 
-1. Clone the repo and ensure you have `node`, `yarn` and `rust` installed on your machine.
+## Self-hosting
-2. Run `yarn` in `frontend` folder to install dependencies, then `yarn dev` to start the dev server.
-3. Run `cargo run` in the `api` folder to start the API.
 
-### 🔌 Browser extension
+Crab Fit is fully open-source, and you can get your own version running by following the [self-hosting guide](https://github.com/GRA0007/crab.fit/wiki/Self%E2%80%90hosting).
 
-The browser extension in `browser-extension` can be tested by first running the frontend, and changing the iframe url in the extension's `popup.html` to match the local Crab Fit. Then it can be loaded as an unpacked extension in Chrome to test.
+## Contributing
 
-## Deploy
+Visit the wiki page for [local development](https://github.com/GRA0007/crab.fit/wiki/Local-Development) to get Crab Fit running locally.
 
-Deployments are managed with GitHub Workflows. The frontend is deployed using Vercel, and the API uses Fly.io.
+Want to contribute to a pull request? Make sure you read the wiki page on [pull requests](https://github.com/GRA0007/crab.fit/wiki/Pull-Requests) first.
-
-More detailed instructions on setting up your own deployment are coming soon.
-
-### 🔌 Browser extension
-
-Compress everything inside the `browser-extension` folder and use that zip to deploy using Chrome web store and Mozilla Add-on store.

frontend/README.md

@@ -0,0 +1,21 @@
+# Crab Fit Frontend
+
+This is the frontend for Crab Fit, written in TypeScript and SCSS, using Next.js app router.
+
+## Environment
+
+Default environment variables are provided in `.env.local`. This should work out of the box while developing with the API. To change or add variables, create a `.env` file which will override any values in `.env.local`.
+
+## Using VSCode
+
+If you're using VSCode to edit the frontend, be sure to open the `frontend` folder specifically as your workspace, so you can select the workspace typescript version. This will give you type safety for css modules using the [typescript-plugin-css-modules](https://github.com/mrmckeb/typescript-plugin-css-modules) package.
+
+## Translations
+
+Translation files are located in `frontend/src/i18n/locales`. If you need to add any new strings, make sure you only edit the resources in the `en` folder. Any changes to the other languages including translation of new strings and deletion of removed strings are handled by Transifex.
+
+## Temporal API
+
+Crab Fit uses the new Temporal API for all date/time calculations and comparisons. Because this API is not yet supported by any browsers, the [@temporal-js/polyfill](https://github.com/js-temporal/temporal-polyfill) library is used, with the intention to remove this eventually once support is stable in all major browsers.
+
+Note that much of the Temporal logic is run only when necessary, as the polyfill being used is not optimised and will slow down the frontend otherwise.

frontend/package.json

@@ -46,17 +46,5 @@
     "sass": "^1.63.2",
     "typescript": "^5.1.3",
     "typescript-plugin-css-modules": "^5.0.1"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
   }
 }

frontend/src/components/TranslateDialog/TranslateDialog.tsx

@@ -42,7 +42,7 @@ const TranslateDialog = () => {
       <Button
         target="_blank"
         rel="noreferrer noopener"
-        href={`https://docs.google.com/forms/d/e/1FAIpQLSd5bcs8LTP_8Ydrh2e4iMlZft5x81qSfAxekuuQET27A2mBhA/viewform?usp=pp_url&entry.1530835706=__other_option__&entry.1530835706.other_option_response=${encodeURIComponent(navigator.language)}`}
+        href="https://explore.transifex.com/crab-fit/crab-fit/"
       >Help translate!</Button>
       <Button isSecondary onClick={() => store.dismissDialog()}>Close</Button>
     </div>