Genaral website update/overhaul

.github/workflows/build.yml

@@ -0,0 +1,46 @@
+name: Build website
+
+on:
+  pull_request:
+    branches:
+      - "main"
+    types:
+      - closed
+
+  #workflow_dispatch:
+
+  #push:
+  #  branches:
+  #    - 'main'
+  #  paths:
+  #    - './templates/**'
+
+concurrency:
+  group: "builders"
+  cancel-in-progress: true
+
+jobs:
+  if_merged:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: main
+          fetch-depth: 0
+      - name: Install dependencies
+        run: |
+          curl -sSL https://install.python-poetry.org | python3 -
+          make install
+      - name: Build website
+        run: make website
+      - name: Commit files
+        run: |
+          git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
+          git commit -a -m "Built website"
+      - name: Push changes
+        uses: ad-m/github-push-action@master
+        with:
+          branch: main

.github/workflows/pages.yml

@@ -3,12 +3,18 @@ name: Deploy static content to Pages
 
 on:
   # Runs on pushes targeting the default branch
-  push:
-    branches: ["main"]
+  #push:
+  #  branches: ["main"]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
+  workflow_run:
+    workflows:
+      - Build website
+    types:
+      - completed
+
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
   contents: read
@@ -29,14 +35,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Setup Pages
-        uses: actions/configure-pages@v2
+        uses: actions/configure-pages@v3
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
           # Upload entire repository
-          path: './public/'
+          path: "./public/"
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v2

README.md

@@ -1 +1,19 @@
 # Website for the OpenAndroidInstaller project
+
+## Website build workflow
+
+This website is made with Bulma and gets build to a static page via the Python tools `make`, `poetry` and `jinja2`.
+
+To build the website follow the two following steps:
+
+- Install the dependencies:
+
+    ```
+    make install
+    ```
+
+- Build the website:
+
+    ```
+    make website
+    ```

build.py

@@ -17,6 +17,7 @@
         "imprint.html",
         "privacy.html",
         "feedback.html",
+        "404.html",
     ]
 
     # Load template files and write the rendered HTML

public/.htaccess

@@ -0,0 +1,47 @@
+##START HTTP Security Header##
+
+#Content Security Policy - CSP-HEADER
+Header set Content-Security-Policy "frame-ancestors 'self'; default-src 'none'; script-src 'self' plausible.io peertube.tv opencollective.com liberapay.com; script-src-attr 'none'; script-src-elem 'self'; object-src 'self' img.shields.io; img-src 'self' opencollective.com liberapay.com; media-src 'self'; connect-src 'self'; frame-src 'self' img.shields.io peertube.tv; form-action 'self'; base-uri 'self'; font-src 'self'; style-src 'self'; style-src-elem 'self'; style-src-attr 'self';"
+
+#HTTP Content-Types
+AddCharset UTF-8 .html
+
+#Public Key Pins
+Header set Public-Key-Pins "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains"
+
+#Strict-Transport-Security
+Header set Strict-Transport-Security "max-age=31536000; includeSubDomains"
+
+#X-Content-Type-Options
+Header always set X-Content-Type-Options "nosniff"
+
+#X-Frame-Options
+Header always set X-Frame-Options "SAMEORIGIN"
+
+#X-Xss-Protection
+Header always set X-Xss-Protection "1; mode=block"
+
+#Referrer-Policy
+Header set Referrer-Policy "no-referrer, same-origin"
+
+##END HTTP Security Header##
+
+#HTTP Cache
+Header set Cache-Control "max-age=604800"
+# "max-age=604800" -> 1 Week
+# "max-age=2592000" -> 30 Days
+# "max-age=31536000" -> 1 Year
+
+Error pages
+ErrorDocument 404 404.html
+
+##START File Extensions##
+
+RewriteEngine on
+
+# Remove .html
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteCond %{REQUEST_FILENAME}\.html -f
+RewriteRule ^(.*)$ $1.html
+
+##END File Extensions##

public/static/custom.css

@@ -2,6 +2,61 @@ html {
   scroll-behavior: smooth;
 }
 
+.px-6 ul {
+  list-style: unset;
+}
+
+.round {
+  border-radius: 4px;
+}
+
+.hover-transition {
+  transition: ease-in 250ms;
+}
+
+.hover-transition:hover {
+  transition: ease-in 250ms;
+}
+
+#pf-funding-logos {
+  width: 333px;
+}
+
+.pt-5 {
+  border-top: 1px solid #dee2e6;
+}
+
+#user {
+  display: block;
+}
+
+/*Donation options*/
+
+#donate-widgets {
+  margin: auto;
+  margin-top: 10px;
+}
+
+.opencollective,
+#gh-sponsors {
+  display: flex !important;
+  margin: auto !important;
+}
+
+.liberapay {
+  display: flex !important;
+  width: 50% !important;
+  margin-bottom: 10px;
+  margin-left: 46.05px !important;
+}
+
+.liberapay-nojs {
+  display: flex;
+  margin: auto;
+  margin-top: -20px;
+  margin-bottom: 10px;
+}
+
 /* Style the tab content */
 .tabcontent {
   display: none;

templates/404.html

@@ -0,0 +1,49 @@
+{% extends "base.html" %}
+{% block title %}404 | OpenAndroidInstaller{% endblock %}
+{% block robot %}
+<meta name="robots" content="noindex,nofollow">
+<meta name="googlebot" content="noindex,nofollow">
+{% endblock %}
+{% block content %}
+<head>
+  <link rel="stylesheet" href="/public/static/style.css">
+  <link rel="stylesheet" href="/public/static/custom.css">
+</head>
+<!-- Header -->
+<section class="hero is-small">
+  <div class="hero-body">
+    <div class="container has-text-centered">
+      <h1 class="is-size-1 is-size-3-mobile has-text-weight-bold">Error 404</h1>
+      <p class="subtitle is-4">Oops! - The requested page does not exist or was not found.</p>
+    </div>
+  </div>
+</section>
+<!-- Header End -->
+
+<section class="section">
+    <div class="container is-max-desktop">
+      <!-- Content -->
+      <div class="content">
+      <!-- Content End -->
+    </div>
+  </section>
+
+<!-- Contribution Banner -->
+<section class="section has-background-primary">
+  <div class="container">
+    <div class="is-vcentered columns is-multiline">
+      <div class="column is-6 is-5-desktop mb-4">
+        <h2 class="has-text-white mt-2 mb-3 is-size-1 is-size-3-mobile has-text-weight-bold">You think something is wrong?
+        </h2>
+      </div>
+      <div class="column is-5 ml-auto">
+        <div class="mx-auto box p-6 has-background-light has-text-centered">
+          <a class="button is-link is-fullwidth hover-transition" id="contribute-button"
+            href="mailto:[email protected]">Write an e-mail</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- Contribution Banner End -->
+{% endblock %}