Coder Social home page Coder Social logo

bigchaindb / site Goto Github PK

View Code? Open in Web Editor NEW
7.0 6.0 10.0 49.96 MB

🦁 The fabulous cat of blockchain websites

Home Page: https://www.bigchaindb.com

License: Apache License 2.0

CSS 47.63% Ruby 0.53% JavaScript 20.59% HTML 30.14% Shell 1.12%
bigchaindb jekyll gulp website marketing cats unicorns

site's Introduction

site

🦁 The fabulous cat of blockchain websites.

Build Status css bigchaindb js ascribe Greenkeeper badge


Live | Styleguide | Beta | Gamma


Documentation

Have a look at the docs/ folder.

Development

The whole website is a Jekyll site with a Gulp-based build pipeline in front of it.

Prerequisites

You need to have the following tools installed on your development machine before moving on:

Get up and running

Run the following command from the repository's root folder to clone this repository, install all dependencies, and spin up local dev server reachable under http://localhost:1337:

git clone [email protected]:bigchaindb/site.git
cd site/
npm i && bundle install

# development build and dev server
gulp

Additionally, you can execute those commands to test the actual build output:

# full production build
gulp build --production

# build preventing search engine indexing & Google Analytics tracking
gulp build --staging

All builds are output into the _dist/ folder. Use a tool like serve to inspect a local build in your browser:

serve -s _dist

Continuous deployment: always be shipping

shipping

The site gets built & deployed automatically via Travis. This is the preferred way of deployment, it makes sure the site is always deployed with fresh dependencies and only after a successful build.

Build & deployment happens under the following conditions on Travis:

  • every push builds the site
  • live deployment: every push to the master branch initiates a live deployment
  • beta deployment: every new pull request and every subsequent push to it initiates a beta deployment

Manual deployment

For emergency live deployments or beta & gamma deployments, the manual method can be used. The site is hosted in an S3 bucket and gets deployed via a gulp task.

Prerequisite: authentication

To deploy the site, you must authenticate yourself against the AWS API with your AWS credentials. Get your AWS access key and secret and add them to ~/.aws/credentials:

[default]
aws_access_key_id = <YOUR_ACCESS_KEY_ID>
aws_secret_access_key = <YOUR_SECRET_ACCESS_KEY>

This is all that is needed to authenticate with AWS if you've setup your credentials as the default profile.

If you've set them up as another profile, say [bigchaindb] you can grab those credentials by using the AWS_PROFILE variable like so:

AWS_PROFILE=bigchaindb gulp deploy --live

In case that you get authentication errors or need an alternative way to authenticate with AWS, check out the AWS documentation.

Staging build & beta deployment

The staging build is a full production build but prevents search engine indexing & Google Analytics tracking.

# make sure your local npm packages & gems are up to date
npm update && bundle update

# make staging build in /_dist
gulp build --staging

# deploy contents of /_dist to beta
gulp deploy --beta

There's also a second beta deployment target called gamma under http://gamma.bigchaindb.com:

# build preventing search engine indexing & Google Analytics tracking
gulp build --staging

# deploy contents of /_dist to gamma
gulp deploy --gamma

Production build & live deployment

# make sure your local npm packages & gems are up to date
npm update && bundle update

# make production build in /_dist
gulp build --production

# deploy contents of /_dist to live
gulp deploy --live

Coding conventions

(S)CSS

Follows stylelint-config-bigchaindb which itself extends stylelint-config-standard.

Lint with stylelint in your editor or run:

npm test

JavaScript

It's a wild mess right now between old school vanilla js, jQuery and some ES2015 features. Don't bother with the old stuff unless dependency updates break it.

New js should follow eslint-config-ascribe. Linting in this repo is not setup for it yet.

Authors

License

Copyright 2018 BigchainDB GmbH

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.

site's People

Contributors

amed83 avatar carlysheridan avatar davie0 avatar flowerornament avatar greenkeeper[bot] avatar innopreneur avatar joachim16 avatar johnbdb avatar kremalicious avatar krish7919 avatar rhsimplex avatar ricardogarcia28081991 avatar shemtovo avatar sjvallon avatar trentmc avatar ttmc avatar vrde avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

site's Issues

Change copyright notice in footer

The footer currently says:

© 2016 BigchainDB

but what follows the "© 2016" should be the name of the copyright holder:

© 2016 ascribe GmbH

Team page

Add the rest of the team from the ascribe site over to BigchainDB.

Titles that will change:

Masha - CCO
Jazmina, Abi and Paloma will all be "Community"
Anyone with developer in their title will just be "Developer"

The rest stays as is

v0.1 Launch Gameplan

I have a draft:
http://www.bigchain.io

Style wise, I extended the basic branding from the moodboard and created a system of colors, typography and components. There wasn't any indication of what hero image to use, thought going in a more spacy direction and "something is on the horizon" was fitting.

