Add screenshots (#120)

* Add screenshots

* Improve build documentation

* Remove empty classes

.github/workflows/build.yml

@@ -19,7 +19,7 @@ jobs:
         mkdir env
         python3 -m venv env
         source env/bin/activate
-        python -m pip install MarkupSafe==2.0.1 tqdm jinja2==2.11.3 PyGithub minify-html
+        python -m pip install -r requirements.txt
         ./build.sh
         cssmin > dist/theme.css.min < dist/theme.css
         mv dist/theme.css.min dist/theme.css

README.md

@@ -5,12 +5,14 @@ This repo contains the main website contents for the xemu original Xbox emulator
 
 ### Build
 
-To build, simply run `rm -rf dist/ && ./build.sh` from within the project root
+To build, simply run `rm -rf dist/ && DEV=1 ./build.sh` from within the project root.
+
+To serve the built site, run in the `dist` directory: `python -m http.server`.
 
 #### Ubuntu
 
     $ sudo apt install wget unzip git python3 pip
-    $ pip install PyGithub tqdm minify_html
+    $ pip install -r requirements.txt
 
 #### Windows
 

generate.py

@@ -23,11 +23,11 @@ output_dir = 'dist'
 repo_url_base = 'https://raw.githubusercontent.com/xemu-project/xemu-website/master/'
 compatibility_reports_url = 'https://reports.xemu.app/compatibility'
 compatibility_reports_url_verify_certs = True
-main_url_base = 'https://xemu.app'
+main_url_base = os.environ.get('BASE_URL', 'https://xemu.app')
 # compatibility_reports_url = 'https://127.0.0.1/compatibility'
 # compatibility_reports_url_verify_certs = False
 
-develop_mode = False
+develop_mode = os.environ.get('DEV', 0) == '1'
 disable_load_issues = develop_mode
 disable_load_reports = develop_mode
 disable_load_version = develop_mode

requirements.txt

@@ -0,0 +1,5 @@
+MarkupSafe==2.0.1
+tqdm
+jinja2==2.11.3
+PyGithub
+minify-html

templates/template_index.html

@@ -187,7 +187,23 @@
 </div>
 <hr>
 
-<div class="" id="compatibility">
+<div id="screenshots">
+  <h2 class="mb-4 text-center">Screenshots</h2>
+  <div class="row">
+    <img src="/screenshot/0.png" class="img-fluid lazy" class="col" />
+    <img src="/screenshot/1.png" class="img-fluid lazy" class="col" />
+  </div>
+  <div class="row">
+    <img src="/screenshot/2.png" class="img-fluid lazy" class="col" />
+    <img src="/screenshot/3.png" class="img-fluid lazy" class="col" />
+  </div>
+  <div class="row">
+    <img src="/screenshot/4.png" class="img-fluid lazy" class="col" />
+    <img src="/screenshot/5.png" class="img-fluid lazy" class="col" />
+  </div>
+</div>
+
+<div id="compatibility">
 <h2 class="mb-4 text-center">Compatibility</h2>
 </div>
 <p>Title compatibility status is provided by volunteer reporters in the community, as the reporter experienced the title in the current version of xemu on their computer at time of reporting. As the project evolves, reports may need to be updated. You are invited to help improve the project by submitting an updated compatibility report. Join the Discord server to learn how to contribute!</p>