expose port 443

and avoid naming confusion between the workdir and the name of the build
output folder

.editorconfig

@@ -1,16 +1,11 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
 # editorconfig.org
-
 root = true
 
-
 [*]
-
 # Change these settings to your own preference
 indent_style = space
-indent_size = 4
+indent_size = 2
-
+max_line_length = 120
 # We recommend you to keep these unchanged
 end_of_line = lf
 charset = utf-8
@@ -19,11 +14,3 @@ insert_final_newline = true
 
 [*.md]
 trim_trailing_whitespace = false
-
-[package.json]
-indent_style = space
-indent_size = 2
-
-[bower.json]
-indent_style = space
-indent_size = 2

.gitignore

@@ -5,3 +5,5 @@ bower_components
 *.swp
 .idea
 *.pyc
+app/main.css
+app/main.css.map

.gitlab-ci.yml

@@ -0,0 +1,30 @@
+variables:
+  PIP_CACHE_DIR: "${CI_PROJECT_DIR}/.cache/pip"
+
+default:
+  image: node:16-slim
+
+lint:
+  stage: test
+  script:
+    - npm i
+    - npm run lint
+    - npm run lint:styles
+
+deploy:
+  stage: deploy
+  before_script:
+     # Install ssh if not already
+     - 'command -v ssh-agent >/dev/null || ( apt-get update -y && apt-get install openssh-client -y )'
+     - eval $(ssh-agent -s)
+     # Make SSH key available
+     - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -
+     - mkdir -p ~/.ssh
+     - chmod 700 ~/.ssh
+     # Add known host keys
+     - echo "$SSH_KNOWN_HOSTS" >> ~/.ssh/known_hosts
+     - chmod 644 ~/.ssh/known_hosts
+  script:
+    - ssh gitdeploy@dreamcast.neuf.no "$(< bin/deploy)"
+  only:
+    - main

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.nvmrc

@@ -0,0 +1 @@
+v16

.prettierignore

@@ -0,0 +1 @@
+app/main.css

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}

.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+    "extends": [
+        "stylelint-config-standard-scss",
+        "stylelint-config-prettier"
+    ]
+}

Dockerfile

@@ -0,0 +1,22 @@
+# Build
+FROM node:18-alpine AS build
+
+WORKDIR /edb-www
+
+COPY package.json package-lock.json ./
+
+RUN npm install
+
+COPY . .
+
+RUN npm run build
+
+# Serve
+FROM nginx:stable-alpine AS runtime
+
+COPY --from=build /edb-www/app /usr/share/nginx/html
+
+EXPOSE 80 443
+
+CMD ["nginx", "-g", "daemon off;"]
+

app/.htaccess

