From 0c26c92f3355ebd65b7ab4ad107dc1ef45aa4370 Mon Sep 17 00:00:00 2001
From: p-fernandez <pablo.fernandez.otero@gmail.com>
Date: Tue, 17 Jan 2023 19:55:37 +0000
Subject: [PATCH] feat(api): improve api authorization page

---
 .../api-authorization/api-authorization.md    |  6 +---
 .../pages/api-reference/overview/overview.md  |  3 +-
 .../api-authorization/api-authorization.jsx   | 33 +++++++++++++++++++
 .../api-reference/api-authorization/index.js  |  1 +
 src/templates/main.jsx                        |  6 ++--
 5 files changed, 41 insertions(+), 8 deletions(-)
 create mode 100644 src/components/pages/api-reference/api-authorization/api-authorization.jsx
 create mode 100644 src/components/pages/api-reference/api-authorization/index.js

diff --git a/content/pages/api-reference/api-authorization/api-authorization.md b/content/pages/api-reference/api-authorization/api-authorization.md
index 6f9f0a3..f3fec40 100644
--- a/content/pages/api-reference/api-authorization/api-authorization.md
+++ b/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' 
-```
diff --git a/content/pages/api-reference/overview/overview.md b/content/pages/api-reference/overview/overview.md
index dd590df..e17330c 100644
--- a/content/pages/api-reference/overview/overview.md
+++ b/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.
\ No newline at end of file
+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.
diff --git a/src/components/pages/api-reference/api-authorization/api-authorization.jsx b/src/components/pages/api-reference/api-authorization/api-authorization.jsx
new file mode 100644
index 0000000..0c1f431
--- /dev/null
+++ b/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;
diff --git a/src/components/pages/api-reference/api-authorization/index.js b/src/components/pages/api-reference/api-authorization/index.js
new file mode 100644
index 0000000..19a376f
--- /dev/null
+++ b/src/components/pages/api-reference/api-authorization/index.js
@@ -0,0 +1 @@
+export { default } from './api-authorization';
diff --git a/src/templates/main.jsx b/src/templates/main.jsx
index 92298b4..292eeba 100644
--- a/src/templates/main.jsx
+++ b/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/" }
     ) {