oceanprotocol/docs
1
0
Fork 0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-06-29 00:58:02 +02:00
Code Releases Activity

Issue-#695: Resolve merge conflict

Browse Source
This commit is contained in:
Akshay 2021-09-29 21:21:46 +02:00
commit 933338efd5
30 changed files with 975 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
content/concepts/networks.md
View File

@ -9,7 +9,6 @@ In each network, you’ll need ETH to pay for gas, and OCEAN for certain Ocean a
The universal Aquarius Endpoint is `https://aquarius.oceanprotocol.com`.
## Ethereum Mainnet
The Ethereum Mainnet is Ocean’s production network.
@ -41,7 +40,7 @@ Ocean is [deployed](https://blog.oceanprotocol.com/ocean-on-polygon-network-8aba
If you don't find Polygon as a predefined network in your wallet, you can connect to it manually via [this guide](/tutorials/metamask-setup/#set-up-custom-network) and the parameters below.
| What | Value |
|--------------------|------------------------------------------|
| ------------------ | ---------------------------------------- |
| Network Name | `Matic Mainnet` |
| RPC | `https://rpc.polygon.oceanprotocol.com/` |
| Chain Id | `137` |
@ -57,15 +56,14 @@ If you don't find Polygon as a predefined network in your wallet, you can connec
- Address: [0x282d8efCe846A88B159800bd4130ad77443Fa1A1](https://polygonscan.com/token/0x282d8efCe846A88B159800bd4130ad77443Fa1A1)
- [Exchanges to purchase](https://oceanprotocol.com/token#get)
**Additional Components**
| What | URL |
| ------------ | -------------------------------------------- |
| Explorer | https://polygonscan.com/ |
| What | URL |
| ------------ | -------------------------------------------------------------------- |
| Explorer | https://polygonscan.com/ |
| Ocean Market | Point wallet to Polygon network, at https://market.oceanprotocol.com |
| Provider | `https://provider.polygon.oceanprotocol.com` |
| Subgraph | `https://subgraph.polygon.oceanprotocol.com` |
| Provider | `https://provider.polygon.oceanprotocol.com` |
| Subgraph | `https://subgraph.polygon.oceanprotocol.com` |
**Bridge**
@ -77,13 +75,13 @@ Ocean is deployed to [Binance Smart Chain (BSC)](https://academy.binance.com/en/
If you don't find BSC as a predefined network in your wallet, you can connect to it manually via [Binance's guide](https://academy.binance.com/en/articles/connecting-metamask-to-binance-smart-chain) or [Ocean's guide](/tutorials/metamask-setup/#set-up-custom-network) and the parameters below.
| What | Value |
|--------------------|------------------------------------------|
| Network Name | `Smart Chain` |
| RPC | `https://bsc-dataseed.binance.org/` |
| Chain Id | `56` |
| Currency Symbol | `BNB` |
| Block Explorer URL | `https://bscscan.com` |
| What | Value |
| ------------------ | ----------------------------------- |
| Network Name | `Smart Chain` |
| RPC | `https://bsc-dataseed.binance.org/` |
| Chain Id | `56` |
| Currency Symbol | `BNB` |
| Block Explorer URL | `https://bscscan.com` |
**Tokens**
@ -96,12 +94,12 @@ If you don't find BSC as a predefined network in your wallet, you can connect to
**Additional Components**
| What | URL |
|--------------|-----------------------------------------------------------------------|
| Explorer | https://bscscan.com/ |
| Ocean Market | Point wallet to BSC network, at https://market.oceanprotocol.com |
| Provider | `https://provider.bsc.oceanprotocol.com` |
| Subgraph | `https://subgraph.bsc.oceanprotocol.com` |
| What | URL |
| ------------ | ---------------------------------------------------------------- |
| Explorer | https://bscscan.com/ |
| Ocean Market | Point wallet to BSC network, at https://market.oceanprotocol.com |
| Provider | `https://provider.bsc.oceanprotocol.com` |
| Subgraph | `https://subgraph.bsc.oceanprotocol.com` |
**Bridge**
@ -124,12 +122,12 @@ In MetaMask and other ERC20 wallets, click on the network name dropdown, then se
**Additional Components**
| What | URL |
| ------------ | ---------------------------------------------------------------------- |
| Explorer | https://ropsten.etherscan.io |
| Ocean Market | Point wallet to Ropsten network, at https://market.oceanprotocol.com |
| Provider | `https://provider.ropsten.oceanprotocol.com` |
| Subgraph | `https://subgraph.ropsten.oceanprotocol.com` |
| What | URL |
| ------------ | -------------------------------------------------------------------- |
| Explorer | https://ropsten.etherscan.io |
| Ocean Market | Point wallet to Ropsten network, at https://market.oceanprotocol.com |
| Provider | `https://provider.ropsten.oceanprotocol.com` |
| Subgraph | `https://subgraph.ropsten.oceanprotocol.com` |
## Rinkeby
@ -148,13 +146,12 @@ In MetaMask and other ERC20 wallets, click on the network name dropdown, then se
**Additional Components**
| What | URL |
| ------------ | ---------------------------------------------------------------------- |
| Explorer | https://rinkeby.etherscan.io |
| Ocean Market | Point wallet to Rinkeby network, at https://market.oceanprotocol.com |
| Provider | `https://provider.rinkeby.oceanprotocol.com` |
| Subgraph | `https://subgraph.rinkeby.oceanprotocol.com` |
| What | URL |
| ------------ | -------------------------------------------------------------------- |
| Explorer | https://rinkeby.etherscan.io |
| Ocean Market | Point wallet to Rinkeby network, at https://market.oceanprotocol.com |
| Provider | `https://provider.rinkeby.oceanprotocol.com` |
| Subgraph | `https://subgraph.rinkeby.oceanprotocol.com` |
## Mumbai
@ -169,16 +166,16 @@ If you don't find Mumbai as a predefined network in your wallet, you can connect
- [Faucet](https://faucet.matic.network/). You may find others by [searching](https://www.google.com/search?q=mumbai+faucet).
- Mumbai OCEAN:
- Address: [0xd8992Ed72C445c35Cb4A2be468568Ed1079357c8](https://mumbai.polygonscan.com/token/0xd8992Ed72C445c35Cb4A2be468568Ed1079357c8)
- To acquire tokens, please reach out to the core team [via Discord](https://discord.com/invite/TnXjkR5)
- [Faucet](https://faucet.mumbai.oceanprotocol.com/)
**Additional Components**
| What | URL |
| ------------ | ---------------------------------------------------------------------- |
| Explorer | https://mumbai.polygonscan.com |
| Ocean Market | Point wallet to Mumbai network, at https://market.oceanprotocol.com |
| Provider | `https://provider.mumbai.oceanprotocol.com` |
| Subgraph | `https://subgraph.mumbai.oceanprotocol.com` |
| What | URL |
| ------------ | ------------------------------------------------------------------- |
| Explorer | https://mumbai.polygonscan.com |
| Ocean Market | Point wallet to Mumbai network, at https://market.oceanprotocol.com |
| Provider | `https://provider.mumbai.oceanprotocol.com` |
| Subgraph | `https://subgraph.mumbai.oceanprotocol.com` |
## Local / Ganache
@ -201,4 +198,3 @@ Alternatively, you can run Ganache independently. Install it according to [the G
## Other
Some apps may need `network_id` and `chain_id`. Here's a [list of values for major Ethereum networks](https://medium.com/@piyopiyo/list-of-ethereums-major-network-and-chain-ids-2bc58e928508).

65
content/concepts/projects-using-ocean.md
View File

@ -1,70 +1,21 @@
---
title: Projects using Ocean Protocol
description: These are live projects that leverage core functionality of Ocean, use Ocean Market, or use OCEAN with staking and the like.
description: This page helps you to find projects in the Ocean ecosystem.
---
> You can add to this list by submitting a Pull Request via the _Edit_ link at the bottom of this document, following our [outlined contribution workflow](https://github.com/oceanprotocol/docs/blob/main/docs/content.md#editing-docs).
>
> A project being listed on this page should not be seen as a "stamp of approval" by Ocean Protocol Foundation.
Projects we directly work with can be found on our [Collaborators page](https://oceanprotocol.com/collaborators).
## Using the Ocean Protocol stack
These are live projects that leverage core functionality of Ocean, such as reading or writing on Ocean datatokens or data pools. They don't rely on Ocean Market for an interface, by either having their own GUI or CLI, or using another app.
| Name | Description | Link |
| --------------------------------------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
| Ocean Market (from Ocean core team) | A marketplace to find, publish and trade data sets in the Ocean Network | [market.oceanprotocol.com](https://market.oceanprotocol.com) |
| deltaDAO | Ocean Protocol consulting, engineering and integration company for GDPR-compliant data monetization | [delta-dao.com](https://delta-dao.com) |
| [Parsiq](https://parsiq.net/) | User notifications for dataset publishes, metadata actions, more | [parsiq.net](https://parsiq.net/) |
| [Data Market Cap](https://datamarketcap.xyz/) | A platform that provides an analysis of the datatokens market | [datamarketcap.xyz](https://datamarketcap.xyz/) |
| [Datapolis](https://datapolis.net/) | A data-marketplace for buying, selling datasets and earning interests through staking | [datapolis.net](https://datapolis.net/) |
| [rugpullindex.com](https://rugpullindex.com/) | Ranks Ocean dataset pools based on risk of investment | [rugpullindex.com](https://rugpullindex.com/) |
| Data index fund | Demo. Has 8 datatoken assets in a Balancer pool. Auto-balanced. | [Tweet announcement](https://twitter.com/trentmc0/status/1339534813330628612) |
| [Data Union](https://dataunion.app/) | Data union for annotating images. | [dataunion.app](https://dataunion.app/). |
| [Data Dao](https://datadao.co/) | A marketplace for collaborative datasets curation. | [datadao.co](https://datadao.co/) |
| [Video Wiki](https://videowiki.pt/) | A collaborative content editing platform that enables rapid creation, modification, protection and monetization of immersive content. | [videowiki.pt](https://videowiki.pt/) |
| [Moonjelly](https://devpost.com/software/moonjelly) | An open-source chrome extension for easy curation & minting to the ocean market. |[moonjelly repo](https://github.com/jboetticher/moon-jelly). |
| [Ocean caller](https://devpost.com/software/oceancaller) | An andriod app to share contacts in a decentralised way. |[Ocean Caller repo](https://github.com/BakaOtaku/oceancaller). |
| [Price Your Pool](https://priceyourpool.xyz/) | Dapp to re-price datatoken to lower value without diluting LP pool shares in data pool. |[Price Your Pool](https://priceyourpool.xyz/). |
| [Poseidon](https://poseidon.world/) | Dapp to create and manage your datatokens. |[Poseidon](https://poseidon.world/). |
| [Swash app](https://swashapp.io/) | A cross-browser plugin to allowing users to monetise from their browsing data. |[Swash app](https://swashapp.io/). |
| [Oort Digital](https://oortdigital.tech/) | A marketplace to lend and borrow your NFTs. |[Oort Digital website](https://oortdigital.tech/). |
| [Oyster Shell](https://oystershell.io/) | A platform that provides an analysis of the datatokens market. |[Oyster Shell dapp](https://oystershell.io/). |
## OceanDAO projects
[Ocean Pearl](https://oceanpearl.io/projects) is a great way to browse 80+ Ocean projects that came through [OceanDAO](https://oceanprotocol.com/dao). These projects may be building on the Ocean stack, doing outreach, unlocking data, or more.
## Using Ocean Market
[Ocean Market](https://market.oceanprotocol.com) has many teams that are selling data, often as their core approach to monetization. Below are some projects. For a more thorough and up-to-date list, please go to [the Ocean Market app itself](https://market.oceanprotocol.com).
[Ocean Market](https://market.oceanprotocol.com) is the best place to find projects that publish datasets. Simply go there and browse the datasets:)
| Name | Description | Example Dataset |
| -------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| [Transport Genie](https://transportgenie.ca) | Agricultural transport data | [Swine Micro-Climate Conditions](https://market.oceanprotocol.com/asset/did:op:Ac3a39F843316c83Db11a9E6D703a7473c26aCe0) |
| [DataUnion.App](https://dataunion.app) | Data union for annotating images | [Image & Annotation Vault](https://market.oceanprotocol.com/asset/did:op:7Bce67697eD2858d0683c631DdE7Af823b7eea38) |
| [Swash](https://swashapp.io) | Data union of browser data | [Consumer Browsing Data](https://market.oceanprotocol.com/asset/did:op:b07a8bb80242752ce164560ABCb6517DA90a4F65) |
| [Tapmydata](https://tapmydata.com) | Datasets of who's trying to access your data | [TAP subject access requests](https://market.oceanprotocol.com/asset/did:op:ED6FB9010Fd283aF2f2700f13A7f24E027f1CEf3) |
| [Evotegra](https://www.evotegra.de/) | Artificial Intelligence for automotive and industry applications | [German Traffic Dataset](https://market.oceanprotocol.com/asset/did:op:2a76F680279CE629a9F5E601BDa7246e06F226f0) |
## Learning about Ocean
## Using OCEAN
The [Ocean Academy](https://oceanacademy.io/) project is a great way to learn more about Ocean beyond [oceanprotocol.com](https://www.oceanprotocol.com) and [docs.oceanprotocol.com](https://docs.oceanprotocol.com).
These projects use just OCEAN, but do more than just exchanging it. This includes staking, and liquidity mining opportunities.
## Trading OCEAN
| Name | Description | Launch Date | Link |
| -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------- |
| [Secret Network](https://scrt.network) | Stake OCEAN on bridge between Eth mainnet <> Secret network | Jan 2021 | [bridge.scrt.network](https://bridge.scrt.network/) |
| [AllianceBlock](https://allianceblock.io) | Stake OCEAN in AllianceBlock liquidity mining program | Jan 2021 | [lm.allianceblock.io](https://lm.allianceblock.io) |
| [Balancer DEX](https://www.balancer.finance) | Stake OCEAN as a liquidity provider in any OCEAN-\* pair, get Balancer Liquidity Mining rewards. Create/use datatoken pools too. | Spring 2020 | [pools.balancer.exchange](https://pools.balancer.exchange/#/explore?token=0x967da4048cD07aB37855c090aAF366e4ce1b9F48) |
| [Bancor DEX](https://bancor.network) | Stake OCEAN as a liquidity provider in any OCEAN-\* pair, get Bancor Liquidity Mining rewards. Create/use datatoken pools too. | Fall 2020 | [app.bancor.network](https://app.bancor.network/eth/data) |
| [Uniswap DEX](https://www.uniswap.io) | Stake OCEAN as a liquidity provider in any OCEAN-\* pair. Create/use datatoken pools too. | Summer 2020 | [app.uniswap.org](https://app.uniswap.org/#/add/) |
| [Sushiswap DEX](https://www.uniswap.io) | Stake OCEAN as a liquidity provider in any OCEAN-\* pair. Create/use datatoken pools too. | Jan 2021 | [app.sushiswap.fi](https://app.sushiswap.fi/pair/0xee35e548c7457fcdd51ae95ed09108be660ea374) |
The [Coingecko OCEAN markets page](https://www.coingecko.com/en/coins/ocean-protocol#markets) lists forums to exchange OCEAN. Many of them offer liquidity mining and other yield opportunities.
## Other Projects
These projects relate to Ocean in some way but do not fit neatly into the other categories. They may be for Ocean education, Ocean swag, or otherwise.
| Name | Description | Date | App |
| ------------- | ---------------------------------------------------------------------------------------------------------- | --------- | ------------------------------------------- |
| Ocean Academy | A community initiative providing a simple and practical introduction to Ocean Protocol starting from zero. | Fall 2020 | [oceanacademy.io](https://oceanacademy.io/) |

3
content/concepts/quickstart.md
View File

@ -5,6 +5,5 @@ description:
These drivers each have their own quickstart. Pick your favorite and have fun!
- [ocean.js](/references/ocean.js/)
- [ocean.js](https://github.com/oceanprotocol/ocean.js/blob/main/README.md)
- [ocean.py](https://github.com/oceanprotocol/ocean.py)
- [Ocean React](https://github.com/oceanprotocol/react)

11
content/tutorials/allow-deny-lists.md → content/tutorials/asset-level-permissions.md
View File

@ -1,9 +1,16 @@
---
title: Allow and Deny Lists
title: Asset-Level Restrictions
description: Restrict access to individual assets
---
Allow and deny lists are advanced features that allow publishers to control access to individual data assets. Publishers can restrict assets so that they can only be accessed by approved users (allow lists) or they can restrict assets so that they can be accessed by anyone except certain users (deny lists).
## Introduction
For asset-level restrictions Ocean supports allow and deny lists. Allow and deny lists are advanced features that allow publishers to control access to individual data assets. Publishers can restrict assets so that they can only be accessed by approved users (allow lists) or they can restrict assets so that they can be accessed by anyone except certain users (deny lists).
When an allow-list is in place, a consumer can only access the resource if they have a datatoken and one of the credentials in the "allow" list of the DDO. Ocean also has complementary deny functionality: if a consumer is on the "deny" list, they will not be allowed to access the resource.
Initially, the only credential supported is Ethereum public addresses. To be fair, it’s more a pointer to an individual not a credential; but it has a low-complexity implementation so makes a good starting point. For extensibility, the Ocean metadata schema enables specification of other types of credentials like W3C Verifiable Credentials and more. When this gets implemented, asset-level permissions will be properly RBAC too:)
Since asset-level permissions are in the DDO, and the DDO is controlled by the publisher, asset-level restrictions are controlled by the publisher.
## Setup

18
content/tutorials/compute-to-data-algorithms.md
View File

@ -33,6 +33,15 @@ When creating an algorithm asset in Ocean Protocol, the additional `algorithm` o
| `tag` | The Docker image tag that you are going to use. |
| `entrypoint` | The Docker entrypoint. `$ALGO` is a macro that gets replaced inside the compute job, depending where your algorithm code is downloaded. |
Define your entrypoint according to your dependencies. E.g. if you have multiple versions of python installed, use the appropriate command `python3.6 $ALGO`.
### What Docker container should I use?
There are plenty of Docker containers that work out-of-the-box. However, if you have custom dependencies, you may want to configure your own Docker Image.
To do so, create a Dockerfile with the appropriate instructions for dependency management and publish the container, e.g. using Dockerhub.
We also collect some [example images](https://github.com/oceanprotocol/algo_dockers) which you can also view in Dockerhub.
When publishing an algorithm through the [Ocean Market](https://market.oceanprotoco.com), these properties can be set via the publish UI.
### Environment Examples
@ -65,19 +74,20 @@ Run an algorithm written in Python, based on Python v3.9:
}
```
Be aware that you might need a lot of dependencies, so it's a lot faster if you are going to build your own image and publish your algorithm with that custom image. We also collect some [example images](https://github.com/oceanprotocol/algo_dockers).
### Data Storage
As part of a compute job, every algorithm runs in a K8s pod with these volumes mounted:
| Path | Permissions | Usage |
| --------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `/data/inputs` | read | Storage for input data sets, accessible only to the algorithm running in the pod. |
| `/data/ddos` | read | Storage for all DDOs involved in compute job (input data set + algorithm). |
| `/data/inputs` | read | Storage for input data sets, accessible only to the algorithm running in the pod. Contents will be the files themselves, inside indexed folders e.g. `/data/inputs/{did}/{service_id}`. |
| `/data/ddos` | read | Storage for all DDOs involved in compute job (input data set + algorithm). Contents will json files containing the DDO structure. |
| `/data/outputs` | read/write | Storage for all of the algorithm's output files. They are uploaded on some form of cloud storage, and URLs are sent back to the consumer. |
| `/data/logs/` | read/write | All algorithm output (such as `print`, `console.log`, etc.) is stored in a file located in this folder. They are stored and sent to the consumer as well. |
Please note that when using local Providers or Metatata Caches, the ddos might not be correctly transferred into c2d, but inputs are still available.
If your algorithm relies on contents from the DDO json structure, make sure to use a public Provider and Metadata Cache (Aquarius instance).
### Environment variables available to algorithms
For every algorithm pod, the Compute to Data environment provides the following environment variables:

156
content/tutorials/compute-to-data-minikube.md Normal file
View File

@ -0,0 +1,156 @@
---
title: Minikube Compute-to-Data Environment
description:
---
## Requirements
- functioning internet-accessable provider service
- machine capable of running compute (e.g. we used a machine with 8 CPUs, 16 GB Ram, 100GB SSD and fast internet connection)
- Ubuntu 20.04
## Install Docker and Git
```bash
sudo apt update
sudo apt install git docker.io
sudo usermod -aG docker $USER && newgrp docker
```
## Install Minikube
```bash
wget -q --show-progress https://github.com/kubernetes/minikube/releases/download/v1.22.0/minikube_1.22.0-0_amd64.deb
sudo dpkg -i minikube_1.22.0-0_amd64.deb
```
## Download and Configure Operator Service
```bash
git clone https://github.com/oceanprotocol/operator-service.git
```
Edit `operator-service/kubernetes/postgres-configmap.yaml`. Change `POSTGRES_PASSWORD` to nice long random password.
Edit `operator-service/kubernetes/deployment.yaml`. Optionally change:
- `ALGO_POD_TIMEOUT`
- add `requests_cpu`
- add `requests_memory`
- add `limits_cpu`
- add `limits_memory`
```yaml
...
spec:
containers:
- env:
- name: requests_cpu
value: "4"
- name: requests_memory
value: "8Gi"
- name: limits_cpu
value: "8"
- name: limits_memory
value: "15Gi"
- name: ALGO_POD_TIMEOUT
value: "3600"
...
```
## Download and Configure Operator Engine
```bash
git clone https://github.com/oceanprotocol/operator-engine.git
```
Check the [README](https://github.com/oceanprotocol/operator-engine#customize-your-operator-engine-deployment) section of operator engine to customize your deployment.
At a minimum you should add your IPFS URLs or AWS settings, and add (or remove) notification URLs.
## Install kubectl
```bash
curl -LO "https://dl.k8s.io/release/$(curl -L -s https://dl.k8s.io/release/stable.txt)/bin/linux/amd64/kubectl"
curl -LO "https://dl.k8s.io/$(curl -L -s https://dl.k8s.io/release/stable.txt)/bin/linux/amd64/kubectl.sha256"
echo "$(<kubectl.sha256) kubectl" | sha256sum --check
sudo install -o root -g root -m 0755 kubectl /usr/local/bin/kubectl
```
## Start Minikube
First command is imporant, and solves a [PersistentVolumeClaims problem](https://github.com/kubernetes/minikube/issues/7828).
```bash
minikube config set kubernetes-version v1.16.0
minikube start --cni=calico --driver=docker --container-runtime=docker
```
Wait untill all the defaults are running (1/1).
```bash
watch kubectl get pods --all-namespaces
```
## Create namespaces
```bash
kubectl create ns ocean-operator
kubectl create ns ocean-compute
```
## Deploy Operator Service
```bash
kubectl config set-context --current --namespace ocean-operator
kubectl create -f operator-service/kubernetes/postgres-configmap.yaml
kubectl create -f operator-service/kubernetes/postgres-storage.yaml
kubectl create -f operator-service/kubernetes/postgres-deployment.yaml
kubectl create -f operator-service/kubernetes/postgresql-service.yaml
kubectl apply -f operator-service/kubernetes/deployment.yaml
```
## Deploy Operator Engine
```bash
kubectl config set-context --current --namespace ocean-compute
kubectl apply -f operator-engine/kubernetes/sa.yml
kubectl apply -f operator-engine/kubernetes/binding.yml
kubectl apply -f operator-engine/kubernetes/operator.yml
kubectl create -f operator-service/kubernetes/postgres-configmap.yaml
```
## Expose Operator Service
```bash
kubectl expose deployment operator-api --namespace=ocean-operator --port=8050
```
Run a port forward or create your ingress service and setup DNS and certificates (not covered here):
```bash
kubectl -n ocean-operator port-forward svc/operator-api 8050
```
Alternatively you could use another method to communicate between the C2D Environment and the provider, such as an SSH tunnel.
## Initialize database
If your minikube is running on compute.example.com:
```bash
curl -X POST "https://compute.example.com/api/v1/operator/pgsqlinit" -H "accept: application/json"
```
## Update Provider
Update your provider service by updating the `operator_service.url` value in `config.ini`
```ini
operator_service.url = https://compute.example.com/
```
Restart your provider service.
[Watch the explanatory video for more details](https://vimeo.com/580934725)

17
content/tutorials/compute-to-data.md
View File

@ -17,7 +17,7 @@ ocean/
Then you need the following parts:
- working [Barge](https://github.com/oceanprotocol/barge). For this setup, we will asume the Barge is installed in /ocean/barge/
- a working Kubernetes (K8s) cluster (Minikube is a good start)
- a working Kubernetes (K8s) cluster ([Minikube](../compute-to-data-minikube/) is a good start)
- a working `kubectl` connected to the K8s cluster
- one folder (/ocean/operator-service/), in which we will download the following:
- [postgres-configmap.yaml](https://raw.githubusercontent.com/oceanprotocol/operator-service/main/kubernetes/postgres-configmap.yaml)
@ -45,9 +45,9 @@ Check the [README](https://github.com/oceanprotocol/operator-engine#customize-yo
## Storage class
For minikube, you can use 'standard' class.
For minikube, you can use the default 'standard' class.
For AWS , please make sure that your class allocates volumes in the same region and zone in which you are running your pods.
For AWS, please make sure that your class allocates volumes in the same region and zone in which you are running your pods.
We created our own 'standard' class in AWS:
@ -71,17 +71,6 @@ reclaimPolicy: Delete
volumeBindingMode: Immediate
```
Or we can use this for minikube:
```yaml
apiVersion: storage.k8s.io/v1
kind: StorageClass
metadata:
name: standard
provisioner: docker.io/hostpath
reclaimPolicy: Retain
```
For more information, please visit https://kubernetes.io/docs/concepts/storage/storage-classes/
## Create namespaces

34
content/tutorials/jupyter-notebooks.md
View File

@ -1,34 +0,0 @@
---
title: Jupyter Notebooks
description: Try some online interactive squid-py tutorials.
---
You can go through interactive squid-py tutorials at [datascience.oceanprotocol.com](https://datascience.oceanprotocol.com/).
They're [Jupyter Notebooks](http://jupyter.org/) running on your own [JupyterLab](https://github.com/jupyterlab/jupyterlab) instance.
It's quite easy to figure out, but if you get stuck, here are some initial steps:
- Visit [datascience.oceanprotocol.com](https://datascience.oceanprotocol.com/).
- Click the **JupyterLab Instance** button.
- Login with your GitHub account.
- Once you're in the JupyterLab console, double-click on **mantaray_jupyter**.
- Double-click on **introdution.txt** and read it.
- Double-click on one of the **.ipynb** files. They're labelled to appear in a logical order.
- When asked to select a kernel, select Python 3.
- To make stuff happen (e.g. to run code cells), use the menus at the top of the JupyterLab console, or at the top of your current Jupyter notebook.
In you prefer a step-by-step tutorial, you can watch our thorough [Manta Ray tutorial mini series](https://www.youtube.com/playlist?list=PL_dn0wVs9kWqSO2iCXvrWuxKFSgVr0Jrw):
`youtube: N7HrWz35xIk`
`youtube: Ahbw4WDDFxI`
`youtube: FsDwOlOkIHc`
`youtube: VoBd1iwTvF8`
`youtube: MHxOOioYSbg`
For more info, see the blog posts:
- "[Project Manta Ray — Data Science powered by Ocean Protocol](https://blog.oceanprotocol.com/project-manta-ray-data-science-powered-by-ocean-protocol-535c54089b0f)"
- "[The Data Science Workflow — Powered by Ocean Protocol](https://blog.oceanprotocol.com/dive-into-ocean-protocol-ai-ecosystem-60f64eddf74d)"

9
content/tutorials/rbac.md → content/tutorials/market-level-permissions.md
View File

@ -1,8 +1,13 @@
---
title: Role-Based Access Control Server
title: Market-Level Permissions
description: Control who can publish, consume or browse data
---
The primary mechanism for restricting your users ability to publish, consume, or browse is the role-based access (RBAC) control server.
## Introduction
For market-level permissions, Ocean implements a role-based access control server (RBAC server). It implements restrictions at the user level, based on the user’s role (credentials). The RBAC server is run & controlled by the marketplace owner. Therefore permissions at this level are at the discretion of the marketplace owner.
The RBAC server is the primary mechanism for restricting your users ability to publish, consume, or browse assets in the market.
## Roles

5
content/tutorials/marketplace-consume-data-asset.md
View File

@ -1,3 +1,8 @@
---
title: Consume data asset
description:
---
1. Go to Ocean Marketplace https://market.oceanprotocol.com/
2. Search for the data asset.
The Ocean Marketplace provides features to search the Data/Algorithms by text, and users can also sort the result by published date.

5
content/tutorials/marketplace-introduction.md
View File

@ -1,4 +1,7 @@
# Ocean Market
---
title: Ocean Market
description:
---
https://market.oceanprotocol.com/

5
content/tutorials/marketplace-publish-data-asset.md
View File

@ -1,4 +1,7 @@
# Publish a Data asset on Ocean Market place.
---
title: Publish a Data asset on Ocean Market place.
description:
---
## What can be published?

5
content/tutorials/marketplace-swap-and-stake.md
View File

@ -1,4 +1,7 @@
# Swap and/or Stake Tokens
---
title: Swap and/or Stake Tokens
description:
---
## Swap Ocean Tokens against Datatokens

24
content/tutorials/permissions.md
View File

@ -4,12 +4,28 @@ description: Control who can publish, consume or browse data
---
Ocean Protocol supports fine-grained permissions across our technology stack which can be particularly useful for enterprise use-cases. There are two ways in which permissions are implemented:
A large part of Ocean is about access control, which is primarily handled by datatokens. Users can access a resource (e.g. a file) by redeeming datatokens for that resource. We recognize that enterprises and other users often need more precise ways to specify and manage access, and we have introduced fine-grained permissions for these use cases.
Fine-grained permissions mean that access can be controlled precisely at two levels:
- [Role based access control server.](./rbac)
- [Marketplace-level permissions](./market-level-permissions) for browsing, consuming or publishing within a marketplace frontend.
- [Allow & deny lists.](./allow-deny-lists)
- [Asset-level permissions](./asset-level-permissions) on consuming a specific asset.
Neither are enabled in [Ocean Market](market.oceanprotocol.com/) but you can enable them in your own market by following the guides above.
The fine-grained permissions features are designed to work in forks of Ocean Market. We have not enabled them in Ocean Market itself, to keep Ocean Market open for everyone to use. On the front end, the permissions features are easily enabled by setting environment variables.
### Introduction
Some datasets need to be restricted to appropriately credentialed users. In this situation there is tension:
1. Datatokens on their own aren’t enough - the datatokens can be exchanged without any restrictions, which means anyone can acquire them and access the data.
2. We want to retain datatokens approach, since they enable Ocean users to leverage existing crypto infrastructure e.g. wallets, exchange etc.
We can resolve this tension by drawing on the following analogy:
> Imagine going to an age 18+ rock concert. You can only get in if you show both (a) your concert ticket and (b) an id showing that you’re old enough.
We can port this model into Ocean, where (a) is a datatoken, and (b) is a credential. The datatoken is the baseline access control. It’s fungible, and something that you’ve paid for or had shared to you. It’s independent of your identity. The credential is something that’s a function of your identity.
The credential based restrictions are implemented in two ways, at the market level and at the asset level. Access to the market is restricted on a role basis, the user's identity is attached to a role via the role based access control (RBAC) server. Access to individual assets is restricted via allow and deny lists which list the ethereum addresses of the users who can and cannot access the asset within the DDO.

10
data/sidebars/tutorials.yml
View File

@ -41,6 +41,8 @@
link: /tutorials/compute-to-data-algorithms/
- title: Run a Compute-to-Data Environment
link: /tutorials/compute-to-data/
- title: Minikube Compute-to-Data Environment
link: /tutorials/compute-to-data-minikube/
- group: Storage Setup
items:
@ -55,7 +57,7 @@
items:
- title: Overview
link: /tutorials/permissions
- title: Role-Based Access Control
link: /tutorials/rbac
- title: Allow & Deny Lists
link: /tutorials/allow-deny-lists
- title: Market-Level Permissions
link: /tutorials/market-level-permissions
- title: Asset-Level Permissions
link: /tutorials/asset-level-permissions

3
gatsby-config.js
View File

@ -170,6 +170,7 @@ module.exports = {
path: `${__dirname}/markdowns/markdowns`,
name: 'markdowns'
}
}
},
`gatsby-transformer-remark-plaintext`
]
}

8
gatsby-node.js
View File

@ -132,7 +132,6 @@ exports.createPages = ({ graphql, actions }) => {
await createSwaggerPages(createPage)
await createDeploymentsPage(createPage)
// API: ocean.js
const lastRelease =
result.data.oceanJs.repository.releases.edges.filter(
@ -170,6 +169,12 @@ exports.createPages = ({ graphql, actions }) => {
await createReadTheDocsPage(createPage, 'provider', providerList)
await createReadTheDocsPage(createPage, 'ocean-subgraph', subgraphList)
// Create search page
createPage({
path: `/search/`,
component: path.resolve('./src/components/Search/SearchComponent.jsx')
})
resolve()
})
)
@ -185,6 +190,7 @@ const createDeploymentsPage = async (createPage) => {
component: template
})
}
//
// Create pages from TypeDoc json files
//

351
package-lock.json generated
View File

@ -3142,6 +3142,11 @@
"to-fast-properties": "^2.0.0"
}
},
"@emotion/hash": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
},
"@endemolshinegroup/cosmiconfig-typescript-loader": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz",
@ -4132,6 +4137,108 @@
"unist-util-visit": "^1.3.0"
}
},
"@material-ui/core": {
"version": "4.12.3",
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.3.tgz",
"integrity": "sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==",
"requires": {
"@babel/runtime": "^7.4.4",
"@material-ui/styles": "^4.11.4",
"@material-ui/system": "^4.12.1",
"@material-ui/types": "5.1.0",
"@material-ui/utils": "^4.11.2",
"@types/react-transition-group": "^4.2.0",
"clsx": "^1.0.4",
"hoist-non-react-statics": "^3.3.2",
"popper.js": "1.16.1-lts",
"prop-types": "^15.7.2",
"react-is": "^16.8.0 || ^17.0.0",
"react-transition-group": "^4.4.0"
}
},
"@material-ui/icons": {
"version": "4.11.2",
"resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
"integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
"requires": {
"@babel/runtime": "^7.4.4"
}
},
"@material-ui/lab": {
"version": "4.0.0-alpha.60",
"resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz",
"integrity": "sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==",
"requires": {
"@babel/runtime": "^7.4.4",
"@material-ui/utils": "^4.11.2",
"clsx": "^1.0.4",
"prop-types": "^15.7.2",
"react-is": "^16.8.0 || ^17.0.0"
}
},
"@material-ui/styles": {
"version": "4.11.4",
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
"integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==",
"requires": {
"@babel/runtime": "^7.4.4",
"@emotion/hash": "^0.8.0",
"@material-ui/types": "5.1.0",
"@material-ui/utils": "^4.11.2",
"clsx": "^1.0.4",
"csstype": "^2.5.2",
"hoist-non-react-statics": "^3.3.2",
"jss": "^10.5.1",
"jss-plugin-camel-case": "^10.5.1",
"jss-plugin-default-unit": "^10.5.1",
"jss-plugin-global": "^10.5.1",
"jss-plugin-nested": "^10.5.1",
"jss-plugin-props-sort": "^10.5.1",
"jss-plugin-rule-value-function": "^10.5.1",
"jss-plugin-vendor-prefixer": "^10.5.1",
"prop-types": "^15.7.2"
},
"dependencies": {
"csstype": {
"version": "2.6.17",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
"integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A=="
}
}
},
"@material-ui/system": {
"version": "4.12.1",
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.1.tgz",
"integrity": "sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==",
"requires": {
"@babel/runtime": "^7.4.4",
"@material-ui/utils": "^4.11.2",
"csstype": "^2.5.2",
"prop-types": "^15.7.2"
},
"dependencies": {
"csstype": {
"version": "2.6.17",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
"integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A=="
}
}
},
"@material-ui/types": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
"integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
},
"@material-ui/utils": {
"version": "4.11.2",
"resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz",
"integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
"requires": {
"@babel/runtime": "^7.4.4",
"prop-types": "^15.7.2",
"react-is": "^16.8.0 || ^17.0.0"
}
},
"@mdx-js/util": {
"version": "2.0.0-next.8",
"resolved": "https://registry.npmjs.org/@mdx-js/util/-/util-2.0.0-next.8.tgz",
@ -4731,6 +4838,14 @@
"csstype": "^3.0.2"
}
},
"@types/react-transition-group": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.2.tgz",
"integrity": "sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==",
"requires": {
"@types/react": "*"
}
},
"@types/readable-stream": {
"version": "2.3.9",
"resolved": "https://registry.npmjs.org/@types/readable-stream/-/readable-stream-2.3.9.tgz",
@ -5798,11 +5913,18 @@
"integrity": "sha512-1uIESzroqpaTzt9uX48HO+6gfnKu3RwvWdCcWSrX4csMInJfCo1yvKPNXCwXFRpJqRW25tiASb6No0YH57PXqg=="
},
"axios": {
"version": "0.21.1",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
"integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
"version": "0.21.4",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
"integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
"requires": {
"follow-redirects": "^1.10.0"
"follow-redirects": "^1.14.0"
},
"dependencies": {
"follow-redirects": {
"version": "1.14.3",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.3.tgz",
"integrity": "sha512-3MkHxknWMUtb23apkgz/83fDoe+y+qr0TdgacGIA7bew+QLBo3vdgEN2xEsuXNivpFy4CyDhBBZnNZOtalmenw=="
}
}
},
"axobject-query": {
@ -7449,6 +7571,11 @@
"mimic-response": "^1.0.0"
}
},
"clsx": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
"integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
},
"coa": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
@ -8199,6 +8326,15 @@
}
}
},
"css-vendor": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
"integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
"requires": {
"@babel/runtime": "^7.8.3",
"is-in-browser": "^1.0.2"
}
},
"css-what": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
@ -8940,6 +9076,15 @@
"utila": "~0.4"
}
},
"dom-helpers": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
"requires": {
"@babel/runtime": "^7.8.7",
"csstype": "^3.0.2"
}
},
"dom-serializer": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@ -10478,9 +10623,9 @@
}
},
"eslint-plugin-prettier": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.1.tgz",
"integrity": "sha512-htg25EUYUeIhKHXjOinK4BgCcDwtLHjqaxCDsMy5nbnUMkKFvIhMVCp+5GFUXQ4Nr8lBsPqtGAqBenbpFqAA2g==",
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz",
"integrity": "sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==",
"dev": true,
"requires": {
"prettier-linter-helpers": "^1.0.0"
@ -11181,11 +11326,6 @@
"pend": "~1.2.0"
}
},
"fetch-blob": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-2.1.2.tgz",
"integrity": "sha512-YKqtUDwqLyfyMnmbw8XD6Q8j9i/HggKtPEI+pZ1+8bvheBu78biSmNaXWusx1TauGqtUUGx/cBb1mKdq2rLYow=="
},
"figgy-pudding": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@ -11418,17 +11558,17 @@
}
},
"form-data-encoder": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/form-data-encoder/-/form-data-encoder-1.4.4.tgz",
"integrity": "sha512-7fHkKl/w+qxecNdv6Dy6gqAVuJ1Th4oyZd52nx0jGcgDBatMqCnIr5MtnuiFsLgEHs9HI2FufOmeHrj3obdhwA=="
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/form-data-encoder/-/form-data-encoder-1.5.3.tgz",
"integrity": "sha512-TBXL4jWdTERP1oNLXCXEJYgBfA5dBbhGVvS6E9bvAl48gu4L1q+JQYnPfixEyemGewRUeCRRXLUOEdtRfE2FKQ=="
},
"formdata-node": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/formdata-node/-/formdata-node-4.0.1.tgz",
"integrity": "sha512-7qe/s/LQR4KE9zzPBg8HXRQQsgze4VtwTX9viuVOsodD5QSu7MKsNiSy5BWYDwV+kAcDTh3y7WnC5ZHK5t4Aqg==",
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/formdata-node/-/formdata-node-4.2.1.tgz",
"integrity": "sha512-mYFfryf+E+r/zaYFWuouQEBbtjyJQql4hTDEVvUt9RexwCEzjj23pkVxAcwQDuFMftpf3MQhcbqp6FysWwN/tQ==",
"requires": {
"fetch-blob": "2.1.2",
"node-domexception": "1.0.0"
"node-domexception": "1.0.0",
"web-streams-polyfill": "4.0.0-beta.1"
}
},
"forwarded": {
@ -14319,6 +14459,15 @@
}
}
},
"gatsby-transformer-remark-plaintext": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/gatsby-transformer-remark-plaintext/-/gatsby-transformer-remark-plaintext-1.0.3.tgz",
"integrity": "sha512-V6nU03WKW65Xy5DyQPeVSMf5KVNoXX2yHbq53H0u1a/MkakG3osNTDWiTDxVQ8kg9OZ/04Dblczg9QxRnLjrYA==",
"requires": {
"@babel/runtime": "^7.0.0",
"strip-markdown": "^3.0.2"
}
},
"gatsby-transformer-sharp": {
"version": "2.12.1",
"resolved": "https://registry.npmjs.org/gatsby-transformer-sharp/-/gatsby-transformer-sharp-2.12.1.tgz",
@ -15665,6 +15814,11 @@
"integrity": "sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg==",
"dev": true
},
"hyphenate-style-name": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
"integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
},
"iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -16309,6 +16463,11 @@
"resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
"integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw=="
},
"is-in-browser": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
"integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
},
"is-installed-globally": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
@ -16768,6 +16927,11 @@
"integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
"dev": true
},
"js-search": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/js-search/-/js-search-2.0.0.tgz",
"integrity": "sha512-lJ8KzjlwcelIWuAdKyzsXv45W6OIwRpayzc7XmU8mzgWadg5UVOKVmnq/tXudddEB9Ceic3tVaGu6QOK/eebhg=="
},
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -16873,6 +17037,84 @@
"verror": "1.10.0"
}
},
"jss": {
"version": "10.7.1",
"resolved": "https://registry.npmjs.org/jss/-/jss-10.7.1.tgz",
"integrity": "sha512-5QN8JSVZR6cxpZNeGfzIjqPEP+ZJwJJfZbXmeABNdxiExyO+eJJDy6WDtqTf8SDKnbL5kZllEpAP71E/Lt7PXg==",
"requires": {
"@babel/runtime": "^7.3.1",
"csstype": "^3.0.2",
"is-in-browser": "^1.1.3",
"tiny-warning": "^1.0.2"
}
},
"jss-plugin-camel-case": {
"version": "10.7.1",
"resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.7.1.tgz",
"integrity": "sha512-+ioIyWvmAfgDCWXsQcW1NMnLBvRinOVFkSYJUgewQ6TynOcSj5F1bSU23B7z0p1iqK0PPHIU62xY1iNJD33WGA==",
"requires": {
"@babel/runtime": "^7.3.1",
"hyphenate-style-name": "^1.0.3",
"jss": "10.7.1"
}
},
"jss-plugin-default-unit": {
"version": "10.7.1",
"resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.7.1.tgz",
"integrity": "sha512-tW+dfYVNARBQb/ONzBwd8uyImigyzMiAEDai+AbH5rcHg5h3TtqhAkxx06iuZiT/dZUiFdSKlbe3q9jZGAPIwA==",
"requires": {
"@babel/runtime": "^7.3.1",
"jss": "10.7.1"
}
},
"jss-plugin-global": {
"version": "10.7.1",
"resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.7.1.tgz",
"integrity": "sha512-FbxCnu44IkK/bw8X3CwZKmcAnJqjAb9LujlAc/aP0bMSdVa3/MugKQRyeQSu00uGL44feJJDoeXXiHOakBr/Zw==",
"requires": {
"@babel/runtime": "^7.3.1",
"jss": "10.7.1"
}
},
"jss-plugin-nested": {
"version": "10.7.1",
"resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.7.1.tgz",
"integrity": "sha512-RNbICk7FlYKaJyv9tkMl7s6FFfeLA3ubNIFKvPqaWtADK0KUaPsPXVYBkAu4x1ItgsWx67xvReMrkcKA0jSXfA==",
"requires": {
"@babel/runtime": "^7.3.1",
"jss": "10.7.1",
"tiny-warning": "^1.0.2"
}
},
"jss-plugin-props-sort": {
"version": "10.7.1",
"resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.7.1.tgz",
"integrity": "sha512-eyd5FhA+J0QrpqXxO7YNF/HMSXXl4pB0EmUdY4vSJI4QG22F59vQ6AHtP6fSwhmBdQ98Qd9gjfO+RMxcE39P1A==",
"requires": {
"@babel/runtime": "^7.3.1",
"jss": "10.7.1"
}
},
"jss-plugin-rule-value-function": {
"version": "10.7.1",
"resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.7.1.tgz",
"integrity": "sha512-fGAAImlbaHD3fXAHI3ooX6aRESOl5iBt3LjpVjxs9II5u9tzam7pqFUmgTcrip9VpRqYHn8J3gA7kCtm8xKwHg==",
"requires": {
"@babel/runtime": "^7.3.1",
"jss": "10.7.1",
"tiny-warning": "^1.0.2"
}
},
"jss-plugin-vendor-prefixer": {
"version": "10.7.1",
"resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.7.1.tgz",
"integrity": "sha512-1UHFmBn7hZNsHXTkLLOL8abRl8vi+D1EVzWD4WmLFj55vawHZfnH1oEz6TUf5Y61XHv0smdHabdXds6BgOXe3A==",
"requires": {
"@babel/runtime": "^7.3.1",
"css-vendor": "^2.0.8",
"jss": "10.7.1"
}
},
"jsx-ast-utils": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz",
@ -19887,6 +20129,11 @@
"ts-pnp": "^1.1.6"
}
},
"popper.js": {
"version": "1.16.1-lts",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
"integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
},
"portfinder": {
"version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@ -20649,9 +20896,9 @@
"integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc="
},
"prettier": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz",
"integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ=="
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz",
"integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA=="
},
"prettier-linter-helpers": {
"version": "1.0.0",
@ -21369,6 +21616,17 @@
}
}
},
"react-transition-group": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
"integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
"requires": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2"
}
},
"read": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
@ -21644,14 +21902,15 @@
}
},
"rehype-react": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/rehype-react/-/rehype-react-7.0.1.tgz",
"integrity": "sha512-H1Dha9uGt2ThGEpWT3p1lOUpvvihhXoa0FfANfkAfKJVQH1E4dXGwaJTdYcNGaZUXl9eU9enbGLo6iW6VUPrlA==",
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/rehype-react/-/rehype-react-7.0.2.tgz",
"integrity": "sha512-jVndWMaGFrBOI8Z5B9B4sAJZFRaSt9IXrSC3m1QfJrxznud3834HxCgO0TmHi/8oFp0vgHw7aTZsYQ73+VI0kQ==",
"requires": {
"@mapbox/hast-util-table-cell-style": "^0.2.0",
"@types/hast": "^2.0.0",
"@types/react": "^17.0.0",
"hast-to-hyperscript": "^10.0.0",
"hast-util-whitespace": "^2.0.0",
"unified": "^10.0.0"
},
"dependencies": {
@ -21687,6 +21946,11 @@
"web-namespaces": "^2.0.0"
}
},
"hast-util-whitespace": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.0.tgz",
"integrity": "sha512-Pkw+xBHuV6xFeJprJe2BBEoDV+AvQySaz3pPDRUs5PNZEMQjpXJJueqrpcHIXxnWTcAGi/UOCgVShlkY6kLoqg=="
},
"is-buffer": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
@ -23806,6 +24070,11 @@
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.0.tgz",
"integrity": "sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w=="
},
"strip-markdown": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/strip-markdown/-/strip-markdown-3.1.2.tgz",
"integrity": "sha512-NjwW6CEefesmHQPs7lof/lgnSriqUnRNOWpnrNPq9A7/yOCdnhaB7DcxlhYuN7WiiRUe349aitAsTQ/ajM9Dmw=="
},
"strip-outer": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
@ -23962,9 +24231,9 @@
}
},
"swagger-client": {
"version": "3.16.0",
"resolved": "https://registry.npmjs.org/swagger-client/-/swagger-client-3.16.0.tgz",
"integrity": "sha512-fE+HPDla35+k9uXd9BmgZNvhUaM1oA8iCILOINYrziFK3+dkiSLG57h9Z4QOlcVMr/MjVHYy/1JbftlMt+sQ2A==",
"version": "3.16.1",
"resolved": "https://registry.npmjs.org/swagger-client/-/swagger-client-3.16.1.tgz",
"integrity": "sha512-BcNRQzXHRGuXfhN0f80ptlr+bSaPvXwo8+gWbpmTnbKdAjcWOKAWwUx7rgGHjTKZh0qROr/GX9xOZIY8LrBuTg==",
"requires": {
"@babel/runtime-corejs3": "^7.11.2",
"btoa": "^1.2.1",
@ -23976,7 +24245,7 @@
"form-data-encoder": "^1.4.3",
"formdata-node": "^4.0.0",
"js-yaml": "^4.1.0",
"lodash": "^4.17.19",
"lodash": "^4.17.21",
"qs": "^6.9.4",
"querystring-browser": "^1.0.4",
"traverse": "~0.6.6",
@ -23984,9 +24253,9 @@
},
"dependencies": {
"@babel/runtime-corejs3": {
"version": "7.15.3",
"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.15.3.tgz",
"integrity": "sha512-30A3lP+sRL6ml8uhoJSs+8jwpKzbw8CqBvDc1laeptxPm5FahumJxirigcbD2qTs71Sonvj1cyZB0OKGAmxQ+A==",
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.15.4.tgz",
"integrity": "sha512-lWcAqKeB624/twtTc3w6w/2o9RqJPaNBhPGK6DKLSiwuVWC7WFkypWyNg+CpZoyJH0jVzv1uMtXZ/5/lQOLtCg==",
"requires": {
"core-js-pure": "^3.16.0",
"regenerator-runtime": "^0.13.4"
@ -24012,9 +24281,9 @@
"integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA=="
},
"core-js-pure": {
"version": "3.16.2",
"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.16.2.tgz",
"integrity": "sha512-oxKe64UH049mJqrKkynWp6Vu0Rlm/BTXO/bJZuN2mmR3RtOFNepLlSWDd1eo16PzHpQAoNG97rLU1V/YxesJjw=="
"version": "3.17.3",
"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.17.3.tgz",
"integrity": "sha512-YusrqwiOTTn8058JDa0cv9unbXdIiIgcgI9gXso0ey4WgkFLd3lYlV9rp9n7nDCsYxXsMDTjA4m1h3T348mdlQ=="
},
"cross-fetch": {
"version": "3.1.4",
@ -24323,6 +24592,11 @@
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
},
"tiny-warning": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
},
"tinycolor2": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
@ -25573,6 +25847,11 @@
"resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-1.1.4.tgz",
"integrity": "sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw=="
},
"web-streams-polyfill": {
"version": "4.0.0-beta.1",
"resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-4.0.0-beta.1.tgz",
"integrity": "sha512-3ux37gEX670UUphBF9AMCq8XM6iQ8Ac6A+DSRRjDoRBm1ufCkaCDdNVbaqq60PsEkdNlLKrGtv/YBP4EJXqNtQ=="
},
"webpack": {
"version": "4.46.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",

15
package.json
View File

@ -16,8 +16,11 @@
"test": "npm run lint"
},
"dependencies": {
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@oceanprotocol/art": "^3.2.0",
"axios": "^0.21.1",
"axios": "^0.21.4",
"classnames": "^2.3.1",
"gatsby": "^2.32.13",
"gatsby-image": "^3.11.0",
@ -43,24 +46,26 @@
"gatsby-source-git": "^1.1.0",
"gatsby-source-graphql": "^2.14.0",
"gatsby-transformer-remark": "^2.16.1",
"gatsby-transformer-remark-plaintext": "^1.0.3",
"gatsby-transformer-sharp": "^2.12.1",
"gatsby-transformer-xml": "^2.10.0",
"gatsby-transformer-yaml": "^2.11.0",
"giphy-js-sdk-core": "^1.0.6",
"intersection-observer": "^0.12.0",
"js-search": "^2.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-json-view": "^1.21.3",
"react-scrollspy": "^3.4.3",
"rehype-react": "^7.0.1",
"rehype-react": "^7.0.2",
"remark": "^13.0.0",
"remark-github-plugin": "^1.4.0",
"remark-react": "^8.0.0",
"shortid": "^2.2.16",
"slugify": "^1.6.0",
"smoothscroll-polyfill": "^0.4.4",
"swagger-client": "^3.16.0"
"swagger-client": "^3.16.1"
},
"devDependencies": {
"@svgr/webpack": "^5.5.0",
@ -68,13 +73,13 @@
"eslint": "^7.32.0",
"eslint-config-oceanprotocol": "^1.5.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.1",
"eslint-plugin-prettier": "^4.0.0",
"git-format-staged": "^2.1.2",
"husky": "^7.0.2",
"markdownlint-cli": "^0.28.1",
"node-sass": "^5.0.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.3.2"
"prettier": "^2.4.1"
},
"repository": {
"type": "git",

3
src/components/Header.jsx
View File

@ -2,6 +2,7 @@ import React from 'react'
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'
const query = graphql`
query {
@ -37,7 +38,6 @@ const Header = () => (
<Logo className={styles.headerLogoImage} />
<h1 className={styles.headerTitle}>{siteTitle}</h1>
</Link>
<nav className={styles.headerMenu}>
{sections.map(({ node }) => (
<Link
@ -48,6 +48,7 @@ const Header = () => (
{node.title}
</Link>
))}
<SearchButton />
</nav>
</div>
</header>

10
src/components/HeaderHome.jsx
View File

@ -3,6 +3,7 @@ import { StaticQuery, graphql } from 'gatsby'
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'
const HeaderHome = () => (
<StaticQuery
@ -24,7 +25,14 @@ const HeaderHome = () => (
<Content>
<Logo className={styles.headerLogo} />
<h1 className={styles.headerTitle}>{siteTitle}</h1>
<p className={styles.headerDescription}>{siteDescription}</p>
<p className={styles.headerDescription}>
<div style={{ display: 'flex', flexDirection: 'column' }}>
{siteDescription}
<div>
<SearchButton />
</div>
</div>
</p>
</Content>
</header>
)

16
src/components/Repository/index.jsx
View File

@ -26,11 +26,12 @@ const queryGithub = graphql`
totalCount
}
releases(
first: 1
first: 2
orderBy: { field: CREATED_AT, direction: DESC }
) {
edges {
node {
isDraft
tag {
name
}
@ -80,12 +81,20 @@ const Repository = ({ name, links, readme }) => (
})
.filter((n) => n)
const repo = repoFilteredArray[0]
var repo = repoFilteredArray[0]
// safeguard against more empty items,
// e.g. when private repos are referenced in repositories.yml
if (repo === undefined) return null
const releasesFilteredArray = repo.releases.edges
.filter(({ node }) => {
return !node.isDraft
})
.splice(0, 1)
repo = {
...repo,
releases: { edges: releasesFilteredArray }
}
const {
url,
description,
@ -110,7 +119,6 @@ const Repository = ({ name, links, readme }) => (
})
const moreLinks = links || linksFilteredArray.filter((n) => n)[0]
return (
<article className={styles.repository}>
<Title

13
src/components/Search/SearchButton.jsx Normal file
View File

@ -0,0 +1,13 @@
import React from 'react'
import { navigate } from 'gatsby'
import { IconButton } from '@material-ui/core'
import SearchIcon from '@material-ui/icons/Search'
const SearchButton = () => {
return (
<IconButton onClick={() => navigate('/search')}>
<SearchIcon />
</IconButton>
)
}
export default SearchButton

150
src/components/Search/SearchClient.jsx Normal file
View File

@ -0,0 +1,150 @@
import React, { useState, useEffect } from 'react'
import * as JsSearch from 'js-search'
import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/core/styles'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import TextField from '@material-ui/core/TextField'
import InputAdornment from '@material-ui/core/InputAdornment'
import SearchIcon from '@material-ui/icons/Search'
import SearchResultElement from './SearchResultElement'
const useStyles = makeStyles((theme) => ({
parent: {
overflow: 'hidden',
position: 'relative',
width: '100%'
},
child: {
background: 'green',
height: '100%',
width: '50%',
position: 'absolute',
right: 0,
top: 0
},
root: {
margin: 'auto',
width: '50%'
}
}))
const SearchClient = ({ searchableData }) => {
const [searchState, setSearchState] = useState({
isLoading: true,
searchResults: [],
search: null,
isError: false,
termFrequency: true,
removeStopWords: false,
searchQuery: '',
selectedStrategy: '',
selectedSanitizer: '',
touched: false
})
const classes = useStyles()
useEffect(() => {
rebuildIndex(searchableData)
}, [])
const rebuildIndex = (searchableData) => {
// const {
// removeStopWords,
// selectedStrategy,
// selectedSanitizer,
// termFrequency
// } = searchState
const dataToSearch = new JsSearch.Search('title')
dataToSearch.addIndex('title')
dataToSearch.addIndex('description')
dataToSearch.addIndex('text')
dataToSearch.addDocuments(searchableData)
setSearchState({
...searchState,
isLoading: false,
search: dataToSearch
})
}
const searchData = (e) => {
const { search } = searchState
const queryResult = search.search(e.target.value)
setSearchState({
...searchState,
touched: true,
searchQuery: e.target.value,
searchResults: queryResult
})
}
const handleSubmit = (e) => {
e.preventDefault()
}
return (
<div style={{ height: '100%' }}>
<form onSubmit={handleSubmit}>
<TextField
variant="outlined"
placeholder="Search"
style={{
margin: '10px auto',
width: '100%'
}}
autoFocus
value={searchState.searchQuery}
onChange={searchData}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
)
}}
/>
</form>
<div
id="result-list-conatiner"
style={{ overflowY: 'auto', height: '100%' }}
className={classes.parent}
>
{searchState.touched ? (
<div>
<ResultList searchResults={searchState.searchResults} />
</div>
) : null}
</div>
</div>
)
}
SearchClient.propTypes = {
searchableData: PropTypes.array.isRequired
}
const ResultList = ({ searchResults }) => {
return (
<div style={{ maxHeight: '100%' }}>
<div>Total results found: {searchResults.length}</div>
<div>
<List style={{ maxHeight: '100%' }}>
{searchResults.map((element) => (
<ListItem style={{ before: { content: null } }} key={element.id}>
<SearchResultElement element={element} />
</ListItem>
))}
</List>
</div>
</div>
)
}
ResultList.propTypes = {
searchResults: PropTypes.array.isRequired
}
export default SearchClient

89
src/components/Search/SearchComponent.jsx Normal file
View File

@ -0,0 +1,89 @@
import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import SearchClient from './SearchClient'
import Layout from '../../components/Layout'
import HeaderSection from '../../components/HeaderSection'
import PropTypes from 'prop-types'
const SearchComponent = ({ location }) => {
const data = useStaticQuery(graphql`
query {
allMarkdownRemark(
filter: { fileAbsolutePath: { regex: "/content/|/markdowns/" } }
) {
edges {
node {
fields {
slug
section
}
frontmatter {
title
description
app
slug
module
}
id
plainText
}
}
}
}
`)
const searchableData = data.allMarkdownRemark.edges.map(({ node }) => {
var { slug } = node.fields
var section = null
if (node.fields.slug.startsWith('/tutorials')) {
section = 'Tutorials'
} else if (node.fields.slug.startsWith('/concepts')) {
section = 'Core concepts'
} else if (node.frontmatter.module) {
// This is for adding py module docs to index
slug = `/references/read-the-docs/${node.frontmatter.app.replace(
'.',
'-'
)}/${node.frontmatter.slug}`
section = `API References [${node.frontmatter.app}]`
}
return {
title: node.frontmatter.title,
description: node.frontmatter.description,
id: node.id,
text: node.plainText,
slug,
section
}
})
return (
<Layout location={location}>
<HeaderSection title="Search" />
<main>
<article style={{ height: '700px' }}>
<div
id="search-client-container"
style={{
margin: 'auto',
width: '50%',
height: '100%',
paddingBottom: '50px'
}}
>
<SearchClient searchableData={searchableData} />
</div>
</article>
</main>
</Layout>
)
}
SearchComponent.propTypes = {
location: PropTypes.object.isRequired
}
export default SearchComponent

10
src/components/Search/SearchComponent.module.scss Normal file
View File

@ -0,0 +1,10 @@
@import 'variables';
.searchform input[type='text'] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 16px;
font-size: 17px;
}

