diff --git a/docs-src/src/components/browser-window.tsx b/docs-src/src/components/browser-window.tsx
index 82773b0ff3a..eb8c3100d83 100644
--- a/docs-src/src/components/browser-window.tsx
+++ b/docs-src/src/components/browser-window.tsx
@@ -2,7 +2,12 @@
*
* @link https://www.w3schools.com/howto/howto_css_browser_window.asp
*/
-export function BrowserWindow(props) {
+export function BrowserWindow(props: {
+ opacity?: number;
+ iconUrl?: string;
+ iconAlt?: string;
+ children?: any;
+}) {
const opacity = props.opacity ? props.opacity : 1;
const styles = {
@@ -67,15 +72,21 @@ export function BrowserWindow(props) {
borderRadius: 4,
borderWidth: 1,
paddingTop: 3
+ },
+ iconUrl: {
+ position: 'absolute',
+ height: 35,
+ marginLeft: -2,
+ marginTop: -52
}
} as any;
return
-
-
-
+
+
+
@@ -89,8 +100,17 @@ export function BrowserWindow(props) {
-
+ {
+ props.iconUrl ?

: ''
+ }
+

{props.children}
;
diff --git a/docs-src/src/pages/index.tsx b/docs-src/src/pages/index.tsx
index c4fab01d22e..4c9e7ca14d3 100644
--- a/docs-src/src/pages/index.tsx
+++ b/docs-src/src/pages/index.tsx
@@ -240,7 +240,21 @@ async function startLandingpageAnimation() {
});
}
-export default function Home(props) {
+
+/**
+ * For custom pages for search engine marketing,
+ * we can swap out titles texts and icons.
+ */
+export type SemPage = {
+ metaTitle: string;
+ iconUrl?: string;
+ title: any;
+ text: any;
+};
+
+export default function Home(props: {
+ sem?: SemPage;
+}) {
const { siteConfig } = useDocusaurusContext();
const [tags] = useState([
@@ -352,17 +366,27 @@ export default function Home(props) {