refactor: preconnect Google Fonts, use webp for images

Dockerfile

@@ -0,0 +1,11 @@
+FROM php:7.4.33-apache
+
+COPY . /website
+
+ENV APACHE_DOCUMENT_ROOT /website/home/public
+RUN sed -ri -e 's!/var/www/html!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/sites-available/*.conf
+RUN sed -ri -e 's!/var/www/!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/apache2.conf /etc/apache2/conf-available/*.conf
+
+RUN a2enmod rewrite
+
+WORKDIR /website

README.md

@@ -3,6 +3,24 @@ This is the MAGLab website source code and a work in progress.
 
 Also, the readme is a work in progress.
 
+## Development Setup
+
+Prerequisites
+* Docker
+
+```bash
+docker build -t maglaboratory/website .
+docker run -p 8000:80 -v $(pwd):/website --name website --rm maglaboratory/website
+```
+
+Visit the home page at http://localhost:8000
+
+To rebuild the site, run
+
+```bash
+docker exec website php -f src/compile.php
+```
+
 ## TODO
 * Write Deployment Instructions
 

home/protected/maglab/app/views/board/add.php

@@ -14,7 +14,9 @@
 <link href="/css/bootstrap-5a0f735.css" rel="stylesheet">
 <link href="/css/bootstrap-theme-ae00592.css" rel="stylesheet">
 <link href="/css/maglab.css" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css?family=Eczar:600|Raleway:400,400i|Bree+Serif" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link <?php echo MtHaml\Runtime::renderAttributes(array(array('rel', 'preconnect'), array('href', 'https://fonts.gstatic.com'), array('crossorigin', TRUE)), 'html5', 'UTF-8'); ?>>
+<link href="https://fonts.googleapis.com/css2?family=Eczar:600|Raleway:400,400i|Bree+Serif&amp;display=swap" rel="stylesheet">
 <!--[if IE]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
@@ -40,7 +42,7 @@
 <div class="row">
 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
 <a href="/">
-<image <?php echo MtHaml\Runtime::renderAttributes(array(array('id', 'logo'), array('src', '/images/logo.png'), array('title', ('MAGLab Logo'))), 'html5', 'UTF-8'); ?>></image>
+<image <?php echo MtHaml\Runtime::renderAttributes(array(array('id', 'logo'), array('src', '/images/logo.webp'), array('title', ('MAGLab Logo'))), 'html5', 'UTF-8'); ?>></image>
 </a>
 <address>
 <a <?php echo MtHaml\Runtime::renderAttributes(array(array('href', ('https://www.google.com/maps/place/MAG+Laboratory/@34.0384934,-117.8235897,17z/data=!4m8!1m2!3m1!2sMAG+Laboratory!3m4!1s0x0:0x56f9a6e0034a854!8m2!3d34.038489!4d-117.8214008')), array('target', ('_blank'))), 'html5', 'UTF-8'); ?>>
@@ -168,7 +170,7 @@
 <h4 class="modal-title">Big Valley Industrial Park sign</h4>
 </div>
 <div class="modal-body">
-<img <?php echo MtHaml\Runtime::renderAttributes(array(array('src', ('/images/entrance-sign.png')), array('alt', 'Big Valley Industrial Park sign'), array('style', 'width:100%;height:auto;')), 'html5', 'UTF-8'); ?>>
+<img <?php echo MtHaml\Runtime::renderAttributes(array(array('src', ('/images/entrance-sign.webp')), array('alt', 'Big Valley Industrial Park sign'), array('style', 'width:100%;height:auto;')), 'html5', 'UTF-8'); ?>>
 <p>This is the middle entrance. If you take this entrance, go all the way down, and then take a slight right until you see a triangular parking island with some palm trees. The space is right across from where parking island starts.</p>
 </div>
 <div class="modal-footer">
@@ -187,7 +189,7 @@
 <h4 class="modal-title">Big Valley Industrial Entrance with Flags</h4>
 </div>
 <div class="modal-body">
-<img src="/images/entrance-flags.png" alt="Big Valley Industrial Entrance flags" style="width:100%;height:auto;">
+<img src="/images/entrance-flags.webp" alt="Big Valley Industrial Entrance flags" style="width:100%;height:auto;">
 <p>This is the only entrance where you can turn left to get in. So if you're heading south (I-10 behind you), then turn into here. You'll see the triangular parking island with palm trees. We're right across from where the long point of the island stops.</p>
 </div>
 <div class="modal-footer">