Considering the short timeframe, the very minimal concept and the fact the content won't be edited by multiple persons, I found using a huge CMS like WordPress is overkill right now and would just slow us down. So to use time most effectively for actual branding/design, I created the page with a static site generator, Jekyll. The catch: there's no admin interface except for editing markdown files on GitHub. On the upside: super fast site, way easier to maintain, makes creating new pages super quick. So I suggest keeping this system for the launch. If we decide we need a CMS later on, it can be converted into WP theme.

Content

All content should be finalized in this Google Doc. I'll just transfer over the copy from there before launch:
https://docs.google.com/document/d/1dnIUOSBbDi34jS8XWFjIRnyQQ4NSHYYe3a65W--Vty4/edit?usp=sharing

ToDo

  • decide on hero image
  • add benchmark diagram
  • finalize all copy
  • make form send stuff (MailChimp? Just email?) (#2)
  • create favicon & apple-touch-icon (6db5ce7)
  • create sharing image (521f86c)
  • add Google Analytics property ID
  • fix missing Fira woff2 (mozilla/Fira#135)

bonus quest: add gulp deployment tasks
bonus quest: setup Codeship for build & deploy

Markdown converter

Using Jekyll's default one (kramdown) now so we can get easy Table Of Contents out of the box for the whitepaper. But kramdown, although being set to GFM input mode, destroys the backtick code block examples in the style guide.

We could switch to redcarpet which handles backtick code blocks just fine but it doesn't have automatic Table Of Contents generation. Decisions, decisions

Markdown converter should handle:

  • GitHub flavored markdown: especially backtick code blocks
  • Table Of Contents

Hosting

We need to host the site somewhere else, it's currently just running on WP Engine which is going to be canceled.

Easiest would be to just use S3, then I would need:

  • S3 buckets: www.bigchain.io & bigchain.io (last one pointing to other one)
  • AWS credentials for it
  • modify CNAME pointing to S3 bucket

For better performance we could either just deliver everything via Cloudfront or use Cloudflare which has some more advantages compared to Cloudfront.

cc @vrde

add EU cookie banner

Make the lawyers happy.

  • show to EU visitors only (IP-location)
  • show on first landing page only, hide on subsequent pages
  • agree/dismiss action hides it for 1 year or so
  • do nothing when DoNotTrack is set

Main text is missing

Seems like there is an error in the JS, check the screenshot for more details:

image

Hero video

  • create mp4 version
  • create webm version
  • create poster image
  • some smart js/css to switch from poster image to video once it's loaded
  • account for initial video loading state

update main sharing image

It's currently a screenshot of old hero. Either make new screenshot or come up with something new to be used as main image when urls are shared on Facebook, Twitter or Google+

include Noto Sans woff2

Nowhere to be found in download packages so just inspect and grab it from Google fonts somewhow

Branding

Just some notes and discussion space for the branding. I transformed the whole corporate identity into a more professional and techie look & feel and I think a dark color scheme works quite well for that.

All this can be checked out in the beta styleguide: http://beta.bigchaindb.com/styleguide/. Bit broken right now, renders the code examples instead of showing code snippets (#11) but you get the idea.

@WojHupert @carlysheridan wadda you think? You can see all this in use on http://beta.bigchaindb.com already and we can use this issue here for further design discussions. And thanks for the new logo!

tl;dr

  • create square logo version and favicon/touch icons
  • bring typography in line with new logo feel

Colors

Using a darker blue and a green as main branding colors, all on top of a dark blue-grey-ish background:

screen shot 2016-02-02 at 20 49 07

Backed away from former use of purple as main accent color, didn't distinguish enough from ascribe branding. The new green is inspired by the northern lights video and the green in the logo I received.

The main accent color is used for stuff like key visuals and primary actions. Blue and green are also used as the color stops in all the image color overlays. All the grey tones, including the dark body background are derived from the main blue so everything fits together nicely.

Logo

I combined the logo with the new color scheme, like so:

screen shot 2016-02-02 at 20 22 18

screen shot 2016-02-02 at 20 21 42

What's still needed is a square version, on website this will get used as the favicon/touch icons. And social media profile images are usually square so we should make full use of that. For v0.1 I quickly threw this together:

apple-touch-icon-precomposed-180x180

So we could use the same principle and just use a B along with DB. All set in main branding colors, like so:

screen shot 2016-02-02 at 21 04 19

Typography

Generally, there're no fixed font sizes set for body copy, headings etc. but it's all relative & responsive. Only fixed value is a base html font size of 16px, everything else is relative to that. E.g. heading 1 is defined as 2rem which means it's always 2 times as big as the base font size. On top of that, this global font size changes on some breakpoints, which in turn affects all relatively defined font sizes. E.g. on larger viewports all text becomes bigger for better readability.

As for typefaces, think this needs slight adjustment cause the logo creates a more bold feel compared to the one before so this doesn't fit the fine typography anymore. Guess using regular or medium weight of Fira should be enough.

Move site to bigchaindb.com

New name, new domain, let's move.

  • create new buckets in S3: bigchaindb.com & www.bigchaindb.com & beta.bigchaindb.com
  • point bucket bigchaindb.com to www.bigchaindb.com
  • update source with new domain (#13)
  • deploy master branch to bucket www.bigchaindb.com
  • setup bigchaindb.com in Cloudflare
  • redirect: point bucket www.bigchain.io to www.bigchaindb.com (does it do a 301?)
  • redirect point bucket beta.bigchain.io to beta.bigchaindb.com
  • add the new buckets to Matthia's AWS policy
  • update Gandi DNS with the new ip

Contributor License Agreement page

  • for individuals
  • for companies
  • some form

example: rethinkdb.com/community/cla

@ttmc has more info

Form interaction

  • tab interface for forms, individuals form visible by default
  • disable submit button by default
  • enable submit button when: agree checkbox is checked && required fields are filled/validated
  • send form once on live to activate

Add Top-Level 'Community' Link & Page

@kremalicious
@carlysheridan

Similar to the top-level navigation links on the MongoDB and RethinkDB websites, I suggest adding a 'Community' link to a Community page.

For now, the Community page can include:

I'm going to hold off on creating too many community communications channels for now. We can add more as needed.

Slack Channel

For context: I've been speaking with Slack's customer service about creating an open channel and they told me..

"This isn't actually something that we support. The reasons for this is because it would be counter intuitive to the ethos of a work communications tool. We want to ensure that only members who belong to a team are able to access it.

The team you referenced below is using undocumented and unsupported methods so I can't shed any light on this for you unfortunately."

I've set up one anyways but it means we need to manage sending out the invites manually. Can we set up a landing page (bigchaindb.slack.com or something of the likes) and just have a place where people leave their email addresses? When I receive notice of this, I will then send them an invite to the group.

COA Statement link is supposed to link to edition page.

Link on top of the COA should point to edition page. Not to the verification page.
Cryptographic stamp link should lead to verification page (ideally with Summary and Signature pre filled)

Currently it is the same link appears twice

switch to mozilla/Fira package

Currently just using my own fork because of lack of .woff2 files in the upstream repo when installed via npm. My PR has been finally accepted so let's just switch to it.

Front page code

We need to come up with a small story for 5-6 lines of code to put on the webpage. Something like start bigchain, create an asset, transfer and asset.

Any thoughts/ideas are welcome.

Something like:

# install and start bigchaindb
$ pip install bigchaindb
$ bigchaindb start
# open a python shell and
>>> from bigchaindb import Bigchain
>>> b = Bigchain()
# create a test user
>>> testuser1_priv, testuser1_pub = b.generate_keys()
# create a digital asset and assign it to the testuser
>>> asset_tx = b.create_transaction(b.me, testuser1_pub, 'CREATE')
>>> asset_tx_signed = b.sign_transaction(tx, b.me_private)
>>> b.write_transaction(tx_signed)
# testuser now owns and can transfer the digital asset

Test next to the code

BigchainDB provides a rich API to create, query and transfer digital assets. LEARN MORE

About page

  • Add Ryan Henderson, developer to company page
  • Dimitri de Jonghe - his last name is missing the the "h"

Changes to the tables on features page

  • change the stack images to say "decentralized processing" rather than "processing" and remove all logos on both
  • For the table with "immutability" etc, the top row will read Bitcoin Blockchain in the first column, Distributed Database in the second and BigchainDB logo in the third

Get Started with BigchainDB

I would like to propose to clean this section up a bit

Current state:
screen shot 2016-02-15 at 14 31 42

Proposed design:
start-with-bigchain

While this section is very important (as it is our most important call to action) we don't use buttons here
We already had an enquiry from someone looking for pointers on how to get started.
@carlysheridan @kremalicious What are your thoughts on this?

After talking to @sbellem, we will be looking in to case-specific guidelines for installation. Redesign on this section is in my opinion a good start.

Phrase "Quick Start Guide" is just a suggestion. I felt main header was visually too short and extending it would make it stand out more. Please feel free to suggest better headings. Other alternative: "Get Started with BigchainDB"

Layout flickering in Safari

No idea why. Some combination of extensive flexbox usage combined with css animations or something. Might create epileptic seizures

Safari 9.0.3 on OS X 10.11.3

untitled

Code to show on landing page

Here's feedback from @r-marques regarding the code currently on the BigchainDB landing page (beta):

"that would be enough to start the bigchain but then nothing happens. Writing and reading something from the bigchain would be great.

"Also the process to start bigchain will be simplified to something like:

    pip install bigchaindb
    bigchaindb start

"So we can add a couple lines of code in that space

-- end quote --

I guess we can change it to that for now, and later add a couple more lines showing writing and reading something from the bigchain.

add whitepaper file(s)

kinda important. Add at least pdf file as soon as whitepaper is finished. Optionally, add eBook formats.

Early access form

Current interaction flow:
untitled

Open questions:

  • where should the entered data be sent to? MailChimp seems like a logical choice, not so sure if the comment field works then. Super simple way would be to just send an email to a predefined address.
  • should there be other contact data, like email address within the success/error alerts?

Reorganize Footer

Gets a bit messy already and should include more links in one place like all the social links. And better hierarchy cause a page like About is way more important than Imprint, current design communicates same level of importance.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.