Merge branch 'v4' of github.com:oceanprotocol/docs into issue-908-spelling-issues

config.js

@@ -42,7 +42,7 @@ module.exports = {
     },
     {
       from: '/setup/compute-to-data/',
-      to: '/tutorials/compute-to-data/'
+      to: '/tutorials/compute-to-data-minikube/'
     },
     {
       from: '/concepts/networks-overview/',

content/concepts/compute-to-data.md

@@ -24,7 +24,7 @@ The most basic scenario for a Publisher is to provide access to the datasets the
 
 - [Compute-to-Data architecture](/tutorials/compute-to-data-architecture/)
 - [Tutorial: Writing Algorithms](/tutorials/compute-to-data-algorithms/)
-- [Tutorial: Set Up a Compute-to-Data Environment](/tutorials/compute-to-data/)
+- [Tutorial: Set Up a Compute-to-Data Environment](/tutorials/compute-to-data-minikube/)
 - [Use Compute-to-Data in Ocean Market](https://blog.oceanprotocol.com/compute-to-data-is-now-available-in-ocean-market-58868be52ef7)
 - [Build ML models via Ocean Market or Python](https://medium.com/ravenprotocol/machine-learning-series-using-logistic-regression-for-classification-in-oceans-compute-to-data-18df49b6b165)
 - [Compute-to-Data Python Quickstart](https://github.com/oceanprotocol/ocean.py/blob/main/READMEs/c2d-flow.md)

data/sidebars/concepts.yml

@@ -10,8 +10,6 @@
       link: /concepts/datanft-and-datatoken/
     - title: Roles
       link: /concepts/roles/
-    - title: DIDs & DDOs
-      link: /concepts/did-ddo/
     - title: Supported Networks
       link: /concepts/networks/
 

src/components/Header.jsx

@@ -3,6 +3,7 @@ import { Link, StaticQuery, graphql } from 'gatsby'
 import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
 import styles from './Header.module.scss'
 import SearchButton from './Search/SearchButton'
+import ToggleSwitch from './ToggleSwitch'
 
 const query = graphql`
   query {
@@ -51,6 +52,9 @@ const Header = () => (
               <div className={styles.section}>
                 <SearchButton />
               </div>
+              <div className={styles.section}>
+                <ToggleSwitch />
+              </div>
             </nav>
           </div>
         </header>

src/components/HeaderHome.jsx

@@ -4,6 +4,7 @@ import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
 import Content from '../components/Content'
 import styles from './HeaderHome.module.scss'
 import SearchButton from '../components/Search/SearchButton'
+import ToggleSwitch from './ToggleSwitch'
 
 const HeaderHome = () => (
   <StaticQuery
@@ -27,9 +28,14 @@ const HeaderHome = () => (
             <h1 className={styles.headerTitle}>{siteTitle}</h1>
             <p className={styles.headerDescription}>
               {siteDescription}
-              <div className={styles.searchButtonContainer}>
+              <div className={styles.container}>
                 <SearchButton />
               </div>
+              <div className={styles.container}>
+                <div style={{ display: 'inline-block' }}>
+                  <ToggleSwitch />
+                </div>
+              </div>
             </p>
           </Content>
         </header>

src/components/HeaderHome.module.scss

@@ -47,6 +47,7 @@
   }
 }
 
-.searchButtonContainer {
+.container {
   margin-top: $spacer * 0.5;
+  align-items: 'center';
 }

src/components/ToggleSwitch.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import styles from './ToggleSwitch.module.scss'
+
+const ToggleSwitch = () => {
+  return (
+    <div className={styles.switchButton}>
+      <input
+        className={styles.switchButtonCheckbox}
+        type="checkbox"
+        onClick={() => {
+          if (window) {
+            window.open('https://v3.docs.oceanprotocol.com/', '_self')
+          }
+        }}
+      />
+      <label className={styles.switchButtonLabel} htmlFor="">
+        <span className={styles.switchButtonLabelSpan}>v4</span>
+      </label>
+    </div>
+  )
+}
+
+export default ToggleSwitch

src/components/ToggleSwitch.module.scss

@@ -0,0 +1,69 @@
+@import 'variables';
+
+.switchButton {
+  background: rgba(255, 255, 255, 0.56);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  width: $spacer * 4;
+  text-align: center;
+  font-size: $font-size-base;
+  letter-spacing: 1px;
+  color: $brand-purple;
+  position: relative;
+  padding-right: $spacer * 2;
+
+  &:before {
+    content: 'v3';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: $spacer * 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    pointer-events: none;
+  }
+
+  &Checkbox {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+
+    &:checked + .switchButtonLabel:before {
+      transform: translateX($spacer * 2);
+      transition: transform 300ms linear;
+    }
+
+    & + .switchButtonLabel {
+      position: relative;
+      padding: 0 0;
+      display: block;
+      user-select: none;
+      pointer-events: none;
+
+      &:before {
+        content: '';
+        background: $brand-grey-lighter;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        border-radius: 0.5rem;
+        transform: translateX(0);
+        transition: transform 300ms;
+      }
+
+      .switchButtonLabelSpan {
+        position: relative;
+      }
+    }
+  }
+}