pubkey · pubkey · Dec 1, 2024 · Dec 1, 2024
diff --git 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 <div style={styles.container}>
         <div style={styles.row}>
             <div style={{ ...styles.column, ...styles.left }}>
-                <span style={{ ...styles.dot, ...{ background: '#ED594A' } }}></span>
-                <span style={{ ...styles.dot, ...{ background: '#FDD800' } }} ></span>
-                <span style={{ ...styles.dot, ...{ background: '#5AC05A' } }} ></span>
+                <span style={{ ...styles.dot, ...{ background: props.iconUrl ? '' : '#ED594A' } }}></span>
+                <span style={{ ...styles.dot, ...{ background: props.iconUrl ? '' : '#FDD800' } }} ></span>
+                <span style={{ ...styles.dot, ...{ background: props.iconUrl ? '' : '#5AC05A' } }} ></span>
             </div>
             <div style={{ ...styles.column, ...styles.middle }}>
                 <input type="text" value="" disabled style={styles.input} />
@@ -89,8 +100,17 @@ export function BrowserWindow(props) {
             </div>
             <div className='clear'></div>
         </div >
-
         <div style={styles.content}>
+            {
+                props.iconUrl ? <img src={props.iconUrl} style={{ ...styles.iconUrl }} alt={props.iconAlt}></img> : ''
+            }
+            <img
+                // src="/img/hero.svg"
+                src="/files/logo/logo_text.svg"
+                className="hero-img"
+                style={{ padding: 40, paddingLeft: 80, paddingRight: 80 }}
+                alt="rxdb-image"
+            />
             {props.children}
         </div>
     </div>;

diff --git 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) {
         <body className="homepage" />
       </Head>
       <Layout
-        title={props.metaTitle ? props.metaTitle : siteConfig.title}
+        title={props.sem ? props.sem.metaTitle : siteConfig.title}
         description="RxDB is a fast, local-first NoSQL-database for JavaScript Applications like Websites, hybrid Apps, Electron-Apps, Progressive Web Apps and Node.js">
         <main>
           <div className="block first hero centered dark">
             <div className="content">
               <div className="inner">
                 <div className="half left">
+                  {
+                    props.sem ? (
+                      <div style={{ width: '100%', textAlign: 'left' }}>
+                        <img src={props.sem.iconUrl} style={{
+                          marginLeft: '40%',
+                          height: 51
+                        }} alt={props.sem.metaTitle}></img>
+                      </div>
+                    ) : <></>
+                  }
                   <h1 style={{
                   }}>
                     {
-                      props.title ? props.title : <>The local <b className="underline">Database</b> for{' '}
+                      props.sem ? props.sem.title : <>The local <b className="underline">Database</b> for{' '}
                         <b className="underline">JavaScript</b> Applications</>
                     }
                   </h1>
@@ -396,7 +420,7 @@ export default function Home(props) {
                   </ul> */}
                   <div className="text">
                     {
-                      props.text ? props.text : <>Store data locally to build high performance realtime applications that sync data with the backend and even work when offline.</>
+                      props.sem ? props.sem.text : <>Store data locally to build high performance realtime applications that sync data with the backend and even work when offline.</>
                     }
                   </div>
 
@@ -447,14 +471,7 @@ export default function Home(props) {
                   }}
                 >
                   <div style={{ paddingLeft: 80, paddingRight: 80 }}>