@@ -1,663 +0,0 @@
-# Apache Server Configs v2.2.0 | MIT License
-# https://github.com/h5bp/server-configs-apache
-
-# (!) Using `.htaccess` files slows down Apache, therefore, if you have access
-# to the main server config file (usually called `httpd.conf`), you should add
-# this logic there: http://httpd.apache.org/docs/current/howto/htaccess.html.
-
-# ##############################################################################
-# # CROSS-ORIGIN RESOURCE SHARING (CORS)                                       #
-# ##############################################################################
-
-# ------------------------------------------------------------------------------
-# | Cross-domain AJAX requests                                                 |
-# ------------------------------------------------------------------------------
-
-# Allow cross-origin AJAX requests.
-# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
-# http://enable-cors.org/
-
-# <IfModule mod_headers.c>
-#    Header set Access-Control-Allow-Origin "*"
-# </IfModule>
-
-# ------------------------------------------------------------------------------
-# | CORS-enabled images                                                        |
-# ------------------------------------------------------------------------------
-
-# Send the CORS header for images when browsers request it.
-# https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image
-# http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
-# http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
-
-<IfModule mod_setenvif.c>
-    <IfModule mod_headers.c>
-        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
-            SetEnvIf Origin ":" IS_CORS
-            Header set Access-Control-Allow-Origin "*" env=IS_CORS
-        </FilesMatch>
-    </IfModule>
-</IfModule>
-
-# ------------------------------------------------------------------------------
-# | Web fonts access                                                           |
-# ------------------------------------------------------------------------------
-
-# Allow access to web fonts from all domains.
-
-<IfModule mod_headers.c>
-    <FilesMatch "\.(eot|otf|tt[cf]|woff)$">
-        Header set Access-Control-Allow-Origin "*"
-    </FilesMatch>
-</IfModule>
-
-
-# ##############################################################################
-# # ERRORS                                                                     #
-# ##############################################################################
-
-# ------------------------------------------------------------------------------
-# | 404 error prevention for non-existing redirected folders                   |
-# ------------------------------------------------------------------------------
-
-# Prevent Apache from returning a 404 error as the result of a rewrite
-# when the directory with the same name does not exist.
-# http://httpd.apache.org/docs/current/content-negotiation.html#multiviews
-# http://www.webmasterworld.com/apache/3808792.htm
-
-Options -MultiViews
-
-# ------------------------------------------------------------------------------
-# | Custom error messages / pages                                              |
-# ------------------------------------------------------------------------------
-
-# Customize what Apache returns to the client in case of an error.
-# http://httpd.apache.org/docs/current/mod/core.html#errordocument
-
-ErrorDocument 404 /404.html
-
-
-# ##############################################################################
-# # INTERNET EXPLORER                                                          #
-# ##############################################################################
-
-# ------------------------------------------------------------------------------
-# | Better website experience                                                  |
-# ------------------------------------------------------------------------------
-
-# Force Internet Explorer to render pages in the highest available mode
-# in the various cases when it may not.
-# http://hsivonen.iki.fi/doctype/ie-mode.pdf
-
-<IfModule mod_headers.c>
-    Header set X-UA-Compatible "IE=edge"
-    # `mod_headers` cannot match based on the content-type, however, this
-    # header should be send only for HTML pages and not for the other resources
-    <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|vcf|vtt|webapp|web[mp]|woff|xml|xpi)$">
-        Header unset X-UA-Compatible
-    </FilesMatch>
-</IfModule>
-
-# ------------------------------------------------------------------------------
-# | Cookie setting from iframes                                                |
-# ------------------------------------------------------------------------------
-
-# Allow cookies to be set from iframes in Internet Explorer.
-# http://msdn.microsoft.com/en-us/library/ms537343.aspx
-# http://www.w3.org/TR/2000/CR-P3P-20001215/
-
-# <IfModule mod_headers.c>
-#   Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\""
-# </IfModule>
-
-
-# ##############################################################################
-# # MIME TYPES AND ENCODING                                                    #
-# ##############################################################################
-
-# ------------------------------------------------------------------------------
-# | Proper MIME types for all files                                            |
-# ------------------------------------------------------------------------------
-
-<IfModule mod_mime.c>
-
-  # Audio
-    AddType audio/mp4                                   m4a f4a f4b
-    AddType audio/ogg                                   oga ogg opus
-
-  # Data interchange
-    AddType application/json                            json map
-    AddType application/ld+json                         jsonld
-
-  # JavaScript
-    # Normalize to standard type.
-    # http://tools.ietf.org/html/rfc4329#section-7.2
-    AddType application/javascript                      js
-
-  # Video
-    AddType video/mp4                                   f4v f4p m4v mp4
-    AddType video/ogg                                   ogv
-    AddType video/webm                                  webm
-    AddType video/x-flv                                 flv
-
-  # Web fonts
-    AddType application/font-woff                       woff
-    AddType application/vnd.ms-fontobject               eot
-
-    # Browsers usually ignore the font MIME types and simply sniff the bytes
-    # to figure out the font type.
-    # http://mimesniff.spec.whatwg.org/#matching-a-font-type-pattern
-
-    # Chrome however, shows a warning if any other MIME types are used for
-    # the following fonts.
-
-    AddType application/x-font-ttf                      ttc ttf
-    AddType font/opentype                               otf
-
-    # Make SVGZ fonts work on the iPad.
-    # https://twitter.com/FontSquirrel/status/14855840545
-    AddType     image/svg+xml                           svgz
-    AddEncoding gzip                                    svgz
-
-  # Other
-    AddType application/octet-stream                    safariextz
-    AddType application/x-chrome-extension              crx
-    AddType application/x-opera-extension               oex
-    AddType application/x-web-app-manifest+json         webapp
-    AddType application/x-xpinstall                     xpi
-    AddType application/xml                             atom rdf rss xml
-    AddType image/webp                                  webp
-    AddType image/x-icon                                cur
-    AddType text/cache-manifest                         appcache manifest
-    AddType text/vtt                                    vtt
-    AddType text/x-component                            htc
-    AddType text/x-vcard                                vcf
-
-</IfModule>
-
-# ------------------------------------------------------------------------------
-# | UTF-8 encoding                                                             |
-# ------------------------------------------------------------------------------
-
-# Use UTF-8 encoding for anything served as `text/html` or `text/plain`.
-AddDefaultCharset utf-8
-
-# Force UTF-8 for certain file formats.
-<IfModule mod_mime.c>
-    AddCharset utf-8 .atom .css .js .json .jsonld .rss .vtt .webapp .xml
-</IfModule>
-
-
-# ##############################################################################
-# # URL REWRITES                                                               #
-# ##############################################################################
-
-# ------------------------------------------------------------------------------
-# | Rewrite engine                                                             |
-# ------------------------------------------------------------------------------
-
-# Turn on the rewrite engine and enable the `FollowSymLinks` option (this is
-# necessary in order for the following directives to work).
-
-# If your web host doesn't allow the `FollowSymlinks` option, you may need to
-# comment it out and use `Options +SymLinksIfOwnerMatch`, but be aware of the
-# performance impact.
-# http://httpd.apache.org/docs/current/misc/perf-tuning.html#symlinks
-
-# Also, some cloud hosting services require `RewriteBase` to be set.
-# http://www.rackspace.com/knowledge_center/frequently-asked-question/why-is-mod-rewrite-not-working-on-my-site
-
-<IfModule mod_rewrite.c>
-    Options +FollowSymlinks
-  # Options +SymLinksIfOwnerMatch
-    RewriteEngine On
-  # RewriteBase /
-</IfModule>
-
-# ------------------------------------------------------------------------------
-# | Suppressing / Forcing the `www.` at the beginning of URLs                  |
-# ------------------------------------------------------------------------------
-
-# The same content should never be available under two different URLs,
-# especially not with and without `www.` at the beginning. This can cause
-# SEO problems (duplicate content), and therefore, you should choose one
-# of the alternatives and redirect the other one.
-
-# By default `Option 1` (no `www.`) is activated.
-# http://no-www.org/faq.php?q=class_b
-
-# If you would prefer to use `Option 2`, just comment out all the lines
-# from `Option 1` and uncomment the ones from `Option 2`.
-
-# IMPORTANT: NEVER USE BOTH RULES AT THE SAME TIME!
-
-# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-# Option 1: rewrite www.example.com → example.com
-
-<IfModule mod_rewrite.c>
-    RewriteCond %{HTTPS} !=on
-    RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
-    RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
-</IfModule>
-
-# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-# Option 2: rewrite example.com → www.example.com
-
-# Be aware that the following might not be a good idea if you use "real"
-# subdomains for certain parts of your website.
-
-# <IfModule mod_rewrite.c>
-#    RewriteCond %{HTTPS} !=on
-#    RewriteCond %{HTTP_HOST} !^www\. [NC]
-#    RewriteCond %{SERVER_ADDR} !=127.0.0.1
-#    RewriteCond %{SERVER_ADDR} !=::1
-#    RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
-# </IfModule>
-
-
-# ##############################################################################
-# # SECURITY                                                                   #
-# ##############################################################################
-
-# ------------------------------------------------------------------------------
-# | Clickjacking                                                               |
-# ------------------------------------------------------------------------------
-
-# Protect website against clickjacking.
-
-# The example below sends the `X-Frame-Options` response header with the value
-# `DENY`, informing browsers not to display the web page content in any frame.
-
-# This might not be the best setting for everyone. You should read about the
-# other two possible values for `X-Frame-Options`: `SAMEORIGIN` & `ALLOW-FROM`.
-# http://tools.ietf.org/html/rfc7034#section-2.1
-
-# Keep in mind that while you could send the `X-Frame-Options` header for all
-# of your site’s pages, this has the potential downside that it forbids even
-# non-malicious framing of your content (e.g.: when users visit your site using
-# a Google Image Search results page).
-
-# Nonetheless, you should ensure that you send the `X-Frame-Options` header for
-# all pages that allow a user to make a state changing operation (e.g: pages
-# that contain one-click purchase links, checkout or bank-transfer confirmation
-# pages, pages that make permanent configuration changes, etc.).
-
-# Sending the `X-Frame-Options` header can also protect your website against
-# more than just clickjacking attacks: https://cure53.de/xfo-clickjacking.pdf.
-
-# http://tools.ietf.org/html/rfc7034
-# http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx
-# https://www.owasp.org/index.php/Clickjacking
-
-# <IfModule mod_headers.c>
-#     Header set X-Frame-Options "DENY"
-#     <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|vcf|vtt|webapp|web[mp]|woff|xml|xpi)$">
-#         Header unset X-Frame-Options
-#     </FilesMatch>
-# </IfModule>
-
-# ------------------------------------------------------------------------------
-# | Content Security Policy (CSP)                                              |
-# ------------------------------------------------------------------------------
-
-# Mitigate the risk of cross-site scripting and other content-injection attacks.
-
-# This can be done by setting a `Content Security Policy` which whitelists
-# trusted sources of content for your website.
-
-# The example header below allows ONLY scripts that are loaded from the current
-# site's origin (no inline scripts, no CDN, etc). This almost certainly won't
-# work as-is for your site!
-
-# For more details on how to craft a reasonable policy for your site, read:
-# http://html5rocks.com/en/tutorials/security/content-security-policy (or the
-# specification: http://w3.org/TR/CSP). Also, to make things easier, you can
-# use an online CSP header generator such as: http://cspisawesome.com/.
-
-# <IfModule mod_headers.c>
-#     Header set Content-Security-Policy "script-src 'self'; object-src 'self'"
-#     <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|vcf|vtt|webapp|web[mp]|woff|xml|xpi)$">
-#         Header unset Content-Security-Policy
-#     </FilesMatch>
-# </IfModule>
-
-# ------------------------------------------------------------------------------
-# | File access                                                                |
-# ------------------------------------------------------------------------------
-
-# Block access to directories without a default document.
-# You should leave the following uncommented, as you shouldn't allow anyone to
-# surf through every directory on your server (which may includes rather private
-# places such as the CMS's directories).
-
-<IfModule mod_autoindex.c>
-    Options -Indexes
-</IfModule>
-
-# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-# Block access to hidden files and directories.
-# This includes directories used by version control systems such as Git and SVN.
-
-<IfModule mod_rewrite.c>
-    RewriteCond %{SCRIPT_FILENAME} -d [OR]
-    RewriteCond %{SCRIPT_FILENAME} -f
-    RewriteRule "(^|/)\." - [F]
-</IfModule>
-
-# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-# Block access to files that can expose sensitive information.
-
-# By default, block access to backup and source files that may be left by some
-# text editors and can pose a security risk when anyone has access to them.
-# http://feross.org/cmsploit/
-
-# IMPORTANT: Update the `<FilesMatch>` regular expression from below to include
-# any files that might end up on your production server and can expose sensitive
-# information about your website. These files may include: configuration files,
-# files that contain metadata about the project (e.g.: project dependencies),
-# build scripts, etc..
-
-<FilesMatch "(^#.*#|\.(bak|config|dist|fla|in[ci]|log|psd|sh|sql|sw[op])|~)$">
-
-    # Apache < 2.3
-    <IfModule !mod_authz_core.c>
-        Order allow,deny
-        Deny from all
-        Satisfy All
-    </IfModule>
-
-    # Apache ≥ 2.3
-    <IfModule mod_authz_core.c>
-        Require all denied
-    </IfModule>
-
-</FilesMatch>
-
-# ------------------------------------------------------------------------------
-# | Reducing MIME-type security risks                                          |
-# ------------------------------------------------------------------------------
-
-# Prevent some browsers from MIME-sniffing the response.
-
-# This reduces exposure to drive-by download attacks and should be enable
-# especially if the web server is serving user uploaded content, content
-# that could potentially be treated by the browser as executable.
-
-# http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-v-comprehensive-protection.aspx
-# http://msdn.microsoft.com/en-us/library/ie/gg622941.aspx
-# http://mimesniff.spec.whatwg.org/
-
-# <IfModule mod_headers.c>
-#     Header set X-Content-Type-Options "nosniff"
-# </IfModule>
-
-# ------------------------------------------------------------------------------
-# | Reflected Cross-Site Scripting (XSS) attacks                               |
-# ------------------------------------------------------------------------------
-
-# (1) Try to re-enable the Cross-Site Scripting (XSS) filter built into the
-#     most recent web browsers.
-#
-#     The filter is usually enabled by default, but in some cases it may be
-#     disabled by the user. However, in Internet Explorer for example, it can
-#     be re-enabled just by sending the `X-XSS-Protection` header with the
-#     value of `1`.
-#
-# (2) Prevent web browsers from rendering the web page if a potential reflected
-#     (a.k.a non-persistent) XSS attack is detected by the filter.
-#
-#     By default, if the filter is enabled and browsers detect a reflected
-#     XSS attack, they will attempt to block the attack by making the smallest
-#     possible modifications to the returned web page.
-#
-#     Unfortunately, in some browsers (e.g.: Internet Explorer), this default
-#     behavior may allow the XSS filter to be exploited, thereby, it's better
-#     to tell browsers to prevent the rendering of the page altogether, instead
-#     of attempting to modify it.
-#
-#     http://hackademix.net/2009/11/21/ies-xss-filter-creates-xss-vulnerabilities
-#
-# IMPORTANT: Do not rely on the XSS filter to prevent XSS attacks! Ensure that
-# you are taking all possible measures to prevent XSS attacks, the most obvious
-# being: validating and sanitizing your site's inputs.
-#
-# http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-iv-the-xss-filter.aspx
-# http://blogs.msdn.com/b/ieinternals/archive/2011/01/31/controlling-the-internet-explorer-xss-filter-with-the-x-xss-protection-http-header.aspx
-# https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29
-
-# <IfModule mod_headers.c>
-#     #                           (1)    (2)
-#     Header set X-XSS-Protection "1; mode=block"
-#     <FilesMatch "\.(appcache|atom|crx|css|cur|eot|f4[abpv]|flv|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|tt[cf]|vcf|vtt|webapp|web[mp]|woff|xml|xpi)$">
-#         Header unset X-XSS-Protection
-#     </FilesMatch>
-# </IfModule>
-
-# ------------------------------------------------------------------------------
-# | Secure Sockets Layer (SSL)                                                 |
-# ------------------------------------------------------------------------------
-
-# Rewrite secure requests properly in order to prevent SSL certificate warnings.
-# E.g.: prevent `https://www.example.com` when your certificate only allows
-# `https://secure.example.com`.
-
-# <IfModule mod_rewrite.c>
-#    RewriteCond %{SERVER_PORT} !^443
-#    RewriteRule ^ https://example-domain-please-change-me.com%{REQUEST_URI} [R=301,L]
-# </IfModule>
-
-# ------------------------------------------------------------------------------
-# | HTTP Strict Transport Security (HSTS)                                      |
-# ------------------------------------------------------------------------------
-
-# Force client-side SSL redirection.
-
-# If a user types `example.com` in his browser, the above rule will redirect
-# him to the secure version of the site. That still leaves a window of
-# opportunity (the initial HTTP connection) for an attacker to downgrade or
-# redirect the request.
-
-# The following header ensures that browser will ONLY connect to your server
-# via HTTPS, regardless of what the users type in the address bar.
-
-# http://tools.ietf.org/html/draft-ietf-websec-strict-transport-sec-14#section-6.1
-# http://www.html5rocks.com/en/tutorials/security/transport-layer-security/
-
-# IMPORTANT: Remove the `includeSubDomains` optional directive if the subdomains
-# are not using HTTPS.
-
-# <IfModule mod_headers.c>
-#    Header set Strict-Transport-Security "max-age=16070400; includeSubDomains"
-# </IfModule>
-
-# ------------------------------------------------------------------------------
-# | Server software information                                                |
-# ------------------------------------------------------------------------------
-
-# Avoid displaying the exact Apache version number, the description of the
-# generic OS-type and the information about Apache's compiled-in modules.
-
-# ADD THIS DIRECTIVE IN THE `httpd.conf` AS IT WILL NOT WORK IN THE `.htaccess`!
-
-# ServerTokens Prod
-
-
-# ##############################################################################
-# # WEB PERFORMANCE                                                            #
-# ##############################################################################
-
-# ------------------------------------------------------------------------------
-# | Compression                                                                |
-# ------------------------------------------------------------------------------
-
-<IfModule mod_deflate.c>
-
-    # Force compression for mangled headers.
-    # http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping
-    <IfModule mod_setenvif.c>
-        <IfModule mod_headers.c>
-            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
-            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
-        </IfModule>
-    </IfModule>
-
-    # Compress all output labeled with one of the following MIME-types
-    # (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
-    #  and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines
-    #  as `AddOutputFilterByType` is still in the core directives).
-    <IfModule mod_filter.c>
-        AddOutputFilterByType DEFLATE application/atom+xml \
-                                      application/javascript \
-                                      application/json \
-                                      application/ld+json \
-                                      application/rss+xml \
-                                      application/vnd.ms-fontobject \
-                                      application/x-font-ttf \
-                                      application/x-web-app-manifest+json \
-                                      application/xhtml+xml \
-                                      application/xml \
-                                      font/opentype \
-                                      image/svg+xml \
-                                      image/x-icon \
-                                      text/css \
-                                      text/html \
-                                      text/plain \
-                                      text/x-component \
-                                      text/xml
-    </IfModule>
-
-</IfModule>
-
-# ------------------------------------------------------------------------------
-# | Content transformations                                                    |
-# ------------------------------------------------------------------------------
-
-# Prevent mobile network providers from modifying the website's content.
-# http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9.5.
-
-# <IfModule mod_headers.c>
-#    Header set Cache-Control "no-transform"
-# </IfModule>
-
-# ------------------------------------------------------------------------------
-# | ETags                                                                      |
-# ------------------------------------------------------------------------------
-
-# Remove `ETags` as resources are sent with far-future expires headers.
-# http://developer.yahoo.com/performance/rules.html#etags.
-
-# `FileETag None` doesn't work in all cases.
-<IfModule mod_headers.c>
-    Header unset ETag
-</IfModule>
-
-FileETag None
-
-# ------------------------------------------------------------------------------
-# | Expires headers                                                            |
-# ------------------------------------------------------------------------------
-
-# The following expires headers are set pretty far in the future. If you
-# don't control versioning with filename-based cache busting, consider
-# lowering the cache time for resources such as style sheets and JavaScript
-# files to something like one week.
-
-<IfModule mod_expires.c>
-
-    ExpiresActive on
-    ExpiresDefault                                      "access plus 1 month"
-
-  # CSS
-    ExpiresByType text/css                              "access plus 1 year"
-
-  # Data interchange
-    ExpiresByType application/json                      "access plus 0 seconds"
-    ExpiresByType application/ld+json                   "access plus 0 seconds"
-    ExpiresByType application/xml                       "access plus 0 seconds"
-    ExpiresByType text/xml                              "access plus 0 seconds"
-
-  # Favicon (cannot be renamed!) and cursor images
-    ExpiresByType image/x-icon                          "access plus 1 week"
-
-  # HTML components (HTCs)
-    ExpiresByType text/x-component                      "access plus 1 month"
-
-  # HTML
-    ExpiresByType text/html                             "access plus 0 seconds"
-
-  # JavaScript
-    ExpiresByType application/javascript                "access plus 1 year"
-
-  # Manifest files
-    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
-    ExpiresByType text/cache-manifest                   "access plus 0 seconds"
-
-  # Media
-    ExpiresByType audio/ogg                             "access plus 1 month"
-    ExpiresByType image/gif                             "access plus 1 month"
-    ExpiresByType image/jpeg                            "access plus 1 month"
-    ExpiresByType image/png                             "access plus 1 month"
-    ExpiresByType video/mp4                             "access plus 1 month"
-    ExpiresByType video/ogg                             "access plus 1 month"
-    ExpiresByType video/webm                            "access plus 1 month"
-
-  # Web feeds
-    ExpiresByType application/atom+xml                  "access plus 1 hour"
-    ExpiresByType application/rss+xml                   "access plus 1 hour"
-
-  # Web fonts
-    ExpiresByType application/font-woff                 "access plus 1 month"
-    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
-    ExpiresByType application/x-font-ttf                "access plus 1 month"
-    ExpiresByType font/opentype                         "access plus 1 month"
-    ExpiresByType image/svg+xml                         "access plus 1 month"
-
-</IfModule>
-
-# ------------------------------------------------------------------------------
-# | Filename-based cache busting                                               |
-# ------------------------------------------------------------------------------
-
-# If you're not using a build process to manage your filename version revving,
-# you might want to consider enabling the following directives to route all
-# requests such as `/css/style.12345.css` to `/css/style.css`.
-
-# To understand why this is important and a better idea than `*.css?v231`, read:
-# http://stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring
-
-# <IfModule mod_rewrite.c>
-#    RewriteCond %{REQUEST_FILENAME} !-f
-#    RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpe?g|gif)$ $1.$3 [L]
-# </IfModule>
-
-# ------------------------------------------------------------------------------
-# | File concatenation                                                         |
-# ------------------------------------------------------------------------------
-
-# Allow concatenation from within specific style sheets and JavaScript files.
-
-# e.g.:
-#
-#   If you have the following content in a file
-#
-#       <!--#include file="libs/jquery.js" -->
-#       <!--#include file="plugins/jquery.timer.js" -->
-#
-#   Apache will replace it with the content from the specified files.
-
-# <IfModule mod_include.c>
-#    <FilesMatch "\.combined\.js$">
-#        Options +Includes
-#        AddOutputFilterByType INCLUDES application/javascript application/json
-#        SetOutputFilter INCLUDES
-#    </FilesMatch>
-#    <FilesMatch "\.combined\.css$">
-#        Options +Includes
-#        AddOutputFilterByType INCLUDES text/css
-#        SetOutputFilter INCLUDES
-#    </FilesMatch>
-# </IfModule>

