diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..338a8b9 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "semi": false, + "singleQuote": true, + "trailingComma": "none", + "tabWidth": 2 +} diff --git a/README.md b/README.md index 985d850..26eca80 100644 --- a/README.md +++ b/README.md @@ -2,100 +2,55 @@

art

-> 🐬 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) -- [Typography](#typography) +- [Brand Assets](#brand-assets) - [Usage](#usage) - - [Use as npm package](#use-as-npm-package) - - [Use as a submodule](#use-as-a-submodule) - - [Usage in JavaScript/React](#usage-in-javascriptreact) +- [Typography](#typography) - [License](#license) --- -## Repository Contents +## Brand Assets - [Logo](logo/) - [Banner](banner/) -- [Jellyfish](jellyfish/) -- [Manta ray](mantaray/) -- [Squid](squid/) +- [Waves](waves/) +- [Creatures](creatures/) - [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 -git submodule add git@github.com:oceanprotocol/art.git lib/art -``` - -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' - - -``` - -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' - - -``` - -And then style away in CSS: - -```css -.logo { - fill: #141414; - stroke: none; +function MyComponent() { + return } ``` +## 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/). diff --git a/banner/README.md b/banner/README.md index ce742b5..5c60386 100644 --- a/banner/README.md +++ b/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) \ No newline at end of file diff --git a/banner/banner-ocean-01.png b/banner/banner-ocean-01.png index 19306c9..025776e 100644 Binary files a/banner/banner-ocean-01.png and b/banner/banner-ocean-01.png differ diff --git a/banner/banner-ocean-01@2x.png b/banner/banner-ocean-01@2x.png index 72c15b0..ec859dc 100644 Binary files a/banner/banner-ocean-01@2x.png and b/banner/banner-ocean-01@2x.png differ diff --git a/banner/banner-ocean-02.png b/banner/banner-ocean-02.png index 3c740bd..99e2d8e 100644 Binary files a/banner/banner-ocean-02.png and b/banner/banner-ocean-02.png differ diff --git a/banner/banner-ocean-02@2x.png b/banner/banner-ocean-02@2x.png index d119ed9..eb75ea1 100644 Binary files a/banner/banner-ocean-02@2x.png and b/banner/banner-ocean-02@2x.png differ diff --git a/banner/banner-ocean-03.png b/banner/banner-ocean-03.png deleted file mode 100644 index 3966ab9..0000000 Binary files a/banner/banner-ocean-03.png and /dev/null differ diff --git a/banner/banner-ocean-03@2x.png b/banner/banner-ocean-03@2x.png deleted file mode 100644 index 0b94890..0000000 Binary files a/banner/banner-ocean-03@2x.png and /dev/null differ diff --git a/banner/banner-ocean-04.png b/banner/banner-ocean-04.png deleted file mode 100644 index dcf3169..0000000 Binary files a/banner/banner-ocean-04.png and /dev/null differ diff --git a/banner/banner-ocean-04@2x.png b/banner/banner-ocean-04@2x.png deleted file mode 100644 index bf6e740..0000000 Binary files a/banner/banner-ocean-04@2x.png and /dev/null differ diff --git a/banner/banner-ocean-05.png b/banner/banner-ocean-05.png deleted file mode 100644 index ca76e78..0000000 Binary files a/banner/banner-ocean-05.png and /dev/null differ diff --git a/banner/banner-ocean-05@2x.png b/banner/banner-ocean-05@2x.png deleted file mode 100644 index 232d8ae..0000000 Binary files a/banner/banner-ocean-05@2x.png and /dev/null differ diff --git a/banner/banner-ocean-06.png b/banner/banner-ocean-06.png deleted file mode 100644 index 1737f6f..0000000 Binary files a/banner/banner-ocean-06.png and /dev/null differ diff --git a/banner/banner-ocean-06@2x.png b/banner/banner-ocean-06@2x.png deleted file mode 100644 index 30ec3a2..0000000 Binary files a/banner/banner-ocean-06@2x.png and /dev/null differ diff --git a/creatures/README.md b/creatures/README.md new file mode 100644 index 0000000..478272e --- /dev/null +++ b/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). + + + + + + + + + \ No newline at end of file diff --git a/jellyfish/jellyfish-full.svg b/creatures/jellyfish/jellyfish-full.svg similarity index 100% rename from jellyfish/jellyfish-full.svg rename to creatures/jellyfish/jellyfish-full.svg diff --git a/jellyfish/jellyfish-full@2x.png b/creatures/jellyfish/jellyfish-full@2x.png similarity index 100% rename from jellyfish/jellyfish-full@2x.png rename to creatures/jellyfish/jellyfish-full@2x.png diff --git a/creatures/jellyfish/jellyfish-grid.svg b/creatures/jellyfish/jellyfish-grid.svg new file mode 100644 index 0000000..41443b5 --- /dev/null +++ b/creatures/jellyfish/jellyfish-grid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/creatures/jellyfish/jellyfish-grid@2x.png b/creatures/jellyfish/jellyfish-grid@2x.png new file mode 100644 index 0000000..621c748 Binary files /dev/null and b/creatures/jellyfish/jellyfish-grid@2x.png differ diff --git a/mantaray/mantaray-full.svg b/creatures/mantaray/mantaray-full.svg similarity index 100% rename from mantaray/mantaray-full.svg rename to creatures/mantaray/mantaray-full.svg diff --git a/creatures/mantaray/mantaray-full@2x.png b/creatures/mantaray/mantaray-full@2x.png new file mode 100644 index 0000000..87006a2 Binary files /dev/null and b/creatures/mantaray/mantaray-full@2x.png differ diff --git a/creatures/mantaray/mantaray-grid.svg b/creatures/mantaray/mantaray-grid.svg new file mode 100644 index 0000000..f5b7e0f --- /dev/null +++ b/creatures/mantaray/mantaray-grid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/creatures/mantaray/mantaray-grid@2x.png b/creatures/mantaray/mantaray-grid@2x.png new file mode 100644 index 0000000..cc74bae Binary files /dev/null and b/creatures/mantaray/mantaray-grid@2x.png differ diff --git a/squid/squid-full.svg b/creatures/squid/squid-full.svg similarity index 100% rename from squid/squid-full.svg rename to creatures/squid/squid-full.svg diff --git a/creatures/squid/squid-full@2x.png b/creatures/squid/squid-full@2x.png new file mode 100644 index 0000000..96438b7 Binary files /dev/null and b/creatures/squid/squid-full@2x.png differ diff --git a/creatures/squid/squid-grid.svg b/creatures/squid/squid-grid.svg new file mode 100644 index 0000000..e8e6e33 --- /dev/null +++ b/creatures/squid/squid-grid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/creatures/squid/squid-grid@2x.png b/creatures/squid/squid-grid@2x.png new file mode 100644 index 0000000..0590af7 Binary files /dev/null and b/creatures/squid/squid-grid@2x.png differ diff --git a/github/README.md b/github/README.md index d161983..82798fa 100644 --- a/github/README.md +++ b/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 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 repo banner +- 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 ## 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)

repo-name

@@ -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)

