Skip to content

Commit 89149df

Browse files
slintslint
committed
exercises: 05 final
1 parent 1d031cb commit 89149df

File tree

14 files changed

+382
-0
lines changed

14 files changed

+382
-0
lines changed

Diff for: ‎05-customizing-invenio/README.md

+183
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
# Tutorial 05 - Customizing the look & feel
2+
3+
In this session we will customize minor visual elements of our Invenio
4+
instance, like the logo of our instance, the colors and fonts, the way search
5+
results for records are displayed and the display page for every record.
6+
7+
## Step 1: Run the development server
8+
9+
To run the web development server:
10+
11+
```bash
12+
$ cd src/my-site
13+
$ docker-compose up -d
14+
$ ./scripts/server
15+
```
16+
17+
## Step 2: Change the frontpage title
18+
19+
Although the default look of the instance looks fine, we can do better! Let's
20+
start small by changing some text on the frontpage. To do so we have to edit
21+
`my_site/config.py`:
22+
23+
```diff
24+
# Theme configuration
25+
# ===================
26+
#: Site name
27+
THEME_SITENAME = _('My site')
28+
#: Use default frontpage.
29+
THEME_FRONTPAGE = True
30+
#: Frontpage title.
31+
-THEME_FRONTPAGE_TITLE = _('My site')
32+
+THEME_FRONTPAGE_TITLE = _('The coolest repository!')
33+
#: Frontpage template.
34+
THEME_FRONTPAGE_TEMPLATE = 'my_site/frontpage.html'
35+
```
36+
37+
If you now go to <https://localhost:5000/> you will see the changed title:
38+
39+
![](./images/frontpage-title.png)
40+
41+
## Step 3: Change the site logo
42+
43+
Our instance is powered by Invenio, but not defined by it! Let's change the
44+
logo to something else. First we have to add the actual image of our new logo
45+
inside a folder that our application will know it's part of its assets:
46+
47+
```bash
48+
# Create the "static/images" folder inside the "my_site/theme" directory
49+
$ mkdir -p my_site/theme/static/images
50+
# Copy the provided logo from
51+
$ cp ~/src/training/05-customizing-invenio/extras/my-site-logo.png my_site/theme/static/images/
52+
# We have to tell the application to "collect" the new static file
53+
$ invenio collect -v
54+
Collect static from blueprints.
55+
Copied: [my_site] '/home/bootcamp/.local/share/virtualenvs/my-site-7Oi5HgLM/var/instance/static/images/my-site-logo.png'
56+
```
57+
58+
We also have to override the `THEME_LOGO` configuration variable, by adding it
59+
in `my_site/config.py`:
60+
61+
```diff
62+
# Theme configuration
63+
# ===================
64+
#: Site name
65+
THEME_SITENAME = _('My site')
66+
#: Use default frontpage.
67+
THEME_FRONTPAGE = True
68+
#: Frontpage title.
69+
THEME_FRONTPAGE_TITLE = _('The coolest repository!')
70+
#: Frontpage template.
71+
THEME_FRONTPAGE_TEMPLATE = 'my_site/frontpage.html'
72+
+#: Theme logo.
73+
+THEME_LOGO = 'images/my-site-logo.png'
74+
```
75+
76+
If you reload the page you will see the new logo on the top left:
77+
78+
![](./images/frontpage-logo.png)
79+
80+
## Step 4: Change the theme color
81+
82+
Until this moment, we've basically performed "content" changes. In order to
83+
modify the "style" of the site we have to make changes to the produced CSS.
84+
85+
Invenio uses SCSS in order define CSS styles in a flexible and extensible way.
86+
The `.scss` we are interested in changing is
87+
`my_site/theme/assets/scss/variables.scss`:
88+
89+
```diff
90+
@import "../invenio_theme/variables";
91+
92+
// If you want to change the primary color you can do something like:
93+
-// $color1: rgba(100, 42, 156, 0.8);
94+
-// $color1-gradient: lighten($color1, 15%);
95+
-// $navbar-default-bg: $color1;
96+
+$color1: rgba(100, 42, 156, 0.8);
97+
+$color1-gradient: lighten($color1, 15%);
98+
+$navbar-default-bg: $color1;
99+
```
100+
101+
After changing the file, we have to rebuild our assets using the `invenio
102+
webpack` command:
103+
104+
```bash
105+
(my-site) $ invenio webpack buildall
106+
...webpack
107+
```
108+
109+
If we reload our page now we should see our brand new design:
110+
111+
![](./images/frontpage-color.png)
112+
113+
## Step 5: Change how record search results are displayed
114+
115+
If you navigate to the search results page (<https://localhost:5000/search>)
116+
you can see the following:
117+
118+
![](./images/search-old.png)
119+
120+
Let's change the way the title and authors of each result look like. The
121+
current search UI application is built with AngularJS and its various
122+
components are defined via Angular HTML templates. In our case we'll have to
123+
modify the `my_site/records/static/templates/records/results.html`:
124+
125+
```diff
126+
<div ng-repeat="record in vm.invenioSearchResults.hits.hits track by $index">
127+
- <h4><a target="_self" ng-href="/records/{{ record.id }}">{{ record.metadata.title }}</a></h4>
128+
+ <h3><a target="_self" ng-href="/records/{{ record.id }}">{{ record.metadata.title }}</a></h3>
129+
+ <strong>Authors</strong>
130+
<ul class="list-inline">
131+
<li ng-repeat='contributor in record.metadata.contributors'>
132+
- {{ contributor.name }};
133+
+ <em>{{ contributor.name }}</em>;
134+
</li>
135+
</ul>
136+
<hr />
137+
</div>
138+
```
139+
140+
Again, we'll have to run the `invenio collect` command, since we changes static
141+
files:
142+
143+
```bash
144+
(my-site) $ invenio collect -v
145+
Collect static from blueprints.
146+
Copied: [my_site_records] '/home/bootcamp/.local/share/virtualenvs/my-site-7Oi5HgLM/var/instance/static/templates/records/results.html'
147+
```
148+
149+
And now, if we refresh we'll see that our search results display differently:
150+
151+
![](./images/search-new.png)
152+
153+
## Step 6: Change how the record page
154+
155+
If you actually click on one of the search results you will be redirected to
156+
the record's page:
157+
158+
![](./images/record-old.png)
159+
160+
To change this view we'll have to modify the Jinja template that renders the
161+
page, `my_site/records/templates/records/record.html`. Let's to something
162+
similar to what we did with the search results:
163+
164+
```diff
165+
{%- block page_body %}
166+
<div class="container">
167+
<h2>{{record.title}}</h2>
168+
- <div class="panel panel-default">
169+
- <ul class="list-group">
170+
- {{ record_content(record) }}
171+
- </ul>
172+
- </div>
173+
+ <strong>Authors</strong>
174+
+ {% for author in record.contributors %}
175+
+ <em>{{ author.name }}</em>;
176+
+ {% endfor %}
177+
</div>
178+
{%- endblock %}
179+
```
180+
181+
If you refresh the record's page you'll see something like this:
182+
183+
![](./images/record-new.png)

Diff for: ‎05-customizing-invenio/extras/my-site-logo.png

35.3 KB
Loading

Diff for: ‎05-customizing-invenio/images/frontpage-color.png

25.5 KB
Loading

Diff for: ‎05-customizing-invenio/images/frontpage-logo.png

12.2 KB
Loading

Diff for: ‎05-customizing-invenio/images/frontpage-title.png

22.7 KB
Loading

Diff for: ‎05-customizing-invenio/images/record-new.png

19 KB
Loading

Diff for: ‎05-customizing-invenio/images/record-old.png

17.5 KB
Loading

Diff for: ‎05-customizing-invenio/images/search-new.png

22.6 KB
Loading

Diff for: ‎05-customizing-invenio/images/search-old.png

22.9 KB
Loading

Diff for: ‎05-customizing-invenio/solution/my-site/my_site/config.py

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
# -*- coding: utf-8 -*-
2+
#
3+
# Copyright (C) 2019 CERN.
4+
#
5+
# My site is free software; you can redistribute it and/or modify it under
6+
# the terms of the MIT License; see LICENSE file for more details.
7+
8+
"""Default configuration for My site.
9+
10+
You overwrite and set instance-specific configuration by either:
11+
12+
- Configuration file: ``<virtualenv prefix>/var/instance/invenio.cfg``
13+
- Environment variables: ``APP_<variable name>``
14+
"""
15+
16+
from __future__ import absolute_import, print_function
17+
18+
from datetime import timedelta
19+
20+
21+
def _(x):
22+
"""Identity function used to trigger string extraction."""
23+
return x
24+
25+
26+
# Rate limiting
27+
# =============
28+
#: Storage for ratelimiter.
29+
RATELIMIT_STORAGE_URL = 'redis://localhost:6379/3'
30+
31+
# I18N
32+
# ====
33+
#: Default language
34+
BABEL_DEFAULT_LANGUAGE = 'en'
35+
#: Default time zone
36+
BABEL_DEFAULT_TIMEZONE = 'Europe/Zurich'
37+
#: Other supported languages (do not include the default language in list).
38+
I18N_LANGUAGES = [
39+
# ('fr', _('French'))
40+
]
41+
42+
# Base templates
43+
# ==============
44+
#: Global base template.
45+
BASE_TEMPLATE = 'my_site/page.html'
46+
#: Cover page base template (used for e.g. login/sign-up).
47+
COVER_TEMPLATE = 'invenio_theme/page_cover.html'
48+
#: Footer base template.
49+
FOOTER_TEMPLATE = 'invenio_theme/footer.html'
50+
#: Header base template.
51+
HEADER_TEMPLATE = 'invenio_theme/header.html'
52+
#: Settings base template.
53+
SETTINGS_TEMPLATE = 'invenio_theme/page_settings.html'
54+
55+
# Theme configuration
56+
# ===================
57+
#: Site name
58+
THEME_SITENAME = _('My site')
59+
#: Use default frontpage.
60+
THEME_FRONTPAGE = True
61+
#: Frontpage title.
62+
THEME_FRONTPAGE_TITLE = _('The coolest repository!')
63+
#: Frontpage template.
64+
THEME_FRONTPAGE_TEMPLATE = 'my_site/frontpage.html'
65+
#: Logo
66+
THEME_LOGO = 'images/my-site-logo.png'
67+
68+
# Email configuration
69+
# ===================
70+
#: Email address for support.
71+
SUPPORT_EMAIL = "[email protected]"
72+
#: Disable email sending by default.
73+
MAIL_SUPPRESS_SEND = True
74+
75+
# Assets
76+
# ======
77+
#: Static files collection method (defaults to copying files).
78+
COLLECT_STORAGE = 'flask_collect.storage.file'
79+
80+
# Accounts
81+
# ========
82+
#: Email address used as sender of account registration emails.
83+
SECURITY_EMAIL_SENDER = SUPPORT_EMAIL
84+
#: Email subject for account registration emails.
85+
SECURITY_EMAIL_SUBJECT_REGISTER = _(
86+
"Welcome to My site!")
87+
#: Redis session storage URL.
88+
ACCOUNTS_SESSION_REDIS_URL = 'redis://localhost:6379/1'
89+
#: Enable session/user id request tracing. This feature will add X-Session-ID
90+
#: and X-User-ID headers to HTTP response. You MUST ensure that NGINX (or other
91+
#: proxies) removes these headers again before sending the response to the
92+
#: client. Set to False, in case of doubt.
93+
ACCOUNTS_USERINFO_HEADERS = True
94+
95+
# Celery configuration
96+
# ====================
97+
98+
BROKER_URL = 'amqp://guest:guest@localhost:5672/'
99+
#: URL of message broker for Celery (default is RabbitMQ).
100+
CELERY_BROKER_URL = 'amqp://guest:guest@localhost:5672/'
101+
#: URL of backend for result storage (default is Redis).
102+
CELERY_RESULT_BACKEND = 'redis://localhost:6379/2'
103+
#: Scheduled tasks configuration (aka cronjobs).
104+
CELERY_BEAT_SCHEDULE = {
105+
'indexer': {
106+
'task': 'invenio_indexer.tasks.process_bulk_queue',
107+
'schedule': timedelta(minutes=5),
108+
},
109+
'accounts': {
110+
'task': 'invenio_accounts.tasks.clean_session_table',
111+
'schedule': timedelta(minutes=60),
112+
},
113+
}
114+
115+
# Database
116+
# ========
117+
#: Database URI including user and password
118+
SQLALCHEMY_DATABASE_URI = \
119+
'postgresql+psycopg2://my-site:my-site@localhost/my-site'
120+
121+
# JSONSchemas
122+
# ===========
123+
#: Hostname used in URLs for local JSONSchemas.
124+
JSONSCHEMAS_HOST = 'my-site.com'
125+
126+
# Flask configuration
127+
# ===================
128+
# See details on
129+
# http://flask.pocoo.org/docs/0.12/config/#builtin-configuration-values
130+
131+
#: Secret key - each installation (dev, production, ...) needs a separate key.
132+
#: It should be changed before deploying.
133+
SECRET_KEY = 'CHANGE_ME'
134+
#: Max upload size for form data via application/mulitpart-formdata.
135+
MAX_CONTENT_LENGTH = 100 * 1024 * 1024 # 100 MiB
136+
#: Sets cookie with the secure flag by default
137+
SESSION_COOKIE_SECURE = True
138+
#: Since HAProxy and Nginx route all requests no matter the host header
139+
#: provided, the allowed hosts variable is set to localhost. In production it
140+
#: should be set to the correct host and it is strongly recommended to only
141+
#: route correct hosts to the application.
142+
APP_ALLOWED_HOSTS = ['my-site.com', 'localhost', '127.0.0.1']
143+
144+
# OAI-PMH
145+
# =======
146+
OAISERVER_ID_PREFIX = 'oai:my-site.com:'
147+
148+
# Debug
149+
# =====
150+
# Flask-DebugToolbar is by default enabled when the application is running in
151+
# debug mode. More configuration options are available at
152+
# https://flask-debugtoolbar.readthedocs.io/en/latest/#configuration
153+
154+
#: Switches off incept of redirects by Flask-DebugToolbar.
155+
DEBUG_TB_INTERCEPT_REDIRECTS = False

Diff for: ‎05-customizing-invenio/solution/my-site/my_site/records/static/templates/records/results.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!--
2+
Copyright (C) 2019 CERN.
3+
4+
My site is free software; you can redistribute it and/or modify it under
5+
the terms of the MIT License; see LICENSE file for more details.
6+
7+
-->
8+
9+
<div ng-repeat="record in vm.invenioSearchResults.hits.hits track by $index">
10+
<h3><a target="_self" ng-href="/records/{{ record.id }}">{{ record.metadata.title }}</a></h3>
11+
<strong>Authors</strong>
12+
<ul class="list-inline">
13+
<li ng-repeat='contributor in record.metadata.contributors'>
14+
<em>{{ contributor.name }}</em>;
15+
</li>
16+
</ul>
17+
<hr />
18+
</div>
19+

Diff for: ‎05-customizing-invenio/solution/my-site/my_site/theme/assets/scss/my_site/theme.scss

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/*
2+
* Copyright (C) 2019 CERN.
3+
*
4+
* My site is free software; you can redistribute it and/or modify it under
5+
* the terms of the MIT License; see LICENSE file for more details.
6+
*/
7+
8+
9+
// Check out https://github.com/inveniosoftware/invenio-theme/blob/master/invenio_theme/assets/scss/invenio_theme
10+
@import "variables";
11+
@import "../invenio_theme/styles";

Diff for: ‎05-customizing-invenio/solution/my-site/my_site/theme/assets/scss/my_site/variables.scss

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/*
2+
* Copyright (C) 2019 CERN.
3+
*
4+
* My site is free software; you can redistribute it and/or modify it under
5+
* the terms of the MIT License; see LICENSE file for more details.
6+
*/
7+
8+
9+
@import "../invenio_theme/variables";
10+
11+
// If you want to change the primary color you can do something like:
12+
$color1: rgba(100, 42, 156, 0.8);
13+
$color1-gradient: lighten($color1, 15%);
14+
$navbar-default-bg: $color1;

Diff for: ‎05-customizing-invenio/solution/my-site/my_site/theme/static/images/my-site-logo.png

35.3 KB
Loading

0 commit comments

Comments
 (0)