54
src/components/Search/SearchResultElement.jsx Normal file
View File

@ -0,0 +1,54 @@
import React from 'react'
import { Link } from 'gatsby'
import PropTypes from 'prop-types'
import Card from '@material-ui/core/Card'
import CardContent from '@material-ui/core/CardContent'
import Typography from '@material-ui/core/Typography'
import { makeStyles } from '@material-ui/core/styles'
const useStyles = makeStyles({
root: {
minWidth: 275
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)'
},
title: {
fontSize: 14
},
pos: {
marginBottom: 12
}
})
const SearchResultElement = ({ element }) => {
const classes = useStyles()
const { slug, title, section, description } = element
return (
<Card container alignItems="center" style={{ width: '100%' }}>
<CardContent>
<Typography
className={classes.title}
color="textSecondary"
gutterBottom
>
{section}
</Typography>
<Typography variant="h6" component="h2">
<Link to={slug}>{title}</Link>
</Typography>
<Typography className={classes.pos} color="textSecondary">
{description ? description.substring(0, 100) + '...' : null}
</Typography>
</CardContent>
</Card>
)
}
SearchResultElement.propTypes = {
element: PropTypes.object.isRequired
}
export default SearchResultElement

1
src/pages/index.jsx
View File

@ -66,7 +66,6 @@ const IndexPage = ({ data, location }) => (
</li>
))}
</ul>
<Repositories />
</Content>
</Layout>