app/index.html

@@ -1,15 +1,14 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-    <head>
+  <head>
-        <meta charset="utf-8">
+    <meta charset="utf-8" />
-        <title>EDB-gjengen, Medieavdelingen, Chateau Neuf, Det Norske Studentersamfund</title>
+    <title>EDB-gjengen, Chateau Neuf, Det Norske Studentersamfund</title>
-        <meta name="description" content="">
+    <meta name="description" content="" />
-        <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="main.css" />
+  </head>
 
-        <link rel="stylesheet" href="main.css">
+  <body>
-
-    </head>
-    <body>
     <!--
                 Bli med i EDB! BLI NINJA!
                 https://edb.neuf.no/
@@ -39,71 +38,118 @@
           `......:::::::::;iof688888888888888888888888888888b.
             `....:::;iof688888888888888888888888888888888899fT!
     -->
-    <!--[if lt IE 11]>
+    <header>
-        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+      <h1 class="brand"><img src="images/edb_brick.png" class="edb-brick" alt="EDB-gjengen logo" /> EDB-gjengen</h1>
-    <![endif]-->
+      <a href="http://studentersamfundet.no/">Det Norske Studentersamfund</a>, Chateau Neuf, Oslo
-
+    </header>
-
+    <section>
-    <div class="container">
+      <h2>Kontakt</h2>
-        <header class="page-header">
+      <ul class="contact-info">
-            <h1 class="brand"><img src="images/edb_brick.png" class="edb-brick" alt="EDB-gjengen logo"> EDB-gjengen</h1>Medieavdelingen, <a href="http://studentersamfundet.no/">Det Norske Studentersamfund</a>, Chateau Neuf, Oslo
+        <li>E-post: <a href="mailto:edb@neuf.no">edb@neuf.no</a></li>
-        </header>
+        <li>
-        <section class="row">
+          M&oslash;tetid: Hver onsdag kl. 18.13.37 på EDB-kontoret (Chateau Neuf,
-            <div class="col-md-12">
+          <a href="https://viteboka.studentersamfundet.no/3._etasje">3. etg</a>)
-                <h3>Kontaktinfo</h3>
+        </li>
-                <ul class="contact-info">
+      </ul>
-                    <li><a href="mailto:kak-edb@studentersamfundet.no">kak-edb@studentersamfundet.no</a></li>
+    </section>
-                    <li>Leder: Jonas Braathen +47 454 80 454</li>
+    <section>
-                    <li>IRC: <a href="irc://irc.oftc.net/edb">#EDB@OFTC</a></li>
+      <h2>Medlemmer</h2>
-                    <li>M&oslash;tetid: Hver onsdag kl. 18.13.37 p&aring; KAK (<a href="https://viteboka.studentersamfundet.no/4._etasje">4. etg</a>)</li>
+      <table>
-                    <li>Twitter: <a href="http://twitter.com/edbgjengen">@edbgjengen</a> eller <a href="http://twitter.com/KAK_DNS">@KAK_DNS</a></li>
+        <thead>
-
+          <th>Navn</th>
-                </ul>
+          <th>Telefonnummer</th>
-            </div>
+          <th>Rolle</th>
-        </section>
+        </thead>
-        <section class="row cta">
+        <tbody>
-            <div class="col-md-12">
+          <tr>
-                <div class="form-link">
+            <td>Leander Furumo</td>
-                    <h3>Interressert i EDB?</h3>
+            <td><a href="tel:+4747879007">+47 478 79 007</a></td>
-                    <a href="#form" class="btn btn-primary btn-lg">Meld din interesse!</a>
+            <td>Leder</td>
-                </div>
+          </tr>
-            </div>
+          <tr>
-        </section>
+            <td>Jonas Braathen</td>
-        <section class="row">
+            <td><a href="tel:+4745480454">+47 454 80 454</a></td>
-            <div class="col-md-12">
+            <td>Medlem</td>
-                <h3>Verktøy</h3>
+          </tr>
-                <ul class="tool-list">
+          <tr>
-                    <li class="tool-item"><a href="https://edb.neuf.no/wiki/"><h4>EDBWiki</h4><img src="images/wiki.jpg" alt="EDBWiki" /></a></li>
+            <td>Adrian Helle</td>
-                    <li class="tool-item"><a href="https://mdb.neuf.no/"><h4>MDB</h4><img src="images/mdb.jpg" alt="MDB" /></a></li>
+            <td></td>
-                    <li class="tool-item"><a href="https://observium.neuf.no/"><h4>Observium</h4><img src="images/observium.jpg" alt="Observium" /></a></li>
+            <td>Medlem</td>
-                    <li class="tool-item"><a href="https://git.neuf.no/"><h4>Gitlab</h4><img src="images/gitlab.jpg" alt="Gitlab" /></a></li>
+          </tr>
-                    <li class="tool-item"><a href="https://galtinn.neuf.no/"><h4>Galtinn</h4><img src="images/galtinn.jpg" alt="Galtinn" /></a></li>
+          <tr>
-                    <li class="tool-item"><a href="https://aktiv.neuf.no/"><h4>aktiv.neuf.no</h4><img src="images/aktiv.neuf.no.jpg" alt="aktiv.neuf.no" /></a></li>
+            <td>Alve Elde</td>
-                </ul>
+            <td></td>
-            </div>
+            <td>Medlem</td>
-        </section>
+          </tr>
-        <section class="row" id="form">
+          <tr>
-            <div class="col-md-12">
+            <td>Paal Braathen</td>
-                <h3>Bli med</h3>
+            <td></td>
-                <div class="form-wrap"><iframe id="contact_form" src="https://docs.google.com/spreadsheet/embeddedform?formkey=dFZnWGE4NjFTemdvVFYxeWtXMGNKbGc6MQ" width="440" height="917">Loading...</iframe></div>
+            <td>Medlem</td>
-            </div>
+          </tr>
-        </section>
+          <tr>
-        <section class="row">
+            <td>Petter Sæterøy</td>
-            <div class="col-md-12">
+            <td></td>
-                <div class="credits">Laget med <span class="love" title="kærlighed">♥</span> av <span title="EDB-gjengen">EDB-gjengen</span></div>
+            <td>Medlem</td>
-            </div>
+          </tr>
-        </section>
+        </tbody>
-    </div>
+      </table>
-
+    </section>
-    <!-- Google Analytics -->
+    <section class="cta">
-    <script>
+      <div class="form-link">
-        (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
+        <h2>Interressert i EDB?</h2>
-        function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
+        <a href="#form" class="btn btn-primary btn-lg">Meld din interesse!</a>
-        e=o.createElement(i);r=o.getElementsByTagName(i)[0];
+      </div>
-        e.src='//www.google-analytics.com/analytics.js';
+    </section>
-        r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
+    <section>
-        ga('create','UA-52914-10');ga('send','pageview');
+      <h2>Verktøy</h2>
-    </script>
+      <ul class="tool-list">
-
+        <li>
-</body>
+          <a href="https://edb.neuf.no/wiki/">
+            <h3>EDBWiki</h3>
+            <img src="images/wiki.jpg" alt="EDBWiki" />
+          </a>
+        </li>
+        <li>
+          <a href="https://mdb.neuf.no/">
+            <h3>MDB</h3>
+            <img src="images/mdb.jpg" alt="MDB" />
+          </a>
+        </li>
+        <li>
+          <a href="https://observium.neuf.no/">
+            <h3>Observium</h3>
+            <img src="images/observium.jpg" alt="Observium" />
+          </a>
+        </li>
+        <li>
+          <a href="https://git.neuf.no/">
+            <h3>Gitea</h3>
+            <img src="images/gitea.jpg" alt="Gitea" />
+          </a>
+        </li>
+        <li>
+          <a href="https://galtinn.neuf.no/">
+            <h3>Galtinn</h3>
+            <img src="images/galtinn.jpg" alt="Galtinn" />
+          </a>
+        </li>
+      </ul>
+    </section>
+    <section id="form">
+      <h2>Bli med</h2>
+      <div class="form-wrap">
+        <iframe
+          id="contact-form"
+          src="https://docs.google.com/spreadsheet/embeddedform?formkey=dFZnWGE4NjFTemdvVFYxeWtXMGNKbGc6MQ"
+          width="440"
+          height="917"
+          >Loading...</iframe
+        >
+      </div>
+    </section>
+    <section class="credits">
+      Laget med <span class="love" title="kærlighed">♥</span> av
+      <span title="EDB-gjengen">EDB-gjengen</span>
+    </section>
+  </body>
 </html>

app/main.scss

@@ -1,119 +1,154 @@
-@import "../node_modules/bootstrap/scss/bootstrap.scss";
+:root {
+  --container-width: 1140px;
+  --primary-color: #007bff;
+  --primary-color-light: hsl(211deg 100% 60%);
+}
+
+// FIXME: use CSS props for media query breakpoints
+$small: 540px;
+$large: 992px;
 
 body {
-    text-align: center;
+  font-family: monospace;
-    @include media-breakpoint-up(sm) {
+  text-align: center;
-        text-align: left;
+  font-size: 110%;
-    }
+  margin: 1rem;
+
+  @media screen and (min-width: $small) {
+    text-align: left;
+  }
 }
 
-.page-header {
+h1,
-    margin-top: 1.5rem;
+h2,
-    margin-bottom: 1.5rem;
+h3,
+h4,
+h5 {
+  margin-bottom: 0.5em;
 }
 
-.brand {
+ul {
-    line-height: 1;
+  margin: 0;
-    img {
+}
-        position: relative;
+
-        top: -4px;
+li {
-    }
+  line-height: 1.5;
 }
 
 section {
-    margin-bottom: 1.5rem;
+  margin-bottom: 2rem;
 }
-.cta {
-    display: block;
 
-    @include media-breakpoint-up(sm) {
+a {
-        display:none;
+  &:link {
-    }
+    color: var(--primary-color);
+    text-decoration: none;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:active,
+  &:focus {
+    color: var(--primary-color-light);
+  }
+
+  &:visited {
+    color: var(--primary-color);
+  }
+}
+
+td,
+th {
+  padding-right: 1rem;
+}
+
+.brand {
+  line-height: 1;
+  font-size: 1.2;
+
+  img {
+    position: relative;
+    top: 8px;
+  }
+}
+
+.cta {
+  display: block;
+
+  @media screen and (min-width: $small) {
+    display: none;
+  }
 }
 
 .edb-brick {
-	height: 40px;
+  height: 40px;
-	width: auto;
+  width: auto;
 }
 
 .contact-info {
-    margin-bottom: 0;
+  margin-bottom: 0;
-    text-align: left;
+  text-align: left;
 }
 
 /* Tools */
 .tool-list {
-    list-style: none;
+  list-style: none;
-    display: flex;
+  display: flex;
-    flex-wrap: wrap;
+  flex-wrap: wrap;
-    padding: 0;
+  padding: 0;
-    justify-content: space-evenly;
+  max-width: var(--container-width);
 
-    @include media-breakpoint-up(sm) {
+  @media screen and (min-width: $small) {
-        justify-content: flex-start;
+    display: grid;
-    }
+    gap: 2rem;
+    grid-template-columns: repeat(2, 1fr);
+  }
 
-}
+  @media screen and (min-width: $large) {
+    grid-template-columns: repeat(3, 1fr);
+  }
 
-.tool-item {
+  > li {
-    display: flex;
     align-items: center;
     justify-content: center;
-	padding-bottom: 0;
+    padding-bottom: 0;
     margin-bottom: 20px;
-    max-width: 196px;
 
     img {
-        max-width: 92%;
+      max-width: 100%;
     }
-
+  }
-    @include media-breakpoint-up(sm) {
-        max-width: 230px;
-    }
-
-    @include media-breakpoint-up(lg) {
-        max-width: 310px;
-    }
-    @include media-breakpoint-up(xl) {
-        max-width: none;
-    }
-
 }
 
 .form-wrap {
-    position: relative;
+  position: relative;
-    padding-bottom: 75%;
+  padding-bottom: 75%;
-    height: 0;
+  height: 0;
-    overflow: hidden;
+  overflow: hidden;
-
+  max-width: var(--container-width);
-    iframe {
-        position: absolute;
-        top:0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
-}
-#contact_form {
-    border: 0;
-    margin: 0;
 }
 
-.browsehappy {
+#contact-form {
-    margin: 0.2em 0;
+  border: 0;
-    background: #ccc;
+  margin: 0;
-    color: #000;
+  position: absolute;
-    padding: 0.2em 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 .love {
-    color: #faafba;
+  color: #faafba;
 }
 
 .credits {
-    margin-top: 25px;
+  margin-top: 25px;
-    margin-bottom: 25px;
+  margin-bottom: 25px;
-    text-align: center;
+  text-align: center;
-    color: #666;
+  color: #666;
-    font-size: 12px;
+  font-size: 12px;
+  max-width: var(--container-width);
 }

bin/deploy

@@ -0,0 +1,11 @@
+#!/bin/bash
+set -eu
+
+PROJECT_PATH=/var/www/neuf.no/edb/edb-www
+
+echo "Deploying bbs to ${PROJECT_PATH}"
+cd "$PROJECT_PATH" || exit 1
+git pull
+
+npm install
+npm run build

fabfile.py

@@ -1,11 +0,0 @@
-from fabric.api import cd, env, run
-
-env.use_ssh_config = True
-env.hosts = ['dreamcast.neuf.no']
-env.project_path = '/var/www/neuf.no/edb/edb-www'
-env.user = 'gitdeploy'
-
-
-def deploy():
-    with cd(env.project_path):
-        run('git pull')

package.json

@@ -2,19 +2,22 @@
   "name": "edb-www",
   "version": "0.0.1",
   "private": true,
-  "dependencies": {
-    "bootstrap": "^4.3.1",
-    "jquery": "^3.2.1",
-    "popper.js": "^1.14.7"
-  },
   "scripts": {
     "build": "sass --no-source-map --style=compressed app/main.scss app/main.css",
+    "format": "prettier --write app",
+    "lint": "prettier --check app;",
+    "lint:styles": "stylelint app/main.scss",
     "watch": "sass --watch app/main.scss app/main.css"
   },
   "devDependencies": {
-    "sass": "^1.20.1"
+    "prettier": "2.5.1",
+    "sass": "^1.49.8",
+    "stylelint": "^14.5.1",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard-scss": "^3.0.0"
   },
   "engines": {
-    "node": ">=10"
+    "node": ">=16",
+    "npm": ">=8"
   }
 }