Merged in bugfix/MAPG-180-unify-inline-js (pull request #161)

MAPG-180 don't parse REVISION in view linking time

cache/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

docker/Dockerfile

@@ -21,7 +21,7 @@ RUN ./install-composer.sh
 # Install Node.js and required packages
 RUN curl -sL https://deb.nodesource.com/setup_14.x | bash -
 RUN apt install -y nodejs
-RUN npm install -g uglify-js clean-css-cli svgo
+RUN npm install -g uglify-js clean-css-cli svgo yarn
 
 EXPOSE 80
 VOLUME /var/www/mapguesser

mapg

@@ -7,5 +7,6 @@ $app = new Symfony\Component\Console\Application('MapGuesser Console', '');
 
 $app->add(new MapGuesser\Cli\DatabaseMigration());
 $app->add(new MapGuesser\Cli\AddUserCommand());
+$app->add(new MapGuesser\Cli\LinkViewCommand());
 
 $app->run();

public/index.php

@@ -47,5 +47,6 @@ if ($match !== null) {
     }
 }
 
+$content = new MapGuesser\Response\HtmlContent('error/404');
 header('Content-Type: text/html; charset=UTF-8', true, 404);
-require ROOT . '/views/error/404.php';
+echo $content->render();

public/static/css/mapguesser.css

@@ -17,6 +17,11 @@ button::-moz-focus-inner, input::-moz-focus-inner {
     border: 0;
 }
 
+/* to be compatible with browsers that don't know <main> */
+main {
+    display: block;
+}
+
 ::selection {
     background-color: #28a745;
     color: #ffffff;
@@ -324,10 +329,11 @@ main {
     padding: 6px 12px;
 }
 
-div.full {
+main.full {
     position: relative;
     width: 100%;
     height: calc(100% - 40px);
+    padding: 0;
 }
 
 footer {

scripts/install.sh

@@ -21,6 +21,9 @@ echo "Migrating DB..."
 if [ -z "${DEV}" ] || [ "${DEV}" -eq "0" ]; then
     echo "Minifying JS, CSS and SVG files..."
     ${ROOT_DIR}/scripts/minify.sh
+
+    echo "Linking view files..."
+    (cd ${ROOT_DIR} && ./mapg view:link)
 fi
 
 touch ${ROOT_DIR}/installed

scripts/update.sh

@@ -5,7 +5,11 @@ ROOT_DIR=$(dirname $(readlink -f "$0"))/..
 . ${ROOT_DIR}/.env
 
 echo "Installing Composer packages..."
-(cd ${ROOT_DIR} && composer install --no-dev)
+if [ -z "${DEV}" ] || [ "${DEV}" -eq "0" ]; then
+    (cd ${ROOT_DIR} && composer install --no-dev)
+else
+    (cd ${ROOT_DIR} && composer install --dev)
+fi
 
 echo "Installing Yarn packages..."
 (cd ${ROOT_DIR}/public/static && yarn install)
@@ -16,4 +20,7 @@ echo "Migrating DB..."
 if [ -z "${DEV}" ] || [ "${DEV}" -eq "0" ]; then
     echo "Minifying JS, CSS and SVG files..."
     ${ROOT_DIR}/scripts/minify.sh
+
+    echo "Linking view files..."
+    (cd ${ROOT_DIR} && ./mapg view:link)
 fi

src/Cli/LinkViewCommand.php

@@ -0,0 +1,69 @@
+<?php namespace MapGuesser\Cli;
+
+use FilesystemIterator;
+use MapGuesser\View\Linker;
+use RecursiveDirectoryIterator;
+use RecursiveIteratorIterator;
+use Symfony\Component\Console\Command\Command;
+use Symfony\Component\Console\Input\InputArgument;
+use Symfony\Component\Console\Input\InputInterface;
+use Symfony\Component\Console\Output\OutputInterface;
+
+class LinkViewCommand extends Command
+{
+    public function configure()
+    {
+        $this->setName('view:link')
+            ->setDescription('Linking of views.')
+            ->addArgument('view', InputArgument::OPTIONAL, 'View file to be linked.');
+    }
+
+    public function execute(InputInterface $input, OutputInterface $output): int
+    {
+        $views = [];
+
+        $view = $input->getArgument('view');
+
+        if ($view !== null) {
+            $views[] = $view;
+        } else {
+            $folder = ROOT . '/views';
+            $folderLength = strlen($folder) + 1;
+
+            $iterator = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($folder, FilesystemIterator::SKIP_DOTS), RecursiveIteratorIterator::SELF_FIRST);
+
+            foreach ($iterator as $file) {
+                if ($file->isDir() || $file->getExtension() !== 'php') {
+                    continue;
+                }
+
+                $view = substr($file->getPath(), $folderLength) . '/' . $file->getBasename('.php');
+
+                if (strpos($view, 'templates') === 0) {
+                    continue;
+                }
+
+                $views[] = $view;
+            }
+        }
+
+        try {
+            foreach ($views as $view) {
+                $generator = new Linker($view);
+                $generator->generate();
+            }
+        } catch (\Exception $e) {
+            $output->writeln('<error>Linking view(s) failed!</error>');
+            $output->writeln('');
+
+            $output->writeln((string) $e);
+            $output->writeln('');
+
+            return 1;
+        }
+
+        $output->writeln('<info>View(s) successfully linked!</info>');
+
+        return 0;
+    }
+}

src/Interfaces/Response/IContent.php

@@ -4,7 +4,7 @@ interface IContent
 {
     public function &getData(): array;
 
-    public function &render(): string;
+    public function render(): void;
 
     public function getContentType(): string;
 }

src/Response/ContentBase.php

@@ -11,7 +11,7 @@ abstract class ContentBase implements IContent
         return $this->data;
     }
 
-    abstract public function &render(): string;
+    abstract public function render(): void;
 
     abstract public function getContentType(): string;
 }

