New Crowdin updates

docs/extend/api.md

@@ -336,7 +336,7 @@ return [
     (new Extend\ApiSerializer(UserSerializer::class))
         // One attribute at a time
         ->attribute('firstName', function ($serializer, $user, $attributes) {
-                return $user->first_name
+            return $user->first_name
         })
         // Multiple modifications at once, more complex logic
         ->mutate(function($serializer, $user, $attributes) {

docs/extend/github-actions.md

@@ -4,8 +4,6 @@ In public repos, [GitHub Actions](https://github.com/features/actions) allow you
 
 In this guide, you will learn how to add pre-defined workflows to your extension.
 
-## Setup
-
 :::tip [Flarum CLI](https://github.com/flarum/cli)
 
 You can use the CLI to automatically add and update workflows to your code:
@@ -15,6 +13,9 @@ $ flarum-cli infra githubActions
 
 :::
 
+## Backend
+
+
 All you need to do is create a `.github/workflows/backend.yml` file in your extension, it will reuse a predefined workflow by the core development team which can be found [here](https://github.com/flarum/framework/blob/main/.github/workflows/REUSABLE_backend.yml). You need to specify the configuration as follows:
 
 ```yaml
@@ -34,9 +35,7 @@ jobs:
       backend_directory: .
 ```
 
-## Backend
-
-Flarum provides a pre-defined workflow for running certain jobs for the backend of your extension. These are the currently available jobs:
+These are the currently available jobs:
 
 | Name                                            | Key                      | Description                            |
 |-------------------------------------------------|--------------------------|----------------------------------------|
@@ -69,4 +68,52 @@ For more details on parameters, [checkout the full predefined reusable workflow
 
 ## Frontend
 
-Soon..
+All you need to do is create a `.github/workflows/frontend.yml` file in your extension, it will reuse a predefined workflow by the core development team which can be found [here](https://github.com/flarum/framework/blob/main/.github/workflows/REUSABLE_frontend.yml). You need to specify the configuration as follows:
+
+```yaml
+name: Frontend
+
+on: [workflow_dispatch, push, pull_request]
+
+jobs:
+  run:
+    uses: flarum/framework/.github/workflows/REUSABLE_frontend.yml@main
+    with:
+      enable_bundlewatch: false
+      enable_prettier: true
+      enable_typescript: false
+
+      frontend_directory: ./js
+      backend_directory: .
+      js_package_manager: yarn
+      main_git_branch: main
+
+    secrets:
+      bundlewatch_github_token: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}
+```
+
+Unlike the backend workflow, the frontend workflow runs everything in a single job. Here are the available parameters:
+
+| Name                  | Key                     | Description                                                                                                                                              | Format |
+|-----------------------|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|--------|
+| Build Script          | `build_script`          | Script to run for production build. Empty value to disable.                                                                                              | string |
+| Build Typings Script  | `build_typings_script`  | Script to run for typings build. Empty value to disable.                                                                                                 | string |
+| Format Script         | `format_script`         | Script to run for code formatting. Empty value to disable.                                                                                               | string |
+| Check Typings Script  | `check_typings_script`  | Script to run for tyiping check. Empty value to disable.                                                                                                 | string |
+| Type Coverage Script  | `type_coverage_script`  | Script to run for type coverage. Empty value to disable.                                                                                                 | string |
+| Test Script           | `test_script`           | Script to run for tests. Empty value to disable.                                                                                                         | string |
+| Enable Bundlewatch    | `enable_bundlewatch`    | Enable Bundlewatch?                                                                                                                                      | string |
+| Enable Prettier       | `enable_prettier`       | Enable Prettier?                                                                                                                                         | string |
+| Enable Typescript     | `enable_typescript`     | Enable TypeScript?                                                                                                                                       | string |
+| Enable Tests          | `enable_tests`          | Enable Tests?                                                                                                                                            | string |
+| Backend Directory     | `backend_directory`     | The directory of the project where backend code is located. This should contain a `composer.json` file, and is generally the root directory of the repo. | string |
+| Frontend Directory    | `frontend_directory`    | The directory of the project where frontend code is located. This should contain a `package.json` file.                                                  | string |
+| Main Git Branch       | `main_git_branch`       | The main git branch to use for the workflow.                                                                                                             | string |
+| Node Version          | `node_version`          | The node version to use for the workflow.                                                                                                                | string |
+| JS Package Manager    | `js_package_manager`    | The package manager to use (ex. yarn)                                                                                                                    | string |
+| Cache Dependency Path | `cache_dependency_path` | The path to the cache dependency file.                                                                                                                   | string |
+:::tip
+
+For more details on parameters, [checkout the full predefined reusable workflow file](https://github.com/flarum/framework/blob/main/.github/workflows/REUSABLE_frontend.yml).
+
+:::

docs/extend/models.md

@@ -251,38 +251,37 @@ export default class Tag extends Model {
 }
 ```
 
-You must then register your new model with the store:
+You must then register your new model with the store using the frontend `Store` extender in a new `extend.js` module:
 
 ```js
-app.store.models.tags = Tag;
-```
-
-<!-- You must then register your new model with the store using the `Model` extender:
+import Extend from 'flarum/common/extenders';
 
-```js
-export const extend = [
-  new Extend.Model('tags', Tag)
+export default [
+  new Extend.Store()
+    .add('tags', Tag),
 ];
-``` -->
+```
 
-### Extending Models
+:::info
 
-To add attributes and relationships to existing models, modify the model class prototype:
+Remember to export the `extend` module from your entry `index.js` file:
 
 ```js
-Discussion.prototype.user = Model.hasOne('user');
-Discussion.prototype.posts = Model.hasMany('posts');
-Discussion.prototype.slug = Model.attribute('slug');
+export { default as extend } from './extend';
 ```
 
-<!-- To add attributes and relationships to existing models, use the `Model` extender:
+:::
 
-```js
-  new Extend.Model('discussions')
-    .attribute('slug')
-    .hasOne('user')
-    .hasMany('posts')
-``` -->
+### Extending Models
+
+To add attributes and relationships to existing models, use the `Model` extender:
+
+```ts
+  new Extend.Model(Discussion)
+    .attribute<string>('slug')
+    .hasOne<User>('user')
+    .hasMany<Post>('posts')
+``` 
 
 ### Saving Resources
 

docs/extend/routes.md

@@ -160,37 +160,41 @@ On the backend, instead of adding your frontend route via the `Routes` extender,
 
 Now when `yourforum.com/users` is visited, the forum frontend will be displayed. However, since the frontend doesn't yet know about the `users` route, the discussion list will still be rendered.
 
-Flarum builds on [Mithril's routing system](https://mithril.js.org/index.html#routing), adding route names and an abstract class for pages (`common/components/Page`). To register a new route, add an object for it to `app.routes`:
+Flarum builds on [Mithril's routing system](https://mithril.js.org/index.html#routing), adding route names and an abstract class for pages (`common/components/Page`).
 
-```js
-app.routes['acme.users'] = { path: '/users', component: UsersPage };
-```
-
-<!-- To register the route on the frontend, there is a `Routes` extender which works much like the backend one. Instead of a controller, however, you pass a component instance as the third argument:
+To register the route on the frontend, there is a `Routes` extender which works much like the backend one. Instead of a controller, however, you pass a component instance as the third argument:
 
 ```jsx
-export const extend = [
+import Extend from 'flarum/common/extenders';
+
+export default [
   new Extend.Routes()
-    .add('/users', 'acme.users', <UsersPage />)
+    .add('acme.users', '/users', <UsersPage />),
 ];
-``` -->
+```
+
+:::info
+
+Remember to export the `extend` module from your entry `index.js` file:
+
+```js
+export { default as extend } from './extend';
+```
+
+:::
 
 Now when `yourforum.com/users` is visited, the forum frontend will be loaded and the `UsersPage` component will be rendered in the content area. For more information on frontend pages, please see [that documentation section](frontend-pages.md).
 
 Advanced use cases might also be interested in using [route resolvers](frontend-pages.md#route-resolvers-advanced).
 
 ### Route Parameters
 
-Frontend routes also allow you to capture segments of the URI, but the [Mithril route syntax](https://mithril.js.org/route.html) is slightly different:
+Frontend routes also allow you to capture segments of the URI:
 
 ```jsx
-app.routes['acme.user'] = { path: '/user/:id', component: UserPage };
-```
-
-<!-- ```jsx
   new Extend.Routes()
-    .add('/user/:id', 'acme.user', <UsersPage />)
-``` -->
+    .add('acme.user', '/user/:id', <UsersPage />)
+```
 
 Route parameters will be passed into the `attrs` of the route's component. They will also be available through [`m.route.param`](https://mithril.js.org/route.html#mrouteparam)
 
@@ -203,6 +207,21 @@ const url = app.route('acme.user', { id: 123, foo: 'bar' });
 // http://yourforum.com/users/123?foo=bar
 ```
 
+The extender also allows you to define a route helper method:
+
+```js
+  new Extend.Routes()
+   .add('acme.user', '/user/:id', <UsersPage />)
+   .helper('acmeUser', (user) => app.route('acme.user', { id: user.id() }))
+```
+
+This allows you to generate URLs to the route using the `acmeUser` helper method:
+
+```js
+const url = app.route.acmeUser(user);
+// http://yourforum.com/users/123
+```
+
 ### Linking to Other Pages
 
 A forum wouldn't be very useful if it only had one page.