home/protected/maglab/app/views/board/edit.php

@@ -14,7 +14,9 @@
 <link href="/css/bootstrap-5a0f735.css" rel="stylesheet">
 <link href="/css/bootstrap-theme-ae00592.css" rel="stylesheet">
 <link href="/css/maglab.css" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css?family=Eczar:600|Raleway:400,400i|Bree+Serif" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link <?php echo MtHaml\Runtime::renderAttributes(array(array('rel', 'preconnect'), array('href', 'https://fonts.gstatic.com'), array('crossorigin', TRUE)), 'html5', 'UTF-8'); ?>>
+<link href="https://fonts.googleapis.com/css2?family=Eczar:600|Raleway:400,400i|Bree+Serif&amp;display=swap" rel="stylesheet">
 <!--[if IE]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
@@ -40,7 +42,7 @@
 <div class="row">
 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
 <a href="/">
-<image <?php echo MtHaml\Runtime::renderAttributes(array(array('id', 'logo'), array('src', '/images/logo.png'), array('title', ('MAGLab Logo'))), 'html5', 'UTF-8'); ?>></image>
+<image <?php echo MtHaml\Runtime::renderAttributes(array(array('id', 'logo'), array('src', '/images/logo.webp'), array('title', ('MAGLab Logo'))), 'html5', 'UTF-8'); ?>></image>
 </a>
 <address>
 <a <?php echo MtHaml\Runtime::renderAttributes(array(array('href', ('https://www.google.com/maps/place/MAG+Laboratory/@34.0384934,-117.8235897,17z/data=!4m8!1m2!3m1!2sMAG+Laboratory!3m4!1s0x0:0x56f9a6e0034a854!8m2!3d34.038489!4d-117.8214008')), array('target', ('_blank'))), 'html5', 'UTF-8'); ?>>
@@ -164,7 +166,7 @@
 <h4 class="modal-title">Big Valley Industrial Park sign</h4>
 </div>
 <div class="modal-body">
-<img <?php echo MtHaml\Runtime::renderAttributes(array(array('src', ('/images/entrance-sign.png')), array('alt', 'Big Valley Industrial Park sign'), array('style', 'width:100%;height:auto;')), 'html5', 'UTF-8'); ?>>
+<img <?php echo MtHaml\Runtime::renderAttributes(array(array('src', ('/images/entrance-sign.webp')), array('alt', 'Big Valley Industrial Park sign'), array('style', 'width:100%;height:auto;')), 'html5', 'UTF-8'); ?>>
 <p>This is the middle entrance. If you take this entrance, go all the way down, and then take a slight right until you see a triangular parking island with some palm trees. The space is right across from where parking island starts.</p>
 </div>
 <div class="modal-footer">
@@ -183,7 +185,7 @@
 <h4 class="modal-title">Big Valley Industrial Entrance with Flags</h4>
 </div>
 <div class="modal-body">
-<img src="/images/entrance-flags.png" alt="Big Valley Industrial Entrance flags" style="width:100%;height:auto;">
+<img src="/images/entrance-flags.webp" alt="Big Valley Industrial Entrance flags" style="width:100%;height:auto;">
 <p>This is the only entrance where you can turn left to get in. So if you're heading south (I-10 behind you), then turn into here. You'll see the triangular parking island with palm trees. We're right across from where the long point of the island stops.</p>
 </div>
 <div class="modal-footer">

home/protected/maglab/app/views/board/index.php

@@ -14,7 +14,9 @@
 <link href="/css/bootstrap-5a0f735.css" rel="stylesheet">
 <link href="/css/bootstrap-theme-ae00592.css" rel="stylesheet">
 <link href="/css/maglab.css" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css?family=Eczar:600|Raleway:400,400i|Bree+Serif" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link <?php echo MtHaml\Runtime::renderAttributes(array(array('rel', 'preconnect'), array('href', 'https://fonts.gstatic.com'), array('crossorigin', TRUE)), 'html5', 'UTF-8'); ?>>
+<link href="https://fonts.googleapis.com/css2?family=Eczar:600|Raleway:400,400i|Bree+Serif&amp;display=swap" rel="stylesheet">
 <!--[if IE]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
@@ -40,7 +42,7 @@
 <div class="row">
 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
 <a href="/">