src/Response/HtmlContent.php

@@ -1,27 +1,29 @@
 <?php namespace MapGuesser\Response;
 
+use MapGuesser\View\Linker;
+
 class HtmlContent extends ContentBase
 {
-    private string $template;
+    private string $view;
 
-    public function __construct(string $template, array &$data = [])
+    public function __construct(string $view, array &$data = [])
     {
-        $this->template = $template;
+        $this->view = $view;
         $this->data = &$data;
     }
 
-    public function &render(): string
+    public function render(): void
     {
+        if (!empty($_ENV['DEV'])) {
+            $generator = new Linker($this->view);
+            $generator->generate();
+        }
+
         extract($this->data);
 
-        ob_start();
-        require ROOT . '/views/' . $this->template . '.php';
-        $content = ob_get_contents();
-        ob_end_clean();
+        require ROOT . '/cache/views/' . $this->view . '.php';
 
-        $content .= '<!-- __debug__runtime: ' . round((hrtime(true) - SCRIPT_STARTED) / 1e+6, 1) . ' -->';
-
-        return $content;
+        echo '<!-- __debug__runtime: ' . round((hrtime(true) - SCRIPT_STARTED) / 1e+6, 1) . ' -->';
     }
 
     public function getContentType(): string

src/Response/JsonContent.php

@@ -7,13 +7,11 @@ class JsonContent extends ContentBase
         $this->data = &$data;
     }
 
-    public function &render(): string
+    public function render(): void
     {
         $this->data['__debug__runtime'] = round((hrtime(true) - SCRIPT_STARTED) / 1e+6, 1);
 
-        $content = json_encode($this->data);
-
-        return $content;
+        echo json_encode($this->data);
     }
 
     public function getContentType(): string

src/View/Linker.php