5
src/pages/index.module.scss
View File

@ -112,3 +112,8 @@
transition: transform 0.2s ease-out;
}
}
.searchButton {
margin-top: 20px;
text-align: center;
}

27
src/templates/Swagger/Toc.jsx
View File

@ -8,7 +8,6 @@ import stylesSidebar from '../../components/Sidebar.module.scss'
const Toc = ({ data }) => {
const Ids = []
const itemsV1 = Object.keys(data.paths)
.filter((key) => key.startsWith('/api/v1/aquarius'))
.map((key) => {
@ -36,20 +35,30 @@ const Toc = ({ data }) => {
</li>
)
})
const getRestEndpoints = () => {
if (data.info.title === 'Aquarius') {
return (
<>
<code>/api/v1/aquarius</code>
<ul>{itemsV1}</ul>
{itemsOther.length ? (
<>
<code>Other REST endpoints</code>
<ul>{itemsOther}</ul>
</>
) : null}
</>
)
} else return <>{itemsOther}</>
}
return (
<Scrollspy
items={Ids}
currentClassName={stylesSidebar.scrollspyActive}
offset={-100}
>
<code>/api/v1/aquarius</code>
<ul>{itemsV1}</ul>
{itemsOther.length ? (
<>
<code>Other REST endpoints</code>
<ul>{itemsOther}</ul>
</>
) : null}
{getRestEndpoints()}
</Scrollspy>
)
}