From bcbd052444d3dd9b121ee0ec6d89be7249543a8f Mon Sep 17 00:00:00 2001
From: Zsolt Ero <zsolt.ero@gmail.com>
Date: Wed, 12 Jun 2024 13:29:46 +0200
Subject: [PATCH] website

---
 .../blocks/{map_howto.html => howto_use.html} | 22 +---------
 website/blocks/{main.md => index.md}          |  0
 website/blocks/map.html                       | 20 ++++++++++
 website/generate.py                           | 40 ++++++++++++++-----
 website/template_howto_use.html               | 38 ++++++++++++++++++
 .../{template.html => template_index.html}    |  2 +-
 6 files changed, 89 insertions(+), 33 deletions(-)
 rename website/blocks/{map_howto.html => howto_use.html} (79%)
 rename website/blocks/{main.md => index.md} (100%)
 create mode 100644 website/blocks/map.html
 create mode 100644 website/template_howto_use.html
 rename website/{template.html => template_index.html} (99%)

diff --git a/website/blocks/map_howto.html b/website/blocks/howto_use.html
similarity index 79%
rename from website/blocks/map_howto.html
rename to website/blocks/howto_use.html
index 50d54c4..fb50a2b 100644
--- a/website/blocks/map_howto.html
+++ b/website/blocks/howto_use.html
@@ -1,23 +1,4 @@
-<div id="map-container">
-  <div id="mapbg-image">
-    <div class="mapbg-attrib">
-      <a href="https://openfreemap.org" target="_blank">OpenFreeMap</a>
-      <a href="https://www.openmaptiles.org/" target="_blank">© OpenMapTiles</a> Data from
-      <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>
-    </div>
-  </div>
-</div>
-
-<p>Choose a style:</p>
-<div class="button-container">
-  <button onclick="selectStyle(event, 'positron')" class="btn">Positron</button>
-  <button onclick="selectStyle(event, 'bright')" class="btn">Bright</button>
-  <button onclick="selectStyle(event, 'liberty')" class="btn selected">Liberty</button>
-  <button onclick="selectStyle(event, 'liberty-3d')" class="btn">3D</button>
-</div>
-
-<p>Use the following style in a MapLibre map:</p>
-<pre><code class="lang-uri" id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code></pre>
+<p>How to use: <a href="#">In detail</a></p>
 
 <input type="checkbox" id="col1" class="col-chk" />
 <label for="col1" class="col-lbl">How to load MapLibre?</label>
@@ -129,4 +110,3 @@
   </div>
 </div>
 
-<div id="pricing"></div>
diff --git a/website/blocks/main.md b/website/blocks/index.md
similarity index 100%
rename from website/blocks/main.md
rename to website/blocks/index.md
diff --git a/website/blocks/map.html b/website/blocks/map.html
new file mode 100644
index 0000000..0ff48e2
--- /dev/null
+++ b/website/blocks/map.html
@@ -0,0 +1,20 @@
+<div id="map-container">
+  <div id="mapbg-image">
+    <div class="mapbg-attrib">
+      <a href="https://openfreemap.org" target="_blank">OpenFreeMap</a>
+      <a href="https://www.openmaptiles.org/" target="_blank">© OpenMapTiles</a> Data from
+      <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>
+    </div>
+  </div>
+</div>
+
+<p>Choose a style:</p>
+<div class="button-container">
+  <button onclick="selectStyle(event, 'positron')" class="btn">Positron</button>
+  <button onclick="selectStyle(event, 'bright')" class="btn">Bright</button>
+  <button onclick="selectStyle(event, 'liberty')" class="btn selected">Liberty</button>
+  <button onclick="selectStyle(event, 'liberty-3d')" class="btn">3D</button>
+</div>
+
+<p>Use the following style in a MapLibre map:</p>
+<pre><code class="lang-uri" id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code></pre>
diff --git a/website/generate.py b/website/generate.py
index 00476a8..1d005a7 100755
--- a/website/generate.py
+++ b/website/generate.py
@@ -14,21 +14,43 @@ def generate():
     shutil.rmtree(OUT_DIR, ignore_errors=True)
     OUT_DIR.mkdir()
 
-    template = open('template.html').read()
+    make_index_html()
+    make_howto_use()
+    make_js()
 
-    main_md = open('blocks/main.md').read()
+    make_static_page('privacy', 'Privacy Policy')
+    make_static_page('tos', 'Terms of Services')
+
+    copy_assets()
+
+
+def make_index_html():
+    template = open('template_index.html').read()
+
+    main_md = open('blocks/index.md').read()
     main_html = marko.convert(main_md)
 
-    index_html = template.replace('{main}', main_html)
+    template = template.replace('{body}', main_html)
 
-    map_howto = open('blocks/map_howto.html').read()
-    index_html = index_html.replace('<!--map_howto-->', map_howto)
+    map_howto = open('blocks/map.html').read()
+    template = template.replace('<!--map_howto-->', map_howto)
 
     support_plans = open('blocks/support_plans.html').read()
-    index_html = index_html.replace('<!--support_plans-->', support_plans)
+    template = template.replace('<!--support_plans-->', support_plans)
 
-    open(OUT_DIR / 'index.html', 'w').write(index_html)
+    open(OUT_DIR / 'index.html', 'w').write(template)
 
+
+def make_howto_use():
+    template = open('template_howto_use.html').read()
+
+    map_howto = open('blocks/map.html').read()
+    template = template.replace('<!--map_howto-->', map_howto)
+
+    open(OUT_DIR / 'howto_use.html', 'w').write(template)
+
+
+def make_js():
     pricing_json = json.load(open('assets/pricing.json'))
     support_plans_js = open('assets/support_plans.js').read()
     support_plans_js = support_plans_js.replace(
@@ -36,10 +58,6 @@ def generate():
     )
     open(OUT_DIR / 'support_plans.js', 'w').write(support_plans_js)
 
-    make_static_page('privacy', 'Privacy Policy')
-    make_static_page('tos', 'Terms of Services')
-    copy_assets()
-
 
 def copy_assets():
     for file in [
diff --git a/website/template_howto_use.html b/website/template_howto_use.html
new file mode 100644
index 0000000..1672577
--- /dev/null
+++ b/website/template_howto_use.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>How to use OpenFreeMap</title>
+    <meta
+      name="description"
+      content="Open and free custom maps for your website and apps, based on OpenStreetMap."
+    />
+
+    <!--    <meta property="og:title" content="" />-->
+    <!--    <meta property="og:type" content="" />-->
+    <!--    <meta property="og:url" content="" />-->
+    <!--    <meta property="og:image" content="" />-->
+
+    <!--    <link rel="icon" href="/favicon.ico" sizes="any" />-->
+
+    <link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
+    {body}
+
+    <div class="footer">
+      <a href="privacy">Privacy Policy</a>
+      <a href="tos">Terms of Service</a>
+    </div>
+
+    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
+
+    <script src="map_howto.js"></script>
+
+    <script src="https://unpkg.com/prismjs@1.29.0/components/prism-core.min.js"></script>
+    <script src="https://unpkg.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+  </body>
+</html>
diff --git a/website/template.html b/website/template_index.html
similarity index 99%
rename from website/template.html
rename to website/template_index.html
index a672ae3..ac1602e 100644
--- a/website/template.html
+++ b/website/template_index.html
@@ -32,7 +32,7 @@
       <a href="https://x.com/hyperknot" target="_blank"><img src="x.svg" alt="x" height="28" /></a>
     </div>
 
-    {main}
+    {body}
 
     <div class="footer">
       <a href="privacy">Privacy Policy</a>