Cloud Projects page revisions

docusaurus.config.js

@@ -265,7 +265,7 @@ const config = {
         darkTheme: darkCodeTheme,
       },
       zoom: {
-        selector: ':not(.mediaImage, .navbar__logo img)', // don't zoom these images
+        selector: ':not(.mediaImage, .navbar__logo img, .logo)', // don't zoom these images
         background: {
           light: 'rgb(50, 50, 50)',
           dark: 'rgb(50, 50, 50)',

src/components/logo/index.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export default function Logo({ alt, src, title }) {
+  return (
+    <img
+      className="logo"
+      src={ src }
+      title={ title }
+      alt={ alt || title }
+    />
+  )
+}

src/css/custom.scss

@@ -326,3 +326,9 @@ div[class^='codeBlockTitle'] {
 .osano-cm-widget {
   display: none;
 }
+
+.logo {
+  width: 20px;
+  display: inline-block;
+  vertical-align: text-top;
+}

src/theme/MDXComponents.js

@@ -22,6 +22,7 @@ import TabItem from "@theme/TabItem";
 import ThenShouldAndDifference from "@site/docs/partials/_then-should-and-difference.mdx";
 import WarningPluginsFile from "@site/docs/partials/_warning-plugins-file.mdx";
 import WarningSetupNodeEvents from "@site/docs/partials/_warning-setup-node-events.mdx";
+import Logo from "@site/src/components/logo";
 
 // Font Awesome
 import { library } from "@fortawesome/fontawesome-svg-core";
@@ -133,4 +134,5 @@ export default {
   ThenShouldAndDifference,
   WarningPluginsFile,
   WarningSetupNodeEvents,
+  Logo
 };