Make the preview images look nicer

src/renderer/image-renderers.ts

@@ -25,9 +25,6 @@ const titleElement = ({ children }) =>
 const waveLogoElement = React.createElement("img", {
     src: waveLogoBase64,
     style: {
-        position: "absolute",
-        top: 20,
-        right: 20,
         width: 300,
     },
 });
@@ -39,20 +36,18 @@ const headerElement = (header: string, svg: ReactNode) =>
             style: {
                 display: "flex",
                 alignItems: "center",
-                position: "absolute",
-                top: 20,
-                left: 40,
+                marginTop: "50px",
             },
         },
         svg,
         React.createElement(
             "label",
             {
                 style: {
-                    fontSize: 50,
+                    fontSize: 30,
                     fontWeight: 600,
                     letterSpacing: 1,
-                    color: "#e3e3e3",
+                    color: "#58c142",
                 },
             },
             header
@@ -64,24 +59,25 @@ const rootDivStyle: React.CSSProperties = {
     flexDirection: "column",
     height: "100%",
     width: "100%",
-    padding: "10px 40px",
+    padding: "50px 50px",
     justifyContent: "center",
     fontFamily: "Roboto",
     fontSize: 32,
     fontWeight: 400,
     backgroundColor: "#1b1b1d",
     color: "#e3e3e3",
     borderBottom: "2rem solid #58c142",
+    zIndex: "2 !important",
 };
 
 export const docOgRenderer: ImageRenderer<DocsPageData> = async (data, context) => {
     const element = React.createElement(
         "div",
         { style: rootDivStyle },
-        React.createElement(titleElement, null, data.metadata.title),
-        React.createElement("div", null, data.metadata.description.replace("&mdash;", "-")),
         waveLogoElement,
-        headerElement(context.siteConfig.title, null)
+        headerElement("Documentation", null),
+        React.createElement(titleElement, null, data.metadata.title),
+        React.createElement("div", null, data.metadata.description.replace("&mdash;", "-"))
     );
 
     return [element, await imageGeneratorOptions()];