-<image <?php echo MtHaml\Runtime::renderAttributes(array(array('id', 'logo'), array('src', '/images/logo.png'), array('title', ('MAGLab Logo'))), 'html5', 'UTF-8'); ?>></image>
+<image <?php echo MtHaml\Runtime::renderAttributes(array(array('id', 'logo'), array('src', '/images/logo.webp'), array('title', ('MAGLab Logo'))), 'html5', 'UTF-8'); ?>></image>
 </a>
 <address>
 <a <?php echo MtHaml\Runtime::renderAttributes(array(array('href', ('https://www.google.com/maps/place/MAG+Laboratory/@34.0384934,-117.8235897,17z/data=!4m8!1m2!3m1!2sMAG+Laboratory!3m4!1s0x0:0x56f9a6e0034a854!8m2!3d34.038489!4d-117.8214008')), array('target', ('_blank'))), 'html5', 'UTF-8'); ?>>
@@ -212,7 +214,7 @@
 <h4 class="modal-title">Big Valley Industrial Park sign</h4>
 </div>
 <div class="modal-body">
-<img <?php echo MtHaml\Runtime::renderAttributes(array(array('src', ('/images/entrance-sign.png')), array('alt', 'Big Valley Industrial Park sign'), array('style', 'width:100%;height:auto;')), 'html5', 'UTF-8'); ?>>
+<img <?php echo MtHaml\Runtime::renderAttributes(array(array('src', ('/images/entrance-sign.webp')), array('alt', 'Big Valley Industrial Park sign'), array('style', 'width:100%;height:auto;')), 'html5', 'UTF-8'); ?>>
 <p>This is the middle entrance. If you take this entrance, go all the way down, and then take a slight right until you see a triangular parking island with some palm trees. The space is right across from where parking island starts.</p>
 </div>
 <div class="modal-footer">
@@ -231,7 +233,7 @@
 <h4 class="modal-title">Big Valley Industrial Entrance with Flags</h4>
 </div>
 <div class="modal-body">
-<img src="/images/entrance-flags.png" alt="Big Valley Industrial Entrance flags" style="width:100%;height:auto;">
+<img src="/images/entrance-flags.webp" alt="Big Valley Industrial Entrance flags" style="width:100%;height:auto;">
 <p>This is the only entrance where you can turn left to get in. So if you're heading south (I-10 behind you), then turn into here. You'll see the triangular parking island with palm trees. We're right across from where the long point of the island stops.</p>
 </div>
 <div class="modal-footer">

home/protected/maglab/app/views/board/noEdit.php

@@ -14,7 +14,9 @@
 <link href="/css/bootstrap-5a0f735.css" rel="stylesheet">
 <link href="/css/bootstrap-theme-ae00592.css" rel="stylesheet">
 <link href="/css/maglab.css" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css?family=Eczar:600|Raleway:400,400i|Bree+Serif" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link <?php echo MtHaml\Runtime::renderAttributes(array(array('rel', 'preconnect'), array('href', 'https://fonts.gstatic.com'), array('crossorigin', TRUE)), 'html5', 'UTF-8'); ?>>
+<link href="https://fonts.googleapis.com/css2?family=Eczar:600|Raleway:400,400i|Bree+Serif&amp;display=swap" rel="stylesheet">
 <!--[if IE]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
@@ -40,7 +42,7 @@
 <div class="row">
 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
 <a href="/">
-<image <?php echo MtHaml\Runtime::renderAttributes(array(array('id', 'logo'), array('src', '/images/logo.png'), array('title', ('MAGLab Logo'))), 'html5', 'UTF-8'); ?>></image>
+<image <?php echo MtHaml\Runtime::renderAttributes(array(array('id', 'logo'), array('src', '/images/logo.webp'), array('title', ('MAGLab Logo'))), 'html5', 'UTF-8'); ?>></image>
 </a>
 <address>
 <a <?php echo MtHaml\Runtime::renderAttributes(array(array('href', ('https://www.google.com/maps/place/MAG+Laboratory/@34.0384934,-117.8235897,17z/data=!4m8!1m2!3m1!2sMAG+Laboratory!3m4!1s0x0:0x56f9a6e0034a854!8m2!3d34.038489!4d-117.8214008')), array('target', ('_blank'))), 'html5', 'UTF-8'); ?>>
@@ -166,7 +168,7 @@
 <h4 class="modal-title">Big Valley Industrial Park sign</h4>
 </div>
 <div class="modal-body">
