Deployed 2a15faa with MkDocs version: 1.5.3

chesslablab · Sep 25, 2024 · e340988 · e340988
1 parent 9c429e6
commit e340988
Show file tree

Hide file tree

Showing 12 changed files with 63 additions and 256 deletions.
diff --git a/404.html b/404.html
@@ -8,7 +8,7 @@
 
 
         <link rel="shortcut icon" href="/website/img/favicon.ico">
-        <title>ChesslaBlab Website</title>
+        <title>Website</title>
         <link href="/website/css/bootstrap.min.css" rel="stylesheet">
         <link href="/website/css/font-awesome.min.css" rel="stylesheet">
         <link href="/website/css/base.css" rel="stylesheet">
@@ -20,7 +20,7 @@
     <body>
         <div class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
             <div class="container">
-                <a class="navbar-brand" href="/website/.">ChesslaBlab Website</a>
+                <a class="navbar-brand" href="/website/.">Website</a>
                 <!-- Expander button -->
                 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse">
                     <span class="navbar-toggler-icon"></span>
@@ -37,10 +37,7 @@
                                 <a href="/website/installation/" class="nav-link">Installation</a>
                             </li>
                             <li class="navitem">
-                                <a href="/website/website-architecture/" class="nav-link">Website Architecture</a>
-                            </li>
-                            <li class="navitem">
-                                <a href="/website/websocket-connection/" class="nav-link">WebSocket Connection</a>
+                                <a href="/website/architecture/" class="nav-link">Architecture</a>
                             </li>
                             <li class="navitem">
                                 <a href="/website/blog/" class="nav-link">Blog</a>

diff --git a/websocket-connection/index.html → architecture/index.html b/websocket-connection/index.html → architecture/index.html
@@ -6,9 +6,9 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 
-        <link rel="canonical" href="https://chesslablab.github.io/website/websocket-connection/">
+        <link rel="canonical" href="https://chesslablab.github.io/website/architecture/">
         <link rel="shortcut icon" href="../img/favicon.ico">
-        <title>WebSocket Connection - ChesslaBlab Website</title>
+        <title>Architecture - Website</title>
         <link href="../css/bootstrap.min.css" rel="stylesheet">
         <link href="../css/font-awesome.min.css" rel="stylesheet">
         <link href="../css/base.css" rel="stylesheet">
@@ -20,7 +20,7 @@
     <body>
         <div class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
             <div class="container">
-                <a class="navbar-brand" href="..">ChesslaBlab Website</a>
+                <a class="navbar-brand" href="..">Website</a>
                 <!-- Expander button -->
                 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse">
                     <span class="navbar-toggler-icon"></span>
@@ -36,11 +36,8 @@
                             <li class="navitem">
                                 <a href="../installation/" class="nav-link">Installation</a>
                             </li>
-                            <li class="navitem">
-                                <a href="../website-architecture/" class="nav-link">Website Architecture</a>
-                            </li>
                             <li class="navitem active">
-                                <a href="./" class="nav-link">WebSocket Connection</a>
+                                <a href="./" class="nav-link">Architecture</a>
                             </li>
                             <li class="navitem">
                                 <a href="../blog/" class="nav-link">Blog</a>
@@ -57,7 +54,7 @@
                             </a>
                         </li>
                             <li class="nav-item">
-                                <a rel="prev" href="../website-architecture/" class="nav-link">
+                                <a rel="prev" href="../installation/" class="nav-link">
                                     <i class="fa fa-arrow-left"></i> Previous
                                 </a>
                             </li>
@@ -84,16 +81,47 @@
     <div id="toc-collapse" class="navbar-collapse collapse card bg-secondary">
         <ul class="nav flex-column">
 
-            <li class="nav-item" data-level="1"><a href="#websocket-connection" class="nav-link">WebSocket Connection</a>
+            <li class="nav-item" data-level="1"><a href="#architecture" class="nav-link">Architecture</a>
+              <ul class="nav flex-column">
+            <li class="nav-item" data-level="2"><a href="#websocket-connections" class="nav-link">WebSocket Connections</a>
               <ul class="nav flex-column">
               </ul>
             </li>
+              </ul>
+            </li>
         </ul>
     </div>
 </div></div>
                     <div class="col-md-9" role="main">
 