repo-name

@@ -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. diff --git a/github/repo-banner.sketch b/github/repo-banner.sketch deleted file mode 100644 index ed174e2..0000000 Binary files a/github/repo-banner.sketch and /dev/null differ diff --git a/github/repo-banner@2x.png b/github/repo-banner@2x.png index 1409ecf..a38f968 100644 Binary files a/github/repo-banner@2x.png and b/github/repo-banner@2x.png differ diff --git a/jellyfish/README.md b/jellyfish/README.md deleted file mode 100644 index 76a8978..0000000 --- a/jellyfish/README.md +++ /dev/null @@ -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). - - - - diff --git a/jellyfish/jellyfish-back-fill.svg b/jellyfish/jellyfish-back-fill.svg deleted file mode 100644 index 5f3d467..0000000 --- a/jellyfish/jellyfish-back-fill.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/jellyfish/jellyfish-back-fill@2x.png b/jellyfish/jellyfish-back-fill@2x.png deleted file mode 100644 index fb15606..0000000 Binary files a/jellyfish/jellyfish-back-fill@2x.png and /dev/null differ diff --git a/jellyfish/jellyfish-back.svg b/jellyfish/jellyfish-back.svg deleted file mode 100644 index 1c16d7c..0000000 --- a/jellyfish/jellyfish-back.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/jellyfish/jellyfish-back@2x.png b/jellyfish/jellyfish-back@2x.png deleted file mode 100644 index 3f67790..0000000 Binary files a/jellyfish/jellyfish-back@2x.png and /dev/null differ diff --git a/jellyfish/jellyfish-grid.svg b/jellyfish/jellyfish-grid.svg deleted file mode 100644 index 0922cd1..0000000 --- a/jellyfish/jellyfish-grid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/jellyfish/jellyfish-grid@2x.png b/jellyfish/jellyfish-grid@2x.png deleted file mode 100644 index 6ea1b88..0000000 Binary files a/jellyfish/jellyfish-grid@2x.png and /dev/null differ diff --git a/logo/logo-white.png b/logo/logo-white.png index c8b59f1..c985823 100644 Binary files a/logo/logo-white.png and b/logo/logo-white.png differ diff --git a/logo/logo.png b/logo/logo.png index 84499e4..f901e7c 100644 Binary files a/logo/logo.png and b/logo/logo.png differ diff --git a/mantaray/README.md b/mantaray/README.md deleted file mode 100644 index 4ee000c..0000000 --- a/mantaray/README.md +++ /dev/null @@ -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). - - - - diff --git a/mantaray/mantaray-back-fill.svg b/mantaray/mantaray-back-fill.svg deleted file mode 100644 index df7887d..0000000 --- a/mantaray/mantaray-back-fill.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/mantaray/mantaray-back-fill@2x.png b/mantaray/mantaray-back-fill@2x.png deleted file mode 100644 index b9afa49..0000000 Binary files a/mantaray/mantaray-back-fill@2x.png and /dev/null differ diff --git a/mantaray/mantaray-back.svg b/mantaray/mantaray-back.svg deleted file mode 100644 index af64c31..0000000 --- a/mantaray/mantaray-back.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/mantaray/mantaray-back@2x.png b/mantaray/mantaray-back@2x.png deleted file mode 100644 index 4ef9f89..0000000 Binary files a/mantaray/mantaray-back@2x.png and /dev/null differ diff --git a/mantaray/mantaray-full@2x.png b/mantaray/mantaray-full@2x.png deleted file mode 100644 index 0f6ed74..0000000 Binary files a/mantaray/mantaray-full@2x.png and /dev/null differ diff --git a/mantaray/mantaray-grid.svg b/mantaray/mantaray-grid.svg deleted file mode 100644 index 4290953..0000000 --- a/mantaray/mantaray-grid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/mantaray/mantaray-grid@2x.png b/mantaray/mantaray-grid@2x.png deleted file mode 100644 index 6c12afe..0000000 Binary files a/mantaray/mantaray-grid@2x.png and /dev/null differ diff --git a/package.json b/package.json index 52a4498..feff6aa 100644 --- a/package.json +++ b/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-minor": "./node_modules/release-it/bin/release-it.js minor --src.tagName='v%s' --github.release --npm.publish --non-interactive", - "release-major": "./node_modules/release-it/bin/release-it.js major --src.tagName='v%s' --github.release --npm.publish --non-interactive" + "release": "release-it", + "changelog": "auto-changelog -p" }, "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 + } } } diff --git a/squid/README.md b/squid/README.md deleted file mode 100644 index c59a99d..0000000 --- a/squid/README.md +++ /dev/null @@ -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). - - - - diff --git a/squid/squid-back-fill.svg b/squid/squid-back-fill.svg deleted file mode 100644 index 7df5bd8..0000000 --- a/squid/squid-back-fill.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/squid/squid-back-fill@2x.png b/squid/squid-back-fill@2x.png deleted file mode 100644 index dd6af7e..0000000 Binary files a/squid/squid-back-fill@2x.png and /dev/null differ diff --git a/squid/squid-back.svg b/squid/squid-back.svg deleted file mode 100644 index 74ed38a..0000000 --- a/squid/squid-back.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/squid/squid-back@2x.png b/squid/squid-back@2x.png deleted file mode 100644 index 43532c6..0000000 Binary files a/squid/squid-back@2x.png and /dev/null differ diff --git a/squid/squid-full@2x.png b/squid/squid-full@2x.png deleted file mode 100644 index 1e19bce..0000000 Binary files a/squid/squid-full@2x.png and /dev/null differ diff --git a/squid/squid-grid.svg b/squid/squid-grid.svg deleted file mode 100644 index b781e61..0000000 --- a/squid/squid-grid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/squid/squid-grid@2x.png b/squid/squid-grid@2x.png deleted file mode 100644 index 4015cca..0000000 Binary files a/squid/squid-grid@2x.png and /dev/null differ diff --git a/waves/README.md b/waves/README.md new file mode 100644 index 0000000..9970c3d --- /dev/null +++ b/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. + + diff --git a/waves/waves.png b/waves/waves.png new file mode 100644 index 0000000..c370861 Binary files /dev/null and b/waves/waves.png differ diff --git a/waves/waves.svg b/waves/waves.svg new file mode 100644 index 0000000..55aceb6 --- /dev/null +++ b/waves/waves.svg @@ -0,0 +1 @@ + \ No newline at end of file