@@ -0,0 +1,155 @@
+<?php namespace MapGuesser\View;
+
+class Linker
+{
+    const INLINE_ASSET_LIMIT = 2000;
+
+    private string $view;
+
+    public function __construct(string $view)
+    {
+        $this->view = $view;
+    }
+
+    public function generate(): void
+    {
+        $input = ROOT . '/views/' . $this->view . '.php';
+
+        $temporaryFiles = [];
+        $sections = ['externalCss' => '', 'inlineCss' => '', 'externalJs' => '', 'inlineJs' => ''];
+        $extra = ['', ''];
+
+        do {
+            $parser = new Parser($input);
+            $fragment = $parser->parse();
+
+            $extends = $fragment->getExtends();
+
+            $this->generateAssets($fragment, $sections);
+
+            $sections = array_merge($sections, $fragment->getSections()); //TODO: detect if section defined multiple times
+            $extra[0] = $fragment->getExtra()[0] . $extra[0];
+            $extra[1] = $extra[1] . $fragment->getExtra()[1];
+
+            if ($extends === null) {
+                $this->writeFinal($extra, $input, ROOT . '/cache/views/' . $this->view . '.php');
+                break;
+            }
+
+            $tmpFile = tempnam(sys_get_temp_dir(), 'mapg-view-');
+            $temporaryFiles[] = $tmpFile;
+
+            $this->extendTemplate($sections, ROOT . '/views/' . $extends . '.php', $tmpFile);
+
+            $input = $tmpFile;
+        } while (true);
+
+        foreach ($temporaryFiles as $tmpFile) {
+            unlink($tmpFile);
+        }
+    }
+
+    private function extendTemplate(array $sections, string $file, string $output): void
+    {
+        $inputFileHandle = fopen($file, 'r');
+        if (!$inputFileHandle) {
+            throw new \Exception('Cannot open file ' . $file);
+        }
+
+        $outputFileHandle = fopen($output, 'w');
+        if (!$outputFileHandle) {
+            throw new \Exception('Cannot open file ' . $output . 'for writing.');
+        }
+
+        $lineNumber = 0;
+        while (($line = fgets($inputFileHandle)) !== false) {
+            ++$lineNumber;
+
+            if (preg_match('/^\s*@yields\(\'([\w\/]+)\'\)\s*$/', $line, $matches)) {
+                if (isset($sections[$matches[1]])) {
+                    fwrite($outputFileHandle, $sections[$matches[1]]);
+                }
+            } else {
+                fwrite($outputFileHandle, $line);
+            }
+        }
+
+        fclose($inputFileHandle);
+        fclose($outputFileHandle);
+    }
+
+    private function writeFinal(array $extra, string $file, string $output): void
+    {
+        $dirname = pathinfo($output, PATHINFO_DIRNAME);
+        if (!is_dir($dirname)) {
+            mkdir($dirname, 0755, true);
+        }
+
+        $inputFileHandle = fopen($file, 'r');
+        if (!$inputFileHandle) {
+            throw new \Exception('Cannot open file ' . $file);
+        }
+
+        $outputFileHandle = fopen($output, 'w');
+        if (!$outputFileHandle) {
+            throw new \Exception('Cannot open file ' . $output . 'for writing.');
+        }
+
+        fwrite($outputFileHandle, $extra[0]);
+        while (($line = fgets($inputFileHandle)) !== false) {
+            fwrite($outputFileHandle, $line);
+        }
+        fwrite($outputFileHandle, $extra[1]);
+
+        fclose($inputFileHandle);
+        fclose($outputFileHandle);
+    }
+
+    private function generateAssets(ParsedFragment $fragment, array &$sections)
+    {
+        foreach ($fragment->getCss() as $cssFile) {
+            $asset = $this->parseAsset($cssFile, 'css');
+            if (isset($asset['code'])) {
+                $sections['inlineCss'] .= '<style>' . PHP_EOL;
+                $sections['inlineCss'] .= $asset['code'];
+                $sections['inlineCss'] .= '</style>' . PHP_EOL;
+            } elseif (isset($asset['file'])) {
+                $sections['externalCss'] .= '<link href="' . $asset['file'] . '" rel="stylesheet">' . PHP_EOL;
+            }
+        }
+
+        foreach ($fragment->getJs() as $jsFile) {
+            $asset = $this->parseAsset($jsFile, 'js');
+            if (isset($asset['code'])) {
+                $sections['inlineJs'] .= '<script>' . PHP_EOL;
+                $sections['inlineJs'] .= $asset['code'];
+                $sections['inlineJs'] .= '</script>' . PHP_EOL;
+            } elseif (isset($asset['file'])) {
+                $sections['externalJs'] .= '<script src="' . $asset['file'] . '"></script>' . PHP_EOL;
+            }
+        }
+    }
+
+    private function parseAsset(string $asset, string $type): array
+    {
+        $output = [];
+
+        eval('$asset = ' . $asset . ';');
+
+        if (
+            empty($_ENV['DEV']) &&
+            preg_match('/^' . $type . '\/.*/', $asset) &&
+            filesize(ROOT . '/public/static/' . $asset) < self::INLINE_ASSET_LIMIT
+        ) {
+            $output['code'] = file_get_contents(ROOT . '/public/static/' . $asset);
+        } else {
+            if (!preg_match('/^http(s)?/', $asset)) {
+                $output['file'] = $_ENV['STATIC_ROOT'] .  '/' . $asset . '?rev=<?= REVISION ?>';
+            } else {
+                $output['file'] = $asset;
+            }
+        }
+
+        return $output;
+    }
+}

src/View/ParsedFragment.php

@@ -0,0 +1,48 @@
+<?php namespace MapGuesser\View;
+
+class ParsedFragment
+{
+    private ?string $extends;
+
+    private array $css;
+
+    private array $js;
+
+    private array $sections;
+
+    private array $extra;
+
+    public function __construct(?string $extends, array $css, array $js, array $sections, array $extra)
+    {
+        $this->extends = $extends;
+        $this->css = $css;
+        $this->js = $js;
+        $this->sections = $sections;
+        $this->extra = $extra;
+    }
+
+    public function getExtends(): ?string
+    {
+        return $this->extends;
+    }
+
+    public function getCss(): array
+    {
+        return $this->css;
+    }
+
+    public function getJs(): array
+    {
+        return $this->js;
+    }
+
+    public function getSections(): array
+    {
+        return $this->sections;
+    }
+
+    public function getExtra(): array
+    {
+        return $this->extra;
+    }
+}

