make website basically usable

3 files changed, 608 insertions, 8 deletions

diff --git a/src/hydrilla_website/templates/downloads.html.jinja b/src/hydrilla_website/templates/downloads.html.jinja
new file mode 100644
index 0000000..ce5dde3
--- /dev/null
+++ b/src/hydrilla_website/templates/downloads.html.jinja
@@ -0,0 +1,291 @@
+{#
+SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0
+
+Website downloads page.
+
+This file is part of Hydrilla&Haketilo website.
+
+Copyright (C) 2022 Wojtek Kosior
+
+Dual licensed under
+* GNU General Public License v3.0 or later and
+* Creative Commons Attribution Share Alike 4.0 International.
+
+You can choose to use either of these licenses or both.
+
+
+I, Wojtek Kosior, thereby promise not to sue for violation of this
+file's licenses. Although I request that you do not make use of this
+code in a proprietary work, I am not going to enforce this in court.
+#}
+{% extends "website_base.html.jinja" %}
+
+{% block title %} {{ _('downloads.title') }} {% endblock %}
+
+{% block style %}
+  {{ super() }}
+
+  .signify-pubkey {
+      word-break: break-all;
+  }
+{% endblock %}
+
+{% set here_url = url_for('downloads') %}
+
+{%
+  set nav_links_data = [
+      (none,           url_for('main') ~ '#',      'Home'),
+      ('',             here_url ~ '#',             'Downloads'),
+      ('proxy',        here_url ~ '#proxy',        'Haketilo proxy'),
+      ('old-hydrilla', here_url ~ '#old-hydrilla', 'Old Hydrilla versions'),
+      ('webextension', here_url ~ '#webextension', 'Haketilo WebExtension')
+  ]
+%}
+
+{% set downloads_base = 'https://hydrilla.koszko.org/downloads/' %}
+
+{%
+  macro list_files(
+      filenames_comments,
+      label_text       = 'Files',
+      filename_suffix  = '',
+      include_comments = true
+  )
+%}
+  {{ label(label_text) }}
+
+  {% call unordered_list() %}
+    {% for base_filename, comment in filenames_comments %}
+      {% set filename = base_filename ~ filename_suffix %}
+      {% set href = downloads_base ~ filename %}
+      {% call list_entry() %}
+        <a href="{{ href }}">{{ filename }}</a>
+        {% if include_comments and comment %}
+          ({{ comment }})
+        {% endif %}
+      {% endcall %}
+    {% endfor %}
+  {% endcall %}
+{% endmacro %}
+
+{% macro files_and_sigs_lists(filenames_comments) %}
+  {{ list_files(filenames_comments) }}
+  {{ list_files(filenames_comments, 'Signify signatures', '.sig', false) }}
+  {{ list_files(filenames_comments, 'PGP signatures', '.asc', false) }}
+{% endmacro %}
+
+{% block body %}
+  {% call subpage('') %}
+    <h3>
+      {{ _('index.h_big.haketilo_downloads') }}
+    </h3>
+
+    <p>
+      This page lists releases of Haketilo proxy, Haketilo browser extension
+      (now in maintenance mode) and Hydrilla repository server. Starting with
+      version 3, Haketilo proxy and Hydrilla are distributed together.
+    </p>
+
+    <p>
+      All files are cryptographically signed by project maintainer, Wojciech
+      Kosior. Public keys for verification of signatures are the ones from
+      <a href="https://koszko.org">koszko.org</a>.
+      You might want to read the
+      <a href="https://hydrillabugs.koszko.org/projects/haketilo/wiki/Verifying_signatures">instructions</a>
+      on signature verification.
+    </p>
+
+    {{ label('PGP key fingerprint') }}
+    <p class="bold">
+      E972 7060 E3C5 637C 8A4F 4B42 4BC5 221C 5A79 FD1A
+    </p>
+
+    {% call label() %}
+      <span>
+        <a href="https://man.openbsd.org/signify">Signify</a> public key
+      </span>
+    {% endcall %}
+    <p class="bold signify-pubkey">
+      RWQSf2wUdpjAtrmt7D3t9iHrHFL/GpqXOF+NxECx8ck7swrx6tNzDkM9
+    </p>
+  {% endcall %}
+
+  {% call subpage('proxy') %}
+    <h3>Haketilo proxy and Hydrilla releases</h3>
+
+    <p>
+      Tool releases from version 3 upwards are listed below. Both Haketilo proxy
+      and Hydrilla are included inside.
+    </p>
+
+    <p>
+      If you're a programmer, you might also want to check the
+      <a href="https://git.koszko.org/pydrilla">git repository of Hydrilla and Haketilo</a>.
+    </p>
+
+    <h4>Version 3.0-beta1 (pre-release version)</h4>
+
+    <p>
+      The binary release was made with
+      <a href="https://guix.gnu.org/">GNU Guix</a> version
+      <span class="bold">1.3.0-26.fd00ac7</span>.
+    </p>
+
+    {{
+      files_and_sigs_lists([
+          ('haketilo-and-hydrilla-bin-3.0b1-x86_64.tar.gz',
+           'relocatable standalone binary release for x86-64 GNU/Linux computers'),
+          ('hydrilla-3.0b1-py3-none-any.whl',
+           'Python wheel for use with pip'),
+          ('haketilo-and-hydrilla-3.0b1.tar.gz',
+           'source code')
+      ])
+    }}
+  {% endcall %}
+
+  {% call subpage('old-hydrilla') %}
+    <h3>Old Hydrilla releases</h3>
+
+    <p>
+      Hydrilla releases before version 3 are listed below. Those old versions
+      do not yet include the Haketilo proxy. The functionality is split between
+      separate Hydrilla <span class="bold">builder</span> and
+      <span class="bold">server</span> packages. The latter depends on the
+      former.
+    </p>
+
+    <p>
+      If you're a programmer, you might also want to check the git repositories
+      of <a href="https://git.koszko.org/pydrilla">Hydrilla</a> and
+      <a href="https://git.koszko.org/hydrilla-builder">Hydrilla builder</a>.
+    </p>
+
+    <h4>Version 1.1-beta1 (pre-release version)</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('hydrilla.builder-1.1b1.tar.gz',           ''),
+          ('hydrilla.builder-1.1b1-py3-none-any.whl', ''),
+          ('hydrilla-1.1b1.tar.gz',                   ''),
+          ('hydrilla-1.1b1-py3-none-any.whl',         '')
+      ])
+    }}
+
+    <h4>Version 1.0</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('hydrilla.builder-1.0.tar.gz',           ''),
+          ('hydrilla.builder-1.0-py3-none-any.whl', ''),
+          ('hydrilla-1.0.tar.gz',                   ''),
+          ('hydrilla-1.0-py3-none-any.whl',         '')
+      ])
+    }}
+
+    <h4>Version - 1.0-beta2 (pre-release version)</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('hydrilla.builder-1.0b2.tar.gz',           ''),
+          ('hydrilla.builder-1.0b2-py3-none-any.whl', ''),
+          ('hydrilla-1.0b2.tar.gz',                   ''),
+          ('hydrilla-1.0b2-py3-none-any.whl',         '')
+      ])
+    }}
+
+    <h4>Version - 1.0-beta1 (pre-release version)</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('hydrilla.builder-1.0b1.tar.gz',           ''),
+          ('hydrilla.builder-1.0b1-py3-none-any.whl', ''),
+          ('hydrilla-1.0b1.tar.gz',                   ''),
+          ('hydrilla-1.0b1-py3-none-any.whl',         '')
+      ])
+    }}
+  {% endcall %}
+
+  {% call subpage('webextension') %}
+    <h3>Haketilo WebExtension</h3>
+
+    <p>
+      Browser extension releases are listed below. The extension is currently in
+      maintenance mode and is not going to receive new functionalities.
+    </p>
+
+    <p>
+      If you're a programmer, you might also want to check the
+      <a href="https://git.koszko.org/browser-extension/">git repository of Haketilo browser extension</a>.
+    </p>
+
+    <h4>Version 2.0.1</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('haketilo-2.0.1.zip',    'Chromium build'),
+          ('haketilo-2.0.1.xpi',    'Mozilla build'),
+          ('haketilo-2.0.1.tar.gz', 'source code')
+      ])
+    }}
+
+    <h4>Version 2.0</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('haketilo-2.0.zip',    'Chromium build'),
+          ('haketilo-2.0.xpi',    'Mozilla build'),
+          ('haketilo-2.0.tar.gz', 'source code')
+      ])
+    }}
+
+    <h4>Version 2.0-beta1 (pre-release version)</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('haketilo-2.0b1.zip',    'Chromium build'),
+          ('haketilo-2.0b1.xpi',    'Mozilla build'),
+          ('haketilo-2.0b1.tar.gz', 'source code')
+      ])
+    }}
+
+    <h4>Version 1.0</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('haketilo-1.0.zip',                'Chromium build'),
+          ('haketilo-1.0.mozilla-signed.xpi', 'Mozilla build'),
+          ('haketilo-1.0.tar.gz',             'source code')
+      ])
+    }}
+
+    <h4>Version 1.0-beta3 (pre-release version)</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('haketilo-1.0b3.zip',    'Chromium build'),
+          ('haketilo-1.0b3.xpi',    'Mozilla build'),
+          ('haketilo-1.0b3.tar.gz', 'source code')
+      ])
+    }}
+
+    <h4>Version 1.0-beta2 (pre-release version)</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('haketilo-1.0b2.zip',    'Chromium build'),
+          ('haketilo-1.0b2.xpi',    'Mozilla build'),
+          ('haketilo-1.0b2.tar.gz', 'source code')
+      ])
+    }}
+
+    <h4>Version 1.0-beta1 (pre-release version)</h4>
+
+    {{
+      files_and_sigs_lists([
+          ('haketilo-1.0b1.zip',    'Chromium build'),
+          ('haketilo-1.0b1.xpi',    'Mozilla build'),
+          ('haketilo-1.0b1.tar.gz', 'source code')
+      ])
+    }}
+  {% endcall %}
+{% endblock %}
diff --git a/src/hydrilla_website/templates/index.html.jinja b/src/hydrilla_website/templates/index.html.jinja
index 65ae42a..955c06f 100644
--- a/src/hydrilla_website/templates/index.html.jinja
+++ b/src/hydrilla_website/templates/index.html.jinja
@@ -22,8 +22,173 @@ code in a proprietary work, I am not going to enforce this in court.
 
 {% block title %} {{ _('index.title') }} {% endblock %}
 
