drop da base 🦞🍸

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/env"]
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_size = 4
+end_of_line = lf
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintrc

@@ -0,0 +1,12 @@
+{
+    "parser": "babel-eslint",
+    "extends": [
+        "oceanprotocol",
+        "plugin:prettier/recommended",
+        "prettier/standard"
+    ],
+    "plugins": ["prettier"],
+    "rules": {
+        "prettier/prettier": "error"
+    }
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+package-lock.json
+dist

.prettierignore

@@ -0,0 +1 @@
+dist

.prettierrc

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

.travis.yml

@@ -0,0 +1,26 @@
+language: node_js
+node_js: node
+
+# will run `npm install` automatically here
+
+script:
+    - npm test
+    - npm run build
+
+before_deploy:
+    - pip install --user awscli
+    - export PATH=$PATH:$HOME/.local/bin
+
+deploy:
+    skip_cleanup: true
+    provider: script
+    script: npm run deploy
+    on:
+        branch: master
+
+notifications:
+    email: false
+
+cache:
+    directories:
+        - node_modules

README.md

@@ -0,0 +1,108 @@
+[![banner](https://raw.githubusercontent.com/oceanprotocol/art/master/github/repo-banner%402x.png)](https://oceanprotocol.com)
+
+<h1 align="center">datascience</h1>
+
+> 🦞 Landing page for listing our data science tools and directing people to them
+> https://datascience.oceanprotocol.com
+
+[![Build Status](https://travis-ci.com/oceanprotocol/datascience.svg?token=3psqw6c8KMDqfdGQ2x6d&branch=master)](https://travis-ci.com/oceanprotocol/datascience)
+[![js oceanprotocol](https://img.shields.io/badge/js-oceanprotocol-7b1173.svg)](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
+
+
+---
+
+- [Link creation](#link-creation)
+    - [Editing workflow](#editing-workflow)
+- [Development](#development)
+- [Deployment](#deployment)
+- [Authors](#authors)
+- [License](#license)
+
+---
+
+## Link creation
+
+Create a new link by editing the [`content.yml`](content.yml) file. When editing on GitHub, click the pencil icon to start editing the file:
+
+<img width="293" alt="screen shot 2018-11-02 at 11 32 19" src="https://user-images.githubusercontent.com/90316/47910420-15142280-de93-11e8-8ab8-b8616abb7e60.png">
+
+Only thing to remember is to keep the indentation as in this example:
+
+```yaml
+- name: Dutchchain Hackathon 2018
+  url: https://forms.google.com/fewfewhgvbzfbwbe
+
+- name: my other link
+  url: https://hello.com/fdasfrebvfbvgt
+```
+
+### Editing workflow
+
+The basic workflow goes like this:
+
+1. edit the [`content.yml`](content.yml) file
+2. when committing changes, create a new branch and open a pull request
+3. ask for review & approval of pull request
+4. have the pull request merged
+
+<img width="696" alt="screen shot 2018-11-02 at 11 50 14" src="https://user-images.githubusercontent.com/90316/47911346-7dfc9a00-de95-11e8-9414-71fe63b1577b.png">
+
+The `master` branch is protected from being pushed to, enforcing the following rules:
+
+-   every change has to be done in another branch and go through a pull request against `master`
+-   pull requests need to be reviewed and approved
+-   pull requests need to pass the CI status checks
+-   pull requests can be merged by a defined list of members only
+-   when merged into `master`, pull request changes are deployed automatically to live
+
+This will then initiate an automatic build & deployment process, and your change should be live within a minute or so.
+
+## Development
+
+This repo is a simple page builder utilizing [gulp](https://gulpjs.com) and [Liquid](https://shopify.github.io/liquid/) templating.
+
+```bash
+npm i
+npm start
+```
+
+Will start a live-reloading local server, reachable under [localhost:1337](http://localhost:1337).
+
+## Deployment
+
+Page lives in a S3 bucket and deployment happens automatically via Travis based on the rules described in the [editing workflow](#editing-workflow). For that to work, the following environment variables need to be setup in Travis:
+
+-   `AWS_DEFAULT_REGION`
+-   `AWS_ACCESS_KEY_ID`
+-   `AWS_SECRET_ACCESS_KEY`
+
+Every `master` Travis build triggers this script which can also be used for manual emergency deployments:
+
+```bash
+npm run deploy
+# executing ./deploy.sh
+```
+
+DNS for `datascience.oceanprotocol.com` is setup via Cloudflare, pointing to the S3 bucket under `datascience.oceanprotocol.com.s3-website-ap-southeast-1.amazonaws.com`
+
+## Authors
+
+-   Matthias Kretschmann ([@kremalicious](https://github.com/kremalicious)) - [Ocean Protocol](https://oceanprotocol.com)
+
+## License
+
+```
+Copyright 2018 Ocean Protocol Foundation Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+```

content.yml

@@ -0,0 +1,16 @@
+title: Data Science Tools
+intro: Tools for data scientists to interact with the Ocean Protocol network.
+
+links:
+    - name: JupyterHub Notebook
+      url: https://longurl.com
+
+footer:
+    - name: Homepage
+      url: https://oceanprotocol.com
+    - name: Blog
+      url: https://blog.oceanprotocol.com
+    - name: Twitter
+      url: https://twitter.com/oceanprotocol
+    - name: GitHub
+      url: https://github.com/oceanprotocol

deploy.sh

@@ -0,0 +1,5 @@
+aws s3 sync ./dist s3://datascience.oceanprotocol.com \
+    --delete \
+    --acl public-read \
+    --exclude '.DS_Store' \
+    --cache-control max-age=0,no-cache,no-store,must-revalidate

gulpfile.babel.js

@@ -0,0 +1,125 @@
+import { src, dest, watch, parallel, series } from 'gulp'
+import del from 'del'
+import fs from 'fs'
+import yaml from 'js-yaml'
+import browser from 'browser-sync'
+import autoprefixer from 'autoprefixer'
+import cssnano from 'cssnano'
+const $ = require('gulp-load-plugins')()
+
+const content = yaml.safeLoad(fs.readFileSync('./content.yml'))
+const { links } = content
+
+const SRC = './src'
+const DIST = './dist'
+
+//
+// Delete build artifacts
+//
+export const clean = () => del(DIST + '/**/*')
+
+//
+// Styles
+//
+export const css = () =>
+    src(SRC + '/styles/styles.scss')
+        .pipe($.sass().on('error', $.sass.logError))
+        .pipe($.postcss([autoprefixer(), cssnano()]))
+        .pipe(dest(DIST + '/assets/css/'))
+
+//
+// Data injection with Liquid
+//
+export const template = () => {
+    let locals = { links, content }
+
+    return src(SRC + '/index.html')
+        .pipe($.liquify(locals))
+        .pipe(
+            $.htmlmin({
+                collapseWhitespace: true,
+                conservativeCollapse: true,
+                removeComments: true,
+                useShortDoctype: true,
+                collapseBooleanAttributes: true,
+                removeRedundantAttributes: true,
+                removeEmptyAttributes: true,
+                minifyJS: true,
+                minifyCSS: true
+            })
+        )
+        .pipe(dest(DIST))
+}
+
+//
+// Copy Fonts
+//
+export const fonts = () =>
+    src(SRC + '/fonts/**/*').pipe(dest(DIST + '/assets/fonts/'))
+
+//
+// Copy Logo
+//
+export const logos = () =>
+    src('node_modules/@oceanprotocol/art/logo/**/*').pipe(
+        dest(DIST + '/assets/img/')
+    )
+
+//
+// Copy Favicon
+//
+export const favicon = () => src(SRC + '/favicon.ico').pipe(dest(DIST))
+
+//
+// Revision static assets
+//
+export const rev = () =>
+    src(DIST + '/assets/**/*.{css,js,png,jpg,jpeg,svg,eot,ttf,woff,woff2}')
+        .pipe($.rev())
+        .pipe(dest(DIST + '/assets/'))
+        // output rev manifest for next replace task
+        .pipe($.rev.manifest())
+        .pipe(dest(DIST + '/assets/'))
+
+//
+// Replace all links to assets in files
+// from a manifest file
+//
+export const revReplace = () => {
+    let manifest = src(DIST + '/assets/rev-manifest.json')
+
+    return src(DIST + '/**/*.{html,css,js}')
+        .pipe($.revReplace({ manifest: manifest }))
+        .pipe(dest(DIST))
+}
+
+//
+// Watch for file changes
+//
+export const watchSrc = () =>
+    watch([SRC, 'links.yml']).on('all', series(build, browser.reload))
+
+//
+// Dev Server
+//
+export const server = done => {
+    browser.init({
+        server: DIST,
+        port: 1337
+    })
+    done()
+}
+
+//
+// Full build
+//
+export const build = series(
+    clean,
+    parallel(template, css, fonts, favicon, logos),
+    rev,
+    revReplace
+)
+
+export const dev = series(build, server, watchSrc)
+
+export default dev

package.json

@@ -0,0 +1,48 @@
+{
+    "name": "@oceanprotocol/datascience",
+    "version": "0.1.0",
+    "private": true,
+    "homepage": "https://datascience.oceanprotocol.com",
+    "scripts": {
+        "start": "gulp",
+        "build": "gulp build",
+        "test": "npm run lint:yaml && npm run lint:scss",
+        "lint:js": "eslint ./src/**/*.js",
+        "lint:yaml": "prettier --list-different \"**/*.y?(a)ml\"",
+        "lint:scss": "prettier --list-different \"**/*.scss\"",
+        "format": "prettier ./**/*.{scss,yml,js,json} --write",
+        "deploy": "./deploy.sh"
+    },
+    "dependencies": {
+        "@oceanprotocol/art": "^2.1.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.2.0",
+        "@babel/preset-env": "^7.2.0",
+        "@babel/register": "^7.0.0",
+        "autoprefixer": "^9.4.1",
+        "babel-eslint": "^10.0.1",
+        "browser-sync": "^2.26.3",
+        "cssnano": "^4.1.7",
+        "del": "^3.0.0",
+        "eslint": "5.9.0",
+        "eslint-config-oceanprotocol": "^1.3.0",
+        "eslint-config-prettier": "^3.3.0",
+        "eslint-plugin-prettier": "^3.0.0",
+        "gulp": "^4.0.0",
+        "gulp-htmlmin": "^5.0.1",
+        "gulp-liquify": "^0.0.6",
+        "gulp-load-plugins": "^1.5.0",
+        "gulp-postcss": "^8.0.0",
+        "gulp-rev": "^9.0.0",
+        "gulp-rev-replace": "^0.4.4",
+        "gulp-sass": "^4.0.2",
+        "prettier": "^1.15.3"
+    },
+    "browserslist": [
+        ">0.2%",
+        "not dead",
+        "not ie <= 11",
+        "not op_mini all"
+    ]
+}

src/index.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#141414">
+    <title>Voucher — Ocean Protocol</title>
+
+    <link rel="stylesheet" href="assets/css/styles.css" />
+    <link rel="shortcut icon" href="assets/img/favicon.ico">
+
+    <meta name="robots" content="noindex,nofollow">
+</head>
+
+<body>
+    <main>
+        <article>
+            <img src="assets/img/logo-white.svg" />
+
+            <header>
+                <h1>{{ content.title }}</h1>
+                <p>{{ content.intro }}</p>
+            </header>
+
+            <div class="links">
+                {% for link in links %}
+                <a class="link" href="{{ link.url }}">{{ link.name }}</a>
+                {% endfor %}
+            </div>
+        </article>
+
+        <footer>
+            <div>
+                © <span id="year">{{ "now" | date: "%Y" }}</span> <a href="https://oceanprotocol.com">Ocean Protocol
+                    Foundation Ltd.</a> — All
+                Rights Reserved
+            </div>
+            <div>
+                {% for link in content.footer %}
+                <a href="{{ link.url }}">{{ link.name }}</a>
+                {% endfor %}
+            </div>
+        </footer>
+    </main>
+
+    <script>
+        const yearText = document.getElementById('year')
+        const year = (new Date()).getFullYear()
+        yearText.innerHTML = year
+    </script>
+
+    <script>
+            (function (window) {
+                // Google Analytics async snippet
+                // http://goo.gl/3FPNDx
+                window.ga = window.ga || function () { (ga.q = ga.q || []).push(arguments) }
+                ga.l = +new Date
+                var d = document,
+                    g = d.createElement('script'),
+                    s = d.getElementsByTagName('script')[0]
+                g.async = true
+                g.src = 'https://www.google-analytics.com/analytics.js'
+                s.parentNode.insertBefore(g, s)
+
+                // Create the GA tracker
+                ga('create', 'UA-60614729-11', 'auto')
+
+                // IP Anonymization
+                ga('set', 'anonymizeIp', true)
+
+                // Send initial pageview
+                ga('send', 'pageview')
+            }(window))
+    </script>
+</body>
+
+</html>

src/styles/_fonts.scss

@@ -0,0 +1,29 @@
+@font-face {
+    font-family: 'Sharp Sans Display';
+    src: url('/assets/fonts/SharpSansDispNo1-Bold.woff2') format('woff2'),
+        url('/assets/fonts/SharpSansDispNo1-Bold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-stretch: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Sharp Sans Medium';
+    src: url('/assets/fonts/SharpSans-Medium.woff2') format('woff2'),
+        url('/assets/fonts/SharpSans-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-stretch: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Sharp Sans Bold';
+    src: url('/assets/fonts/SharpSans-Bold.woff2') format('woff2'),
+        url('/assets/fonts/SharpSans-Bold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-stretch: normal;
+    font-display: swap;
+}

src/styles/_global.scss

@@ -0,0 +1,91 @@
+@import 'variables';
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+html {
+    font-size: $font-size-root;
+}
+
+body {
+    color: $brand-black;
+    font-size: $font-size-base;
+    font-family: $font-family-base;
+    font-weight: $font-weight-base;
+    line-height: $line-height;
+    background: $brand-white;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    position: relative;
+    margin: 0;
+
+    @media screen and (min-width: $break-point--small) {
+        padding: $page-frame;
+    }
+}
+
+a {
+    text-decoration: none;
+    color: $brand-pink;
+    transition: 0.2s ease-out;
+
+    &:hover,
+    &:focus {
+        color: darken($brand-pink, 15%);
+        text-decoration: none;
+        transform: translate3d(0, -0.1rem, 0);
+    }
+
+    &:active {
+        color: darken($brand-pink, 15%);
+        text-decoration: none;
+        transform: none;
+        transition: none;
+    }
+}
+
+p {
+    margin: 0;
+    margin-bottom: $spacer / 2;
+}
+
+strong,
+.strong {
+    font-family: $font-family-button;
+    font-weight: 600;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    font-family: $font-family-title;
+    color: inherit;
+    line-height: 1.25;
+    font-weight: 600;
+}
+
+h1 {
+    font-size: $font-size-h1;
+}
+
+h2 {
+    font-size: $font-size-h2;
+}
+
+h3 {
+    font-size: $font-size-h3;
+}
+
+h4 {
+    font-size: $font-size-h4;
+}
+
+h5 {
+    font-size: $font-size-h5;
+}

src/styles/_variables.scss

@@ -0,0 +1,57 @@
+// Colors
+$brand-white: #fff;
+$brand-black: #141414;
+$brand-pink: #ff4092;
+$brand-purple: #7b1173;
+$brand-violet: #e000cf;
+
+$brand-grey: #41474e;
+$brand-grey-light: #8b98a9;
+$brand-grey-dark: #303030;
+$brand-grey-lighter: #e2e2e2;
+
+$green: #5fb359;
+$red: #d80606;
+$orange: #b35f36;
+$yellow: #eac146;
+
+$brand-gradient: linear-gradient(to right bottom, $brand-purple, $brand-pink);
+
+// Fonts
+$font-family-base: 'Sharp Sans Medium', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Helvetica, Arial, sans-serif;
+$font-family-title: 'Sharp Sans Display', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Helvetica, Arial, sans-serif;
+$font-family-button: 'Sharp Sans Bold', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Helvetica, Arial, sans-serif;
+
+$font-size-root: 15px;
+$font-size-base: 1rem;
+$font-size-large: 1.25rem;
+$font-size-small: 0.85rem;
+$font-size-mini: 0.65rem;
+$font-size-text: $font-size-base;
+$font-size-label: $font-size-base;
+$font-size-title: 1.4rem;
+$font-size-h1: 3.4rem;
+$font-size-h2: 2.7rem;
+$font-size-h3: 2rem;
+$font-size-h4: 1.5rem;
+$font-size-h5: 1.125rem;
+
+$font-weight-base: 500;
+$font-weight-bold: 600;
+
+$line-height: 1.5;
+
+// Sizes
+$spacer: 2rem;
+$page-frame: 0.75rem;
+
+$break-point--small: 640px;
+$break-point--medium: 860px;
+$break-point--large: 1140px;
+$break-point--huge: 1400px;
+$brand-border-width: 1px;
+
+$border-radius: 0.2rem;

src/styles/styles.scss

@@ -0,0 +1,95 @@
+@import 'fonts';
+@import 'global';
+
+body {
+    color: $brand-white;
+}
+
+main {
+    background: $brand-black;
+    min-height: 100vh;
+    display: flex;
+    flex-wrap: wrap;
+    padding-top: 15%;
+
+    @media (min-width: $break-point--small) {
+        padding-top: 0;
+        align-items: center;
+        justify-content: center;
+        min-height: calc(100vh - #{$page-frame * 2});
+    }
+}
+
+article {
+    width: 100%;
+    padding: $spacer;
+    flex: 1;
+    text-align: center;
+}
+
+header {
+    max-width: 40rem;
+    margin: auto;
+}
+
+h1 {
+    margin-bottom: $spacer;
+    font-size: $font-size-h3;
+
+    @media (min-width: $break-point--small) {
+        font-size: $font-size-h1;
+    }
+}
+
+img {
+    width: 5rem;
+    height: 5rem;
+    display: block;
+    margin: auto;
+}
+
+.links {
+    margin-top: $spacer * 2;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.link {
+    display: inline-block;
+    padding: $spacer / 3 $spacer;
+    border: 1px solid $brand-pink;
+    border-radius: $border-radius;
+    margin: 0 $spacer / 2;
+    flex: 1;
+    white-space: nowrap;
+    margin-bottom: $spacer;
+    max-width: 20rem;
+}
+
+footer {
+    width: 100%;
+    font-size: $font-size-mini;
+    padding: $spacer;
+    display: flex;
+    justify-content: space-between;
+    align-self: flex-end;
+
+    &,
+    a {
+        color: $brand-grey-light;
+    }
+
+    > div {
+        flex: 1 1 48%;
+
+        &:last-child {
+            text-align: right;
+
+            a {
+                display: inline-block;
+                margin-left: $spacer / 2;
+            }
+        }
+    }
+}