diff --git a/config.js b/config.js index acf20322..25c602b1 100644 --- a/config.js +++ b/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/', diff --git a/content/concepts/compute-to-data.md b/content/concepts/compute-to-data.md index da470041..623ef380 100644 --- a/content/concepts/compute-to-data.md +++ b/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) diff --git a/data/sidebars/concepts.yml b/data/sidebars/concepts.yml index 3ad15b48..98d17377 100644 --- a/data/sidebars/concepts.yml +++ b/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/ diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 16d0bf66..0bf03a13 100755 --- a/src/components/Header.jsx +++ b/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 = () => (
+
+ +
diff --git a/src/components/HeaderHome.jsx b/src/components/HeaderHome.jsx index 8f186867..99e24634 100644 --- a/src/components/HeaderHome.jsx +++ b/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 = () => ( (

{siteTitle}

{siteDescription} -

+
+
+
+ +
+

diff --git a/src/components/HeaderHome.module.scss b/src/components/HeaderHome.module.scss index 7fcfadfe..5a4ab8d6 100644 --- a/src/components/HeaderHome.module.scss +++ b/src/components/HeaderHome.module.scss @@ -47,6 +47,7 @@ } } -.searchButtonContainer { +.container { margin-top: $spacer * 0.5; + align-items: 'center'; } diff --git a/src/components/ToggleSwitch.jsx b/src/components/ToggleSwitch.jsx new file mode 100644 index 00000000..6ebda7d2 --- /dev/null +++ b/src/components/ToggleSwitch.jsx @@ -0,0 +1,23 @@ +import React from 'react' +import styles from './ToggleSwitch.module.scss' + +const ToggleSwitch = () => { + return ( +
+ { + if (window) { + window.open('https://v3.docs.oceanprotocol.com/', '_self') + } + }} + /> + +
+ ) +} + +export default ToggleSwitch diff --git a/src/components/ToggleSwitch.module.scss b/src/components/ToggleSwitch.module.scss new file mode 100644 index 00000000..bb762e9f --- /dev/null +++ b/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; + } + } + } +}