-{% block main %}
-  <h3>
-    {{ _('index.h_big.welcome_to_haketilo') }}
-  </h3>
+{% block style %}
+  {{ super() }}
+
+  img#haketilo-web {
+      display: block;
+      margin: 20px;
+      max-height: 300px;
+      max-width: 100%;
+      margin: auto;
+  }
+{% endblock %}
+
+{% set here_url = url_for('main') %}
+{% set site_git_url = 'https://git.koszko.org/hydrilla-website/' %}
+
+{%
+  set nav_links_data = [
+      ('',             here_url ~ '#',             'Home'),
+      ('about',        here_url ~ '#about',        'About'),
+      ('manual',       here_url ~ '#manual',       'Manual'),
+      (none,           url_for('downloads') ~ '#', 'Downloads'),
+      ('get-involved', here_url ~ '#get-involved', 'Get involved'),
+      (none,           site_git_url,               'Website sources')
+  ]
+%}
+
+{% block body %}
+  {% call subpage('') %}
+    <img id="haketilo-web" alt="Haketilo hatchet stabbed into the Web"
+         src="/static/haketilo-web.svg" draggable="false">
+    <h3>
+      {{ _('index.h_big.taking_back_the_web') }}
+    </h3>
+  {% endcall %}
+
+  {% call subpage('about') %}
+    <h3>About</h3>
+
+    <p>
+      Haketilo is a tool that facilitates viewing websites with their original
+      <a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a> replaced
+      by user-provided scripts.
+      It combines the functionalities of content
+      blocker and user script manager.
+      It can be used with its script repository, Hydrilla.
+    </p>
+
+    <p>
+      One of Haketilo's aims is to address the issues raised in
+      <a href="https://www.gnu.org/philosophy/javascript-trap.html">"The JavaScript trap"</a>.
+      It is being developed with hope that it will make more user-controlled
+      "Web" browsing possible.
+    </p>
+
+    <p>
+      Haketilo is a
+      <a href="https://en.wikipedia.org/wiki/Free_software">free/libre software</a>,
+      SSl-enabled HTTP proxy. As such, it can be used with multiple web
+      browsers, regardless of their native support for some particular addon
+      format.
+    </p>
+
+    <p>
+      A browser extension variant of Haketilo also exists and is compatible with
+      <a href="https://en.wikipedia.org/wiki/Firefox">Firefox</a>- and
+      <a href="https://en.wikipedia.org/wiki/Chromium_(web_browser)">Chromium</a>-based
+      browsers that support the Manifest V2 WebExtension format. The browser
+      extension is currently in maintenance mode and does not receive new
+      features.
+    </p>
+
+    <h4>Available packages</h4>
+
+    <p>
+      Haketilo can be used both for simple script-blocking and for altering the
+      ways websites are viewed. Its official Hydrilla repository provides a
+      collection of
+      <a href="https://en.wikipedia.org/wiki/Free-software_license">freely-licensed</a>
+      packages that can make several websites viewable again after their
+      original JavaScript is blocked from executing.
+    </p>
+
+    <h4>Credits</h4>
+
+    Those who knowingly or unknowingly helped the project in some way, receive
+    special thanks.
+
+    {% call unordered_list() %}
+      {% call list_entry() %}
+        the <a href="https://nlnet.nl/">NLnet Foundation</a> with the
+        <a href="https://ngi.eu/">NGI0 Programme</a> for funding the
+        development of Haketilo in 2021 and 2022
+      {% endcall %}
+      {% call list_entry() %}
+        <a href="https://tilde.team/~jahoti/">Jahoti</a> for contributions in
+        the early stages of Haketilo browser extension
+      {% endcall %}
+      {% call list_entry() %}
+        <a href="https://nicksphere.ch/">Nicholas Johnson</a> for preparing a
+        <a href="https://media.libreplanet.org/u/libreplanet/m/taking-back-the-web-with-haketilo/">presentation about Haketilo</a>
+        for LibrePlanet 2022
+      {% endcall %}
+      {% call list_entry() %}
+        <a href="https://openclipart.org/artist/davidblyons">David Lyons</a> for
+        his Hatchet graphic that is being used in Haketilo
+      {% endcall %}
+      {% call list_entry() %}
+        the creators of <a href="https://mitmproxy.org/">mitmproxy</a> which
+        serves as a base for Haketilo proxy
+      {% endcall %}
+      {% call list_entry() %}
+        the <a href="https://palletsprojects.com/">the Pallets Projects</a> for
+        creating Flask and other tools that are used extensively in this very
+        website as well as in Haketilo&Hydrilla
+      {% endcall %}
+    {% endcall %}
+  {% endcall %}
+
+  {% call subpage('manual') %}
+    <h3>User manual</h3>
+
+    <p>
+      Information about installation, running and some technical aspects of
+      Haketilo operation can be found on
+      <a href="https://hydrillabugs.koszko.org/projects/haketilo/wiki">project's Redmine-powered wiki</a>.
+      Additional help is provided by Haketilo proxy's builtin documentation
+      which can be viewed from the tool itself.
+    </p>
+
+    <p>
+      The documentation of Hydrilla repository server for use with Haketilo can
+      be found on
+      <a href="https://hydrillabugs.koszko.org/projects/hydrilla/wiki">on project's wiki</a>.
+    </p>
+  {% endcall %}
+
+  {% call subpage('get-involved') %}
+    <h3>Get involved</h3>
+
+    <p>
+      Haketilo development currently occurs on
+      <a href="https://hydrillabugs.koszko.org/">project's Redmine instance</a>.
+      Individuals and groups are more than welcome to
+    </p>
+
+    {% call unordered_list() %}
+      {% call list_entry() %}
+        provide feedback and suggestions,
+      {% endcall %}
+      {% call list_entry() %}
+        make bug reports,
+      {% endcall %}
+      {% call list_entry() %}
+        share custom scripts for websites,
+      {% endcall %}
+      {% call list_entry() %}
+        provide translations and
+      {% endcall %}
+      {% call list_entry() %}
+        contribute code to Haketilo and Hydrilla.
+      {% endcall %}
+    {% endcall %}
+
+    <p>
+      One can also email the maintainer of Haketilo,
+      <a href="https://koszko.org/koszko.html">Wojtek Kosior</a>, directly
+      at <a href="mailto:koszko@koszko.org">koszko@koszko.org</a>.
+    </p>
+  {% endcall %}
 {% endblock %}
