Search box is not aligned to the index nav width on the release notes…

… page (#2099)

* feat: release note layout

missing props
page content layout

* chore: add changeset

* fix: missing React import

* fix: patch outdate external links

.changeset/light-taxis-jam.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-docs/gatsby-theme-docs': patch
+---
+
+Fix Release note layout

packages/gatsby-theme-docs/src/layouts/internals/layout-design-utils.ts

@@ -14,12 +14,10 @@ export const getPageLayoutGridStyles = ({
   gridRows,
   isReleaseNotesPage,
   allowWideContentLayout,
-  isHeader = false,
 }: {
   gridRows: string;
   isReleaseNotesPage: boolean;
   allowWideContentLayout: boolean;
-  isHeader: boolean;
 }) => {
   const configPage = isReleaseNotesPage ? 'releaseNote' : 'default';
   const largestMediaQuery = `
@@ -71,9 +69,9 @@ export const getPageLayoutGridStyles = ({
             /
             ${contentLayoutConfig[configPage].column1}
             ${
-              isHeader
-                ? contentLayoutConfig[configPage].column2
-                : contentLayoutConfig[configPage].column2Fixed
+              isReleaseNotesPage
+                ? contentLayoutConfig.releaseNote.column2FixedReleaseNoteFilters
+                : contentLayoutConfig.default.column2Fixed
             }
     }
     ${allowWideContentLayout && largestMediaQuery}

packages/gatsby-theme-docs/src/layouts/internals/layout-header.js

@@ -41,7 +41,6 @@ const Container = styled.header`
       gridRows,
       isReleaseNotesPage: props.isReleaseNotesPage,
       allowWideContentLayout: props.allowWideContentLayout,
-      isHeader: true,
     })}
 `;
 
@@ -212,7 +211,11 @@ const LayoutHeader = forwardRef((props, ref) => {
     props.siteBreadcrumbsOverride || siteData?.siteMetadata?.breadcrumbs;
 
   return (
-    <Container id="top" allowWideContentLayout={props.allowWideContentLayout}>
+    <Container
+      id="top"
+      allowWideContentLayout={props.allowWideContentLayout}
+      isReleaseNotesPage={props.isReleaseNotesPage}
+    >
       <TopMenuContainer>
         <Inline alignItems="center">
           <LogoContainer>
@@ -311,6 +314,7 @@ LayoutHeader.propTypes = {
   toggleTopMenu: PropTypes.func.isRequired,
   centeredSearchDialog: PropTypes.bool,
   siteBreadcrumbsOverride: PropTypes.string,
+  isReleaseNotesPage: PropTypes.bool,
 };
 
 export default LayoutHeader;

websites/documentation/src/content/configuration/extensions.mdx

@@ -40,7 +40,7 @@ module.exports = {
 
 ## Theme Overrides
 
-Overrides files using [Gatsby theme shadowing](https://www.gatsbyjs.org/docs/themes/shadowing/), to inject functionalities to specific parts of the theme.
+Overrides files using [Gatsby theme shadowing](https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/shadowing/), to inject functionalities to specific parts of the theme.
 
 ### Usage
 

websites/documentation/src/content/configuration/overrides.mdx

@@ -3,7 +3,7 @@ title: Override Components
 beta: false
 ---
 
-Overrides files using [Gatsby theme shadowing](https://www.gatsbyjs.org/docs/themes/shadowing/), to inject functionalities to specific parts of the theme.
+Overrides files using [Gatsby theme shadowing](https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/shadowing/), to inject functionalities to specific parts of the theme.
 
 ## Usage
 

websites/documentation/src/content/configuration/theme.mdx

@@ -25,7 +25,7 @@ The Docs-Kit theme also receives its plugin configuration through this standard
 
 - `availablePrismLanguages` (_optional_): in case you need to include **Prism languages** that are [not included by default by `prism-react-renderer`](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js), you can pass a list of them here. For example, Java and PHP are not included by default, so you should usually set this configuration. Setting it also prevents regressions due to `prism-react-renderer` changing its defaults.
 
-- `overrideDefaultConfigurationData` (_optional_, array of glob strings): allows to replace the configuration files in `src/data` instead of augmenting them. The option is passed to the `ignore` [option of the gatsby filesystem plugin](https://www.gatsbyjs.org/packages/gatsby-source-filesystem/#options). For example, by passing `['**/top-*']` and placing `top-menu.yaml` and `top-side-menu.yaml` files in the website's `src/data` folder the top navigation can be overridden completely. If this option is used, the files matching the glob patterns **must** be provided.
+- `overrideDefaultConfigurationData` (_optional_, array of glob strings): allows to replace the configuration files in `src/data` instead of augmenting them. The option is passed to the `ignore` [option of the gatsby filesystem plugin](https://www.gatsbyjs.com/plugins/gatsby-source-filesystem/#options). For example, by passing `['**/top-*']` and placing `top-menu.yaml` and `top-side-menu.yaml` files in the website's `src/data` folder the top navigation can be overridden completely. If this option is used, the files matching the glob patterns **must** be provided.
 
 - `enableCanonicalUrls` (_optional_): indicates that the website should use canonical URLs, pointing to the `docs.commercetools.com` domain. **Default: `true`**
 

websites/documentation/src/content/getting-started/troubleshooting.mdx

@@ -23,7 +23,7 @@ trying to create pages in your gatsby-node.js and that's failing for some
 reason.
 
 If the failing component(s) is a regular component and not intended to be a page
-component, you generally want to use a <StaticQuery> (https://gatsbyjs.org/docs/static-query)
+component, you generally want to use a <StaticQuery> (https://www.gatsbyjs.com/docs/how-to/querying-data/static-query/)
 instead of exporting a page query.
 
 If you're more experienced with GraphQL, you can also export GraphQL