Add preview banner

Author: Fernando-A-Rocha

articles/introduction/article.yaml

@@ -1,6 +1,6 @@
 title: "Introduction"
 content: "article.md"
 author: "MTA Team"
-date: "2025-01-01 12:00:00"
+date: "January 1, 2025"
 revisions: []
 assets: []

articles/official-guides/getting-started/article.yaml

@@ -1,6 +1,6 @@
 title: "Getting Started"
 content: "article.md"
 author: "MTA Team"
-date: "2025-01-01 12:00:00"
+date: "January 1, 2025"
 revisions: []
 assets: []

articles/privacy/article.yaml

@@ -1,6 +1,6 @@
 title: "Privacy policy"
 content: "article.md"
 author: "MTA Team"
-date: "2025-01-01 12:00:00"
+date: "January 1, 2025"
 revisions: []
 assets: []

web/README.md

@@ -26,7 +26,9 @@ pip install -r requirements.txt
 
 ### Usage
 
-Depending on your operating system, you can run the following commands:
+Depending on your operating system, you can run the following commands to build and serve the wiki website.
+
+You may keep `server_web` running in the background (in another terminal) and rebuild the website with `build_web` whenever you make changes.
 
 #### Linux
 

web/resources/article.html

@@ -1,7 +1,6 @@
+{{ article.html_content }}
 
-<div style="float:right; text-align:right;">
-    <p><strong>{{ article.title }}</strong></p>
-    <p style="color: #b5b5b5;"><em>{{ article.author }}</em><br>{{ article.date }}</p>
+<div style="text-align: left; font-size: 0.8em; color: #b5b5b5; margin-top: 4em;">
+    <div>Article: <strong>{{ article.title }}</strong></div>
+    <div style="margin-top: 0.5em;">Written by <em>{{ article.author }}</em> on {{ article.date }}</div>
 </div>
-
-{{ article.html_content }}

web/resources/assets/style.css

@@ -119,10 +119,22 @@ header {
   opacity: 0.8;
 }
 #logo-wrapper {
-  max-width: 1080px;
-  padding: 2em;
+  height: 64px;
+  position: relative;
+  padding: 16px;
   margin: 0 auto;
 }
+.preview-badge {
+    position: absolute;
+    top: 10px;
+    left: 16px;
+    color: #fff;
+    padding: 0.25em 0.5em;
+    font-size: 0.75em;
+    font-weight: bold;
+    background-color: rgba(255, 115, 0, 0.8);
+    border-radius: 0.25em;
+}
 
 .function-type-title {
   float: right;

web/resources/layout.html

@@ -64,7 +64,11 @@
 
     <header>
         <div id="logo-wrapper">
-            <a href="/"><img id="logo" src="/assets/wikilogo.png" alt="Multi Theft Auto" /></a>
+            <a href="/"><img id="logo" src="/assets/wikilogo.png" alt="Multi Theft Auto"/></a>
+            {% if preview_mode %}
+            <div class="preview-badge">Preview</div>
+            {% endif %}
+            
         </div>
     </header>
 

web/scripts/builder.py

@@ -181,6 +181,7 @@ def parse_function_preview_images(self, function):
 
     def render_page(self, title, content):
         return self.layout_template.render(
+            preview_mode = os.environ.get('CI_PREVIEW', True),
             year = date.today().year,
             title = title,
             navigation = self.navigation,