-<img <?php echo MtHaml\Runtime::renderAttributes(array(array('src', ('/images/entrance-sign.png')), array('alt', 'Big Valley Industrial Park sign'), array('style', 'width:100%;height:auto;')), 'html5', 'UTF-8'); ?>>
+<img <?php echo MtHaml\Runtime::renderAttributes(array(array('src', ('/images/entrance-sign.webp')), array('alt', 'Big Valley Industrial Park sign'), array('style', 'width:100%;height:auto;')), 'html5', 'UTF-8'); ?>>
 <p>This is the middle entrance. If you take this entrance, go all the way down, and then take a slight right until you see a triangular parking island with some palm trees. The space is right across from where parking island starts.</p>
 </div>
 <div class="modal-footer">
@@ -185,7 +187,7 @@
 <h4 class="modal-title">Big Valley Industrial Entrance with Flags</h4>
 </div>
 <div class="modal-body">
-<img src="/images/entrance-flags.png" alt="Big Valley Industrial Entrance flags" style="width:100%;height:auto;">
+<img src="/images/entrance-flags.webp" alt="Big Valley Industrial Entrance flags" style="width:100%;height:auto;">
 <p>This is the only entrance where you can turn left to get in. So if you're heading south (I-10 behind you), then turn into here. You'll see the triangular parking island with palm trees. We're right across from where the long point of the island stops.</p>
 </div>
 <div class="modal-footer">

home/protected/maglab/app/views/board/show.php

@@ -14,7 +14,9 @@
 <link href="/css/bootstrap-5a0f735.css" rel="stylesheet">
 <link href="/css/bootstrap-theme-ae00592.css" rel="stylesheet">
 <link href="/css/maglab.css" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css?family=Eczar:600|Raleway:400,400i|Bree+Serif" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link <?php echo MtHaml\Runtime::renderAttributes(array(array('rel', 'preconnect'), array('href', 'https://fonts.gstatic.com'), array('crossorigin', TRUE)), 'html5', 'UTF-8'); ?>>
+<link href="https://fonts.googleapis.com/css2?family=Eczar:600|Raleway:400,400i|Bree+Serif&amp;display=swap" rel="stylesheet">
 <!--[if IE]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
@@ -40,7 +42,7 @@
 <div class="row">
 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
 <a href="/">
-<image <?php echo MtHaml\Runtime::renderAttributes(array(array('id', 'logo'), array('src', '/images/logo.png'), array('title', ('MAGLab Logo'))), 'html5', 'UTF-8'); ?>></image>
+<image <?php echo MtHaml\Runtime::renderAttributes(array(array('id', 'logo'), array('src', '/images/logo.webp'), array('title', ('MAGLab Logo'))), 'html5', 'UTF-8'); ?>></image>
 </a>
 <address>
 <a <?php echo MtHaml\Runtime::renderAttributes(array(array('href', ('https://www.google.com/maps/place/MAG+Laboratory/@34.0384934,-117.8235897,17z/data=!4m8!1m2!3m1!2sMAG+Laboratory!3m4!1s0x0:0x56f9a6e0034a854!8m2!3d34.038489!4d-117.8214008')), array('target', ('_blank'))), 'html5', 'UTF-8'); ?>>
@@ -190,7 +192,7 @@
 <h4 class="modal-title">Big Valley Industrial Park sign</h4>
 </div>
 <div class="modal-body">
-<img <?php echo MtHaml\Runtime::renderAttributes(array(array('src', ('/images/entrance-sign.png')), array('alt', 'Big Valley Industrial Park sign'), array('style', 'width:100%;height:auto;')), 'html5', 'UTF-8'); ?>>
+<img <?php echo MtHaml\Runtime::renderAttributes(array(array('src', ('/images/entrance-sign.webp')), array('alt', 'Big Valley Industrial Park sign'), array('style', 'width:100%;height:auto;')), 'html5', 'UTF-8'); ?>>
 <p>This is the middle entrance. If you take this entrance, go all the way down, and then take a slight right until you see a triangular parking island with some palm trees. The space is right across from where parking island starts.</p>
 </div>
 <div class="modal-footer">
@@ -209,7 +211,7 @@
 <h4 class="modal-title">Big Valley Industrial Entrance with Flags</h4>
 </div>
 <div class="modal-body">
-<img src="/images/entrance-flags.png" alt="Big Valley Industrial Entrance flags" style="width:100%;height:auto;">
+<img src="/images/entrance-flags.webp" alt="Big Valley Industrial Entrance flags" style="width:100%;height:auto;">
 <p>This is the only entrance where you can turn left to get in. So if you're heading south (I-10 behind you), then turn into here. You'll see the triangular parking island with palm trees. We're right across from where the long point of the island stops.</p>
 </div>
 <div class="modal-footer">