diff --git a/src/hydrilla_website/templates/website_base.html.jinja b/src/hydrilla_website/templates/website_base.html.jinja
index f706faa..777a3d3 100644
--- a/src/hydrilla_website/templates/website_base.html.jinja
+++ b/src/hydrilla_website/templates/website_base.html.jinja
@@ -13,14 +13,158 @@ Available under the terms of Creative Commons Zero v1.0 Universal.
 
 {% block head %}
   {{ super() }}
-
+  <link rel="icon" type="image/x-icon" href="static/haketilo-favicon.ico">
   <title>
-    {% block title required %}{% endblock %}
-    -
-    {{ _('base.title.haketilo') }}
+    {% block title %}
+      {{ _('base.title.haketilo') }}
+    {% endblock %}
   </title>
+  <meta http-equiv="Content-Security-Policy"
+        content="script-src 'none'; default-src 'self'">
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
 {% endblock head %}
 
 {% block style %}
   {{ super() }}
+
+  .nav-container {
+      display: block;
+      padding: 20px 10px;
+  }
+
+  nav {
+      display: inline-flex;
+      flex-direction: column;
+      padding: 0;
+      margin: auto;
+      min-height: calc(100vh - 40px);
+      justify-content: space-evenly;
+  }
+
+  nav > a {
+      margin: 0;
+  }
+
+  .navigation-dots {
+      display: none;
+      padding: 20px 10px;
+      position: absolute;
+      right: 0;
+      top: 0;
+      opacity: 0.75;
+  }
+
+  .navigation-dots img {
+      width: 10px;
+      height: auto;
+  }
+
+  body {
+      width: 100%;
+  }
+
+  .subpage {
+      width: calc(100% - 20px);
+      overflow: hidden;
+      padding: 0 10px;
+  }
+
+  .subpage-layout {
+      display: flex;
+      width: calc(700px + 300px);
+      margin: auto;
+      position: relative;
+      overflow: hidden;
+  }
+
+  @media screen and (max-width: 1020px) {
+      .subpage-layout {
+          width: 100%;
+      }
+  }
+
+  .subpage:nth-child(2n) {
+      background-color: #f6fff9;
+  }
+
+  .subpage-left-part {
+      min-height: calc(100vh - 20px);
+      flex: 1 1 700px;
+      max-width: 700px;
+      padding: 10px 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+  }
+
+  .subpage-main-contents {
+      margin: 10px;
+  }
+
+  @media screen and (max-width: 500px) {
+      .nav-container {
+          position: absolute;
+          right: -340px;
+          /* border will cover the 3 dots */
+          border-right: 30px solid white;
+          border-left: 2px solid #f4f4f4;
+          padding-right: 0;
+          background-color: #ffffffc0;
+          z-index: 1;
+      }
+
+      .subpage:nth-child(2n) .nav-container {
+            background-color: #f6fff9c0;
+            border-right: 30px solid #f6fff9;
+      }
+
+      .nav-container:target {
+          right: -10px;
+      }
+
+      .navigation-dots {
+          display: block;
+      }
+  }
+
+  h3 {
+      text-align: center;
+  }
+
+  li {
+      margin-bottom: 10px;
+  }
 {% endblock style %}
+
+{% macro nav(current_subpage_id) %}
+  <div id="nav-{{ current_subpage_id }}" class="nav-container">
+    <nav>
+      {% for subpage_id, href, text in nav_links_data %}
+        {% set attrs = {'href': href, 'draggable': 'false'} %}
+        {% if current_subpage_id == subpage_id %}
+          {% do attrs.update({'class': 'blue-button'}) %}
+        {% else %}
+          {% do attrs.update({'class': 'green-button'}) %}
+        {% endif %}
+        <a{{ attrs|xmlattr }}>{{ text }}</a>
+      {% endfor %}
+    </nav>
+  </div>
+  <a class="navigation-dots" href="#nav-{{ current_subpage_id }}">
+    <img alt="Three dots, click to view mobile navigation panel"
+         src="static/three-green-dots.svg" draggable="false">
+  </a>
+{% endmacro %}
+
+{% macro subpage(subpage_id) %}
+  <div id="{{ subpage_id }}" class="subpage">
+    <div class="subpage-layout">
+      <div class="subpage-left-part">
+        <div class="subpage-main-contents">
+          {{ caller() }}
+        </div>
+      </div>
+      {{ nav(subpage_id) }}
+    </div>
+  </div>
+{% endmacro %}