src/View/Parser.php

@@ -0,0 +1,159 @@
+<?php namespace MapGuesser\View;
+
+class Parser
+{
+    private string $file;
+
+    public function __construct(string $file)
+    {
+        $this->file = $file;
+    }
+
+    public function parse(): ParsedFragment
+    {
+        $sectionOpen = null;
+        $extraOpen = false;
+
+        $extends = null;
+        $js = [];
+        $css = [];
+        $sections = [];
+        $extra = ['', ''];
+
+        $fileHandle = fopen($this->file, 'r');
+        if (!$fileHandle) {
+            throw new \Exception('Cannot open file ' . $this->file);
+        }
+
+        $lineNumber = 0;
+        while (($line = fgets($fileHandle)) !== false) {
+            ++$lineNumber;
+
+            if (($cssMatched = $this->matchCss($line)) !== null) {
+                $css[] = $cssMatched;
+
+                continue;
+            }
+
+            if (($jsMatched = $this->matchJs($line)) !== null) {
+                $js[] = $jsMatched;
+
+                continue;
+            }
+
+            if (($extendsMatched = $this->matchExtends($line)) !== null) {
+                if ($extends !== null) {
+                    throw new \Exception('Error in file ' . $this->file . ' in line ' . $lineNumber . ' - There is already an \'@extends\' declared.');
+                }
+
+                $extends = $extendsMatched;
+
+                continue;
+            }
+
+            if (($sectionMatched = $this->matchSection($line)) !== null) {
+                if ($extends === null) {
+                    throw new \Exception('Error in file ' . $this->file . ' in line ' . $lineNumber . ' - \'@section\' has no meaning if view extends nothing.');
+                }
+                if ($sectionOpen !== null) {
+                    throw new \Exception('Parse error in file ' . $this->file . ' in line ' . $lineNumber . ' - A \'@section\' is already open (no \'@endsection\' found).');
+                }
+
+                $sectionOpen = $sectionMatched;
+                $sections[$sectionOpen] = '';
+
+                continue;
+            }
+
+            if ($this->matchEndSection($line)) {
+                if ($sectionOpen === null) {
+                    throw new \Exception('Parse error in file ' . $this->file . ' in line ' . $lineNumber . ' - Cannot end section until no \'@section\' is open.');
+                }
+
+                $sectionOpen = null;
+            }
+
+            if ($this->matchExtra($line)) {
+                if ($extraOpen) {
+                    throw new \Exception('Parse error in file ' . $this->file . ' in line ' . $lineNumber . ' - An \'@extra\' is already open (no \'@endextra\' found).');
+                }
+
+                $extraOpen = true;
+
+                continue;
+            }
+
+            if ($this->matchEndExtra($line)) {
+                if (!$extraOpen) {
+                    throw new \Exception('Parse error in file ' . $this->file . ' in line ' . $lineNumber . ' - Cannot end extra until no \'@extra\' is open.');
+                }
+
+                $extraOpen = false;
+            }
+
+            if ($sectionOpen !== null) {
+                $sections[$sectionOpen] .= $line;
+            }
+
+            if ($extraOpen) {
+                $offset = $extends === null ? 0 : 1;
+                $extra[$offset] .= $line;
+            }
+        }
+
+        fclose($fileHandle);
+
+        return new ParsedFragment($extends, $css, $js, $sections, $extra);
+    }
+
+    private function matchCss(string $line): ?string
+    {
+        if (preg_match('/^\s*@css\((.*)\)\s*$/', $line, $matches)) {
+            return $matches[1];
+        }
+
+        return null;
+    }
+
+    private function matchJs(string $line): ?string
+    {
+        if (preg_match('/^\s*@js\((.*)\)\s*$/', $line, $matches)) {
+            return $matches[1];
+        }
+
+        return null;
+    }
+
+    private function matchExtends(string $line): ?string
+    {
+        if (preg_match('/^\s*@extends\(\'([\w\/]+)\'\)\s*$/', $line, $matches)) {
+            return $matches[1];
+        }
+
+        return null;
+    }
+
+    private function matchSection(string $line): ?string
+    {
+        if (preg_match('/^\s*@section\(\'(\w+)\'\)\s*$/', $line, $matches)) {
+            return $matches[1];
+        }
+
+        return null;
+    }
+
+    private function matchEndSection(string $line): bool
+    {
+        return preg_match('/^\s*@endsection(?:\(\))?\s*$/', $line);
+    }
+
+    private function matchExtra(string $line): bool
+    {
+        return preg_match('/^\s*@extra(?:\(\))?\s*$/', $line);
+    }
+
+    private function matchEndExtra(string $line): bool
+    {
+        return preg_match('/^\s*@endextra(?:\(\))?\s*$/', $line);
+    }
+}

