From dbe6b9308d7b957f2ce7d06f95cdb48fb85c1a1e Mon Sep 17 00:00:00 2001
From: Johan Haals <johan.haals@gmail.com>
Date: Tue, 13 Dec 2022 11:41:00 +0100
Subject: [PATCH 1/4] Fix docs for microsite-next

Signed-off-by: Johan Haals <johan.haals@gmail.com>
---
 docs/features/search/how-to-guides.md    | 6 +++---
 docs/features/techdocs/how-to-guides.md  | 6 +++---
 docs/getting-started/homepage.md         | 4 ++--
 docs/overview/versioning-policy.md       | 2 +-
 docs/releases/v1.2.0-changelog.md        | 4 ++--
 docs/releases/v1.2.0-next.1-changelog.md | 2 +-
 docs/releases/v1.2.0-next.3-changelog.md | 2 +-
 7 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/docs/features/search/how-to-guides.md b/docs/features/search/how-to-guides.md
index 5cc2ab5f06..7267e9fd5b 100644
--- a/docs/features/search/how-to-guides.md
+++ b/docs/features/search/how-to-guides.md
@@ -1,8 +1,8 @@
 ---
 id: how-to-guides
-title: Search "HOW TO" guides
-sidebar_label: "HOW TO" guides
-description: Search "HOW TO" guides
+title: Search How-To guides
+sidebar_label: How-To guides
+description: Search How To guides
 ---
 
 ## How to implement your own Search API
diff --git a/docs/features/techdocs/how-to-guides.md b/docs/features/techdocs/how-to-guides.md
index 70ea27821b..cfca7c6a7f 100644
--- a/docs/features/techdocs/how-to-guides.md
+++ b/docs/features/techdocs/how-to-guides.md
@@ -1,8 +1,8 @@
 ---
 id: how-to-guides
-title: TechDocs "HOW TO" guides
-sidebar_label: "HOW TO" guides
-description: TechDocs "HOW TO" guides related to TechDocs
+title: TechDocs How-To guides
+sidebar_label: How-To guides
+description: TechDocs How-To guides related to TechDocs
 ---
 
 ## How to migrate from TechDocs Basic to Recommended deployment approach?
diff --git a/docs/getting-started/homepage.md b/docs/getting-started/homepage.md
index 2d34998013..7db41d7768 100644
--- a/docs/getting-started/homepage.md
+++ b/docs/getting-started/homepage.md
@@ -84,8 +84,8 @@ Let's update the route for "Home" in the Backstage sidebar to point to the new h
 
 <table>
   <tr>
-    <th><img data-zoomable src="../assets/getting-started/sidebar-without-catalog.png" alt="Sidebar without Catalog" /></td>
-    <th><img data-zoomable src="../assets/getting-started/sidebar-with-catalog.png" alt="Sidebar with Catalog" /></td>
+    <th><img data-zoomable src="../assets/getting-started/sidebar-without-catalog.png" alt="Sidebar without Catalog" /></th>
+    <th><img data-zoomable src="../assets/getting-started/sidebar-with-catalog.png" alt="Sidebar with Catalog" /></th>
   </tr>
   <tr align="center">
     <td>Before</td>
diff --git a/docs/overview/versioning-policy.md b/docs/overview/versioning-policy.md
index 10ffc82188..ad5421585e 100644
--- a/docs/overview/versioning-policy.md
+++ b/docs/overview/versioning-policy.md
@@ -1,7 +1,7 @@
 ---
 id: versioning-policy
 title: Release & Versioning Policy
-description:
+description: The process and policy for releasing and versioning Backstage
 ---
 
 The Backstage project is comprised of a set of software components that together
diff --git a/docs/releases/v1.2.0-changelog.md b/docs/releases/v1.2.0-changelog.md
index 30c780e7ae..977f8a25b7 100644
--- a/docs/releases/v1.2.0-changelog.md
+++ b/docs/releases/v1.2.0-changelog.md
@@ -722,7 +722,7 @@
 
 ### Patch Changes
 
