originprotocol / origin-website

The code powering our website

Head to https://www.originprotocol.com/developers to learn more about what we're building and how to get involved.

originprotocol.com

Official website for Origin Protocol

This is a Flask app with the source code for www.originprotocol.com. The code is all Python 3.9.2 with Postgres for the database (basically just for the mailing list). The database is not required to be configured if you're just working on the website.

Installing

Clone

git clone https://github.com/OriginProtocol/origin-website.git

Setup and activate a Python virtualenv

python3 -m venv origin-website/venv
source origin-website/venv/bin/activate

Install

pip install -e .[dev]

Rename the file sample.env to .env, and update env variables as desired.

mv sample.env .env

Run it!

python main.py

Open browser to view

open http://127.0.0.1:5000/

Problems? Hit us up in the #engineering channel on Discord if you need help.

Run the Tests

Throughout the development process and before committing or deploying, run:

pytest

Run individual test files simply as:

pytest path/to/test.py

Run a single test case, or an individual test, using:

pytest path/to/test.py::test_case_name

Running locally with Celery

We use Celery for running background tasks (mostly just sending emails). To get this working on your local machine, you'll want to make sure:

• Your .env has CELERY_DEBUG: False
• Redis is installed and running: redis-server
• An active Celery worker is running: celery -A util.tasks worker --loglevel=INFO

Celery Flower is useful for monitoring tasks: flower -A util.tasks --port=5555

Running locally with Docker Compose

You can run the website in combination with a local PostgreSQL, Redis and Celery using Docker Compose.

Remove the .[deploy] at the end of the requirements.txt

cd origin-website
docker-compose up

Note: you can login to the container running the app with the following command:

docker exec -ti origin-website /bin/bash

Running cron jobs locally

Some scripts use Heroku cron jobs. Use the following command to test them locally

PYTHONPATH=$(pwd) PROJECTPATH=$(pwd) python ./logic/scripts/update_token_insight.py

When running on docker, a container named crontainer will run these scripts every 5 minutes. If you want to run them manually:

docker exec -it -e PYTHONPATH=/app -e PROJECTPATH=/app origin-website python ./logic/scripts/update_token_insight.py

Running cron jobs on Production/Staging

Running token_stats on Staging:

heroku run -a staging-originprotocol-com PROJECTPATH=/app python ./logic/scripts/token_stats.py

Running token_stats on Production:

heroku run -a originprotocol-com PROJECTPATH=/app python ./logic/scripts/token_stats.py

System Requirements

• Docker version 18 or greater: docker --version
• Docker Compose For Mac and Windows docker-compose should be part of desktop Docker installs: docker-compose --version
• Git: git --version
• Unix-based system (OSX or Linux) needed to run the bash scripts

Getting Started

1. Clone the repository

git clone https://github.com/OriginProtocol/origin-website && cd origin-website

2. From the root of the repository run docker-compose up. The first time this command runs it will take some time to complete due to the initial building of the containers.

When this completes you should be able to access the website at http://localhost:5000.

Localization

See translations directory.

Database changes

Set FLASK_APP env variable to point to the executable... e.g.:

export FLASK_APP=~/projects/origin-website/main.py

We use Flask Migrate to handle database revisions. If you make changes to the database, use flask db migrate to generate the required migration file and then flask db upgrade to implement and test your changes on your local database before committing.

Heroku Deploy

To deploy a development copy of the site on Heroku, just choose which branch you would like to use and follow the instructions:

stable branch (v1.11.1)	master branch (active development)

Heroku will prompt you to set config variables. At a minium, you must set these two:

Config	Value
FLASK_SECRET_KEY	(make something up)
HOST	(domain name of your dev heroku app)

See sample.env for a full list of other optional config variables. You can get Recaptcha keys from Google.

We use both the python and the nginx buildpacks:

heroku buildpacks:set heroku/python
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-nginx

Deployment Dependencies

To update the deployment dependencies, update reuirements.txt. To use the deps from your local env, you can run the freeze script in the root directory:

./freeze.sh

This will include any installed deps, and the deps defined in deploy in extras_require.

Connect to Heroku instance

In order to run Celery jobs manually you can ssh into Heroku staging with: heroku ps:exec --app staging-originprotocol-com

or into Heroku production heroku ps:exec --app originprotocol-com

Contributing

We'd love to have you join us and contribute to this project. Please join our #engineering channel on Discord and read our guidelines on contributing to get started.

Shoutouts

Special thanks to the following companies for their support:

origin-website's Issues

Translations - Portugese

For anybody wishing to contribute to the translations:

https://github.com/OriginProtocol/company-website/blob/master/translations/pt/LC_MESSAGES/messages.po

You add the translated-versions under msgstr ""

Example:

msgid "Hello"
msgstr "Bonjour"

See the German translation as an example:

https://github.com/OriginProtocol/company-website/blob/master/translations/de/LC_MESSAGES/messages.po

Implement the background pattern on the header of the index page