views/account/account.php

@@ -1,5 +1,6 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
     <h2>Account</h2>
     <div class="box">
         <form id="accountForm" action="/account" method="post" data-observe-inputs="password_new,password_new_confirm">
@@ -19,5 +20,4 @@
             </div>
         </form>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection

views/account/delete.php

@@ -1,5 +1,6 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
     <h2>Delete account</h2>
     <div class="box">
         <form id="deleteAccountForm" action="/account/delete" method="post" data-redirect-on-success="/">
@@ -11,5 +12,4 @@
             </div>
         </form>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection

views/admin/map_editor.php

@@ -1,26 +1,16 @@
-<?php
-$cssFiles = [
-    'node_modules/leaflet/dist/leaflet.css',
-    'css/map_editor.css',
-    'node_modules/leaflet.markercluster/dist/MarkerCluster.css',
-    'node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css'
-];
-$jsFiles = [
-    'node_modules/leaflet/dist/leaflet.js',
-    'node_modules/leaflet.markercluster/dist/leaflet.markercluster.js',
-    'https://maps.googleapis.com/maps/api/js?key=' . $_ENV['GOOGLE_MAPS_JS_API_KEY'],
-    'js/map_editor.js',
-];
-?>
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<header class="small">
-    <h1>
-        <a href="/" title="<?= $_ENV['APP_NAME'] ?>">
-            <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>"><!--
-         --><span><?= $_ENV['APP_NAME'] ?></span>
-        </a>
-    </h1>
-    <p class="header">
+@css('node_modules/leaflet/dist/leaflet.css')
+@css('css/map_editor.css')
+@css('node_modules/leaflet.markercluster/dist/MarkerCluster.css')
+@css('node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css')
+
+@js('node_modules/leaflet/dist/leaflet.js')
+@js('node_modules/leaflet.markercluster/dist/leaflet.markercluster.js')
+@js('https://maps.googleapis.com/maps/api/js?key=' . $_ENV['GOOGLE_MAPS_JS_API_KEY'])
+@js('js/map_editor.js')
+
+@extends('templates/layout_full')
+
+@section('subheader')
            <span><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
         --><span><!--
             <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