-- ac19f82936: Added ARIA landmark <main> to Page component and added ARIA landmark <nav> to DesktopSidebar and Sidebar components
+- ac19f82936: Added ARIA landmark `<main>` to Page component and added ARIA landmark `<nav>` to DesktopSidebar and Sidebar components
 - 55f68c386a: Enabled select component to be enabled by keyboard
 - c0055ece91: Announce external links to screen readers
 - e210c0cab8: Add ability to customize `Read More` destination with `readMoreUrl` prop for `MissingAnnotationEmptyState` component.
@@ -733,7 +733,7 @@
 - e462112be5: Updated dependency `rc-progress` to `3.3.2`.
 - 2bcb0a0e2b: Sidebar NAV now includes aria-label. Component AboutField now uses h2 variant instead of subtitle2 (font properties unchanged)
 - c7f32b53a4: Fixed multiple scrolls appearing on Page when added InfoCard with external bottom link
-- 3603014e0e: Add ARIA landmark( <main>), & label and a heading to OAuthRequestDialog. Removed nested interactive control (button).
+- 3603014e0e: Add ARIA landmark( `<main>`), & label and a heading to OAuthRequestDialog. Removed nested interactive control (button).
 - 2025d7c123: Properly highlight `SidebarSubmenuItem` dropdown items on hover, use ellipsis styling on long labels in `SidebarSubmenu`, allow `icon` and `to` properties to be optional on `SidebarSubmenuItem`, and fix `SidebarPage` padding to be responsive to pinned state
 - 2295b4ab2b: Add controls to Storybook stories
 - 521293b22e: Added a chevron Indicator when the sidebar is collapsed and has a sub-menu
diff --git a/docs/releases/v1.2.0-next.1-changelog.md b/docs/releases/v1.2.0-next.1-changelog.md
index d7b843be48..5881f7caff 100644
--- a/docs/releases/v1.2.0-next.1-changelog.md
+++ b/docs/releases/v1.2.0-next.1-changelog.md
@@ -169,7 +169,7 @@
 
 ### Patch Changes
 
-- ac19f82936: Added ARIA landmark <main> to Page component and added ARIA landmark <nav> to DesktopSidebar and Sidebar components
+- ac19f82936: Added ARIA landmark `<main>` to Page component and added ARIA landmark `<nav>` to DesktopSidebar and Sidebar components
 - c0055ece91: Announce external links to screen readers
 - cfc0f2e5bd: Added optional anchorOrigin alignment prop to AlertDisplay
 - f4380eb602: Add an aria-label to the support button to improve accessibility for screen readers
diff --git a/docs/releases/v1.2.0-next.3-changelog.md b/docs/releases/v1.2.0-next.3-changelog.md
index 4efce476d4..81c16c74ea 100644
--- a/docs/releases/v1.2.0-next.3-changelog.md
+++ b/docs/releases/v1.2.0-next.3-changelog.md
@@ -5,7 +5,7 @@
 ### Patch Changes
 
 - 52c02ac02b: Don't set the background color on an Avatar component that has a picture.
-- 3603014e0e: Add ARIA landmark( <main>), & label and a heading to OAuthRequestDialog. Removed nested interactive control (button).
+- 3603014e0e: Add ARIA landmark( `<main>`), & label and a heading to OAuthRequestDialog. Removed nested interactive control (button).
 - 2025d7c123: Properly highlight `SidebarSubmenuItem` dropdown items on hover, use ellipsis styling on long labels in `SidebarSubmenu`, allow `icon` and `to` properties to be optional on `SidebarSubmenuItem`, and fix `SidebarPage` padding to be responsive to pinned state
 
 ## @backstage/plugin-home@0.4.21-next.3

