Kolore is a content management system. It has been created to develop websites fast and efficiently for Chroma Branding. It's written in Python for the Google App Engine. Right now is just a Blog CMS.

(Not all features are available in the demo)

1. What & How
2. Installing Dependencies
3. Local testing
4. Managing users
5. Deploying
6. Babel work-flow (multilingual)
7. Creating your own website
8. Screenshots

The CMS is a Flask app with Jinja2 and Flask-Babel running on top of Google App Engine servers. It uses NDB Datastore as database wich automates the cache for you. The files are uploaded directly to the Google Cloud Storage and served from there. Got lost ? See the graphic below:

You don't have to pay anything until your website has lots of visitors. You just need to start a project in the Google's Developer Console to upload your instance of Kolore. Best of all ? you don't have to worry about scaling.

Soon you will find all the info you need to create a template, place it and start running.

• Python
• JS
• CSS

• Flask
• Babel
• Jinja2

• Grunt
• Bower
• Kube
• Momentjs
• Redactor
• Other... see app/admin/bower.json

• Google App Engine
  • Images API
  • Blobstore API
• Google Datastore NDB
• Google Cloud Storage

You can consider Kolore a unique Flask app, serving two websites. One is the CMS and the other one is the front website. That's the reason all the Python dependencies are located in the /lib directory, and the front-end dependencies on two different locations: /app/admin/static/plugins and /app/front/static/plugins.

Dependencies must be installed and uploaded within your app. The configuration to include the libraries in App Engine's python is done in the appengine_config.py file. The lib subdirectory is added as the sites packages directory.

Dependencies are managed using pip in the lib/requirements.txt file.

Please, check the latest installation instructions here.

Kolore is designed to take the most from Google's cloud, but it can be ran in any server using AppScale. Install the SDK from Google as detailed here. Then make sure you install all the Appengine dependencies: gcloud components update gae-python

pip install -r lib/requirements.txt -t lib/ to install these dependencies in lib/ subdirectory from terminal in the root directory.

Bower is used to install all the front-end dependencies. As the administration site and the front site are treated as different sites, each one has it's own dependencies that you will find inside app/admin/static/plugins/ and /app/front/static/plugins respectly.

Imagine you want to add a new dependency to the front site. Just do:

cd app/front
bower search jquery
bower install --save jquery

This will install jquery at app/front/plugins/jquery

To get all those dependencies concatenated and minified, Grunt (A JS Task manager) is used. The Grunt configuration files can be found at /app/front/Gruntfile.js and /app/admin/Gruntfile.js.

Continuing with our example, modify the app/front/Gruntfile.js at line 20, to add the jquery.js file in app/front/plugins/jquery to the minified JS that will be finally loaded in the front-end.

To install dependencies using Bower, you must first install Node and NPM. Check the installation instructions here and then:

npm install -g bower
npm install -g grunt
npm install -g grunt-cli

Use this commands to finally install all the dependencies.

[~/kolore]$ cd app/front
[~/kolore/app/front]$ bower install
[~/kolore/app/front]$ npm install
[~/kolore/app/front]$ cd ../admin
[~/kolore/app/admin]$ bower install
[~/kolore/app/front]$ npm install

Once you installed all the dependencies, you must build them with grunt. Keep reading.

In order to get all the CSS and JS in place, you must build it, once each app (admin & front). Use the command grunt to build it at app/front and app/admin. You can automate the dependency building by running grunt watch while you work on CSS and JS files.

There is a dependency not included yet in the repository, Redactor. You must obtain a copy of it and place it in the admin/static/plugins/redactor directory with the next structure:

redactor/
│ 
├── css/
│   ├── redactor-font.eot
│   ├── redactor.css
│   └── redactor.less
├── langs/
│   ├── ar.js
│   ├── az.js
│   ├── ba.js
│   ...
│   └── zh_tw.js
├── plugins/
│   ├── clips/
│   │   └── clips.js
│   ...
│   └── video/
│       └── video.js
└── redactor.js

Once you have installed all the dependencies, you must have the Google Cloud SDK to run the server. Check the instructions here.

In the root directory of the app run in your terminal
dev_appserver.py . or gcloud preview app run app.yaml

Congrats, you have a working example of Kolore. Check http://localhost:8080/admin to see it in action.

Kolore uses the Google User API to manage the users login and security. If you already are a project administrator in the Cloud Console, you always can access. To add other user, just go to Setting --> Add user, and they will be able to access.

First of all, you must create a new project on the [Google Cloud Console][console.developers.google.com/]. Then modify the app.yamlfile and introduce project-id of the project you just created.

Easiest wayr to do it is:
appcfg.py -A PROJECT-ID --oauth2 update .

If you prefer to use the new command line:

gcloud config set project PROJECT-ID
gcloud preview app deploy app.yaml

Babel is an internationalization library for Python. We use Flask-Babel an extension to Flask that adds i18n and l10n support to any Flask application. We use POeditor for managing the languages. English is the main language and actually 100% translated to Spanish and Basque.

pybabel extract -F babel.cfg -o messages.pot .

Once you have a .po file with the translations, those files must be compiled to a .mo file
pybabel compile -d translations

This project already has three languages initiated: Spanish, Basque and English. If you need one more: pybabel init -i messages.pot -d translations -l 'de'