From 2cad287c09f7608ae4ce7c5bab303baba53fb9f1 Mon Sep 17 00:00:00 2001
From: Zsolt Ero <zsolt.ero@gmail.com>
Date: Wed, 12 Jun 2024 16:29:10 +0200
Subject: [PATCH] astro

---
 website_astro/src/components/Logo.astro  | 12 ++++++++++++
 website_astro/src/components/Map.astro   | 11 ++++++-----
 website_astro/src/pages/_howto_use.astro |  3 +++
 website_astro/src/pages/index.astro      | 11 ++---------
 4 files changed, 23 insertions(+), 14 deletions(-)
 create mode 100644 website_astro/src/components/Logo.astro

diff --git a/website_astro/src/components/Logo.astro b/website_astro/src/components/Logo.astro
new file mode 100644
index 0000000..13dfc1a
--- /dev/null
+++ b/website_astro/src/components/Logo.astro
@@ -0,0 +1,12 @@
+---
+
+---
+
+<img src="/logo.jpg" alt="logo" height="200" class="logo" />
+<h1>OpenFreeMap</h1>
+<div class="icons">
+  <a href="https://github.com/hyperknot/openfreemap" target="_blank"
+    ><img src="/github.svg" alt="github" height="28" /></a
+  >
+  <a href="https://x.com/hyperknot" target="_blank"><img src="/x.svg" alt="x" height="28" /></a>
+</div>
diff --git a/website_astro/src/components/Map.astro b/website_astro/src/components/Map.astro
index 02a38f6..d7b6853 100644
--- a/website_astro/src/components/Map.astro
+++ b/website_astro/src/components/Map.astro
@@ -2,9 +2,6 @@
 
 ---
 
-<p>Use the following style in a MapLibre map:</p>
-<pre><code id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code></pre>
-
 <h2>How can I use it?</h2>
 <!--<p>(Click below, it's interactive!)</p>-->
 
@@ -25,8 +22,12 @@
   <button data-style="liberty-3d" class="btn">3D</button>
 </div>
 
-<p>You use OpenFreeMap by adding it to a website or mobile app.</p>
-<p><a href="#">How to use in detail</a></p>
+<p>
+  Have a look at the default styles and read more about how to integrate it to your website or app
+  here:
+</p>
+
+<p><a href="#">How to use OpenFreeMap</a></p>
 
 <script is:inline src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
 <script is:inline src="/scripts/map.js"></script>
diff --git a/website_astro/src/pages/_howto_use.astro b/website_astro/src/pages/_howto_use.astro
index 0a8787d..682ae3b 100644
--- a/website_astro/src/pages/_howto_use.astro
+++ b/website_astro/src/pages/_howto_use.astro
@@ -1,3 +1,6 @@
+  <h1>How to use OpenFreeMap in my website or app</h1>
+
+
 <input type="checkbox" id="col1" class="col-chk" />
 <label for="col1" class="col-lbl">How to load MapLibre?</label>
 <div class="col-cnt">
diff --git a/website_astro/src/pages/index.astro b/website_astro/src/pages/index.astro
index 36d4e2b..77c9daa 100644
--- a/website_astro/src/pages/index.astro
+++ b/website_astro/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import Layout from '../layouts/Layout.astro'
 import Map from '../components/Map.astro'
+import Logo from '../components/Logo.astro'
 
 import { Content as WhatIs } from '../content/index/whatis.md'
 import { Content as Pricing } from '../content/index/pricing.md'
@@ -8,15 +9,7 @@ import { Content as Rest } from '../content/index/rest.md'
 ---
 
 <Layout title="OpenFreeMap">
-  <img src="/logo.jpg" alt="logo" height="200" class="logo" />
-  <h1>OpenFreeMap</h1>
-  <div class="icons">
-    <a href="https://github.com/hyperknot/openfreemap" target="_blank"
-      ><img src="/github.svg" alt="github" height="28" /></a
-    >
-    <a href="https://x.com/hyperknot" target="_blank"><img src="/x.svg" alt="x" height="28" /></a>
-  </div>
-
+  <Logo />
   <WhatIs />
   <Map />