-<h1 id="websocket-connection">WebSocket Connection</h1>
+<h1 id="architecture">Architecture</h1>
+<p>Some familiarity with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#importing_modules_using_import_maps">JavaScript modules</a> as well as with Symfony's <a href="https://symfony.com/doc/current/frontend/asset_mapper.html">Asset Mapper</a> component is recommended in order to follow this section.</p>
+<p>The ChesslaBlab website is a multi-page application (MPA) that is not adhering to the MVC architectural pattern. The controller actions are basically sending an HTML document to the browser on each request. The business logic is implemented in the chess server.</p>
+<p>In this website architecture in particular, there is no model layer (M) and as a result the Controller layer (C) remains quite basic as in the following example. The main reason behind a multi-page architecture like this one as opposed to a single-page architecture is that we want the pages to be indexed by web crawlers.</p>
+<pre><code class="language-php">&lt;?php
+
+namespace App\Controller\Pages\Play;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+
+class ComputerController extends AbstractController
+{
+    public function index(): Response
+    {
+        retarurn $this-&gt;render('pages/play/computer/index.html.twig');
+    }
+}
+</code></pre>
+<p>As a rule of thumb, there is a <code>.twig.html</code> file and a <code>.js</code> file associated to each controller action. So the structure of the <a href="https://github.com/chesslablab/website/tree/main/src/Controller/Pages">App\Controller\Pages</a> namespace is mirroring the structure of both the <a href="https://github.com/chesslablab/website/tree/main/templates/pages">templates/pages</a> folder and the <a href="https://github.com/chesslablab/website/tree/main/assets/js/pages">assets/js/pages</a> folder.</p>
+<ul>
+<li><a href="https://github.com/chesslablab/website/blob/main/src/Controller/Pages/Play/ComputerController.php">src/Controller/Pages/Play/ComputerController.php</a></li>
+<li><a href="https://github.com/chesslablab/website/blob/main/templates/pages/play/computer/index.html.twig">templates/pages/play/computer/index.html.twig</a></li>
+<li><a href="https://github.com/chesslablab/website/blob/main/assets/js/pages/play/computer/index.js">assets/js/pages/play/computer/index.js</a></li>
+</ul>
+<p>This naming convention allows developers to reduce memorization because given one file name, the name of the remaining two can be inferred.</p>
+<p>Each page's JavaScript file is then set up as an entrypoint in the <a href="https://github.com/chesslablab/website/blob/main/importmap.php">importmap.php</a> config file. The main point of the entrypoint script is to update the DOM on user interaction and data change.</p>
+<h2 id="websocket-connections">WebSocket Connections</h2>
 <p>The ChesslaBlab website is integrated with <a href="https://chesslablab.github.io/chess-server/">PHP Chess Server</a>, an asynchronous WebSocket server that provides functionality to play chess online over a WebSocket connection.</p>
 <p>The environment variables required for the chess server can be found in the <a href="https://github.com/chesslablab/website/blob/main/assets/env.example.js">assets/env.example.js</a> file.</p>
 <p>As described in <a href="https://chesslablab.github.io/chess-server/start/">the docs</a>, these are the game modes available:</p>
@@ -109,7 +137,7 @@ <h1 id="websocket-connection">WebSocket Connection</h1>
 <li><a href="https://github.com/chesslablab/website/blob/main/assets/js/websockets/game/StockfishWebSocket.js">assets/js/websockets/game/StockfishWebSocket.js</a></li>
 </ul>
 <p>Let's say you wanted to study a particular chess opening, then a chess game in <code>analysis</code> mode is to be started.</p>
-<p><img alt="Figure 1" src="https://raw.githubusercontent.com/chesslablab/website/main/docs/websocket-connection_01.png" /></p>
+<p><img alt="Figure 1" src="https://raw.githubusercontent.com/chesslablab/website/main/docs/architecture_01.png" /></p>
 <p><strong>Figure 1</strong>. Click on <strong>Openings &gt; Search</strong> and select "D77 Neo-Grünfeld Defense: Classical Variation, Modern Defense"</p>
 <p>Data:</p>
 <pre><code class="language-text">/start classical analysis &quot;{\&quot;movetext\&quot;:\&quot;1.d4 Nf6 2.Nf3 g6 3.g3 Bg7 4.Bg2 O-O 5.O-O d5 6.c4 dxc4\&quot;}&quot;
@@ -161,7 +189,7 @@ <h1 id="websocket-connection">WebSocket Connection</h1>
 <li><a href="https://github.com/chesslablab/website/blob/main/assets/js/pages/openings/search/index.js">assets/js/pages/openings/search/index.js</a></li>
 </ul>
 <p>Similarly, if you wanted to study a chess position, then a FEN string needs to be started.</p>