-                    <BrowserWindow opacity={0.3}>
-                      <img
-                        // src="/img/hero.svg"
-                        src="/files/logo/logo_text.svg"
-                        className="hero-img"
-                        style={{ padding: 40, paddingLeft: 80, paddingRight: 80 }}
-                        alt="rxdb-image"
-                      />
+                    <BrowserWindow opacity={0.3} iconUrl={props.sem ? props.sem.iconUrl : undefined} iconAlt={props.sem ? props.sem.metaTitle : undefined}>
                     </BrowserWindow>
                   </div>
                   {/* <img
@@ -580,6 +597,20 @@ export default function Home(props) {
                       style={{ marginLeft: 481, marginTop: 117 }}
                     >
                       <div className="beating-color">
+                        {
+                          props.sem ? <>
+                            <img src={props.sem.iconUrl} style={{
+                              height: 23,
+                              width: 23,
+                              position: 'absolute',
+                              marginLeft: -83, marginTop: 95, zIndex: 2,
+                              backgroundColor: 'white',
+                              padding: 2,
+                              borderRadius: '50%'
+                            }}
+                              alt={props.sem.metaTitle}></img>
+                          </> : <></>
+                        }
                         <img
                           src="/files/logo/logo.svg"
                           className="beating logo"
@@ -589,6 +620,20 @@ export default function Home(props) {
                     </div>
                     <div className="device desktop" style={{ marginTop: '0%' }}>
                       <div className="beating-color">
+                        {
+                          props.sem ? <>
+                            <img src={props.sem.iconUrl} style={{
+                              height: 30,
+                              width: 30,
+                              position: 'absolute', marginLeft: -224, marginTop: 104, zIndex: 2,
+                              borderRadius: '50%',
+                              backgroundColor: 'white',
+                              padding: 2,
+
+                            }}
+                              alt={props.sem.metaTitle}></img>
+                          </> : <></>
+                        }
                         <img
                           src="/files/logo/logo.svg"
                           className="beating logo"

diff --git a/docs-src/src/pages/sem/angular-database.tsx b/docs-src/src/pages/sem/angular-database.tsx
@@ -0,0 +1,13 @@
+import Home from '..';
+
+export default function Page() {
+    return Home({
+        sem: {
+            metaTitle: 'The local Database for Angular Apps',
+            title: <>The local <b className="underline">Database</b> for{' '}
+                <b className="underline">Angular</b> Apps</>,
+            text: <>Store data inside of your angular app to build high performance realtime applications that sync data from the backend and even work when offline.</>,
+            iconUrl: '/files/icons/angular.svg'
+        }
+    });
+}
diff --git a/docs-src/src/pages/sem/browser-database.tsx b/docs-src/src/pages/sem/browser-database.tsx
@@ -2,9 +2,11 @@ import Home from '..';
 
 export default function Page() {
     return Home({
-        metaTitle: 'The local Database for Browsers',
-        title: <>The local <b className="underline">Database</b> for{' '}
-            <b className="underline">Browsers</b></>,
-        text: <>Store data inside the Browser to build high performance realtime applications that sync data from the backend and even work when offline.</>
+        sem: {
+            metaTitle: 'The local Database for Browsers',
+            title: <>The local <b className="underline">Database</b> for{' '}
+                <b className="underline">Browsers</b></>,
+            text: <>Store data inside the Browser to build high performance realtime applications that sync data from the backend and even work when offline.</>
+        }
     });
 }
diff --git a/docs-src/src/pages/sem/capacitor-database.tsx b/docs-src/src/pages/sem/capacitor-database.tsx
@@ -0,0 +1,13 @@
+import Home from '..';
+
+export default function Page() {
+    return Home({
+        sem: {
+            title: <>The local <b className="underline">Database</b> for{' '}
+                <b className="underline">Capacitor</b> Apps</>,
+            text: <>Store data inside your Capacitor Hybrid App to build high performance realtime applications that sync data with the backend and even work when offline.</>,
+            iconUrl: '/files/icons/capacitor.svg',
+            metaTitle: 'Capacitor Database'
+        }
+    });
+}
diff --git a/docs-src/src/pages/sem/electron-database.tsx b/docs-src/src/pages/sem/electron-database.tsx
@@ -2,8 +2,12 @@ import Home from '..';
 
 export default function Page() {
     return Home({
-        title: <>The local <b className="underline">Database</b> for{' '}
-            <b className="underline">Electron</b> Applications</>,
-        text: <>Store data inside your Electron.js Desktop App to build high performance realtime applications that sync data with the backend and even work when offline.</>
+        sem: {
+            title: <>The local <b className="underline">Database</b> for{' '}
+                <b className="underline">Electron</b> Applications</>,
+            text: <>Store data inside your Electron.js Desktop App to build high performance realtime applications that sync data with the backend and even work when offline.</>,
+            iconUrl: '/files/icons/electron.svg',
+            metaTitle: 'Local Electron Database'
+        }
     });
 }
diff --git a/docs-src/src/pages/sem/firestore-alternative.tsx b/docs-src/src/pages/sem/firestore-alternative.tsx
@@ -2,9 +2,11 @@ import Home from '..';
 
 export default function Page() {
     return Home({
-        metaTitle: 'The Open Source alternative for Firestore',
-        title: <>The <b className="underline">Open Source</b> alternative for {' '}
-            <b className="underline">Firestore</b></>,
-        text: <>Store data inside the Browser to build high performance realtime applications that sync data from the backend and even work when offline.</>
+        sem: {
+            metaTitle: 'The Open Source alternative for Firestore',
+            title: <>The <b className="underline">Open Source</b> alternative for {' '}
+                <b className="underline">Firestore</b></>,
+            text: <>Store data inside the Browser to build high performance realtime applications that sync data from the backend and even work when offline.</>
+        }
     });
 }
diff --git a/docs-src/src/pages/sem/indexeddb-database.tsx b/docs-src/src/pages/sem/indexeddb-database.tsx
@@ -2,9 +2,11 @@ import Home from '..';
 
 export default function Page() {
     return Home({
-        metaTitle: 'The best Database on top of IndexedDB',
-        title: <>The best <b className="underline">Database</b> on top of{' '}
-            <b className="underline">IndexedDB</b></>,
-        text: <>Store data inside the Browsers IndexedDB to build high performance realtime applications that sync data from the backend and even work when offline.</>
+        sem: {
+            metaTitle: 'The best Database on top of IndexedDB',
+            title: <>The best <b className="underline">Database</b> on top of{' '}
+                <b className="underline">IndexedDB</b></>,
+            text: <>Store data inside the Browsers IndexedDB to build high performance realtime applications that sync data from the backend and even work when offline.</>
+        }
     });
 }
diff --git a/docs-src/src/pages/sem/ionic-database.tsx b/docs-src/src/pages/sem/ionic-database.tsx
@@ -0,0 +1,13 @@
+import Home from '..';
+
+export default function Page() {
+    return Home({
+        sem: {
+            metaTitle: 'The local Database for Ionic Apps',
+            title: <>The local <b className="underline">Database</b> for{' '}
+                <b className="underline">Ionic</b> Apps</>,
+            text: <>Store data inside of your Ionic app to build high performance realtime applications that sync data from the backend and even work when offline.</>,
+            iconUrl: '/files/icons/ionic.svg'
+        }
+    });
+}
diff --git a/docs-src/src/pages/sem/localstorage-database.tsx b/docs-src/src/pages/sem/localstorage-database.tsx
@@ -2,9 +2,11 @@ import Home from '..';
 
 export default function Page() {
     return Home({
-        metaTitle: 'The best Database on top of localstorage',
-        title: <>The best <b className="underline">Database</b> on top of{' '}
-            <b className="underline">localstorage</b></>,
-        text: <>Store data inside the Browsers localstorage to build high performance realtime applications that sync data from the backend and even work when offline.</>
+        sem: {
+            metaTitle: 'The best Database on top of localstorage',
+            title: <>The best <b className="underline">Database</b> on top of{' '}
+                <b className="underline">localstorage</b></>,
+            text: <>Store data inside the Browsers localstorage to build high performance realtime applications that sync data from the backend and even work when offline.</>
+        }
     });
 }
diff --git a/docs-src/src/pages/sem/nedb-alternative.tsx b/docs-src/src/pages/sem/nedb-alternative.tsx
@@ -2,9 +2,11 @@ import Home from '..';
 
 export default function Page() {
     return Home({
-        metaTitle: 'The modern alternative for NeDB',
-        title: <>The <b className="underline">modern</b> alternative for{' '}
-            <b className="underline">NeDB</b></>,
-        text: <>Store data inside the Browser to build high performance realtime applications that sync data from the backend and even work when offline.</>
+        sem: {
+            metaTitle: 'The modern alternative for NeDB',
+            title: <>The <b className="underline">modern</b> alternative for{' '}
+                <b className="underline">NeDB</b></>,
+            text: <>Store data inside the Browser to build high performance realtime applications that sync data from the backend and even work when offline.</>
+        }
     });
 }
diff --git a/docs-src/src/pages/sem/nodejs-database.tsx b/docs-src/src/pages/sem/nodejs-database.tsx
@@ -2,9 +2,11 @@ import Home from '..';
 
 export default function Page() {
     return Home({
-        metaTitle: 'The local Database for Node.js',
-        title: <>The local <b className="underline">Database</b> for{' '}
-            <b className="underline">Node.js</b></>,
-        text: <>Fast in-app database for Node.js. Build high performance realtime applications that sync data from the anywhere and even work when offline.</>
+        sem: {
+            metaTitle: 'The local Database for Node.js',
+            title: <>The local <b className="underline">Database</b> for{' '}
+                <b className="underline">Node.js</b></>,
+            text: <>Fast in-app database for Node.js. Build high performance realtime applications that sync data from the anywhere and even work when offline.</>
+        }
     });
 }
diff --git a/docs-src/src/pages/sem/nosql-database.tsx b/docs-src/src/pages/sem/nosql-database.tsx
@@ -2,9 +2,11 @@ import Home from '..';
 
 export default function Page() {
     return Home({
-        metaTitle: 'The NoSQL Database for JavaScript Applications',
-        title: <>The NoSQL <b className="underline">Database</b> for{' '}
-            <b className="underline">JavaScript</b> Applications</>,
-        text: <>Store NoSQL data inside your App to build high performance realtime applications that sync data with the backend and even work when offline.</>
+        sem: {
+            metaTitle: 'The NoSQL Database for JavaScript Applications',
+            title: <>The NoSQL <b className="underline">Database</b> for{' '}
+                <b className="underline">JavaScript</b> Applications</>,
+            text: <>Store NoSQL data inside your App to build high performance realtime applications that sync data with the backend and even work when offline.</>
+        }
     });
 }
diff --git a/docs-src/src/pages/sem/pouchdb-alternative.tsx b/docs-src/src/pages/sem/pouchdb-alternative.tsx
@@ -2,9 +2,11 @@ import Home from '..';
 
 export default function Page() {
     return Home({
-        metaTitle: 'The NoSQL alternative for PouchDB',
-        title: <>The <b className="underline">modern</b> alternative for{' '}
-            <b className="underline">PouchDB</b></>,
-        text: <>Store data inside the Browser to build high performance realtime applications that sync data from the backend and even work when offline.</>
+        sem: {
+            metaTitle: 'The NoSQL alternative for PouchDB',
+            title: <>The <b className="underline">modern</b> alternative for{' '}
+                <b className="underline">PouchDB</b></>,
+            text: <>Store data inside the Browser to build high performance realtime applications that sync data from the backend and even work when offline.</>
+        }
     });
 }
diff --git a/docs-src/src/pages/sem/react-database.tsx b/docs-src/src/pages/sem/react-database.tsx
@@ -0,0 +1,13 @@
+import Home from '..';
+
+export default function Page() {
+    return Home({
+        sem: {
+            metaTitle: 'The local Database for React Apps',
+            title: <>The local <b className="underline">Database</b> for{' '}
+                <b className="underline">React</b> Apps</>,
+            text: <>Store data inside of your React app to build high performance realtime applications that sync data from the backend and even work when offline.</>,
+            iconUrl: '/files/icons/react.svg'
+        }
+    });
+}
diff --git a/docs-src/src/pages/sem/react-native-database.tsx b/docs-src/src/pages/sem/react-native-database.tsx
@@ -2,9 +2,12 @@ import Home from '..';
 
 export default function Page() {
     return Home({
-        metaTitle: 'The local Database for React Native',
-        title: <>The local <b className="underline">Database</b> for{' '}
-            <b className="underline">React Native</b></>,
-        text: <>Store data inside your React Native App to build high performance realtime applications that sync data from React-Native to the backend and even work when offline.</>
+        sem: {
+            metaTitle: 'The local Database for React Native',
+            title: <>The local <b className="underline">Database</b> for{' '}
+                <b className="underline">React Native</b></>,
+            text: <>Store data inside your React Native App to build high performance realtime applications that sync data from React-Native to the backend and even work when offline.</>,
+            iconUrl: '/files/icons/react.svg'
+        }
     });
 }