Aure designed a really pretty dot pattern with colorful geometric shapes for the header of our website that we haven't had time to implement in CSS (or maybe JavaScript) yet.

You can see the intended design here:
http://zpl.io/broroOe

Low priority, but would be a great first pull request for someone who wants to get more involved. Make sure your solution works well on mobile.

Put language code in URL

User's language is currently stored in session variable, but would be better to have it as par to the url, e.g.

http://originprotocol.com/en/team

There are several possible solutions online.

Setup database migrations

Looks like we're going to have more database stuff than we initially thought. We're going to need to set up database migrations to make it more manageable when we need to make changes to the database.

Flask-Migrate is probably the best way to go here. We just need someone to set it up.

https://flask-migrate.readthedocs.io/en/latest/

Add links to other languages for SEO

We should add references to other languages available in our header, per advice here:
https://moz.com/community/q/best-practice-for-url-language-country#reply_318293

 ... in the <head> tag in the HTML:
<link rel=”alternate” hreflang=”en” href=”http://www.example.com/english/” />
<link rel=”alternate” hreflang=”de” href=”http://www.example.com/deutsch/"/>

On mobile safari, no language is chosen by default

Causes showing of "help with translation" flash, and language drop-down has no text

Fix layout styling for Firefox

Looks ugly right now

Compile Thai .mo from new translations

Convert partners section of index template to animated cards

The card deck should be animated as directed by Aure.

Daniel's link not resolving

Under team, Daniel Von Fange

Currently goes to
https://www.leancoders.com/

But looks like Daniel is at:
https://leancoder.com/

Background diamonds are broken on large screens

Create a "build on Origin" interest form

We should add a "build on Origin" form to our website to generate inbound interest from developers/projects that should be building on top of the Origin platform. Form submissions should trigger an email to our biz dev guys & be logged in a database table.

The code for the presale form should be an excellent starting point.

Copy:

Teams all over the world are building on Origin's protocols, but we're looking for more amazing people to join our mission.

Whether you're an existing blockchain company or a traditional marketplace thinking about the blockchain, we'd love to hear from you! Fill out the form below and we'll get back to you shortly.

Fields:

Name (required)
Company name (required)
Email (required)
Website
Note

Translations - Dutch

For anybody wishing to contribute to the translations:

https://github.com/OriginProtocol/company-website/blob/master/translations/nl/LC_MESSAGES/messages.po

You add the translated-versions under msgstr ""

Example:

msgid "Hello"
msgstr "Bonjour"

See the German translation as an example:

https://github.com/OriginProtocol/company-website/blob/master/translations/de/LC_MESSAGES/messages.po

Translations - Korean

For anybody wishing to contribute to the translations:

https://github.com/OriginProtocol/company-website/blob/master/translations/ko/LC_MESSAGES/messages.po

You add the translated-versions under msgstr ""

Example:

msgid "Hello"
msgstr "Bonjour"

See the German translation as an example:

https://github.com/OriginProtocol/company-website/blob/master/translations/de/LC_MESSAGES/messages.po

Localize with babel

Need the site in other languages.

Lets use Flask-Babel

Translations - Chinese (Simplified)

For anybody wishing to contribute to the translations:

https://github.com/OriginProtocol/company-website/blob/master/translations/zh_Hans/LC_MESSAGES/messages.po

You add the translated-versions under msgstr ""

Example:

msgid "Hello"
msgstr "Bonjour"

See the German translation as an example:

https://github.com/OriginProtocol/company-website/blob/master/translations/de/LC_MESSAGES/messages.po

Lots of excess whitespace on staging

Tons of whitespace at the bottom of the page

Logging Telegram activity to the DB

We're getting to the point where it would be very useful for us to have our Telegram activity logged in a database. We'd like to have a history of all the messages, who joined when & make it easy to chart the grow of the community over time.

Our Telegram channel is http://t.me/originprotocol

As always, add a comment here before you get started to avoid duplicating efforts.

Translations - Arabic

For anybody wishing to contribute to the translations:

https://github.com/OriginProtocol/company-website/blob/master/translations/ar/LC_MESSAGES/messages.po

You add the translated-versions under msgstr ""

Example:

msgid "Hello"
msgstr "Bonjour"

See the German translation as an example:

https://github.com/OriginProtocol/company-website/blob/master/translations/de/LC_MESSAGES/messages.po

Use endpoints and url_for() instead of hardcoding language prefixes

Right now we have to manually construct URL's for any page that is lanuage aware. E.g.
https://www.originprotocol.com/ko/presale is generated here
https://github.com/OriginProtocol/company-website/blob/master/templates/navbar.html#L33
as

<a class="nav-link" href="{{'/%s/presale'% CURRENT_LANGUAGE}}">{{gettext("Presale")}}</a>

Much better to use endpoints and url_for().
https://stackoverflow.com/a/19262349/59913

Languages appear in random order in dropdown

Right now we're converting from dict to array, so ordering is undefined.

Key line of code: https://github.com/OriginProtocol/company-website/blob/master/views/web_views.py#L155

