feat(api): improve api authorization page

content/pages/api-reference/api-authorization/api-authorization.md

@@ -1,12 +1,8 @@
 ---
 title: API Authorization
 slug: api-authorization
+headerFormat: "Authorization: 'ApiKey <REPLACE_WITH_API_KEY>'" 
 sort: 2
 ---
 
 Novu API is authorized by passing the ApiKey (generated from the [settings page](https://web.novu.co/settings)) with each request. 
-
-### Header Format
-```
-'Authorization': 'ApiKey REPLACE_WITH_API_KEY' 
-```

content/pages/api-reference/overview/overview.md

@@ -5,4 +5,5 @@ baseUrl: https://api.novu.co/v1
 sort: 1
 ---
 
-The API enables you to access the entire Novu platform using a RESTful API. This API provides a programmatic access to the platform's data and functionality.
+The API enables you to access the entire Novu platform using a RESTful API.
+This API provides a programmatic access to the platform's data and functionality.

src/components/pages/api-reference/api-authorization/api-authorization.jsx

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Code from 'components/shared/code';
+import SectionWrapper from 'components/shared/section-wrapper';
+
+const ApiAuthorization = ({ id, title, headerFormat, content }) => {
+  const strippedHeaderFormat = headerFormat.replace('"', '');
+
+  return (
+    <SectionWrapper id={id}>
+      <div>
+        <h2 className="text-2xl font-medium leading-tight">{title}</h2>
+        <div
+          className="content mt-3 text-base font-book"
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
+      </div>
+      <div className="sm:mt-10">
+        <Code language="bash" title="Header format" content={strippedHeaderFormat} />
+      </div>
+    </SectionWrapper>
+  );
+};
+
+ApiAuthorization.propTypes = {
+  id: PropTypes.string.isRequired,
+  headerFormat: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+};
+
+export default ApiAuthorization;

src/components/pages/api-reference/api-authorization/index.js

@@ -0,0 +1 @@
+export { default } from './api-authorization';

src/templates/main.jsx

@@ -2,6 +2,7 @@
 import { graphql } from 'gatsby';
 import React from 'react';
 
+import ApiAuthorization from 'components/pages/api-reference/api-authorization';
 import Overview from 'components/pages/api-reference/overview';
 import Sections from 'components/pages/main/sections';
 import Layout from 'components/shared/layout';
@@ -41,6 +42,7 @@ const MainPage = ({
     apiAuthorization: {
       id: apiReferenceApiAuthorization.frontmatter.slug,
       title: apiReferenceApiAuthorization.frontmatter.title,
+      headerFormat: apiReferenceApiAuthorization.frontmatter.headerFormat,
       content: apiReferenceApiAuthorization.html,
     },
     clientLibraries: {
@@ -54,7 +56,7 @@ const MainPage = ({
     <Layout pageContext={{ ...pageContext, menu }} location={location} seo={pageContext.seo}>
       {/* API Reference pages */}
       <Overview {...apiReferencePages.overview} />
-      <SectionWithContent {...apiReferencePages.apiAuthorization} />
+      <ApiAuthorization {...apiReferencePages.apiAuthorization} />
       <SectionWithContent {...apiReferencePages.clientLibraries} />
       {/* Swagger pages */}
       <Sections
@@ -99,11 +101,11 @@ export const query = graphql`
       frontmatter {
         title
         slug
+        headerFormat
       }
       html
     }
 
-
     apiReferenceClientLibraries: markdownRemark(
       fileAbsolutePath: { regex: "/pages/api-reference/client-libraries/" }
     ) {