-<p><img alt="Figure 2" src="https://raw.githubusercontent.com/chesslablab/website/main/docs/websocket-connection_02.png" /></p>
+<p><img alt="Figure 2" src="https://raw.githubusercontent.com/chesslablab/website/main/docs/architecture_02.png" /></p>
 <p><strong>Figure 2</strong>. Click on <strong>Learn &gt; Analysis Chessboard</strong> and enter a classical chess position in FEN format.</p>
 <p>Data:</p>
 <pre><code class="language-text">/start classical analysis &quot;{\&quot;fen\&quot;:\&quot;r2q1r1k/1b1nN2p/pp3pp1/8/Q7/PP5P/1BP2RPN/7K w - -\&quot;,\&quot;movetext\&quot;:\&quot;\&quot;}&quot;

diff --git a/websocket-connection_01.png → architecture_01.png b/websocket-connection_01.png → architecture_01.png
diff --git a/websocket-connection_02.png → architecture_02.png b/websocket-connection_02.png → architecture_02.png
diff --git a/blog/index.html b/blog/index.html
@@ -8,7 +8,7 @@
 
         <link rel="canonical" href="https://chesslablab.github.io/website/blog/">
         <link rel="shortcut icon" href="../img/favicon.ico">
-        <title>Blog - ChesslaBlab Website</title>
+        <title>Blog - Website</title>
         <link href="../css/bootstrap.min.css" rel="stylesheet">
         <link href="../css/font-awesome.min.css" rel="stylesheet">
         <link href="../css/base.css" rel="stylesheet">
@@ -20,7 +20,7 @@
     <body>
         <div class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
             <div class="container">
-                <a class="navbar-brand" href="..">ChesslaBlab Website</a>
+                <a class="navbar-brand" href="..">Website</a>
                 <!-- Expander button -->
                 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse">
                     <span class="navbar-toggler-icon"></span>
@@ -37,10 +37,7 @@
                                 <a href="../installation/" class="nav-link">Installation</a>
                             </li>
                             <li class="navitem">
-                                <a href="../website-architecture/" class="nav-link">Website Architecture</a>
-                            </li>
-                            <li class="navitem">
-                                <a href="../websocket-connection/" class="nav-link">WebSocket Connection</a>
+                                <a href="../architecture/" class="nav-link">Architecture</a>
                             </li>
                             <li class="navitem active">
                                 <a href="./" class="nav-link">Blog</a>
@@ -57,7 +54,7 @@
                             </a>
                         </li>
                             <li class="nav-item">
-                                <a rel="prev" href="../websocket-connection/" class="nav-link">
+                                <a rel="prev" href="../architecture/" class="nav-link">
                                     <i class="fa fa-arrow-left"></i> Previous
                                 </a>
                             </li>

diff --git a/html-iframes/index.html b/html-iframes/index.html
@@ -8,7 +8,7 @@
 
         <link rel="canonical" href="https://chesslablab.github.io/website/html-iframes/">
         <link rel="shortcut icon" href="../img/favicon.ico">
-        <title>HTML Iframes - ChesslaBlab Website</title>
+        <title>HTML Iframes - Website</title>
         <link href="../css/bootstrap.min.css" rel="stylesheet">
         <link href="../css/font-awesome.min.css" rel="stylesheet">
         <link href="../css/base.css" rel="stylesheet">
@@ -20,7 +20,7 @@
     <body>
         <div class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
             <div class="container">
-                <a class="navbar-brand" href="..">ChesslaBlab Website</a>
+                <a class="navbar-brand" href="..">Website</a>
                 <!-- Expander button -->
                 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse">
                     <span class="navbar-toggler-icon"></span>
@@ -37,10 +37,7 @@
                                 <a href="../installation/" class="nav-link">Installation</a>
                             </li>
                             <li class="navitem">
-                                <a href="../website-architecture/" class="nav-link">Website Architecture</a>
-                            </li>
-                            <li class="navitem">
-                                <a href="../websocket-connection/" class="nav-link">WebSocket Connection</a>
+                                <a href="../architecture/" class="nav-link">Architecture</a>
                             </li>
                             <li class="navitem">
                                 <a href="../blog/" class="nav-link">Blog</a>

diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
 
         <link rel="canonical" href="https://chesslablab.github.io/website/">
         <link rel="shortcut icon" href="img/favicon.ico">