try:
        available_languages = dict((l,Locale(l).get_language_name(l).capitalize()) for l in constants.LANGUAGES)

Add explicit license

We don't have a license for this repo also.

Translations - Italian

For anybody wishing to contribute to the translations:

https://github.com/OriginProtocol/company-website/blob/master/translations/it/LC_MESSAGES/messages.po

You add the translated-versions under msgstr ""

Example:

msgid "Hello"
msgstr "Bonjour"

See the German translation as an example:

https://github.com/OriginProtocol/company-website/blob/master/translations/de/LC_MESSAGES/messages.po

Use case buttons are too far apart on specific screen sizes

This happens when the buttons wrap on screens < 356px and 768px-991px.

Make sure Celery is retrying jobs

It just dawned on me I did not check to see how Celery retries. I'll take a look this week unless someone beats me to the punch and verifies this works as expected (retries job up to a reasonable number of times before failing for good).

This is a test

"Minify" the translated docs

The translated docs are huge and take forever to download. Let's run these through https://smallpdf.com/compress-pdf or a similar tool. Be sure to double check the Craigslist screenshot to make sure the quality isn't degraded too much.

Layout broken on right-to-left languages

There was some code in css for reversing the background vector graphics when in rtl languages, I'm guessing it got dropped/broken along the weay.

Translations - Thai

For anybody wishing to contribute to the translations:

https://github.com/OriginProtocol/company-website/blob/master/translations/th/LC_MESSAGES/messages.po

You add the translated-versions under msgstr ""

Example:

msgid "Hello"
msgstr "Bonjour"

See the German translation as an example:

https://github.com/OriginProtocol/company-website/blob/master/translations/de/LC_MESSAGES/messages.po

Missing created_at dates on key tables

We should always have created_at and updated_at fields on our database tables. Not sure how we missed this.

Would be easy fix, especially after we have Flask-Migrate in place:
#59

Translations - French

For anybody wishing to contribute to the translations:

https://github.com/OriginProtocol/company-website/blob/master/translations/fr/LC_MESSAGES/messages.po

You add the translated-versions under msgstr ""

Example:

msgid "Hello"
msgstr "Bonjour"

See the German translation as an example:

https://github.com/OriginProtocol/company-website/blob/master/translations/de/LC_MESSAGES/messages.po

Design a better 404 page

All external links should open in a new window or tab

Users should not leave the Origin site by clicking on links.

Background the calls to sendgrid on signup

@ryana is on this.

Translations - Japanese

For anybody wishing to contribute to the translations:

https://github.com/OriginProtocol/company-website/blob/master/translations/ja/LC_MESSAGES/messages.po

You add the translated-versions under msgstr ""

Example:

msgid "Hello"
msgstr "Bonjour"

See the German translation as an example:

https://github.com/OriginProtocol/company-website/blob/master/translations/de/LC_MESSAGES/messages.po

Diamond cuts into footer on team page

Especially on large monitors

This is a test

Background messes up on mobile/narrow browser

Internal server error

The website is down when you choose french language.

https://www.originprotocol.com/fr

Improve tech stack logo sizing on landing page

Requested by Aure via Slack #design.

Add a robots.txt file

Good for seo, and needed to user tools like http://browsershots.org/

Translations - Hebrew

For anybody wishing to contribute to the translations:

https://github.com/OriginProtocol/company-website/blob/master/translations/he/LC_MESSAGES/messages.po

You add the translated-versions under msgstr ""

Example:

msgid "Hello"
msgstr "Bonjour"

See the German translation as an example:

https://github.com/OriginProtocol/company-website/blob/master/translations/de/LC_MESSAGES/messages.po

Partners Page

We need a new partners page. Aure has the design. Micah has begun to build.

See initial conversation here: #78

Inconsistent form styles

All form elements should have consistent styles, preferably matching Aure's designs.

Translations - Chinese (Traditional)

For anybody wishing to contribute to the translations:

https://github.com/OriginProtocol/company-website/blob/master/translations/zh_Hant/LC_MESSAGES/messages.po

You add the translated-versions under msgstr ""

Example:

msgid "Hello"
msgstr "Bonjour"

See the German translation as an example:

https://github.com/OriginProtocol/company-website/blob/master/translations/de/LC_MESSAGES/messages.po

Bottom background panes fail to render correctly in Safari

Related to #74. See #75.

Adding the product brief in multiple languages

We will soon have our product brief available in some (not all) other languages. We need a way to link to these.

Here's my initial idea.

If your language is set to English or a language we don't support yet, the product brief link directs to the English version.

If your language is set to one of the available localized versions, we swap out the product brief link for a drop-down that offers both the local language and the English version.

The product brief link in the footer should be a drop-down that lists all available languages.

The product brief button should link to the localized version or fallback to English

Index background image overflowing

On mobile safari iOS on iPad mini

Dot grid header on team page

Now that we know how to do it, let's make the team page pretty too

Incorporate new Turkish translation

From @caner: https://originprotocol.slack.com/archives/C8UNGUVCN/p1516954965000042