Skip to content

Commit 8ead2b9

Browse files
tunethewebtunetheweb
authored
Add ability to overwrite HTML tag (e.g. for dir="rtl" for Arabic) (#551)
* Add ability to overwrite HTML tag (e.g. for dir="rtl" for Arabic) * Optimised images with calibre/image-actions * Update src/templates/base.html Co-Authored-By: Rick Viscomi <[email protected]> * Change dir tar
1 parent 2b6320a commit 8ead2b9

File tree

2 files changed

+168
-1
lines changed

2 files changed

+168
-1
lines changed

‎src/templates/ar/2019/base.html‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
{% extends "base.html" %}
2+
3+
{% block dir_attribute %}dir="rtl"{% endblock %}
4+
5+
{% block styles %}
6+
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
7+
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900%7CPoppins:300,400,700,900&display=swap" rel="stylesheet">
8+
<link rel="stylesheet" href="/static/css/2019.css">
9+
{% endblock %}
10+
11+
{% block content%}
12+
{% block header %}
13+
<header class="alt-bg">
14+
<div class="top-header">
15+
<a class="navigation-logo" href="{{ url_for('home', year=year, lang=lang) }}"><img src="/static/images/logo.svg" alt="Web Almanac by HTTP Archive"></a>
16+
<nav>
17+
<a href="{{ url_for('table_of_contents', year=year, lang=lang) }}">Table of Contents</a>
18+
<a href="{{ url_for('contributors', year=year, lang=lang) }}">Contributors</a>
19+
<a href="{{ url_for('methodology', year=year, lang=lang) }}">Methodology</a>
20+
{% if supported_years | length > 1 %}
21+
{{ year_switcher() }}
22+
{% endif %}
23+
</nav>
24+
<div class="cta">
25+
{% if request.endpoint == 'home' %}
26+
<a href="{{ url_for('table_of_contents', year=year, lang=lang) }}" class="alt btn">
27+
Start Exploring
28+
</a>
29+
{% endif %}
30+
{{ language_switcher() }}
31+
</div>
32+
<button type="button" class="menu-btn" arial-label="Menu">
33+
<img class="menu-icon" src="/static/images/menu.png" data-src-close="/static/images/close.png" alt="" />
34+
</button>
35+
<nav class="menu">
36+
<a href="{{ url_for('table_of_contents', year=year, lang=lang) }}">Table of Contents</a>
37+
<a href="{{ url_for('contributors', year=year, lang=lang) }}">Contributors</a>
38+
<a href="{{ url_for('methodology', year=year, lang=lang) }}">Methodology</a>
39+
<div class="misc">
40+
<a href="https://httparchive.org/">
41+
<img src="/static/images/ha-home.png" alt="HTTP Archive home" height="35" width="70">
42+
</a>
43+
<div class="social-media">
44+
<a href="https://twitter.com/HTTPArchive" class="twitter">
45+
<img src="/static/images/twitter.png" height="80" width="65" alt="Twitter" loading="lazy" />
46+
</a>
47+
<a href="https://github.com/HTTPArchive/almanac.httparchive.org" class="github">
48+
<img src="/static/images/github.png" height="80" width="78" alt="GitHub" loading="lazy" />
49+
</a>
50+
</div>
51+
{{ language_switcher() }}
52+
</div>
53+
</nav>
54+
</div>
55+
{% if request.endpoint == 'home' %}
56+
<div class="intro-container">
57+
<div class="intro">
58+
<div class="intro-year">2019</div>
59+
<h1 class="title title-lg title-alt">Web Almanac</h1>
60+
<h2>
61+
HTTP Archive's annual<br>
62+
<b>state of the web</b> report
63+
</h2>
64+
<p>
65+
Our mission is to combine the raw stats and trends of the HTTP Archive with the expertise of the web community. The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts. It is comprised of 20 chapters spanning aspects of page content, user experience, publishing, and distribution.
66+
</p>
67+
<a href="{{ url_for('table_of_contents', year=year, lang=lang) }}" class="btn">
68+
Start exploring
69+
</a>
70+
</div>
71+
<img class="intro-image-2019" src="/static/images/home-hero-2019.png" alt="The Web Almanac 2019 edition" />
72+
<img class="intro-image" src="/static/images/home-hero.png" alt="The Web Almanac 2019 edition" />
73+
</div>
74+
{% endif %}
75+
</header>
76+
{% endblock %}
77+
78+
{% block main %}{% endblock %}
79+
80+
{% block footer %}
81+
<footer class="alt-bg">
82+
<a class="navigation-logo home-logo" href="{{ url_for('home', year=year, lang=lang) }}"><img src="/static/images/logo.svg" alt="Web Almanac by HTTP Archive"></a>
83+
<a class="navigation-logo ha-logo" href="https://httparchive.org">
84+
<img src="/static/images/ha-home.png" alt="HTTP Archive home" height="35" width="70">
85+
</a>
86+
<nav class="nav-items">
87+
<a href="{{ url_for('table_of_contents', year=year, lang=lang) }}">Table of Contents</a>
88+
<a href="{{ url_for('contributors', year=year, lang=lang) }}">Contributors</a>
89+
<a href="{{ url_for('methodology', year=year, lang=lang) }}">Methodology</a>
90+
</nav>
91+
<div class="language-switcher">{{ language_switcher() }}</div>
92+
<p class="copyright"><span>© 2019 Web Almanac. Licensed under <a href="https://github.com/HTTPArchive/almanac.httparchive.org/blob/master/LICENSE">Apache 2.0</a>.</span></p>
93+
<div class="social-media">
94+
<a href="https://twitter.com/HTTPArchive" class="twitter">
95+
<img src="/static/images/twitter.png" alt="Twitter" height="80" width="65" loading="lazy" />
96+
</a>
97+
<a href="https://github.com/HTTPArchive/almanac.httparchive.org" class="github">
98+
<img src="/static/images/github.png" alt="GitHub" height="80" width="78" loading="lazy" />
99+
</a>
100+
</div>
101+
<hr>
102+
<hr>
103+
</footer>
104+
{% endblock %}
105+
{% block scripts %}
106+
<script nonce="{{ csp_nonce() }}">
107+
(function() {
108+
// Language switching
109+
var languageSwitchers = document.querySelectorAll('.language-switcher select');
110+
for (var i = 0; i < languageSwitchers.length; i++) {
111+
languageSwitchers[i].addEventListener('change', function(e) {
112+
if (e.target.value) {
113+
window.location = e.target.value;
114+
}
115+
});
116+
}
117+
118+
// Mobile menu
119+
var menuIcon = document.querySelector('.menu-icon');
120+
var menuIconInitialSrc = document.querySelector('.menu-icon').src;
121+
var menuIconSrcClose = document.querySelector('.menu-icon').dataset.srcClose;
122+
123+
document.querySelector('.menu-btn').addEventListener('click', function() {
124+
var menuOpen = document.body.classList.toggle('menu-open');
125+
menuIcon.src = menuOpen ? menuIconSrcClose : menuIconInitialSrc;
126+
});
127+
})();
128+
</script>
129+
{% endblock %}
130+
{% endblock %}
131+
132+
{% macro language_switcher() %}
133+
{% if supported_languages | length > 1%}
134+
<div class="language-switcher">
135+
{% if language is not none %}
136+
<img src="/static/images/{{ language }}.png" class="flag" height="25" width="25" loading="lazy" />
137+
{% else %}
138+
<img src="/static/images/English.png" class="flag" height="25" width="25" loading="lazy" />
139+
{% endif %}
140+
<select>
141+
{% for l in supported_languages %}
142+
<option
143+
{% if l == language %}selected="selected"{% endif %}
144+
value="{{ url_for(request.endpoint, **get_view_args(lang=l.lang_code)) }}">
145+
{{ l }}
146+
</option>
147+
{% endfor %}
148+
</select>
149+
<img class="dropdown-arrow" src="/static/images/dropdown-arrow.png" alt="open" height="20" width="20" loading="lazy" />
150+
</div>
151+
{% endif %}
152+
{% endmacro %}
153+
154+
{% macro year_switcher() %}
155+
<div class="year-switcher">
156+
<select>
157+
{% for y in supported_years %}
158+
<option
159+
{% if y == year %}selected="selected"{% endif %}
160+
value="{{ url_for('table_of_contents', **get_view_args(year=y)) }}">
161+
{{ y }} Edition
162+
</option>
163+
{% endfor %}
164+
</select>
165+
<img class="dropdown-arrow" src="/static/images/dropdown-arrow.png" alt="open" height="20" width="20" loading="lazy" />
166+
</div>
167+
{% endmacro %}

‎src/templates/base.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="{% block lang %}{{ language.lang_attribute }}{% endblock %}">
2+
<html lang="{% block lang %}{{ language.lang_attribute }}{% endblock %}" {% block dir_attribute %}{% endblock %}>
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">

0 commit comments

Comments
 (0)