Merge pull request #7 from oceanprotocol/v2

New branding

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "tabWidth": 2
+}

README.md

@@ -2,100 +2,55 @@
 
 <h1 align="center">art</h1>
 
-> 🐬 Ocean Protocol's assets for community distribution.
+> 🐬 Ocean Protocol's brand assets for community distribution.
 
 [![npm](https://img.shields.io/npm/v/@oceanprotocol/art.svg)](https://www.npmjs.com/package/@oceanprotocol/art)
 
-All assets in this repo can also be viewed and downloaded from [oceanprotocol.com/art](https://oceanprotocol.com/art). You'll find a living styleguide there too.
+All assets in this repo can also be viewed and downloaded from [oceanprotocol.com/art](https://oceanprotocol.com/art). You'll find a living style guide there too.
 
-- [Repository Contents](#repository-contents)
+- [Brand Assets](#brand-assets)
-- [Typography](#typography)
 - [Usage](#usage)
-  - [Use as npm package](#use-as-npm-package)
+- [Typography](#typography)
-  - [Use as a submodule](#use-as-a-submodule)
-  - [Usage in JavaScript/React](#usage-in-javascriptreact)
 - [License](#license)
 
 ---
 
-## Repository Contents
+## Brand Assets
 
 - [Logo](logo/)
 - [Banner](banner/)
-- [Jellyfish](jellyfish/)
+- [Waves](waves/)
-- [Manta ray](mantaray/)
+- [Creatures](creatures/)
-- [Squid](squid/)
 - [GitHub](github/)
 
-## Typography
-
-Our branding typefaces are [Sharp Sans Medium/Bold](https://sharptype.co/typefaces/sharp-sans/#features) in use as body text, and [Sharp Sans Display No. 1 Bold](https://sharptype.co/typefaces/sharp-sans-display-no1/) for headings.
-
-Those are commercial fonts and the license doesn't allow us to distribute them. Hence you won't find them in this repository. If you're a member of the Ocean Protocol team, ask a designer to hand you the font files.
-
-If you only need them for use on the web, you can grab them from inside the private `site` repo's [fonts folder](https://github.com/oceanprotocol/site/tree/master/public/fonts).
-
 ## Usage
 
 It's encouraged to use this repo as a dependency within your projects to keep the assets in sync.
 
-### Use as npm package
-
 The whole repo is published as a npm module so just run for installation:
 
 ```bash
 npm i @oceanprotocol/art
 ```
 
-### Use as a submodule
+Then in your app, you can import the required assets:
 
- From the root of your project folder execute the following to put the submodule under `lib/art/`:
+```jsx
+import logo from '@oceanprotocol/art/logo/logo.svg'
 
-```bash
+function MyComponent() {
-git submodule add git@github.com:oceanprotocol/art.git lib/art
+  return <img src={logo} />
-```
-
-Then, from time to time, update the submodule to get latest upstream changes:
-
-```bash
-# go into submodule folder
-cd ./lib/art
-git checkout master
-git pull
-# get back to your project root
-cd ../../
-
-# or if you're a busy person, update all your submodules at once from the root of your project
-git submodule foreach git pull origin master
-```
-
-### Usage in JavaScript/React
-
-Import the required assets into your project, which will return the file source path:
-
-```js
-import Logo from '@oceanprotocol/art/logo/logo.svg'
-
-<img src={Logo} />
-```
-
-But you usually want SVG assets to be inlined for full control over styling with CSS. To achieve that, you can incorporate [svgr](https://github.com/smooth-code/svgr) into your build process to import SVG assets as actual React components:
-
-```js
-import Logo from '@oceanprotocol/art/logo/logo.svg'
-
-<Logo className="logo" />
-```
-
-And then style away in CSS:
-
-```css
-.logo {
-    fill: #141414;
-    stroke: none;
 }
 ```
 
+## Typography
+
+Our branding typefaces are [Sharp Sans Medium/Bold](https://sharptype.co/typefaces/sharp-sans/#features) in use as body text, and [Sharp Sans Display No. 1 Bold](https://sharptype.co/typefaces/sharp-sans-display-no1/) for headings.
+
+Those are commercial fonts and the license doesn't allow us to distribute them. Hence you won't find them in this repository. If you're a member of the Ocean Protocol team, ask a designer to hand you the font files.
+
+If you only need them for use on the web, you can grab them from inside the private `site` repo's [fonts folder](https://github.com/oceanprotocol/site/tree/master/src/global/fonts).
+
 ## License
 
 All assets are licensed under a [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/).

banner/README.md

@@ -5,11 +5,3 @@ Spruce up your blog posts with these Ocean Protocol banners.
 ![Ocean Banner 1](banner-ocean-01@2x.png)
 
 ![Ocean Banner 2](banner-ocean-02@2x.png)
-
-![Ocean Banner 3](banner-ocean-03@2x.png)
-
-![Ocean Banner 4](banner-ocean-04@2x.png)
-
-![Ocean Banner 5](banner-ocean-05@2x.png)
-
-![Ocean Banner 6](banner-ocean-06@2x.png)

creatures/README.md

@@ -0,0 +1,12 @@
+# Ocean Protocol Creatures
+
+Use any of the variations of the Ocean Protocol creatures. Make sure to place the full versions on a dark background like our black (#141414).
+
+<img src="jellyfish/jellyfish-grid.svg" width="400" />
+<img src="jellyfish/jellyfish-full.svg" width="400" />
+
+<img src="mantaray/mantaray-grid.svg" width="400" />
+<img src="mantaray/mantaray-full.svg" width="400" />
+
+<img src="squid/squid-grid.svg" width="400" />
+<img src="squid/squid-full.svg" width="400" />

github/README.md

@@ -2,16 +2,16 @@
 
 Use the repo banner to decorate an official Ocean Protocol repository's readme file and follow those points to open source a repo:
 
-* add repo banner
+- add repo banner
-* add LICENSE file, add license block at end of readme
+- add LICENSE file, add license block at end of readme
-* add badges, like a Travis badge linking to the project on Travis. If repo has been published to package registries, add their badge too. You can use shields.io to get them all from one place
+- add badges, like a Travis badge linking to the project on Travis. If repo has been published to package registries, add their badge too. You can use shields.io to get them all from one place
 
 ## Basic readme structure
 
-Always start a project's readme file like so, note how the banner is linked to our landing page:
+Always start a project's readme file like so, note how the banner is linked to our landing page and sourced remotely from the `art` repo:
 
 ```md
-[![banner](repo-banner@2x.png)](https://oceanprotocol.com)
+[![banner](https://raw.githubusercontent.com/oceanprotocol/art/master/github/repo-banner%402x.png)](https://oceanprotocol.com)
 
 <h1 align="center">repo-name</h1>
 
@@ -21,7 +21,7 @@ Always start a project's readme file like so, note how the banner is linked to o
 ```
 
 Which will return:
-[![banner](repo-banner@2x.png)](https://oceanprotocol.com)
+[![banner](https://raw.githubusercontent.com/oceanprotocol/art/master/github/repo-banner%402x.png)](https://oceanprotocol.com)
 
 <h1 align="center">repo-name</h1>
 
@@ -30,28 +30,3 @@ Which will return:
 [![npm](https://img.shields.io/npm/v/@oceanprotocol/art.svg)](https://www.npmjs.com/package/@oceanprotocol/art)
 
 The tagline in there should always be the same as the repo description on GitHub. With tagline, try to summarize what a user can do with the repo. And most importantly: pick an emoji for your project and put it in front of the tagline.
-
-### Table of Contents
-
-As soon as you have more than 3 sections in your readme, add a Table of Contents above all content. [toctoc](https://github.com/n1k0/toctoc) is your friend:
-
-1. add this block to yopur readme after the project intro:
-
-    ```md
-    ## Table of Contents
-    ---
-    ```
-
-2. run toctoc:
-
-    ```bash
-    toctoc README.md -w
-    ```
-
-And make sure to update TOC as you update your readme too.
-
-### Usage
-
-Then immediately start with usage instructions. Goal should be for any dev to be able to get the project running within 1 min. So make it nicely copy/pasteable, don't just say "clone the repo and install dependencies". Write it out, e.g. see in [site repo](https://github.com/oceanprotocol/site/blob/master/README.md#development)
-
-Those first usage instructions should be as short as possible so this implies you have to setup everything in your project to make that possible. E.g. for front end projects everything should be handled behind a simple npm start script.

jellyfish/README.md

@@ -1,7 +0,0 @@
-# Ocean Protocol Jellyfish
-
-Use any of the variations of the Ocean Protocol jellyfish. Make sure to always place it on a dark background like our black (#141414).
-
-<img src="jellyfish-full.svg" width="400" />
-<img src="jellyfish-grid.svg" width="400" />
-<img src="jellyfish-back-fill.svg" width="400" />

mantaray/README.md

@@ -1,7 +0,0 @@
-# Ocean Protocol Mantaray
-
-Use any of the variations of the Ocean Protocol jellyfish. Make sure to always place it on a dark background like our black (#141414).
-
-<img src="mantaray-full.svg" width="400" />
-<img src="mantaray-grid.svg" width="400" />
-<img src="mantaray-back-fill.svg" width="400" />

package.json

@@ -1,13 +1,12 @@
 {
   "name": "@oceanprotocol/art",
   "version": "2.2.0",
-  "description": "Ocean Protocol's assets for community distribution.",
+  "description": "Ocean Protocol's brand assets for community distribution.",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "release": "./node_modules/release-it/bin/release-it.js --src.tagName='v%s' --github.release --npm.publish --non-interactive",
+    "release": "release-it",
-    "release-minor": "./node_modules/release-it/bin/release-it.js minor --src.tagName='v%s' --github.release --npm.publish --non-interactive",
+    "changelog": "auto-changelog -p"
-    "release-major": "./node_modules/release-it/bin/release-it.js major --src.tagName='v%s' --github.release --npm.publish --non-interactive"
   },
   "repository": {
     "type": "git",
@@ -20,6 +19,21 @@
   },
   "homepage": "https://oceanprotocol.com",
   "devDependencies": {
-    "release-it": "^8.0.1"
+    "auto-changelog": "^2.1.0",
+    "release-it": "^13.6.4"
+  },
+  "release-it": {
+    "hooks": {
+      "after:bump": "npm run changelog"
+    },
+    "git": {
+      "tagName": "v${version}"
+    },
+    "github": {
+      "release": true
+    },
+    "npm": {
+      "publish": true
+    }
   }
 }

squid/README.md

@@ -1,7 +0,0 @@
-# Ocean Protocol Squid
-
-Use any of the variations of the Ocean Protocol squid. Make sure to always place it on a dark background like our black (#141414).
-
-<img src="squid-full.svg" width="400" />
-<img src="squid-grid.svg" width="400" />
-<img src="squid-back-fill.svg" width="400" />

waves/README.md

@@ -0,0 +1,11 @@
+# The Ocean Protocol Waves
+
+Created and designed entirely in code as SVG paths, animated with CSS by [D3.js](https://d3js.org).
+
+The original wave used on our website can be found on CodePen, which you can use to create your own screenshots of the waves in other variations.
+
+- [CodePen: Ocean Protocol Waves](https://codepen.io/kremalicious/pen/vYLNWXe)
+
+The assets in this repo are a recreation of those code-generated waves.
+
+<img src="waves.svg" />

waves/waves.svg

@@ -0,0 +1 @@
+<svg fill="none" height="352" viewBox="0 0 2050 352" width="2050" xmlns="http://www.w3.org/2000/svg"><g stroke-width="2"><path d="m2049 8.59412c-22.5-6.49994-88-14.49994-182.5 2.99998-134.5 50-164 64.5-257 67.9999-102.5 14.5001-195-25.4999-302-14.5-174.74 47.081-196 150.371-313.5 147s-206-103.465-331-92.5c-85.5 7.5-196 206.5-293.5 206.5-77.274 0-118-26-170-52l-198.5-107.5" stroke="#e2e2e2"/><path d="m1950 2.59412c-19-.00015-77.5 3-113 12.99988-102 42.0001-191 60.9998-283.5 74.9999-77.81 11.7761-233.5-38.8779-302-14.5-170.5 60.6781-196 150.3711-313.5 147.0001s-206-103.465-331-92.5c-85.5 7.5-196 206.5-293.5 206.5-77.274 0-118-26-170-52l-129-77" stroke="#8b98a9"/><path d="m1970 1.09412c-55.5 4.5-88.56 0-177 26.49998-138.5 41.5-206 62.5891-297.5 68.9999-78.5 5.5-233.5-38.8779-302-14.5-170.5 60.678-196 150.371-313.5 147s-206-103.465-331-92.5c-85.5 7.5-196 206.5-293.5 206.5-77.274 0-118-26-170-52l-70-36" stroke="#e000cf"/><path d="m14.5 297.094c52 26 96.226 53.5 173.5 53.5 97.5 0 208-199 293.5-206.5 125-10.965 213.5 89.129 331 92.5s143-86.322 313.5-147c68.5-24.3779 223.5 20 302 14.5 91.5-6.4108 159-27.4999 297.5-68.9999 88.44-26.49998 168-28.49998 223.5-32.99998" stroke="#ff4092"/></g></svg>