home/protected/maglab/app/views/emails/job_board.php

@@ -15,7 +15,7 @@
 <?php if($email_logo) { ?>
 <tr>
 <td>
-<img <?php echo MtHaml\Runtime::renderAttributes(array(array('src', ('http://www.maglaboratory.org/images/email-logo.png')), array('alt', ('MAG Laboratory Logo'))), 'html5', 'UTF-8'); ?>>
+<img <?php echo MtHaml\Runtime::renderAttributes(array(array('src', ('http://www.maglaboratory.org/images/email-logo.webp')), array('alt', ('MAG Laboratory Logo'))), 'html5', 'UTF-8'); ?>>
 </td>
 </tr>
 <?php } ?>

home/protected/maglab/app/views/hal/chart.php

@@ -14,7 +14,9 @@
 <link href="/css/bootstrap-5a0f735.css" rel="stylesheet">
 <link href="/css/bootstrap-theme-ae00592.css" rel="stylesheet">
 <link href="/css/maglab.css" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css?family=Eczar:600|Raleway:400,400i|Bree+Serif" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link <?php echo MtHaml\Runtime::renderAttributes(array(array('rel', 'preconnect'), array('href', 'https://fonts.gstatic.com'), array('crossorigin', TRUE)), 'html5', 'UTF-8'); ?>>
+<link href="https://fonts.googleapis.com/css2?family=Eczar:600|Raleway:400,400i|Bree+Serif&amp;display=swap" rel="stylesheet">
 <!--[if IE]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
@@ -43,7 +45,7 @@
 <div class="row">
 <div class="col-xs-12 col-sm-6 col-sm-offset-3">
 <a href="/">
-<image <?php echo MtHaml\Runtime::renderAttributes(array(array('id', 'logo'), array('src', '/images/logo.png'), array('title', ('MAGLab Logo'))), 'html5', 'UTF-8'); ?>></image>
+<image <?php echo MtHaml\Runtime::renderAttributes(array(array('id', 'logo'), array('src', '/images/logo.webp'), array('title', ('MAGLab Logo'))), 'html5', 'UTF-8'); ?>></image>
 </a>
 <address>
 <a <?php echo MtHaml\Runtime::renderAttributes(array(array('href', ('https://www.google.com/maps/place/MAG+Laboratory/@34.0384934,-117.8235897,17z/data=!4m8!1m2!3m1!2sMAG+Laboratory!3m4!1s0x0:0x56f9a6e0034a854!8m2!3d34.038489!4d-117.8214008')), array('target', ('_blank'))), 'html5', 'UTF-8'); ?>>
@@ -190,7 +192,7 @@ function drawChart(){
 <h4 class="modal-title">Big Valley Industrial Park sign</h4>
 </div>
 <div class="modal-body">
-<img <?php echo MtHaml\Runtime::renderAttributes(array(array('src', ('/images/entrance-sign.png')), array('alt', 'Big Valley Industrial Park sign'), array('style', 'width:100%;height:auto;')), 'html5', 'UTF-8'); ?>>
+<img <?php echo MtHaml\Runtime::renderAttributes(array(array('src', ('/images/entrance-sign.webp')), array('alt', 'Big Valley Industrial Park sign'), array('style', 'width:100%;height:auto;')), 'html5', 'UTF-8'); ?>>
 <p>This is the middle entrance. If you take this entrance, go all the way down, and then take a slight right until you see a triangular parking island with some palm trees. The space is right across from where parking island starts.</p>
 </div>
 <div class="modal-footer">
@@ -209,7 +211,7 @@ function drawChart(){
 <h4 class="modal-title">Big Valley Industrial Entrance with Flags</h4>
 </div>
 <div class="modal-body">
-<img src="/images/entrance-flags.png" alt="Big Valley Industrial Entrance flags" style="width:100%;height:auto;">
+<img src="/images/entrance-flags.webp" alt="Big Valley Industrial Entrance flags" style="width:100%;height:auto;">
 <p>This is the only entrance where you can turn left to get in. So if you're heading south (I-10 behind you), then turn into here. You'll see the triangular parking island with palm trees. We're right across from where the long point of the island stops.</p>
 </div>
 <div class="modal-footer">