fix(docs): #3827 link ref to other doc pages is incorrect

docs/api/field.md

@@ -20,9 +20,9 @@ There are a few different ways to render things with `<Field>`.
 
 `children` can either be an array of elements (e.g. `<option>` in the case of `<Field as="select">`) or a callback function (a.k.a render prop). The render props are an object containing:
 
-- `field`: An object containing `onChange`, `onBlur`, `name`, and `value` of the field (see [`FieldInputProps`](./useField#fieldinputprops))
+- `field`: An object containing `onChange`, `onBlur`, `name`, and `value` of the field (see [`FieldInputProps`](./useField#fieldinputpropsvalue))
 - `form`: The Formik bag
-- `meta`: An object containing metadata (i.e. `value`, `touched`, `error`, and `initialValue`) about the field (see [`FieldMetaProps`](./useField#fieldmetaprops))
+- `meta`: An object containing metadata (i.e. `value`, `touched`, `error`, and `initialValue`) about the field (see [`FieldMetaProps`](./useField#fieldmetapropsvalue))
 
 `component` can either be a React component or the name of an HTML element to render. All additional props will be passed through.
 

docs/api/fieldarray.md

@@ -67,7 +67,7 @@ export const FriendList = () => (
 
 ### `name: string`
 
-The name or path to the relevant key in [`values`](./formik.md#values-field-string-any).
+The name or path to the relevant key in [`values`](./formik.md#values--field-string-any-).
 
 ### `validateOnChange?: boolean`
 

docs/api/formik.md

@@ -93,11 +93,11 @@ to `<button onClick={handleReset}>...</button>`
 
 #### `handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void`
 
-Submit handler. This should be passed to `<form onSubmit={props.handleSubmit}>...</form>`. To learn more about the submission process, see [Form Submission](../docs/guides/form-submission.md).
+Submit handler. This should be passed to `<form onSubmit={props.handleSubmit}>...</form>`. To learn more about the submission process, see [Form Submission](../guides/form-submission.md).
 
 #### `isSubmitting: boolean`
 
-Submitting state of the form. Returns `true` if submission is in progress and `false` otherwise. IMPORTANT: Formik will set this to `true` as soon as submission is _attempted_. To learn more about the submission process, see [Form Submission](../docs/guides/form-submission.md).
+Submitting state of the form. Returns `true` if submission is in progress and `false` otherwise. IMPORTANT: Formik will set this to `true` as soon as submission is _attempted_. To learn more about the submission process, see [Form Submission](../guides/form-submission.md).
 
 #### `isValid: boolean`
 
@@ -107,7 +107,7 @@ Returns `true` if there are no `errors` (i.e. the `errors` object is empty) and
 
 #### `isValidating: boolean`
 
-Returns `true` if Formik is running validation during submission, or by calling [`validateForm`] directly `false` otherwise. To learn more about what happens with `isValidating` during the submission process, see [Form Submission](../docs/guides/form-submission.md).
+Returns `true` if Formik is running validation during submission, or by calling [`validateForm`] directly `false` otherwise. To learn more about what happens with `isValidating` during the submission process, see [Form Submission](../guides/form-submission.md).
 
 #### `resetForm: (nextState?: Partial<FormikState<Values>>) => void`
 
@@ -188,8 +188,8 @@ Trigger a form submission. The promise will be rejected if form is invalid.
 
 #### `submitCount: number`
 
-Number of times user tried to submit the form. Increases when [`handleSubmit`](#handlesubmit-e-reactformevent-htmlformelement-void) is called, resets after calling
-[`handleReset`](#handlereset-void). `submitCount` is readonly computed property and should not be mutated directly.
+Number of times user tried to submit the form. Increases when [`handleSubmit`](#handlesubmit-e-reactformeventhtmlformelement--void) is called, resets after calling
+[`handleReset`](#handlereset---void). `submitCount` is readonly computed property and should not be mutated directly.
 
 #### `setFieldValue: (field: string, value: any, shouldValidate?: boolean) => Promise<void | FormikErrors>`
 
@@ -206,7 +206,7 @@ use it to pass API responses back into your component in `handleSubmit`.
 
 #### `setSubmitting: (isSubmitting: boolean) => void`
 
-Set `isSubmitting` imperatively. You would call it with `setSubmitting(false)` in your `onSubmit` handler to finish the cycle. To learn more about the submission process, see [Form Submission](../docs/guides/form-submission.md).
+Set `isSubmitting` imperatively. You would call it with `setSubmitting(false)` in your `onSubmit` handler to finish the cycle. To learn more about the submission process, see [Form Submission](../guides/form-submission.md).
 
 #### `setTouched: (fields: { [field: string]: boolean }, shouldValidate?: boolean) => void`
 
@@ -223,7 +223,7 @@ otherwise be expressed/stored with other methods. This is useful for capturing
 and passing through API responses to your inner component.
 
 `status` should only be modified by calling
-[`setStatus`](#setstatus-status-any-void).
+[`setStatus`](#setstatus-status-any--void).
 
 #### `touched: { [field: string]: boolean }`
 

docs/api/useField.md

@@ -128,7 +128,7 @@ function MyOtherComponent(props) {
 This object is a subset of the props that you would pass to `<Field>`. It contains:
 
 - `name: string` - The name of the field
-- `validate?: (value: any) => undefined | string | Promise<any>` - See [the documentation for `<Field>`](../field#validate)
+- `validate?: (value: any) => undefined | string | Promise<any>` - See [the documentation for `<Field>`](./field#validate)
 - `type?: string` - The type of the HTML input (`text`, `number` and etc.)
 - `multiple?: boolean` - Whether or not the multiple values can be selected.
 - `value?: string`- Works only for inputs of type `checkbox` and `radio`. When a form is submitted, checkboxes and radios are submitted with the provided `value`. Read more about it on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Value).

website/src/lib/docs/rehype-docs.js

@@ -13,7 +13,7 @@ function removeExt(path) {
   const basePath = path.split(/#|\?/)[0];
   const i = basePath.lastIndexOf('.');
 
-  if (i === -1) return path;
+  if (i === -1 || i === 0) return path;
   return basePath.substring(0, i) + path.substring(basePath.length);
 }
 
@@ -50,7 +50,7 @@ export default function rehypeDocs({ filePath, tag }) {
   const slugger = new GithubSlugger();
   const anchorSlugger = new GithubSlugger();
   // Don't use the custom tag here, relative URLs to repo files should always go to canary
-  const blobUrl = `${GITHUB_URL}/${REPO_NAME}/blob/master`;
+  const blobUrl = `${GITHUB_URL}/${REPO_NAME}/blob/main`;
 
   function visitAnchor(node) {
     const props = node.properties;
@@ -96,8 +96,16 @@ export default function rehypeDocs({ filePath, tag }) {
     props.href = hash
       ? `${relativePath}#${anchorSlugger.slug(hash)}`
       : relativePath;
-    // Relative URL for another documentation route
+
+    //turn URL to absolute path for correct doc route
     if (isDocs) {
+      let absolutePath = resolve(filePath, relativePath);
+      // Reset the slugger because single pages can have multiple urls to the same hash
+      anchorSlugger.reset();
+      props.href = hash
+        ? `${absolutePath}#${anchorSlugger.slug(hash)}`
+        : absolutePath;
+      props.className = 'absolute-link';
       props.href = removeExt(
         tag ? props.href.replace('/docs', `/docs/tag/${tag}`) : props.href
       );

website/src/siteConfig.tsx

@@ -1,7 +1,7 @@
 // List of projects/orgs using your project for the users page.
 
 export const siteConfig = {
-  editUrl: 'https://github.com/formik/formik/edit/master',
+  editUrl: 'https://github.com/formik/formik/edit/main',
   copyright: `Copyright © ${new Date().getFullYear()} Jared Palmer. All Rights Reserved.`,
   repoUrl: 'https://github.com/formik/formik',
   discordUrl: 'https://discord.com/invite/pJSg287',