-        <title>ChesslaBlab Website</title>
+        <title>Website</title>
         <link href="css/bootstrap.min.css" rel="stylesheet">
         <link href="css/font-awesome.min.css" rel="stylesheet">
         <link href="css/base.css" rel="stylesheet">
@@ -20,7 +20,7 @@
     <body class="homepage">
         <div class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
             <div class="container">
-                <a class="navbar-brand" href=".">ChesslaBlab Website</a>
+                <a class="navbar-brand" href=".">Website</a>
                 <!-- Expander button -->
                 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse">
                     <span class="navbar-toggler-icon"></span>
@@ -37,10 +37,7 @@
                                 <a href="installation/" class="nav-link">Installation</a>
                             </li>
                             <li class="navitem">
-                                <a href="website-architecture/" class="nav-link">Website Architecture</a>
-                            </li>
-                            <li class="navitem">
-                                <a href="websocket-connection/" class="nav-link">WebSocket Connection</a>
+                                <a href="architecture/" class="nav-link">Architecture</a>
                             </li>
                             <li class="navitem">
                                 <a href="blog/" class="nav-link">Blog</a>
@@ -321,5 +318,5 @@ <h4 class="modal-title" id="keyboardModalLabel">Keyboard Shortcuts</h4>
 
 <!--
 MkDocs version : 1.5.3
-Build Date UTC : 2024-09-25 17:38:17.255802+00:00
+Build Date UTC : 2024-09-25 17:48:34.853853+00:00
 -->
diff --git a/installation/index.html b/installation/index.html
@@ -8,7 +8,7 @@
 
         <link rel="canonical" href="https://chesslablab.github.io/website/installation/">
         <link rel="shortcut icon" href="../img/favicon.ico">
-        <title>Installation - ChesslaBlab Website</title>
+        <title>Installation - Website</title>
         <link href="../css/bootstrap.min.css" rel="stylesheet">
         <link href="../css/font-awesome.min.css" rel="stylesheet">
         <link href="../css/base.css" rel="stylesheet">
@@ -20,7 +20,7 @@
     <body>
         <div class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
             <div class="container">
-                <a class="navbar-brand" href="..">ChesslaBlab Website</a>
+                <a class="navbar-brand" href="..">Website</a>
                 <!-- Expander button -->
                 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse">
                     <span class="navbar-toggler-icon"></span>
@@ -37,10 +37,7 @@
                                 <a href="./" class="nav-link">Installation</a>
                             </li>
                             <li class="navitem">
-                                <a href="../website-architecture/" class="nav-link">Website Architecture</a>
-                            </li>
-                            <li class="navitem">
-                                <a href="../websocket-connection/" class="nav-link">WebSocket Connection</a>
+                                <a href="../architecture/" class="nav-link">Architecture</a>
                             </li>
                             <li class="navitem">
                                 <a href="../blog/" class="nav-link">Blog</a>
@@ -62,7 +59,7 @@
                                 </a>
                             </li>
                             <li class="nav-item">
-                                <a rel="next" href="../website-architecture/" class="nav-link">
+                                <a rel="next" href="../architecture/" class="nav-link">
                                     Next <i class="fa fa-arrow-right"></i>
                                 </a>
                             </li>

diff --git a/search/search_index.json b/search/search_index.json
diff --git a/sitemap.xml b/sitemap.xml
@@ -6,27 +6,22 @@
          <changefreq>daily</changefreq>
     </url>
     <url>
-         <loc>https://chesslablab.github.io/website/blog/</loc>
-         <lastmod>2024-09-25</lastmod>
-         <changefreq>daily</changefreq>
-    </url>
-    <url>
-         <loc>https://chesslablab.github.io/website/html-iframes/</loc>
+         <loc>https://chesslablab.github.io/website/architecture/</loc>
          <lastmod>2024-09-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
-         <loc>https://chesslablab.github.io/website/installation/</loc>
+         <loc>https://chesslablab.github.io/website/blog/</loc>
          <lastmod>2024-09-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
-         <loc>https://chesslablab.github.io/website/website-architecture/</loc>
+         <loc>https://chesslablab.github.io/website/html-iframes/</loc>
          <lastmod>2024-09-25</lastmod>
          <changefreq>daily</changefreq>
     </url>
     <url>
-         <loc>https://chesslablab.github.io/website/websocket-connection/</loc>
+         <loc>https://chesslablab.github.io/website/installation/</loc>
          <lastmod>2024-09-25</lastmod>
          <changefreq>daily</changefreq>
     </url>

diff --git a/sitemap.xml.gz b/sitemap.xml.gz