Fix links on both github and website

docs/babel.md

@@ -2,7 +2,7 @@
 title: "Babel Plugin"
 ---
 
-`babel-plugin-emotion` is highly recommended, but not required in version 8 and above. All of the options that can be provided to `babel-plugin-emotion` are documented in [`babel-plugin-emotion`'s README](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion). See the [installation instructions](docs/install).
+`babel-plugin-emotion` is highly recommended, but not required in version 8 and above. All of the options that can be provided to `babel-plugin-emotion` are documented in [`babel-plugin-emotion`'s README](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion). See the [installation instructions](/docs/install.md).
 
 ### Features which are enabled with the babel plugin
 
@@ -32,4 +32,5 @@ Convenient helper for calling `css` and appending the generated className during
 
 ### Components as selectors
 
-The ability to refer to another component to apply override styles depending on nesting context. Learn more in the [react-emotion docs](docs/styled#targeting-another-emotion-component).
+The ability to refer to another component to apply override styles depending on nesting context. Learn more in the [react-emotion docs](/docs/styled.md#targeting-another-emotion-component).
+

docs/composition.md

@@ -69,7 +69,7 @@ render(
 
 > Note:
 > 
-> This is just an example to demonstrate composition, for class name merging with emotion you should use [cx](https://emotion.sh/docs/cx).
+> This is just an example to demonstrate composition, for class name merging with emotion you should use [cx](/docs/cx.md).
 
 ## Composing dynamic styles
 

docs/css.md

@@ -25,7 +25,7 @@ render(
 )
 ```
 
-`css` also accepts styles as an object, for more usage with objects, go [here](https://emotion.sh/docs/object-styles).
+`css` also accepts styles as an object, for more usage with objects, go [here](/docs/object-styles.md).
 
 ```jsx live
 import { css } from 'emotion'
@@ -48,7 +48,7 @@ render(
 
 > Note:
 
-> [The css prop requires `babel-plugin-emotion`](https://emotion.sh/docs/babel-plugin-emotion).
+> [The css prop requires `babel-plugin-emotion`](/packages/babel-plugin-emotion).
 
 
 With `babel-plugin-emotion`, the css prop can be used, it accepts styles like `css` and adds it to the className of the element it's on. This happens at compile time by converting the css prop to a css call and prepending it to the className of the element. It will only work if you use it as an actual JSX attribute, if it's in an object that's spread onto the element it won't work.

docs/extract-static.md

@@ -2,9 +2,9 @@
 title: "Extract Static"
 ---
 
-###### [requires babel plugin](docs/babel)
+###### [requires babel plugin](/docs/babel.md)
 
-The `extractStatic` option to `babel-plugin-emotion` allows you to extract styles with no interpolations into external css files. **`extractStatic` is not recommended** because it **breaks [composition](docs/composition)** and other powerful patterns from libraries like [facepaint](https://github.com/emotion-js/facepaint). It is primarily available for historical reasons. It does not work with object styles.
+The `extractStatic` option to `babel-plugin-emotion` allows you to extract styles with no interpolations into external css files. **`extractStatic` is not recommended** because it **breaks [composition](/docs/composition.md)** and other powerful patterns from libraries like [facepaint](https://github.com/emotion-js/facepaint). It is primarily available for historical reasons. It does not work with object styles.
 
 **If you want to use dynamic values you must use css variables.**
 

docs/install.md

@@ -2,7 +2,7 @@
 title: "Install"
 ---
 
-Emotion can be used in many different ways. The easiest way to get started is to use the [`emotion` package](https://emotion.sh/docs/emotion).
+Emotion can be used in many different ways. The easiest way to get started is to use the [`emotion` package](/packages/emotion).
 
 ```bash
 yarn add emotion
@@ -14,7 +14,7 @@ or if you prefer npm
 npm install --save emotion
 ```
 
-To use it, import what you need, for example use [css](https://emotion.sh/docs/css) to create class names with styles.
+To use it, import what you need, for example use [css](/docs/css.md) to create class names with styles.
 
 ```jsx live
 import { css } from 'emotion'
@@ -45,7 +45,7 @@ render(
 )
 ```
 
-## With [`styled`](https://emotion.sh/docs/styled)
+## With [`styled`](/docs/styled.md)
 
 `styled` is a way to create React/Preact components that have styles attached to them.
 
@@ -82,7 +82,7 @@ render(
 )
 ```
 
-## With [`babel-plugin-emotion`](https://emotion.sh/docs/babel-plugin-emotion)
+## With [`babel-plugin-emotion`](/packages/babel-plugin-emotion)
 
 > Note:
 

docs/introduction.md

@@ -3,7 +3,7 @@ title: "Introduction"
 ---
 Emotion is a performant and flexible CSS-in-JS library. It's inspired by many other CSS-in-JS libraries like [glam](https://github.com/threepointone/glam/tree/e9bca3950f12503246ed7fccad5cf13e5e9c86e3), [glamor](https://github.com/threepointone/glamor), [styled-components](https://www.styled-components.com/) and [glamorous](https://glamorous.rocks/). It allows you to style applications quickly with string styles or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching and insertRule in production.
 
-The examples in this documention use React but Emotion is not limited to React. The exceptions to this are react-emotion and preact-emotion that export [`styled`](https://emotion.sh/docs/styled), they require React and Preact respectively. Everything from the `emotion` package works with any library or framework.
+The examples in this documention use React but Emotion is not limited to React. The exceptions to this are react-emotion and preact-emotion that export [`styled`](/docs/styled.md), they require React and Preact respectively. Everything from the `emotion` package works with any library or framework.
 
 This documentation has lots of live examples that look like this, they're all editable so you can try emotion without installing it. Try changing the color below.
 

docs/nested.md

@@ -51,7 +51,7 @@ render(
 )
 ```
 
-To nest a class selector using the class generated with `css` you can interpolate it but this is **strongly** recommended against and should only be used in rare circumstances because it will break when used with [composition](https://emotion.sh/docs/composition).
+To nest a class selector using the class generated with `css` you can interpolate it but this is **strongly** recommended against and should only be used in rare circumstances because it will break when used with [composition](/docs/composition.md).
 
 ```jsx live
 import { css } from 'emotion'

docs/object-styles.md

@@ -25,7 +25,7 @@ render(
 
 #### With `styled`
 
-`styled` is a thin wrapper around `css` and accepts the same arguments. [More ways to use `styled` can be found here](https://emotion.sh/docs/styled).
+`styled` is a thin wrapper around `css` and accepts the same arguments. [More ways to use `styled` can be found here](/docs/styled.md).
 
 ```jsx live
 import styled from 'react-emotion'
@@ -158,7 +158,7 @@ render(
 
 ### Composition
 
-[Learn more composition in Emotion](https://emotion.sh/docs/composition).
+[Learn more composition in Emotion](/docs/composition.md).
 
 ```jsx live
 import { css } from 'emotion'

docs/styled.md

@@ -2,7 +2,7 @@
 title: "Styled Components"
 ---
 
-`styled` is a way to create React or Preact components that have styles attached to them. It's available from [react-emotion](https://emotion.sh/docs/react-emotion) and [preact-emotion](https://emotion.sh/docs/preact-emotion). `styled` was heavily inspired by [styled-components](https://www.styled-components.com/) and [glamorous](https://glamorous.rocks/)
+`styled` is a way to create React or Preact components that have styles attached to them. It's available from [react-emotion](/packages/react-emotion) and [preact-emotion](/packages/preact-emotion). `styled` was heavily inspired by [styled-components](https://www.styled-components.com/) and [glamorous](https://glamorous.rocks/)
 
 ### Styling elements and components
 
@@ -86,7 +86,7 @@ render(
 
 ### Targeting another emotion component
 
-Similar to [styled-components](https://www.styled-components.com/docs/faqs#can-i-refer-to-other-components), emotion allows for emotion components to be targeted like regular CSS selectors when using [babel-plugin-emotion](https://emotion.sh/docs/babel-plugin-emotion).
+Similar to [styled-components](https://www.styled-components.com/docs/faqs#can-i-refer-to-other-components), emotion allows for emotion components to be targeted like regular CSS selectors when using [babel-plugin-emotion](/packages/babel-plugin-emotion.md).
 
 ```jsx live
 const Child = styled('div')`
@@ -212,4 +212,4 @@ This API was inspired by [glamorous](https://github.com/paypal/glamorous).
 
 ### withConfig is not a function error
 
-This error is caused by using the shorthand syntax for styled such as `styled.div` without the Babel plugin. To fix this, [install `babel-plugin-emotion`](https://emotion.sh/docs/babel)
+This error is caused by using the shorthand syntax for styled such as `styled.div` without the Babel plugin. To fix this, [install `babel-plugin-emotion`](/docs/babel.md)

docs/theming.md

@@ -8,7 +8,7 @@ Themes are provided by the library [`emotion-theming`](https://github.com/emotio
 npm install -S emotion-theming
 ```
 
-Add `ThemeProvider` to the top level of your app and access the theme with `props.theme` in a styled component. The api is laid out in detail [in the documentation](https://emotion.sh/docs/emotion-theming).
+Add `ThemeProvider` to the top level of your app and access the theme with `props.theme` in a styled component. The api is laid out in detail [in the documentation](/packages/emotion-theming.md).
 
 ```jsx live
 import styled from 'react-emotion'

packages/babel-plugin-emotion/README.md

@@ -13,7 +13,7 @@ above of `emotion`.
 | `css(...)`                                                                                                                                                 |   ✅   |                       | Generally used for object styles.                                                                                                            |
 | styled('div')`` syntax | ✅ | | Both string and object styles work without this plugin.                                                                    |
 | styled.div`` syntax | | ✅ | Supporting the shortcut syntax without the Babel plugin requires a large list of valid elements to be included in the bundle. |
-| components as selectors                                                                                                                                    |        |          ✅           | Allows an emotion component to be [used as a CSS selector](https://emotion.sh/docs/styled#targeting-another-emotion-component).              |
+| components as selectors                                                                                                                                    |        |          ✅           | Allows an emotion component to be [used as a CSS selector](/docs/styled.md#targeting-another-emotion-component).              |
 | Minification                                                                                                                                               |        |          ✅           | Any leading/trailing space between properties in your `css` and `styled` blocks is removed. This can reduce the size of your final bundle.   |
 | Dead Code Elimination                                                                                                                                      |        |          ✅           | Uglifyjs will use the injected `/*#__PURE__*/` flag comments to mark your `css` and `styled` blocks as candidates for dead code elimination. |
 | Static Extraction                                                                                                                                          |        |          ✅           | Generated CSS that is eligible for extraction can be moved to an external css file.                                                          |

packages/emotion/README.md

@@ -32,27 +32,26 @@ minimizes the runtime cost of css-in-js dramatically by parsing your styles with
 
 ---
 
-- [Install](https://github.com/emotion-js/emotion/tree/master/docs/install.md)
+- [Install](/docs/install.md)
 - Demos
   - [emotion website](https://github.com/emotion-js/emotion/tree/master/packages/site) [[Demo Here](https://emotion.sh)]
   - [next-hnpwa-guide-kit](https://github.com/tkh44/next-hnpwa-guide-kit) [[Demo Here](https://hnpwa.life)]
   - **open a PR and add yours!**
 
 - [Benchmarks](https://github.com/emotion-js/emotion/tree/master/docs/benchmarks.md)
 
-- [Extract Static](https://github.com/emotion-js/emotion/tree/master/docs/extract-static.md)
+- [Extract Static](/docs/extract-static.md)
 
 - API
-  - [css](https://github.com/emotion-js/emotion/tree/master/docs/css.md)
-  - [styled](https://github.com/emotion-js/emotion/tree/master/docs/styled.md)
-  - [css prop](https://github.com/emotion-js/emotion/tree/master/docs/css#CSS-Prop.md)
-  - [composition](https://github.com/emotion-js/emotion/tree/master/docs/composition.md)
-  - [keyframes](https://github.com/emotion-js/emotion/tree/master/docs/keyframes.md)
-  - [fontFace](https://github.com/emotion-js/emotion/tree/master/docs/font-face.md)
-  - [injectGlobal](https://github.com/emotion-js/emotion/tree/master/docs/inject-global.md)
-
-- [Usage with babel-plugin-macros](https://github.com/emotion-js/emotion/tree/master/docs/babel.md#usage-with-babel-macros)
-- [Usage with Preact](https://github.com/emotion-js/emotion/tree/master/docs/preact.md)
+  - [css](/docs/css.md)
+  - [styled](/docs/styled.md)
+  - [css prop](/docs/css#CSS-Prop.md)
+  - [composition](/docs/composition.md)
+  - [keyframes](/docs/keyframes.md)
+  - [injectGlobal](/docs/inject-global.md)
+
+- [Usage with babel-plugin-macros](/docs/babel.md#usage-with-babel-macros)
+- [Usage with Preact](/packages/preact-emotion)
 
 - Ecosystem
   - [emotion-vue](https://github.com/egoist/emotion-vue)

packages/site/gatsby-node.js

@@ -244,6 +244,22 @@ exports.setFieldsOnGraphQLNodeType = ({ type }) => {
             case 'h5':
             case 'h6': {
               node.properties.id = slugs.slug(toString(node))
+              break
+            }
+            case 'a': {
+              if (
+                node.properties &&
+                node.properties.href &&
+                !node.properties.href.startsWith('//') &&
+                !node.properties.href.startsWith('http')
+              ) {
+                node.properties.href = node.properties.href
+                  .replace(/\.md(#.*)?$/, (match, hash) => {
+                    return hash
+                  })
+                  .replace(/^\/packages\//, '/docs/')
+              }
+              break
             }
           }
         })