From 9b0c053e91f6d88ad3c79937bb89eea6d68fa070 Mon Sep 17 00:00:00 2001
From: Johan Haals <johan.haals@gmail.com>
Date: Tue, 13 Dec 2022 11:41:54 +0100
Subject: [PATCH 2/4] microsite-next: serve docs from docs folder

Signed-off-by: Johan Haals <johan.haals@gmail.com>
---
 microsite-next/docs/init.md         | 8 --------
 microsite-next/docusaurus.config.js | 2 +-
 2 files changed, 1 insertion(+), 9 deletions(-)
 delete mode 100644 microsite-next/docs/init.md

diff --git a/microsite-next/docs/init.md b/microsite-next/docs/init.md
deleted file mode 100644
index fcc9a7e11c..0000000000
--- a/microsite-next/docs/init.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-id: init
-title: Init
-# prettier-ignore
-description: This will be replaced by the docs
----
-
-TBD
diff --git a/microsite-next/docusaurus.config.js b/microsite-next/docusaurus.config.js
index 74ffaa2d37..2b37ae20b2 100644
--- a/microsite-next/docusaurus.config.js
+++ b/microsite-next/docusaurus.config.js
@@ -45,7 +45,7 @@ module.exports = {
           showLastUpdateAuthor: true,
           showLastUpdateTime: true,
           editUrl: 'https://github.com/backstage/backstage/edit/master/docs/',
-          path: 'docs',
+          path: '../docs',
           sidebarPath: 'sidebars.json',
         },
         blog: {

From cb5393aefe6972e514da1584e7db4a389d539d5d Mon Sep 17 00:00:00 2001
From: Johan Haals <johan.haals@gmail.com>
Date: Tue, 13 Dec 2022 14:20:46 +0100
Subject: [PATCH 3/4] Fix markdown styling

Signed-off-by: Johan Haals <johan.haals@gmail.com>
---
 docs/api/utility-apis.md               | 14 +++++++-------
 docs/overview/logos.md                 |  4 ++--
 microsite-next/src/css/customTheme.css | 26 ++++++++++++++++++++++++++
 microsite/static/css/custom.css        | 26 ++++++++++++++++++++++++++
 4 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/docs/api/utility-apis.md b/docs/api/utility-apis.md
index 017c5b699d..a69c874307 100644
--- a/docs/api/utility-apis.md
+++ b/docs/api/utility-apis.md
@@ -283,14 +283,14 @@ long as they adhere to the contract established by an
 implementation they want.
 
 The figure below shows the relationship between
-<span style="color: #82b366">different Apps</span>, that provide
-<span style="color: #6c8ebf">different implementations</span> of the
-<span style="color: #9673a6">FooApi</span>.
-<span style="color: #d6b656">Components</span> within Plugins then access the
-<span style="color: #9673a6">FooApi</span> via the
-<span style="color: #b85450">fooApiRef</span>.
+<span class="textGreen" className="textGreen">different Apps</span>, that provide
+<span class="textBlue" className="textBlue"> different implementations</span> of the
+<span class="textPurple" className="textPurple"> FooApi</span>.
+<span class="textYellow" className="textYellow"> Components</span> within Plugins then access the
+<span class="textPurple" className="textPurple"> FooApi</span> via the
+<span class="textRed" className="textRed"> fooApiRef</span>.
 
-<div style="text-align:center">
+<div className="textAlignCenter" class="textAlignCenter">
 <img src="../assets/utility-apis-fig1.svg" alt="Figure showing the relationship between utility APIs, the apps that provide them, and the plugins that consume them" />
 </div>
 
diff --git a/docs/overview/logos.md b/docs/overview/logos.md
index 9421b7f31e..0739c3731e 100644
--- a/docs/overview/logos.md
+++ b/docs/overview/logos.md
@@ -21,7 +21,7 @@ The assets below are all in `.svg` format. Other formats are available in the
 </a>
 
 <a href="https://backstage.io/logo_assets/svg/Logo_Black.svg">
-  <img src="https://backstage.io/logo_assets/svg/Logo_Black.svg" width="600" style="background-color:white" />
+  <img src="https://backstage.io/logo_assets/svg/Logo_Black.svg" width="600" className="logoWhite" class="logoWhite" />
 </a>
 
 ## Backstage icon
@@ -37,6 +37,6 @@ The assets below are all in `.svg` format. Other formats are available in the
     <img src="https://backstage.io/logo_assets/svg/Icon_Gradient.svg" width="180" height="180" />
   </a>
   <a href="https://backstage.io/logo_assets/svg/Icon_Black.svg">
-    <img src="https://backstage.io/logo_assets/svg/Icon_Black.svg" width="180" height="180" style="background-color:white" />
+    <img src="https://backstage.io/logo_assets/svg/Icon_Black.svg" width="180" height="180" style={{"background-color":"white"}} />
   </a>
 </div>
diff --git a/microsite-next/src/css/customTheme.css b/microsite-next/src/css/customTheme.css
index 4e99bc57d3..3b71d51d62 100644
--- a/microsite-next/src/css/customTheme.css
+++ b/microsite-next/src/css/customTheme.css
@@ -19,3 +19,29 @@
 .copyright {
   font-size: 10pt;
 }
+
+/* logo.md */
+.logoWhite {
+  background-color: white;
+}
+
+/* Utility API Styling */
+.textGreen {
+  color: #82b366;
+}
+.textBlue {
+  color: #6c8ebf;
+}
+.textPurple {
+  color: #9673a6;
+}
+.textYellow {
+  color: #d6b656;
+}
+.textRed {
+  color: #b85450;
+}
+.textAlignCenter {
+  text-align: center;
+}
+/* End of Utility API Styling */
diff --git a/microsite/static/css/custom.css b/microsite/static/css/custom.css
index dd8fada3b7..e6a230ee52 100644
--- a/microsite/static/css/custom.css
+++ b/microsite/static/css/custom.css
@@ -1294,3 +1294,29 @@ h3.collapsible span.arrow {
 #Sidebar__HubSpotContainer.submitted-message p {
   color: rgb(0, 0, 0);
 }
+
+/* logo.md */
+.logoWhite {
+  background-color: white;
+}
+
+/* Utility API Styling */
+.textGreen {
+  color: #82b366;
+}
+.textBlue {
+  color: #6c8ebf;
+}
+.textPurple {
+  color: #9673a6;
+}
+.textYellow {
+  color: #d6b656;
+}
+.textRed {
+  color: #b85450;
+}
+.textAlignCenter {
+  text-align: center;
+}
+/* End of Utility API Styling */

From 5b08ea69133284b287449bc1272c30299d4620d1 Mon Sep 17 00:00:00 2001
From: Johan Haals <johan.haals@gmail.com>
Date: Tue, 13 Dec 2022 14:50:35 +0100
Subject: [PATCH 4/4] fix style

Signed-off-by: Johan Haals <johan.haals@gmail.com>
---
 docs/overview/logos.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/overview/logos.md b/docs/overview/logos.md
index 0739c3731e..ac54640e33 100644
--- a/docs/overview/logos.md
+++ b/docs/overview/logos.md
@@ -37,6 +37,6 @@ The assets below are all in `.svg` format. Other formats are available in the
     <img src="https://backstage.io/logo_assets/svg/Icon_Gradient.svg" width="180" height="180" />
   </a>
   <a href="https://backstage.io/logo_assets/svg/Icon_Black.svg">
-    <img src="https://backstage.io/logo_assets/svg/Icon_Black.svg" width="180" height="180" style={{"background-color":"white"}} />
+    <img src="https://backstage.io/logo_assets/svg/Icon_Black.svg" width="180" height="180" className="logoWhite" class="logoWhite" />
   </a>
 </div>