make melange urls references to change easily

Author: davesnx

docs/components.md

@@ -2,7 +2,7 @@
 title: Components
 ---
 
-ReasonReact uses functions and [React Hooks](https://reactjs.org/docs/hooks-intro.html) to compose the component of your application. Let's look at how a component is written and then break down some of the things happening.
+ReasonReact uses functions and [React Hooks](https://reactjs.org/docs/hooks-intro.html) to compose your components of your application. Let's look at how a component is written and then break down some of the things happening.
 
 ```reason
 [@react.component]
@@ -20,7 +20,7 @@ let make = (~name) => {
 
 ## [@react.component]
 
-This snippet is doing quite a bit! The first thing you might notice is the decorator attribute above the definition. `[@react.component]` tells ReasonReact that you're writing a component with named args syntax (`~name`), but that you would like to compile it into a function that takes a JS object as props which is how React works. Concretely, this attribute will generate code for you that looks like this:
+This snippet is doing quite a bit! The first thing you might notice is the decorator attribute above the definition. `[@react.component]` tells ReasonReact that you're writing a component with named args syntax (`~name`), but that you would like to compile it into a function that takes a JavaScript object as props which is how React works. Concretely, this attribute will generate code for you that looks like this:
 
 ```reason
 [@mel.obj]
@@ -39,7 +39,7 @@ let make = (Props) => {
 };
 ```
 
-It has added a new function called `makeProps` which uses [`[@mel.obj]`](https://melange.re/v4.0.0/communicate-with-javascript#using-js-t-objects) to create your props object. This function gets compiled away by Melange and will be replaced by object literals when used.
+It has added a new function called `makeProps` which uses [mel-obj] to create your props object. This function gets compiled away by Melange and will be replaced by object literals when used.
 
 ### A note on `children`
 
@@ -113,7 +113,7 @@ Reason also always opts for the safest form of a given hook as well. So `React.u
 
 ## Hand-writing components
 
-You don't need to use the `[@react.component]` declaration to write components. Instead you can write a pair of `foo` and `fooProps` functions such that `type fooProps: 'a => props and foo: props => React.element` and these will always work as React components! This works with your own version of [`[@mel.obj]`](https://melange.re/v4.0.0/communicate-with-javascript#using-js-t-objects), [`[bs.deriving abstract]`](https://melange.re/v4.0.0/communicate-with-javascript#using-external-functions), or any other function that takes named args and returns a single props structure.
+You don't need to use the `[@react.component]` declaration to write components. Instead you can write a pair of `foo` and `fooProps` functions such that `type fooProps: 'a => props and foo: props => React.element` and these will always work as React components! This works with your own version of [`[@mel.obj]`][mel-obj], or any other function that takes labelled arguments and returns a single prop object.
 
 ## Interop
 
@@ -129,12 +129,10 @@ const MyComponent = require('./path/to/Component.js').make;
 
 ### Import from JS
 
-It also works seamlessly with [`[@genType]`](https://github.com/cristianoc/genType) annotations and can be integrated with safety into TypeScript and Flow applications.
-
-Using a component written in JS requires a single external to annotate the types it takes.
+Using a component written in JavaScript requires a single `external` to annotate the types it takes.
 
 ```reason
-[@mel.module "./path/to/Component.js"][@react.component]
+[@mel.module "./path/to/Component.js"] [@react.component]
 external make: (~name: string) => React.element = "default";
 ```
 
@@ -148,7 +146,7 @@ external makeProps: (~name: 'name, ~key: string=?, unit) => {. "name": 'name} =
 external make: ({. "name": string}) => React.element = "default";
 ```
 
-**Note on `default`:** to understand what `default` means, see [the Melange docs on ES6](https://melange.re/v4.0.0/communicate-with-javascript#default-es6-values).
+**Note on `default`:** to understand what `default` means, see [the Melange docs on ES6][default-es6-values].
 
 ## Component Naming
 
@@ -173,3 +171,6 @@ module Nested = {
 ```
 
 If you need a dynamic name for higher-order components or you would like to set your own name you can use `React.setDisplayName(make, "NameThatShouldBeInDevTools");`.
+
+[mel-obj]: https://melange.re/v4.0.0/communicate-with-javascript#using-js-t-objects
+[default-es6-values]: https://melange.re/v4.0.0/communicate-with-javascript#default-es6-values

docs/element-type-is-invalid.md

@@ -12,7 +12,7 @@ This likely means that:
 - The JS component uses ES6 default export (`export default MyComponent`) (or, you forgot to export the component altogether!).
 - You're using Babel/Webpack to compile those ES6 modules.
 
-This is a common mistake. Please see Melange's [Import an ES6 Default Value](https://melange.re/v4.0.0/communicate-with-javascript/#default-es6-values). Aka, instead of:
+This is a common mistake. Please see Melange's [Import an ES6 Default Value][default-es6-values]. Aka, instead of:
 
 ```reason
 [@mel.module] external myJSReactClass: ReasonReact.reactClass = "./myJSReactClass";
@@ -25,3 +25,5 @@ Use:
 ```
 
 Remember that Reason doesn't have runtime type errors! So it _must_ have meant that your binding was written wrongly.
+
+[default-es6-values]: https://melange.re/v4.0.0/communicate-with-javascript/#default-es6-values

docs/event.md

@@ -8,7 +8,7 @@ React.Event module contains all event types as submodules, e.g. `React.Event.For
 
 You can access their properties using the `React.Event.{{EventName}}.{{property}}` method. For example, to access the `target` property of a `React.Event.Form.t` event, you would use `React.Event.Form.target`.
 
-Since `target` is a JavaScript Object, those are typed as [`Js.t`](https://melange.re/v4.0.0/communicate-with-javascript/#using-jst-objects). If you're accessing fields on an object, like `event.target.value`, you'd use [Melange's `##` object access FFI](https://melange.re/v4.0.0/communicate-with-javascript/#using-jst-objects):
+Since `target` is a JavaScript Object, those are typed as [`Js.t`][using-jst-objects]. If you're accessing fields on an object, like `event.target.value`, you'd use [Melange's `##` object access FFI][using-jst-objects]:
 
 ```reason
 React.Event.Form.target(event)##value;
@@ -21,3 +21,5 @@ event->React.Event.Form.target##value;
 ```
 
 More info in the [inline docs](https://github.com/reasonml/reason-react/blob/main/src/React.rei#L1) on the interface file.
+
+[using-jst-objects]: https://melange.re/v4.0.0/communicate-with-javascript/#using-jst-objects

docs/installation.md

@@ -6,7 +6,7 @@ ReasonReact is built to work with [Melange](https://melange.re/) and [Reason](ht
 
 If you want to build a new app or a new website with ReasonReact and Melange, we recommend to use a package manager such as [opam](https://opam.ocaml.org/) to download and install the required dependencies.
 
-There are other alternatives available, such as [esy](https://esy.sh/) or [nix](https://nixos.org/). See [Melange documentation](https://melange.re/v4.0.0/getting-started/#alternative-package-managers-experimental) for details.
+There are other alternatives available, such as [esy](https://esy.sh/) or [nix](https://nixos.org/). See [Melange documentation][melange-alternative-package-managers-experimental] for details.
 
 #### Requirements
 
@@ -17,11 +17,11 @@ There are other alternatives available, such as [esy](https://esy.sh/) or [nix](
 
 Melange is the toolchain that compiles Reason and OCaml to JavaScript. It integrates with dune to provide a seamless experience for building and running your project.
 
-Follow the getting started guide on [Melange's documentation](https://melange.re/v4.0.0/getting-started/) to continue.
+Follow the getting started guide on [Melange's documentation][melange-geting-started] to continue.
 
 ## Editor Setup
 
-Since Reason is an alternative syntax for OCaml, we integrate seamlessly into the official OCaml editor toolchain. Following the recommendation from [Melange's documentation](https://melange.re/v4.0.0/getting-started/#editor-integration).
+Since Reason is an alternative syntax for OCaml, we integrate seamlessly into the official OCaml editor toolchain. Following the recommendation from [Melange's documentation][melange-editor-integration].
 
 - For VSCode, we recommend using the [vscode-ocaml-platform](https://github.com/ocamllabs/vscode-ocaml-platform) plugin
 - For other editors (Emacs and Vim), we recommend using a language server client plugin of your choice, and pairing it with [ocaml-lsp](https://github.com/ocaml/ocaml-lsp).
@@ -90,3 +90,7 @@ All compiled code will live under `_build/default/{{target_name}}` folder with t
 
 ## Next steps
 Head to the [Intro example](intro-example.md) guide for a tour of the most important Reason React concepts you will encounter every day.
+
+[melange-alternative-package-managers-experimental]: https://melange.re/v4.0.0/getting-started/#alternative-package-managers-experimental
+[melange-geting-started]: https://melange.re/v4.0.0/getting-started/
+[melange-editor-integration]: https://melange.re/v4.0.0/getting-started/#editor-integration

docs/intro-example.md

@@ -37,7 +37,7 @@ if (root != null) {
 
 ### Using Greeting in an existing JavaScript/Typescript application
 
-It's easy to import a ReasonReact component into your existing app. After being transpiled to JS, all Reason components will have `.js` as extension by default and export a function component called `make`. You can change it with [module_systems](https://melange.re/v4.0.0/build-system/#commonjs-or-es6-modules) field inside a [`melange.emit` stanza](https://dune.readthedocs.io/en/stable/melange.html#melange-emit).
+It's easy to import a ReasonReact component into your existing app. After being transpiled to JS, all Reason components will have `.js` as extension by default and export a function component called `make`. You can change it with [module_systems][commonjs-or-es6-modules] field inside a [`melange.emit` stanza](https://dune.readthedocs.io/en/stable/melange.html#melange-emit).
 
 ```js
 /* file: App.js */
@@ -53,4 +53,6 @@ export default function App() {
 }
 ```
 
-Make sure you check out [Examples](simple) for more!
+Make sure you check out [Examples](simple.md) for more!
+
+[commonjs-or-es6-modules]: https://melange.re/v4.0.0/build-system/#commonjs-or-es6-modules

docs/usestate-hook.md

@@ -111,3 +111,5 @@ let make = () => {
 The key is to extract the `value` from the `event` *before* we send it to
 `setName`. Even if React cleans up the event, we don't lose access to the
 value we need.
+
+[melange-url-docs]: https://melange.re/v4.0.0

docs/working-with-optional-data.md

@@ -6,7 +6,7 @@ If you're coming from JavaScript, optional data can be a real pain. ReasonML rem
 
 ReasonML uses the `option` type to represent optional data. As defined in the standard library [here](https://reasonml.github.io/api/Option.html).
 
-Here are a few examples of how to work with optional data in ReasonML, using the [Belt](https://melange.re/v4.0.0/api/re/melange/Belt) library from `melange.belt`.
+Here are a few examples of how to work with optional data in ReasonML, using the [Belt][melange-belt] library from `melange.belt`.
 
 ### Accessing Optional Nested Data
 
@@ -74,4 +74,7 @@ If you need to return null instead of a component:
 </div>;
 ```
 
-Read more about [`getWithDefault`](https://reasonml.org/apis/javascript/latest/belt/option) here.
+Read more about [`getWithDefault`][melange-belt-option-get-with-default] here.
+
+[melange-belt]: https://melange.re/v4.0.0/api/re/melange/Belt
+[melange-belt-option-get-with-default]: https://melange.re/v4.0.0/api/re/melange/Belt/Option/index.html#val-getWithDefault

website/i18n/en.json

@@ -23,8 +23,11 @@
       "context": {
         "title": "Context"
       },
+      "custom-hooks": {
+        "title": "Custom Hooks"
+      },
       "dom": {
-        "title": "Working with DOM"
+        "title": "ReactDOM"
       },
       "element-type-is-invalid": {
         "title": "Element Type is Invalid Runtime Error"
@@ -104,12 +107,6 @@
       "testing": {
         "title": "Testing ReasonReact components"
       },
-      "use-state-use-effect": {
-        "title": "useState, useEffect in a Form"
-      },
-      "usedebounce-custom-hook": {
-        "title": "Custom Hooks"
-      },
       "useeffect-hook": {
         "title": "useEffect"
       },