@@ -46,8 +36,9 @@ $jsFiles = [
             </svg><!--
          --><span id="deleted" class="bold">0</span><!--
         --></span>
-    </p>
-</header>
+@endsection
+
+@section('pagemodal')
 <div id="metadata" class="modal">
     <h2>Edit map data</h2>
     <form id="metadataForm" class="marginTop" data-no-submit="true">
@@ -59,7 +50,9 @@ $jsFiles = [
         </div>
     </form>
 </div>
-<div class="full">
+@endsection
+
+@section('main')
     <div id="map"></div>
     <div id="panorama"></div>
     <div id="noPano">
@@ -73,7 +66,9 @@ $jsFiles = [
         <button id="closeButton" class="gray fullWidth marginTop">Close</button>
         <button id="deleteButton" class="red fullWidth marginTop">Delete</button>
     </div>
-</div>
+@endsection
+
+@section('pageScript')
 <script>
     var tileUrl = '<?= $_ENV['LEAFLET_TILESERVER_URL'] ?>';
     var tileAttribution = '<?= $_ENV['LEAFLET_TILESERVER_ATTRIBUTION'] ?>';
@@ -81,4 +76,4 @@ $jsFiles = [
     var mapBounds = <?= json_encode($bounds) ?>;
     var places = <?= json_encode($places, JSON_FORCE_OBJECT) ?>;
 </script>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection

views/error/404.php

@@ -1,6 +1,6 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
     <h2>404 | Page not found</h2>
     <p>The requested URL was not found on this server. <a href="/" title="<?= $_ENV['APP_NAME'] ?>">Back to start.</a></p>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection

views/game.php

@@ -1,27 +1,17 @@
-<?php
-$cssFiles = [
-    'css/game.css'
-];
-$jsFiles = [
-    'https://maps.googleapis.com/maps/api/js?key=' . $_ENV['GOOGLE_MAPS_JS_API_KEY'],
-    'js/game.js',
-];
-?>
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<header class="small">
-    <h1>
-        <a href="/" title="<?= $_ENV['APP_NAME'] ?>">
-            <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>"><!--
-         --><span><?= $_ENV['APP_NAME'] ?></span>
-        </a>
-    </h1>
-    <p class="header">
+@css('css/game.css')
+
+@js('https://maps.googleapis.com/maps/api/js?key=' . $_ENV['GOOGLE_MAPS_JS_API_KEY'])
+@js('js/game.js')
+
+@extends('templates/layout_full')
+
+@section('subheader')
         <span id="mapName" class="bold"><?= $mapName ?></span><!--
         --><span>Round <span id="currentRound" class="bold"></span></span><!--
         --><span>Score <span id="currentScoreSum" class="bold"></span></span>
-    </p>
-</header>
-<div class="full">
+@endsection
+
+@section('main')
     <div id="panoCover"></div>
     <div id="panorama"></div>
     <div id="showGuessButtonContainer">
@@ -56,9 +46,11 @@ $jsFiles = [
             <button id="startNewGameButton" class="fullWidth">Play this map again</button>
         </div>
     </div>
-</div>
+@endsection
+
+@section('pageScript')
 <script>
     var mapId = <?= $mapId ?>;
     var mapBounds = <?= json_encode($bounds) ?>;
 </script>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection

views/login/activate.php

@@ -1,8 +1,8 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
     <h2>Account activation</h2>
     <div class="box">
         <p class="error justify">Activation failed. Please check the link you entered or retry <a href="/signup" title="Sign up">sign up</a>!</p>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection

views/login/cancel.php

@@ -1,5 +1,6 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
     <h2>Account cancellation</h2>
     <div class="box">
         <?php if ($success) : ?>
@@ -8,5 +9,4 @@
             <p class="error justify">Cancellation failed. Please check the link you entered! Maybe the account was already deleted, in this case no further action is required.</p>
         <?php endif; ?>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection

views/login/google_login.php

@@ -1,8 +1,8 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
     <h2>Login up with Google</h2>
     <div class="box">
         <p class="error justify">Authenticating with Google failed. Please <a href="/login/google" title="Login with Google">retry</a>!</p>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection

views/login/google_signup.php

@@ -1,10 +1,8 @@
-<?php
-$jsFiles = [
-    'js/login/google_signup.js',
-];
-?>
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@js('js/login/google_signup.js')
+
+@extends('templates/layout_normal')
+
+@section('main')
     <h2>Sign up</h2>
     <div class="box">
         <form id="googleSignupForm" action="/signup/google" method="post" data-redirect-on-success="/">
@@ -26,5 +24,4 @@ $jsFiles = [
             </div>
         </form>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection

views/login/login.php

@@ -1,5 +1,6 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
     <h2>Login</h2>
     <div class="box">
         <form id="loginForm" action="/login" method="post" data-redirect-on-success="/">
@@ -15,5 +16,4 @@
             </div>
         </form>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection

views/login/signup.php

@@ -1,10 +1,8 @@
-<?php
-$jsFiles = [
-    'js/login/signup.js',
-];
-?>
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@js('js/login/signup.js')
+
+@extends('templates/layout_normal')
+
+@section('main')
     <h2>Sign up</h2>
     <div class="box">
         <form id="signupForm" action="/signup" method="post" data-redirect-on-success="/signup/success">
@@ -30,5 +28,4 @@ $jsFiles = [
             </div>
         </form>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection

views/login/signup_success.php

@@ -1,8 +1,8 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
     <h2>Sign up</h2>
     <div class="box">
         <p class="justify">Sign up was successful. Please check your email and click on the activation link to activate your account!</p>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection

views/maps.php

@@ -1,16 +1,11 @@
-<?php
-$cssFiles = [
-    'css/maps.css'
-];
-$jsFiles = [
-    'js/maps.js',
-];
-if ($isAdmin) {
-    $jsFiles[] = 'js/maps_admin.js';
-}
-?>
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@css('css/maps.css')
+@js('js/maps.js')
+TODO: condition!
+@js('js/maps_admin.js')
+
+@extends('templates/layout_normal')
+
+@section('main')
     <div id="mapContainer">
         <?php foreach ($maps as $map): ?>
             <div class="mapItem">
@@ -66,5 +61,4 @@ if ($isAdmin) {
             <?php endfor; ?>
         <?php endif; ?>
     </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection

views/templates/footer.php

@@ -1,5 +0,0 @@
-</main>
-<footer>
-    <p><span class="bold"><?= $_ENV['APP_NAME'] ?></span> <?= str_replace('Release_', '', VERSION) ?></p><!--
- --><p>&copy; Pőcze Bence <?= (new DateTime(REVISION_DATE))->format('Y') ?></p>
-</footer>

views/templates/layout_full.php

@@ -0,0 +1,18 @@
+@extends('templates/mapguesser')
+
+@section('content')
+<header class="small">
+    <h1>
+        <a href="/" title="<?= $_ENV['APP_NAME'] ?>">
+            <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>"><!--
+         --><span><?= $_ENV['APP_NAME'] ?></span>
+        </a>
+    </h1>
+    <p class="header">
+        @yields('subheader')
+    </p>
+</header>
+<main class="full">
+@yields('main')
+</main>
+@endsection

views/templates/layout_normal.php

@@ -1,3 +1,5 @@
+@extends('templates/mapguesser')
+@section('content')
 <header>
     <h1>
         <a href="/" title="<?= $_ENV['APP_NAME'] ?>">
@@ -22,3 +24,10 @@
     </p>
 </header>
 <main>
+@yields('main')
+</main>
+<footer>
+    <p><span class="bold"><?= $_ENV['APP_NAME'] ?></span> <?= str_replace('Release_', '', VERSION) ?></p><!--
+ --><p>&copy; Pőcze Bence <?= (new DateTime(REVISION_DATE))->format('Y') ?></p>
+</footer>
+@endsection

views/templates/main_footer.php

@@ -1,50 +0,0 @@
-    <script>
-        const STATIC_ROOT = '<?= $_ENV['STATIC_ROOT'] ?>';
-        const REVISION = '<?= REVISION ?>';
-        var ANTI_CSRF_TOKEN = '<?= \Container::$request->session()->get('anti_csrf_token') ?>';
-        const GOOGLE_MAPS_JS_API_KEY = '<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>';
-        <?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
-            const GOOGLE_ANALITICS_ID = '<?= $_ENV['GOOGLE_ANALITICS_ID'] ?>';
-        <?php endif; ?>
-    </script>
-    <script src="<?= $_ENV['STATIC_ROOT'] ?>/js/mapguesser.js?rev=<?= REVISION ?>"></script>
-    <?php if (isset($jsFiles)) : ?>
-        <?php foreach ($jsFiles as $jsFile) : ?>
-            <?php
-            if (!preg_match('/^http(s)?/', $jsFile)) {
-                $jsFile = $_ENV['STATIC_ROOT'] .  '/' . $jsFile . '?rev=' . REVISION;
-            }
-            ?>
-            <script src="<?= $jsFile ?>"></script>
-        <?php endforeach; ?>
-    <?php endif; ?>
-    <?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?>
-        <script>
-            (function () {
-                // we don't want user to agree cookies when clicking on the notice itself
-                document.getElementById('cookiesNotice').onclick = function (e) {
-                    e.stopPropagation();
-                };
-
-                document.getElementById('agreeCookiesButton').onclick = function () {
-                    MapGuesser.agreeCookies();
-
-                    document.getElementById('cookiesNotice').style.display = 'none';
-                };
-
-                window.onclick = function () {
-                    MapGuesser.agreeCookies();
-                };
-            })();
-        </script>
-    <?php else: ?>
-        <?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
-            <script>
-                (function () {
-                    MapGuesser.initGoogleAnalitics();
-                })();
-            </script>
-        <?php endif; ?>
-    <?php endif; ?>
-</body>
-</html>

views/templates/main_header.php

@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title><?= $_ENV['APP_NAME'] ?></title>
-    <link href="<?= $_ENV['STATIC_ROOT'] ?>/css/mapguesser.css?rev=<?= REVISION ?>" rel="stylesheet">
-    <?php if (isset($cssFiles)) : ?>
-        <?php foreach ($cssFiles as $cssFile) : ?>
-            <?php
-            if (!preg_match('/^http(s)?/', $cssFile)) {
-                $cssFile = $_ENV['STATIC_ROOT'] .  '/' . $cssFile . '?rev=' . REVISION;
-            }
-            ?>
-            <link href="<?= $cssFile ?>" rel="stylesheet">
-        <?php endforeach; ?>
-    <?php endif; ?>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
-    <link rel="icon" type="image/png" sizes="192x192" href="<?= $_ENV['STATIC_ROOT'] ?>/img/favicon/192x192.png?rev=<?= REVISION ?>">
-    <link rel="icon" type="image/png" sizes="96x96" href="<?= $_ENV['STATIC_ROOT'] ?>/img/favicon/96x96.png?rev=<?= REVISION ?>">
-    <link rel="icon" type="image/png" sizes="32x32" href="<?= $_ENV['STATIC_ROOT'] ?>/img/favicon/32x32.png?rev=<?= REVISION ?>">
-    <link rel="icon" type="image/png" sizes="16x16" href="<?= $_ENV['STATIC_ROOT'] ?>/img/favicon/16x16.png?rev=<?= REVISION ?>">
-</head>
-<body>
-    <?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?>
-        <div id="cookiesNotice">
-            <p class="small">
-                <?= $_ENV['APP_NAME'] ?> uses cookies to improve user experience. By using the app or clicking 'Agree', you consent to our use of cookies.
-            </p>
-            <button id="agreeCookiesButton" class="small marginTop">Agree</button>
-        </div>
-    <?php endif; ?>
-    <div id="loading">
-        <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/loading.svg?rev=<?= REVISION ?>" width="64" height="64">
-    </div>
-    <div id="cover"></div>
-    <div id="modal" class="modal">
-        <h2 id="modalTitle"></h2>
-        <p id="modalText" class="justify marginTop"></p>
-        <div id="modalButtons" class="right"></div>
-    </div>

views/templates/mapguesser.php

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#198231">
+    <title><?= $_ENV['APP_NAME'] ?></title>
+    <link href="<?= $_ENV['STATIC_ROOT'] ?>/css/mapguesser.css?rev=<?= REVISION ?>" rel="stylesheet">
+    @yields('externalCss')
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
+    @yields('inlineCss')
+    <link rel="icon" type="image/png" sizes="192x192" href="<?= $_ENV['STATIC_ROOT'] ?>/img/favicon/192x192.png?rev=<?= REVISION ?>">
+    <link rel="icon" type="image/png" sizes="96x96" href="<?= $_ENV['STATIC_ROOT'] ?>/img/favicon/96x96.png?rev=<?= REVISION ?>">
+    <link rel="icon" type="image/png" sizes="32x32" href="<?= $_ENV['STATIC_ROOT'] ?>/img/favicon/32x32.png?rev=<?= REVISION ?>">
+    <link rel="icon" type="image/png" sizes="16x16" href="<?= $_ENV['STATIC_ROOT'] ?>/img/favicon/16x16.png?rev=<?= REVISION ?>">
+</head>
+<body>
+    <?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?>
+        <div id="cookiesNotice">
+            <p class="small">
+                <?= $_ENV['APP_NAME'] ?> uses cookies to improve user experience. By using the app or clicking 'Agree', you consent to our use of cookies.
+            </p>
+            <button id="agreeCookiesButton" class="small marginTop">Agree</button>
+        </div>
+    <?php endif; ?>
+    <div id="loading">
+        <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/loading.svg?rev=<?= REVISION ?>" width="64" height="64">
+    </div>
+    <div id="cover"></div>
+    <div id="modal" class="modal">
+        <h2 id="modalTitle"></h2>
+        <p id="modalText" class="justify marginTop"></p>
+        <div id="modalButtons" class="right"></div>
+    </div>
+    @yields('pagemodal')
+    @yields('content')
+    <script>
+        const STATIC_ROOT = '<?= $_ENV['STATIC_ROOT'] ?>';
+        const REVISION = '<?= REVISION ?>';
+        var ANTI_CSRF_TOKEN = '<?= \Container::$request->session()->get('anti_csrf_token') ?>';
+        const GOOGLE_MAPS_JS_API_KEY = '<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>';
+        <?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
+            const GOOGLE_ANALITICS_ID = '<?= $_ENV['GOOGLE_ANALITICS_ID'] ?>';
+        <?php endif; ?>
+    </script>
+    @yields('pageScript')
+    <script src="<?= $_ENV['STATIC_ROOT'] ?>/js/mapguesser.js?rev=<?= REVISION ?>"></script>
+    @yields('externalJs')
+    @yields('inlineJs')
+    <?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?>
+        <script>
+            (function () {
+                // we don't want user to agree cookies when clicking on the notice itself
+                document.getElementById('cookiesNotice').onclick = function (e) {
+                    e.stopPropagation();
+                };
+
+                document.getElementById('agreeCookiesButton').onclick = function () {
+                    MapGuesser.agreeCookies();
+
+                    document.getElementById('cookiesNotice').style.display = 'none';
+                };
+
+                window.onclick = function () {
+                    MapGuesser.agreeCookies();
+                };
+            })();
+        </script>
+    <?php else: ?>
+        <?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
+            <script>
+                (function () {
+                    MapGuesser.initGoogleAnalitics();
+                })();
+            </script>
+        <?php endif; ?>
+    <?php endif; ?>
+</body>
+</html>